agto/index.html

<!doctype html>
<html lang="en" data-bs-theme="dark">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>An Audio Guide to Occupation</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body onclick="fullScreen()">
    <main>
      <div class="container-fluid">
        <div class="row my-3">
          <div class="col-12">
            <button onclick="playSound('maayan-tsadka-an-audio-guide-to-ocupation-intro.mp3')" class="btn btn-secondary text-center w-100 h-100">
              <h1>
                An Audio Guide to Occupation &mdash; part 1 A-D<br/>
                <small>by Ma'ayan Tsadka</small>
              </h1>
            </button>
          </div>
        </div>
        <div class="row mb-3" style="height: 35vh">
          <div class="col-6">
            <button onclick="playSound('maayan-tsadka-an-audio-guide-to-ocupation-part-1-a.mp3')" class="btn btn-secondary text-center w-100 h-100">
              <h3>
                A. Means of Intimidation
              </h3>
              <h5>Israeli military night raid</h5>
            </button>
          </div>
          <div class="col-6">
            <button onclick="playSound('maayan-tsadka-an-audio-guide-to-ocupation-part-1-b.mp3')" class="btn btn-secondary text-center w-100 h-100">
              <h3>
                B. Means of Crowd Control <br/>
              </h3>
              <h5>
                Tear Gas &bull;
                The Skunk: Water Cannon
              </h5>
            </button>
          </div>
        </div>
        <div class="row mb-3" style="height: 35vh">
          <div class="col-6">
            <button onclick="playSound('maayan-tsadka-an-audio-guide-to-ocupation-part-1-c.mp3')" class="btn btn-secondary text-center w-100 h-100">
              <h3>
                C. Means of Killing<br/>
              </h3>
              <h5>
                Rubber-Coated Steel Bullets &bull;
                Live Ammunition &bull;
                Snipers &bull;
                Air Strike on Gaza
              </h5>
            </button>
          </div>
          <div class="col-6">
            <button onclick="playSound('maayan-tsadka-an-audio-guide-to-ocupation-part-1-d.mp3')" class="btn btn-secondary text-center w-100 h-100">
              <h3>
                D. Means of Resistance
              </h3>
            </button>
          </div>
        </div>
        <div class="row mb-3">
          <div class="col-12">
            <button onclick="stopSound()" class="btn btn-secondary text-center w-100 h-100">
              <h1>
                <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-stop-fill" viewBox="0 0 16 16">
                  <path d="M5 3.5h6A1.5 1.5 0 0 1 12.5 5v6a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 11V5A1.5 1.5 0 0 1 5 3.5"></path>
                </svg>
              </h1>
            </button>
          </div>
        </div>
      </div>
    </main>
    <script src="bootstrap/js/bootstrap.bundle.min.js"></script>
    <script>
      window.sound = null;
      function fullScreen() {
        document.body.requestFullscreen();
      }
      function stopSound() {
        if (window.sound) {
          window.sound.pause();
        }
      }
      function playSound(filename) {
        stopSound();
        window.sound = new Audio('audio/'+filename);
        window.sound.play();
      }
    </script>
  </body>
</html>