index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bostonhacks</title>
  </head>
  <body style="margin: 0; padding: 0">
    <div id="root"></div>

    <noscript>
      <strong
        >We're sorry but BostonHacks doesn't work properly without JavaScript
        enabled. Please enable it to continue.</strong
      >
    </noscript>
    <svg
      id="initLoader"
      viewBox="-1 0 102 124"
      xmlns="http://www.w3.org/2000/svg"
    >
      <style>
        #initLoader {
          width: 100%;
          height: 100%;
          max-height: 100vh;
          max-width: 100vw;
          position: absolute;
          z-index: 1;
        }
        .text {
          font: 20px 'Roboto', arial, sans-serif;
        }
        @keyframes example {
          0% {
            stroke: gray;
          }
          25% {
            stroke: white;
          }
          50% {
            stroke: gray;
          }
          75% {
            stroke: white;
          }
          100% {
            stroke: gray;
          }
        }
        .grayLine {
          stroke: gray;
          animation-name: example;
          animation-duration: 2s;
          animation-iteration-count: infinite;
        }
        .hidden {
          display: none;
        }
      </style>
      <g transform="scale(0.5) translate(50 50)">
        <g
          class="grayLine"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="9"
          stroke-width="9"
          fill="none"
        >
          <path d="m51 10 8 14" />
          <path d="m73 48 8 14" />
          <path d="m87 72 9 16" />
          <path d="m68 67 12.5 22" />
          <path d="m31 40 17 -10" />
          <path d="m49 46 17 -10" />
          <path d="m18 63.5 20 -11.5" />
          <path d="m4 88 57 -33" />
          <path d="m30 89 27 -15.5" />
          <path d="m58 89 5 -3" />
        </g>
        <text
          x="10"
          y="35"
          class="text"
          font="arial"
          transform="translate(0,83)"
        >
          Loading...
        </text>
      </g>
    </svg>
    <script>
      window.addEventListener('load', function (event) {
        const svg = document.querySelector('#initLoader');
        svg.classList.add('hidden');
      });
    </script>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>