<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" type="text/css" href="css/transbeam.css"/>
    <link rel="stylesheet" type="text/css" href="css/states.css"/>
    <link rel="apple-touch-icon" href="images/site-icons/transbeam-apple.png"/>
    <link rel="manifest" href="manifest.json"/>
    <script src="js/util.js"></script>
    <script src="js/download.js"></script>
    <script src="js/upload.js"></script>
    <title>transbeam</title>
  </head>
  <body class="noscript landing">
    <div id="header">
      <img src="images/site-icons/transbeam.svg" height="128">
      <h1>transbeam</h1>
    </div>
    <div id="download" class="section">
      <h3 class="section_heading">Download</h3>
      <form id="download_form" action="download" method="get">
        <div>
          <label>
            <input type="text" id="download_code_input" name="code" placeholder="Download code"/>
          </label>
        </div>
        <input id="download_button" type="submit" value="Download"/>
      </form>
    </div>
    <noscript>Javascript is required to upload files :(</noscript>
    <div id="upload" class="section">
      <h3 class="section_heading">Upload</h3>
      <div id="message"></div>
      <div>
        <form id="upload_password_form">
          <div>
            <label>
              <input id="upload_password" type="password" placeholder="Password"/>
            </label>
          </div>
          <div>
            <input type="submit" id="submit_upload_password" value="Submit" />
          </div>
        </form>
      </div>
      <div id="upload_controls">
        <div id="upload_settings">
          <div>
            <button id="upload_button">Upload</button>
          </div>
          <div id="lifetime_container">
            <label>
              Keep files for:
              <select id="lifetime">
                <option value="1">1 day</option>
                <option value="7">1 week</option>
                <option value="14" selected>2 weeks</option>
                <option value="30">1 month</option>
              </select>
            </label>
          </div>
        </div>
        <div id="download_code_container">
          <div id="download_code_main">
            <div>Download code: <span id="download_code"></span></div><div class="copy_button"></div>
          </div>
          <div id="copied_message">Link copied!</div>
        </div>
        <div id="progress_container">
          <div id="progress"></div>
          <div id="progress_bar"></div>
        </div>
        <table id="file_list">
        </table>
        <label id="file_input_container">
          <input type="file" multiple id="file_input"/>
          <span class="fake_button" id="file_input_message">Select files to upload...</span>
        </label>
      </div>
    </div>
    <div id="footer">
      <h5>(c) 2022 xenofem, MIT licensed</h5>
      <h5><a target="_blank" href="https://git.xeno.science/xenofem/transbeam">source</a></h5>
    </div>
  </body>
</html>