feat(web): redesign frontend UI with modern card layout, drag-drop upload, toast notifications, and responsive design

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>