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 &mdash; part 1 A-D</title>
    <meta name="description" content="by Ma'ayan Tsadka">
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link rel="icon" href="agto.png">
    <meta property="og:title" content="An Audio Guide to Occupation">
    <meta property="og:description" content="by Ma'ayan Tsadka">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://nandn.org.il/agto">
    <meta property="og:image" content="https://nandn.org.il/agto/agto.png">
  </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">
              <h2>
                <strong>An Audio Guide to Occupation &mdash; part 1 A-D</strong>
              </h2>
              <h4>by Ma'ayan Tsadka</h4>
              <h5>
                (Originally appeared at <em>“From the Red Sea to the Dead Sea: a Soundscape of an Occupation 2018"</em> @ kunstradio.at)
              </h5>
            </button>
          </div>
        </div>
        <div class="row mb-3" style="height: 30vh">
          <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" style="padding-top:0; vertical-align:top">
              <h3>
                <strong>A.</strong> 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" style="padding-top:0; vertical-align:top">
              <h3>
                <strong>B.</strong> 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: 30vh">
          <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" style="padding-top:0; vertical-align:top">
              <h3>
                <strong>C.</strong> 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" style="padding-top:0; vertical-align:top">
              <h3>
                <strong>D.</strong> Means of Resistance
              <h5>&nbsp;</h5>
              </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">
              <h2>
                <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>
              </h2>
            </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>