index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="Keep track of time with an alternative to typical alarms and timers. Get audible reminders at the top of the hour, bottom of the hour, or the sides."
    />
    <title>TimeReminder | Keep track of time</title>
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="/src/apple-touch-icon.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="/src/favicon-32x32.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="/src/favicon-16x16.png"
    />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta
      name="apple-mobile-web-app-status-bar-style"
      content="black-translucent"
    />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://timeremind.info" />
    <meta property="og:title" content="Time Reminder" />
    <meta
      property="og:image"
      content="https://timeremind.info/src/time-reminder-screenshot.jpg"
    />
    <meta
      property="og:description"
      content="Keep track of time with an alternative to typical alarms and timers. Get audible reminders at the top of the hour, bottom of the hour, or the sides."
    />
    <meta property="og:site_name" content="TimeReminder" />
    <meta property="og:locale" content="en_US" />
    <meta property="og:image:width" content="830" />
    <meta property="og:image:height" content="600" />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@devjusty" />
    <meta name="twitter:creator" content="@devjusty" />
    <meta name="twitter:url" content="https://timeremind.info" />
    <meta name="twitter:title" content="TimeReminder" />
    <meta
      name="twitter:description"
      content="Keep track of time with an alternative to typical alarms and timers. Get audible reminders at the top of the hour, bottom of the hour, or the sides."
    />
    <meta
      name="twitter:image"
      content="https://timeremind.info/src/time-reminder-screenshot.jpg"
    />
    <link rel="manifest" href="/src/site.webmanifest" />
    <link rel="stylesheet" href="style.css" />
    <!-- Google tag (gtag.js) -->
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=G-8BKEPME5TE"
    ></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag("js", new Date());

      gtag("config", "G-8BKEPME5TE");
    </script>
  </head>

  <body>
    <div class="container">
      <div class="app">
        <header>
          <h1 class="name">TimeReminder</h1>
          <img
            src="./src/time-reminder-icon.png"
            alt="TimeReminder icon"
            width="64"
            height="64"
          />
        </header>
        <p class="about">
          An alternative to typical alarms and timers. Get reminders at the top
          of the hour, bottom of the hour, or the sides.
        </p>
        <span id="digital-clock"></span>
        <div class="clock-container">
          <div class="clock">
            <div class="notch zero active"></div>
            <div class="notch fifteen"></div>
            <div class="notch thirty"></div>
            <div class="notch fortyfive"></div>
            <div class="needle hour"></div>
            <div class="needle minute"></div>
            <div class="needle second"></div>
            <div class="center-point"></div>
          </div>
        </div>
        <span class="error-message"></span>
        <label>Remind at:</label>
        <div class="timetoggles">
          <button class="timebutton active" id="alarm1" data-remindtime="00">
            :00
          </b>
          <button class="timebutton" id="alarm2" data-remindtime="15">
            :15
          </button>
          <button class="timebutton" id="alarm3" data-remindtime="30">
            :30
          </button>
          <button class="timebutton" id="alarm4" data-remindtime="45">
            :45
          </button>
        </div>
        <div class="remind-until-container">
          <label for="remind-until">Remind Until: </label>
          <input type="time" id="remind-until" value="17:00" />
          <label for="remind-until-toggle" class="switch">
            <input type="checkbox" id="remind-until-toggle" />
            <span class="slider"></span
          ></label>
        </div>
      </div>

      <div class="floating-button">
        <a
          href="https://github.com/devjusty/TimeReminder"
          target="_blank"
          rel="noopener"
          >❔</a
        >
      </div>
      <script type="text/javascript" src="./script.js"></script>
    </div>
    <noscript> You need to enable JavaScript to run this app. </noscript>
  </body>
</html>