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>
            </button>
          </div>
        </div>
        <div class="row mb-3" style="height: 23vh">
          <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: 23vh">
          <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;<br/>&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 class="row mb-3">
          <div class="col-12">
              <p>
                A sonic archive, using found materials from the daily life in occupied Palestine. It makes use of minimum sound manipulations.Mostly isolating moments, categorizing, and at times layering. It is intended to be an ongoing documentation. 
                Originally appeared at <em>“From the Red Sea to the Dead Sea: a Soundscape of an Occupation 2018"</em> @ <em>kunstradio.at</em>
              </p>
          </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>