initial commit — dropLake
This commit is contained in:
@@ -0,0 +1,147 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user