🔐 身份验证
+访问设置
📊 定时器状态
+状态信息
⚡ 操作控制
+执行操作
点击按钮重置定时器
diff --git a/config.example.json b/config.example.json index 9c86626..d9b668d 100644 --- a/config.example.json +++ b/config.example.json @@ -7,7 +7,7 @@ "cause_stop": "自杀" }, "signal_secret": "", - "debug": true, + "debug": false, "disconnect_duration": 5, "enable_qq": true, "cat_bot_url": "", diff --git a/static/css/style.css b/static/css/style.css index 0bf8938..cb4ebb8 100644 --- a/static/css/style.css +++ b/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; - } } \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index df0e562..7c2753e 100644 --- a/templates/index.html +++ b/templates/index.html @@ -9,21 +9,21 @@
点击按钮重置定时器