Added web upload

static/main.css

@@ -785,3 +785,57 @@ pre code {
     .tab-layout { padding: 14px; }
     .tab-nav { position: static; }
 }
+
+/* Upload UI - aligned with app styles */
+.upload-card {
+    margin-top: 12px;
+    padding: 24px;
+    background: #ffffff;
+    border: 1px solid #e2e8f0;
+    border-radius: 12px;
+    box-shadow: none;
+}
+
+.upload-form .form-row { margin: 12px 0; }
+
+/* Status messages */
+.upload-status { margin-top: 10px; font-size: 0.95rem; color: #475569; }
+.upload-status.success { color: #16a34a; }
+.upload-status.error { color: #ef4444; }
+
+.upload-result { margin-top: 12px; word-break: break-all; }
+
+/* Buttons */
+.btn-primary {
+    appearance: none;
+    background: #3b82f6;
+    color: #ffffff;
+    border: 1px solid #3b82f6;
+    padding: 10px 16px;
+    border-radius: 10px;
+    cursor: pointer;
+    font-weight: 600;
+    font-size: 14px;
+    transition: all 0.15s ease;
+}
+.btn-primary:hover { background: #2563eb; border-color: #2563eb; }
+.btn-primary[disabled] { opacity: 0.6; cursor: progress; }
+
+.btn-secondary {
+    appearance: none;
+    background: #f1f5f9;
+    color: #0f172a;
+    border: 1px solid #e2e8f0;
+    padding: 8px 12px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 13px;
+    font-weight: 600;
+    transition: all 0.15s ease;
+}
+.btn-secondary:hover { background: #e2e8f0; }
+
+/* Mobile adjustments */
+@media (max-width: 640px) {
+    .upload-card { padding: 16px; }
+}

views/index.html

@@ -9,6 +9,7 @@
     <!-- Tabs navigation -->
     <nav class="tab-nav" role="tablist" aria-label="Primary">
         <button class="tab-btn active" role="tab" aria-selected="true" aria-controls="tab-guide" id="tab-guide-btn" data-tab="guide">Guide</button>
+        <button class="tab-btn" role="tab" aria-selected="false" aria-controls="tab-upload" id="tab-upload-btn" data-tab="upload">Upload</button>
         <button class="tab-btn" role="tab" aria-selected="false" aria-controls="tab-changelog" id="tab-changelog-btn" data-tab="changelog">Changelog</button>
         <button class="tab-btn" role="tab" aria-selected="false" aria-controls="tab-about" id="tab-about-btn" data-tab="about">About</button>
     </nav>
@@ -22,6 +23,12 @@
             </div>
         </section>
 
+        <section id="tab-upload" class="tab-panel" role="tabpanel" aria-labelledby="tab-upload-btn" hidden>
+            <div class="content-container">
+                {{template "web-upload" .}}
+            </div>
+        </section>
+
         <section id="tab-changelog" class="tab-panel" role="tabpanel" aria-labelledby="tab-changelog-btn" hidden>
             <div class="content-container">
                 {{template "changelog" .}}

views/layout.html

@@ -92,7 +92,7 @@
 
             // Read initial state from hash
             const hash = window.location.hash.replace('#', '');
-            if (hash === 'changelog' || hash === 'about' || hash === 'guide') {
+            if (hash === 'changelog' || hash === 'about' || hash === 'guide' || hash === 'upload') {
                 activate(hash);
             } else {
                 activate('guide');

views/partials/web-upload.html

@@ -0,0 +1,117 @@
+{{define "web-upload"}}
+<h2>📤 Web Upload</h2>
+<p>Upload a file directly from your browser. Files are temporary and automatically deleted after 24 hours.</p>
+
+<div class="upload-card">
+  <form id="web-upload-form" class="upload-form" aria-label="Web upload form">
+    <div class="form-row">
+      <input type="file" id="file-input" name="file" required aria-label="Choose a file to upload">
+    </div>
+    <div class="form-row">
+      <button type="submit" id="upload-btn" class="btn-primary">Upload</button>
+    </div>
+  </form>
+
+  <div id="upload-status" class="upload-status" role="status" aria-live="polite" hidden></div>
+
+  <div id="upload-result" class="upload-result" hidden>
+    <p><strong>File uploaded successfully!</strong></p>
+    <p>
+      <span>Download URL:</span>
+      <a id="download-link" href="#" target="_blank" rel="noopener noreferrer">open</a>
+    </p>
+    <div class="actions">
+      <button id="copy-link-btn" class="btn-secondary" type="button">Copy link</button>
+    </div>
+  </div>
+</div>
+
+<script>
+(function(){
+  const form = document.getElementById('web-upload-form');
+  const fileInput = document.getElementById('file-input');
+  const statusEl = document.getElementById('upload-status');
+  const resultEl = document.getElementById('upload-result');
+  const linkEl = document.getElementById('download-link');
+  const copyBtn = document.getElementById('copy-link-btn');
+  const uploadBtn = document.getElementById('upload-btn');
+
+  function showStatus(msg, type) {
+    statusEl.textContent = msg;
+    statusEl.hidden = false;
+    statusEl.className = 'upload-status ' + (type || '');
+  }
+  function clearStatus(){
+    statusEl.hidden = true;
+    statusEl.textContent = '';
+  }
+  function setLoading(isLoading){
+    uploadBtn.disabled = isLoading;
+    uploadBtn.textContent = isLoading ? 'Uploading…' : 'Upload';
+  }
+
+  form.addEventListener('submit', async function(e){
+    e.preventDefault();
+    clearStatus();
+    resultEl.hidden = true;
+
+    const file = fileInput.files && fileInput.files[0];
+    if(!file){
+      showStatus('Please choose a file first.', 'error');
+      return;
+    }
+
+    const data = new FormData();
+    data.append('file', file);
+
+    setLoading(true);
+    try {
+      const resp = await fetch('/upload', { method: 'POST', body: data });
+      const contentType = resp.headers.get('content-type') || '';
+      if(!resp.ok){
+        let message = 'Upload failed';
+        if (contentType.includes('application/json')) {
+          const errJson = await resp.json().catch(()=>({}));
+          if (errJson && errJson.error) message = errJson.error;
+        } else {
+          message = await resp.text();
+        }
+        showStatus(message || 'Upload failed', 'error');
+        return;
+      }
+
+      const json = contentType.includes('application/json') ? await resp.json() : null;
+      const url = json && json.url ? json.url : null;
+      if(!url){
+        showStatus('Upload succeeded but no URL was returned by the server.', 'error');
+        return;
+      }
+
+      linkEl.href = url;
+      linkEl.textContent = url;
+      resultEl.hidden = false;
+      showStatus('Done.', 'success');
+    } catch (err) {
+      showStatus('Network error. Please try again.', 'error');
+    } finally {
+      setLoading(false);
+    }
+  });
+
+  copyBtn.addEventListener('click', function(){
+    const url = linkEl.href;
+    if(!url) return;
+    navigator.clipboard.writeText(url).then(()=>{
+      const original = copyBtn.textContent;
+      copyBtn.textContent = 'Copied!';
+      copyBtn.classList.add('copied');
+      setTimeout(()=>{ copyBtn.textContent = original; copyBtn.classList.remove('copied'); }, 1500);
+    }).catch(()=>{
+      const original = copyBtn.textContent;
+      copyBtn.textContent = 'Failed';
+      setTimeout(()=>{ copyBtn.textContent = original; }, 1500);
+    });
+  });
+})();
+</script>
+{{end}}