index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#00A5EF" />
    <meta
      name="description"
      content="Know your current device's battery status in realtime"
    />
    <meta name="author" content="Max Programming" />
    <title>Battery Info</title>
    <link rel="stylesheet" href="./styles.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap"
      rel="stylesheet"
    />
    <link rel="icon" href="./img/battery-half.ico" />
    <link
      rel="shortcut icon"
      href="./img/battery-half.png"
      type="image/x-icon"
    />
    <link rel="apple-touch-icon" href="./img/battery-half.png" />
  </head>
  <body>
    <header>
      <img src="./img/battery.png" alt="" />
      <h2 class="heading">Battery Info</h2>
    </header>
    <main>
      <div class="container battery-container">
        <h4 class="text-center mb-3 unsupported">
          This battery informer is not supported by
          <i class="fab fa-firefox-browser"></i> Firefox browser,
          <i class="fab fa-safari"></i> Safari, and Brave browser <br />
          <br />
          It seems like your browser does not support getting your battery
          status
          <br />
          Try the new
          <a href="https://microsoftedge.com"
            ><i class="fab fa-edge"></i> Microsoft Edge</a
          >
          or
          <a href="https://chrome.com"
            ><i class="fab fa-chrome"></i> Google Chrome</a
          >
          browser
        </h4>
        <div class="supported">
          <h4 class="text-center mb-3">
            Dark theme is good for your battery health
          </h4>
          <div class="progress-bar-striped">
            <div style="width: 30%" id="progressBar">
              <p id="progress"></p>
            </div>
          </div>

          <h4 class="text-center mt-3 d-none" id="chargingText">Charging...</h4>
          <h5 class="text-center mt-3" id="doneIn"></h5>
          <img
            class="mt-3 mx-auto d-block"
            id="emoji"
            style="transition: all 0.3s ease"
            src="./img/emojis/blue.png"
            alt=""
          />
          <!-- <div class="links mt-3">
            <ul class="mx-auto justify-content-md-around">
              <li>
                <a
                  href="https://github.com/max-programming/battery-info-javascript"
                  class="text-white"
                  target="_blank"
                  ><i class="fab fa-github"></i> Github repository</a
                >
              </li>
              <li>
                <a
                  href="https://codepen.io/Max_Programming/full/jObeGMj"
                  class="text-white"
                  target="_blank"
                  ><i class="fab fa-codepen"></i> Codepen pen</a
                >
              </li>
              <li>
                <a
                  href="https://youtu.be/J8_hwKSeffY"
                  class="text-danger"
                  target="_blank"
                >
                  <i class="fab fa-youtube"></i> YouTube Tutorial
                </a>
              </li>
            </ul>
          </div> -->
        </div>
        <!-- <h4 class="text-center mt-3">
          Estimated time remaining: <span id="time"></span>
        </h4> -->
        <h4
          class="text-center mb-3 position-absolute"
          style="font-size: 12px; bottom: 0"
        >
          Unfortunately, this won't work on Brave browser,
          <i class="fab fa-firefox-browser"></i> Firefox browser and
          <i class="fab fa-safari"></i> Safari
        </h4>
      </div>
    </main>
    <script
      src="https://kit.fontawesome.com/a1b417789e.js"
      crossorigin="anonymous"
      SameSite
    ></script>
    <script src="./ts/app.ts"></script>
  </body>
</html>