UPDATED
This commit is contained in:
Anaïs Saraiva
+86
-56
@@ -5,69 +5,99 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="referrer" content="no-referrer" />
|
||||
<link rel="icon" href="data:," />
|
||||
<title>File drop</title>
|
||||
<title>File Drop</title>
|
||||
<link rel="stylesheet" href="/style.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main class="card">
|
||||
<h1>File drop</h1>
|
||||
<p class="tagline">Drop a file to get a private download link. Files are kept forever.</p>
|
||||
|
||||
<div id="dropzone" class="dropzone" role="button" tabindex="0" aria-label="Upload a file">
|
||||
<input type="file" id="fileInput" hidden />
|
||||
<p class="dz-main">Drag & drop a file here</p>
|
||||
<p class="dz-sub">or click to choose</p>
|
||||
</div>
|
||||
|
||||
<div class="pw-row">
|
||||
<input
|
||||
type="password"
|
||||
id="pwInput"
|
||||
placeholder="Optional password (protects the download)"
|
||||
autocomplete="off"
|
||||
aria-label="Optional download password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="progress" class="progress hidden">
|
||||
<div class="progress-label">
|
||||
<span id="progressName"></span>
|
||||
<span id="progressPct">0%</span>
|
||||
<div class="app">
|
||||
<header class="topbar">
|
||||
<div class="brand">
|
||||
<div class="logo" aria-hidden="true">FD</div>
|
||||
<div class="brand-text">
|
||||
<h1>File Drop</h1>
|
||||
<span class="sub">Private, password-protected file hosting</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-track">
|
||||
<div id="progressBar" class="progress-bar"></div>
|
||||
<div class="topbar-actions">
|
||||
<button id="newUploadBtn" type="button" class="btn btn-primary">New upload</button>
|
||||
<button id="clearListBtn" type="button" class="btn btn-ghost">Clear list</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="result" class="result hidden">
|
||||
<div class="result-meta">
|
||||
<strong id="resultName"></strong>
|
||||
<span id="resultSize"></span>
|
||||
<span id="resultLock" class="lock hidden">Password protected</span>
|
||||
</div>
|
||||
<div class="url-row">
|
||||
<input id="resultUrl" type="text" readonly aria-label="Download URL" />
|
||||
<button id="copyBtn" type="button">Copy</button>
|
||||
</div>
|
||||
<div class="result-actions">
|
||||
<button id="deleteBtn" type="button" class="danger">Delete file</button>
|
||||
<button id="againBtn" type="button" class="ghost">Upload another</button>
|
||||
</div>
|
||||
</div>
|
||||
<main class="layout">
|
||||
<aside class="panel upload-panel">
|
||||
<h2>Upload a file</h2>
|
||||
|
||||
<div id="notice" class="hidden"></div>
|
||||
<div id="dropzone" class="dropzone" role="button" tabindex="0" aria-label="Choose a file">
|
||||
<input type="file" id="fileInput" hidden />
|
||||
<p class="dz-main">Drag & drop a file here</p>
|
||||
<p class="dz-sub">or click to choose</p>
|
||||
<p id="chosenFile" class="dz-file hidden"></p>
|
||||
</div>
|
||||
|
||||
<section id="fileListWrap" class="files hidden" aria-label="Your uploaded files">
|
||||
<div class="files-head">
|
||||
<h2>Your files</h2>
|
||||
<button id="clearListBtn" type="button" class="ghost">Clear list</button>
|
||||
</div>
|
||||
<p class="files-note">
|
||||
Stored locally in this browser only. Other visitors cannot see them.
|
||||
</p>
|
||||
<ul id="fileList"></ul>
|
||||
</section>
|
||||
</main>
|
||||
<div class="field">
|
||||
<label for="pwInput">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="pwInput"
|
||||
placeholder="Required — protects the download"
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="progress" class="progress hidden">
|
||||
<div class="progress-label">
|
||||
<span id="progressName"></span>
|
||||
<span id="progressPct">0%</span>
|
||||
</div>
|
||||
<div class="progress-track">
|
||||
<div id="progressBar" class="progress-bar"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="uploadBtn" type="button" class="btn btn-primary btn-block">Upload</button>
|
||||
|
||||
<div id="result" class="result hidden">
|
||||
<div class="result-head">
|
||||
<span id="resultName"></span>
|
||||
<span class="lock">Protected</span>
|
||||
</div>
|
||||
<div class="url-row">
|
||||
<input id="resultUrl" type="text" readonly aria-label="Download URL" />
|
||||
<button id="copyBtn" type="button" class="btn btn-primary">Copy</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="notice" class="hidden"></div>
|
||||
</aside>
|
||||
|
||||
<section class="panel files-panel">
|
||||
<div class="panel-head">
|
||||
<h2>Your files</h2>
|
||||
<span id="fileCount" class="count"></span>
|
||||
</div>
|
||||
<p class="files-note">
|
||||
Stored locally in this browser only. Every file requires its password.
|
||||
</p>
|
||||
|
||||
<div class="table-wrap">
|
||||
<table class="files-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="col-name">Name</th>
|
||||
<th class="col-size">Size</th>
|
||||
<th class="col-date">Uploaded</th>
|
||||
<th class="col-actions">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="fileList"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p id="emptyState" class="empty">No files yet. Upload your first file.</p>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
<script src="/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
Reference in New Issue
Block a user