<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
    <link rel="icon" href="./favicon_animated.ico" type="image/x-icon">
    <title>Grip Guide</title>
    {{#if dark}}
        <link rel="stylesheet" href="./css/dark.css" />
    {{else}}
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
        <link rel="stylesheet" href="./css/style.css">
    {{/if}}
    <link rel="stylesheet" href="./css/default.css" />
</head>
<body>
<header class="full-center hide">
    <h1>Grip Boulder Guide</h1>
    <p>Current Node: {{activeNode}}</p>
    <aside>
        <form class="content-grid columns4 toggle" action="/toggleStyle" method="post" >
            <input type="hidden" name="path" value={{current}} />
            <label class="grid-item label" for="Toggle Style">Toggle Style:</label>
            <label class="switch grid-item">
                <input type="checkbox" name="Toggle Style" onchange="this.form.submit()" {{#if dark}} checked {{/if}}>
                <span class="slider"></span>
            </label>
        </form>
    </aside>
</header>
{{#if dark}}
          {{{body}}}
{{else}}
     <main>
          <div class="vignette hide"></div>
          <img src="./img/background.png" data-speedx="0.3" data-speedy="0.38" data-speedz="0" data-rotation="0"
               data-distance="-200" class="parallax bg-img">
          <img src="./img/fog_7.png" data-speedx="0.27" data-speedy="0.32" data-speedz="0" data-rotation="0" data-distance="850"
               class="parallax fog-7">
          <img src="./img/mountain_10.png" data-speedx="0.195" data-speedy="0.305" data-speedz="0" data-rotation="0"
               data-distance="1100" class="parallax mountain-10">
          <img src="./img/fog_6.png" data-speedx="0.25" data-speedy="0.28" data-speedz="0" data-rotation="0"
               data-distance="1400" class="parallax fog-6">
          <img src="./img/mountain_9.png" data-speedx="0.125" data-speedy="0.155" data-speedz="0.15" data-rotation="0.02"
               data-distance="1700" class="parallax mountain-9">
          <img src="./img/mountain_8.png" data-speedx="0.1" data-speedy="0.11" data-speedz="0" data-rotation="0.02"
               data-distance="1800" class="parallax mountain-8">
          <img src="./img/fog_5.png" data-speedx="0.16" data-speedy="0.105" data-speedz="0" data-rotation="0"
               data-distance="1900" class="parallax fog-5">
          <img src="./img/mountain_7.png" data-speedx="0.1" data-speedy="0.1" data-speedz="0" data-rotation="0.09"
               data-distance="2000" class="parallax mountain-7">
          <div class="text parallax" data-speedx="0.07" data-speedy="0.07" data-speedz="0" data-rotation="0.11">
               {{{body}}}
          </div>
          <img src="./img/mountain_6.png" data-speedx="0.065" data-speedy="0.05" data-speedz="0.05" data-rotation="0.12"
               data-distance="2300" class="parallax mountain-6">
          <img src="./img/fog_4.png" data-speedx="0.135" data-speedy="0.04" data-speedz="0" data-rotation="0"
               data-distance="2400" class="parallax fog-4">
          <img src="./img/mountain_5.png" data-speedx="0.08" data-speedy="0.03" data-speedz="0.13" data-rotation="0.1"
               data-distance="2550" class="parallax mountain-5">
          <img src="./img/fog_3.png" data-speedx="0.11" data-speedy="0.018" data-speedz="0" data-rotation="0"
               data-distance="2800" class="parallax fog-3">
          <img src="./img/mountain_4.png" data-speedx="0.059" data-speedy="0.024" data-speedz="0.35" data-rotation="0.14"
               data-distance="3200" class="parallax mountain-4">
          <img src="./img/mountain_3.png" data-speedx="0.04" data-speedy="0.018" data-speedz="0.32" data-rotation="0.05"
               data-distance="3400" class="parallax mountain-3">
          <img src="./img/fog_2.png" data-speedx="0.15" data-speedy="0.0115" data-speedz="0" data-rotation="0"
               data-distance="3600" class="parallax fog-2">
          <img src="./img/mountain_2.png" data-speedx="0.0235" data-speedy="0.013" data-speedz="0.42" data-rotation="0.15"
               data-distance="3800" class="parallax mountain-2">
          <img src="./img/mountain_1.png" data-speedx="0.027" data-speedy="0.018" data-speedz="0.53" data-rotation="0.2"
               data-distance="4000" class="parallax mountain-1">
          <img src="./img/sun_rays.png" class="sun-rays hide">
          <img src="./img/black_shadow.png" class="black-shadow hide">
          <img src="./img/fog_1.png" data-speedx="0.12" data-speedy="0.01" data-speedz="0" data-rotation="0"
               data-distance="4200" class="parallax fog-1">
     </main>
     <script src="js/gsap.min.js"></script>
     <script src="js/app.js" defer></script>
{{/if}}

</body>
</html>
