<!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="stylesheet" href="styles.css" />
<!-- Required to extend EventTarget class in Safari -->
<script src="https://unpkg.com/event-target@latest/min.js"></script>
<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"></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 id="tools-panel">
<button id="pen-tool" class="selected">
<i class="fa fa-paint-brush"></i>
</button>
<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">
<defs>
<marker
id="dot"
markerUnits="userSpaceOnUse"
markerWidth="4"
markerHeight="4"
refX="2"
refY="2"
>
<circle cx="2" cy="2" r="2" fill="blue" />
</marker>
</defs>
</svg>
<script src="js/app.js"></script>
</body>
</html>