<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="manifest" href="manifest.json" />
<link rel="shortcut icon" href="logo.png" />
<link rel="apple-touch-icon" href="logo.png" />
<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>
if (navigator.serviceWorker) {
navigator.serviceWorker.register("service-worker.js").then(
(registration) =>
console.log(
`Service worker registered on scope ${registration.scope}`,
),
(reason) =>
console.log(`Service worker failed to register ~ ${reason}`),
)
}
</script>
</head>
<body>
<div style="display:none">
Your client ID: <input id="user-id" type="text" value="" readonly="" />
</div>
<div style="display:none">
Enter peer ID: <input id="peer-id" type="text" value="" />
<button id="peer-connect">Connect</button>
</div>
<div id="top-panel">
<div class="top-bar">
<div class="dropdown">
<button class="dropdown-peers"><i class="fa fa-bars"></i></button>
<div class="peers">
<ul id="connected-peers">
No peers are connected
</ul>
</div>
</div>
<div id="overall-status-icon" class="synchronised">
<img
id="overall-status-icon-img"
src="synchronised.svg"
alt="Synchronisation status icon"
/>
</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 id="tools-panel">
<button id="pen-tool" class="selected">
<i class="fa fa-paint-brush"></i>
</button>
<div id="pen-properties" class="properties">
<div class="pen-contents">
<div class="pen-header">
<span class="close">×</span>
<h2>Pen properties</h2>
</div>
<div class="pen-body">
<div id="brush-colour">
<h3>Brush colour</h3>
</div>
<a href="#" style="margin-left: 1%">
<div id="rectangle"></div>
</a>
</div>
<div class="pen-body">
<div id="brush-colour">
<h3>Brush size</h3>
</div>
<div class="slide-size">
<input
type="range"
min="1"
max="100"
value="10"
class="slider"
id="range"
/>
<p style="text-align: center; margin: 0px">
Size: <span id="value"></span>
</p>
</div>
</div>
</div>
</div>
<div id="palette" class="properties" style="padding-top: 150px">
<div class="palette-selector">
<div class="wheel-header">
<span class="close">×</span>
<h2>Select a colour from the palette</h2>
</div>
<svg
id="wheel"
viewBox="0 10 100 70"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
style="@media only screen and (max-width: 600px) { viewBox: -50 10 200 100 }"
>
<defs>
<path
id="piePiece"
d="M 42.2,78.9 46.1,64.4 Q 50,65 53.88,64.48 L 57.7,78.9 Q 50,80 42.2,78.9Z"
/>
</defs>
<a href="#">
<use class="wheelPiece" xlink:href="#piePiece" fill="#329739" />
<use
class="wheelPiece"
xlink:href="#piePiece"
transform="rotate(30,50,50)"
fill="#639b47"
/>
<use
class="wheelPiece"
xlink:href="#piePiece"
transform="rotate(60,50,50)"
fill="#9ac147"
/>
<use
class="wheelPiece"
xlink:href="#piePiece"
transform="rotate(90,50,50)"
fill="#A9AA39"
/>
<use
class="wheelPiece"
xlink:href="#piePiece"
transform="rotate(120,50,50)"
fill="#e1e23b"
/>
<use
class="wheelPiece"
xlink:href="#piePiece"
transform="rotate(150,50,50)"
fill="#f7941e"
/>
<use
class="wheelPiece"
xlink:href="#piePiece"
transform="rotate(180,50,50)"
fill="#ba3e2e"
/>
<use
class="wheelPiece"
xlink:href="#piePiece"
transform="rotate(210,50,50)"
fill="#9a1d34"
/>
<use
class="wheelPiece"
xlink:href="#piePiece"
transform="rotate(240,50,50)"
fill="#662a6c"
/>
<use
class="wheelPiece"
xlink:href="#piePiece"
transform="rotate(270,50,50)"
fill="#272b66"
/>
<use
class="wheelPiece"
xlink:href="#piePiece"
transform="rotate(300,50,50)"
fill="#2d559f"
/>
<use
class="wheelPiece"
xlink:href="#piePiece"
transform="rotate(330,50,50)"
fill="#43a1cd"
/>
</a>
</svg>
<div id="others">
<div id="other-palette">
<b>Other colours</b>
</div>
<label id="colours">
<input id="other-colours" type="color" value="#0000ff" />
</label>
</div>
</div>
</div>
<button id="eraser-tool"><i class="fa fa-eraser"></i></button>
<div id="connected-room-info">
You are connected to a room: <span id="connected-room-id"></span>
</div>
</div>
</div>
<svg id="canvas"></svg>
<script src="js/app.js"></script>
</body>
</html>