<%- '<!DOCTYPE html>' %>
<html lang="en">
  <head>
    <%- include('partials/metadata') %>
    <title>Kie's Image Machine</title>
    <style media="screen">
      @font-face {
        font-family: 'Poppins';
        font-style: normal;
        font-weight: 300;
        src: local('Poppins Light'), local('Poppins-Light'), url(/fonts/poppins.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
      }
      @keyframes onLoad {
        0% {
          opacity: 0;
        }
        100% {
          opacity: 1;
        }
      }
      html, body {
        overflow-x: hidden;
        animation: onLoad .5s ease 1;
        height: 100%;
        width: 100%;
      }
      body {
        margin: 0;
        font-family: 'Poppins', sans-serif;
        background: #0f0f0f;
        color: #ffffff;
        text-align: center;
        user-select: none;
        -moz-user-select: none;
        backface-visibility: hidden;
      }
      .main-div {
        display: inline;
        position: fixed;
        top: 50vh;
        left: 50vw;
        transform: translate(-50%, -50%);
      }
      .dragndrop-container {
        box-sizing: border-box;
        min-width: 100%;
        min-height: 100%;
        position: fixed;
        background-color: #333333;
        border: 1px solid #e2e2e2;
        box-shadow: inset 0 0 0px #ffffff;
        pointer-events: none;
        opacity: 0;
        transition: all .5s ease;
        z-index: 999;
      }
      .dragndrop-container-active {
        box-shadow: inset 0 0 32px 4px #ffffff;
        opacity: .5;
        transition: all .5s ease;
      }
      p {
        margin: 0;
      }
      input[type="file"] {
        position: absolute;
        top: -1000px;
      }
      label {
        border-radius: 8px;
        background: #3a3b3e;
        display: inline-block;
        transition: all .75s ease;
        padding: 8px 32px;
        box-shadow: 0 10px 16px -10px #000;
      }
      label:hover {
        cursor: pointer;
        background: #479eef;
        color: #000;
      }
      a {
        text-decoration: none;
        color: #42b0f4;
        transition: .5s;
        border-bottom: 1px solid transparent;
        padding: 0;
      }
      a:hover {
        border-bottom: 1px solid #42b0f488;
        opacity: 1;
      }
      @media (max-width : 580px) {
        .main-div {
          top: 45vh;
          width: 100%;
        }
      }
    </style>
    <script>
    window.onload = function() {
      var dragContainer = document.getElementById('dragndrop-container');
      document.getElementById('imageSelect').value = '';
      document.getElementById('imageSelect').addEventListener('change', function() {
        if (imageSelect.files.length > 0) {
          document.getElementById('imageSelectText').innerHTML = 'Uploading Image...';
          document.getElementById('form').submit();
        }
      });
      document.addEventListener('dragover', function() {
        event.preventDefault();
        event.stopPropagation();
        dragContainer.classList.add('dragndrop-container-active');
        event.dataTransfer.dropEffect = 'copy';
      });
      document.addEventListener('dragleave', function() {
        dragContainer.classList.remove('dragndrop-container-active');
      });
      document.addEventListener('drop', function(event) {
        event.preventDefault();
        dragContainer.classList.remove('dragndrop-container-active');
        if (event.dataTransfer.files[0] && event.dataTransfer.files[0].size > 0) {
          document.getElementById('imageSelect').files = event.dataTransfer.files;
          document.getElementById('imageSelectText').innerHTML = 'Uploading Image...';
          document.getElementById('form').submit();
        }
        return false;
      });
    }
    </script>
  </head>
  <body>
    <div class="main-div">
      <p style="font-size: 26px;">Kie's Image Machine</p>
      <p style="font-size: 12px;">Completely anonymous image hosting</p><br>
      <main>
        <form action="upload" method="post" encType="multipart/form-data" id="form">
          <label>
            <input type="file" name="image" accept=".png,.jpg,.jpeg,.gif" id="imageSelect">
            <span style="font-size: 16px;" id="imageSelectText">Upload Image</span>
            <p style="font-size: 10px;">Supported File Types: <b>png, jpg, jpeg, gif</b></p>
          </label>
        </form><br>
        <div style="font-size: 14px;">
            <a draggable="false" href="/api" rel="noreferrer">API</a> / <a draggable="false" href="https://discord.gg/mDJDvAP" target="_blank" rel="noreferrer">Discord</a> / <a draggable="false" href="https://twitter.com/KieIsWillSmith" target="_blank" rel="noreferrer">Twitter</a> / <a draggable="false" href="https://paypal.me/KieranHowland" target="_blank" rel="noreferrer">Donate</a>
        </div>
      </main>
    </div>
    <div class="dragndrop-container" id="dragndrop-container"><p style="font-size: 32px; margin-top: 100px;">Drop Image To Upload</p></div>
  </body>
</html>
<%- include('partials/generated') %>
