index.html

---
layout: default
sass: css/index.css
---

<div id="intro">
  <div class="blurLoader">
    <a href="https://fuly.network">
      <img class="absLogo" src="assets/logo.svg" />
    </a>
    <span class="absCopyText">Picture (c) by <a href="https://twitter.com/adamgryu">adamgryu</a></span>
    <div class="row mainContent">
      <div class="videoContainer" id="video"></div>
      <script>
        var tag = document.createElement('script');

        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        var player;
        function onYouTubeIframeAPIReady() {
        player = new YT.Player('video', {
          width: '504',
          height: '284',
          host: 'https://www.youtube-nocookie.com',
          videoId: '{{site.youtubeVideoId}}',
          playerVars: { 'autoplay': 1, 'controls': 0, 'mute': 1, 'disablekb': 1, 'fs': 0 },
          events: { 'onStateChange': onPlayerStateChange }
        });
        }

        function onPlayerStateChange(event) {
          if (event.data == YT.PlayerState.ENDED) {
          player.seekTo(0);
          player.playVideo();
          }
        }
      </script>
      <div class="titleContainer">
        <h1>A SHORT HIKE</h1>
        <h2>UNOFFICIAL GERMAN<br>TRANSLATION</h2>
        <div class="svgContainer">
          <svg viewBox="0 0 400 200" preserveAspectRatio="none" id="mySVG" onclick="alert_coords(evt)">
            <script>
              let str = "";
              let c = 0;
              var svg = document.getElementById("mySVG")
              var pt = svg.createSVGPoint();  // Created once for document

              function alert_coords(evt) {
                pt.x = evt.clientX;
                pt.y = evt.clientY;

                // The cursor point, translated into svg coordinates
                var cursorpt = pt.matrixTransform(svg.getScreenCTM().inverse());
                str += `${Math.round(cursorpt.x)},${Math.round(cursorpt.y)} `;
                c++;

                if (c == 3) {
                  console.log(str);
                  c = 0;
                  str = "";
                }
              }                    
            </script>
            <polygon points="90,62 20,69 124,123" class="c1" />
            <polygon points="152,99 238,25 230,82" class="c2" />
            <polygon points="269,90 381,38 339,5" class="c2" />
            <polygon points="238,117 396,114 335,163" class="c1" />
            <polygon points="186,119 201,150 158,155" class="c2" />
            <polygon points="111,141 125,164 69,167" class="c1" />
            Sorry, your browser does not support inline SVG.
          </svg>
        </div>
      </div>
    </div>
    <div class="row transition">
      <div class="downloadContainer column">
        <div class="btn download" onclick="download('{{site.downloads[0].url}}')">
          <img src="assets/icons/download.svg"> <span>Download</span>
        </div>
        <p>
          <b>Latest Version:</b> ({{site.downloads[0].date}})<br>
          {{site.downloads[0].name}}
        </p>
      </div>
      <a href="{{site.donateUrl}}" target="_blank" class="btn donate">
        <img src="assets/icons/paypal.svg"> <span>Leave a tip!</span>
      </a>
    </div>
  </div>
</div>
<div id="content">
  <div class="box">
    <h1>ALL DOWNLOADS</h1>
    <ul>
      {% for version in site.downloads %}
      <li onclick="download('{{version.url}}', false)">
        <a>{{version.name}}</a>
        <span>{{version.date}}</span>
      </li>
      {% endfor %}
    </ul>
  </div>

  <div class="box">
    <h1>WICH VERSION DO I NEED?</h1>
    {% capture version_instructions %}{% include_relative instructions/version_instructions.md %}{% endcapture %}
    {{ version_instructions | markdownify }}
  </div>

  <div class="box">
    <h1>HOW TO INSTALL</h1>
    {% capture installation_instructions %}{% include_relative instructions/installation_instructions.md %}{% endcapture %}
    {{ installation_instructions | markdownify }}
  </div>

  <div class="box">
    <h1>FOUND A TYPO? oပo</h1>
    <a href="{{site.reportUrl}}" target="_blank" class="btn report">
      <img src="assets/icons/send.svg">
      <span>Report It Here!</span>
    </a>
  </div>

  <div id="footer">
    <span>Coded by <a href="https://skamps.eu" target="_blank">Leoko</a> / Fork on <a
        href="https://github.com/Fox-Network/ashorthike-download-page" target="_blank">GitHub</a></span>
    <span>We are not affiliated with A Short Hike. | 
      <a href="{{site.contactUrl}}">Contact</a></span>
  </div>
</div>
<div id="downloaded" style="display: none">
  <h1>THANK YOU!</h1>
  <h2>You can support us here:</h2>
  <a href="{{site.donateUrl}}" target="_blank" class="btn donate">
    <img src="assets/icons/paypal.svg"> <span>Leave a tip!</span>
  </a>
  <div class="altDownload">If the download didn't start click <a href="#" id="downloadAnker">here</a>.</div>
</div>

<script>
  const intro = document.getElementById("intro");
  const downloaded = document.getElementById("downloaded");
  const downloadAnker = document.getElementById("downloadAnker");

  document.onscroll = (ev) => {
    intro.style['background-position-y'] = `${-intro.getBoundingClientRect().top / 3}px`;
  }

  downloaded.onclick = (ev) => {
    if (ev.target == downloaded) {
      downloaded.style.display = "none";
    }
  }

  function download(url, popup = true) {
    if (popup)
      downloaded.style.display = "flex";

    downloadAnker.href = url;
    downloadAnker.click();
  }

</script>