Upload 10 files

public/index.html

@@ -10,26 +10,45 @@
       --fg: #1e293b;
       --card: #ffffff;
       --muted: #64748b;
-      --accent: #3b82f6;
+      --accent: #6366f1;
+      --accent-hover: #4f46e5;
       --border: #e2e8f0;
+      --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+      --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
     }
     [data-theme="dark"] {
-      --bg: #0f172a;
-      --fg: #f1f5f9;
-      --card: #1e293b;
+      --bg: #0f0f23;
+      --fg: #e2e8f0;
+      --card: #1a1a2e;
       --muted: #94a3b8;
-      --accent: #3b82f6;
-      --border: #334155;
+      --accent: #7c3aed;
+      --accent-hover: #6d28d9;
+      --border: #2d2d44;
+      --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+      --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
     }
-    * { box-sizing: border-box; }
-    html, body { height: 100%; margin: 0; padding: 0; }
+    
+    * {
+      box-sizing: border-box;
+      -webkit-tap-highlight-color: transparent;
+    }
+    
+    html, body {
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      overflow-x: hidden;
+    }
+    
     body {
       background: var(--bg);
       color: var(--fg);
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-      transition: background-color 0.2s, color 0.2s;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', sans-serif;
+      transition: background-color 0.3s ease, color 0.3s ease;
+      line-height: 1.5;
     }
     
+    /* Header Styles */
     header {
       display: flex;
       align-items: center;
@@ -39,169 +58,486 @@
       background: var(--card);
       position: sticky;
       top: 0;
-      z-index: 10;
+      z-index: 100;
+      backdrop-filter: blur(8px);
+      box-shadow: var(--shadow);
+    }
+    
+    header h1 {
+      font-size: 20px;
+      margin: 0;
+      font-weight: 600;
+      background: linear-gradient(135deg, var(--accent), var(--accent-hover));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
     }
-    header h1 { font-size: 18px; margin: 0; }
     
     .controls {
       display: flex;
       gap: 8px;
       align-items: center;
+      flex-wrap: wrap;
     }
+    
     .toggle-btn {
-      padding: 4px 8px;
+      padding: 6px 12px;
       border: 1px solid var(--border);
-      border-radius: 12px;
+      border-radius: 16px;
       background: var(--bg);
       color: var(--fg);
       font-size: 12px;
       cursor: pointer;
-      transition: all 0.2s;
+      transition: all 0.2s ease;
+      white-space: nowrap;
+      user-select: none;
+    }
+    
+    .toggle-btn:hover {
+      background: var(--accent);
+      color: white;
+      transform: translateY(-1px);
+      box-shadow: var(--shadow);
+    }
+    
+    .toggle-btn.active {
+      background: var(--accent);
+      color: white;
+      box-shadow: var(--shadow);
     }
-    .toggle-btn:hover { background: var(--accent); color: white; }
-    .toggle-btn.active { background: var(--accent); color: white; }
     
     .api-input {
       display: flex;
       align-items: center;
-      gap: 6px;
-      padding: 4px 8px;
+      gap: 8px;
+      padding: 6px 12px;
       border: 1px solid var(--border);
-      border-radius: 12px;
+      border-radius: 16px;
       background: var(--bg);
       font-size: 12px;
+      transition: all 0.2s ease;
     }
+    
+    .api-input:focus-within {
+      border-color: var(--accent);
+      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+    }
+    
     .api-input input {
       border: none;
       background: transparent;
       color: var(--fg);
-      width: 180px;
+      width: 160px;
       padding: 2px;
       font-size: 12px;
     }
+    
     .api-input input:focus { outline: none; }
     
+    /* Mobile Menu Toggle */
+    .mobile-menu-toggle {
+      display: none;
+      background: none;
+      border: none;
+      color: var(--fg);
+      font-size: 20px;
+      cursor: pointer;
+      padding: 8px;
+      border-radius: 8px;
+      transition: background-color 0.2s ease;
+    }
+    
+    .mobile-menu-toggle:hover {
+      background: var(--border);
+    }
+    
+    /* Main Layout */
     main {
       display: grid;
-      grid-template-columns: 280px 1fr;
-      gap: 8px;
-      padding: 8px;
-      height: calc(100vh - 60px);
+      grid-template-columns: 320px 1fr;
+      gap: 16px;
+      padding: 16px;
+      min-height: calc(100vh - 80px);
     }
     
+    /* Panel Styles */
     .panel {
       background: var(--card);
       border: 1px solid var(--border);
-      border-radius: 12px;
-      padding: 8px;
-      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+      border-radius: 16px;
+      padding: 20px;
+      box-shadow: var(--shadow);
+      transition: all 0.3s ease;
+    }
+    
+    .panel.results {
+      overflow: auto;
+      max-height: calc(100vh - 120px);
+    }
+    
+    .panel:hover {
+      box-shadow: var(--shadow-lg);
+    }
+    
+    /* Form Styles */
+    .group {
+      margin-bottom: 16px;
     }
-    .panel.results { overflow: auto; }
     
-    .group { margin-bottom: 8px; }
     .group label {
       display: block;
-      font-size: 13px;
+      font-size: 14px;
       color: var(--muted);
-      margin-bottom: 4px;
+      margin-bottom: 6px;
       font-weight: 500;
+      letter-spacing: 0.025em;
     }
+    
     .group input, .group select, .group textarea {
       width: 100%;
-      padding: 6px;
+      padding: 12px 16px;
       border: 1px solid var(--border);
-      border-radius: 8px;
+      border-radius: 12px;
       background: var(--bg);
       color: var(--fg);
       font-size: 14px;
+      transition: all 0.2s ease;
+      font-family: inherit;
     }
+    
     .group input:focus, .group select:focus, .group textarea:focus {
       outline: none;
       border-color: var(--accent);
+      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+      transform: translateY(-1px);
+    }
+    
+    .group textarea {
+      resize: vertical;
+      min-height: 80px;
     }
     
     .form-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
-      gap: 6px;
+      gap: 12px;
     }
     
     .row {
       display: flex;
-      gap: 6px;
+      gap: 12px;
       align-items: center;
+      flex-wrap: wrap;
     }
     
+    /* Button Styles */
     button {
-      background: var(--accent);
+      background: linear-gradient(135deg, var(--accent), var(--accent-hover));
       color: white;
       border: none;
-      border-radius: 8px;
-      padding: 8px 12px;
+      border-radius: 12px;
+      padding: 12px 20px;
       cursor: pointer;
       font-size: 14px;
-      transition: all 0.2s;
+      font-weight: 500;
+      transition: all 0.2s ease;
+      user-select: none;
+      min-height: 44px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
     }
-    button:hover { opacity: 0.9; }
+    
+    button:hover {
+      transform: translateY(-2px);
+      box-shadow: var(--shadow-lg);
+    }
+    
+    button:active {
+      transform: translateY(0);
+    }
+    
     button.secondary {
-      background: transparent;
+      background: var(--bg);
       color: var(--fg);
       border: 1px solid var(--border);
     }
+    
     button.secondary:hover {
       background: var(--border);
+      border-color: var(--accent);
     }
     
     .seed-toggle {
       background: var(--bg);
       color: var(--fg);
       border: 1px solid var(--border);
-      border-radius: 8px;
-      padding: 6px 10px;
+      border-radius: 12px;
+      padding: 12px 16px;
       cursor: pointer;
       font-size: 14px;
-      transition: all 0.2s;
+      transition: all 0.2s ease;
+      width: 100%;
+      min-height: 44px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
+    
     .seed-toggle.active {
       background: var(--accent);
       color: white;
       border-color: var(--accent);
+      box-shadow: var(--shadow);
+    }
+    
+    .seed-toggle:hover {
+      transform: translateY(-1px);
+      box-shadow: var(--shadow);
     }
     
-    .status { font-size: 14px; color: var(--muted); }
+    .status {
+      font-size: 14px;
+      color: var(--muted);
+      line-height: 1.4;
+    }
     
+    /* Gallery Styles */
     .gallery {
       display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-      gap: 8px;
+      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+      gap: 16px;
     }
+    
     .card {
       background: var(--card);
       border: 1px solid var(--border);
-      border-radius: 8px;
+      border-radius: 16px;
       overflow: hidden;
+      transition: all 0.3s ease;
+      box-shadow: var(--shadow);
+    }
+    
+    .card:hover {
+      transform: translateY(-4px);
+      box-shadow: var(--shadow-lg);
+    }
+    
+    .card img {
+      width: 100%;
+      display: block;
+      aspect-ratio: 1;
+      object-fit: cover;
     }
-    .card img { width: 100%; display: block; }
+    
     .card .meta {
-      padding: 8px;
+      padding: 16px;
       border-top: 1px solid var(--border);
       font-size: 13px;
       color: var(--muted);
-      line-height: 1.4;
+      line-height: 1.5;
     }
+    
     .placeholder {
       display: flex;
       align-items: center;
       justify-content: center;
-      height: 80px;
+      height: 120px;
       color: var(--muted);
       font-size: 14px;
+      background: var(--bg);
+      border-radius: 12px;
+      margin: 8px;
+    }
+    
+    /* Sidebar for mobile */
+    .sidebar {
+      position: fixed;
+      top: 0;
+      left: -100%;
+      width: 320px;
+      height: 100vh;
+      background: var(--card);
+      border-right: 1px solid var(--border);
+      z-index: 200;
+      transition: left 0.3s ease;
+      overflow-y: auto;
+      box-shadow: var(--shadow-lg);
+    }
+    
+    .sidebar.open {
+      left: 0;
+    }
+    
+    .sidebar-header {
+      padding: 16px;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    
+    .sidebar-close {
+      background: none;
+      border: none;
+      color: var(--fg);
+      font-size: 20px;
+      cursor: pointer;
+      padding: 4px;
+      border-radius: 4px;
+      min-height: auto;
+    }
+    
+    .sidebar-close:hover {
+      background: var(--border);
+      transform: none;
+      box-shadow: none;
+    }
+    
+    .sidebar-content {
+      padding: 16px;
+    }
+    
+    .overlay {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.5);
+      z-index: 150;
+      opacity: 0;
+      visibility: hidden;
+      transition: all 0.3s ease;
+    }
+    
+    .overlay.show {
+      opacity: 1;
+      visibility: visible;
+    }
+    
+    /* Mobile Responsive Styles */
+    @media (max-width: 768px) {
+      header {
+        padding: 12px 16px;
+        flex-wrap: wrap;
+        gap: 8px;
+      }
+      
+      header h1 {
+        font-size: 18px;
+        flex: 1;
+      }
+      
+      .controls {
+        gap: 6px;
+        order: 3;
+        width: 100%;
+        justify-content: space-between;
+        margin-top: 8px;
+      }
+      
+      .toggle-btn {
+        padding: 8px 12px;
+        font-size: 11px;
+        flex: 1;
+        text-align: center;
+      }
+      
+      .api-input {
+        flex: 1;
+        min-width: 0;
+      }
+      
+      .api-input input {
+        width: 100%;
+        min-width: 0;
+      }
+      
+      .mobile-menu-toggle {
+        display: block;
+        order: 2;
+      }
+      
+      main {
+        grid-template-columns: 1fr;
+        gap: 12px;
+        padding: 12px;
+        min-height: auto;
+      }
+      
+      .panel {
+        padding: 16px;
+        border-radius: 12px;
+      }
+      
+      .form-grid {
+        grid-template-columns: 1fr;
+        gap: 8px;
+      }
+      
+      .row {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 8px;
+      }
+      
+      .gallery {
+        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+        gap: 12px;
+      }
+      
+      .card .meta {
+        padding: 12px;
+        font-size: 12px;
+      }
+      
+      button, .seed-toggle {
+        min-height: 48px;
+        font-size: 16px;
+      }
+      
+      .group input, .group select, .group textarea {
+        padding: 14px 16px;
+        font-size: 16px;
+        border-radius: 8px;
+      }
+    }
+    
+    @media (max-width: 480px) {
+      header {
+        padding: 8px 12px;
+      }
+      
+      main {
+        padding: 8px;
+        gap: 8px;
+      }
+      
+      .panel {
+        padding: 12px;
+      }
+      
+      .gallery {
+        grid-template-columns: 1fr 1fr;
+        gap: 8px;
+      }
+      
+      .controls {
+        flex-direction: column;
+        gap: 8px;
+      }
+      
+      .toggle-btn {
+        width: 100%;
+      }
     }
   </style>
 </head>
 <body>
 <header>
   <h1>Chutes 图像生成</h1>
+  <button class="mobile-menu-toggle" id="mobileMenuToggle">☰</button>
   <div class="controls">
     <button id="soundToggle" class="toggle-btn">提示音</button>
     <button id="themeToggle" class="toggle-btn">深色主题</button>
@@ -211,8 +547,65 @@
     </div>
   </div>
 </header>
+
+<!-- Mobile Sidebar -->
+<div class="overlay" id="overlay"></div>
+<div class="sidebar" id="sidebar">
+  <div class="sidebar-header">
+    <h3 style="margin: 0; font-size: 16px;">参数设置</h3>
+    <button class="sidebar-close" id="sidebarClose">✕</button>
+  </div>
+  <div class="sidebar-content">
+    <div class="group">
+      <label>模型</label>
+      <select id="modelSelectMobile"></select>
+    </div>
+    <div class="group">
+      <label>提示词</label>
+      <textarea id="promptMobile" rows="3" placeholder="例如：原神角色 插画风，清晰细节，高质量"></textarea>
+    </div>
+    <div class="group">
+      <label>反向提示词</label>
+      <textarea id="negative_promptMobile" rows="2" placeholder="blurry, lowres, bad anatomy, artifacts"></textarea>
+    </div>
+    <div class="group form-grid">
+      <div class="group">
+        <label>宽度</label>
+        <input type="number" id="widthMobile" value="1024">
+      </div>
+      <div class="group">
+        <label>高度</label>
+        <input type="number" id="heightMobile" value="1024">
+      </div>
+      <div class="group">
+        <label>指导系数</label>
+        <input type="number" id="guidance_scaleMobile" step="0.1" value="6">
+      </div>
+      <div class="group">
+        <label>推理步数</label>
+        <input type="number" id="num_inference_stepsMobile" value="20">
+      </div>
+    </div>
+    <div class="group">
+      <button id="seedToggleMobile" class="seed-toggle">使用随机</button>
+    </div>
+    <div class="group">
+      <label>数量（最多10）</label>
+      <input type="number" id="batchCountMobile" value="1" placeholder="1-10">
+    </div>
+    <div class="group">
+      <label>保存位置</label>
+      <button id="chooseFolderMobile" class="secondary" type="button">选择保存文件夹</button>
+      <div class="status" id="folderStatusMobile" style="margin-top: 8px;">未选择</div>
+    </div>
+    <div class="group">
+      <button id="generateBtnMobile">生成图像</button>
+    </div>
+  </div>
+</div>
+
 <main>
-  <section class="panel">
+  <section class="panel" id="desktopPanel">
     <div class="group">
       <label>模型</label>
       <select id="modelSelect"></select>
@@ -284,7 +677,9 @@
     theme: 'light',
     apiKey: '',
     folderHandle: null,
-    seedRandom: true
+    seedRandom: true,
+    isMobile: window.innerWidth <= 768,
+    sidebarOpen: false
   };
 
   function setTheme(t) {
@@ -317,11 +712,14 @@
   }
 
   function updateSeedToggle() {
-    const btn = qs('#seedToggle');
-    if (btn) {
-      btn.classList.toggle('active', state.seedRandom);
-      btn.textContent = state.seedRandom ? '使用随机' : '固定种子';
-    }
+    const buttons = ['#seedToggle', '#seedToggleMobile'];
+    buttons.forEach(selector => {
+      const btn = qs(selector);
+      if (btn) {
+        btn.classList.toggle('active', state.seedRandom);
+        btn.textContent = state.seedRandom ? '使用随机' : '固定种子';
+      }
+    });
   }
 
   function genRandomSeed() {
@@ -345,27 +743,34 @@
   }
 
   function renderModels() {
-    const sel = qs('#modelSelect');
-    sel.innerHTML = '';
-    state.models.forEach(m => {
-      const opt = document.createElement('option');
-      opt.value = m.id;
-      opt.textContent = m.name;
-      sel.appendChild(opt);
+    const selectors = ['#modelSelect', '#modelSelectMobile'];
+    selectors.forEach(selector => {
+      const sel = qs(selector);
+      if (sel) {
+        sel.innerHTML = '';
+        state.models.forEach(m => {
+          const opt = document.createElement('option');
+          opt.value = m.id;
+          opt.textContent = m.name;
+          sel.appendChild(opt);
+        });
+        const last = ls.get('lastParams', null);
+        if (last && last.model) sel.value = last.model;
+      }
     });
-    const last = ls.get('lastParams', null);
-    if (last && last.model) sel.value = last.model;
   }
 
   function currentParams() {
+    const isMobile = window.innerWidth <= 768;
+    const prefix = isMobile ? 'Mobile' : '';
     return {
-      model: qs('#modelSelect').value || '',
-      prompt: (qs('#prompt').value || '').trim(),
-      negative_prompt: (qs('#negative_prompt').value || '').trim(),
-      width: Number(qs('#width').value) || 1024,
-      height: Number(qs('#height').value) || 1024,
-      guidance_scale: Number(qs('#guidance_scale').value) || 6,
-      num_inference_steps: Number(qs('#num_inference_steps').value) || 20,
+      model: qs(`#modelSelect${prefix}`).value || '',
+      prompt: (qs(`#prompt${prefix}`).value || '').trim(),
+      negative_prompt: (qs(`#negative_prompt${prefix}`).value || '').trim(),
+      width: Number(qs(`#width${prefix}`).value) || 1024,
+      height: Number(qs(`#height${prefix}`).value) || 1024,
+      guidance_scale: Number(qs(`#guidance_scale${prefix}`).value) || 6,
+      num_inference_steps: Number(qs(`#num_inference_steps${prefix}`).value) || 20,
       seed: state.seedRandom ? null : 0
     };
   }
@@ -446,13 +851,66 @@
     try {
       if (!('showDirectoryPicker' in window)) {
         qs('#folderStatus').textContent = '浏览器不支持';
+        qs('#folderStatusMobile').textContent = '浏览器不支持';
         return;
       }
       const handle = await window.showDirectoryPicker();
       state.folderHandle = handle;
       qs('#folderStatus').textContent = '已选择';
+      qs('#folderStatusMobile').textContent = '已选择';
     } catch(e) {
       qs('#folderStatus').textContent = '未选择';
+      qs('#folderStatusMobile').textContent = '未选择';
+    }
+  }
+
+  // 移动端侧边栏控制
+  function toggleSidebar() {
+    state.sidebarOpen = !state.sidebarOpen;
+    const sidebar = qs('#sidebar');
+    const overlay = qs('#overlay');
+    
+    if (state.sidebarOpen) {
+      sidebar.classList.add('open');
+      overlay.classList.add('show');
+      syncFormData('desktop', 'mobile');
+    } else {
+      sidebar.classList.remove('open');
+      overlay.classList.remove('show');
+      syncFormData('mobile', 'desktop');
+    }
+  }
+
+  function closeSidebar() {
+    state.sidebarOpen = false;
+    qs('#sidebar').classList.remove('open');
+    qs('#overlay').classList.remove('show');
+    syncFormData('mobile', 'desktop');
+  }
+
+  // 同步表单数据
+  function syncFormData(from, to) {
+    const fromPrefix = from === 'mobile' ? 'Mobile' : '';
+    const toPrefix = to === 'mobile' ? 'Mobile' : '';
+    
+    const fields = ['modelSelect', 'prompt', 'negative_prompt', 'width', 'height', 'guidance_scale', 'num_inference_steps', 'batchCount'];
+    
+    fields.forEach(field => {
+      const fromEl = qs(`#${field}${fromPrefix}`);
+      const toEl = qs(`#${field}${toPrefix}`);
+      if (fromEl && toEl && fromEl.value !== toEl.value) {
+        toEl.value = fromEl.value;
+      }
+    });
+  }
+
+  // 响应式检测
+  function checkMobile() {
+    const wasMobile = state.isMobile;
+    state.isMobile = window.innerWidth <= 768;
+    
+    if (wasMobile !== state.isMobile && state.sidebarOpen) {
+      closeSidebar();
     }
   }
 
@@ -545,7 +1003,7 @@
     setApiKey(ls.get('apiKey', ''));
     updateSeedToggle();
     
-    // 绑定事件
+    // 桌面端事件绑定
     qs('#themeToggle').addEventListener('click', () => {
       setTheme(state.theme === 'dark' ? 'light' : 'dark');
     });
@@ -564,19 +1022,41 @@
     });
     
     qs('#chooseFolder').addEventListener('click', chooseFolder);
-    
     qs('#generateBtn').addEventListener('click', generate);
     
+    // 移动端事件绑定
+    qs('#mobileMenuToggle').addEventListener('click', toggleSidebar);
+    qs('#sidebarClose').addEventListener('click', closeSidebar);
+    qs('#overlay').addEventListener('click', closeSidebar);
+    
+    qs('#seedToggleMobile').addEventListener('click', () => {
+      state.seedRandom = !state.seedRandom;
+      updateSeedToggle();
+    });
+    
+    qs('#chooseFolderMobile').addEventListener('click', chooseFolder);
+    qs('#generateBtnMobile').addEventListener('click', () => {
+      generate();
+      closeSidebar();
+    });
+    
+    // 通用事件绑定
     qs('#downloadAll').addEventListener('click', () => {
       qsa('#gallery img').forEach((img, i) => {
         downloadImage(`image_${i+1}.jpg`, img.src);
       });
     });
     
+    // 键盘事件
     document.addEventListener('keydown', (e) => {
-      if (e.key === 'Enter') generate();
+      if (e.key === 'Enter' && !state.sidebarOpen) generate();
+      if (e.key === 'Escape' && state.sidebarOpen) closeSidebar();
     });
     
+    // 响应式检测
+    window.addEventListener('resize', checkMobile);
+    checkMobile();
+    
     // 加载模型
     fetchModels();
   }