103 lines
3.5 KiB
HTML
103 lines
3.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<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>
|
|
<link rel="stylesheet" href="/style.css" />
|
|
</head>
|
|
<body>
|
|
<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="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>
|
|
</header>
|
|
|
|
<main class="layout">
|
|
<aside class="panel upload-panel">
|
|
<h2>Upload a file</h2>
|
|
|
|
<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>
|
|
|
|
<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> |