<!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" />
<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>
Your client ID: <input id="user-id" type="text" value="" readonly="" />
</div>
<div>
Enter peer ID: <input id="peer-id" type="text" value="" />
<button id="peer-connect">Connect</button>
</div>
<div>
Enter room ID: <input id="room-id" type="text" value="" />
<button id="room-connect">Connect</button>
</div>
<div id="connected-room-info">
You are connected to a room: <span id="connected-room-id"></span>
</div>
<div>
Connected peers:
<ul id="connected-peers"></ul>
</div>
<button id="pen-tool" class="selected">Pen</button>
<button id="eraser-tool">Eraser</button>
<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>