feat(config): support *_MB env vars for upload size limits

- Add `applyMegabytesOrBytesEnv` to accept size settings in either bytes or MB - Prefer `*_BYTES` when set, otherwise convert `*_MB` to bytes with overflow guard - Add coverage for MB-based environment overrides - Introduce `static/js/upload-popups.js` to lazy-load and cache popup templatesfeat(config): support *_MB env vars for upload size limits - Add `applyMegabytesOrBytesEnv` to accept size settings in either bytes or MB - Prefer `*_BYTES` when set, otherwise convert `*_MB` to bytes with overflow guard - Add coverage for MB-based environment overrides - Introduce `static/js/upload-popups.js` to lazy-load and cache popup templates
2026-04-29 01:42:41 +03:00
parent 82acaffdd8
commit 6035ea1eb2
20 changed files with 544 additions and 166 deletions
--- a/lib/config/config.go
+++ b/lib/config/config.go
@@ -2,6 +2,7 @@ package config

 import (
 	"fmt"
+	"math"
 	"os"
 	"path/filepath"
 	"strconv"
@@ -197,10 +198,6 @@ func Load() (*Config, error) {
 	}{
 		{SettingDefaultGuestExpirySecs, "WARPBOX_DEFAULT_GUEST_EXPIRY_SECONDS", 0, &cfg.DefaultGuestExpirySeconds},
 		{SettingMaxGuestExpirySecs, "WARPBOX_MAX_GUEST_EXPIRY_SECONDS", 0, &cfg.MaxGuestExpirySeconds},
-		{SettingGlobalMaxFileSizeBytes, "WARPBOX_GLOBAL_MAX_FILE_SIZE_BYTES", 0, &cfg.GlobalMaxFileSizeBytes},
-		{SettingGlobalMaxBoxSizeBytes, "WARPBOX_GLOBAL_MAX_BOX_SIZE_BYTES", 0, &cfg.GlobalMaxBoxSizeBytes},
-		{SettingDefaultUserMaxFileBytes, "WARPBOX_DEFAULT_USER_MAX_FILE_SIZE_BYTES", 0, &cfg.DefaultUserMaxFileSizeBytes},
-		{SettingDefaultUserMaxBoxBytes, "WARPBOX_DEFAULT_USER_MAX_BOX_SIZE_BYTES", 0, &cfg.DefaultUserMaxBoxSizeBytes},
 		{SettingSessionTTLSeconds, "WARPBOX_SESSION_TTL_SECONDS", 60, &cfg.SessionTTLSeconds},
 	}
 	for _, item := range envInt64s {
@@ -208,6 +205,22 @@ func Load() (*Config, error) {
 			return nil, err
 		}
 	}
+	sizeEnvVars := []struct {
+		key       string
+		mbName    string
+		bytesName string
+		target    *int64
+	}{
+		{SettingGlobalMaxFileSizeBytes, "WARPBOX_GLOBAL_MAX_FILE_SIZE_MB", "WARPBOX_GLOBAL_MAX_FILE_SIZE_BYTES", &cfg.GlobalMaxFileSizeBytes},
+		{SettingGlobalMaxBoxSizeBytes, "WARPBOX_GLOBAL_MAX_BOX_SIZE_MB", "WARPBOX_GLOBAL_MAX_BOX_SIZE_BYTES", &cfg.GlobalMaxBoxSizeBytes},
+		{SettingDefaultUserMaxFileBytes, "WARPBOX_DEFAULT_USER_MAX_FILE_SIZE_MB", "WARPBOX_DEFAULT_USER_MAX_FILE_SIZE_BYTES", &cfg.DefaultUserMaxFileSizeBytes},
+		{SettingDefaultUserMaxBoxBytes, "WARPBOX_DEFAULT_USER_MAX_BOX_SIZE_MB", "WARPBOX_DEFAULT_USER_MAX_BOX_SIZE_BYTES", &cfg.DefaultUserMaxBoxSizeBytes},
+	}
+	for _, item := range sizeEnvVars {
+		if err := cfg.applyMegabytesOrBytesEnv(item.key, item.mbName, item.bytesName, 0, item.target); err != nil {
+			return nil, err
+		}
+	}

 	envInts := []struct {
 		key    string
@@ -404,6 +417,34 @@ func (cfg *Config) applyInt64Env(key string, name string, min int64, target *int
 	return nil
 }

+func (cfg *Config) applyMegabytesOrBytesEnv(key string, mbName string, bytesName string, min int64, target *int64) error {
+	if rawBytes := strings.TrimSpace(os.Getenv(bytesName)); rawBytes != "" {
+		parsed, err := parseInt64(rawBytes, min)
+		if err != nil {
+			return fmt.Errorf("%s: %w", bytesName, err)
+		}
+		*target = parsed
+		cfg.setValue(key, strconv.FormatInt(parsed, 10), SourceEnv)
+		return nil
+	}
+
+	rawMB := strings.TrimSpace(os.Getenv(mbName))
+	if rawMB == "" {
+		return nil
+	}
+	parsedMB, err := parseInt64(rawMB, min)
+	if err != nil {
+		return fmt.Errorf("%s: %w", mbName, err)
+	}
+	if parsedMB > math.MaxInt64/(1024*1024) {
+		return fmt.Errorf("%s: is too large", mbName)
+	}
+	parsedBytes := parsedMB * 1024 * 1024
+	*target = parsedBytes
+	cfg.setValue(key, strconv.FormatInt(parsedBytes, 10), SourceEnv)
+	return nil
+}
+
 func (cfg *Config) applyIntEnv(key string, name string, min int, target *int) error {
 	raw := strings.TrimSpace(os.Getenv(name))
 	if raw == "" {
--- a/lib/config/config_test.go
+++ b/lib/config/config_test.go
@@ -64,6 +64,39 @@ func TestEnvironmentOverrides(t *testing.T) {
 	}
 }

+func TestMegabyteSizeEnvironmentOverrides(t *testing.T) {
+	clearConfigEnv(t)
+	t.Setenv("WARPBOX_GLOBAL_MAX_FILE_SIZE_MB", "2048")
+	t.Setenv("WARPBOX_GLOBAL_MAX_BOX_SIZE_MB", "4096")
+
+	cfg, err := Load()
+	if err != nil {
+		t.Fatalf("Load returned error: %v", err)
+	}
+
+	if cfg.GlobalMaxFileSizeBytes != 2048*1024*1024 {
+		t.Fatalf("unexpected global max file size: %d", cfg.GlobalMaxFileSizeBytes)
+	}
+	if cfg.GlobalMaxBoxSizeBytes != 4096*1024*1024 {
+		t.Fatalf("unexpected global max box size: %d", cfg.GlobalMaxBoxSizeBytes)
+	}
+}
+
+func TestByteSizeEnvironmentOverridesTakePrecedence(t *testing.T) {
+	clearConfigEnv(t)
+	t.Setenv("WARPBOX_GLOBAL_MAX_FILE_SIZE_MB", "2048")
+	t.Setenv("WARPBOX_GLOBAL_MAX_FILE_SIZE_BYTES", "100")
+
+	cfg, err := Load()
+	if err != nil {
+		t.Fatalf("Load returned error: %v", err)
+	}
+
+	if cfg.GlobalMaxFileSizeBytes != 100 {
+		t.Fatalf("unexpected global max file size: %d", cfg.GlobalMaxFileSizeBytes)
+	}
+}
+
 func TestInvalidEnvironmentValues(t *testing.T) {
 	clearConfigEnv(t)
 	t.Setenv("WARPBOX_SESSION_TTL_SECONDS", "1")
@@ -131,9 +164,13 @@ func clearConfigEnv(t *testing.T) {
 		"WARPBOX_RENEW_ON_DOWNLOAD_ENABLED",
 		"WARPBOX_DEFAULT_GUEST_EXPIRY_SECONDS",
 		"WARPBOX_MAX_GUEST_EXPIRY_SECONDS",
+		"WARPBOX_GLOBAL_MAX_FILE_SIZE_MB",
 		"WARPBOX_GLOBAL_MAX_FILE_SIZE_BYTES",
+		"WARPBOX_GLOBAL_MAX_BOX_SIZE_MB",
 		"WARPBOX_GLOBAL_MAX_BOX_SIZE_BYTES",
+		"WARPBOX_DEFAULT_USER_MAX_FILE_SIZE_MB",
 		"WARPBOX_DEFAULT_USER_MAX_FILE_SIZE_BYTES",
+		"WARPBOX_DEFAULT_USER_MAX_BOX_SIZE_MB",
 		"WARPBOX_DEFAULT_USER_MAX_BOX_SIZE_BYTES",
 		"WARPBOX_SESSION_TTL_SECONDS",
 		"WARPBOX_BOX_POLL_INTERVAL_MS",
--- a/run.sh
+++ b/run.sh
@@ -0,0 +1,29 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+# Core service switches.
+export WARPBOX_GUEST_UPLOADS_ENABLED="${WARPBOX_GUEST_UPLOADS_ENABLED:-true}"
+export WARPBOX_API_ENABLED="${WARPBOX_API_ENABLED:-true}"
+export WARPBOX_ZIP_DOWNLOADS_ENABLED="${WARPBOX_ZIP_DOWNLOADS_ENABLED:-true}"
+export WARPBOX_ONE_TIME_DOWNLOADS_ENABLED="${WARPBOX_ONE_TIME_DOWNLOADS_ENABLED:-true}"
+
+# Storage and expiry limits used by the upload UI and backend validators.
+# Use megabytes here; WarpBox converts these to bytes internally.
+export WARPBOX_GLOBAL_MAX_FILE_SIZE_MB="${WARPBOX_GLOBAL_MAX_FILE_SIZE_MB:-2048}"   # 2 GiB
+export WARPBOX_GLOBAL_MAX_BOX_SIZE_MB="${WARPBOX_GLOBAL_MAX_BOX_SIZE_MB:-4096}"    # 4 GiB
+export WARPBOX_DEFAULT_GUEST_EXPIRY_SECONDS="${WARPBOX_DEFAULT_GUEST_EXPIRY_SECONDS:-3600}"    # 1 hour
+export WARPBOX_MAX_GUEST_EXPIRY_SECONDS="${WARPBOX_MAX_GUEST_EXPIRY_SECONDS:-172800}"          # 48 hours
+
+# Download-page refresh and thumbnail worker tuning.
+export WARPBOX_BOX_POLL_INTERVAL_MS="${WARPBOX_BOX_POLL_INTERVAL_MS:-5000}"
+export WARPBOX_THUMBNAIL_BATCH_SIZE="${WARPBOX_THUMBNAIL_BATCH_SIZE:-10}"
+export WARPBOX_THUMBNAIL_INTERVAL_SECONDS="${WARPBOX_THUMBNAIL_INTERVAL_SECONDS:-30}"
+
+# Data location.
+export WARPBOX_DATA_DIR="${WARPBOX_DATA_DIR:-./data}"
+
+# Admin Area
+export WARPBOX_ADMIN_ENABLED="${WARPBOX_ADMIN_ENABLED:-true}"
+export WARPBOX_ADMIN_PASSWORD="${WARPBOX_ADMIN_PASSWORD:-123}"
+
+go run ./cmd/main.go run
--- a/static/css/app.css
+++ b/static/css/app.css
@@ -22,10 +22,13 @@
 :root {
    font-family: 'PixelOperator', 'MS Sans Serif', Arial, sans-serif;
    font-smooth: never;
+    -webkit-font-smoothing: none;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: geometricPrecision;
    image-rendering: pixelated;
-    cursor: url('/static/cursors/vaporwave-hotline-white-plus/Normal\ Select.cur'), auto;

    --base-font-size: 14px;
+    --ui-scale: 1;
    --w98-blue: #000078;
    --w98-blue-gradient: linear-gradient(90deg, #000078 0%, #000078 28%, #0f80cd 50%, #000078 72%, #000078 100%);
    --w98-gray: #c0c0c0;
@@ -38,6 +41,7 @@
    box-sizing: border-box;
    scrollbar-width: auto;
    scrollbar-color: #c0c0c0 #808080;
+    image-rendering: pixelated;
 }

 html {
@@ -75,7 +79,7 @@ label[for],
 .menu-button,
 .win98-button:not(:disabled),
 a {
-    cursor: url('/static/cursors/vaporwave-hotline-white-plus/Link\ Select.cur'), pointer;
+    cursor: pointer;
 }

 button,
@@ -90,7 +94,7 @@ input[type="password"],
 input[type="number"],
 input[type="file"],
 textarea {
-    cursor: url('/static/cursors/vaporwave-hotline-white-plus/Hotline\ Black\ Handwriting.cur'), text;
+    cursor: text;
 }

 :focus-visible {
@@ -172,18 +176,19 @@ textarea:disabled {
 }

@media (min-width: 1800px) {
-    :root { --base-font-size: 15px; }
-    .desktop-wrap { zoom: 1.2; }
+    :root { --base-font-size: 15px; --ui-scale: 1.2; }
 }

@media (min-width: 2048px) {
-    :root { --base-font-size: 16px; }
-    .desktop-wrap { zoom: 1.36; }
+    :root { --base-font-size: 16px; --ui-scale: 1.36; }
 }

@media (min-width: 2560px) {
-    :root { --base-font-size: 18px; }
-    .desktop-wrap { zoom: 1.58; }
+    :root { --base-font-size: 18px; --ui-scale: 1.58; }
+}
+
+@media (min-width: 3200px) {
+    :root { --base-font-size: 20px; --ui-scale: 1.88; }
 }

@media (prefers-reduced-motion: reduce) {
--- a/static/css/box.css
+++ b/static/css/box.css
@@ -1,6 +1,7 @@
 .box-window {
    width: min(760px, calc(100vw - 36px));
    height: min(560px, calc(100vh - 36px));
+    zoom: var(--ui-scale);
 }

 .box-toolbar {
@@ -192,6 +193,7 @@
        height: 100dvh;
        border: 0;
        box-shadow: none;
+        zoom: 1;
    }

    .box-titlebar {
--- a/static/css/login.css
+++ b/static/css/login.css
@@ -1,6 +1,7 @@
 .login-window {
    width: 420px;
    height: 248px;
+    zoom: var(--ui-scale);
 }

 .login-form {
@@ -109,6 +110,7 @@
        height: 100dvh;
        border: 0;
        box-shadow: none;
+        zoom: 1;
    }

    .login-titlebar {
--- a/static/css/upload.css
+++ b/static/css/upload.css
@@ -17,6 +17,14 @@
    justify-content: center;
    gap: 18px;
    overflow: hidden;
+    zoom: var(--ui-scale);
+}
+
+body.fit-window .desktop-wrap {
+    width: min(100%, calc(100vw / var(--ui-scale) - 20px));
+    height: min(calc(100vh / var(--ui-scale) - 20px), 900px);
+    max-height: none;
+    grid-template-columns: minmax(0, 1fr) var(--side-width);
 }

 .upload-window {
@@ -233,6 +241,7 @@
    background-color: #000078;
    background-image: repeating-linear-gradient(to right, rgba(255,255,255,.12) 0 1px, transparent 1px 18px);
    transform-origin: left center;
+    position: relative;
 }

 .upload-quota-bar.is-over-quota {
@@ -433,6 +442,26 @@
 .upload-file-row.is-uploaded .upload-progress-bar { background-color: #008000; }
 .upload-file-row.is-failed .upload-progress-bar { width: 100%; background-color: #800000; }

+.upload-progress-bar.just-completed,
+.upload-overall-bar.just-completed {
+    animation: progress-impact-bar 520ms steps(5, end) 1;
+}
+
+.upload-progress-bar.just-completed::after,
+.upload-overall-bar.just-completed::after {
+    content: "";
+    position: absolute;
+    right: -7px;
+    top: 50%;
+    width: 12px;
+    height: 22px;
+    transform: translateY(-50%);
+    background: repeating-linear-gradient(45deg, rgba(255,255,255,.95) 0 2px, rgba(0,255,102,.85) 2px 4px, transparent 4px 6px);
+    box-shadow: 0 0 0 1px #ffffff, 0 0 8px #00ff66;
+    pointer-events: none;
+    animation: progress-impact-spark 520ms steps(5, end) 1;
+}
+
 .upload-result {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 72px;
@@ -828,6 +857,7 @@
    max-height: min(760px, calc(100vh - 24px));
    display: none;
    z-index: 80;
+    zoom: var(--ui-scale);
 }

 .popup-window.is-visible {
@@ -888,6 +918,7 @@
    font-size: 12px;
    line-height: 14px;
    box-shadow: 4px 4px 0 rgba(0,0,0,.45);
+    zoom: var(--ui-scale);
 }

 .toast.is-visible {
@@ -984,6 +1015,17 @@
    font-family: 'PixelOperatorMono', monospace;
 }

+.popup-body pre {
+    user-select: text;
+    cursor: text;
+    padding-bottom: 22px;
+}
+
+.popup-body pre::after {
+    content: "\A";
+    white-space: pre;
+}
+
 .kbd {
    display: inline-block;
    min-width: 18px;
@@ -1002,6 +1044,8 @@
@keyframes share-ready-pulse { 50% { filter: brightness(1.08); box-shadow: 0 0 0 2px #000078; } }
@keyframes start-ready-rainbow-breathe { 0%, 100% { transform: rotate(-.35deg) scale(1); } 50% { transform: rotate(.35deg) scale(1.016); } }
@keyframes start-border-rainbow-slide { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
+@keyframes progress-impact-bar { 0% { filter: brightness(1); } 35% { filter: brightness(1.75); } 100% { filter: brightness(1); } }
+@keyframes progress-impact-spark { 0% { opacity: 0; transform: translateY(-50%) scale(.7); } 30% { opacity: 1; transform: translateY(-50%) scale(1.18); } 100% { opacity: 0; transform: translateY(-50%) scale(.7); } }
@keyframes terminal-cursor { 50% { opacity: 0; } }
@keyframes popup-open-v10 { from { transform: translate(-50%, -48%) scale(.97); opacity: .35; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -54,6 +54,8 @@ let uploadLocked = false;
 let statusTimer = null;
 let pendingDuplicateFiles = [];
 let apiKeyTimer = null;
+let completedImpactKeys = new Set();
+let overallImpactDone = false;

 function numberFromDataset(value) {
    const number = Number.parseInt(value || "0", 10);
@@ -177,6 +179,28 @@ function showToast(message, type = "info") {
    showToast.timer = setTimeout(() => el.toast.classList.remove("is-visible"), 2600);
 }

+function disabledReasonFor(target) {
+    const control = target.closest("[data-disabled-reason], button, input, select, textarea, .upload-dropzone");
+    if (!control) return "";
+    if (control.classList.contains("upload-dropzone") && uploadLocked) {
+        return control.dataset.disabledReason || "The current box is sealed after upload. Press Clear to start a new box.";
+    }
+    if (control.disabled || control.readOnly || control.getAttribute("aria-disabled") === "true") {
+        return control.dataset.disabledReason || control.title || "This control is disabled right now.";
+    }
+    return "";
+}
+
+function announceDisabledReason(event) {
+    const reason = disabledReasonFor(event.target);
+    if (!reason) return false;
+    event.preventDefault();
+    event.stopPropagation();
+    showToast(reason, "warning");
+    setStatus(reason);
+    return true;
+}
+
 function stopStatusAnimation() {
    if (statusTimer) {
        clearInterval(statusTimer);
@@ -214,6 +238,14 @@ function setOverallProgress(percent) {
    if (el.overallPercent) el.overallPercent.textContent = display;
 }

+function flashProgressBar(bar) {
+    if (!bar) return;
+    bar.classList.remove("just-completed");
+    void bar.offsetWidth;
+    bar.classList.add("just-completed");
+    setTimeout(() => bar.classList.remove("just-completed"), 620);
+}
+
 function setRowProgress(item, percent) {
    const bar = item.row?.querySelector(".upload-progress-bar");
    if (bar) bar.style.width = `${Math.max(0, Math.min(100, percent))}%`;
@@ -275,6 +307,10 @@ function updateOverallProgress() {
    const uploadedCount = files.filter((item) => item.uploaded).length;
    const percent = overallProgress();
    setOverallProgress(percent >= 100 && uploadedCount < files.length ? 99 : percent);
+    if (percent >= 100 && files.length && !overallImpactDone) {
+        overallImpactDone = true;
+        flashProgressBar(el.overallBar);
+    }
 }

 function createFileRow(item, index) {
@@ -310,6 +346,7 @@ function createFileRow(item, index) {
    remove.dataset.remove = String(index);
    remove.title = uploadLocked ? "This file cannot be removed because this upload box was already created." : "Remove file";
    remove.disabled = uploadLocked;
+    remove.dataset.disabledReason = uploadLocked ? "Files cannot be removed after the box is created. Press Clear to start another upload." : "";

    const progress = document.createElement("span");
    progress.className = "upload-progress";
@@ -395,17 +432,9 @@ function addFiles(fileList) {
 function showDuplicateDialog(duplicates) {
    pendingDuplicateFiles = duplicates;
    const list = duplicates.map((item) => `<li><strong>${htmlEscape(item.displayName)}</strong> <span>${formatBytes(item.file.size)}</span></li>`).join("");
-    openPopup("Duplicate file names", `
-        <h3>Duplicate file names detected</h3>
-        <p>These files have the same names as files already in the queue.</p>
-        <ol class="duplicate-list">${list}</ol>
-        <p>Skip them, or append numbers so they become names like <code>file (2).zip</code>.</p>
-        <div class="copy-fallback-actions">
-            <button class="win98-button" type="button" id="duplicate-append">Append numbers</button>
-            <button class="win98-button" type="button" id="duplicate-skip">Skip duplicates</button>
-        </div>`);
+    showTemplatePopup("Duplicate file names", "duplicate", { list })
+        .then(() => document.querySelector("#duplicate-append")?.focus());
    showToast("Duplicate names found. Choose skip or append numbers.", "warning");
-    setTimeout(() => document.querySelector("#duplicate-append")?.focus(), 0);
 }

 function appendPendingDuplicates() {
@@ -443,6 +472,8 @@ function clearQueue() {
    files = [];
    pendingDuplicateFiles = [];
    uploadLocked = false;
+    completedImpactKeys = new Set();
+    overallImpactDone = false;
    stopStatusAnimation();
    setBoxOptionsLocked(false);
    setShareUrl("");
@@ -461,14 +492,8 @@ function confirmClearQueue() {
        showToast("Nothing to clear.");
        return;
    }
-    openPopup("Clear WarpBox?", `
-        <h3>Confirm clear</h3>
-        <p>This removes the current queue, resets progress, and unlocks the Start upload button.</p>
-        <div class="copy-fallback-actions">
-            <button class="win98-button" type="button" id="confirm-clear-yes">Clear</button>
-            <button class="win98-button" type="button" id="confirm-clear-no">Cancel</button>
-        </div>`);
-    setTimeout(() => document.querySelector("#confirm-clear-no")?.focus(), 0);
+    showTemplatePopup("Clear WarpBox?", "clear")
+        .then(() => document.querySelector("#confirm-clear-no")?.focus());
 }

 async function createBox() {
@@ -521,6 +546,13 @@ function setFileFailed(item, message) {
    updateOverallProgress();
 }

+function markCompletedImpact(item) {
+    const key = item.boxFile?.id || item.displayName;
+    if (completedImpactKeys.has(key)) return;
+    completedImpactKeys.add(key);
+    flashProgressBar(item.row?.querySelector(".upload-progress-bar"));
+}
+
 function uploadFile(item, onComplete) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
@@ -566,6 +598,7 @@ function uploadFile(item, onComplete) {
            item.row?.classList.add("is-uploaded");
            if (item.row) item.row.title = "Uploaded";
            setRowProgress(item, 100);
+            markCompletedImpact(item);

            try {
                const result = JSON.parse(xhr.responseText);
@@ -635,6 +668,8 @@ async function startUpload() {
        item.failed = false;
        item.error = "";
    });
+    completedImpactKeys = new Set();
+    overallImpactDone = false;
    renderFiles();

    let completedCount = 0;
@@ -731,6 +766,12 @@ function updateDisabledReasons() {
        el.startButton.dataset.disabledReason = reason;
        el.startButton.title = reason;
    }
+    if (el.fileInput) {
+        el.fileInput.dataset.disabledReason = uploadLocked ? "The current box is sealed after upload. Press Clear to start a new box." : (!uploadsEnabled ? "Guest uploads are disabled." : "");
+    }
+    if (el.dropzone) {
+        el.dropzone.dataset.disabledReason = uploadLocked ? "The current box is sealed after upload. Press Clear to start a new box." : (!uploadsEnabled ? "Guest uploads are disabled." : "");
+    }
 }

 function saveSettings() {
@@ -773,9 +814,6 @@ function loadSettings() {
 }

 function syncMenuChecks() {
-    document.querySelectorAll("[data-expiry-check]").forEach((node) => {
-        node.textContent = node.dataset.expiryCheck === el.expiry?.value ? "✓" : "";
-    });
    const downloadCheck = document.querySelector("[data-download-page-check]");
    if (downloadCheck) downloadCheck.textContent = el.downloadPage?.checked ? "✓" : "";
 }
@@ -826,6 +864,14 @@ function slugify(value) {
        .slice(0, 32);
 }

+function sanitizeSlugInput(value) {
+    return String(value || "")
+        .toLowerCase()
+        .replace(/[^a-z0-9-]/g, "")
+        .replace(/-+/g, "-")
+        .slice(0, 32);
+}
+
 function syncSlugFromName(force = false) {
    if (!el.customSlug || !el.boxName) return;
    if (force || !el.customSlug.value || el.customSlug.dataset.auto === "true") {
@@ -846,9 +892,9 @@ function randomPassword() {

 function randomBoxName() {
    if (!el.boxName || uploadLocked) return;
-    const adjectives = ["neon", "turbo", "quiet", "cosmic", "lucky", "midnight", "pixel", "rapid"];
-    const nouns = ["floppy", "archive", "packet", "portal", "folder", "upload", "cache", "drive"];
-    el.boxName.value = `${adjectives[Math.floor(Math.random() * adjectives.length)]}-${nouns[Math.floor(Math.random() * nouns.length)]}`;
+    const adjectives = ["Neon", "Turbo", "Quiet", "Cosmic", "Lucky", "Midnight", "Pixel", "Rapid"];
+    const nouns = ["Floppy Disk", "Archive Box", "Packet Portal", "Upload Folder", "Cache Drive", "Release Bundle"];
+    el.boxName.value = `${adjectives[Math.floor(Math.random() * adjectives.length)]} ${nouns[Math.floor(Math.random() * nouns.length)]}`;
    syncSlugFromName(true);
    setStatus("Generated a local box name");
 }
@@ -891,14 +937,11 @@ async function copyText(kind, value, openUrl = "") {
 }

 function showCopyFallback(kind, value, openUrl) {
-    openPopup(`${kind} copy failed`, `
-        <h3>Clipboard access failed</h3>
-        <p>The browser refused clipboard access. Copy it manually from the field below.</p>
-        <textarea class="copy-fallback-text" readonly>${htmlEscape(value)}</textarea>
-        <div class="copy-fallback-actions">
-            ${openUrl ? `<a class="win98-button" href="${htmlEscape(openUrl)}" target="_blank" rel="noreferrer">Open</a>` : ""}
-            <button class="win98-button" type="button" id="fallback-close">Close</button>
-        </div>`);
+    const openLink = openUrl ? `<a class="win98-button" href="${htmlEscape(openUrl)}" target="_blank" rel="noreferrer">Open</a>` : "";
+    showTemplatePopup(`${kind} copy failed`, "copy-failed", {
+        value: htmlEscape(value),
+        openLink,
+    });
 }

 function quotaWarningHtml(message) {
@@ -916,10 +959,10 @@ function quotaWarningHtml(message) {
 }

 function showWarningDialog(title, message) {
-    openPopup(title, `
-        <h3>${htmlEscape(title)}</h3>
-        ${quotaWarningHtml(message)}
-        <div class="copy-fallback-actions"><button class="win98-button" type="button" id="fallback-close">OK</button></div>`);
+    showTemplatePopup(title, "warning", {
+        title: htmlEscape(title),
+        content: quotaWarningHtml(message),
+    });
 }

 function openPopup(title, html, about = false) {
@@ -936,96 +979,41 @@ function closeDoc() {
    el.modalBackdrop?.classList.remove("is-visible");
 }

-const docs = {
-    cli: {
-        title: "CLI Guide",
-        html: `
-            <h3>Upload with cURL</h3>
-            <p>WarpBox accepts normal multipart form uploads through the compatibility endpoint:</p>
-            <pre>curl \\
-  -F 'files=@./my-file.zip' \\
-  -F 'retention=1h' \\
-  ${window.location.origin}/upload</pre>
-            <h4>Browser flow</h4>
-            <p>The browser uses the manifest API: it creates a box, uploads each file, and marks failed uploads so the download page does not wait forever.</p>
-        `,
-    },
-    faq: {
-        title: "Help & FAQ",
-        html: `
-            <h3>Help & FAQ</h3>
-            <section class="shortcut-section">
-                <h4>Keyboard shortcuts</h4>
-                <ul class="shortcut-list">
-                    <li><span><span class="kbd">Ctrl</span> + <span class="kbd">O</span></span><span>Browse for files.</span></li>
-                    <li><span><span class="kbd">Ctrl</span> + <span class="kbd">U</span></span><span>Start the current upload.</span></li>
-                    <li><span><span class="kbd">Ctrl</span> + <span class="kbd">K</span></span><span>Copy the full cURL command.</span></li>
-                    <li><span><span class="kbd">Ctrl</span> + <span class="kbd">L</span></span><span>Copy the share URL after upload.</span></li>
-                    <li><span><span class="kbd">F1</span></span><span>Open this window.</span></li>
-                    <li><span><span class="kbd">Esc</span></span><span>Close menus and popups.</span></li>
-                </ul>
-            </section>
-            <div class="faq-list">
-                <div class="faq-item"><p><strong>Can I password protect uploads?</strong></p><p>Yes. Set a password in Box Options before starting the upload.</p></div>
-                <div class="faq-item"><p><strong>What happens if one file fails?</strong></p><p>The failed row stays red, successful files remain available, and WarpBox marks the failed file in the manifest.</p></div>
-                <div class="faq-item"><p><strong>Are all options server-backed?</strong></p><p>Expiry, password, ZIP download, and one-time download are sent to the backend. Notes like box name, custom slug, and API key mode are saved locally until backend support exists.</p></div>
-            </div>
-        `,
-    },
-    dailyQuota: {
-        title: "Upload limits",
-        html: `
-            <h3>Upload limits</h3>
-            <div class="quota-meter-list">
-                <div class="quota-meter">
-                    <div class="quota-meter-head"><span>Box size</span><span>${maxBoxBytes ? formatBytes(maxBoxBytes) : "No configured limit"}</span></div>
-                    <div class="quota-meter-track"><span class="quota-meter-bar" style="width:${maxBoxBytes ? Math.min(100, Math.round((totalBytes() / maxBoxBytes) * 100)) : 0}%"></span></div>
-                </div>
-                <div class="quota-meter">
-                    <div class="quota-meter-head"><span>Single file</span><span>${maxFileBytes ? formatBytes(maxFileBytes) : "No configured limit"}</span></div>
-                    <div class="quota-meter-track"><span class="quota-meter-bar" style="width:${oversizedFiles().length ? 100 : 0}%"></span></div>
-                </div>
-            </div>
-            <p class="quota-note">These values come from the running WarpBox configuration.</p>
-        `,
-    },
-    about: {
-        title: "About WarpBox",
-        about: true,
-        html: `
-            <h3>WarpBox</h3>
-            <p><strong>WarpBox</strong> was made by <strong>Daniel Legt</strong>.</p>
-            <p>Temporary file boxes, terminal-friendly uploads, and old-web UI charm.</p>
-        `,
-    },
-    examples: {
-        title: "Examples",
-        html: `
-            <h3>Upload examples</h3>
-            <h4>Basic CLI upload</h4>
-            <pre>curl \\
-  -F 'files=@./photo.png' \\
-  -F 'retention=24h' \\
-  ${window.location.origin}/upload</pre>
-            <h4>Multiple files with password</h4>
-            <pre>curl \\
-  -F 'files=@./one.png' \\
-  -F 'files=@./two.zip' \\
-  -F 'retention=1h' \\
-  -F 'password=secret-pass' \\
-  ${window.location.origin}/upload</pre>
-        `,
-    },
-};
+async function showTemplatePopup(title, templateName, data = {}, about = false) {
+    try {
+        const html = await window.WBPopups.renderTemplate(templateName, data);
+        openPopup(title, html, about);
+    } catch (error) {
+        showToast(error.message || `Could not load ${title}.`, "error");
+    }
+}

-function openDoc(name) {
-    const doc = docs[name];
-    if (!doc) return;
-    openPopup(doc.title, doc.html, doc.about);
-    setStatus(`${doc.title} opened`);
+function popupTemplateData(name) {
+    const data = { origin: window.location.origin };
+    if (name !== "dailyQuota") return data;
+    return {
+        ...data,
+        boxLimit: maxBoxBytes ? formatBytes(maxBoxBytes) : "No configured limit",
+        boxPercent: maxBoxBytes ? Math.min(100, Math.round((totalBytes() / maxBoxBytes) * 100)) : 0,
+        fileLimit: maxFileBytes ? formatBytes(maxFileBytes) : "No configured limit",
+        filePercent: oversizedFiles().length ? 100 : 0,
+    };
+}
+
+async function openDoc(name) {
+    try {
+        const doc = await window.WBPopups.renderDoc(name, popupTemplateData(name));
+        if (!doc) return;
+        openPopup(doc.title, doc.html, doc.about);
+        setStatus(`${doc.title} opened`);
+    } catch (error) {
+        showToast(error.message || "Could not load help window.", "error");
+    }
 }

 document.addEventListener("click", (event) => {
+    if (announceDisabledReason(event)) return;
+
    const menuButton = event.target.closest(".menu-button");
    if (menuButton) {
        const item = menuButton.closest(".menu-item");
@@ -1067,19 +1055,16 @@ document.addEventListener("click", (event) => {
        }
        if (action === "help" || action === "side-help") openDoc("faq");
        if (action === "terminal-help") el.terminal?.focus();
-        if (action === "coming-soon") showToast("That shortcut is decorative for now.");
-        if (action === "side-close" || action === "side-folder-close" || action === "fake-close" || action === "minimize" || action === "toggle-fit") showToast("Window controls are decorative on this page.");
-        return;
-    }
-
-    const expiry = event.target.closest("[data-expiry]")?.dataset.expiry;
-    if (expiry && el.expiry) {
-        el.expiry.value = expiry;
-        syncZipForRetention();
-        saveSettings();
-        syncMenuChecks();
-        updateTerminal();
-        setStatus(`Expiry set to ${event.target.textContent.trim()}`);
+        if (action === "coming-soon") showToast("Coming Soon, not implemented just yet.");
+        if (action === "fake-close") showToast("Close button denied. The upload window is staying open.", "warning");
+        if (action === "minimize") showToast("Minimize requested. WarpBox stays visible so your queue is safe.");
+        if (action === "toggle-fit") {
+            document.body.classList.toggle("fit-window");
+            showToast("Maximize requested. The pixel rectangle feels important now.");
+        }
+        if (action === "side-close") showToast("Box Options refuses to leave. Settings stay visible.");
+        if (action === "side-help") showToast("Terminal help opened. Copy the command and feed it files.");
+        if (action === "side-folder-close") showToast("The folder window saw that click and chose denial.");
        return;
    }

@@ -1115,6 +1100,22 @@ document.addEventListener("click", (event) => {
    }
 });

+document.addEventListener("mousedown", (event) => {
+    announceDisabledReason(event);
+}, true);
+
+document.querySelectorAll(".menu-item").forEach((item) => {
+    item.addEventListener("mouseenter", () => {
+        if (!document.querySelector(".menu-item.is-open")) return;
+        document.querySelectorAll(".menu-item.is-open").forEach((node) => {
+            node.classList.remove("is-open");
+            node.querySelector(".menu-button")?.setAttribute("aria-expanded", "false");
+        });
+        item.classList.add("is-open");
+        item.querySelector(".menu-button")?.setAttribute("aria-expanded", "true");
+    });
+});
+
 el.fileInput?.addEventListener("change", () => addFiles(el.fileInput.files));

 [el.dropSurface, el.dropzone].filter(Boolean).forEach((target) => {
@@ -1150,7 +1151,11 @@ el.modalBackdrop?.addEventListener("click", closeDoc);
 [el.expiry, el.password, el.maxViews, el.boxName, el.customSlug, el.downloadPage, el.allowZip, el.allowPreview, el.keepFilenames, el.privateBox, el.apiKeyMode, el.apiKeyInput].filter(Boolean).forEach((control) => {
    control.addEventListener("input", () => {
        if (control === el.boxName) syncSlugFromName();
-        if (control === el.customSlug) el.customSlug.dataset.auto = "false";
+        if (control === el.customSlug) {
+            const clean = sanitizeSlugInput(el.customSlug.value);
+            if (el.customSlug.value !== clean) el.customSlug.value = clean;
+            el.customSlug.dataset.auto = "false";
+        }
        if (control === el.apiKeyInput) validateApiKeyField();
        saveSettings();
        updateTerminal();
--- a/static/js/upload-popups.js
+++ b/static/js/upload-popups.js
@@ -0,0 +1,36 @@
+window.WBPopups = (() => {
+    const cache = new Map();
+    const docs = {
+        cli: { title: "CLI Guide", template: "cli" },
+        faq: { title: "Help & FAQ", template: "faq" },
+        dailyQuota: { title: "Upload limits", template: "upload-limits" },
+        about: { title: "About WarpBox", template: "about", about: true },
+        examples: { title: "Examples", template: "examples" },
+    };
+
+    async function loadTemplate(name) {
+        if (cache.has(name)) return cache.get(name);
+        const response = await fetch(`/static/popups/${name}.html`, { credentials: "same-origin" });
+        if (!response.ok) throw new Error(`Could not load popup template: ${name}`);
+        const template = await response.text();
+        cache.set(name, template);
+        return template;
+    }
+
+    async function renderTemplate(name, data = {}) {
+        const template = await loadTemplate(name);
+        return window.WBUtils.renderTemplate(template, data);
+    }
+
+    async function renderDoc(name, data = {}) {
+        const doc = docs[name];
+        if (!doc) return null;
+        return {
+            title: doc.title,
+            about: Boolean(doc.about),
+            html: await renderTemplate(doc.template, data),
+        };
+    }
+
+    return { renderTemplate, renderDoc };
+})();
--- a/static/js/upload-utils.js
+++ b/static/js/upload-utils.js
@@ -0,0 +1,9 @@
+window.WBUtils = (() => {
+    function renderTemplate(template, data = {}) {
+        return String(template).replace(/\{\{\s*([a-zA-Z0-9_]+)\s*\}\}/g, (_, key) => {
+            return Object.prototype.hasOwnProperty.call(data, key) ? String(data[key]) : "";
+        });
+    }
+
+    return { renderTemplate };
+})();
--- a/static/popups/about.html
+++ b/static/popups/about.html
@@ -0,0 +1,3 @@
+<h3>WarpBox</h3>
+<p><strong>WarpBox</strong> was made by <strong>Daniel Legt</strong>.</p>
+<p>Temporary file boxes, terminal-friendly uploads, and old-web UI charm.</p>
--- a/static/popups/clear.html
+++ b/static/popups/clear.html
@@ -0,0 +1,6 @@
+<h3>Confirm clear</h3>
+<p>This removes the current queue, resets progress, and unlocks the Start upload button.</p>
+<div class="copy-fallback-actions">
+    <button class="win98-button" type="button" id="confirm-clear-yes">Clear</button>
+    <button class="win98-button" type="button" id="confirm-clear-no">Cancel</button>
+</div>
--- a/static/popups/cli.html
+++ b/static/popups/cli.html
@@ -0,0 +1,9 @@
+<h3>Upload with cURL</h3>
+<p>WarpBox accepts normal multipart form uploads through the compatibility endpoint:</p>
+<pre>curl \
+  -F 'files=@./my-file.zip' \
+  -F 'retention=1h' \
+  {{ origin }}/upload
+</pre>
+<h4>Browser flow</h4>
+<p>The browser uses the manifest API: it creates a box, uploads each file, and marks failed uploads so the download page does not wait forever.</p>
--- a/static/popups/copy-failed.html
+++ b/static/popups/copy-failed.html
@@ -0,0 +1,7 @@
+<h3>Clipboard access failed</h3>
+<p>The browser refused clipboard access. Copy it manually from the field below.</p>
+<textarea class="copy-fallback-text" readonly>{{ value }}</textarea>
+<div class="copy-fallback-actions">
+    {{ openLink }}
+    <button class="win98-button" type="button" id="fallback-close">Close</button>
+</div>
--- a/static/popups/duplicate.html
+++ b/static/popups/duplicate.html
@@ -0,0 +1,8 @@
+<h3>Duplicate file names detected</h3>
+<p>These files have the same names as files already in the queue.</p>
+<ol class="duplicate-list">{{ list }}</ol>
+<p>Skip them, or append numbers so they become names like <code>file (2).zip</code>.</p>
+<div class="copy-fallback-actions">
+    <button class="win98-button" type="button" id="duplicate-append">Append numbers</button>
+    <button class="win98-button" type="button" id="duplicate-skip">Skip duplicates</button>
+</div>
--- a/static/popups/examples.html
+++ b/static/popups/examples.html
@@ -0,0 +1,102 @@
+<h3>Upload examples</h3>
+<h4>Basic CLI upload</h4>
+<pre>curl \
+  -F 'files=@./photo.png' \
+  -F 'retention=24h' \
+  {{ origin }}/upload
+</pre>
+<h4>Multiple files with password</h4>
+<pre>curl \
+  -F 'files=@./one.png' \
+  -F 'files=@./two.zip' \
+  -F 'retention=1h' \
+  -F 'password=secret-pass' \
+  {{ origin }}/upload
+</pre>
+<h4>Go</h4>
+<pre>package main
+
+import (
+  "bytes"
+  "fmt"
+  "io"
+  "mime/multipart"
+  "net/http"
+  "os"
+)
+
+func main() {
+  file, err := os.Open("photo.png")
+  if err != nil { panic(err) }
+  defer file.Close()
+
+  var body bytes.Buffer
+  writer := multipart.NewWriter(&body)
+  part, err := writer.CreateFormFile("files", "photo.png")
+  if err != nil { panic(err) }
+  if _, err := io.Copy(part, file); err != nil { panic(err) }
+  _ = writer.WriteField("retention", "1h")
+  writer.Close()
+
+  req, err := http.NewRequest("POST", "{{ origin }}/upload", &body)
+  if err != nil { panic(err) }
+  req.Header.Set("Content-Type", writer.FormDataContentType())
+
+  resp, err := http.DefaultClient.Do(req)
+  if err != nil { panic(err) }
+  defer resp.Body.Close()
+  out, _ := io.ReadAll(resp.Body)
+  fmt.Println(string(out))
+}
+</pre>
+<h4>Java 11+ HttpClient</h4>
+<pre>import java.net.URI;
+import java.net.http.HttpClient;
+import java.net.http.HttpRequest;
+import java.net.http.HttpResponse;
+import java.nio.file.Files;
+import java.nio.file.Path;
+
+public class UploadWarpBox {
+  public static void main(String[] args) throws Exception {
+    String boundary = "----WarpBoxBoundary" + System.currentTimeMillis();
+    Path file = Path.of("photo.png");
+    byte[] prefix = ("--" + boundary + "\r\n" +
+      "Content-Disposition: form-data; name=\"retention\"\r\n\r\n" +
+      "1h\r\n" +
+      "--" + boundary + "\r\n" +
+      "Content-Disposition: form-data; name=\"files\"; filename=\"photo.png\"\r\n" +
+      "Content-Type: application/octet-stream\r\n\r\n").getBytes();
+    byte[] suffix = ("\r\n--" + boundary + "--\r\n").getBytes();
+    byte[] fileBytes = Files.readAllBytes(file);
+    byte[] body = new byte[prefix.length + fileBytes.length + suffix.length];
+    System.arraycopy(prefix, 0, body, 0, prefix.length);
+    System.arraycopy(fileBytes, 0, body, prefix.length, fileBytes.length);
+    System.arraycopy(suffix, 0, body, prefix.length + fileBytes.length, suffix.length);
+
+    HttpRequest request = HttpRequest.newBuilder()
+      .uri(URI.create("{{ origin }}/upload"))
+      .header("Content-Type", "multipart/form-data; boundary=" + boundary)
+      .POST(HttpRequest.BodyPublishers.ofByteArray(body))
+      .build();
+    HttpResponse&lt;String&gt; response = HttpClient.newHttpClient()
+      .send(request, HttpResponse.BodyHandlers.ofString());
+    System.out.println(response.body());
+  }
+}
+</pre>
+<h4>JavaScript Node.js</h4>
+<pre>import { openAsBlob } from 'node:fs';
+
+const file = await openAsBlob('./photo.png');
+const form = new FormData();
+form.append('files', file, 'photo.png');
+form.append('retention', '1h');
+
+const res = await fetch('{{ origin }}/upload', {
+  method: 'POST',
+  body: form
+});
+
+console.log(await res.text());
+</pre>
--- a/static/popups/faq.html
+++ b/static/popups/faq.html
@@ -0,0 +1,17 @@
+<h3>Help &amp; FAQ</h3>
+<section class="shortcut-section">
+    <h4>Keyboard shortcuts</h4>
+    <ul class="shortcut-list">
+        <li><span><span class="kbd">Ctrl</span> + <span class="kbd">O</span></span><span>Browse for files.</span></li>
+        <li><span><span class="kbd">Ctrl</span> + <span class="kbd">U</span></span><span>Start the current upload.</span></li>
+        <li><span><span class="kbd">Ctrl</span> + <span class="kbd">K</span></span><span>Copy the full cURL command.</span></li>
+        <li><span><span class="kbd">Ctrl</span> + <span class="kbd">L</span></span><span>Copy the share URL after upload.</span></li>
+        <li><span><span class="kbd">F1</span></span><span>Open this window.</span></li>
+        <li><span><span class="kbd">Esc</span></span><span>Close menus and popups.</span></li>
+    </ul>
+</section>
+<div class="faq-list">
+    <div class="faq-item"><p><strong>Can I password protect uploads?</strong></p><p>Yes. Set a password in Box Options before starting the upload.</p></div>
+    <div class="faq-item"><p><strong>What happens if one file fails?</strong></p><p>The failed row stays red, successful files remain available, and WarpBox marks the failed file in the manifest.</p></div>
+    <div class="faq-item"><p><strong>Are all options server-backed?</strong></p><p>Expiry, password, ZIP download, and one-time download are sent to the backend. Notes like box name, custom slug, and API key mode are saved locally until backend support exists.</p></div>
+</div>
--- a/static/popups/upload-limits.html
+++ b/static/popups/upload-limits.html
@@ -0,0 +1,12 @@
+<h3>Upload limits</h3>
+<div class="quota-meter-list">
+    <div class="quota-meter">
+        <div class="quota-meter-head"><span>Box size</span><span>{{ boxLimit }}</span></div>
+        <div class="quota-meter-track"><span class="quota-meter-bar" style="width:{{ boxPercent }}%"></span></div>
+    </div>
+    <div class="quota-meter">
+        <div class="quota-meter-head"><span>Single file</span><span>{{ fileLimit }}</span></div>
+        <div class="quota-meter-track"><span class="quota-meter-bar" style="width:{{ filePercent }}%"></span></div>
+    </div>
+</div>
+<p class="quota-note">These values come from the running WarpBox configuration.</p>
--- a/static/popups/warning.html
+++ b/static/popups/warning.html
@@ -0,0 +1,5 @@
+<h3>{{ title }}</h3>
+{{ content }}
+<div class="copy-fallback-actions">
+    <button class="win98-button" type="button" id="fallback-close">OK</button>
+</div>
--- a/templates/index.html
+++ b/templates/index.html
@@ -40,11 +40,8 @@
                        <div class="menu-item">
                            <button class="menu-button" type="button" aria-expanded="false"><u>B</u>ox</button>
                            <div class="menu-popup" role="menu">
-                                {{ range .RetentionOptions }}
-                                    <button class="menu-action" type="button" data-expiry="{{ .Key }}"><span class="menu-check" data-expiry-check="{{ .Key }}">{{ if eq .Key $.DefaultRetention }}✓{{ end }}</span><span>{{ .Label }}</span><span></span></button>
-                                {{ end }}
-                                <div class="menu-separator"></div>
-                                <button class="menu-action" type="button" data-action="toggle-delete-once"><span class="menu-check" data-delete-once-check></span><span>One-time download</span><span></span></button>
+                                <button class="menu-action" type="button" data-action="toggle-delete-once"><img src="/static/img/icons/recycle_bin_full_cool-5.png" alt="" aria-hidden="true"><span>One-time download</span><span></span></button>
+                                <button class="menu-action" type="button" data-action="copy-link"><img src="/static/img/sprites/frame_web-0.png" alt="" aria-hidden="true"><span>Copy share URL</span><span></span></button>
                                <button class="menu-action" type="button" data-doc="dailyQuota"><img src="/static/img/icons/scanner_alt-3.png" alt="" aria-hidden="true"><span>Upload limits...</span><span></span></button>
                            </div>
                        </div>
@@ -53,16 +50,16 @@
                            <div class="menu-popup" role="menu">
                                <button class="menu-action" type="button" data-action="random-password"><img src="/static/img/sprites/file_padlock.png" alt="" aria-hidden="true"><span>Generate password</span><span></span></button>
                                <button class="menu-action" type="button" data-action="random-box-name"><img src="/static/img/icons/directory_closed-2.png" alt="" aria-hidden="true"><span>Random box name</span><span></span></button>
-                                <button class="menu-action" type="button" data-action="clear-password"><span>○</span><span>Clear password</span><span></span></button>
-                                <button class="menu-action" type="button" data-action="toggle-page"><span class="menu-check" data-download-page-check>✓</span><span>Download page</span><span></span></button>
+                                <button class="menu-action" type="button" data-action="clear-password"><img src="/static/img/icons/x_mark_pixel.png" alt="" aria-hidden="true"><span>Clear password</span><span></span></button>
+                                <button class="menu-action" type="button" data-action="toggle-page"><img src="/static/img/sprites/frame_web-0.png" alt="" aria-hidden="true"><span>Download page</span><span></span></button>
                            </div>
                        </div>
                        <div class="menu-item">
                            <button class="menu-button" type="button" aria-expanded="false"><u>H</u>elp</button>
                            <div class="menu-popup" role="menu">
                                <button class="menu-action" type="button" data-action="help"><img src="/static/img/icons/tip.png" alt="" aria-hidden="true"><span>Show quick help</span><span>F1</span></button>
-                                <button class="menu-action" type="button" data-action="terminal-help"><span>&gt;</span><span>Show cURL command</span><span></span></button>
-                                <button class="menu-action" type="button" data-doc="about"><span>i</span><span>About WarpBox</span><span></span></button>
+                                <button class="menu-action" type="button" data-action="terminal-help"><img src="/static/img/icons/shell_window1.png" alt="" aria-hidden="true"><span>Show cURL command</span><span></span></button>
+                                <button class="menu-action" type="button" data-doc="about"><img src="/static/WarpBoxLogo.png" alt="" aria-hidden="true"><span>About WarpBox</span><span></span></button>
                            </div>
                        </div>
                    </nav>
@@ -81,7 +78,7 @@
                                </aside>
                            </header>

-                            <label class="upload-dropzone" for="file-upload" tabindex="0" id="dropzone">
+                            <label class="upload-dropzone" for="file-upload" tabindex="1" id="dropzone" data-disabled-reason="The current box is sealed after upload. Press Clear to start a new box.">
                                <img class="upload-icon-img" src="/static/img/icons/directory_open_cool-4.png" alt="" aria-hidden="true">
                                <span class="upload-primary">{{ if .UploadsEnabled }}Drop files here{{ else }}Guest uploads disabled{{ end }}</span>
                                <span class="upload-secondary">or <span class="upload-linklike">click to browse</span> from your computer</span>
@@ -113,7 +110,7 @@

                        <div class="upload-actions">
                            <button class="win98-button" type="button" data-action="clear">Clear</button>
-                            <button class="win98-button start-upload-cta" type="submit" id="start-button" {{ if not .UploadsEnabled }}disabled{{ end }} data-disabled-reason="Start upload is unavailable right now.">Start upload</button>
+                            <button class="win98-button start-upload-cta" type="submit" id="start-button" tabindex="4" {{ if not .UploadsEnabled }}disabled{{ end }} data-disabled-reason="Start upload is unavailable right now.">Start upload</button>
                        </div>
                    </form>

@@ -136,7 +133,7 @@
                            <div class="box-options-form" id="box-options-form">
                                <label class="option-row">
                                    <span>Expires:</span>
-                                    <select class="upload-select" id="expiry-select" name="retention_key">
+                                    <select class="upload-select" id="expiry-select" name="retention_key" tabindex="2">
                                        {{ range .RetentionOptions }}
                                            <option value="{{ .Key }}" {{ if eq .Key $.DefaultRetention }}selected{{ end }}>{{ .Label }}</option>
                                        {{ end }}
@@ -144,7 +141,7 @@
                                </label>
                                <label class="option-row">
                                    <span>Password:</span>
-                                    <input class="upload-text-input" id="password-input" type="text" placeholder="optional" autocomplete="off">
+                                    <input class="upload-text-input" id="password-input" type="text" placeholder="optional" autocomplete="off" tabindex="3">
                                </label>
                                <label class="option-row">
                                    <span>Max views:</span>
@@ -152,11 +149,11 @@
                                </label>
                                <label class="option-row">
                                    <span>Box name:</span>
-                                    <input class="upload-text-input" id="box-name" type="text" maxlength="42" placeholder="local note">
+                                    <input class="upload-text-input" id="box-name" type="text" maxlength="42" placeholder="optional, normal text">
                                </label>
                                <label class="option-row">
                                    <span>Custom slug:</span>
-                                    <input class="upload-text-input" id="custom-slug" type="text" maxlength="32" placeholder="local note">
+                                    <input class="upload-text-input" id="custom-slug" type="text" maxlength="32" pattern="[a-z0-9-]*" placeholder="optional-slug">
                                </label>
                                <label class="option-check">
                                    <input type="checkbox" id="download-page" checked>
@@ -196,7 +193,7 @@
                    <section class="win98-window side-panel">
                        <div class="win98-titlebar">
                            <div class="win98-titlebar-label">
-                                <img class="win98-titlebar-icon" src="/static/img/sprites/computer_explorer-4.png" alt="" aria-hidden="true">
+                                <img class="win98-titlebar-icon" src="/static/img/icons/shell_window1.png" alt="" aria-hidden="true">
                                <h2>Terminal Upload</h2>
                            </div>
                            <div class="win98-window-controls"><button class="win98-control" type="button" data-action="side-help" title="Help-ish">?</button></div>
@@ -221,7 +218,7 @@
                            <button class="folder-icon-button" type="button" data-doc="cli"><img src="/static/img/icons/directory_closed-2.png" alt="" aria-hidden="true"><span>CLI Guide</span></button>
                            <button class="folder-icon-button" type="button" data-doc="faq"><img src="/static/img/icons/directory_open_cool-4.png" alt="" aria-hidden="true"><span>Help &amp; FAQ</span></button>
                            <button class="folder-icon-button" type="button" data-doc="examples"><img src="/static/img/icons/shell_window1.png" alt="" aria-hidden="true"><span>Examples</span></button>
-                            <button class="folder-icon-button folder-icon-button-disabled" type="button" data-action="coming-soon"><img src="/static/img/sprites/eject_pc_cool-5.png" alt="" aria-hidden="true"><span>WarpBox.exe</span></button>
+                            <button class="folder-icon-button folder-icon-button-disabled" type="button" data-action="coming-soon"><img src="/static/WarpBoxLogo.png" alt="" aria-hidden="true"><span>WarpBox.exe</span></button>
                        </div>
                    </section>
                </aside>
@@ -241,6 +238,8 @@
        </section>
        <div class="toast" id="toast" role="status" aria-live="polite"></div>

+        <script src="/static/js/upload-utils.js"></script>
+        <script src="/static/js/upload-popups.js"></script>
        <script src="/static/js/app.js"></script>
    </body>
 </html>