index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width" />
  <link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
  <link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
  <link rel="manifest" href="favicon/site.webmanifest">
  <title>Bad Apple - GitHub</title>
</head>

<body>

  <div class="container" id="container">
    <div class="top">
      <h2 id="contrib" class="contrib">0 contributions in the last year</h2>
      <details>
        <summary aria-haspopup="menu" role="button">
          Audio settings
        </summary>

        <details-menu role="menu">
          <div id="audio-controls">
            <input type="range" min="0" max="1" step="0.01" class="slider" value="0" id="volume"
              oninput="set_volume()" />
          </div>
        </details-menu>
      </details>
    </div>
    <div>

      <div class="display">
        <div class="muted" id="muted">
          <h1>🔇</h1>
        </div>

        <table class="grid" id="grid"></table>
        <div class="bot">
          <a class="learn" href="https://github.com/lnus/git-apple">Learn how I made this</a>
          <div>
            <span>Less</span>
            <div class="box" style="
                  display: inline-block;
                  margin: 0;
                  background-color: #272b33;
                "></div>

            <div class="box" style="
                  display: inline-block;
                  margin: 0;
                  background-color: #0e4429;
                "></div>
            <div class="box" style="
                  display: inline-block;
                  margin: 0;
                  background-color: #006d32;
                "></div>
            <div class="box" style="
                  display: inline-block;
                  margin: 0;
                  background-color: #26a641;
                "></div>
            <div class="box" style="
                  display: inline-block;
                  margin: 0;
                  background-color: #39d353;
                "></div>
            <span>More</span>
          </div>
        </div>
      </div>
    </div>

  </div>

  <audio id="audio" controls muted style="display: none;">
    <source src="assets/ba.mp3" type="audio/mpeg" />
  </audio>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"
    integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="script.js"></script>
</body>

</html>