<!DOCTYPE html>

<head>
  <link rel="stylesheet" href="../static/css/douwco_styling.css">
</head>
<html>

<body>
  <!-- <p id="demo"></p>
  <script>
      var w = window.innerWidth;
      var h = window.innerHeight;

      var x = document.getElementById("demo");
      x.innerHTML = "Browser width: " + w + ", height: " + h + ".";
  </script> -->

  <div class="root_div">
    <div class="side_panel_div">
      <div class="title_div">
        <img src="../static/img/douwco_logo.png" alt="douwco_logo">
        <h1>douwco</h1>
      </div>
      <div>
        <a class="menu_option_a" href="/games">
          <img src="../static/img/device-gamepad.png" alt="gamepad icon">
          <p>Play <span>My Games</span></p>
        </a>
        <a class="menu_option_a" href="/about_me">
          <img src="../static/img/user.png" alt="user icon" style="
            width:60px; 
            margin-left: 20px;
            margin-right:70px;">
          <p>About <span>Douwe Ravers</span></p>
        </a>
        <a class="menu_option_a" href="/about_douwco">
          <img src="../static/img/info-hexagon.png" alt="info icon" style="
            width:75px; 
            margin-left: 12px;
            margin-right:62px;">
          <p>About <span>Douwco</span></p>
        </a>
      </div>
    </div>
    <div class="side_panel_div">
      <div class="apps_title_div">
        <h2>Locally Hosted Apps</h2>
        <hr>
      </div>
      <div class="apps_selection_div">
        <div class="app_option_div">
          <img src="../static/img/cloud_img.png" alt="cloud icon">
          <div>
            <h3>Douwco Cloud</h3>
            <p>
              Access the cloud hosted on my local server.</br></br>
              Made possible with <a href="https://nextcloud.com/home-users/">Nextcloud AIO</a>.
            </p>
          </div>            
          <a href="https://cloud.douwco.be">
            <p>Go to Cloud</p>
          </a>
        </div>
        <div class="app_option_div">
          <img src="../static/img/penpot_img.png" alt="penpot icon">
          <div>
            <h3>Douwco Designer</h3>
            <p>
              Create UI designs for websites and software locally hosted on my server. </br></br>
              Made possible with <a href="https://penpot.app/self-host">PenPot</a>
            </p>
          </div>            
          <a href="https://designer.douwco.be">
            <p>Go to Designer</p>
          </a>
        </div>
      </div>
    </div>
  </div>
</body>

</html>