148 lines
5.4 KiB
HTML
148 lines
5.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<title>dropLake</title>
|
||
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
|
|
<link rel="stylesheet" href="/static/css/style.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
|
||
|
|
<!-- Logo -->
|
||
|
|
<div class="logo">
|
||
|
|
<div class="logo-mark">◈</div>
|
||
|
|
<h1>drop<span class="grad">Lake</span></h1>
|
||
|
|
<p>Encrypted · Ephemeral · No accounts</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Card -->
|
||
|
|
<div class="card">
|
||
|
|
|
||
|
|
<!-- ═══════════════════════════════════════
|
||
|
|
VIEW 1 — Upload form
|
||
|
|
═══════════════════════════════════════ -->
|
||
|
|
<div id="formView">
|
||
|
|
|
||
|
|
<!-- Tabs -->
|
||
|
|
<div class="tabs">
|
||
|
|
<button class="tab-btn active" data-tab="file">File</button>
|
||
|
|
<button class="tab-btn" data-tab="text">Text</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- File tab -->
|
||
|
|
<div id="tab-file" class="tab-content active">
|
||
|
|
<div class="drop-zone" id="dropZone">
|
||
|
|
<input type="file" id="fileInput" tabindex="-1" />
|
||
|
|
<span class="dz-icon" id="dzIcon">📂</span>
|
||
|
|
<div class="dz-main" id="dzMain">Drop a file or click to browse</div>
|
||
|
|
<div class="dz-hint" id="dzHint">1 GB recommended · up to 6 GB accepted</div>
|
||
|
|
<div class="dz-name" id="dzName"></div>
|
||
|
|
<div class="dz-size" id="dzSize"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Text tab -->
|
||
|
|
<div id="tab-text" class="tab-content">
|
||
|
|
<div class="field">
|
||
|
|
<label for="textArea">Your text</label>
|
||
|
|
<textarea id="textArea" placeholder="Paste or type anything here…"></textarea>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Options -->
|
||
|
|
<div class="field-row">
|
||
|
|
<div class="field">
|
||
|
|
<label for="ttlSelect">Expires in</label>
|
||
|
|
<select id="ttlSelect">
|
||
|
|
<option value="1">1 hour</option>
|
||
|
|
<option value="6">6 hours</option>
|
||
|
|
<option value="24" selected>24 hours</option>
|
||
|
|
<option value="48">2 days</option>
|
||
|
|
<option value="72">3 days</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="field">
|
||
|
|
<label for="passwordInput">Password <span style="font-weight:400;text-transform:none;letter-spacing:0">(optional)</span></label>
|
||
|
|
<input id="passwordInput" type="password"
|
||
|
|
placeholder="Leave blank for URL-only access"
|
||
|
|
autocomplete="new-password" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="toggle-field">
|
||
|
|
<label class="toggle-switch">
|
||
|
|
<input type="checkbox" id="burnToggle" />
|
||
|
|
<span class="toggle-track"></span>
|
||
|
|
</label>
|
||
|
|
<label class="toggle-label" for="burnToggle">Delete after first download</label>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Alert (errors) -->
|
||
|
|
<div id="alertBox" class="alert hidden"></div>
|
||
|
|
|
||
|
|
<!-- Upload button -->
|
||
|
|
<button class="btn" id="uploadBtn">Upload & Encrypt</button>
|
||
|
|
|
||
|
|
<!-- Progress -->
|
||
|
|
<div id="progressWrap" class="progress-wrap mt-2 hidden">
|
||
|
|
<div class="progress-bar">
|
||
|
|
<div class="progress-fill" id="progressFill"></div>
|
||
|
|
</div>
|
||
|
|
<div class="progress-label" id="progressLbl"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div><!-- #formView -->
|
||
|
|
|
||
|
|
|
||
|
|
<!-- ═══════════════════════════════════════
|
||
|
|
VIEW 2 — Result
|
||
|
|
═══════════════════════════════════════ -->
|
||
|
|
<div id="resultView" class="hidden">
|
||
|
|
|
||
|
|
<!-- Animated checkmark -->
|
||
|
|
<div class="success-icon">
|
||
|
|
<svg viewBox="0 0 52 52">
|
||
|
|
<circle class="check-circle" cx="26" cy="26" r="24" />
|
||
|
|
<path class="check-mark" d="M14 26l8 8 16-16" />
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="result-title">Share ready</div>
|
||
|
|
<div class="result-subtitle">Save the link — the decryption key lives only in the URL</div>
|
||
|
|
|
||
|
|
<div class="result-label">Share link</div>
|
||
|
|
<div class="copy-field">
|
||
|
|
<input id="resultUrl" type="text" readonly />
|
||
|
|
<button class="copy-btn" id="copyUrlBtn">Copy</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="resultPwWrap" class="hidden">
|
||
|
|
<div class="result-label mt-1">Password</div>
|
||
|
|
<div class="copy-field">
|
||
|
|
<input id="resultPw" type="text" readonly />
|
||
|
|
<button class="copy-btn" id="copyPwBtn">Copy</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="alert alert-info mt-1" style="font-size:0.78rem;margin-bottom:0.75rem">
|
||
|
|
The decryption key is only in this URL and is never stored on the server.
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button class="share-again-btn" id="shareAgainBtn">+ Share another</button>
|
||
|
|
|
||
|
|
</div><!-- #resultView -->
|
||
|
|
|
||
|
|
</div><!-- .card -->
|
||
|
|
</div><!-- .container -->
|
||
|
|
|
||
|
|
<footer>
|
||
|
|
dropLake<span class="sep">·</span>self-hosted<span class="sep">·</span>no tracking
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
<script src="/static/js/upload.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|