| <!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" /> |
| |
| <style> |
| @font-face { |
| font-family: "DOTO"; |
| src: local("DOTO"), local("Doto"), local("Doto-Bold"); |
| font-weight: 700; |
| font-style: normal; |
| } |
| |
| |
| .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">/></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> |
|
|
| |
| <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> |
| |
| 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"); |
| |
| |
| apiBtn.addEventListener("click", () => { |
| apiModal.style.display = "flex"; |
| requestAnimationFrame(() => { |
| apiModal.querySelector(".modal").classList.add("show"); |
| }); |
| }); |
| |
| |
| 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(); |
| }); |
| |
| |
| 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> |
|
|
