feat: 新前端

config.example.json

@@ -7,7 +7,7 @@
         "cause_stop": "自杀"
     },
     "signal_secret": "",
-    "debug": true,
+    "debug": false,
     "disconnect_duration": 5,
     "enable_qq": true,
     "cat_bot_url": "",

docker-compose.yml

@@ -1,17 +1,17 @@
-version: '3.8'
-
 services:
   goodbaby:
-    image: mei232/goodbaby:latest
+    image: mei232/goodbaby:v0.1.6
     ports:
       - "8088:8088"
     environment:
       - TZ=Asia/Shanghai
+      - GIN_MODE=release
     restart: unless-stopped
     networks:
       - app-network
     volumes:
       - ./config.json:/app/config.json:ro
+      - ./tmp:/app/tmp
 
 networks:
   app-network:

static/css/style.css

@@ -5,45 +5,51 @@
 }
 
 body {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    background-color: #f8fafc;
+    color: #334155;
     min-height: 100vh;
     padding: 20px;
+    line-height: 1.6;
 }
 
 .container {
-    max-width: 800px;
+    max-width: 640px;
     margin: 0 auto;
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+    overflow: hidden;
 }
 
 header {
     text-align: center;
-    color: white;
-    margin-bottom: 30px;
+    background: #f1f5f9;
+    padding: 32px 24px;
+    border-bottom: 1px solid #e2e8f0;
 }
 
 header h1 {
-    font-size: 2.5rem;
-    margin-bottom: 10px;
-}
-
-header p {
-    font-size: 1.2rem;
-    opacity: 0.9;
+    font-size: 1.875rem;
+    font-weight: 600;
+    color: #1e293b;
+    letter-spacing: -0.025em;
 }
 
 .card {
-    background: rgba(255, 255, 255, 0.95);
-    border-radius: 15px;
-    padding: 25px;
-    margin-bottom: 25px;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
-    backdrop-filter: blur(10px);
+    padding: 32px;
+    border-bottom: 1px solid #e2e8f0;
+}
+
+.card:last-child {
+    border-bottom: none;
 }
 
 .card h2 {
-    color: #333;
-    margin-bottom: 20px;
+    color: #1e293b;
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-bottom: 24px;
     display: flex;
     align-items: center;
     gap: 10px;
@@ -52,143 +58,143 @@ header p {
 .form-group {
     display: flex;
     flex-direction: column;
-    gap: 15px;
+    gap: 16px;
 }
 
 .form-group label {
-    font-weight: 600;
-    color: #555;
+    font-weight: 500;
+    color: #334155;
+    font-size: 0.875rem;
 }
 
 .form-group input {
-    padding: 12px 15px;
-    border: 2px solid #ddd;
-    border-radius: 8px;
-    font-size: 16px;
-    transition: border-color 0.3s;
+    padding: 12px 16px;
+    border: 1px solid #cbd5e1;
+    border-radius: 6px;
+    font-size: 1rem;
+    transition: border-color 0.2s, box-shadow 0.2s;
+    background: #f8fafc;
 }
 
 .form-group input:focus {
     outline: none;
-    border-color: #667eea;
-}
-
-.btn-primary, .btn-secondary, .btn-danger {
-    padding: 12px 20px;
-    border: none;
-    border-radius: 8px;
-    font-size: 16px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.3s ease;
-}
-
-.btn-primary {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    color: white;
-}
-
-.btn-secondary {
-    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-    color: white;
-}
-
-.btn-danger {
-    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
-    color: white;
-    padding: 15px 30px;
-    font-size: 18px;
-}
-
-.btn-primary:hover, .btn-secondary:hover, .btn-danger:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+    border-color: #94a3b8;
+    box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.1);
 }
 
 .status-container {
-    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
 }
 
 .timer-display {
-    font-size: 3rem;
-    font-weight: 700;
-    color: #333;
-    margin: 20px 0;
-    font-family: 'Courier New', monospace;
+    font-size: 2rem;
+    font-weight: 600;
+    color: #1e293b;
+    font-family: monospace;
 }
 
 .progress-bar {
     width: 100%;
-    height: 20px;
-    background-color: #eee;
-    border-radius: 10px;
+    height: 8px;
+    background: #e2e8f0;
+    border-radius: 4px;
     overflow: hidden;
-    margin: 20px 0;
 }
 
 .progress-fill {
     height: 100%;
-    background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
+    background: #3b82f6;
     width: 0%;
-    transition: width 0.5s ease;
+    transition: width 0.3s ease;
 }
 
 .controls {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+}
+
+.btn-primary, .btn-secondary, .btn-danger {
+    padding: 12px 24px;
+    border: none;
+    border-radius: 6px;
+    font-size: 0.95rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s;
     text-align: center;
 }
 
+.btn-primary {
+    background: #3b82f6;
+    color: white;
+}
+
+.btn-primary:hover {
+    background: #2563eb;
+}
+
+.btn-secondary {
+    background: #64748b;
+    color: white;
+}
+
+.btn-secondary:hover {
+    background: #475569;
+}
+
+.btn-danger {
+    background: #ef4444;
+    color: white;
+    padding: 12px 24px;
+    font-weight: 500;
+}
+
+.btn-danger:hover {
+    background: #dc2626;
+}
+
 .hint {
-    color: #666;
-    margin-top: 15px;
-    font-style: italic;
+    font-size: 0.875rem;
+    color: #64748b;
+    margin-top: 4px;
 }
 
 footer {
     text-align: center;
-    color: white;
-    margin-top: 30px;
-    opacity: 0.8;
+    padding: 24px;
+    color: #64748b;
+    font-size: 0.875rem;
+    background: #f1f5f9;
 }
 
 .notification {
     position: fixed;
     top: 20px;
     right: 20px;
-    padding: 15px 25px;
-    border-radius: 8px;
+    padding: 12px 20px;
+    border-radius: 6px;
     color: white;
-    font-weight: 600;
-    transform: translateX(400px);
+    font-size: 0.875rem;
+    transform: translateX(200%);
     transition: transform 0.3s ease;
     z-index: 1000;
+    max-width: 300px;
+    word-wrap: break-word;
+}
+
+.notification.success {
+    background: #22c55e;
+}
+
+.notification.error {
+    background: #ef4444;
 }
 
 .notification.show {
     transform: translateX(0);
-}
-
-.notification.success {
-    background: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%);
-}
-
-.notification.error {
-    background: linear-gradient(135deg, #ff416c 0%, #ff4b2b 100%);
-}
-
-@media (max-width: 768px) {
-    .container {
-        padding: 10px;
-    }
-    
-    header h1 {
-        font-size: 2rem;
-    }
-    
-    .card {
-        padding: 20px;
-    }
-    
-    .timer-display {
-        font-size: 2rem;
-    }
 }

templates/index.html

@@ -9,21 +9,21 @@
 <body>
     <div class="container">
         <header>
-            <h1>GoodBaby控制面板</h1>
+            <h1>GoodBaby</h1>
         </header>
 
         <main>
             <section class="card">
-                <h2>🔐 身份验证</h2>
+                <h2>访问设置</h2>
                 <div class="form-group">
-                    <label for="secret">请输入密钥:</label>
+                    <label for="secret">密钥</label>
                     <input type="password" id="secret" placeholder="输入您的访问密钥">
-                    <button id="save-secret" class="btn-secondary">保存密钥</button>
+                    <button id="save-secret" class="btn-secondary">保存</button>
                 </div>
             </section>
 
             <section class="card">
-                <h2>📊 定时器状态</h2>
+                <h2>状态信息</h2>
                 <div class="status-container">
                     <div class="timer-display">
                         <span id="remaining-time">--:--:--</span>
@@ -31,21 +31,21 @@
                     <div class="progress-bar">
                         <div id="progress-fill" class="progress-fill"></div>
                     </div>
-                    <button id="refresh-status" class="btn-primary">🔄 刷新状态</button>
+                    <button id="refresh-status" class="btn-primary">刷新状态</button>
                 </div>
             </section>
 
             <section class="card">
-                <h2>⚡ 操作控制</h2>
+                <h2>执行操作</h2>
                 <div class="controls">
-                    <button id="send-signal" class="btn-danger">📡 发送信号</button>
+                    <button id="send-signal" class="btn-danger">发送信号</button>
                     <p class="hint">点击按钮重置定时器</p>
                 </div>
             </section>
         </main>
 
         <footer>
-            <p>© 2025 GoodBaby</p>
+            <p>© 2026 GoodBaby</p>
         </footer>
     </div>