<!-- 
                          ██                                                
                  ████▒▒████                                            
                ▒▒▒▒▒▒▒▒▒▒▓▓▒▒▒▒                                        
                ██░░▒▒▒▒▒▒▒▒▓▓██                                        
            ████▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▓▓                                      
          ██▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒██                                    
        ▓▓▒▒▒▒▒▒▒▒░░▒▒▒▒▒▒▒▒▒▒░░▒▒▒▒██                                  
        ██▒▒▒▒▓▓██▒▒▒▒▓▓██▓▓██▒▒▒▒▒▒▒▒██                                
      ██▒▒▒▒██░░░░▓▓▓▓▓▓░░░░░░██▒▒▒▒▒▒██                                
      ▓▓▒▒██░░░░░░░░██░░░░░░░░░░██▒▒▒▒▒▒██                              
      ▓▓▒▒██░░░░░░░░░░░░░░░░░░░░░░██▒▒▒▒██                ████████      
    ██▓▓▒▒██░░░░░░░░░░░░░░░░░░░░░░▓▓▒▒████▓▓            ▓▓░░▒▒▒▒▒▒██    
  ▓▓░░▓▓▒▒██░░░░██░░░░░░██░░░░░░░░▓▓▒▒██░░░░██        ██░░▓▓██████▒▒██  
  ██░░██▒▒██░░░░██░░░░░░██░░░░░░██▒▒▒▒▓▓░░░░▓▓      ██░░▓▓        ██▓▓██
  ██░░▓▓▒▒▒▒██    ░░░░░░    ░░██▒▒▒▒▒▒██░░░░██      ██▒▒██          ▓▓▓▓
    ▓▓██▒▒▓▓░░░░░░▒▒▒▒▒▒░░░░░░░░▓▓▒▒▒▒██████        ██▒▒██              
      ██▓▓██░░░░░░░░██░░░░░░░░░░░░██▒▒▓▓██          ██▒▒██              
        ████░░░░██░░██░░░░▓▓░░░░░░▓▓▒▒██▓▓██          ██▒▒██            
          ▓▓░░░░░░▓▓██████░░░░░░██▓▓▒▒▒▒▒▒▒▒██          ██▒▒██          
            ██░░░░░░░░░░░░░░░░██▓▓▒▒▒▒▒▒▒▒▒▒▒▒██          ██▒▒▓▓        
              ████▓▓██████████▓▓██▒▒▒▒▒▒██▒▒▒▒░░██        ██▒▒▓▓        
              ██▒▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▒██▓▓▒▒▒▒██        ██▒▒██        
              ██▒▒▒▒▓▓▓▓██▓▓▒▒▒▒▓▓▒▒▒▒▒▒██▓▓▒▒▒▒░░▓▓      ▓▓▒▒▓▓        
              ██▒▒▒▒██    ██▒▒▒▒██▒▒▒▒▒▒██▓▓▒▒▒▒▒▒██    ██▓▓▓▓          
            ██▒▒▒▒▓▓██    ██▒▒▒▒██▒▒▒▒▒▒██▓▓▒▒▒▒▒▒▒▒████▓▓██            
            ██▒▒▒▒▓▓██    ██▒▒▒▒▒▒▓▓▒▒▒▒▓▓██▓▓▒▒▒▒▒▒▒▒▓▓▓▓              
            ██▒▒▓▓██    ▓▓▒▒▒▒▒▒▒▒▓▓▒▒▒▒▓▓██▓▓▒▒▒▒▒▒▒▒░░▓▓              
            ██▒▒▓▓▓▓  ██▒▒▒▒▒▒▒▒▓▓▓▓▒▒▒▒▓▓██▓▓▓▓▒▒▒▒▒▒▒▒░░██            
            ██████████▒▒▒▒▒▒▒▒▓▓▓▓██████████▓▓██▓▓▒▒▒▒▒▒▒▒██            
            ██░░░░░░▓▓▒▒▒▒▒▒▓▓▓▓████░░░░░░▓▓    ██▓▓▒▒▒▒▒▒░░▓▓          
            ██░░░░░░▓▓▒▒▒▒▓▓▓▓██  ▓▓░░░░░░░░▓▓  ██▓▓▒▒▒▒▒▒▒▒▓▓          
              ██████████████████    ██████████  ████████▓▓████▓▓        
              ██░░██░░██░░░░░░░░██            ▓▓░░░░░░░░██░░██░░▓▓      
              ▓▓██████████▒▒██████            ██████▒▒██████████▓▓      
                                RETURN TO MONKE
-->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
  <meta property="og:type" content="website">
  <meta property="og:url" content="http://www.TermiteWar3.com/">
  <meta property="og:image" content="./img/poster-meta.png">
  <meta property="og:site_name" content="Termite War III - Space Monkeys">
  <meta property="og:description" content="Each of us has the power to control history - Space Monkeys!">
  <style>
    @import url("https://fonts.googleapis.com/css2?family=Goldman:wght@400;700&display=swap");

    * {
      margin: 0;
      box-sizing: border-box;
    }

    body {
      background-color: #000000;
    }

    .spacescene-container {
      position: fixed;
      top: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: -40;
    }

    #spaceScene {
      /* Make video to at least 100% wide and tall */
      min-width: 100%;
      min-height: 100%;

      /* Setting width & height to auto prevents the browser from stretching or squishing the video */
      width: auto;
      height: auto;

      /* Center the video */
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .spacemonkey-container {
      position: relative;
      z-index: -30;
      text-align: center;
      display: block;
      margin: auto;
    }

    #spacemonkey-title {
      margin: 2rem auto 0;
      display: block;
      width: 850px;
    }

    p,
    a,
    .response {
      font-family: "Goldman";
      font-style: normal;
      font-weight: 400;
      font-size: 24px;
      line-height: 29px;
      color: #e6e6e6;
      text-align: center;
      margin: 0;
    }

    #mce-responses {
      position: relative;
    }

    .response {
      margin: 1.5rem 0 0;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    h1 {
      font-family: "Goldman";
      font-style: normal;
      font-weight: 400;
      font-size: 40px;
      line-height: 44px;
      text-align: center;
      letter-spacing: 0.18em;
      color: #e6e6e6;
      text-shadow: 0px 0px 15px #000000;
      text-transform: uppercase;
      width: 850px;
      margin: 0 auto;
    }

    h2 {
      font-family: "Goldman";
      font-style: normal;
      font-weight: 700;
      font-size: 30px;
      line-height: 28px;
      text-align: center;
      letter-spacing: 0.18em;
      color: #e6e6e6;
      text-transform: uppercase;
      font-weight: normal;
    }

    hr {
      margin: 2rem auto;
      width: 850px;
      border: 1px solid #f72020;
    }

    .bold {
      font-weight: bold;
    }

    .poster-image {
      border: 5px solid #f72020;
      width: 600px;
      display: block;
      margin: 0.75rem auto 0.5rem;
    }

    .video-link {
      text-decoration: none;
      border: 1px solid #f72020;
      background-color: #000000;
      margin: 0.5rem 0.2rem;
      padding: 1rem;
      width: 194px;
      display: inline-block;
      transition: background-color 0.35s;
    }

    .termite-poster-image {
      transition: 0.35s;
      box-sizing: border-box;
    }

    .termite-poster-image:hover {
      border: 5px solid #e6e6e6;
    }

    .video-link:hover {
      background-color: #f72020;
    }

    .video-link-3 {
      margin: 0 auto;
      text-align: center;
    }

    .button-link-4 {
      margin: 0 auto;
      text-align: center;
    }

    .previous-termite-wars {
      display: flex;
      justify-content: center;
    }

    .previous-termite-wars-column {
      margin: 0 0.25rem;
    }

    .previous-termite-wars .poster-image {
      width: 400px;
    }

    .spacemoneky-contact-form {
      text-align: center;
    }

    input::placeholder {
      color: #e6e6e6;
      border-radius: 0;
    }

    input {
      border: 1px solid #f72020;
      background-color: #000000;
      text-align: center;
      font-family: "Goldman";
      font-size: 24px;
      color: #e6e6e6;
      display: inline-block;
      width: 342px;
      padding: 1rem;
      margin: 1rem auto;
      appearance: none;
      color: #e6e6e6;
      border-radius: 0px;
    }

    input:focus {
      outline: none;
    }

    input:focus::placeholder {
      color: transparent;
    }

    button {
      background-color: #f72020;
      text-align: cente-r;
      font-family: "Goldman";
      font-size: 24px;
      color: #e6e6e6;
      display: block;
      border: 0px;
      cursor: pointer;
      width: 686px;
      padding: 1rem;
      margin: 0 auto;
      transition: 0.35s;
    }

    button.button:hover {
      background-color: #e6e6e6;
      color: #f72020;
    }

    .monkey-footer {
      margin: 2rem auto;
      display: block;
      text-align: center;
    }

    #audio-control {
      position: fixed;
      bottom: 10px;
      right: 10px;
      cursor: pointer;
      font-size: 24px;
      margin: 0px;
    }

    #audio-control span {
      color: #e6e6e6;
      font-family: "Goldman";
      font-size: 16px;
    }

    .disable-button {
      cursor: auto;
    }

    .disable-button:hover {
      /* opacity: 0; */
    }

    @media only screen and (max-width: 900px) {
      button {
        width: 342px;
      }

      #spacemonkey-title {
        width: 90%;
      }

      .spacemonkey-container video {
        width: 90%;
      }

      hr {
        width: 90%;
        margin: 1rem auto;
      }

      h1 {
        font-size: 24px;
        line-height: normal;
        width: auto;
        padding: 0 20px;
      }

      h2 {
        font-size: 18px;
        line-height: normal;
        width: 90%;
        margin: 0 auto;
        margin-top: 3rem !important;
      }

      p {
        font-size: 16px;
      }

      .poster-image {
        width: 90%;

      }

      .previous-termite-wars {
        display: block;
      }

      .previous-termite-wars .poster-image {
        width: 90%;
      }

      input,
      button {
        margin-top: 1rem;
        margin-bottom: 0;
        width: 90%;
      }

     .response {
        font-size: 18px;
        line-height: normal
      }
    }
  </style>
  <title>The Termite War III - Space Monkeys</title>
</head>

<body>

  <div class="spacescene-container">
    <video src="img/spacescene.mp4" id="spaceScene" autoplay loop muted></video>
  </div>
  <img src="img/spacemonkeytitle.png" id="spacemonkey-title">
  <div class="spacemonkey-container">
    <video autoplay loop muted poster="./img/poster-spacemonkey-video.png">
      <!-- <source src="img/spacemonkey.mov" type='video/mp4; codecs="hvc1"'> -->
      <source src="img/spacemonkey.webm" type="video/webm">
    </video>
  </div>
  <hr>
  <h1>each of us has the power to control history</h1>
  <hr>
  <h2 style="margin-top: 4rem;"><span class="bold">the termite war III</span><br>space monkey trailer</h2>
  <img src="img/poster-termite3.png" class="poster-image">
  <p>Watch on</p>
  <div class="video-link-3">
    <a href="https://www.youtube.com/watch?v=MhGtUEQx_x4" target="_self" class="video-link">YouTube</a>
    <a href="https://odysee.com/@LoveLifeAnarchy/SpaceMonkeys-Trailer" target="_self" class="video-link">Odysee</a>
    <a href="https://t.me/LoveLifeAnarchyVideos/63" target="_self" class="video-link">Telegram</a>
  </div>
  <h2 style="margin-top: 6rem;"><span class="bold">Act 1</span><br>the rainmaker</h2>
  <img src="img/poster-rainmaker.png" class="poster-image">
  <p>Due early/mid 2022</p>
  <h2 style="margin-top: 6rem;"><span class="bold">act II</span><br>planet of the apes</h2>
  <img src="img/poster-planetoftheapes.png" class="poster-image">
  <p>Due mid/late 2022</p>
  <h2 style="margin-top: 6rem;"><span class="bold">act III</span><br>interstellar</h2>
  <img src="img/poster-interstellar.png" class="poster-image">
  <p>Due late 2022 / early 2023</p>
  <hr>
  <h2>PREVIOUS Termite wars</h2>
  <div class="previous-termite-wars">
    <div class="previous-termite-wars-column">
      <a href="https://www.lovelifeanarchy.com/TheTermiteWar"><img src="img/poster-termite1.png"
          class="poster-image termite-poster-image"></a>
      <p>Termite War I</p>
    </div>
    <div class="previous-termite-wars-column">
      <a href="https://www.lovelifeanarchy.com/SophEternal"><img src="img/poster-termite2.png"
          class="poster-image termite-poster-image"></a>
      <p>Termite War II</p>
    </div>
  </div>
  <hr>
  <h2 style="margin-top: 2rem;"><span class="bold">TERMITE WAR III</span><br>Santa Inc XMAS Special</h2>
  <img src="img/poster-santainc.png" class="poster-image">
  <p>Watch on</p>
  <div class="video-link-3">
    <a href="https://www.bitchute.com/video/qRB0kHo0a3O5/" target="_self" class="video-link">BitChute</a>
    <a href="https://odysee.com/@LoveLifeAnarchy/SantaInc" target="_self" class="video-link">Odysee</a>
    <a href="https://t.me/LoveLifeAnarchyVideos/57" target="_self" class="video-link">Telegram</a>
  </div>
  <hr style="margin: 4rem auto;">
  <h2>get notified on next update</h2>

  <!-- custom form start -->

  <div class="spacemoneky-contact-form">
    <form
      action="https://lovelifeanarchy.us7.list-manage.com/subscribe/post?u=6b6d17bb0b6baac76eadfc4c5&amp;id=3d479ad5fb"
      method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank"
      novalidate>
      <input type="text" placeholder="Name" id="firstname" name="FNAME" required>
      <input type="email" placeholder="Email" name="EMAIL" id="email" required>
      <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text"
          name="b_6b6d17bb0b6baac76eadfc4c5_3d479ad5fb" tabindex="-1" value=""></div>
      <div class="optionalParent">
        <div class="clear foot">
          <button class="button" id="mailchimp-submit">Submit</button>
        </div>
      </div>
  </div>
  </form>
  <div id="mce-responses" class="clear foot">
    <div class="response" id="mce-error-response" style="display:none"></div>
    <div class="response" id="mce-success-response" style="display:none"></div>
  </div>
  <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>
  <script
    type='text/javascript'>(function ($) { window.fnames = new Array(); window.ftypes = new Array(); fnames[0] = 'EMAIL'; ftypes[0] = 'email'; fnames[1] = 'FNAME'; ftypes[1] = 'text'; fnames[2] = 'LNAME'; ftypes[2] = 'text'; }(jQuery)); var $mcj = jQuery.noConflict(true);</script>
  </div>

  <!-- custom form end -->

  <hr style="margin: 4rem auto;">
  <h2 style="margin-bottom: 1rem;">donate to love life & anarchy</h2>
  <div class="button-link-4">
    <a href="https://www.paypal.me/lovelifeanarchy" target="_self" class="video-link">PayPal</a>
    <a href="https://www.buymeacoffee.com/AMoIcYReP" target="_self" class="video-link">Coffee</a>
    <a href="bitcoin:3QyR44L5XUBYRXimNZyuPswzK2XZR37aHq" target="_self" class="video-link">Bitcoin</a>
    <a href="monero:4596NpcR8xFbHXnBkuGojea8dda4Fk1o6NBnHgFjc8y8YUnGr9G7GLk2meFbSEztfickrxzMqoV1QRWz4TuPjyrLVjfB6Aj"
      target="_self" class="video-link">Monero</a>

  </div>
  <hr style="margin: 4rem auto;">
  <h2 style="margin-bottom: 1rem;">follow love life & anarchy</h2>
  <div class="button-link-4">
    <a href="https://www.lovelifeanarchy.com/" target="_self" class="video-link">Website</a>
    <a href="https://t.me/LoveLifeAnarchyVideos" target="_self" class="video-link">Telegram</a>
    <a href="https://gab.com/lovelifeanarchy" target="_self" class="video-link">Gab</a>
    <a href="https://odysee.com/@LoveLifeAnarchy" target="_self" class="video-link">Odysee</a>
  </div>
  <div class="button-link-4" style="margin-bottom: 1rem;">
    <a href="https://www.youtube.com/channel/UC0KMP4SsywLPFYafFvl7uYQ/" target="_self" class="video-link">YouTube</a>
    <a href="https://twitter.com/lifeloveanarchy" target="_self" class="video-link">Twitter</a>
    <a href="https://t.me/+UrVoBeWMQ4RkNTdl" target="_self" class="video-link">Chat</a>
    <a href="https://www.facebook.com/lovelifeanarchy/" target="_self" class="video-link">Facebook</a>
  </div>
  <div class="monkey-footer">
    🐵🙈🐵🙉🐵🙊🐵🙈🐵🙉🐵🙊🐵🙈🐵🙉🐵🙊🐵🙈🐵🙉🐵🙊🐵🙈🐵🙉🐵🙊🐵🙈🐵🙉🐵🙊🐵
  </div>
  <div id="audio-control" style="vertical-align:middle;">

  </div>

</body>
<script>

  let audioFlag = new Boolean(false)
  const audio = new Audio()
  const audioplayer = document.getElementById("audio-control")
  const mailchimpSubmit = document.getElementById("mailchimp-submit");

  function initSite() {
    toggleSound()

  }

  function getRandomArbitrary(min, max) {
    return Math.round(Math.random() * (max - min) + min)
  }

  document.body.addEventListener("click", initPlayAudio)

  audioplayer.addEventListener("click", (e) => {
    e.stopPropagation();
    document.body.removeEventListener("click", initPlayAudio)
    toggleSound()
  })

  function initPlayAudio() {
    document.body.removeEventListener("click", initPlayAudio)
    toggleSound()
  }

  function toggleSound() {

    if (audioFlag) {
      audioFlag = !audioFlag
      audio.pause()
    } else {
      audioFlag = !audioFlag
      audio.play()
    }
    audioplayer.innerHTML = switchAudioMessage()
  }

  function switchAudioMessage() {
    return audioFlag
      ? '<span style="vertical-align:middle;">music on</span> 🐵'
      : '<span style="vertical-align:middle;">music off</span> 🙉'
  }

  audio.loop = true
  audio.volume = 0.3
  audio.src = `./music/texture${getRandomArbitrary(1, 9)}.mp3`

  initSite()

  // mailchimp start 

  // API Submit New Email Address: https://us7.api.mailchimp.com/3.0/lists/3d479ad5fb

  let mcName = document.getElementById('firstname').value;
  let mcEmail = document.getElementById('email').value;
  const mcSubmit = document.getElementById('mailchimp-submit');
  // mcSubmit.addEventListener('click', e => {
  //   e.preventDefault();
  // })
  // mcSubmit.addEventListener('click', submitFunction)

  function submitFunction(e) {
    initMailchimpSubmit();
  }

  function initMailchimpSubmit() {
    mcSubmit.innerHTML = "Standby..."
    mcSubmit.removeEventListener('click', submitFunction);
    mcName = document.getElementById('firstname').value;
    mcEmail = document.getElementById('email').value;
    mcSubmit.classList.remove("button");
    mcSubmit.classList.add("disable-button");
    var data = {
      FNAME: mcName,
      EMAIL: mcEmail
    };
    console.log("Sending this json through post:" + JSON.stringify(data));
    fetch("https://us7.api.mailchimp.com/3.0/lists/3d479ad5fb", {
      method: 'post',
      headers: {
        "Content-Type": "application/json",
        Authorization: 'auth 218522ef3c0215c9fef5fce1f795ef11-us7'
      },
      body: JSON.stringify(data)
    })
      .then((res) => res)
      .then((data) => submitSuccess(data))
      .catch(err => submitFailure(err))
  }
  function submitSuccess(data) {
    console.log("Success: " + data);
    mcSubmit.innerHTML = "Welcome aboard space monkey"
  }
  function submitFailure(err) {
    console.log("Fail: " + err);
    mcSubmit.innerHTML = "Launch fail"

  }
  // const data = {
  //   members: [
  //     {
  //       email_address: email,
  //       status: 'subscribed',
  //       merge_fields: {
  //         FNAME: mcName,
  //         EMAIL: mcEmail
  //       }
  //     }
  //   ]
  // }

  // const options = {
  //   url: 'https://us7.api.mailchimp.com/3.0/lists/3d479ad5fb',
  //   method: 'POST',
  //   headers: {
  //     Authorization: 'auth 218522ef3c0215c9fef5fce1f795ef11-us7'
  //   },
  //   body: postData
  // }

  // const postData= JSON.stringify(data);

  // mailchimp end 


</script>

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-176293681-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }
  gtag('js', new Date());

  gtag('config', 'UA-176293681-1');
</script>

</html>