Spaces:

triflix
/

tryit

Sleeping

File size: 6,796 Bytes

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
  <title>DOTO — Temp Upload</title>

  <link rel="stylesheet" href="/static/css/styles.css" />
  <!-- DOTO is a custom font; fallback to system sans -->
  <style>
    @font-face {
      font-family: "DOTO";
      src: local("DOTO"), local("Doto"), local("Doto-Bold");
      font-weight: 700;
      font-style: normal;
    }

    /* === Modal Styling === */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.55);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 2000;
    }

    .modal {
      background: #fff;
      border-radius: 14px;
      width: 90%;
      max-width: 480px;
      padding: 0;
      box-shadow: 0 10px 30px rgba(0,0,0,0.25);
      transform: scale(0.8);
      opacity: 0;
      transition: all 0.3s ease-in-out;
      overflow: hidden;
    }

    .modal.show {
      transform: scale(1);
      opacity: 1;
    }

    .modal header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 16px;
      background: #f5f5f5;
      font-weight: bold;
      border-bottom: 1px solid #ddd;
    }

    .modal header strong {
      font-size: 1rem;
    }

    #closeApi {
      background: none;
      border: none;
      font-size: 1.2rem;
      cursor: pointer;
      color: #333;
    }

    .modal-body {
      padding: 16px;
      font-size: 0.95rem;
    }

    .modal-body p {
      margin: 6px 0;
    }

    .curl {
      margin: 12px 0;
      background: #f7f7f7;
      border-radius: 6px;
      padding: 10px;
      position: relative;
    }

    .curl pre {
      white-space: pre-wrap;
      word-wrap: break-word;
      font-size: 0.85rem;
      margin: 0 0 8px 0;
    }

    .curl button {
      position: absolute;
      top: 8px;
      right: 8px;
      font-size: 0.8rem;
    }

    .dev {
      margin-top: 12px;
      text-align: center;
    }

    .dev strong {
      color: #222;
    }

    .dev .muted {
      color: #666;
      font-size: 0.8rem;
    }
  </style>
</head>
<body class="theme-light">
  <div class="app">
    <header class="topbar">
      <div class="brand">DOTO</div>
      <div class="meta">
        <button id="apiBtn" class="icon-btn" title="API & Developer">/&gt;</button>
      </div>
    </header>

    <main class="main">
      <section class="upload-card" id="uploadCard">
        <div class="placeholder" id="placeholder">
          <img src="/static/images/placeholder.gif" alt="placeholder" class="placeholder-gif"/>
          <div class="placeholder-text">
            <strong>Drop a file or tap to upload</strong>
            <small>Files expire ~3 hours • max 2GB</small>
          </div>
          <input id="fileInput" type="file" class="file-input" />
        </div>

        <div class="preview" id="preview" hidden>
          <div class="preview-left">
            <div id="previewThumb" class="preview-thumb"></div>
          </div>
          <div class="preview-right">
            <div id="previewName" class="filename"></div>
            <div id="previewSize" class="filesize"></div>
            <div class="progress-wrap">
              <progress id="uploadProgress" value="0" max="100"></progress>
              <div id="progressText" class="progress-text"></div>
            </div>
          </div>
        </div>
      </section>

      <section class="history" id="historySection">
        <div class="history-header">
          <strong>Recent uploads</strong>
          <button id="clearHistory" class="link-btn">Clear</button>
        </div>
        <div id="historyList" class="history-list"></div>
      </section>
    </main>

    <footer class="sticky-footer">
      <div class="left">
        <button id="uploadBtn" class="big-btn">Upload</button>
      </div>
      <div class="right actions">
        <button id="copyBtn" class="small-btn" title="Copy link">Copy</button>
        <button id="viewBtn" class="small-btn" title="View">View</button>
        <button id="dlBtn" class="small-btn" title="Download">Download</button>
      </div>
    </footer>
  </div>

  <!-- API modal -->
  <div id="apiModal" class="modal-overlay">
    <div class="modal">
      <header>
        <strong>API & Developer</strong>
        <button id="closeApi" class="icon-btn">✕</button>
      </header>
      <div class="modal-body">
        <p><strong>Version:</strong> <span id="apiVersion">{{ api_version }}</span></p>
        <p><strong>Upload endpoint:</strong> <code>/api/upload</code></p>
        <p><strong>Max size:</strong> <code>{{ max_bytes }} bytes</code></p>
        <p><strong>Expiry:</strong> ~{{ expire_seconds }} seconds</p>
        <div class="curl">
          <label>cURL example</label>
          <pre id="curlExample">curl -X POST -F "file=@/path/to/file" https://your-space-url/api/upload</pre>
          <button id="copyCurl" class="link-btn">Copy</button>
        </div>
        <hr/>
        <div class="dev">
          <small>Made by <strong>Aditya Devarshi</strong></small><br/>
          <small class="muted">Files are public to anyone with the link. Avoid sensitive uploads.</small>
        </div>
      </div>
    </div>
  </div>

  <script>
    // inject server values for max size / expire as JS constants
    window.APP_CONFIG = {
      API_VERSION: "{{ api_version }}",
      MAX_BYTES: {{ max_bytes }},
      EXPIRE_SECONDS: {{ expire_seconds }}
    }

    const apiBtn = document.getElementById("apiBtn");
    const apiModal = document.getElementById("apiModal");
    const closeApi = document.getElementById("closeApi");
    const copyCurl = document.getElementById("copyCurl");
    const curlExample = document.getElementById("curlExample");

    // Open modal
    apiBtn.addEventListener("click", () => {
      apiModal.style.display = "flex";
      requestAnimationFrame(() => {
        apiModal.querySelector(".modal").classList.add("show");
      });
    });

    // Close modal
    function closeModal() {
      const modalCard = apiModal.querySelector(".modal");
      modalCard.classList.remove("show");
      setTimeout(() => {
        apiModal.style.display = "none";
      }, 300);
    }

    closeApi.addEventListener("click", closeModal);
    apiModal.addEventListener("click", (e) => {
      if (e.target === apiModal) closeModal();
    });

    // Copy curl command
    copyCurl.addEventListener("click", () => {
      navigator.clipboard.writeText(curlExample.innerText).then(() => {
        copyCurl.innerText = "Copied!";
        setTimeout(() => (copyCurl.innerText = "Copy"), 1500);
      });
    });
  </script>
  <script src="/static/js/app.js"></script>
</body>
</html>