From 42e35d0ac77d2e76149f23a8437afad72dfe19ca Mon Sep 17 00:00:00 2001
From: Junwei Zhao <wahyd4@gmail.com>
Date: Wed, 17 Jun 2026 10:10:45 +1000
Subject: [PATCH] =?UTF-8?q?fix(demo):=20=E9=A6=96=E9=A1=B5=E8=B7=AF?=
 =?UTF-8?q?=E7=94=B1=E4=BF=AE=E5=A4=8D=20+=20admin=20=E6=B5=85=E8=89=B2=20?=
 =?UTF-8?q?UI=20=E6=94=B9=E9=80=A0=20(#4)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Caddyfile: 添加 handle / 避免首页走 /site-content 重写导致 JSON 404
- service.py: / 路由区分登录态 — 已登录 302 → /admin，未登录显示 404 动画页
- admin-ui.html: 深色→浅色主题，圆角卡片、优化按钮样式、better scrollbar、hover 效果
- 同步源码 Caddyfile 与 ConfigMap

Co-authored-by: Junv (via Hermes) <junv@junnv.cc>
---
 home-apps/demo-service-caddy.yaml    |   5 +
 home-apps/demo-service/Caddyfile     |   5 +
 home-apps/demo-service/admin-ui.html | 185 ++++++++++++++++-----------
 home-apps/demo-service/service.py    |  11 +-
 4 files changed, 124 insertions(+), 82 deletions(-)

diff --git a/home-apps/demo-service-caddy.yaml b/home-apps/demo-service-caddy.yaml
index 1025c40..e38a80e 100644
--- a/home-apps/demo-service-caddy.yaml
+++ b/home-apps/demo-service-caddy.yaml
@@ -23,6 +23,11 @@ data:
             }
         }
     
+        # ── Root path: API handles auth (logged in → /admin, else → error page) ──
+        handle / {
+            reverse_proxy localhost:3000
+        }
+
         # Management API → Python service
         handle /api/* {
             reverse_proxy localhost:3000 {
diff --git a/home-apps/demo-service/Caddyfile b/home-apps/demo-service/Caddyfile
index d68cbed..3bacf75 100644
--- a/home-apps/demo-service/Caddyfile
+++ b/home-apps/demo-service/Caddyfile
@@ -16,6 +16,11 @@
         }
     }
 
+    # ── Root path: API handles auth (logged in → /admin, else → error page) ──
+    handle / {
+        reverse_proxy localhost:3000
+    }
+
     # Management API → Python service
     handle /api/* {
         reverse_proxy localhost:3000 {
diff --git a/home-apps/demo-service/admin-ui.html b/home-apps/demo-service/admin-ui.html
index 9410d32..2eae918 100644
--- a/home-apps/demo-service/admin-ui.html
+++ b/home-apps/demo-service/admin-ui.html
@@ -6,75 +6,101 @@
 <title>Demo Manager — junv.cc</title>
 <style>
 *{box-sizing:border-box;margin:0;padding:0}
-body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#0d1117;color:#c9d1d9;min-height:100vh}
-.header{background:#161b22;border-bottom:1px solid #30363d;padding:16px 24px;display:flex;justify-content:space-between;align-items:center}
-.header h1{font-size:20px;color:#f0f6fc}
-.header .user{font-size:13px;color:#8b949e}
-.container{max-width:1000px;margin:24px auto;padding:0 24px}
-.section{margin-bottom:32px}
-.section h2{font-size:18px;color:#f0f6fc;margin-bottom:12px}
-.btn{padding:8px 16px;border-radius:6px;border:1px solid #30363d;background:#21262d;color:#c9d1d9;cursor:pointer;font-size:13px;transition:all .15s}
-.btn:hover{background:#30363d}
-.btn-primary{background:#1f6feb;border-color:#1f6feb;color:#fff}
-.btn-primary:hover{background:#388bfd}
-.btn-success{background:#238636;border-color:#238636;color:#fff}
-.btn-success:hover{background:#2ea043}
-.btn-warning{background:#9e6a03;border-color:#9e6a03;color:#fff}
-.btn-warning:hover{background:#bb8009}
-.btn-danger{background:#da3633;border-color:#da3633;color:#fff}
-.btn-danger:hover{background:#f85149}
-.btn-sm{padding:4px 10px;font-size:12px}
-.site-card{background:#161b22;border:1px solid #30363d;border-radius:8px;padding:16px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
-.site-card .info{flex:1}
-.site-card .name{font-size:16px;font-weight:600;color:#58a6ff}
+body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Inter',sans-serif;background:#f4f6f9;color:#1a1a2e;min-height:100vh}
+.header{background:#fff;border-bottom:1px solid #e2e8f0;padding:14px 28px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:50;box-shadow:0 1px 3px rgba(0,0,0,.04)}
+.header h1{font-size:20px;font-weight:700;color:#0f172a;letter-spacing:-.3px}
+.header .user{font-size:13px;color:#64748b;background:#f1f5f9;padding:4px 12px;border-radius:20px}
+.container{max-width:1040px;margin:28px auto;padding:0 28px}
+.section{margin-bottom:36px}
+.section h2{font-size:17px;font-weight:600;color:#0f172a;margin-bottom:14px;letter-spacing:-.2px}
+/* Buttons */
+.btn{display:inline-flex;align-items:center;gap:4px;padding:8px 18px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;color:#334155;cursor:pointer;font-size:13px;font-weight:500;transition:all .15s}
+.btn:hover{background:#f8fafc;border-color:#cbd5e1;box-shadow:0 1px 3px rgba(0,0,0,.06)}
+.btn-primary{background:#2563eb;border-color:#2563eb;color:#fff}
+.btn-primary:hover{background:#1d4ed8;border-color:#1d4ed8}
+.btn-success{background:#16a34a;border-color:#16a34a;color:#fff}
+.btn-success:hover{background:#15803d;border-color:#15803d}
+.btn-warning{background:#d97706;border-color:#d97706;color:#fff}
+.btn-warning:hover{background:#b45309;border-color:#b45309}
+.btn-danger{background:#dc2626;border-color:#dc2626;color:#fff}
+.btn-danger:hover{background:#b91c1c;border-color:#b91c1c}
+.btn-sm{padding:5px 12px;font-size:12px;border-radius:6px}
+/* Site cards */
+.site-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:18px 20px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;transition:box-shadow .15s}
+.site-card:hover{box-shadow:0 2px 8px rgba(0,0,0,.06)}
+.site-card .info{flex:1;min-width:0}
+.site-card .name{font-size:15px;font-weight:600;color:#2563eb}
 .site-card .name a{color:inherit;text-decoration:none}
 .site-card .name a:hover{text-decoration:underline}
-.site-card .desc{font-size:13px;color:#8b949e;margin-top:4px}
-.site-card .meta{font-size:11px;color:#6e7681;margin-top:4px}
-.site-card .actions{display:flex;gap:6px}
-.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600}
-.badge-on{background:#1b3a1b;color:#3fb950}
-.badge-off{background:#3a1b1b;color:#f85149}
-.badge-draft{background:#3a2e1b;color:#d29922}
-.badge-published{background:#1b3a1b;color:#3fb950}
-.form-group{margin-bottom:12px}
-.form-group label{display:block;font-size:13px;color:#8b949e;margin-bottom:4px}
-.form-group input{width:100%;padding:8px 12px;border-radius:6px;border:1px solid #30363d;background:#0d1117;color:#c9d1d9;font-size:14px}
-.form-group input:focus{outline:none;border-color:#1f6feb}
-.form-row{display:flex;gap:12px;align-items:end}
+.site-card .desc{font-size:13px;color:#64748b;margin-top:3px}
+.site-card .meta{font-size:11px;color:#94a3b8;margin-top:3px}
+.site-card .actions{display:flex;gap:5px;flex-shrink:0;margin-left:16px}
+.badge{display:inline-block;padding:2px 10px;border-radius:10px;font-size:11px;font-weight:600;letter-spacing:.02em}
+.badge-on{background:#dcfce7;color:#166534}
+.badge-off{background:#fef2f2;color:#991b1b}
+.badge-draft{background:#fef9c3;color:#854d0e}
+.badge-published{background:#dcfce7;color:#166534}
+/* Forms */
+.form-group{margin-bottom:10px}
+.form-group label{display:block;font-size:12px;font-weight:600;color:#475569;margin-bottom:4px;text-transform:uppercase;letter-spacing:.04em}
+.form-group input[type="text"]{width:100%;padding:10px 14px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;color:#0f172a;font-size:14px;transition:border-color .15s,box-shadow .15s}
+.form-group input[type="text"]:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
+.form-row{display:flex;gap:14px;align-items:end;flex-wrap:wrap}
+/* File list */
 .file-list{list-style:none}
-.file-list li{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #21262d;font-size:13px}
+.file-list li{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #f1f5f9;font-size:13px}
 .file-list li:last-child{border-bottom:none}
-.upload-zone{border:2px dashed #30363d;border-radius:8px;padding:24px;text-align:center;cursor:pointer;transition:all .15s}
-.upload-zone:hover{border-color:#58a6ff;background:#161b22}
-.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:100}
-.modal{background:#161b22;border:1px solid #30363d;border-radius:12px;padding:24px;max-width:560px;width:90%}
-.modal h3{color:#f0f6fc;margin-bottom:16px}
-.toast{position:fixed;bottom:24px;right:24px;padding:12px 20px;border-radius:8px;font-size:14px;z-index:200;animation:slideIn .3s}
-.toast-success{background:#1b3a1b;border:1px solid #3fb950;color:#3fb950}
-.toast-error{background:#3a1b1b;border:1px solid #f85149;color:#f85149}
-@keyframes slideIn{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
-.spinner{display:inline-block;width:16px;height:16px;border:2px solid #30363d;border-top-color:#58a6ff;border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle;margin-right:6px}
+.file-list li a{color:#2563eb;text-decoration:none;font-weight:500}
+.file-list li a:hover{text-decoration:underline}
+/* Upload zone */
+.upload-zone{border:2px dashed #d1d5db;border-radius:10px;padding:28px 20px;text-align:center;cursor:pointer;transition:all .15s;background:#fafafa}
+.upload-zone:hover{border-color:#2563eb;background:#eff6ff;color:#2563eb}
+/* Modal */
+.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);display:none;align-items:center;justify-content:center;z-index:100;backdrop-filter:blur(2px)}
+.modal{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:28px;max-width:580px;width:92%;box-shadow:0 20px 60px rgba(0,0,0,.12)}
+.modal h3{color:#0f172a;margin-bottom:18px;font-size:17px;font-weight:600}
+/* Toast */
+.toast{position:fixed;bottom:28px;right:28px;padding:14px 22px;border-radius:10px;font-size:14px;font-weight:500;z-index:200;animation:slideIn .3s ease;box-shadow:0 4px 16px rgba(0,0,0,.12)}
+.toast-success{background:#166534;color:#fff}
+.toast-error{background:#991b1b;color:#fff}
+@keyframes slideIn{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}
+/* Spinner */
+.spinner{display:inline-block;width:16px;height:16px;border:2.5px solid #e2e8f0;border-top-color:#2563eb;border-radius:50%;animation:spin .6s linear infinite;vertical-align:middle;margin-right:6px}
 @keyframes spin{to{transform:rotate(360deg)}}
-.help-text{font-size:12px;color:#6e7681;margin-top:4px}
+.help-text{font-size:12px;color:#94a3b8;margin-top:4px}
+/* Empty state */
+.empty-state{padding:48px 24px;text-align:center;color:#94a3b8}
+.empty-state p{font-size:14px}
+/* Checkbox inline */
+.checkbox-row{display:flex;align-items:center;gap:6px}
+.checkbox-row input[type="checkbox"]{width:auto;accent-color:#2563eb}
+.checkbox-row label{margin:0;font-size:13px;font-weight:400;text-transform:none;letter-spacing:0;color:#475569}
+/* Modal close button */
+.modal-close-btn{text-align:right;margin-bottom:8px}
+/* Scrollable file area */
+.file-scroll{max-height:320px;overflow-y:auto}
+.file-scroll::-webkit-scrollbar{width:6px}
+.file-scroll::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}
+.file-scroll::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}
+.file-scroll::-webkit-scrollbar-thumb:hover{background:#94a3b8}
 </style>
 </head>
 <body>
-<div class="header"><h1>🧪 Demo Manager</h1><div class="user" id="user-info">Loading...</div></div>
+<div class="header"><h1>🧪 Demo Manager</h1><span class="user" id="user-info">Loading...</span></div>
 <div class="container">
   <div class="section">
-    <h2>➕ New Demo Site <span style="font-size:12px;font-weight:400;color:#6e7681">— drafts are hidden until published</span></h2>
+    <h2>➕ New Demo Site</h2>
     <form id="create-form" class="form-row">
-      <div class="form-group" style="flex:2"><label>Site Name</label><input type="text" id="site-name" placeholder="my-cool-demo" pattern="[a-z0-9-]+" required></div>
-      <div class="form-group" style="flex:3"><label>Description (optional)</label><input type="text" id="site-desc" placeholder="A quick demo of..."></div>
-      <div class="form-group" style="display:flex;align-items:center;gap:6px"><input type="checkbox" id="site-publish" style="width:auto"><label for="site-publish" style="margin:0;font-size:13px">Publish now</label></div>
-      <button type="submit" class="btn btn-primary" style="height:38px">Create</button>
+      <div class="form-group" style="flex:2;min-width:180px"><label>Site Name</label><input type="text" id="site-name" placeholder="my-cool-demo" pattern="[a-z0-9-]+" required></div>
+      <div class="form-group" style="flex:3;min-width:220px"><label>Description</label><input type="text" id="site-desc" placeholder="A quick demo of..."></div>
+      <div class="checkbox-row" style="padding-bottom:10px"><input type="checkbox" id="site-publish"><label for="site-publish">Publish now</label></div>
+      <button type="submit" class="btn btn-primary" style="height:40px;margin-bottom:10px">Create</button>
     </form>
   </div>
-  <div class="section"><h2>📂 Sites</h2><div id="sites-list">Loading...</div></div>
+  <div class="section"><h2>📂 Sites</h2><div id="sites-list"><div class="empty-state"><span class="spinner"></span><p style="margin-top:12px">Loading sites...</p></div></div></div>
 </div>
 <div id="file-modal" class="modal-overlay"><div class="modal" id="file-modal-content"></div></div>
-<div id="preview-modal" class="modal-overlay"><div class="modal" id="preview-modal-content" style="max-width:90%;max-height:90vh;overflow:auto"></div></div>
+<div id="preview-modal" class="modal-overlay"><div class="modal" id="preview-modal-content" style="max-width:92%;max-height:92vh;overflow:auto"></div></div>
 <div id="toast-container"></div>
 <script>
 let currentUser='';
@@ -97,7 +123,7 @@ async function uploadFile(siteName,file,subPath){
 
 function toast(msg,type){
   const el=document.createElement('div');el.className='toast toast-'+type;el.textContent=msg;
-  document.getElementById('toast-container').appendChild(el);setTimeout(()=>el.remove(),3000);
+  document.getElementById('toast-container').appendChild(el);setTimeout(()=>el.remove(),3500);
 }
 
 function formatSize(b){if(b<1024)return b+' B';if(b<1048576)return(b/1024).toFixed(1)+' KB';return(b/1048576).toFixed(1)+' MB';}
@@ -107,15 +133,15 @@ async function loadSites(){
   const container=document.getElementById('sites-list');
   try{
     const data=await api('GET',API);currentUser=data.user;
-    document.getElementById('user-info').textContent='👤 '+currentUser+' (Pocket ID)';
-    if(!data.sites.length){container.innerHTML='<p style="color:#8b949e;text-align:center;padding:32px">No sites yet. Create one above!</p>';return;}
+    document.getElementById('user-info').textContent='👤 '+currentUser;
+    if(!data.sites.length){container.innerHTML='<div class="empty-state"><p style="font-size:32px;margin-bottom:12px">📭</p><p>No sites yet. Create one above!</p></div>';return;}
     container.innerHTML=data.sites.map(s=>{
       const isPublic=s.public;
       const isEnabled=s.enabled!==false;
       let statusBadge='';
-      if(!isEnabled)statusBadge='<span class="badge badge-off">DISABLED</span>';
-      else if(s.published)statusBadge='<span class="badge badge-published">🔓 PUBLISHED</span>';
-      else statusBadge='<span class="badge badge-draft">🔒 DRAFT</span>';
+      if(!isEnabled)statusBadge='<span class="badge badge-off">⏸ Disabled</span>';
+      else if(s.published)statusBadge='<span class="badge badge-published">🔓 Published</span>';
+      else statusBadge='<span class="badge badge-draft">🔒 Draft</span>';
 
       let actionBtns='';
       if(!isEnabled){
@@ -132,16 +158,17 @@ async function loadSites(){
       if(!isPublic){actionBtns+='<button class="btn btn-sm" onclick="previewSite(\''+s.name+'\')">👁 Preview</button>';}
       actionBtns+='<button class="btn btn-sm btn-danger" onclick="deleteSite(\''+s.name+'\')">🗑</button>';
 
+      const nameHtml = isEnabled
+        ? '<a href="https://demo.junv.cc/'+s.name+'" target="_blank">'+s.name+'</a>'
+        : s.name;
+
       return '<div class="site-card"><div class="info"><div class="name">'+
-        (isEnabled
-          ? '<a href="https://demo.junv.cc/'+s.name+'" target="_blank">'+s.name+'</a>'
-          : '<a href="#" onclick="previewSite(\''+s.name+'\');return false" style="color:#58a6ff;text-decoration:none;border-bottom:1px dashed #58a6ff" title="Disabled — click to preview">'+s.name+'</a>')+
-        ' '+statusBadge+
+        nameHtml+' '+statusBadge+
         '</div>'+(s.description?'<div class="desc">'+s.description+'</div>':'')+
         '<div class="meta">'+s.file_count+' files · created '+formatDate(s.created_at)+'</div></div>'+
         '<div class="actions">'+actionBtns+'</div></div>';
     }).join('');
-  }catch(e){container.innerHTML='<p style="color:#f85149">'+e.message+'</p>';}
+  }catch(e){container.innerHTML='<div class="empty-state"><p style="color:#dc2626">⚠️ '+e.message+'</p></div>';}
 }
 
 async function createSite(e){
@@ -183,14 +210,14 @@ async function previewSite(name){
   const modal=document.getElementById('preview-modal');
   const content=document.getElementById('preview-modal-content');
   modal.style.display='flex';
-  content.innerHTML='<h3>👁 Preview: '+name+' <span style="font-size:12px;color:#d29922">(Draft — requires auth)</span></h3><div style="text-align:center;padding:24px"><span class="spinner"></span>Loading preview...</div>';
+  content.innerHTML='<div class="modal-close-btn"><button class="btn btn-sm" onclick="document.getElementById(\'preview-modal\').style.display=\'none\'">✕ Close</button></div><h3>👁 Preview: '+name+'</h3><div style="text-align:center;padding:24px"><span class="spinner"></span>Loading preview...</div>';
   try{
     const res=await fetch(API+'/'+name+'/preview');
     if(!res.ok)throw new Error((await res.json().catch(()=>({detail:'Failed'}))).detail||'Failed');
     const html=await res.text();
-    content.innerHTML='<h3>👁 Preview: '+name+' <span style="font-size:12px;color:#d29922">(Draft)</span></h3><div style="text-align:right;margin-bottom:8px"><button class="btn btn-sm" onclick="document.getElementById(\'preview-modal\').style.display=\'none\'">Close</button></div><iframe srcdoc="'+html.replace(/"/g,'&quot;')+'" style="width:100%;height:70vh;border:1px solid #30363d;border-radius:8px;background:#fff"></iframe>';
+    content.innerHTML='<div class="modal-close-btn"><button class="btn btn-sm" onclick="document.getElementById(\'preview-modal\').style.display=\'none\'">✕ Close</button></div><h3>👁 Preview: '+name+' <span style="font-size:12px;font-weight:400;color:#d97706">(Draft)</span></h3><iframe srcdoc="'+html.replace(/"/g,'&quot;')+'" style="width:100%;height:70vh;border:1px solid #e2e8f0;border-radius:8px;background:#fff"></iframe>';
   }catch(e){
-    content.innerHTML='<h3>Preview Error</h3><p style="color:#f85149">'+e.message+'</p><button class="btn btn-sm" onclick="document.getElementById(\'preview-modal\').style.display=\'none\'">Close</button>';
+    content.innerHTML='<div class="modal-close-btn"><button class="btn btn-sm" onclick="document.getElementById(\'preview-modal\').style.display=\'none\'">✕ Close</button></div><h3>Preview Error</h3><p style="color:#dc2626;margin:12px 0">'+e.message+'</p>';
   }
 }
 
@@ -198,23 +225,23 @@ async function manageSite(name){
   const modal=document.getElementById('file-modal');
   const content=document.getElementById('file-modal-content');
   modal.style.display='flex';
-  content.innerHTML='<h3>📁 '+name+'</h3><div style="margin-bottom:16px"><div class="upload-zone" id="upload-zone-'+name+'"><div id="upload-label-'+name+'">📤 Drop files or click to upload</div><input type="file" id="file-input-'+name+'" style="display:none" multiple><div id="upload-progress-'+name+'" style="display:none;margin-top:8px"></div></div></div><div style="margin:16px 0"><strong style="font-size:13px;color:#8b949e">Files:</strong></div><div id="files-list-'+name+'" style="max-height:300px;overflow-y:auto">Loading...</div><div style="margin-top:16px;text-align:right"><button class="btn btn-sm" onclick="document.getElementById(\'file-modal\').style.display=\'none\'">Close</button></div>';
+  content.innerHTML='<h3>📁 '+name+'</h3><div style="margin-bottom:16px"><div class="upload-zone" id="upload-zone-'+name+'"><div id="upload-label-'+name+'">📤 Drop files here or click to upload</div><input type="file" id="file-input-'+name+'" style="display:none" multiple><div id="upload-progress-'+name+'" style="display:none;margin-top:10px"></div></div></div><strong style="font-size:13px;color:#475569;display:block;margin-bottom:8px">Files:</strong><div class="file-scroll" id="files-list-'+name+'"><div style="padding:16px;text-align:center"><span class="spinner"></span></div></div><div style="margin-top:16px;text-align:right"><button class="btn btn-sm" onclick="document.getElementById(\'file-modal\').style.display=\'none\'">✕ Close</button></div>';
 
   try{
     const data=await api('GET',API+'/'+name);
     const fd=document.getElementById('files-list-'+name);
-    if(!data.files.length){fd.innerHTML='<p style="color:#8b949e">No files. Upload one above.</p>';}
+    if(!data.files.length){fd.innerHTML='<p style="color:#94a3b8;text-align:center;padding:16px">No files. Upload one above.</p>';}
     else{
-      fd.innerHTML='<ul class="file-list">'+data.files.map(f=>'<li><span><a href="'+API+'/'+name+'/preview?file='+encodeURIComponent(f.path)+'" target="_blank" style="color:#58a6ff">'+f.path+'</a></span><span style="color:#8b949e">'+formatSize(f.size)+' <button class="btn btn-sm btn-danger" style="margin-left:8px" onclick="deleteFile(\''+name+'\',\''+f.path+'\')">×</button></span></li>').join('')+'</ul>';
+      fd.innerHTML='<ul class="file-list">'+data.files.map(f=>'<li><span><a href="'+API+'/'+name+'/preview?file='+encodeURIComponent(f.path)+'" target="_blank">'+f.path+'</a></span><span style="color:#94a3b8">'+formatSize(f.size)+' <button class="btn btn-sm btn-danger" style="margin-left:8px" onclick="deleteFile(\''+name+'\',\''+f.path+'\')">×</button></span></li>').join('')+'</ul>';
     }
-  }catch(e){document.getElementById('files-list-'+name).innerHTML='<p style="color:#f85149">'+e.message+'</p>';}
+  }catch(e){document.getElementById('files-list-'+name).innerHTML='<p style="color:#dc2626;text-align:center;padding:16px">'+e.message+'</p>';}
 
   const zone=document.getElementById('upload-zone-'+name);
   const input=document.getElementById('file-input-'+name);
   zone.onclick=()=>input.click();
-  zone.ondragover=(e)=>{e.preventDefault();zone.style.borderColor='#58a6ff';};
-  zone.ondragleave=()=>{zone.style.borderColor='';};
-  zone.ondrop=async(e)=>{e.preventDefault();zone.style.borderColor='';await handleUpload(name,e.dataTransfer.files);};
+  zone.ondragover=(e)=>{e.preventDefault();zone.style.borderColor='#2563eb';zone.style.background='#eff6ff';};
+  zone.ondragleave=()=>{zone.style.borderColor='';zone.style.background='';};
+  zone.ondrop=async(e)=>{e.preventDefault();zone.style.borderColor='';zone.style.background='';await handleUpload(name,e.dataTransfer.files);};
   input.onchange=async()=>{await handleUpload(name,input.files);input.value='';};
 }
 
@@ -222,13 +249,15 @@ async function handleUpload(siteName,files){
   const pd=document.getElementById('upload-progress-'+siteName);
   const label=document.getElementById('upload-label-'+siteName);
   pd.style.display='block';
+  let successCount=0, failCount=0;
   for(const file of files){
     pd.innerHTML='<span class="spinner"></span> Uploading '+file.name+'...';
-    try{await uploadFile(siteName,file,'');pd.innerHTML+=' ✅ '+file.name+'<br>';}
-    catch(e){pd.innerHTML+=' ❌ '+file.name+': '+e.message+'<br>';}
+    try{await uploadFile(siteName,file,'');successCount++;pd.innerHTML+=' ✅ '+file.name+'<br>';}
+    catch(e){failCount++;pd.innerHTML+=' ❌ '+file.name+': '+e.message+'<br>';}
   }
   label.textContent='📤 Drop more files or click to upload';
-  toast('Upload complete!','success');
+  if(failCount===0)toast(successCount+' file(s) uploaded','success');
+  else toast(successCount+' uploaded, '+failCount+' failed','error');
   manageSite(siteName);
 }
 
diff --git a/home-apps/demo-service/service.py b/home-apps/demo-service/service.py
index 2db544f..7a09f43 100644
--- a/home-apps/demo-service/service.py
+++ b/home-apps/demo-service/service.py
@@ -352,7 +352,10 @@ def admin_ui(request: Request, path: str = ""):
 
 @app.get("/")
 def index(request: Request):
-    return HTMLResponse("""<!DOCTYPE html>
-<html><head><meta http-equiv="refresh" content="0;url=/admin"></head>
-<body><p>Redirecting to <a href="/admin">Admin</a>...</p></body>
-</html>""")
+    user = check_auth(request)
+    if user:
+        return RedirectResponse(url="/admin", status_code=302)
+    resp = HTMLResponse(AUTH_REQUIRED_HTML, status_code=404)
+    resp.headers["Content-Disposition"] = "inline"
+    resp.headers["Cache-Control"] = "no-store"
+    return resp