upload-service/web/index.html

73 lines
2.7 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>upload.jeffemmett.com</title>
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<div class="container">
<h1>upload</h1>
<p class="subtitle">Simple file sharing. Up to 5 GB.</p>
<div id="dropzone" class="dropzone">
<div class="dropzone-content">
<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
<polyline points="17 8 12 3 7 8"/>
<line x1="12" y1="3" x2="12" y2="15"/>
</svg>
<p>Drop a file here or <label for="file-input" class="link">browse</label></p>
<input type="file" id="file-input" hidden>
</div>
</div>
<div id="options" class="options hidden">
<div class="option-group">
<label for="expires">Expires in</label>
<select id="expires">
<option value="">Never</option>
<option value="1h">1 hour</option>
<option value="1d">1 day</option>
<option value="7d">7 days</option>
<option value="30d">30 days</option>
</select>
</div>
<div class="option-group">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Optional">
</div>
<button id="upload-btn" class="btn">Upload</button>
</div>
<div id="progress-section" class="hidden">
<div class="file-name" id="progress-filename"></div>
<div class="progress-bar">
<div class="progress-fill" id="progress-fill"></div>
</div>
<div class="progress-text" id="progress-text">0%</div>
</div>
<div id="result" class="result hidden">
<div class="result-success">
<p>Uploaded!</p>
<div class="result-url">
<input type="text" id="result-url" readonly>
<button id="copy-btn" class="btn btn-small">Copy</button>
</div>
<div id="result-delete" class="result-meta"></div>
<div id="result-expiry" class="result-meta"></div>
</div>
</div>
<div id="error" class="error hidden"></div>
<footer>
<a href="/cli">CLI tool</a>
</footer>
</div>
<script src="/static/upload.js"></script>
</body>
</html>