From cef31b9248da3721d8c053e98c936fb618af32df Mon Sep 17 00:00:00 2001
From: Fendy <xingfen.fendy@outlook.com>
Date: Thu, 27 Aug 2026 00:04:03 +0800
Subject: [PATCH] feat(web): redesign frontend UI with modern card layout,
 drag-drop upload, toast notifications, and responsive design

---
 web/app.js     |  49 +++++--
 web/index.html | 122 +++++++++++++----
 web/login.html |  26 ++--
 web/style.css  | 348 +++++++++++++++++++++++++++++++++++++++++++++++--
 4 files changed, 498 insertions(+), 47 deletions(-)

diff --git a/web/app.js b/web/app.js
index a56daca..552cb3c 100644
--- a/web/app.js
+++ b/web/app.js
@@ -2,6 +2,8 @@ function app() {
     return {
         inboxFiles: [],
         outboxFiles: [],
+        dragover: false,
+        toast: { show: false, message: '' },
         async loadFiles() {
             const [inbox, outbox] = await Promise.all([
                 fetch('/api/files?dir=inbox').then(r => r.json()),
@@ -10,28 +12,57 @@ function app() {
             this.inboxFiles = inbox.files || [];
             this.outboxFiles = outbox.files || [];
         },
+        showToast(msg) {
+            this.toast.message = msg;
+            this.toast.show = true;
+            setTimeout(() => { this.toast.show = false; }, 2500);
+        },
         async upload(event, dir) {
-            const file = event.target.files[0];
-            const form = new FormData();
-            form.append('file', file);
-            form.append('dir', dir);
-            await fetch('/api/upload', {method: 'POST', body: form});
+            const files = event.target.files;
+            if (!files || !files.length) return;
+            for (const file of files) {
+                const form = new FormData();
+                form.append('file', file);
+                form.append('dir', dir);
+                await fetch('/api/upload', { method: 'POST', body: form });
+            }
+            event.target.value = '';
+            this.showToast('File uploaded');
+            this.loadFiles();
+        },
+        async uploadDropped(event, dir) {
+            const files = event.dataTransfer.files;
+            if (!files || !files.length) return;
+            for (const file of files) {
+                const form = new FormData();
+                form.append('file', file);
+                form.append('dir', dir);
+                await fetch('/api/upload', { method: 'POST', body: form });
+            }
+            this.showToast('File uploaded');
             this.loadFiles();
         },
         download(id) {
             window.location.href = '/api/files/' + id + '/download';
         },
         async deleteFile(id) {
-            await fetch('/api/files/' + id, {method: 'DELETE'});
+            if (!confirm('Delete this file?')) return;
+            await fetch('/api/files/' + id, { method: 'DELETE' });
+            this.showToast('File deleted');
             this.loadFiles();
         },
         async share(id) {
-            const res = await fetch('/api/files/' + id + '/share', {method: 'POST'});
+            const res = await fetch('/api/files/' + id + '/share', { method: 'POST' });
             const data = await res.json();
-            alert('Share URL: ' + data.url);
+            try {
+                await navigator.clipboard.writeText(data.url);
+                this.showToast('Share link copied to clipboard');
+            } catch (_) {
+                alert('Share URL: ' + data.url);
+            }
         },
         async logout() {
-            await fetch('/api/logout', {method: 'POST'});
+            await fetch('/api/logout', { method: 'POST' });
             window.location.href = '/login';
         }
     };
diff --git a/web/index.html b/web/index.html
index fd3d1a3..4c717b7 100644
--- a/web/index.html
+++ b/web/index.html
@@ -2,40 +2,118 @@
 <html>
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>yDropbox</title>
     <link rel="stylesheet" href="/style.css">
     <script defer src="/alpine.min.js"></script>
 </head>
 <body>
-    <div x-data="app()" x-init="loadFiles()">
+    <div class="app" x-data="app()" x-init="loadFiles()">
         <header>
-            <h1>yDropbox</h1>
-            <button @click="logout()">Logout</button>
+            <h1>y<span>Dropbox</span></h1>
+            <button class="btn btn-logout" @click="logout()">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
+                Logout
+            </button>
         </header>
 
-        <section>
-            <h2>Inbox</h2>
-            <input type="file" @change="upload($event, 'inbox')">
-            <template x-for="file in inboxFiles" :key="file.id">
-                <div class="file-row">
-                    <span x-text="file.original_name"></span>
-                    <button @click="download(file.id)">Download</button>
-                    <button @click="deleteFile(file.id)">Delete</button>
-                    <button @click="share(file.id)">Share</button>
+        <section class="section">
+            <div class="section-header">
+                <h2>
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12"/><path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>
+                    Inbox
+                    <span class="badge" x-text="inboxFiles.length"></span>
+                </h2>
+            </div>
+            <div class="section-body">
+                <div class="drop-zone" :class="{ 'dragover': dragover }"
+                     @dragover.prevent="dragover = true"
+                     @dragleave.prevent="dragover = false"
+                     @drop.prevent="dragover = false; uploadDropped($event, 'inbox')">
+                    <input type="file" @change="upload($event, 'inbox')" multiple>
+                    <div class="drop-zone-icon">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
+                    </div>
+                    <div class="drop-zone-text"><strong>Click to upload</strong> or drag and drop</div>
                 </div>
-            </template>
+
+                <template x-if="inboxFiles.length === 0">
+                    <div class="empty-state">
+                        <div class="empty-state-icon">
+                            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 12h-4l-3 3L9 9l-3 3H2"/></svg>
+                        </div>
+                        <div class="empty-state-text">No files in inbox</div>
+                    </div>
+                </template>
+
+                <ul class="file-list">
+                    <template x-for="file in inboxFiles" :key="file.id">
+                        <li class="file-row">
+                            <div class="file-icon">
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+                            </div>
+                            <div class="file-info">
+                                <div class="file-name" x-text="file.name"></div>
+                            </div>
+                            <div class="file-actions">
+                                <button class="btn btn-sm btn-ghost" @click="download(file.id)" title="Download">
+                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+                                </button>
+                                <button class="btn btn-sm btn-ghost" @click="share(file.id)" title="Share">
+                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
+                                </button>
+                                <button class="btn btn-sm btn-ghost btn-danger" @click="deleteFile(file.id)" title="Delete">
+                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+                                </button>
+                            </div>
+                        </li>
+                    </template>
+                </ul>
+            </div>
         </section>
 
-        <section>
-            <h2>Outbox</h2>
-            <template x-for="file in outboxFiles" :key="file.id">
-                <div class="file-row">
-                    <span x-text="file.original_name"></span>
-                    <button @click="download(file.id)">Download</button>
-                    <button @click="deleteFile(file.id)">Delete</button>
-                </div>
-            </template>
+        <section class="section">
+            <div class="section-header">
+                <h2>
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
+                    Outbox
+                    <span class="badge" x-text="outboxFiles.length"></span>
+                </h2>
+            </div>
+            <div class="section-body">
+                <template x-if="outboxFiles.length === 0">
+                    <div class="empty-state">
+                        <div class="empty-state-icon">
+                            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><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>
+                        </div>
+                        <div class="empty-state-text">No files in outbox</div>
+                    </div>
+                </template>
+
+                <ul class="file-list">
+                    <template x-for="file in outboxFiles" :key="file.id">
+                        <li class="file-row">
+                            <div class="file-icon">
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+                            </div>
+                            <div class="file-info">
+                                <div class="file-name" x-text="file.name"></div>
+                            </div>
+                            <div class="file-actions">
+                                <button class="btn btn-sm btn-ghost" @click="download(file.id)" title="Download">
+                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+                                </button>
+                                <button class="btn btn-sm btn-ghost btn-danger" @click="deleteFile(file.id)" title="Delete">
+                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+                                </button>
+                            </div>
+                        </li>
+                    </template>
+                </ul>
+            </div>
         </section>
+
+        <div class="toast" :class="{ 'show': toast.show }" x-text="toast.message"></div>
     </div>
     <script src="/app.js"></script>
 </body>
diff --git a/web/login.html b/web/login.html
index 54b5d79..e03a82c 100644
--- a/web/login.html
+++ b/web/login.html
@@ -2,28 +2,38 @@
 <html>
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>yDropbox Login</title>
     <link rel="stylesheet" href="/style.css">
 </head>
 <body>
-    <div class="container">
-        <h1>yDropbox</h1>
-        <form id="loginForm">
-            <input type="password" id="token" placeholder="Access Token" required>
-            <button type="submit">Login</button>
-        </form>
+    <div class="login-wrap">
+        <div class="login-card">
+            <h1>y<span>Dropbox</span></h1>
+            <p>Enter your access token to continue</p>
+            <form id="loginForm">
+                <input type="password" id="token" placeholder="Access Token" required autocomplete="current-password">
+                <div class="login-error" id="loginError">Invalid token. Please try again.</div>
+                <button type="submit" class="btn btn-primary">Sign In</button>
+            </form>
+        </div>
     </div>
     <script>
         document.getElementById('loginForm').addEventListener('submit', async (e) => {
             e.preventDefault();
+            const errEl = document.getElementById('loginError');
+            errEl.classList.remove('show');
             const token = document.getElementById('token').value;
             const res = await fetch('/api/login', {
                 method: 'POST',
                 headers: {'Content-Type': 'application/json'},
                 body: JSON.stringify({token})
             });
-            if (res.ok) window.location.href = '/';
-            else alert('Invalid token');
+            if (res.ok) {
+                window.location.href = '/';
+            } else {
+                errEl.classList.add('show');
+            }
         });
     </script>
 </body>
diff --git a/web/style.css b/web/style.css
index 9052c67..3140df4 100644
--- a/web/style.css
+++ b/web/style.css
@@ -1,8 +1,340 @@
-body { font-family: sans-serif; max-width: 800px; margin: 40px auto; padding: 0 20px; }
-header { display: flex; justify-content: space-between; align-items: center; }
-section { margin: 20px 0; }
-.file-row { display: flex; gap: 10px; align-items: center; margin: 10px 0; }
-button { cursor: pointer; }
-.container { max-width: 400px; margin: 100px auto; }
-form { display: flex; flex-direction: column; gap: 10px; }
-input[type="password"] { padding: 8px; font-size: 16px; }
+*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
+
+:root {
+  --bg: #f5f6f8;
+  --surface: #fff;
+  --border: #e2e5ea;
+  --text: #1a1d23;
+  --text-secondary: #6b7280;
+  --primary: #2563eb;
+  --primary-hover: #1d4ed8;
+  --danger: #ef4444;
+  --danger-hover: #dc2626;
+  --success: #10b981;
+  --radius: 10px;
+  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
+  --shadow-lg: 0 4px 12px rgba(0,0,0,.08);
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.5;
+  min-height: 100vh;
+}
+
+.app {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 24px 20px 60px;
+}
+
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 32px;
+}
+
+header h1 {
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: -.3px;
+  color: var(--text);
+}
+
+header h1 span {
+  color: var(--primary);
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 14px;
+  font-size: 13px;
+  font-weight: 500;
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  background: var(--surface);
+  color: var(--text);
+  cursor: pointer;
+  transition: all .15s ease;
+  white-space: nowrap;
+}
+
+.btn:hover { background: #f0f1f3; }
+
+.btn-primary {
+  background: var(--primary);
+  color: #fff;
+  border-color: var(--primary);
+}
+
+.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
+
+.btn-danger {
+  color: var(--danger);
+  border-color: #fecaca;
+}
+
+.btn-danger:hover { background: #fef2f2; border-color: var(--danger); }
+
+.btn-ghost {
+  border-color: transparent;
+  background: transparent;
+}
+
+.btn-ghost:hover { background: #f0f1f3; }
+
+.btn-sm { padding: 5px 10px; font-size: 12px; }
+
+.btn-logout {
+  border-color: transparent;
+  color: var(--text-secondary);
+  font-size: 13px;
+}
+
+.btn-logout:hover { color: var(--text); background: #f0f1f3; }
+
+.section {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  margin-bottom: 20px;
+  overflow: hidden;
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border);
+}
+
+.section-header h2 {
+  font-size: 15px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.section-header .badge {
+  font-size: 11px;
+  font-weight: 600;
+  background: var(--bg);
+  color: var(--text-secondary);
+  padding: 2px 7px;
+  border-radius: 10px;
+}
+
+.section-body { padding: 0; }
+
+.drop-zone {
+  margin: 16px 20px;
+  padding: 28px 20px;
+  border: 2px dashed var(--border);
+  border-radius: 8px;
+  text-align: center;
+  cursor: pointer;
+  transition: all .2s ease;
+  position: relative;
+}
+
+.drop-zone:hover, .drop-zone.dragover {
+  border-color: var(--primary);
+  background: #eff6ff;
+}
+
+.drop-zone input[type="file"] {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.drop-zone-icon {
+  font-size: 24px;
+  margin-bottom: 6px;
+  color: var(--text-secondary);
+}
+
+.drop-zone-text {
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.drop-zone-text strong {
+  color: var(--primary);
+}
+
+.file-list { list-style: none; }
+
+.file-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 20px;
+  border-bottom: 1px solid #f3f4f6;
+  transition: background .1s ease;
+}
+
+.file-row:last-child { border-bottom: none; }
+.file-row:hover { background: #fafbfc; }
+
+.file-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  background: #eff6ff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  flex-shrink: 0;
+}
+
+.file-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.file-name {
+  font-size: 14px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.file-meta {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.file-actions {
+  display: flex;
+  gap: 4px;
+  flex-shrink: 0;
+  opacity: 0;
+  transition: opacity .15s ease;
+}
+
+.file-row:hover .file-actions { opacity: 1; }
+
+.empty-state {
+  padding: 40px 20px;
+  text-align: center;
+  color: var(--text-secondary);
+}
+
+.empty-state-icon {
+  font-size: 32px;
+  margin-bottom: 8px;
+  opacity: .5;
+}
+
+.empty-state-text {
+  font-size: 14px;
+}
+
+.login-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 20px;
+}
+
+.login-card {
+  width: 100%;
+  max-width: 360px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  box-shadow: var(--shadow-lg);
+  padding: 40px 32px;
+  text-align: center;
+}
+
+.login-card h1 {
+  font-size: 24px;
+  font-weight: 700;
+  margin-bottom: 4px;
+}
+
+.login-card h1 span { color: var(--primary); }
+
+.login-card p {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin-bottom: 28px;
+}
+
+.login-card form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.login-card input {
+  padding: 10px 14px;
+  font-size: 14px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  outline: none;
+  transition: border-color .15s ease;
+  width: 100%;
+}
+
+.login-card input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
+
+.login-card .btn-primary {
+  width: 100%;
+  padding: 10px;
+  font-size: 14px;
+  justify-content: center;
+}
+
+.login-error {
+  font-size: 13px;
+  color: var(--danger);
+  display: none;
+}
+
+.login-error.show { display: block; }
+
+.toast {
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%) translateY(80px);
+  background: var(--text);
+  color: #fff;
+  padding: 10px 20px;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  box-shadow: var(--shadow-lg);
+  opacity: 0;
+  transition: all .3s ease;
+  z-index: 1000;
+  pointer-events: none;
+}
+
+.toast.show {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+
+@media (max-width: 600px) {
+  .app { padding: 16px 12px 40px; }
+  .section-header { padding: 12px 16px; }
+  .file-row { padding: 10px 16px; }
+  .file-actions { opacity: 1; }
+  .drop-zone { margin: 12px 16px; }
+}