index.html

<!DOCTYPE html>

<html lang="en">

<head>
      <meta charset="utf-8" />

      <title>Candidate Timer</title>
      <meta name="description"
            content="A timer originally made for the MVMHA candidate forum" />
      <meta name="author"
            content="Alex Brown" />
      <!-- Global site tag (gtag.js) - Google Analytics -->
      <script async
              src="https://www.googletagmanager.com/gtag/js?id=UA-49645063-1"></script>
      <script type="module">
            window.dataLayer = window.dataLayer || [];
            function gtag() { dataLayer.push(arguments); }
            gtag('js', new Date());

            gtag('config', 'UA-49645063-1');
      </script>

      <link rel="stylesheet"
            href="https://fonts.googleapis.com/icon?family=Material+Icons" />
      <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />

      <link rel="stylesheet"
            href="https://cdn.materialdesignicons.com/5.3.45/css/materialdesignicons.min.css">
      <link rel="stylesheet"
            href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">

      <link rel="stylesheet"
            href="src/materialize/css/materialize.css" />

      <link rel="icon" href="src/assets/favicon.ico" />

      <style>
            html {
                  height: 100%;
                  font-family: "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif
            }

            body {
                  display: flex;
                  height: 100%;
            }

            #toast-container {
                  right: 50%;
                  transform: translateX(50%);
            }

            #toast-container .toast {
                  white-space: pre-wrap;
            }
      </style>

</head>

<body>

      <div id="app"></div>

      <script type="module" src="src/js/vue-app.ts"></script>
</body>

</html>