Skip to content
Snippets Groups Projects
index.html 2.06 KiB
Newer Older
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
Nayeem Rahman's avatar
Nayeem Rahman committed
    <link rel="manifest" href="manifest.json" />
    <link rel="shortcut icon" href="logo.png" />
Yuriy Maksymets's avatar
Yuriy Maksymets committed
    <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>
  <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>
        <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>