Skip to content
Snippets Groups Projects
Commit 4e626d51 authored by Giovanni Caruso's avatar Giovanni Caruso
Browse files

Improved top-bar and UI

parent 4fdde353
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
public/index.html
+ 28
− 11
View file @ 4e626d51
...@@ -5,6 +5,10 @@ ...@@ -5,6 +5,10 @@
<link rel="manifest" href="manifest.json" /> <link rel="manifest" href="manifest.json" />
<link rel="shortcut icon" href="logo.png" /> <link rel="shortcut icon" href="logo.png" />
<link rel="stylesheet" href="styles.css" /> <link rel="stylesheet" href="styles.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<script> <script>
if (navigator.serviceWorker) { if (navigator.serviceWorker) {
navigator.serviceWorker navigator.serviceWorker
...@@ -20,29 +24,42 @@ ...@@ -20,29 +24,42 @@
} }
</script> </script>
</head> </head>
<body> <body style="background-color: black">
<div> <div style="display:none">
Your client ID: <input id="user-id" type="text" value="" readonly="" /> Your client ID: <input id="user-id" type="text" value="" readonly="" />
</div> </div>
<div> <div style="display:none">
Enter peer ID: <input id="peer-id" type="text" value="" /> Enter peer ID: <input id="peer-id" type="text" value="" />
<button id="peer-connect">Connect</button> <button id="peer-connect">Connect</button>
</div> </div>
<div> <div class="top-bar">
Enter room ID: <input id="room-id" type="text" value="" /> <div class="dropdown">
<button id="room-connect">Connect</button> <button class="dropdown-peers"><i class="fa fa-bars"></i></button>
<div class="peers">
<ul id="connected-peers"></ul>
</div>
</div>
<input
id="room-id"
type="text"
value=""
placeholder="Enter a room to connect to"
size="25"
color="gray"
/>
<button id="room-connect">Connect<i class="fa fa-link"></i></button>
</div> </div>
<div id="connected-room-info"> <div id="connected-room-info">
You are connected to a room: <span id="connected-room-id"></span> You are connected to a room: <span id="connected-room-id"></span>
</div> </div>
<div> <div>
Connected peers: <button id="pen-tool" class="selected">
<ul id="connected-peers"></ul> <i class="fa fa-paint-brush"></i>
</button>
<button id="eraser-tool"><i class="fa fa-eraser"></i></button>
</div> </div>
<button id="pen-tool" class="selected">Pen</button>
<button id="eraser-tool">Eraser</button>
<svg id="canvas"> <svg id="canvas" style="background-color: white">
<defs> <defs>
<marker <marker
id="dot" id="dot"
......
public/styles.css
+ 100
− 0
View file @ 4e626d51
...@@ -7,3 +7,103 @@ ...@@ -7,3 +7,103 @@
button.selected { button.selected {
background-color: lightgray; background-color: lightgray;
} }
.top-bar {
background-color: black;
opacity: 0.8;
width: 100%;
height: 37pt;
float: left;
}
.dropdown {
position: relative;
display: inline-block;
padding: 0.2%;
}
.dropdown-peers {
background-color: #2f2f2f;
color: white;
padding: 12px;
font-size: 16px;
border: none;
cursor: pointer;
border-radius: 4px;
transition-duration: 0.4s;
}
.peers {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.peers a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.peers a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .peers {
display: block;
}
.dropdown:hover .dropdown-peers {
background-color: #4f4f4f;
}
#room-id {
width: 90%;
padding: 10px;
box-sizing: border-box;
opacity: 0.8;
}
#room-connect {
background-color: #2f2f2f;
color: white;
padding: 12px;
font-size: 16px;
border: none;
cursor: pointer;
border-radius: 4px;
}
#pen-tool {
background-color: #2f2f2f;
color: white;
padding: 10px;
font-size: 16px;
border: none;
cursor: pointer;
border-radius: 50%;
}
#pen-tool:hover {
background-color: #4f4f4f;
transition-duration: 0.4s;
}
#eraser-tool {
background-color: #2f2f2f;
color: white;
padding: 10px;
font-size: 16px;
border: none;
cursor: pointer;
border-radius: 50%;
}
#eraser-tool:hover {
background-color: #4f4f4f;
transition-duration: 0.4s;
}
public/styles.css.save 0 → 100644
+ 33
− 0
View file @ 4e626d51
#canvas {
width: 100%;
height: 100%;
position: fixed;
}
button.selected {
background-color: lightgray;
}
.dropdown-peers {
background-color: #111;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.peers {
}
src/app.js
+ 1
− 1
View file @ 4e626d51
...@@ -134,7 +134,7 @@ function connectToARoom(roomID) { ...@@ -134,7 +134,7 @@ function connectToARoom(roomID) {
}) })
room.addEventListener("userJoin", ({ detail: id }) => { room.addEventListener("userJoin", ({ detail: id }) => {
const peerElem = document.createElement("li") const peerElem = document.createElement("p")
peerElem.innerHTML = id peerElem.innerHTML = id
connectedPeers.appendChild(peerElem) connectedPeers.appendChild(peerElem)
}) })
......
liowebrtc @ afa8666f
Compare f0b57a92...afa8666f
Subproject commit f0b57a9258b117b97e1b793de27f05b0c9d5e51f Subproject commit afa8666f796bdd40cc263354917632ea671dfee2
start_server.sh 0 → 100755
+ 1
− 0
View file @ 4e626d51
npm run build && npm start
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment