你çnepiedg
cf62ed1a3f
- Improved onboarding flow by adding user guidance for mode selection - Updated homepage behavior to better reflect user preferences - Refined UI elements for a more intuitive navigation experience
792 lines
42 KiB
HTML
792 lines
42 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
<title>戒烟助手 Pro - 高级版</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'PingFang SC', sans-serif;
|
||
background: #000;
|
||
-webkit-font-smoothing: antialiased;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.prototype-container {
|
||
max-width: 390px;
|
||
margin: 0 auto;
|
||
background: #000;
|
||
min-height: 100vh;
|
||
position: relative;
|
||
box-shadow: 0 0 60px rgba(0,0,0,0.5);
|
||
}
|
||
|
||
/* 毛玻璃导航栏 */
|
||
.nav-tabs {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
max-width: 390px;
|
||
width: 100%;
|
||
display: flex;
|
||
background: rgba(28, 28, 30, 0.8);
|
||
backdrop-filter: blur(40px) saturate(180%);
|
||
-webkit-backdrop-filter: blur(40px) saturate(180%);
|
||
border-top: 0.5px solid rgba(255,255,255,0.1);
|
||
padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
|
||
z-index: 100;
|
||
}
|
||
|
||
.nav-tab {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 6px 0;
|
||
cursor: pointer;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
position: relative;
|
||
}
|
||
|
||
.nav-tab.active .nav-icon {
|
||
transform: scale(1.1);
|
||
filter: brightness(1.2);
|
||
}
|
||
|
||
.nav-icon {
|
||
font-size: 26px;
|
||
margin-bottom: 2px;
|
||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
filter: grayscale(100%);
|
||
}
|
||
|
||
.nav-tab.active .nav-icon {
|
||
filter: grayscale(0%);
|
||
}
|
||
|
||
.nav-label {
|
||
font-size: 10px;
|
||
color: rgba(255,255,255,0.5);
|
||
font-weight: 500;
|
||
letter-spacing: 0.3px;
|
||
transition: color 0.3s;
|
||
}
|
||
|
||
.nav-tab.active .nav-label {
|
||
color: rgba(255,255,255,0.95);
|
||
}
|
||
|
||
/* 页面容器 */
|
||
.page {
|
||
display: none;
|
||
padding-bottom: 90px;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.page.active {
|
||
display: block;
|
||
animation: pageSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
@keyframes pageSlideIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
/* 高级卡片 */
|
||
.premium-card {
|
||
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
|
||
backdrop-filter: blur(20px) saturate(180%);
|
||
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
||
border-radius: 24px;
|
||
padding: 24px;
|
||
margin: 16px 20px;
|
||
border: 1px solid rgba(255,255,255,0.1);
|
||
box-shadow: 0 8px 32px rgba(0,0,0,0.3),
|
||
inset 0 1px 0 rgba(255,255,255,0.1);
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
.premium-card:active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
/* 高级按钮 */
|
||
.premium-btn {
|
||
padding: 16px 32px;
|
||
border-radius: 16px;
|
||
border: none;
|
||
font-size: 17px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
letter-spacing: 0.3px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.premium-btn::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: -100%;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
|
||
transition: left 0.5s;
|
||
}
|
||
|
||
.premium-btn:hover::before {
|
||
left: 100%;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: linear-gradient(135deg, #00D4AA 0%, #00B894 100%);
|
||
color: white;
|
||
box-shadow: 0 8px 24px rgba(0, 212, 170, 0.4);
|
||
}
|
||
|
||
.btn-primary:active {
|
||
transform: scale(0.96);
|
||
box-shadow: 0 4px 12px rgba(0, 212, 170, 0.3);
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: rgba(255,255,255,0.1);
|
||
color: rgba(255,255,255,0.9);
|
||
border: 1px solid rgba(255,255,255,0.2);
|
||
}
|
||
|
||
.btn-danger {
|
||
background: linear-gradient(135deg, #FF6B6B 0%, #EE5A6F 100%);
|
||
color: white;
|
||
box-shadow: 0 8px 24px rgba(255, 107, 107, 0.4);
|
||
}
|
||
|
||
/* 文字样式 */
|
||
.text-primary {
|
||
color: rgba(255,255,255,0.95);
|
||
}
|
||
|
||
.text-secondary {
|
||
color: rgba(255,255,255,0.6);
|
||
}
|
||
|
||
.text-tertiary {
|
||
color: rgba(255,255,255,0.4);
|
||
}
|
||
|
||
/* 渐变文字 */
|
||
.gradient-text {
|
||
background: linear-gradient(135deg, #00D4AA 0%, #00F5D4 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="prototype-container">
|
||
<!-- 模式选择页 -->
|
||
<div id="page-mode-select" class="page active">
|
||
<div style="background: linear-gradient(180deg, #000 0%, #0a0a0a 100%); min-height: 100vh; padding: 60px 20px 40px; position: relative; overflow: hidden;">
|
||
<!-- 背景装饰 -->
|
||
<div style="position: absolute; top: -100px; right: -100px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(0,212,170,0.15) 0%, transparent 70%); border-radius: 50%; filter: blur(60px);"></div>
|
||
<div style="position: absolute; bottom: -150px; left: -100px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(0,245,212,0.1) 0%, transparent 70%); border-radius: 50%; filter: blur(80px);"></div>
|
||
|
||
<div style="text-align: center; margin-top: 40px; position: relative; z-index: 1;">
|
||
<div style="font-size: 56px; margin-bottom: 16px; filter: drop-shadow(0 4px 12px rgba(0,212,170,0.3));">🚭</div>
|
||
<h1 style="font-size: 36px; font-weight: 700; color: #fff; margin-bottom: 12px; letter-spacing: -0.5px;">选择你的戒烟方式</h1>
|
||
<p style="color: rgba(255,255,255,0.6); font-size: 16px; font-weight: 500;">科学方法，个性化定制</p>
|
||
</div>
|
||
|
||
<div style="margin-top: 80px; position: relative; z-index: 1;">
|
||
<!-- 戒烟打卡模式 -->
|
||
<div class="premium-card" style="margin-bottom: 24px; cursor: pointer;" onclick="selectMode('quit')">
|
||
<div style="display: flex; align-items: flex-start;">
|
||
<div style="font-size: 48px; margin-right: 20px; filter: drop-shadow(0 2px 8px rgba(0,212,170,0.3));">✅</div>
|
||
<div style="flex: 1;">
|
||
<h3 style="font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 12px; letter-spacing: -0.3px;">戒烟打卡模式</h3>
|
||
<p style="font-size: 15px; color: rgba(255,255,255,0.7); line-height: 1.6; margin-bottom: 16px; font-weight: 500;">
|
||
适合已经决定戒烟的你<br>
|
||
记录戒烟天数，每天打卡激励
|
||
</p>
|
||
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
|
||
<span style="background: rgba(79, 70, 229, 0.2); color: #A5B4FC; padding: 6px 14px; border-radius: 12px; font-size: 13px; font-weight: 600; border: 1px solid rgba(79, 70, 229, 0.3);">简单直接</span>
|
||
<span style="background: rgba(79, 70, 229, 0.2); color: #A5B4FC; padding: 6px 14px; border-radius: 12px; font-size: 13px; font-weight: 600; border: 1px solid rgba(79, 70, 229, 0.3);">每日激励</span>
|
||
<span style="background: rgba(79, 70, 229, 0.2); color: #A5B4FC; padding: 6px 14px; border-radius: 12px; font-size: 13px; font-weight: 600; border: 1px solid rgba(79, 70, 229, 0.3);">成就感强</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 记录减量模式 -->
|
||
<div class="premium-card" style="cursor: pointer;" onclick="selectMode('record')">
|
||
<div style="display: flex; align-items: flex-start;">
|
||
<div style="font-size: 48px; margin-right: 20px; filter: drop-shadow(0 2px 8px rgba(0,212,170,0.3));">📊</div>
|
||
<div style="flex: 1;">
|
||
<h3 style="font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 12px; letter-spacing: -0.3px;">记录减量模式</h3>
|
||
<p style="font-size: 15px; color: rgba(255,255,255,0.7); line-height: 1.6; margin-bottom: 16px; font-weight: 500;">
|
||
适合想逐步减少吸烟的你<br>
|
||
记录每次抽烟，AI 帮你制定递减计划
|
||
</p>
|
||
<div style="display: flex; gap: 10px; flex-wrap: wrap;">
|
||
<span style="background: rgba(0, 212, 170, 0.2); color: #6EE7B7; padding: 6px 14px; border-radius: 12px; font-size: 13px; font-weight: 600; border: 1px solid rgba(0, 212, 170, 0.3);">科学递减</span>
|
||
<span style="background: rgba(0, 212, 170, 0.2); color: #6EE7B7; padding: 6px 14px; border-radius: 12px; font-size: 13px; font-weight: 600; border: 1px solid rgba(0, 212, 170, 0.3);">数据分析</span>
|
||
<span style="background: rgba(0, 212, 170, 0.2); color: #6EE7B7; padding: 6px 14px; border-radius: 12px; font-size: 13px; font-weight: 600; border: 1px solid rgba(0, 212, 170, 0.3);">AI 指导</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="margin-top: 60px; text-align: center; position: relative; z-index: 1;">
|
||
<p style="font-size: 13px; color: rgba(255,255,255,0.4); font-weight: 500;">💡 选择后可在个人中心随时切换</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 个人中心页 -->
|
||
<div id="page-profile" class="page">
|
||
<div style="background: linear-gradient(180deg, #000 0%, #0a0a0a 100%); min-height: 100vh; position: relative; overflow: hidden;">
|
||
<div style="position: absolute; top: 0; right: -80px; width: 250px; height: 250px; background: radial-gradient(circle, rgba(0,212,170,0.1) 0%, transparent 70%); border-radius: 50%; filter: blur(70px);"></div>
|
||
|
||
<!-- 用户信息 -->
|
||
<div style="padding: 60px 20px 32px; position: relative; z-index: 1;">
|
||
<div style="display: flex; align-items: center;">
|
||
<div style="width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #00D4AA, #00B894); display: flex; align-items: center; justify-content: center; font-size: 36px; color: white; margin-right: 20px; box-shadow: 0 8px 24px rgba(0,212,170,0.3);">
|
||
👤
|
||
</div>
|
||
<div>
|
||
<div style="font-size: 28px; font-weight: 700; color: #fff; letter-spacing: -0.5px;">张三</div>
|
||
<div style="font-size: 14px; color: rgba(255,255,255,0.6); margin-top: 6px; font-weight: 600;">已坚持 15 天</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 模式切换 -->
|
||
<div class="premium-card">
|
||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||
<div>
|
||
<div style="font-size: 17px; font-weight: 700; color: #fff;">当前模式</div>
|
||
<div style="font-size: 14px; color: rgba(255,255,255,0.6); margin-top: 6px; font-weight: 500;">戒烟打卡模式</div>
|
||
</div>
|
||
<button class="premium-btn btn-secondary" style="padding: 10px 20px; font-size: 14px; border-radius: 12px;" onclick="loadPage('mode-select')">
|
||
切换模式
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 菜单列表 -->
|
||
<div class="premium-card">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.05);">
|
||
<div style="display: flex; align-items: center;">
|
||
<div style="font-size: 24px; margin-right: 16px;">🎯</div>
|
||
<div style="font-size: 16px; color: #fff; font-weight: 600;">目标设定</div>
|
||
</div>
|
||
<div style="color: rgba(255,255,255,0.3); font-size: 20px;">›</div>
|
||
</div>
|
||
<div style="display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.05);">
|
||
<div style="display: flex; align-items: center;">
|
||
<div style="font-size: 24px; margin-right: 16px;">🔔</div>
|
||
<div style="font-size: 16px; color: #fff; font-weight: 600;">提醒设置</div>
|
||
</div>
|
||
<div style="color: rgba(255,255,255,0.3); font-size: 20px;">›</div>
|
||
</div>
|
||
<div style="display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.05);">
|
||
<div style="display: flex; align-items: center;">
|
||
<div style="font-size: 24px; margin-right: 16px;">📊</div>
|
||
<div style="font-size: 16px; color: #fff; font-weight: 600;">数据导出</div>
|
||
</div>
|
||
<div style="color: rgba(255,255,255,0.3); font-size: 20px;">›</div>
|
||
</div>
|
||
<div style="display: flex; justify-content: space-between; align-items: center; padding: 16px 0;">
|
||
<div style="display: flex; align-items: center;">
|
||
<div style="font-size: 24px; margin-right: 16px;">⚙️</div>
|
||
<div style="font-size: 16px; color: #fff; font-weight: 600;">基础设置</div>
|
||
</div>
|
||
<div style="color: rgba(255,255,255,0.3); font-size: 20px;">›</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 关于 -->
|
||
<div class="premium-card">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.05);">
|
||
<div style="display: flex; align-items: center;">
|
||
<div style="font-size: 24px; margin-right: 16px;">❓</div>
|
||
<div style="font-size: 16px; color: #fff; font-weight: 600;">使用帮助</div>
|
||
</div>
|
||
<div style="color: rgba(255,255,255,0.3); font-size: 20px;">›</div>
|
||
</div>
|
||
<div style="display: flex; justify-content: space-between; align-items: center; padding: 16px 0;">
|
||
<div style="display: flex; align-items: center;">
|
||
<div style="font-size: 24px; margin-right: 16px;">ℹ️</div>
|
||
<div style="font-size: 16px; color: #fff; font-weight: 600;">关于我们</div>
|
||
</div>
|
||
<div style="display: flex; align-items: center; gap: 12px;">
|
||
<div style="font-size: 13px; color: rgba(255,255,255,0.4); font-weight: 600;">v1.0.0</div>
|
||
<div style="color: rgba(255,255,255,0.3); font-size: 20px;">›</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 记录页 -->
|
||
<div id="page-logs" class="page">
|
||
<div style="background: linear-gradient(180deg, #000 0%, #0a0a0a 100%); min-height: 100vh; position: relative; overflow: hidden;">
|
||
<div style="padding: 60px 20px 20px;">
|
||
<div style="font-size: 32px; font-weight: 700; color: #fff; letter-spacing: -0.5px;">历史记录</div>
|
||
</div>
|
||
|
||
<!-- 筛选标签 -->
|
||
<div style="padding: 0 20px; margin-top: 24px;">
|
||
<div style="display: flex; gap: 10px; background: rgba(255,255,255,0.05); padding: 4px; border-radius: 14px; backdrop-filter: blur(20px);">
|
||
<button class="premium-btn btn-primary" style="padding: 8px 20px; font-size: 14px; border-radius: 10px;">全部</button>
|
||
<button class="premium-btn btn-secondary" style="padding: 8px 20px; font-size: 14px; border-radius: 10px;">已抽烟</button>
|
||
<button class="premium-btn btn-secondary" style="padding: 8px 20px; font-size: 14px; border-radius: 10px;">已忍住</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 今天 -->
|
||
<div style="padding: 24px 20px 12px;">
|
||
<div style="font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.5); letter-spacing: 0.5px;">今天 3月24日</div>
|
||
</div>
|
||
|
||
<div class="premium-card" style="margin-top: 8px; border-left: 3px solid #00D4AA;">
|
||
<div style="display: flex; justify-content: space-between; align-items: start;">
|
||
<div style="flex: 1;">
|
||
<div style="display: flex; align-items: center; margin-bottom: 8px;">
|
||
<div style="font-size: 22px; margin-right: 12px;">💪</div>
|
||
<div style="font-size: 17px; font-weight: 700; color: #00D4AA;">想抽忍住了</div>
|
||
</div>
|
||
<div style="font-size: 14px; color: rgba(255,255,255,0.6); font-weight: 500;">14:30</div>
|
||
<div style="font-size: 13px; color: rgba(255,255,255,0.4); margin-top: 6px; font-weight: 500;">距上次 2小时15分</div>
|
||
</div>
|
||
<div style="display: flex; gap: 8px;">
|
||
<button style="padding: 6px 14px; background: rgba(79,70,229,0.2); color: #A5B4FC; border: 1px solid rgba(79,70,229,0.3); border-radius: 10px; font-size: 13px; cursor: pointer; font-weight: 600;">编辑</button>
|
||
<button style="padding: 6px 14px; background: rgba(255,107,107,0.2); color: #FCA5A5; border: 1px solid rgba(255,107,107,0.3); border-radius: 10px; font-size: 13px; cursor: pointer; font-weight: 600;">删除</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="premium-card" style="margin-top: 12px; border-left: 3px solid #FF6B6B;">
|
||
<div style="display: flex; justify-content: space-between; align-items: start;">
|
||
<div style="flex: 1;">
|
||
<div style="display: flex; align-items: center; margin-bottom: 8px;">
|
||
<div style="font-size: 22px; margin-right: 12px;">🚬</div>
|
||
<div style="font-size: 17px; font-weight: 700; color: #FF6B6B;">记录抽烟</div>
|
||
</div>
|
||
<div style="font-size: 14px; color: rgba(255,255,255,0.6); font-weight: 500;">12:15 · 3支 · 等级2</div>
|
||
<div style="font-size: 13px; color: rgba(255,255,255,0.4); margin-top: 6px; font-weight: 500;">压力大</div>
|
||
<div style="font-size: 13px; color: rgba(255,255,255,0.4); margin-top: 4px; font-weight: 500;">距上次 1小时30分</div>
|
||
</div>
|
||
<div style="display: flex; gap: 8px;">
|
||
<button style="padding: 6px 14px; background: rgba(79,70,229,0.2); color: #A5B4FC; border: 1px solid rgba(79,70,229,0.3); border-radius: 10px; font-size: 13px; cursor: pointer; font-weight: 600;">编辑</button>
|
||
<button style="padding: 6px 14px; background: rgba(255,107,107,0.2); color: #FCA5A5; border: 1px solid rgba(255,107,107,0.3); border-radius: 10px; font-size: 13px; cursor: pointer; font-weight: 600;">删除</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 昨天 -->
|
||
<div style="padding: 24px 20px 12px;">
|
||
<div style="font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.5); letter-spacing: 0.5px;">昨天 3月23日</div>
|
||
</div>
|
||
|
||
<div class="premium-card" style="margin-top: 8px; border-left: 3px solid #FF6B6B;">
|
||
<div style="display: flex; justify-content: space-between; align-items: start;">
|
||
<div style="flex: 1;">
|
||
<div style="display: flex; align-items: center; margin-bottom: 8px;">
|
||
<div style="font-size: 22px; margin-right: 12px;">🚬</div>
|
||
<div style="font-size: 17px; font-weight: 700; color: #FF6B6B;">记录抽烟</div>
|
||
</div>
|
||
<div style="font-size: 14px; color: rgba(255,255,255,0.6); font-weight: 500;">21:45 · 2支 · 等级1</div>
|
||
<div style="font-size: 13px; color: rgba(255,255,255,0.4); margin-top: 6px; font-weight: 500;">饭后习惯</div>
|
||
</div>
|
||
<div style="display: flex; gap: 8px;">
|
||
<button style="padding: 6px 14px; background: rgba(79,70,229,0.2); color: #A5B4FC; border: 1px solid rgba(79,70,229,0.3); border-radius: 10px; font-size: 13px; cursor: pointer; font-weight: 600;">编辑</button>
|
||
<button style="padding: 6px 14px; background: rgba(255,107,107,0.2); color: #FCA5A5; border: 1px solid rgba(255,107,107,0.3); border-radius: 10px; font-size: 13px; cursor: pointer; font-weight: 600;">删除</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AI助手页 -->
|
||
<div id="page-ai" class="page">
|
||
<div style="background: linear-gradient(180deg, #000 0%, #0a0a0a 100%); min-height: 100vh; position: relative; overflow: hidden;">
|
||
<div style="position: absolute; top: 150px; left: -60px; width: 220px; height: 220px; background: radial-gradient(circle, rgba(79,70,229,0.1) 0%, transparent 70%); border-radius: 50%; filter: blur(70px);"></div>
|
||
|
||
<div style="padding: 60px 20px 20px;">
|
||
<div style="font-size: 32px; font-weight: 700; color: #fff; letter-spacing: -0.5px;">AI 戒烟助手</div>
|
||
</div>
|
||
|
||
<!-- 减量计划 -->
|
||
<div class="premium-card" style="margin-top: 24px; background: linear-gradient(135deg, rgba(79,70,229,0.15) 0%, rgba(99,102,241,0.1) 100%); border: 1px solid rgba(79,70,229,0.3);">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
|
||
<div style="font-size: 20px; font-weight: 700; color: #fff;">30天递减计划</div>
|
||
<div style="font-size: 13px; color: #818CF8; font-weight: 700; background: rgba(79,70,229,0.2); padding: 6px 12px; border-radius: 8px;">第15天</div>
|
||
</div>
|
||
<div style="font-size: 14px; color: rgba(255,255,255,0.7); margin-bottom: 16px; font-weight: 600;">阶段2 - 减量期</div>
|
||
<div style="background: rgba(0,0,0,0.3); height: 10px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1);">
|
||
<div style="width: 50%; height: 100%; background: linear-gradient(90deg, #818CF8 0%, #6366F1 100%); box-shadow: 0 0 12px rgba(129,140,248,0.5);"></div>
|
||
</div>
|
||
<div style="margin-top: 16px; font-size: 13px; color: #A5B4FC; font-weight: 600;">🎯 进度 50% · 继续加油！</div>
|
||
</div>
|
||
|
||
<!-- AI 每日分析 -->
|
||
<div class="premium-card">
|
||
<div style="display: flex; align-items: center; margin-bottom: 20px;">
|
||
<div style="font-size: 28px; margin-right: 12px;">🤖</div>
|
||
<div style="font-size: 20px; font-weight: 700; color: #fff;">今日 AI 分析</div>
|
||
</div>
|
||
<div style="background: rgba(0,0,0,0.3); padding: 20px; border-radius: 16px; border-left: 3px solid #00D4AA;">
|
||
<div style="font-size: 15px; color: rgba(255,255,255,0.9); line-height: 1.7; font-weight: 500;">
|
||
<strong style="color: #00D4AA;">昨日表现：</strong>你昨天成功控制在5支以内，比目标少了1支，做得很棒！<br><br>
|
||
<strong style="color: #00D4AA;">今日建议：</strong>今天目标4支。建议在下午3点和晚上8点这两个高峰时段，用喝水或散步替代。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 今日任务 -->
|
||
<div class="premium-card">
|
||
<div style="font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 20px;">今日任务清单</div>
|
||
<div style="display: flex; flex-direction: column; gap: 12px;">
|
||
<div style="display: flex; align-items: center; padding: 16px; background: rgba(0,212,170,0.1); border-radius: 14px; border: 1px solid rgba(0,212,170,0.2);">
|
||
<div style="font-size: 24px; margin-right: 16px;">✅</div>
|
||
<div style="flex: 1;">
|
||
<div style="font-size: 15px; color: rgba(255,255,255,0.5); text-decoration: line-through; font-weight: 500;">早起喝一杯温水</div>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex; align-items: center; padding: 16px; background: rgba(255,255,255,0.05); border-radius: 14px; border: 1px solid rgba(255,255,255,0.1);">
|
||
<div style="font-size: 24px; margin-right: 16px;">⭕</div>
|
||
<div style="flex: 1;">
|
||
<div style="font-size: 15px; color: #fff; font-weight: 500;">下午散步15分钟</div>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex; align-items: center; padding: 16px; background: rgba(255,255,255,0.05); border-radius: 14px; border: 1px solid rgba(255,255,255,0.1);">
|
||
<div style="font-size: 24px; margin-right: 16px;">⭕</div>
|
||
<div style="flex: 1;">
|
||
<div style="font-size: 15px; color: #fff; font-weight: 500;">阅读戒烟激励文章</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 统计页 -->
|
||
<div id="page-stats" class="page">
|
||
<div style="background: linear-gradient(180deg, #000 0%, #0a0a0a 100%); min-height: 100vh; position: relative; overflow: hidden;">
|
||
<div style="position: absolute; top: 100px; right: -80px; width: 250px; height: 250px; background: radial-gradient(circle, rgba(0,212,170,0.08) 0%, transparent 70%); border-radius: 50%; filter: blur(70px);"></div>
|
||
|
||
<div style="padding: 60px 20px 20px;">
|
||
<div style="font-size: 32px; font-weight: 700; color: #fff; letter-spacing: -0.5px;">统计分析</div>
|
||
</div>
|
||
|
||
<!-- 时间范围切换 -->
|
||
<div style="padding: 0 20px; margin-top: 24px;">
|
||
<div style="display: flex; gap: 10px; background: rgba(255,255,255,0.05); padding: 4px; border-radius: 14px; backdrop-filter: blur(20px);">
|
||
<button class="premium-btn btn-primary" style="flex: 1; padding: 10px; font-size: 15px; border-radius: 10px;">周</button>
|
||
<button class="premium-btn btn-secondary" style="flex: 1; padding: 10px; font-size: 15px; border-radius: 10px;">月</button>
|
||
<button class="premium-btn btn-secondary" style="flex: 1; padding: 10px; font-size: 15px; border-radius: 10px;">年</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 趋势图 -->
|
||
<div class="premium-card" style="margin-top: 20px;">
|
||
<div style="font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 20px;">本周吸烟趋势</div>
|
||
<div style="height: 200px; background: rgba(0,0,0,0.3); border-radius: 16px; display: flex; align-items: flex-end; justify-content: space-around; padding: 24px 12px 12px; border: 1px solid rgba(255,255,255,0.05);">
|
||
<div style="text-align: center;">
|
||
<div style="width: 36px; height: 140px; background: linear-gradient(180deg, #00D4AA 0%, #00B894 100%); border-radius: 8px; margin-bottom: 10px; box-shadow: 0 4px 12px rgba(0,212,170,0.3);"></div>
|
||
<div style="font-size: 11px; color: rgba(255,255,255,0.5); font-weight: 600;">周一</div>
|
||
</div>
|
||
<div style="text-align: center;">
|
||
<div style="width: 36px; height: 120px; background: linear-gradient(180deg, #00D4AA 0%, #00B894 100%); border-radius: 8px; margin-bottom: 10px; box-shadow: 0 4px 12px rgba(0,212,170,0.3);"></div>
|
||
<div style="font-size: 11px; color: rgba(255,255,255,0.5); font-weight: 600;">周二</div>
|
||
</div>
|
||
<div style="text-align: center;">
|
||
<div style="width: 36px; height: 95px; background: linear-gradient(180deg, #00D4AA 0%, #00B894 100%); border-radius: 8px; margin-bottom: 10px; box-shadow: 0 4px 12px rgba(0,212,170,0.3);"></div>
|
||
<div style="font-size: 11px; color: rgba(255,255,255,0.5); font-weight: 600;">周三</div>
|
||
</div>
|
||
<div style="text-align: center;">
|
||
<div style="width: 36px; height: 105px; background: linear-gradient(180deg, #00D4AA 0%, #00B894 100%); border-radius: 8px; margin-bottom: 10px; box-shadow: 0 4px 12px rgba(0,212,170,0.3);"></div>
|
||
<div style="font-size: 11px; color: rgba(255,255,255,0.5); font-weight: 600;">周四</div>
|
||
</div>
|
||
<div style="text-align: center;">
|
||
<div style="width: 36px; height: 70px; background: linear-gradient(180deg, #00D4AA 0%, #00B894 100%); border-radius: 8px; margin-bottom: 10px; box-shadow: 0 4px 12px rgba(0,212,170,0.3);"></div>
|
||
<div style="font-size: 11px; color: rgba(255,255,255,0.5); font-weight: 600;">周五</div>
|
||
</div>
|
||
<div style="text-align: center;">
|
||
<div style="width: 36px; height: 60px; background: linear-gradient(180deg, #00D4AA 0%, #00B894 100%); border-radius: 8px; margin-bottom: 10px; box-shadow: 0 4px 12px rgba(0,212,170,0.3);"></div>
|
||
<div style="font-size: 11px; color: rgba(255,255,255,0.5); font-weight: 600;">周六</div>
|
||
</div>
|
||
<div style="text-align: center;">
|
||
<div style="width: 36px; height: 48px; background: linear-gradient(180deg, #00F5D4 0%, #00D4AA 100%); border-radius: 8px; margin-bottom: 10px; box-shadow: 0 4px 16px rgba(0,245,212,0.4);"></div>
|
||
<div style="font-size: 11px; color: #00D4AA; font-weight: 700;">今天</div>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between;">
|
||
<div>
|
||
<div style="font-size: 13px; color: rgba(255,255,255,0.5); font-weight: 600;">日均吸烟</div>
|
||
<div style="font-size: 28px; font-weight: 800; color: #fff; margin-top: 6px;">4.2 <span style="font-size: 16px; color: rgba(255,255,255,0.5);">支</span></div>
|
||
</div>
|
||
<div style="text-align: right;">
|
||
<div style="font-size: 13px; color: rgba(255,255,255,0.5); font-weight: 600;">较上周</div>
|
||
<div style="font-size: 28px; font-weight: 800; color: #00D4AA; margin-top: 6px;">-32%</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 健康与储蓄 -->
|
||
<div class="premium-card">
|
||
<div style="font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 20px;">健康收益</div>
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
|
||
<div style="background: rgba(0,212,170,0.1); padding: 24px; border-radius: 16px; text-align: center; border: 1px solid rgba(0,212,170,0.2);">
|
||
<div style="font-size: 13px; color: rgba(255,255,255,0.6); font-weight: 600;">节省金额</div>
|
||
<div style="font-size: 32px; font-weight: 800; color: #00D4AA; margin: 12px 0;">¥680</div>
|
||
<div style="font-size: 12px; color: #6EE7B7; font-weight: 600;">本周 ¥120</div>
|
||
</div>
|
||
<div style="background: rgba(251,191,36,0.1); padding: 24px; border-radius: 16px; text-align: center; border: 1px solid rgba(251,191,36,0.2);">
|
||
<div style="font-size: 13px; color: rgba(255,255,255,0.6); font-weight: 600;">肺功能恢复</div>
|
||
<div style="font-size: 32px; font-weight: 800; color: #FBBF24; margin: 12px 0;">28%</div>
|
||
<div style="font-size: 12px; color: #FCD34D; font-weight: 600;">持续改善中</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 成就 -->
|
||
<div class="premium-card">
|
||
<div style="font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 20px;">我的成就</div>
|
||
<div style="display: flex; gap: 16px;">
|
||
<div style="flex: 1; background: rgba(79,70,229,0.1); padding: 20px; border-radius: 16px; text-align: center; border: 1px solid rgba(79,70,229,0.2);">
|
||
<div style="font-size: 32px; margin-bottom: 8px;">🔥</div>
|
||
<div style="font-size: 28px; font-weight: 800; color: #818CF8;">15</div>
|
||
<div style="font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 6px; font-weight: 600;">连续记录</div>
|
||
</div>
|
||
<div style="flex: 1; background: rgba(0,212,170,0.1); padding: 20px; border-radius: 16px; text-align: center; border: 1px solid rgba(0,212,170,0.2);">
|
||
<div style="font-size: 32px; margin-bottom: 8px;">💪</div>
|
||
<div style="font-size: 28px; font-weight: 800; color: #00D4AA;">42</div>
|
||
<div style="font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 6px; font-weight: 600;">已拒绝</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 记录减量模式首页 -->
|
||
<div id="page-home-record" class="page">
|
||
<div style="background: linear-gradient(180deg, #000 0%, #0a0a0a 100%); min-height: 100vh; position: relative; overflow: hidden;">
|
||
<div style="position: absolute; top: 0; left: -50px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(0,212,170,0.1) 0%, transparent 70%); border-radius: 50%; filter: blur(60px);"></div>
|
||
|
||
<div style="padding: 60px 20px 20px; position: relative; z-index: 1;">
|
||
<div style="font-size: 17px; color: rgba(255,255,255,0.6); margin-bottom: 4px; font-weight: 500;">早上好 👋</div>
|
||
<div style="font-size: 32px; font-weight: 700; color: #fff; letter-spacing: -0.5px;">张三</div>
|
||
</div>
|
||
|
||
<!-- AI 提示卡片 -->
|
||
<div class="premium-card" style="margin-top: 24px; background: linear-gradient(135deg, rgba(251,191,36,0.15) 0%, rgba(245,158,11,0.1) 100%); border: 1px solid rgba(251,191,36,0.3);">
|
||
<div style="display: flex; align-items: start;">
|
||
<div style="font-size: 28px; margin-right: 16px;">💡</div>
|
||
<div style="flex: 1;">
|
||
<div style="font-size: 15px; color: rgba(255,255,255,0.9); line-height: 1.6; font-weight: 500;">
|
||
发现你在下午3-5点容易抽烟，建议这个时段多喝水或散步
|
||
</div>
|
||
</div>
|
||
<div style="font-size: 24px; color: rgba(255,255,255,0.4); cursor: pointer;">×</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 计时器 -->
|
||
<div class="premium-card" style="text-align: center; padding: 36px 24px;">
|
||
<div style="font-size: 14px; color: rgba(255,255,255,0.6); margin-bottom: 16px; font-weight: 600; letter-spacing: 1px;">距上次抽烟</div>
|
||
<div class="gradient-text" style="font-size: 56px; font-weight: 800; font-family: 'SF Mono', 'Courier New', monospace; letter-spacing: 2px;">
|
||
02:34:18
|
||
</div>
|
||
<div style="margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1);">
|
||
<div style="font-size: 13px; color: rgba(255,255,255,0.5); margin-bottom: 8px; font-weight: 600;">下次建议时间</div>
|
||
<div style="font-size: 20px; font-weight: 700; color: #fff;">14:30</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 今日统计 -->
|
||
<div class="premium-card">
|
||
<div style="font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 20px;">今日数据</div>
|
||
<div style="display: flex; justify-content: space-between; gap: 16px;">
|
||
<div style="flex: 1; background: rgba(255,107,107,0.1); padding: 20px; border-radius: 16px; border: 1px solid rgba(255,107,107,0.2);">
|
||
<div style="font-size: 13px; color: rgba(255,255,255,0.6); font-weight: 600;">已抽烟</div>
|
||
<div style="margin-top: 12px;">
|
||
<span style="font-size: 36px; font-weight: 800; color: #FF6B6B;">3</span>
|
||
<span style="font-size: 16px; color: rgba(255,255,255,0.5); font-weight: 600;"> / 5</span>
|
||
</div>
|
||
<div style="font-size: 13px; color: #00D4AA; margin-top: 8px; font-weight: 600;">↓ 较昨日 -2</div>
|
||
</div>
|
||
<div style="flex: 1; background: rgba(0,212,170,0.1); padding: 20px; border-radius: 16px; border: 1px solid rgba(0,212,170,0.2);">
|
||
<div style="font-size: 13px; color: rgba(255,255,255,0.6); font-weight: 600;">已忍住</div>
|
||
<div style="margin-top: 12px;">
|
||
<span style="font-size: 36px; font-weight: 800; color: #00D4AA;">4</span>
|
||
<span style="font-size: 16px; color: rgba(255,255,255,0.5); font-weight: 600;"> 次</span>
|
||
</div>
|
||
<div style="font-size: 13px; color: #00D4AA; margin-top: 8px; font-weight: 600;">💪 做得好</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 记录按钮 -->
|
||
<div style="padding: 0 20px; margin-top: 24px; display: flex; gap: 12px;">
|
||
<button class="premium-btn btn-danger" style="flex: 1; padding: 16px; border-radius: 16px;">
|
||
🚬 记录抽烟
|
||
</button>
|
||
<button class="premium-btn btn-primary" style="flex: 1; padding: 16px; border-radius: 16px;">
|
||
💪 想抽忍住了
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 戒烟打卡模式首页 -->
|
||
<div id="page-home-quit" class="page">
|
||
<div style="background: linear-gradient(180deg, #000 0%, #0a0a0a 100%); min-height: 100vh; position: relative; overflow: hidden;">
|
||
<!-- 背景装饰 -->
|
||
<div style="position: absolute; top: 0; right: -50px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(0,212,170,0.1) 0%, transparent 70%); border-radius: 50%; filter: blur(60px);"></div>
|
||
|
||
<div style="padding: 60px 20px 20px; position: relative; z-index: 1;">
|
||
<div style="font-size: 17px; color: rgba(255,255,255,0.6); margin-bottom: 4px; font-weight: 500;">早上好 👋</div>
|
||
<div style="font-size: 32px; font-weight: 700; color: #fff; letter-spacing: -0.5px;">张三</div>
|
||
</div>
|
||
|
||
<!-- 戒烟天数大卡片 -->
|
||
<div class="premium-card" style="margin-top: 32px; text-align: center; padding: 40px 24px; background: linear-gradient(135deg, rgba(0,212,170,0.15) 0%, rgba(0,245,212,0.1) 100%); border: 1px solid rgba(0,212,170,0.3);">
|
||
<div style="font-size: 15px; color: rgba(255,255,255,0.6); margin-bottom: 12px; font-weight: 600; letter-spacing: 1px;">已戒烟</div>
|
||
<div class="gradient-text" style="font-size: 72px; font-weight: 800; line-height: 1; margin: 16px 0;">15</div>
|
||
<div style="font-size: 24px; color: rgba(255,255,255,0.8); font-weight: 600; margin-bottom: 32px;">天</div>
|
||
<div style="padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.1);">
|
||
<div style="display: flex; justify-content: space-around;">
|
||
<div>
|
||
<div style="font-size: 28px; font-weight: 700; color: #fff;">360</div>
|
||
<div style="font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 6px; font-weight: 600;">小时</div>
|
||
</div>
|
||
<div style="width: 1px; background: rgba(255,255,255,0.1);"></div>
|
||
<div>
|
||
<div style="font-size: 28px; font-weight: 700; color: #fff;">21,600</div>
|
||
<div style="font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 6px; font-weight: 600;">分钟</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 打卡按钮 -->
|
||
<div style="padding: 0 20px; margin-top: 24px;">
|
||
<button class="premium-btn btn-primary" style="width: 100%; padding: 18px; font-size: 18px; border-radius: 18px;">
|
||
✅ 今日打卡
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 成就卡片 -->
|
||
<div class="premium-card" style="margin-top: 20px;">
|
||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
|
||
<div style="font-size: 18px; font-weight: 700; color: #fff;">健康收益</div>
|
||
<div style="font-size: 13px; color: #00D4AA; font-weight: 600;">持续恢复中 ↗</div>
|
||
</div>
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
|
||
<div style="background: rgba(0,212,170,0.1); padding: 20px; border-radius: 16px; border: 1px solid rgba(0,212,170,0.2);">
|
||
<div style="font-size: 13px; color: rgba(255,255,255,0.6); font-weight: 600;">节省金额</div>
|
||
<div style="font-size: 28px; font-weight: 800; color: #00D4AA; margin-top: 8px;">¥225</div>
|
||
</div>
|
||
<div style="background: rgba(251,191,36,0.1); padding: 20px; border-radius: 16px; border: 1px solid rgba(251,191,36,0.2);">
|
||
<div style="font-size: 13px; color: rgba(255,255,255,0.6); font-weight: 600;">未吸烟支数</div>
|
||
<div style="font-size: 28px; font-weight: 800; color: #FBBF24; margin-top: 8px;">300</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 激励语 -->
|
||
<div class="premium-card" style="background: linear-gradient(135deg, rgba(79,70,229,0.15) 0%, rgba(99,102,241,0.1) 100%); border: 1px solid rgba(79,70,229,0.3);">
|
||
<div style="font-size: 15px; color: rgba(255,255,255,0.9); line-height: 1.7; font-weight: 500;">
|
||
💪 坚持得很棒！你的肺部功能正在逐步恢复，继续保持！
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部导航 -->
|
||
<div class="nav-tabs">
|
||
<div class="nav-tab active" onclick="switchPage('home')">
|
||
<div class="nav-icon">🏠</div>
|
||
<div class="nav-label">首页</div>
|
||
</div>
|
||
<div class="nav-tab" onclick="switchPage('stats')">
|
||
<div class="nav-icon">📊</div>
|
||
<div class="nav-label">统计</div>
|
||
</div>
|
||
<div class="nav-tab" onclick="switchPage('ai')">
|
||
<div class="nav-icon">🤖</div>
|
||
<div class="nav-label">AI助手</div>
|
||
</div>
|
||
<div class="nav-tab" onclick="switchPage('logs')">
|
||
<div class="nav-icon">📝</div>
|
||
<div class="nav-label">记录</div>
|
||
</div>
|
||
<div class="nav-tab" onclick="switchPage('profile')">
|
||
<div class="nav-icon">👤</div>
|
||
<div class="nav-label">我的</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
let currentMode = 'quit';
|
||
|
||
function selectMode(mode) {
|
||
currentMode = mode;
|
||
if (mode === 'quit') {
|
||
loadPage('home-quit');
|
||
} else {
|
||
loadPage('home-record');
|
||
}
|
||
document.querySelector('.nav-tabs').style.display = 'flex';
|
||
}
|
||
|
||
function switchPage(page) {
|
||
document.querySelectorAll('.nav-tab').forEach(tab => tab.classList.remove('active'));
|
||
event.currentTarget.classList.add('active');
|
||
|
||
if (page === 'home') {
|
||
loadPage(currentMode === 'quit' ? 'home-quit' : 'home-record');
|
||
} else {
|
||
loadPage(page);
|
||
}
|
||
}
|
||
|
||
function loadPage(page) {
|
||
document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
|
||
const targetPage = document.getElementById('page-' + page);
|
||
if (targetPage) {
|
||
targetPage.classList.add('active');
|
||
}
|
||
|
||
if (page === 'mode-select') {
|
||
document.querySelector('.nav-tabs').style.display = 'none';
|
||
} else {
|
||
document.querySelector('.nav-tabs').style.display = 'flex';
|
||
}
|
||
}
|
||
|
||
window.addEventListener('DOMContentLoaded', function() {
|
||
document.querySelector('.nav-tabs').style.display = 'none';
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|