<!DOCTYPE html>

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

<body>
  <div style="
    display: flex;
    flex-direction: row;">
    <div style="
      width: 50%;">
      <div style="
        margin-left: 50px;
        display: flex; 
        align-items: center;
        flex-direction: row; 
        align-content: center;">

        <img src="../static/img/douwco_logo.png" alt="douwco_logo" style="
        width:150px; 
        height: 150px;
        margin-right: 50px;">

        <h1 style="
        font-family: righteous;
        font-size: 120px;">
          douwco</h1>
      </div>
      <div>
        <button class="menu_button" s
        onclick="location.href='/games'"
        style="
        margin-left: 50px; 
        padding-left: 50px;
        padding-right: 50px;">
          <img src="../static/img/device-gamepad.png" alt="gamepad icon" style="
          width:100px; 
          height:75px;
          margin-right: 50px;">
          <p>
            Play
            <span style="color: #88d4d4;">My Games</span>
          </p>
        </button>
        <button class="menu_button" 
        onclick="location.href='/about_me'"
        style="
        margin-left: 50px; 
        padding-left: 50px;
        padding-right: 50px;">
          <img src="../static/img/user.png" alt="user icon" style="
          width:5Opx; 
          height:75px;
          margin-left: 25px;
          margin-right: 75px;">
          <p>
            About
            <span style="color: #88d4d4;">Douwe Ravers</span>
          </p>
        </button>

        <button class="menu_button"
        onclick="location.href='/about_douwco'"
        style="
        margin-left: 50px; 
        padding-left: 50px;
        padding-right: 50px;">
          <img src="../static/img/info-hexagon.png" alt="gamepad icon" style="
          width:70px; 
          height:75px;
          margin-left: 15px;
          margin-right: 65px;">
          <p>
            About
            <span style="color: #88d4d4;">Douwco</span>
          </p>
        </button>
      </div>
    </div>
    <div style="
      width: 50%;
      margin-top: 100px;">
      <h2 style="
        font-size: 48px;
        text-align: center;">
        Locally Hosted Apps</h2>
      <hr style="
        height: 6px;
        width:75%;
        background-color: white;
        border-width: 0px;
        border-radius: 3px;
        align-self: center;">

      <div style="
        max-height: 75vh;
        overflow-y: auto;">
        <div class="app_panel" style="margin: 25px;">
          <img src="../static/img/cloud_img.png" alt="cloud icon" style="
          height: 200px;
          width: 200px;
          margin: 25px;
        ">
          <div>
            <h3 style="font-size: 36px;">Douwco Cloud</h3>
            <p style="font-size: 24px;">
              Access the cloud hosted on my local server.</br></br>
              Made possible with <a href="https://github.com/nextcloud/all-in-one"
                style="color: #6dde99; font-weight: bolder;">Nextcloud AIO</a>.</p>
          </div>
          <button class="app_selection_button"
          onclick="location.href='https\:\/\/cloud.douwco.be'"
          style="
            margin-right: 25px;
            margin-bottom: 25px;
            align-self: flex-end;">
            <p style="
              font-size: 18px;
              width: 100%;
              color: white;
              text-align: center;
              ">Go to Cloud</p>
          </button>
        </div>
        <div class="app_panel" style="margin: 25px;">
          <img src="../static/img/penpot_img.png" alt="penpot icon" style="
          height: 200px;
          width: 200px;
          margin: 25px;
        ">
          <div>
            <h3 style="font-size: 36px;">Douwco Designer</h3>
            <p style="font-size: 24px;">
            Create UI designs for websites and software locally hosted on my server. </br></br>
            Made possible with <a href="https://github.com/nextcloud/all-in-one" 
              style="color: #6dde99; font-weight: bolder;">PenPot</a>.</p>
          </div>
          <button class="app_selection_button" 
          onclick="location.href='https\:\/\/designer.douwco.be'"
          style="
            width: 250px;
            margin-right: 25px;
            margin-bottom: 25px;
            align-self: flex-end;">
            <p style="
              font-size: 18px;
              width: 100%;
              color: white;
              text-align: center;
              ">Go to Designer</p>
          </button>
        </div>
      </div>
    </div>
  </div>
</body>

</html>