banber

Running

App Files Files Community

486CHD commited on 10 days ago

Commit

a9e04af

verified ·

1 Parent(s): eef8af8

Upload 13 files

Browse files

Files changed (3) hide show

index.html +96 -71
stats.html +175 -92
style.css +51 -34

index.html CHANGED Viewed

@@ -22,14 +22,14 @@
         }
         header {
-            margin-top: 115px; /* 为输入区留空间 */
         }
         .history-container {
             padding-bottom: 20px !important;
         }
-        /* 调整输入区内部布局 */
         .control-bar {
             max-width: 1400px;
             margin: 0 auto;
@@ -46,37 +46,64 @@
             padding: 12px 20px;
         }
-        /* 动态调整header间距 */
         .has-preview header {
-            margin-top: 260px;
         }
         @media (max-width: 768px) {
             header {
-                margin-top: 170px;
             }
             .has-preview header {
-                margin-top: 320px;
             }
         }
     </style>
 </head>
 <body>
-    <!-- 在预览栏显示时添加 has-preview 类 -->
-    <script>
-        // 监听预览栏变化
-        const observePreviewBar = () => {
-            const previewBar = document.getElementById('preview-bar');
-            const observer = new MutationObserver(() => {
-                if (previewBar.classList.contains('visible')) {
-                    document.body.classList.add('has-preview');
-                } else {
-                    document.body.classList.remove('has-preview');
-                }
-            });
-            observer.observe(previewBar, { attributes: true, attributeFilter: ['class'] });
-        };
-        document.addEventListener('DOMContentLoaded', observePreviewBar);
     </script>
     <!-- 登录界面 -->
@@ -89,16 +116,16 @@
         </div>
     </div>
-    <!-- 主应用 -->
     <div class="app-container" id="app" style="filter: blur(10px); pointer-events: none;">
-        <!-- 顶部固定输入区 -->
         <div class="input-section glass-panel" id="drop-zone">
-            <!-- 上部分：预览条 -->
             <div class="preview-bar" id="preview-bar"></div>
-            <!-- 下部分：操作栏 -->
             <div class="control-bar">
-                <button class="upload-trigger" id="upload-btn" title="上传参考图">上传图片</button>
                 <textarea id="prompt" class="main-input" rows="1" placeholder="描述画面... (支持拖拽图片)"></textarea>
                 <button class="ghost-btn" id="clear-btn" title="清空输入" aria-label="清空输入">清空</button>
                 <button class="btn-3d send-btn" id="send-btn">
@@ -107,8 +134,8 @@
                 </button>
             </div>
             <div class="tips-row" id="tips-row">
-                <span class="tip-pill">提示：写明主体 + 风格 + 光线</span>
-                <span class="tip-pill">支持参考图：先上传再描述</span>
                 <span class="tip-pill">画面比例 / 构图 写清楚更稳定</span>
             </div>
         </div>
@@ -141,7 +168,7 @@
                 <div class="section-title">
                     <div>
                         <h3>社区创意画廊</h3>
-                        <p class="section-subtitle" id="public-gallery-hint">分享你的作品，欣赏社区灵感</p>
                     </div>
                     <div class="section-actions">
                         <button class="icon-btn" id="refresh-public-gallery" title="刷新公共画廊" aria-label="刷新公共画廊">
@@ -175,22 +202,21 @@
                     <button class="icon-btn" id="m-download" title="保存图片" aria-label="保存图片">保存</button>
                 </div>
                 <button class="btn-3d" id="m-reuse" style="width: 100%; padding: 12px;">
-                    复用参数与图片
-                </button>
             </div>
         </div>
     </div>
     <script>
     // ============================================
-    // 全局状态管理
     // ============================================
     const AppState = {
         db: null,
-        currentImages: [],     // 当前上传图片的图片 Base64 数组
         galleryData: [],       // 个人画廊数据缓存
         publicGalleryData: [], // 公共画廊数据缓存
-        currentModalItem: null // 当前弹窗显示的项目
     };
     const Device = {
@@ -202,7 +228,7 @@
         publicGalleryTokens: 'BananaPro_PublicGallery_Tokens_v1'
     };
-    const DEFAULT_PUBLIC_HINT = '分享你的作品，欣赏社区灵感';
     const DB_NAME = 'BananaProDB_v3';
     const DB_VERSION = 1;
@@ -242,13 +268,13 @@
                 const tx = AppState.db.transaction([STORE_NAME], 'readwrite');
                 const store = tx.objectStore(STORE_NAME);
-                // 直接存储完整对象，不做任何转换
                 const record = {
                     prompt: item.prompt,
-                    image: item.image,           // data:image/... 或 /generated/... URL
                     imageUrl: item.imageUrl || null,
                     imageId: item.imageId || null,
-                    thumb: item.thumb || null,   // 缩略图（用于加速列表渲染）
                     inputImages: item.inputImages || [],
                     timestamp: Date.now()
                 };
@@ -319,7 +345,7 @@
     // 图片处理模块
     // ============================================
     const ImageHandler = {
-        // 文件转 Base64
         fileToBase64(file) {
             return new Promise((resolve, reject) => {
                 const reader = new FileReader();
@@ -329,7 +355,7 @@
             });
         },
-        // 压缩图片（手机端优化）
         async compressImage(base64Data, maxWidth = 1280, quality = 0.8) {
             return new Promise((resolve) => {
                 const img = new Image();
@@ -460,14 +486,14 @@
             item.displayUrl = null;
         },
-        // 处理上传图片的文件
         async processFiles(files) {
             const maxImages = 16;
             const imageFiles = Array.from(files).filter(f => f.type.startsWith('image/'));
             for (const file of imageFiles) {
                 if (AppState.currentImages.length >= maxImages) {
-                    alert(`最多只能上传图片 ${maxImages} 张图片`);
                     break;
                 }
@@ -485,13 +511,13 @@
             PreviewManager.render();
         },
-        // 移除指定索引的图片
         removeAt(index) {
             AppState.currentImages.splice(index, 1);
             PreviewManager.render();
         },
-        // 清空所有上传图片的图片
         clear() {
             AppState.currentImages = [];
             PreviewManager.render();
@@ -533,7 +559,7 @@
             this.container.classList.add('visible');
             this.uploadBtn.classList.add('active');
-            StatusBar.setText("已选择 " + images.length + '/16 ' + "张图片");
             images.forEach((imgData, index) => {
                 const wrapper = document.createElement('div');
@@ -792,7 +818,7 @@
                 this.container.innerHTML = `
                     <div style="grid-column: 1/-1; text-align: center; color: var(--text-sub); padding: 60px 20px;">
                         <div style="font-size: 48px; margin-bottom: 10px;">暂无</div>
-                        <div>暂无作品，开始创作吧！</div>
                     </div>
                 `;
                 return;
@@ -837,7 +863,7 @@
             if (item.inputImages && item.inputImages.length > 0) {
                 const badge = document.createElement('div');
                 badge.className = 'item-badge';
-                badge.textContent = `参考 ${item.inputImages.length}`;
                 el.appendChild(badge);
             }
@@ -862,8 +888,8 @@
             const shareBtn = document.createElement('button');
             shareBtn.className = 'icon-btn share-btn';
             shareBtn.textContent = '发布';
-            shareBtn.title = '发布到公共画廊';
-            shareBtn.setAttribute('aria-label', '发布到公共画廊');
             shareBtn.onclick = (e) => {
                 e.stopPropagation();
                 PublicGalleryManager.share(item, shareBtn);
@@ -970,7 +996,7 @@
         },
         async deleteItem(id) {
-            if (!confirm('确定要删除这张图片吗？')) return;
             try {
                 const targetItem = (AppState.galleryData || []).find((item) => item.id === id);
@@ -1027,19 +1053,19 @@
         open(item) {
             AppState.currentModalItem = item;
-            // 设置主图 - 直接赋值
             this.imgEl.src = ImageHandler.getDisplayImage(item) || item.thumb || '';
-            // 设置提示词
             this.promptEl.textContent = item.prompt;
-            // 渲染参考图
             this.refsEl.innerHTML = '';
             if (item.inputImages && item.inputImages.length > 0) {
                 item.inputImages.forEach(imgData => {
                     const thumb = document.createElement('img');
                     thumb.className = 'ref-thumb';
-                    thumb.src = imgData;  // 直接赋值
                     thumb.onclick = () => window.open(imgData, '_blank');
                     this.refsEl.appendChild(thumb);
                 });
@@ -1071,13 +1097,13 @@
             const item = AppState.currentModalItem;
             if (!item) return;
-            // 复用提示词
             const textarea = document.getElementById('prompt');
             textarea.value = item.prompt;
             textarea.style.height = 'auto';
             textarea.style.height = textarea.scrollHeight + 'px';
-            // 复用参考图
             if (item.inputImages && item.inputImages.length > 0) {
                 ImageHandler.setImages(item.inputImages);
             } else {
@@ -1240,7 +1266,7 @@
         },
         startRealtimeSync() {
-            // 实时同步已禁用 - 改为手动刷新提高性能
         },
         stopRealtimeSync() {
@@ -1308,7 +1334,7 @@
         async fetch() {
             if (!this.container) return;
-            // 防止过于频繁的请求
             const now = Date.now();
             if (now - this.lastFetchTime < this.minFetchInterval) {
                 return;
@@ -1340,8 +1366,8 @@
                 let errorMessage = '加载失败，请稍后重试';
                 if (error.name === 'AbortError') {
-                    errorMessage = '加载超时，请检查网络';
-                    this.setHint('加载超时，请检查网络', 'error');
                 } else {
                     this.setHint(errorMessage, 'error');
                 }
@@ -1548,7 +1574,7 @@
         async share(item, triggerBtn) {
             if (!item) return;
-            const confirmShare = confirm('确认将这张作品发布到公共画廊？提示词将对所有人可见。');
             if (!confirmShare) {
                 return;
             }
@@ -1593,7 +1619,7 @@
                 this.render();
                 this.setHint('作品已发布至公共画廊', 'success');
             } catch (error) {
-                console.error('发布到公共画廊失败:', error);
                 alert('发布失败: ' + error.message);
                 this.setHint('发布失败，请稍后重试', 'error');
             } finally {
@@ -1604,7 +1630,7 @@
         },
         async delete(id) {
-            const confirmDelete = confirm('确定要删除这张公共画廊作品吗？');
             if (!confirmDelete) {
                 return;
             }
@@ -1628,7 +1654,7 @@
                 AppState.publicGalleryData = AppState.publicGalleryData.filter(item => item.id !== id);
                 this.removeOwnership(id);
                 this.render();
-                this.setHint('作品已删除', 'success');
             } catch (error) {
                 console.error('删除公共画廊作品失败:', error);
                 alert('删除失败: ' + error.message);
@@ -1706,7 +1732,7 @@
                     if (this.isGenerating) {
                         this.setLoading(false);
                         StatusBar.flash("生成超时");
-                        alert("生成超时，请检查网络后重试");
                     }
                 }, uiTimeoutMs);
             } else {
@@ -1968,7 +1994,7 @@
     };
     // ============================================
-    // 全局函数（供 HTML onclick 调用）
     // ============================================
     async function loadWorkspaceData() {
         try {
@@ -2001,12 +2027,11 @@
     }
     // ============================================
-    // 应用初始化
     // ============================================
     async function initApp() {
         try {
-            // 初始化数据库（允许失败，避免移动端被阻塞）
-            try {
                 await Database.init();
             } catch (dbErr) {
                 console.warn('Database init failed:', dbErr);
@@ -2024,8 +2049,7 @@
             DragDrop.init();
             FileSelector.init();
-            // 检查认证状态
-            const isAuth = await Auth.check();
             if (isAuth) {
                 Auth.unlock();
                 await loadWorkspaceData();
@@ -2046,3 +2070,4 @@
     </script>
 </body>
 </html>

         }
         header {
+            margin-top: var(--input-offset, 115px); /* 为输入区留空�?*/
         }
         .history-container {
             padding-bottom: 20px !important;
         }
+        /* 调整输入区内部布�? */
         .control-bar {
             max-width: 1400px;
             margin: 0 auto;
             padding: 12px 20px;
         }
+        /* 动�?�调整header间距 */
         .has-preview header {
+            margin-top: var(--input-offset, 260px);
         }
         @media (max-width: 768px) {
             header {
+                margin-top: var(--input-offset, 170px);
             }
             .has-preview header {
+                margin-top: var(--input-offset, 320px);
             }
         }
     </style>
 </head>
 <body>
+    <!-- 在预览栏显示时添�?has-preview �?-->
+        <script>
+        // Observe preview bar changes and input height.
+        const observePreviewBar = () => {
+            const previewBar = document.getElementById('preview-bar');
+            if (!previewBar) return;
+            const observer = new MutationObserver(() => {
+                if (previewBar.classList.contains('visible')) {
+                    document.body.classList.add('has-preview');
+                } else {
+                    document.body.classList.remove('has-preview');
+                }
+            });
+            observer.observe(previewBar, { attributes: true, attributeFilter: ['class'] });
+        };
+        const updateInputOffset = () => {
+            const inputSection = document.querySelector('.input-section');
+            if (!inputSection) return;
+            const gap = 16;
+            const nextOffset = inputSection.offsetHeight + gap;
+            document.documentElement.style.setProperty('--input-offset', nextOffset + 'px');
+        };
+        const observeInputSection = () => {
+            const inputSection = document.querySelector('.input-section');
+            if (!inputSection) return;
+            updateInputOffset();
+            if ('ResizeObserver' in window) {
+                const observer = new ResizeObserver(() => {
+                    requestAnimationFrame(updateInputOffset);
+                });
+                observer.observe(inputSection);
+            } else {
+                window.addEventListener('resize', updateInputOffset);
+            }
+        };
+        document.addEventListener('DOMContentLoaded', () => {
+            observePreviewBar();
+            observeInputSection();
+        });
     </script>
     <!-- 登录界面 -->
         </div>
     </div>
+    <!-- 主应�?-->
     <div class="app-container" id="app" style="filter: blur(10px); pointer-events: none;">
+        <!-- 顶部固定输入�?-->
         <div class="input-section glass-panel" id="drop-zone">
+            <!-- 上部分：预览�?-->
             <div class="preview-bar" id="preview-bar"></div>
+            <!-- 下部分：操作�?-->
             <div class="control-bar">
+                <button class="upload-trigger" id="upload-btn" title="上传参�?�图">上传图片</button>
                 <textarea id="prompt" class="main-input" rows="1" placeholder="描述画面... (支持拖拽图片)"></textarea>
                 <button class="ghost-btn" id="clear-btn" title="清空输入" aria-label="清空输入">清空</button>
                 <button class="btn-3d send-btn" id="send-btn">
                 </button>
             </div>
             <div class="tips-row" id="tips-row">
+                <span class="tip-pill">提示：写明主�?+ 风格 + 光线</span>
+                <span class="tip-pill">支持参�?�图：先上传再描�?/span>
                 <span class="tip-pill">画面比例 / 构图 写清楚更稳定</span>
             </div>
         </div>
                 <div class="section-title">
                     <div>
                         <h3>社区创意画廊</h3>
+                        <p class="section-subtitle" id="public-gallery-hint">分享你的作品，欣赏社区灵�?/p>
                     </div>
                     <div class="section-actions">
                         <button class="icon-btn" id="refresh-public-gallery" title="刷新公共画廊" aria-label="刷新公共画廊">
                     <button class="icon-btn" id="m-download" title="保存图片" aria-label="保存图片">保存</button>
                 </div>
                 <button class="btn-3d" id="m-reuse" style="width: 100%; padding: 12px;">
+                    复用参数与图�?                </button>
             </div>
         </div>
     </div>
     <script>
     // ============================================
+    // 全局状�?�管�?
     // ============================================
     const AppState = {
         db: null,
+        currentImages: [],     // 当前上传图片的图�?Base64 数组
         galleryData: [],       // 个人画廊数据缓存
         publicGalleryData: [], // 公共画廊数据缓存
+        currentModalItem: null // 当前弹窗显示的项�?
     };
     const Device = {
         publicGalleryTokens: 'BananaPro_PublicGallery_Tokens_v1'
     };
+    const DEFAULT_PUBLIC_HINT = '分享你的作品，欣赏社区灵�?;
     const DB_NAME = 'BananaProDB_v3';
     const DB_VERSION = 1;
                 const tx = AppState.db.transaction([STORE_NAME], 'readwrite');
                 const store = tx.objectStore(STORE_NAME);
+                // 直接存储完整对象，不做任何转�?
                 const record = {
                     prompt: item.prompt,
+                    image: item.image,           // data:image/... �?/generated/... URL
                     imageUrl: item.imageUrl || null,
                     imageId: item.imageId || null,
+                    thumb: item.thumb || null,   // 缩略图（用于加�?�列表渲染）
                     inputImages: item.inputImages || [],
                     timestamp: Date.now()
                 };
     // 图片处理模块
     // ============================================
     const ImageHandler = {
+        // 文件�?Base64
         fileToBase64(file) {
             return new Promise((resolve, reject) => {
                 const reader = new FileReader();
             });
         },
+        // 压缩图片（手机端优化�?
         async compressImage(base64Data, maxWidth = 1280, quality = 0.8) {
             return new Promise((resolve) => {
                 const img = new Image();
             item.displayUrl = null;
         },
+        // 处理上传图片的文�?
         async processFiles(files) {
             const maxImages = 16;
             const imageFiles = Array.from(files).filter(f => f.type.startsWith('image/'));
             for (const file of imageFiles) {
                 if (AppState.currentImages.length >= maxImages) {
+                    alert(`�?多只能上传图�?${maxImages} 张图片`);
                     break;
                 }
             PreviewManager.render();
         },
+        // 移除指定索引的图�?
         removeAt(index) {
             AppState.currentImages.splice(index, 1);
             PreviewManager.render();
         },
+        // 清空�?有上传图片的图片
         clear() {
             AppState.currentImages = [];
             PreviewManager.render();
             this.container.classList.add('visible');
             this.uploadBtn.classList.add('active');
+            StatusBar.setText("已�?�择 " + images.length + '/16 ' + "张图�?);
             images.forEach((imgData, index) => {
                 const wrapper = document.createElement('div');
                 this.container.innerHTML = `
                     <div style="grid-column: 1/-1; text-align: center; color: var(--text-sub); padding: 60px 20px;">
                         <div style="font-size: 48px; margin-bottom: 10px;">暂无</div>
+                        <div>暂无作品，开始创作吧�?/div>
                     </div>
                 `;
                 return;
             if (item.inputImages && item.inputImages.length > 0) {
                 const badge = document.createElement('div');
                 badge.className = 'item-badge';
+                badge.textContent = `参�??${item.inputImages.length}`;
                 el.appendChild(badge);
             }
             const shareBtn = document.createElement('button');
             shareBtn.className = 'icon-btn share-btn';
             shareBtn.textContent = '发布';
+            shareBtn.title = '发布到公共画�?;
+            shareBtn.setAttribute('aria-label', '发布到公共画�?);
             shareBtn.onclick = (e) => {
                 e.stopPropagation();
                 PublicGalleryManager.share(item, shareBtn);
         },
         async deleteItem(id) {
+            if (!confirm('确定要删除这张图片吗�?)) return;
             try {
                 const targetItem = (AppState.galleryData || []).find((item) => item.id === id);
         open(item) {
             AppState.currentModalItem = item;
+            // 设置主图 - 直接赋�??
             this.imgEl.src = ImageHandler.getDisplayImage(item) || item.thumb || '';
+            // 设置提示�?
             this.promptEl.textContent = item.prompt;
+            // 渲染参�?�图
             this.refsEl.innerHTML = '';
             if (item.inputImages && item.inputImages.length > 0) {
                 item.inputImages.forEach(imgData => {
                     const thumb = document.createElement('img');
                     thumb.className = 'ref-thumb';
+                    thumb.src = imgData;  // 直接赋�??
                     thumb.onclick = () => window.open(imgData, '_blank');
                     this.refsEl.appendChild(thumb);
                 });
             const item = AppState.currentModalItem;
             if (!item) return;
+            // 复用提示�?
             const textarea = document.getElementById('prompt');
             textarea.value = item.prompt;
             textarea.style.height = 'auto';
             textarea.style.height = textarea.scrollHeight + 'px';
+            // 复用参�?�图
             if (item.inputImages && item.inputImages.length > 0) {
                 ImageHandler.setImages(item.inputImages);
             } else {
         },
         startRealtimeSync() {
+            // 实时同步已禁�?- 改为手动刷新提高性能
         },
         stopRealtimeSync() {
         async fetch() {
             if (!this.container) return;
+            // 防止过于频繁的请�?
             const now = Date.now();
             if (now - this.lastFetchTime < this.minFetchInterval) {
                 return;
                 let errorMessage = '加载失败，请稍后重试';
                 if (error.name === 'AbortError') {
+                    errorMessage = '加载超时，请�?查网�?;
+                    this.setHint('加载超时，请�?查网�?, 'error');
                 } else {
                     this.setHint(errorMessage, 'error');
                 }
         async share(item, triggerBtn) {
             if (!item) return;
+            const confirmShare = confirm('确认将这张作品发布到公共画廊？提示词将对�?有人可见�?);
             if (!confirmShare) {
                 return;
             }
                 this.render();
                 this.setHint('作品已发布至公共画廊', 'success');
             } catch (error) {
+                console.error('发布到公共画廊失�?', error);
                 alert('发布失败: ' + error.message);
                 this.setHint('发布失败，请稍后重试', 'error');
             } finally {
         },
         async delete(id) {
+            const confirmDelete = confirm('确定要删除这张公共画廊作品吗�?);
             if (!confirmDelete) {
                 return;
             }
                 AppState.publicGalleryData = AppState.publicGalleryData.filter(item => item.id !== id);
                 this.removeOwnership(id);
                 this.render();
+                this.setHint('作品已删�?, 'success');
             } catch (error) {
                 console.error('删除公共画廊作品失败:', error);
                 alert('删除失败: ' + error.message);
                     if (this.isGenerating) {
                         this.setLoading(false);
                         StatusBar.flash("生成超时");
+                        alert("生成超时，请�?查网络后重试");
                     }
                 }, uiTimeoutMs);
             } else {
     };
     // ============================================
+    // 全局函数（供 HTML onclick 调用�?
     // ============================================
     async function loadWorkspaceData() {
         try {
     }
     // ============================================
+    // 应用初始�?
     // ============================================
     async function initApp() {
         try {
+            // 初始化数据库（允许失败，避免移动端被阻塞�?            try {
                 await Database.init();
             } catch (dbErr) {
                 console.warn('Database init failed:', dbErr);
             DragDrop.init();
             FileSelector.init();
+            // �?查认证状�?            const isAuth = await Auth.check();
             if (isAuth) {
                 Auth.unlock();
                 await loadWorkspaceData();
     </script>
 </body>
 </html>

stats.html CHANGED Viewed

@@ -6,24 +6,49 @@
     <title>Banana Pro - &#x7AD9;&#x70B9;&#x7EDF;&#x8BA1;</title>
     <link rel="stylesheet" href="style.css">
     <style>
-        body.stats-page {
-            background: var(--bg-color);
-        }
-        .stats-shell {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 120px 20px 80px;
-            width: 100%;
-        }
-        .stats-header {
-            display: flex;
-            align-items: flex-start;
-            justify-content: space-between;
-            gap: 16px;
-            flex-wrap: wrap;
-        }
         .stats-title {
             margin: 0;
@@ -35,14 +60,24 @@
             background-clip: text;
         }
-        .stats-meta {
-            display: flex;
-            gap: 16px;
-            flex-wrap: wrap;
-            margin-top: 6px;
-            color: var(--text-sub);
-            font-size: 12px;
-        }
         .stats-actions {
             display: flex;
@@ -51,34 +86,55 @@
             flex-wrap: wrap;
         }
-        .stats-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-            gap: 16px;
-            margin-top: 24px;
-        }
-        .stats-card {
-            background: var(--panel-bg);
-            border: 1px solid var(--panel-border);
-            border-radius: 18px;
-            padding: 16px 18px;
-            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
-        }
-        .stats-label {
-            color: var(--text-sub);
-            font-size: 11px;
-            letter-spacing: 1px;
-            text-transform: uppercase;
-        }
-        .stats-value {
-            font-size: 1.8rem;
-            font-weight: 700;
-            margin-top: 10px;
-            color: var(--text-main);
-        }
         .stats-sub {
             margin-top: 8px;
@@ -89,28 +145,45 @@
             flex-wrap: wrap;
         }
-        .stats-panel {
-            margin-top: 20px;
-            background: var(--panel-bg);
-            border: 1px solid var(--panel-border);
-            border-radius: 20px;
-            padding: 18px 20px;
-        }
-        .panel-title {
-            font-size: 0.95rem;
-            color: var(--text-main);
-            font-weight: 600;
-        }
-        .bars {
-            margin-top: 16px;
-            display: grid;
-            grid-template-columns: repeat(7, 1fr);
-            gap: 10px;
-            height: 190px;
-            align-items: end;
-        }
         .stats-legend {
             margin-top: 10px;
@@ -165,14 +238,24 @@
             height: 100%;
         }
-        .bar-fill {
-            width: 100%;
-            border-radius: 10px 10px 6px 6px;
-            background: linear-gradient(180deg, var(--accent-color), var(--accent-secondary));
-            min-height: 10px;
-            transition: height 0.4s ease;
-            box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
-        }
         .bar-fill.share {
             background: linear-gradient(180deg, #22c55e, #16a34a);
@@ -205,19 +288,19 @@
             color: rgba(148, 163, 184, 0.7);
         }
-        @media (max-width: 768px) {
-            .stats-shell {
-                padding: 100px 16px 60px;
-            }
             .stats-title {
                 font-size: 1.35rem;
             }
-            .bars {
-                height: 140px;
-            }
-        }
     </style>
 </head>
 <body class="stats-page">

     <title>Banana Pro - &#x7AD9;&#x70B9;&#x7EDF;&#x8BA1;</title>
     <link rel="stylesheet" href="style.css">
     <style>
+        body.stats-page {
+            background:
+                radial-gradient(700px 360px at 12% -10%, rgba(59, 130, 246, 0.18), transparent 60%),
+                radial-gradient(700px 420px at 88% -20%, rgba(34, 211, 238, 0.2), transparent 55%),
+                var(--bg-color);
+            min-height: 100vh;
+        }
+        .stats-shell {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 120px 20px 80px;
+            width: 100%;
+            position: relative;
+            z-index: 0;
+        }
+        .stats-shell::before {
+            content: '';
+            position: absolute;
+            inset: 60px 0 0;
+            background:
+                radial-gradient(480px 280px at 15% 0%, rgba(59, 130, 246, 0.16), transparent 70%),
+                radial-gradient(520px 320px at 85% 10%, rgba(34, 211, 238, 0.12), transparent 70%);
+            opacity: 0.75;
+            pointer-events: none;
+            z-index: 0;
+        }
+        .stats-shell > * {
+            position: relative;
+            z-index: 1;
+        }
+        .stats-header {
+            display: flex;
+            align-items: flex-start;
+            justify-content: space-between;
+            gap: 16px;
+            flex-wrap: wrap;
+            padding-bottom: 12px;
+            border-bottom: 1px solid var(--panel-border);
+        }
         .stats-title {
             margin: 0;
             background-clip: text;
         }
+        .stats-meta {
+            display: flex;
+            gap: 16px;
+            flex-wrap: wrap;
+            margin-top: 6px;
+            color: var(--text-sub);
+            font-size: 12px;
+        }
+        .stats-meta span {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            padding: 4px 10px;
+            border-radius: 999px;
+            background: rgba(15, 23, 42, 0.55);
+            border: 1px solid rgba(148, 163, 184, 0.2);
+        }
         .stats-actions {
             display: flex;
             flex-wrap: wrap;
         }
+        .stats-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+            gap: 18px;
+            margin-top: 24px;
+        }
+        .stats-card {
+            background: var(--panel-bg);
+            border: 1px solid var(--panel-border);
+            border-radius: 18px;
+            padding: 16px 18px;
+            box-shadow: 0 14px 32px rgba(0, 0, 0, 0.25);
+            position: relative;
+            overflow: hidden;
+            transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
+        }
+        .stats-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 3px;
+            background: linear-gradient(90deg, rgba(59, 130, 246, 0.9), rgba(34, 211, 238, 0.9));
+            opacity: 0.75;
+        }
+        .stats-card:hover {
+            transform: translateY(-4px);
+            box-shadow: 0 18px 40px rgba(15, 23, 42, 0.35);
+            border-color: var(--panel-border-strong);
+        }
+        .stats-label {
+            color: var(--text-sub);
+            font-size: 11px;
+            letter-spacing: 1px;
+            text-transform: uppercase;
+        }
+        .stats-value {
+            font-size: 2rem;
+            font-weight: 700;
+            margin-top: 10px;
+            color: var(--text-main);
+            letter-spacing: 0.5px;
+        }
         .stats-sub {
             margin-top: 8px;
             flex-wrap: wrap;
         }
+        .stats-panel {
+            margin-top: 20px;
+            background: linear-gradient(135deg, rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.95));
+            border: 1px solid var(--panel-border);
+            border-radius: 20px;
+            padding: 18px 20px;
+            box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25);
+        }
+        .panel-title {
+            font-size: 0.95rem;
+            color: var(--text-main);
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .panel-title::before {
+            content: '';
+            width: 10px;
+            height: 10px;
+            border-radius: 999px;
+            background: linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(34, 211, 238, 0.9));
+            box-shadow: 0 0 10px rgba(34, 211, 238, 0.45);
+        }
+        .bars {
+            margin-top: 16px;
+            display: grid;
+            grid-template-columns: repeat(7, 1fr);
+            gap: 10px;
+            height: 190px;
+            align-items: end;
+            padding: 12px;
+            border-radius: 16px;
+            background: rgba(15, 23, 42, 0.35);
+            border: 1px solid rgba(148, 163, 184, 0.18);
+        }
         .stats-legend {
             margin-top: 10px;
             height: 100%;
         }
+        .bar-fill {
+            width: 100%;
+            border-radius: 10px 10px 6px 6px;
+            background: linear-gradient(180deg, var(--accent-color), var(--accent-secondary));
+            min-height: 10px;
+            transition: height 0.4s ease;
+            box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
+            position: relative;
+            overflow: hidden;
+        }
+        .bar-fill::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent 65%);
+            opacity: 0.55;
+        }
         .bar-fill.share {
             background: linear-gradient(180deg, #22c55e, #16a34a);
             color: rgba(148, 163, 184, 0.7);
         }
+        @media (max-width: 768px) {
+            .stats-shell {
+                padding: 100px 16px 60px;
+            }
             .stats-title {
                 font-size: 1.35rem;
             }
+            .bars {
+                height: 140px;
+            }
+        }
     </style>
 </head>
 <body class="stats-page">

style.css CHANGED Viewed

@@ -55,29 +55,29 @@ body {
     will-change: transform;
 }
-@media (max-width: 768px) {
-    .status-meter {
-        width: 120px;
-    .tips-row {
-        padding: 0 16px 10px;
-    }
-    .tip-pill {
-        font-size: 11px;
-    }
-}
-    .prompt-link {
-        font-size: 0.75rem;
-        padding: 5px 10px;
-    }
-    .glass-panel {
-        backdrop-filter: blur(10px) saturate(120%);
-        -webkit-backdrop-filter: blur(10px) saturate(120%);
-    }
-}
 .glass-panel::before {
     content: '';
@@ -183,7 +183,7 @@ header {
     justify-content: space-between;
     align-items: center;
     flex-shrink: 0;
-    margin-top: 190px;
     transition: margin-top var(--transition-normal);
 }
@@ -314,7 +314,7 @@ header h2 {
 body.has-preview header {
-    margin-top: 260px;
 }
 /* --- History Gallery --- */
@@ -1340,11 +1340,28 @@ body.has-preview header {
 }
 /* --- Mobile Responsive Design --- */
-@media (max-width: 768px) {
-     .grid-layout {
-         grid-template-columns: 1fr;
-         gap: 12px;
-     }
      .public-gallery-section {
          padding: 20px;
@@ -1461,7 +1478,7 @@ body.has-preview header {
 }
 /* --- Tablet Responsive Design --- */
-@media (min-width: 768px) and (max-width: 1024px) {
     .grid-layout {
         grid-template-columns: repeat(2, 1fr);
         gap: 16px;
@@ -1483,13 +1500,13 @@ body.has-preview header {
     }
     header {
-        margin-top: 190px;
     }
     body.has-preview header {
-        margin-top: 360px;
     }
-}
 /* --- Large Screen Optimization --- */
 @media (min-width: 1200px) {

     will-change: transform;
 }
+@media (max-width: 768px) {
+    .status-meter {
+        width: 120px;
+    }
+    .tips-row {
+        padding: 0 16px 10px;
+    }
+    .tip-pill {
+        font-size: 11px;
+    }
+    .prompt-link {
+        font-size: 0.75rem;
+        padding: 5px 10px;
+    }
+    .glass-panel {
+        backdrop-filter: blur(10px) saturate(120%);
+        -webkit-backdrop-filter: blur(10px) saturate(120%);
+    }
+}
 .glass-panel::before {
     content: '';
     justify-content: space-between;
     align-items: center;
     flex-shrink: 0;
+    margin-top: var(--input-offset, 190px);
     transition: margin-top var(--transition-normal);
 }
 body.has-preview header {
+    margin-top: var(--input-offset, 260px);
 }
 /* --- History Gallery --- */
 }
 /* --- Mobile Responsive Design --- */
+@media (max-width: 768px) {
+     body {
+         height: auto;
+         min-height: 100vh;
+         overflow-y: auto;
+         overflow-x: hidden;
+         -webkit-overflow-scrolling: touch;
+     }
+     .app-container {
+         height: auto;
+         min-height: 100vh;
+     }
+     .history-container {
+         overflow: visible;
+     }
+     .grid-layout {
+         grid-template-columns: 1fr;
+         gap: 12px;
+     }
      .public-gallery-section {
          padding: 20px;
 }
 /* --- Tablet Responsive Design --- */
+@media (min-width: 768px) and (max-width: 1024px) {
     .grid-layout {
         grid-template-columns: repeat(2, 1fr);
         gap: 16px;
     }
     header {
+        margin-top: var(--input-offset, 190px);
     }
     body.has-preview header {
+        margin-top: var(--input-offset, 360px);
     }
+}
 /* --- Large Screen Optimization --- */
 @media (min-width: 1200px) {