Create templates/index.html
Browse files- templates/index.html +111 -0
templates/index.html
ADDED
|
@@ -0,0 +1,111 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!doctype html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="utf-8" />
|
| 5 |
+
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
|
| 6 |
+
<title>DOTO — Temp Upload</title>
|
| 7 |
+
|
| 8 |
+
<link rel="stylesheet" href="/static/css/styles.css" />
|
| 9 |
+
<!-- DOTO is a custom font; fallback to system sans -->
|
| 10 |
+
<style>
|
| 11 |
+
@font-face {
|
| 12 |
+
font-family: "DOTO";
|
| 13 |
+
src: local("DOTO"), local("Doto"), local("Doto-Bold");
|
| 14 |
+
font-weight: 700;
|
| 15 |
+
font-style: normal;
|
| 16 |
+
}
|
| 17 |
+
</style>
|
| 18 |
+
</head>
|
| 19 |
+
<body class="theme-light">
|
| 20 |
+
<div class="app">
|
| 21 |
+
<header class="topbar">
|
| 22 |
+
<div class="brand">DOTO</div>
|
| 23 |
+
<div class="meta">
|
| 24 |
+
<button id="apiBtn" class="icon-btn" title="API & Developer">/></button>
|
| 25 |
+
</div>
|
| 26 |
+
</header>
|
| 27 |
+
|
| 28 |
+
<main class="main">
|
| 29 |
+
<section class="upload-card" id="uploadCard">
|
| 30 |
+
<div class="placeholder" id="placeholder">
|
| 31 |
+
<img src="/static/images/placeholder.gif" alt="placeholder" class="placeholder-gif"/>
|
| 32 |
+
<div class="placeholder-text">
|
| 33 |
+
<strong>Drop a file or tap to upload</strong>
|
| 34 |
+
<small>Files expire ~3 hours • max 2GB</small>
|
| 35 |
+
</div>
|
| 36 |
+
<input id="fileInput" type="file" class="file-input" />
|
| 37 |
+
</div>
|
| 38 |
+
|
| 39 |
+
<div class="preview" id="preview" hidden>
|
| 40 |
+
<div class="preview-left">
|
| 41 |
+
<div id="previewThumb" class="preview-thumb"></div>
|
| 42 |
+
</div>
|
| 43 |
+
<div class="preview-right">
|
| 44 |
+
<div id="previewName" class="filename"></div>
|
| 45 |
+
<div id="previewSize" class="filesize"></div>
|
| 46 |
+
<div class="progress-wrap">
|
| 47 |
+
<progress id="uploadProgress" value="0" max="100"></progress>
|
| 48 |
+
<div id="progressText" class="progress-text"></div>
|
| 49 |
+
</div>
|
| 50 |
+
</div>
|
| 51 |
+
</div>
|
| 52 |
+
</section>
|
| 53 |
+
|
| 54 |
+
<section class="history" id="historySection">
|
| 55 |
+
<div class="history-header">
|
| 56 |
+
<strong>Recent uploads</strong>
|
| 57 |
+
<button id="clearHistory" class="link-btn">Clear</button>
|
| 58 |
+
</div>
|
| 59 |
+
<div id="historyList" class="history-list"></div>
|
| 60 |
+
</section>
|
| 61 |
+
</main>
|
| 62 |
+
|
| 63 |
+
<footer class="sticky-footer">
|
| 64 |
+
<div class="left">
|
| 65 |
+
<button id="uploadBtn" class="big-btn">Upload</button>
|
| 66 |
+
</div>
|
| 67 |
+
<div class="right actions">
|
| 68 |
+
<button id="copyBtn" class="small-btn" title="Copy link">Copy</button>
|
| 69 |
+
<button id="viewBtn" class="small-btn" title="View">View</button>
|
| 70 |
+
<button id="dlBtn" class="small-btn" title="Download">Download</button>
|
| 71 |
+
</div>
|
| 72 |
+
</footer>
|
| 73 |
+
</div>
|
| 74 |
+
|
| 75 |
+
<!-- API modal -->
|
| 76 |
+
<div id="apiModal" class="modal" hidden>
|
| 77 |
+
<div class="modal-card">
|
| 78 |
+
<header>
|
| 79 |
+
<strong>API & Developer</strong>
|
| 80 |
+
<button id="closeApi" class="icon-btn">✕</button>
|
| 81 |
+
</header>
|
| 82 |
+
<div class="modal-body">
|
| 83 |
+
<p><strong>Version:</strong> <span id="apiVersion">{{ api_version }}</span></p>
|
| 84 |
+
<p><strong>Upload endpoint:</strong> <code>/api/upload</code></p>
|
| 85 |
+
<p><strong>Max size:</strong> <code>{{ max_bytes }} bytes</code></p>
|
| 86 |
+
<p><strong>Expiry:</strong> ~{{ expire_seconds }} seconds</p>
|
| 87 |
+
<div class="curl">
|
| 88 |
+
<label>cURL example</label>
|
| 89 |
+
<pre id="curlExample">curl -X POST -F "file=@/path/to/file" https://your-space-url/api/upload</pre>
|
| 90 |
+
<button id="copyCurl" class="link-btn">Copy</button>
|
| 91 |
+
</div>
|
| 92 |
+
<hr/>
|
| 93 |
+
<div class="dev">
|
| 94 |
+
<small>Made by <strong>Aditya Devarshi</strong></small><br/>
|
| 95 |
+
<small class="muted">Files are public to anyone with the link. Avoid sensitive uploads.</small>
|
| 96 |
+
</div>
|
| 97 |
+
</div>
|
| 98 |
+
</div>
|
| 99 |
+
</div>
|
| 100 |
+
|
| 101 |
+
<script>
|
| 102 |
+
// inject server values for max size / expire as JS constants
|
| 103 |
+
window.APP_CONFIG = {
|
| 104 |
+
API_VERSION: "{{ api_version }}",
|
| 105 |
+
MAX_BYTES: {{ max_bytes }},
|
| 106 |
+
EXPIRE_SECONDS: {{ expire_seconds }}
|
| 107 |
+
}
|
| 108 |
+
</script>
|
| 109 |
+
<script src="/static/js/app.js"></script>
|
| 110 |
+
</body>
|
| 111 |
+
</html>
|