<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Ever Given Ever Ywhere</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="/style.css" />

    <!-- import the webpage's javascript file -->
    <script src="/script.js" defer></script>
    <!-- import the Leaflet.js CSS and JavaScript files -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
      integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
      crossorigin=""
    />
    <script
      src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
      integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
      crossorigin=""
    ></script>
  </head>
  <body>
    <div id="topbar">
      <div
        class="glitchButton"
        style="position:fixed;top:20px;right:20px;"
      ></div>
      <script src="https://button.glitch.me/button.js"></script>
      <h1>
        <span class="h1-1">Ever Given</span><br /><span class="h1-2"
          >Ever Ywhere</span
        >
      </h1>
    </div>

    <div id="info">
      <p>
        Why should the Suez Canal have all the fun? From the comfort of home you
        can get the <em>Ever Given</em> stuck wherever you want it. Drag and
        zoom the map to move this big old boat somewhere else. Click the rotate
        button to get it wedged perfectly.
      </p>
      <p>
        Hit the "to scale" button to make it approximately the right size. Or
        you can make it whatever size you feel like: get it stuck in a swimming
        pool or across the entire Atlantic Ocean.
      </p>
      
      <p class="small">
      <a href="https://twitter.com/en_dash">Garrett Dash Nelson</a> made this
      ridiculous thing. Boat photo clipped from Kristin Carringer/Maxar,
      <a
        href="https://www.businessinsider.com/satellite-images-show-latest-effort-to-remove-suez-canal-ship-2021-3"
        >via BI</a
      >. If you thought this was fun, consider <a href="https://www.leventhalmap.org/donate/">supporting the Leventhal Map & Education Center</a>.
    </p>
      
      
    </div>
    
    <button id="info-hider" class="small">
        <span id="info-hider-text">Hide</span> info
    </button>

    <div id="controls">
      <button id="rotator">
        ⤵️ Rotate the boat
      </button>

      <button id="scale-bigger">
        ➕ Make the boat bigger
      </button>

      <button id="scale-smaller">
        ➖ Make the boat smaller
      </button>

      <button id="scaler" class="notactive">
        <span id="scalecheck">🔲</span> Boat <span id="scaletext">isn't</span> to scale
      </button>
    </div>

    

    <div id="container">
      <div id="map"></div>
      <img
        id="evergiven"
        src="https://cdn.glitch.com/40d83f73-34cc-401e-90f3-d6b2f92f2b01%2Fevergiven.png?v=1616949352560"
        alt="Evergiven"
      />
    </div>
  </body>
</html>