Hugging Face's logo

Spaces:
seascheng
/
handball-1
Running

App Files Community
seascheng commited on
Commit
c7229e7
·
verified ·
1 Parent(s): 9663412

设计一款面向青少年手球运动员与家庭用户的移动端 App，整体风格要现代、年轻、有运动感，适合教育类/体育类使用场景。 ✅ 基础功能： • 支持扫码注册与登录、创建学员档案、线上缴费、生成电子名片； • 报名海报、活动内容通过弹窗方式展示； ✅ 首页模块： • 直播区块：包含背景图、直播中状态提示； • 赛事预告区块：展示赛事状态（预热中、已缴费、备战中、比赛中、已结束）； • 品牌区块：公司介绍、俱乐部介绍（细分：教练团队卡片/公司介绍/课程体系）、花絮展示； ✅ 训练报告区： • 与智能脚环配合展示课后训练数据报告，包含数据统计、训练建议、成长轨迹； ✅ 即时通讯： • 支持用户与客服/教练在线沟通； ✅ 我的中心： • 支持订单管理、绑定多个学员、切换学员档案； ✅ 设计风格建议： • 卡片式界面，模块清晰； • 配色活泼但不过于跳脱（可参考 Nike Training Club、Adidas Running 等配色）； • 图标生动、偏圆润，强调“运动感”与“成长感”； • 动画/动效适度，强调状态变化与个人成就展示； • 界面需兼顾父母端与青少年端的使用体验； ✅ 推荐界面原型图： • 注册 / 登录页 • 学员档案 / 电子名片页 • 首页（含直播、赛事、品牌三大区块） • 活动弹窗页 • 训练报告页 • 聊天对话页 • 个人中心页（支持多学员切换） 界面为常见的 tab bar+navigation bar结构，要求生成全部 tab bar 子页面的设计，界面为中文 - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1203 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Handball 1
3
- emoji: 👁
4
- colorFrom: indigo
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: handball-1
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1203 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>手球少年营 - 青少年手球训练平台</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @keyframes pulse {
11
+ 0%, 100% { transform: scale(1); }
12
+ 50% { transform: scale(1.05); }
13
+ }
14
+ .animate-pulse-slow {
15
+ animation: pulse 3s infinite;
16
+ }
17
+ .live-badge {
18
+ box-shadow: 0 0 10px rgba(255, 59, 48, 0.7);
19
+ }
20
+ .progress-ring {
21
+ transition: stroke-dashoffset 0.35s;
22
+ transform: rotate(-90deg);
23
+ transform-origin: 50% 50%;
24
+ }
25
+ .slide-up {
26
+ animation: slideUp 0.5s ease-out forwards;
27
+ }
28
+ @keyframes slideUp {
29
+ from { transform: translateY(100%); opacity: 0; }
30
+ to { transform: translateY(0); opacity: 1; }
31
+ }
32
+ .tab-active {
33
+ color: #3B82F6;
34
+ position: relative;
35
+ }
36
+ .tab-active:after {
37
+ content: '';
38
+ position: absolute;
39
+ bottom: -8px;
40
+ left: 50%;
41
+ transform: translateX(-50%);
42
+ width: 6px;
43
+ height: 6px;
44
+ border-radius: 50%;
45
+ background-color: #3B82F6;
46
+ }
47
+ </style>
48
+ </head>
49
+ <body class="font-sans bg-gray-50 text-gray-800 max-w-md mx-auto relative h-screen overflow-hidden">
50
+ <!-- Auth Screen (Initial View) -->
51
+ <div id="auth-screen" class="h-full flex flex-col items-center justify-center p-6 bg-gradient-to-b from-blue-500 to-blue-700 text-white">
52
+ <div class="w-32 h-32 mb-8 relative">
53
+ <div class="absolute inset-0 bg-white rounded-full flex items-center justify-center animate-pulse-slow">
54
+ <div class="w-24 h-24 bg-blue-500 rounded-full flex items-center justify-center">
55
+ <i class="fas fa-hand-holding-heart text-3xl text-white"></i>
56
+ </div>
57
+ </div>
58
+ </div>
59
+ <h1 class="text-3xl font-bold mb-2">手球少年营</h1>
60
+ <p class="mb-8 text-center">青少年手球训练专家<br>培养未来运动新星</p>
61
+
62
+ <button onclick="showApp()" class="w-full bg-white text-blue-600 py-3 rounded-full font-bold mb-4 flex items-center justify-center">
63
+ <i class="fas fa-qrcode mr-2"></i> 扫码登录/注册
64
+ </button>
65
+
66
+ <div class="w-full flex items-center my-4">
67
+ <div class="flex-1 h-px bg-white bg-opacity-30"></div>
68
+ <span class="px-4 text-sm">或</span>
69
+ <div class="flex-1 h-px bg-white bg-opacity-30"></div>
70
+ </div>
71
+
72
+ <button onclick="showApp()" class="w-full border border-white text-white py-3 rounded-full font-bold flex items-center justify-center">
73
+ <i class="fas fa-user-plus mr-2"></i> 手机号注册
74
+ </button>
75
+
76
+ <p class="text-xs mt-8 text-center text-white text-opacity-70">注册即代表同意《用户协议》和《隐私政策》</p>
77
+ </div>
78
+
79
+ <!-- Main App (Hidden Initially) -->
80
+ <div id="app-container" class="h-full hidden flex flex-col">
81
+ <!-- Navigation Bar -->
82
+ <div class="bg-white shadow-md py-3 px-4 flex items-center justify-between z-10">
83
+ <div class="flex items-center">
84
+ <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center mr-2">
85
+ <i class="fas fa-hand-holding-heart text-white text-sm"></i>
86
+ </div>
87
+ <h1 class="font-bold">手球少年营</h1>
88
+ </div>
89
+ <div class="flex items-center space-x-4">
90
+ <button class="text-gray-600">
91
+ <i class="fas fa-search"></i>
92
+ </button>
93
+ <button class="text-gray-600 relative">
94
+ <i class="fas fa-bell"></i>
95
+ <span class="absolute -top-1 -right-1 w-2 h-2 bg-red-500 rounded-full"></span>
96
+ </button>
97
+ </div>
98
+ </div>
99
+
100
+ <!-- Main Content Area -->
101
+ <div class="flex-1 overflow-y-auto pb-16" id="main-content">
102
+ <!-- Home Tab Content -->
103
+ <div id="home-tab" class="tab-content active pb-4">
104
+ <!-- Live Section -->
105
+ <div class="mx-4 mt-4 rounded-xl overflow-hidden bg-white shadow-md">
106
+ <div class="relative">
107
+ <img src="https://images.unsplash.com/photo-1574629810360-7efbbe195018?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=900&q=80"
108
+ alt="手球训练直播" class="w-full h-48 object-cover">
109
+ <div class="absolute top-2 left-2 bg-red-500 text-white text-xs px-2 py-1 rounded-full flex items-center live-badge">
110
+ <div class="w-2 h-2 bg-white rounded-full mr-1 animate-pulse"></div>
111
+ <span>直播中</span>
112
+ </div>
113
+ <div class="absolute bottom-2 left-2 bg-black bg-opacity-50 text-white text-sm px-2 py-1 rounded">
114
+ <i class="fas fa-users mr-1"></i> 1,245 人正在观看
115
+ </div>
116
+ </div>
117
+ <div class="p-4">
118
+ <h3 class="font-bold text-lg mb-1">周三青少年手球基础训练</h3>
119
+ <p class="text-gray-600 text-sm mb-3">王教练带队 · 针对12-15岁学员</p>
120
+ <button class="w-full bg-blue-500 text-white py-2 rounded-lg font-semibold">
121
+ <i class="fas fa-play mr-2"></i> 进入直播
122
+ </button>
123
+ </div>
124
+ </div>
125
+
126
+ <!-- Event Section -->
127
+ <div class="mx-4 mt-6">
128
+ <div class="flex items-center justify-between mb-3">
129
+ <h2 class="font-bold text-lg">赛事与活动</h2>
130
+ <a href="#" class="text-blue-500 text-sm">查看全部 <i class="fas fa-chevron-right ml-1"></i></a>
131
+ </div>
132
+
133
+ <div class="grid grid-cols-2 gap-3">
134
+ <!-- Event Card 1 -->
135
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
136
+ <div class="relative">
137
+ <img src="https://images.unsplash.com/photo-1517649763962-0c623066013b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=900&q=80"
138
+ alt="赛事海报" class="w-full h-24 object-cover">
139
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent h-8">
140
+ <div class="absolute bottom-1 left-2 text-white text-xs font-medium">备战中</div>
141
+ </div>
142
+ </div>
143
+ <div class="p-3">
144
+ <h3 class="font-bold text-sm mb-1">2023长三角青少年手球联赛</h3>
145
+ <p class="text-gray-500 text-xs"><i class="far fa-calendar-alt mr-1"></i> 11月15-20日</p>
146
+ <p class="text-gray-500 text-xs mt-1"><i class="fas fa-map-marker-alt mr-1"></i> 上海体育中心</p>
147
+ <div class="mt-2 flex justify-between items-center">
148
+ <div class="text-xs text-gray-600">已缴费: 24/30人</div>
149
+ <button class="text-xs text-blue-500 font-medium" onclick="showEventPopup()">详情</button>
150
+ </div>
151
+ </div>
152
+ </div>
153
+
154
+ <!-- Event Card 2 -->
155
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
156
+ <div class="relative">
157
+ <img src="https://images.unsplash.com/photo-1540747913346-19e32dc3e97e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=900&q=80"
158
+ alt="赛事海报" class="w-full h-24 object-cover">
159
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent h-8">
160
+ <div class="absolute bottom-1 left-2 text-white text-xs font-medium">预热中</div>
161
+ </div>
162
+ </div>
163
+ <div class="p-3">
164
+ <h3 class="font-bold text-sm mb-1">暑期手球训练营</h3>
165
+ <p class="text-gray-500 text-xs"><i class="far fa-calendar-alt mr-1"></i> 7月1-30日</p>
166
+ <p class="text-gray-500 text-xs mt-1"><i class="fas fa-map-marker-alt mr-1"></i> 南京路训练基地</p>
167
+ <div class="mt-2 flex justify-between items-center">
168
+ <div class="text-xs text-gray-600">报名截止: 6月20日</div>
169
+ <button class="text-xs text-blue-500 font-medium" onclick="showEventPopup()">详情</button>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ </div>
175
+
176
+ <!-- Brand Section -->
177
+ <div class="mx-4 mt-6">
178
+ <h2 class="font-bold text-lg mb-3">关于我们</h2>
179
+
180
+ <!-- Club Intro -->
181
+ <div class="bg-white rounded-xl shadow-md overflow-hidden mb-4">
182
+ <div class="p-4">
183
+ <h3 class="font-bold text-lg mb-2 flex items-center">
184
+ <i class="fas fa-home mr-2 text-blue-500"></i> 手球少年俱乐部
185
+ </h3>
186
+ <p class="text-gray-600 text-sm">
187
+ 专注于青少年手球训练10年，培养国家级运动员50余人。我们致力于通过科学的训练体系和专业教练团队，帮助孩子提升运动技能、培养团队精神。
188
+ </p>
189
+ <button class="mt-3 text-blue-500 text-sm font-medium" onclick="showBrandPopup('club')">
190
+ 了解更多 <i class="fas fa-chevron-right ml-1"></i>
191
+ </button>
192
+ </div>
193
+ </div>
194
+
195
+ <!-- Coaches -->
196
+ <div class="bg-white rounded-xl shadow-md overflow-hidden mb-4">
197
+ <div class="p-4">
198
+ <h3 class="font-bold text-lg mb-3 flex items-center">
199
+ <i class="fas fa-users mr-2 text-blue-500"></i> 教练团队
200
+ </h3>
201
+ <div class="grid grid-cols-3 gap-3">
202
+ <!-- Coach 1 -->
203
+ <div class="text-center">
204
+ <img src="https://randomuser.me/api/portraits/men/32.jpg"
205
+ alt="王教练" class="w-16 h-16 rounded-full mx-auto object-cover border-2 border-blue-300">
206
+ <h4 class="font-medium text-sm mt-1">王教练</h4>
207
+ <p class="text-gray-500 text-xs">国家一级运动员</p>
208
+ </div>
209
+
210
+ <!-- Coach 2 -->
211
+ <div class="text-center">
212
+ <img src="https://randomuser.me/api/portraits/women/44.jpg"
213
+ alt="李教练" class="w-16 h-16 rounded-full mx-auto object-cover border-2 border-blue-300">
214
+ <h4 class="font-medium text-sm mt-1">李教练</h4>
215
+ <p class="text-gray-500 text-xs">青少年训练专家</p>
216
+ </div>
217
+
218
+ <!-- Coach 3 -->
219
+ <div class="text-center">
220
+ <img src="https://randomuser.me/api/portraits/men/75.jpg"
221
+ alt="张教练" class="w-16 h-16 rounded-full mx-auto object-cover border-2 border-blue-300">
222
+ <h4 class="font-medium text-sm mt-1">张教练</h4>
223
+ <p class="text-gray-500 text-xs">体能训练主管</p>
224
+ </div>
225
+ </div>
226
+ <button class="mt-3 text-blue-500 text-sm font-medium w-full text-center" onclick="showBrandPopup('coaches')">
227
+ 查看全部 <i class="fas fa-chevron-right ml-1"></i>
228
+ </button>
229
+ </div>
230
+ </div>
231
+
232
+ <!-- HighLights -->
233
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
234
+ <div class="p-4">
235
+ <h3 class="font-bold text-lg mb-3 flex items-center">
236
+ <i class="fas fa-photo-video mr-2 text-blue-500"></i> 精彩花絮
237
+ </h3>
238
+ <div class="grid grid-cols-3 gap-2">
239
+ <img src="https://images.unsplash.com/photo-1551958219-acbc608c9097?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=900&q=80"
240
+ alt="花絮" class="w-full h-24 rounded object-cover">
241
+ <img src="https://images.unsplash.com/photo-1527525443983-6e60c75fff46?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=900&q=80"
242
+ alt="花絮" class="w-full h-24 rounded object-cover">
243
+ <img src="https://images.unsplash.com/photo-1543351611-58f69d7c1781?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=900&q=80"
244
+ alt="花絮" class="w-full h-24 rounded object-cover">
245
+ </div>
246
+ <button class="mt-3 text-blue-500 text-sm font-medium" onclick="showBrandPopup('highlights')">
247
+ 观看更多 <i class="fas fa-chevron-right ml-1"></i>
248
+ </button>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </div>
253
+
254
+ <!-- Training Report Tab Content (Hidden Initially) -->
255
+ <div id="report-tab" class="tab-content hidden pb-4">
256
+ <div class="mx-4 mt-4">
257
+ <div class="flex items-center justify-between mb-4">
258
+ <h2 class="font-bold text-lg">训练报告</h2>
259
+ <div class="flex items-center">
260
+ <div class="text-sm mr-3">李小明</div>
261
+ <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
262
+ <i class="fas fa-user text-blue-500 text-sm"></i>
263
+ </div>
264
+ </div>
265
+ </div>
266
+
267
+ <!-- Connection Status -->
268
+ <div class="bg-white rounded-xl shadow-md p-4 mb-4">
269
+ <div class="flex items-center justify-between mb-3">
270
+ <div class="flex items-center">
271
+ <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
272
+ <i class="fas fa-wifi text-blue-500"></i>
273
+ </div>
274
+ <div>
275
+ <h3 class="font-medium">智能手环连接状态</h3>
276
+ <p class="text-green-500 text-sm">已连接</p>
277
+ </div>
278
+ </div>
279
+ <button class="text-blue-500 text-sm font-medium">设置</button>
280
+ </div>
281
+
282
+ <div class="bg-gray-100 rounded-lg p-3 text-center">
283
+ <p class="text-sm text-gray-600">上次同步: 今天 09:15</p>
284
+ <button class="mt-1 text-blue-500 text-sm font-medium">
285
+ <i class="fas fa-sync-alt mr-1"></i> 立即同步数据
286
+ </button>
287
+ </div>
288
+ </div>
289
+
290
+ <!-- Performance Summary -->
291
+ <div class="bg-white rounded-xl shadow-md p-4 mb-4">
292
+ <div class="flex justify-between items-center mb-4">
293
+ <h3 class="font-bold">本周训练总结</h3>
294
+ <div class="bg-green-100 text-green-700 px-2 py-1 rounded-md text-xs font-medium">
295
+ <i class="fas fa-arrow-up mr-1"></i> 进步12%
296
+ </div>
297
+ </div>
298
+
299
+ <div class="grid grid-cols-3 gap-2 mb-4">
300
+ <div class="bg-blue-50 rounded-lg p-2 text-center">
301
+ <div class="text-2xl font-bold text-blue-500">3.2</div>
302
+ <div class="text-xs text-gray-500">公里</div>
303
+ </div>
304
+ <div class="bg-yellow-50 rounded-lg p-2 text-center">
305
+ <div class="text-2xl font-bold text-yellow-500">78%</div>
306
+ <div class="text-xs text-gray-500">命中率</div>
307
+ </div>
308
+ <div class="bg-green-50 rounded-lg p-2 text-center">
309
+ <div class="text-2xl font-bold text-green-500">4.5</div>
310
+ <div class="text-xs text-gray-500">评分</div>
311
+ </div>
312
+ </div>
313
+
314
+ <div class="h-2 bg-gray-200 rounded-full overflow-hidden mb-1">
315
+ <div class="h-full bg-blue-500 rounded-full" style="width: 80%"></div>
316
+ </div>
317
+ <div class="flex justify-between text-xs text-gray-500">
318
+ <span>训练完成度</span>
319
+ <span>80%</span>
320
+ </div>
321
+ </div>
322
+
323
+ <!-- Detailed Metrics -->
324
+ <div class="bg-white rounded-xl shadow-md p-4 mb-4">
325
+ <h3 class="font-bold mb-3">详细数据</h3>
326
+
327
+ <div class="space-y-4">
328
+ <!-- Metric 1 -->
329
+ <div>
330
+ <div class="flex justify-between items-center mb-1">
331
+ <div class="font-medium">移动速度</div>
332
+ <div class="text-sm">4.8 km/h</div>
333
+ </div>
334
+ <div class="flex items-center text-xs text-gray-500">
335
+ <div class="w-16">中等水平</div>
336
+ <div class="flex-1 h-2 bg-gray-200 rounded-full mx-2">
337
+ <div class="h-full bg-blue-400 rounded-full" style="width: 55%"></div>
338
+ </div>
339
+ <div>同龄前45%</div>
340
+ </div>
341
+ </div>
342
+
343
+ <!-- Metric 2 -->
344
+ <div>
345
+ <div class="flex justify-between items-center mb-1">
346
+ <div class="font-medium">反应时间</div>
347
+ <div class="text-sm">0.32秒</div>
348
+ </div>
349
+ <div class="flex items-center text-xs text-gray-500">
350
+ <div class="w-16">良好</div>
351
+ <div class="flex-1 h-2 bg-gray-200 rounded-full mx-2">
352
+ <div class="h-full bg-green-400 rounded-full" style="width: 75%"></div>
353
+ </div>
354
+ <div>同龄前25%</div>
355
+ </div>
356
+ </div>
357
+
358
+ <!-- Metric 3 -->
359
+ <div>
360
+ <div class="flex justify-between items-center mb-1">
361
+ <div class="font-medium">投掷力量</div>
362
+ <div class="text-sm">28.5N</div>
363
+ </div>
364
+ <div class="flex items-center text-xs text-gray-500">
365
+ <div class="w-16">优秀</div>
366
+ <div class="flex-1 h-2 bg-gray-200 rounded-full mx-2">
367
+ <div class="h-full bg-yellow-400 rounded-full" style="width: 85%"></div>
368
+ </div>
369
+ <div>同龄前15%</div>
370
+ </div>
371
+ </div>
372
+ </div>
373
+ </div>
374
+
375
+ <!-- Training Suggestions -->
376
+ <div class="bg-white rounded-xl shadow-md p-4">
377
+ <h3 class="font-bold mb-3">训练建议</h3>
378
+
379
+ <div class="bg-blue-50 rounded-lg p-3 mb-3">
380
+ <div class="flex items-start">
381
+ <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3 mt-1">
382
+ <i class="fas fa-bolt text-blue-500 text-sm"></i>
383
+ </div>
384
+ <div>
385
+ <h4 class="font-medium mb-1">提升建议</h4>
386
+ <p class="text-gray-600 text-sm">建议进行投掷准确性专项训练，每周增加2次15分钟反应训练</p>
387
+ </div>
388
+ </div>
389
+ </div>
390
+
391
+ <div class="grid grid-cols-2 gap-3">
392
+ <div class="bg-white border border-gray-200 rounded-lg p-2 text-center">
393
+ <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-2">
394
+ <i class="fas fa-dumbbell text-blue-500"></i>
395
+ </div>
396
+ <h4 class="font-medium text-sm">腿部力量</h4>
397
+ <p class="text-gray-500 text-xs">3个练习</p>
398
+ </div>
399
+
400
+ <div class="bg-white border border-gray-200 rounded-lg p-2 text-center">
401
+ <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-2">
402
+ <i class="fas fa-running text-green-500"></i>
403
+ </div>
404
+ <h4 class="font-medium text-sm">反应速度</h4>
405
+ <p class="text-gray-500 text-xs">2个训练</p>
406
+ </div>
407
+ </div>
408
+ </div>
409
+ </div>
410
+ </div>
411
+
412
+ <!-- Message Tab Content (Hidden Initially) -->
413
+ <div id="message-tab" class="tab-content hidden pb-4">
414
+ <div class="mx-4 mt-4">
415
+ <div class="flex items-center justify-between mb-4">
416
+ <h2 class="font-bold text-lg">消息</h2>
417
+ <button class="text-blue-500">
418
+ <i class="fas fa-edit"></i>
419
+ </button>
420
+ </div>
421
+
422
+ <!-- Search Bar -->
423
+ <div class="relative mb-4">
424
+ <input type="text" placeholder="搜索消息..."
425
+ class="w-full bg-gray-100 rounded-full py-2 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-blue-300">
426
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
427
+ </div>
428
+
429
+ <!-- Conversation List -->
430
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
431
+ <!-- Conversation 1 -->
432
+ <div class="p-4 border-b border-gray-100 flex items-center" onclick="showChatDetail('coach')">
433
+ <div class="relative mr-3">
434
+ <img src="https://randomuser.me/api/portraits/men/32.jpg"
435
+ alt="王教练" class="w-12 h-12 rounded-full object-cover">
436
+ <div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div>
437
+ </div>
438
+ <div class="flex-1">
439
+ <div class="flex justify-between items-center mb-1">
440
+ <h3 class="font-medium">王教练</h3>
441
+ <span class="text-xs text-gray-500">15:30</span>
442
+ </div>
443
+ <p class="text-sm text-gray-500 truncate">明天的训练请提前15分钟到场，我们需要...</p>
444
+ </div>
445
+ </div>
446
+
447
+ <!-- Conversation 2 -->
448
+ <div class="p-4 border-b border-gray-100 flex items-center" onclick="showChatDetail('service')">
449
+ <div class="relative mr-3">
450
+ <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
451
+ <i class="fas fa-headset text-blue-500"></i>
452
+ </div>
453
+ </div>
454
+ <div class="flex-1">
455
+ <div class="flex justify-between items-center mb-1">
456
+ <h3 class="font-medium">客服中心</h3>
457
+ <span class="text-xs text-gray-500">昨天</span>
458
+ </div>
459
+ <p class="text-sm text-gray-500 truncate">您的问题我们已经收到，将尽快处理...</p>
460
+ </div>
461
+ </div>
462
+
463
+ <!-- Conversation 3 -->
464
+ <div class="p-4 flex items-center" onclick="showChatDetail('team')">
465
+ <div class="relative mr-3">
466
+ <img src="https://randomuser.me/api/portraits/women/44.jpg"
467
+ alt="李教练" class="w-12 h-12 rounded-full object-cover">
468
+ <div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div>
469
+ </div>
470
+ <div class="flex-1">
471
+ <div class="flex justify-between items-center mb-1">
472
+ <h3 class="font-medium">李教练</h3>
473
+ <span class="text-xs text-gray-500">周三</span>
474
+ </div>
475
+ <p class="text-sm text-gray-500 truncate">小明的最近训练数据已更新，进步很...</p>
476
+ </div>
477
+ </div>
478
+ </div>
479
+ </div>
480
+ </div>
481
+
482
+ <!-- Profile Tab Content (Hidden Initially) -->
483
+ <div id="profile-tab" class="tab-content hidden">
484
+ <!-- Profile Header -->
485
+ <div class="bg-gradient-to-r from-blue-500 to-blue-700 text-white px-6 py-8">
486
+ <div class="flex items-center mb-4">
487
+ <div class="mr-4">
488
+ <img src="https://randomuser.me/api/portraits/men/42.jpg"
489
+ alt="用户头像" class="w-16 h-16 rounded-full border-2 border-white">
490
+ </div>
491
+ <div>
492
+ <h2 class="font-bold text-xl">张先生</h2>
493
+ <p class="text-sm opacity-90">会员编号: HS20230815</p>
494
+ </div>
495
+ </div>
496
+ <div class="flex space-x-3">
497
+ <button class="bg-white bg-opacity-20 rounded-full px-3 py-1 text-sm flex items-center">
498
+ <i class="fas fa-crown mr-1 text-yellow-300"></i> 黄金会员
499
+ </button>
500
+ <button class="bg-white bg-opacity-20 rounded-full px-3 py-1 text-sm">
501
+ 账户设置
502
+ </button>
503
+ </div>
504
+ </div>
505
+
506
+ <!-- Students Section -->
507
+ <div class="mx-4 -mt-6 z-10 relative">
508
+ <div class="bg-white rounded-xl shadow-lg p-4">
509
+ <div class="flex justify-between items-center mb-3">
510
+ <h3 class="font-bold flex items-center">
511
+ <i class="fas fa-user-graduate mr-2 text-blue-500"></i> 关联学员
512
+ </h3>
513
+ <button class="text-blue-500 text-sm">
514
+ <i class="fas fa-plus"></i> 添加学员
515
+ </button>
516
+ </div>
517
+
518
+ <!-- Student Cards -->
519
+ <div class="grid grid-cols-2 gap-3">
520
+ <!-- Active Student -->
521
+ <div class="border-2 border-blue-300 rounded-lg p-2 bg-blue-50">
522
+ <div class="flex items-start">
523
+ <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-2">
524
+ <i class="fas fa-user text-blue-500"></i>
525
+ </div>
526
+ <div>
527
+ <h4 class="font-medium">李小明</h4>
528
+ <p class="text-xs text-gray-500">12岁</p>
529
+ </div>
530
+ </div>
531
+ <div class="mt-2 text-xs text-blue-500 flex items-center">
532
+ <i class="fas fa-check-circle mr-1"></i> 当前查看
533
+ </div>
534
+ </div>
535
+
536
+ <!-- Other Student -->
537
+ <div class="border border-gray-200 rounded-lg p-2">
538
+ <div class="flex items-start">
539
+ <div class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center mr-2">
540
+ <i class="fas fa-user text-gray-500"></i>
541
+ </div>
542
+ <div>
543
+ <h4 class="font-medium">李小华</h4>
544
+ <p class="text-xs text-gray-500">9岁</p>
545
+ </div>
546
+ </div>
547
+ <button class="mt-2 w-full text-xs bg-gray-100 rounded py-1">
548
+ 切换查看
549
+ </button>
550
+ </div>
551
+ </div>
552
+ </div>
553
+ </div>
554
+
555
+ <!-- Menu Items -->
556
+ <div class="mt-10 px-4 space-y-4">
557
+ <!-- ID Card -->
558
+ <div class="bg-white rounded-xl shadow-md p-4 flex items-center justify-between" onclick="showIdCard()">
559
+ <div class="flex items-center">
560
+ <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
561
+ <i class="fas fa-id-card text-blue-500"></i>
562
+ </div>
563
+ <div>
564
+ <h3 class="font-medium">电子学员证</h3>
565
+ <p class="text-sm text-gray-500">查看/分享学员电子名片</p>
566
+ </div>
567
+ </div>
568
+ <i class="fas fa-chevron-right text-gray-400"></i>
569
+ </div>
570
+
571
+ <!-- Orders -->
572
+ <div class="bg-white rounded-xl shadow-md p-4 flex items-center justify-between">
573
+ <div class="flex items-center">
574
+ <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
575
+ <i class="fas fa-ticket-alt text-green-500"></i>
576
+ </div>
577
+ <div>
578
+ <h3 class="font-medium">我的订单</h3>
579
+ <p class="text-sm text-gray-500">2个未完成订单</p>
580
+ </div>
581
+ </div>
582
+ <i class="fas fa-chevron-right text-gray-400"></i>
583
+ </div>
584
+
585
+ <!-- Payment -->
586
+ <div class="bg-white rounded-xl shadow-md p-4 flex items-center justify-between">
587
+ <div class="flex items-center">
588
+ <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3">
589
+ <i class="fas fa-wallet text-purple-500"></i>
590
+ </div>
591
+ <div>
592
+ <h3 class="font-medium">支付管理</h3>
593
+ <p class="text-sm text-gray-500">绑定支付方式/充值</p>
594
+ </div>
595
+ </div>
596
+ <i class="fas fa-chevron-right text-gray-400"></i>
597
+ </div>
598
+
599
+ <!-- Settings -->
600
+ <div class="bg-white rounded-xl shadow-md p-4 flex items-center justify-between">
601
+ <div class="flex items-center">
602
+ <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center mr-3">
603
+ <i class="fas fa-cog text-orange-500"></i>
604
+ </div>
605
+ <div>
606
+ <h3 class="font-medium">设置</h3>
607
+ <p class="text-sm text-gray-500">通知偏好/隐私设置</p>
608
+ </div>
609
+ </div>
610
+ <i class="fas fa-chevron-right text-gray-400"></i>
611
+ </div>
612
+
613
+ <!-- Logout Button -->
614
+ <button class="w-full bg-red-50 text-red-500 py-3 rounded-xl font-medium mt-8 mb-6" onclick="logout()">
615
+ <i class="fas fa-sign-out-alt mr-2"></i> 退出登录
616
+ </button>
617
+ </div>
618
+ </div>
619
+ </div>
620
+
621
+ <!-- Tab Bar -->
622
+ <div class="bg-white shadow-t-lg py-2 px-4 flex justify-around items-center">
623
+ <button onclick="switchTab('home')" class="tab-button tab-active flex flex-col items-center">
624
+ <i class="fas fa-home text-xl"></i>
625
+ <span class="text-xs mt-1">首页</span>
626
+ </button>
627
+ <button onclick="switchTab('report')" class="tab-button flex flex-col items-center">
628
+ <i class="fas fa-chart-line text-xl"></i>
629
+ <span class="text-xs mt-1">训练</span>
630
+ </button>
631
+ <button onclick="switchTab('message')" class="tab-button flex flex-col items-center">
632
+ <i class="fas fa-comments text-xl"></i>
633
+ <span class="text-xs mt-1">消息</span>
634
+ </button>
635
+ <button onclick="switchTab('profile')" class="tab-button flex flex-col items-center">
636
+ <i class="fas fa-user text-xl"></i>
637
+ <span class="text-xs mt-1">我的</span>
638
+ </button>
639
+ </div>
640
+ </div>
641
+
642
+ <!-- Event Popup (Hidden Initially) -->
643
+ <div id="event-popup" class="fixed inset-0 bg-black bg-opacity-50 z-20 hidden flex items-center justify-center p-4">
644
+ <div class="bg-white rounded-2xl w-full max-w-md overflow-hidden slide-up">
645
+ <div class="relative">
646
+ <img src="https://images.unsplash.com/photo-1517649763962-0c623066013b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=900&q=80"
647
+ alt="赛事详情" class="w-full h-48 object-cover">
648
+ <button onclick="hideEventPopup()" class="absolute top-3 right-3 w-8 h-8 bg-black bg-opacity-50 rounded-full flex items-center justify-center">
649
+ <i class="fas fa-times text-white"></i>
650
+ </button>
651
+ <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4">
652
+ <h3 class="text-white font-bold text-xl">2023长三角青少年手球联赛</h3>
653
+ <div class="flex items-center mt-2">
654
+ <div class="bg-blue-500 text-white px-2 py-1 rounded-md text-xs mr-2">备战中</div>
655
+ <div class="text-white text-opacity-80 text-xs">
656
+ <i class="fas fa-users mr-1"></i> 已报名24人
657
+ </div>
658
+ </div>
659
+ </div>
660
+ </div>
661
+
662
+ <div class="p-4">
663
+ <div class="flex items-start mb-4">
664
+ <div class="w-12 text-center mr-3">
665
+ <div class="text-blue-500 font-bold">15</div>
666
+ <div class="text-xs text-gray-500">周一</div>
667
+ </div>
668
+ <div>
669
+ <h4 class="font-medium">日期与时间</h4>
670
+ <p class="text-gray-600 text-sm">2023年11月15-20日<br>每天09:00-17:00</p>
671
+ </div>
672
+ </div>
673
+
674
+ <div class="flex items-start mb-4">
675
+ <div class="w-12 text-center mr-3">
676
+ <i class="fas fa-map-marker-alt text-blue-500 text-xl"></i>
677
+ </div>
678
+ <div>
679
+ <h4 class="font-medium">地点</h4>
680
+ <p class="text-gray-600 text-sm">上海体育中心<br>浦东新区源深路655号</p>
681
+ </div>
682
+ </div>
683
+
684
+ <div class="flex items-start mb-4">
685
+ <div class="w-12 text-center mr-3">
686
+ <i class="fas fa-info-circle text-blue-500 text-xl"></i>
687
+ </div>
688
+ <div>
689
+ <h4 class="font-medium">赛事说明</h4>
690
+ <p class="text-gray-600 text-sm">
691
+ 本次联赛面向12-16岁青少年，分男女组别。比赛采用国际手联最新规则，由国家级裁判执裁。
692
+ </p>
693
+ </div>
694
+ </div>
695
+
696
+ <div class="flex items-start mb-6">
697
+ <div class="w-12 text-center mr-3">
698
+ <i class="fas fa-money-bill-wave text-blue-500 text-xl"></i>
699
+ </div>
700
+ <div>
701
+ <h4 class="font-medium">费用</h4>
702
+ <p class="text-gray-600 text-sm">报名费: 680元/人<br>含比赛期间保险、纪念T恤、奖牌</p>
703
+ </div>
704
+ </div>
705
+
706
+ <div class="flex space-x-3">
707
+ <button class="flex-1 bg-blue-500 text-white py-3 rounded-lg font-bold">
708
+ <i class="fas fa-qrcode mr-2"></i> 分享邀请
709
+ </button>
710
+ <button class="flex-1 border border-blue-500 text-blue-500 py-3 rounded-lg font-bold">
711
+ <i class="fas fa-edit mr-2"></i> 立即报名
712
+ </button>
713
+ </div>
714
+ </div>
715
+ </div>
716
+ </div>
717
+
718
+ <!-- Brand Popup (Hidden Initially) -->
719
+ <div id="brand-popup" class="fixed inset-0 bg-black bg-opacity-50 z-20 hidden flex items-center justify-center p-4">
720
+ <div class="bg-white rounded-2xl w-full max-w-md overflow-hidden slide-up max-h-[90vh] overflow-y-auto">
721
+ <div class="p-4">
722
+ <button onclick="hideBrandPopup()" class="absolute top-3 right-3 w-8 h-8 rounded-full flex items-center justify-center">
723
+ <i class="fas fa-times text-gray-500"></i>
724
+ </button>
725
+
726
+ <div id="club-content" class="brand-popup-content">
727
+ <div class="text-center mb-6">
728
+ <img src="https://images.unsplash.com/photo-1565992441121-4367c2967103?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=900&q=80"
729
+ alt="俱乐部" class="w-full h-40 object-cover rounded-xl mb-4">
730
+ <h2 class="text-2xl font-bold mb-2">手球少年俱乐部</h2>
731
+ <p class="text-gray-500">成立于2013年 · 国家级青少年培训基地</p>
732
+ </div>
733
+
734
+ <div class="space-y-4">
735
+ <div class="bg-gray-50 p-4 rounded-lg">
736
+ <h3 class="font-bold mb-2 flex items-center">
737
+ <i class="fas fa-star text-yellow-500 mr-2"></i> 俱乐部荣誉
738
+ </h3>
739
+ <p class="text-gray-600 text-sm">
740
+ · 连续5年获得"优秀青少年体育俱乐部"称号<br>
741
+ · 培养国家级运动员52名，省级运动员120名<br>
742
+ · 2022年全国青少年手球锦标赛U15组冠军
743
+ </p>
744
+ </div>
745
+
746
+ <div class="bg-gray-50 p-4 rounded-lg">
747
+ <h3 class="font-bold mb-2 flex items-center">
748
+ <i class="fas fa-medal text-blue-500 mr-2"></i> 培训体系
749
+ </h3>
750
+ <p class="text-gray-600 text-sm">
751
+ · 4-6岁: 手球启蒙课程 (运动兴趣培养)<br>
752
+ · 7-9岁: 基础技能课程 (基本功训练)<br>
753
+ · 10-12岁: 战术意识课程 (团队配合)<br>
754
+ · 13-16岁: 竞赛提升课程 (赛事准备)
755
+ </p>
756
+ </div>
757
+
758
+ <div class="bg-gray-50 p-4 rounded-lg">
759
+ <h3 class="font-bold mb-2 flex items-center">
760
+ <i class="fas fa-map-marker-alt text-red-500 mr-2"></i> 训练基地
761
+ </h3>
762
+ <div class="flex items-start mb-3">
763
+ <div class="w-6 text-center mr-2">
764
+ <i class="fas fa-circle text-xs text-gray-400"></i>
765
+ </div>
766
+ <div>
767
+ <p class="font-medium text-sm">浦东校区</p>
768
+ <p class="text-gray-500 text-xs">张江高科技园区科苑路88号</p>
769
+ </div>
770
+ </div>
771
+ <div class="flex items-start">
772
+ <div class="w-6 text-center mr-2">
773
+ <i class="fas fa-circle text-xs text-gray-400"></i>
774
+ </div>
775
+ <div>
776
+ <p class="font-medium text-sm">浦西校区</p>
777
+ <p class="text-gray-500 text-xs">静安区南京西路1376号</p>
778
+ </div>
779
+ </div>
780
+ </div>
781
+ </div>
782
+ </div>
783
+
784
+ <div id="coaches-content" class="brand-popup-content hidden">
785
+ <h2 class="text-2xl font-bold mb-4 text-center">教练团队</h2>
786
+
787
+ <div class="space-y-4">
788
+ <!-- Coach 1 -->
789
+ <div class="flex items-start bg-gray-50 p-3 rounded-lg">
790
+ <img src="https://randomuser.me/api/portraits/men/32.jpg"
791
+ alt="王教练" class="w-16 h-16 rounded-full object-cover mr-3 border-2 border-blue-300">
792
+ <div class="flex-1">
793
+ <div class="flex justify-between items-start">
794
+ <div>
795
+ <h3 class="font-bold">王教练</h3>
796
+ <p class="text-blue-500 text-sm">国家一级运动员</p>
797
+ </div>
798
+ <div class="flex space-x-1">
799
+ <i class="fas fa-star text-yellow-400"></i>
800
+ <i class="fas fa-star text-yellow-400"></i>
801
+ <i class="fas fa-star text-yellow-400"></i>
802
+ <i class="fas fa-star text-yellow-400"></i>
803
+ <i class="fas fa-star text-yellow-400"></i>
804
+ </div>
805
+ </div>
806
+ <p class="text-gray-600 text-sm mt-1">
807
+ 专长: 手球基本功训练、战术指导<br>
808
+ 执教经验: 10年<br>
809
+ 个人成就: 前国家队队员，亚运会铜牌
810
+ </p>
811
+ </div>
812
+ </div>
813
+
814
+ <!-- Coach 2 -->
815
+ <div class="flex items-start bg-gray-50 p-3 rounded-lg">
816
+ <img src="https://randomuser.me/api/portraits/women/44.jpg"
817
+ alt="李教练" class="w-16 h-16 rounded-full object-cover mr-3 border-2 border-blue-300">
818
+ <div class="flex-1">
819
+ <div class="flex justify-between items-start">
820
+ <div>
821
+ <h3 class="font-bold">李教练</h3>
822
+ <p class="text-blue-500 text-sm">青少年训练专家</p>
823
+ </div>
824
+ <div class="flex space-x-1">
825
+ <i class="fas fa-star text-yellow-400"></i>
826
+ <i class="fas fa-star text-yellow-400"></i>
827
+ <i class="fas fa-star text-yellow-400"></i>
828
+ <i class="fas fa-star text-yellow-400"></i>
829
+ <i class="fas fa-star-half-alt text-yellow-400"></i>
830
+ </div>
831
+ </div>
832
+ <p class="text-gray-600 text-sm mt-1">
833
+ 专长: 青少年运动心理、团队建设<br>
834
+ 执教经验: 8年<br>
835
+ 教育背景: 北京体育大学运动心理学硕士
836
+ </p>
837
+ </div>
838
+ </div>
839
+
840
+ <!-- Coach 3 -->
841
+ <div class="flex items-start bg-gray-50 p-3 rounded-lg">
842
+ <img src="https://randomuser.me/api/portraits/men/75.jpg"
843
+ alt="张教练" class="w-16 h-16 rounded-full object-cover mr-3 border-2 border-blue-300">
844
+ <div class="flex-1">
845
+ <div class="flex justify-between items-start">
846
+ <div>
847
+ <h3 class="font-bold">张教练</h3>
848
+ <p class="text-blue-500 text-sm">体能训练主管</p>
849
+ </div>
850
+ <div class="flex space-x-1">
851
+ <i class="fas fa-star text-yellow-400"></i>
852
+ <i class="fas fa-star text-yellow-400"></i>
853
+ <i class="fas fa-star text-yellow-400"></i>
854
+ <i class="fas fa-star text-yellow-400"></i>
855
+ <i class="fas fa-star text-yellow-400"></i>
856
+ </div>
857
+ </div>
858
+ <p class="text-gray-600 text-sm mt-1">
859
+ 专长: 运动损伤预防、体能提升<br>
860
+ 资质: NSCA认证体能训练专家<br>
861
+ 个人格言: "科学训练，远离伤病"
862
+ </p>
863
+ </div>
864
+ </div>
865
+ </div>
866
+ </div>
867
+
868
+ <div id="highlights-content" class="brand-popup-content hidden">
869
+ <h2 class="text-2xl font-bold mb-4 text-center">精彩花絮</h2>
870
+
871
+ <div class="mb-4">
872
+ <div class="relative">
873
+ <img src="https://images.unsplash.com/photo-1540747913346-19e32dc3e97e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=900&q=80"
874
+ alt="训练花絮" class="w-full h-48 object-cover rounded-xl">
875
+ <div class="absolute inset-0 flex items-center justify-center">
876
+ <div class="w-12 h-12 bg-white bg-opacity-80 rounded-full flex items-center justify-center">
877
+ <i class="fas fa-play text-blue-500 text-xl"></i>
878
+ </div>
879
+ </div>
880
+ </div>
881
+ <p class="text-center text-sm mt-2">2023夏季训练营精彩集锦</p>
882
+ </div>
883
+
884
+ <div class="grid grid-cols-3 gap-2 mb-4">
885
+ <img src="https://images.unsplash.com/photo-1516478177764-9fe5bd7e9717?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=900&q=80"
886
+ alt="花絮" class="w-full h-24 object-cover rounded">
887
+ <img src="https://images.unsplash.com/photo-1517649763962-0c623066013b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=900&q=80"
888
+ alt="花絮" class="w-full h-24 object-cover rounded">
889
+ <img src="https://images.unsplash.com/photo-1527525443983-6e60c75fff46?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=900&q=80"
890
+ alt="花絮" class="w-full h-24 object-cover rounded">
891
+ <img src="https://images.unsplash.com/photo-1540747913346-19e32dc3e97e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=900&q=80"
892
+ alt="花絮" class="w-full h-24 object-cover rounded">
893
+ <img src="https://images.unsplash.com/photo-1516478177764-9fe5bd7e9717?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=900&q=80"
894
+ alt="花絮" class="w-full h-24 object-cover rounded">
895
+ <img src="https://images.unsplash.com/photo-1527525443983-6e60c75fff46?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=900&q=80"
896
+ alt="花絮" class="w-full h-24 object-cover rounded">
897
+ </div>
898
+
899
+ <button class="w-full bg-blue-500 text-white py-3 rounded-lg font-bold">
900
+ <i class="fas fa-images mr-2"></i> 查看全部相册
901
+ </button>
902
+ </div>
903
+ </div>
904
+ </div>
905
+ </div>
906
+
907
+ <!-- ID Card Popup (Hidden Initially) -->
908
+ <div id="idcard-popup" class="fixed inset-0 bg-black bg-opacity-50 z-20 hidden flex items-center justify-center p-4">
909
+ <div class="bg-white rounded-2xl w-full max-w-md overflow-hidden slide-up">
910
+ <div class="relative">
911
+ <div class="bg-gradient-to-r from-blue-500 to-blue-700 p-6 text-white">
912
+ <button onclick="hideIdCard()" class="absolute top-3 right-3 w-8 h-8 rounded-full flex items-center justify-center">
913
+ <i class="fas fa-times"></i>
914
+ </button>
915
+ <div class="text-center">
916
+ <h2 class="text-xl font-bold mb-1">手球少年俱乐部</h2>
917
+ <p class="text-xs opacity-80">电子学员证 · 2023-2024赛季</p>
918
+ </div>
919
+ </div>
920
+
921
+ <div class="p-6">
922
+ <div class="flex items-center">
923
+ <div class="relative mr-4">
924
+ <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=900&q=80"
925
+ alt="学员照片" class="w-20 h-20 rounded-full border-4 border-white object-cover shadow-md">
926
+ <div class="absolute -bottom-1 -right-1 bg-blue-500 text-white w-6 h-6 rounded-full flex items-center justify-center">
927
+ <i class="fas fa-check text-xs"></i>
928
+ </div>
929
+ </div>
930
+ <div>
931
+ <h3 class="font-bold text-xl">李小明</h3>
932
+ <div class="flex flex-wrap gap-1 mt-2">
933
+ <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-md text-xs">U12组</span>
934
+ <span class="bg-green-100 text-green-800 px-2 py-1 rounded-md text-xs">正式学员</span>
935
+ <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-md text-xs">黄金会员</span>
936
+ </div>
937
+ </div>
938
+ </div>
939
+
940
+ <div class="mt-6 grid grid-cols-2 gap-4">
941
+ <div>
942
+ <p class="text-xs text-gray-500 mb-1">学号</p>
943
+ <p class="font-medium">HS230815</p>
944
+ </div>
945
+ <div>
946
+ <p class="text-xs text-gray-500 mb-1">有效期</p>
947
+ <p class="font-medium">2023.09-2024.08</p>
948
+ </div>
949
+ <div>
950
+ <p class="text-xs text-gray-500 mb-1">教练</p>
951
+ <p class="font-medium">王教练</p>
952
+ </div>
953
+ <div>
954
+ <p class="text-xs text-gray-500 mb-1">训练组</p>
955
+ <p class="font-medium">周三A组</p>
956
+ </div>
957
+ </div>
958
+
959
+ <div class="mt-6 bg-gray-50 rounded-lg p-4">
960
+ <div class="flex items-center justify-between mb-2">
961
+ <p class="font-medium">二维码</p>
962
+ <button class="text-blue-500 text-sm">
963
+ <i class="fas fa-redo mr-1"></i> 刷新
964
+ </button>
965
+ </div>
966
+ <div class="flex justify-center">
967
+ <div class="w-32 h-32 bg-white p-2 rounded border border-gray-200 flex items-center justify-center">
968
+ <div class="w-full h-full bg-gray-200 flex items-center justify-center">
969
+ <p class="text-xs text-center">学员专属二维码</p>
970
+ </div>
971
+ </div>
972
+ </div>
973
+ <p class="text-xs text-gray-500 mt-2 text-center">场馆签到/赛事核验使用</p>
974
+ </div>
975
+
976
+ <div class="mt-6 flex space-x-3">
977
+ <button class="flex-1 border border-blue-500 text-blue-500 py-2 rounded-lg font-medium">
978
+ <i class="fas fa-share-alt mr-2"></i> 分享
979
+ </button>
980
+ <button class="flex-1 bg-blue-500 text-white py-2 rounded-lg font-medium">
981
+ <i class="fas fa-download mr-2"></i> 保存
982
+ </button>
983
+ </div>
984
+ </div>
985
+ </div>
986
+ </div>
987
+ </div>
988
+
989
+ <!-- Chat Detail (Hidden Initially) -->
990
+ <div id="chat-detail" class="fixed inset-0 bg-white z-20 hidden flex flex-col">
991
+ <!-- Chat Header -->
992
+ <div class="bg-white shadow-sm py-3 px-4 flex items-center justify-between border-b border-gray-200">
993
+ <div class="flex items-center">
994
+ <button onclick="hideChatDetail()" class="mr-3">
995
+ <i class="fas fa-auto"></i>
996
+ </button>
997
+ <div class="relative">
998
+ <img id="chat-avatar" src="https://randomuser.me/api/portraits/men/32.jpg"
999
+ alt="头像" class="w-10 h-10 rounded-full object-cover">
1000
+ <div id="chat-status" class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div>
1001
+ </div>
1002
+ <div class="ml-3">
1003
+ <h3 id="chat-name" class="font-bold">王教练</h3>
1004
+ <p id="chat-title" class="text-xs text-gray-500">国家一级运动员</p>
1005
+ </div>
1006
+ </div>
1007
+ <div class="flex items-center space-x-4">
1008
+ <button>
1009
+ <i class="fas fa-phone-alt text-blue-500"></i>
1010
+ </button>
1011
+ <button>
1012
+ <i class="fas fa-ellipsis-v text-gray-500"></i>
1013
+ </button>
1014
+ </div>
1015
+ </div>
1016
+
1017
+ <!-- Chat Messages -->
1018
+ <div class="flex-1 overflow-y-auto p-4 bg-gray-50" id="chat-messages">
1019
+ <!-- Messages will be inserted here by JavaScript -->
1020
+ </div>
1021
+
1022
+ <!-- Chat Input -->
1023
+ <div class="bg-white border-t border-gray-200 p-3">
1024
+ <div class="flex items-center">
1025
+ <button class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-2">
1026
+ <i class="fas fa-plus text-gray-500"></i>
1027
+ </button>
1028
+ <input type="text" placeholder="输入消息..."
1029
+ class="flex-1 bg-gray-100 rounded-full py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-300">
1030
+ <button class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center ml-2">
1031
+ <i class="fas fa-paper-plane text-white"></i>
1032
+ </button>
1033
+ </div>
1034
+ </div>
1035
+ </div>
1036
+
1037
+ <script>
1038
+ // Show main app and hide auth screen
1039
+ function showApp() {
1040
+ document.getElementById('auth-screen').classList.add('hidden');
1041
+ document.getElementById('app-container').classList.remove('hidden');
1042
+ document.getElementById('app-container').classList.add('flex');
1043
+ }
1044
+
1045
+ // Logout and return to auth screen
1046
+ function logout() {
1047
+ document.getElementById('auth-screen').classList.remove('hidden');
1048
+ document.getElementById('app-container').classList.remove('flex');
1049
+ document.getElementById('app-container').classList.add('hidden');
1050
+ }
1051
+
1052
+ // Switch between tabs
1053
+ function switchTab(tabName) {
1054
+ // Hide all tab contents
1055
+ document.querySelectorAll('.tab-content').forEach(content => {
1056
+ content.classList.add('hidden');
1057
+ content.classList.remove('active');
1058
+ });
1059
+
1060
+ // Show selected tab content
1061
+ document.getElementById(tabName + '-tab').classList.remove('hidden');
1062
+ document.getElementById(tabName + '-tab').classList.add('active');
1063
+
1064
+ // Update tab buttons
1065
+ document.querySelectorAll('.tab-button').forEach(button => {
1066
+ button.classList.remove('tab-active');
1067
+ });
1068
+ document.querySelector(`.tab-button[onclick="switchTab('${tabName}')"]`).classList.add('tab-active');
1069
+ }
1070
+
1071
+ // Show event popup
1072
+ function showEventPopup() {
1073
+ document.getElementById('event-popup').classList.remove('hidden');
1074
+ document.getElementById('event-popup').classList.add('flex');
1075
+ }
1076
+
1077
+ // Hide event popup
1078
+ function hideEventPopup() {
1079
+ document.getElementById('event-popup').classList.add('hidden');
1080
+ document.getElementById('event-popup').classList.remove('flex');
1081
+ }
1082
+
1083
+ // Show brand popup with specific content
1084
+ function showBrandPopup(content) {
1085
+ document.getElementById('brand-popup').classList.remove('hidden');
1086
+ document.getElementById('brand-popup').classList.add('flex');
1087
+
1088
+ // Hide all content divs
1089
+ document.querySelectorAll('.brand-popup-content').forEach(div => {
1090
+ div.classList.add('hidden');
1091
+ });
1092
+
1093
+ // Show selected content
1094
+ document.getElementById(content + '-content').classList.remove('hidden');
1095
+ }
1096
+
1097
+ // Hide brand popup
1098
+ function hideBrandPopup() {
1099
+ document.getElementById('brand-popup').classList.add('hidden');
1100
+ document.getElementById('brand-popup').classList.remove('flex');
1101
+ }
1102
+
1103
+ // Show ID card popup
1104
+ function showIdCard() {
1105
+ document.getElementById('idcard-popup').classList.remove('hidden');
1106
+ document.getElementById('idcard-popup').classList.add('flex');
1107
+ }
1108
+
1109
+ // Hide ID card popup
1110
+ function hideIdCard() {
1111
+ document.getElementById('idcard-popup').classList.add('hidden');
1112
+ document.getElementById('idcard-popup').classList.remove('flex');
1113
+ }
1114
+
1115
+ // Show chat detail with specific user
1116
+ function showChatDetail(type) {
1117
+ document.getElementById('chat-detail').classList.remove('hidden');
1118
+ document.getElementById('chat-detail').classList.add('flex');
1119
+
1120
+ // Clear previous messages
1121
+ document.getElementById('chat-messages').innerHTML = '';
1122
+
1123
+ // Set chat info based on type
1124
+ if (type === 'coach') {
1125
+ document.getElementById('chat-avatar').src = 'https://randomuser.me/api/portraits/men/32.jpg';
1126
+ document.getElementById('chat-name').textContent = '王教练';
1127
+ document.getElementById('chat-title').textContent = '国家一级运动员';
1128
+ document.getElementById('chat-status').classList.replace('bg-gray-400', 'bg-green-500');
1129
+
1130
+ // Add some sample messages
1131
+ addMessage('coach', '李小明家长您好，明天的训练课请提前15分钟到达场地', '09:30');
1132
+ addMessage('me', '好的王教练，我们一定准时到', '09:32');
1133
+ addMessage('coach', '最近小明的进步很大，特别是在手部力量方面', '09:33');
1134
+ addMessage('me', '谢谢王教练的指导，他自己也特别喜欢训练', '09:35');
1135
+ addMessage('coach', '下个月我们有场友谊赛，建议小明参加锻炼一下', '10:15');
1136
+ } else if (type === 'service') {
1137
+ document.getElementById('chat-avatar').src = '';
1138
+ document.getElementById('chat-avatar').className = 'w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center';
1139
+ document.getElementById('chat-avatar').innerHTML = '<i class="fas fa-headset text-blue-500"></i>';
1140
+ document.getElementById('chat-name').textContent = '客服中心';
1141
+ document.getElementById('chat-title').textContent = '服务时间: 9:00-18:00';
1142
+ document.getElementById('chat-status').classList.replace('bg-green-500', 'bg-gray-400');
1143
+
1144
+ // Add some sample messages
1145
+ addMessage('service', '您好，有什么可以帮您？', '昨天 14:20');
1146
+ addMessage('me', '我想咨询一下暑期训练营的报名', '昨天 14:22');
1147
+ addMessage('service', '请稍等，我为您查询相关信息...', '昨天 14:22');
1148
+ addMessage('service', '2023暑期训练营从7月1日开始，包含基础班和提高班两种', '昨天 14:24');
1149
+ } else if (type === 'team') {
1150
+ document.getElementById('chat-avatar').src = 'https://randomuser.me/api/portraits/women/44.jpg';
1151
+ document.getElementById('chat-name').textContent = '李教练';
1152
+ document.getElementById('chat-title').textContent = '青少年训练专家';
1153
+ document.getElementById('chat-status').classList.replace('bg-gray-400', 'bg-green-500');
1154
+
1155
+ // Add some sample messages
1156
+ addMessage('team', '各位U12组家长好，本周六训练时间调整为下午3点', '周三 08:15');
1157
+ addMessage('team', '请大家携带护具和水杯，训练强度会稍微加大', '周三 08:16');
1158
+ addMessage('me', '收到，谢谢李教练', '周三 09:30');
1159
+ }
1160
+
1161
+ // Scroll to bottom
1162
+ setTimeout(() => {
1163
+ document.getElementById('chat-messages').scrollTop = document.getElementById('chat-messages').scrollHeight;
1164
+ }, 100);
1165
+ }
1166
+
1167
+ // Hide chat detail
1168
+ function hideChatDetail() {
1169
+ document.getElementById('chat-detail').classList.add('hidden');
1170
+ document.getElementById('chat-detail').classList.remove('flex');
1171
+ }
1172
+
1173
+ // Helper function to add message to chat
1174
+ function addMessage(sender, text, time) {
1175
+ const messages = document.getElementById('chat-messages');
1176
+
1177
+ if (sender === 'me') {
1178
+ messages.innerHTML += `
1179
+ <div class="flex justify-end mb-3">
1180
+ <div class="max-w-xs lg:max-w-md">
1181
+ <div class="bg-blue-500 text-white p-3 rounded-xl rounded-br-none">
1182
+ ${text}
1183
+ </div>
1184
+ <div class="text-xs text-gray-500 text-right mt-1">${time}</div>
1185
+ </div>
1186
+ </div>
1187
+ `;
1188
+ } else {
1189
+ messages.innerHTML += `
1190
+ <div class="flex justify-start mb-3">
1191
+ <div class="max-w-xs lg:max-w-md">
1192
+ <div class="bg-white p-3 rounded-xl rounded-bl-none shadow">
1193
+ ${text}
1194
+ </div>
1195
+ <div class="text-xs text-gray-500 mt-1">${time}</div>
1196
+ </div>
1197
+ </div>
1198
+ `;
1199
+ }
1200
+ }
1201
+ </script>
1202
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=seascheng/handball-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1203
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ 设计一款面向青少年手球运动员与家庭用户的移动端 App，整体风格要现代、年轻、有运动感，适合教育类/体育类使用场景。 ✅ 基础功能： • 支持扫码注册与登录、创建学员档案、线上缴费、生成电子名片； • 报名海报、活动内容通过弹窗方式展示； ✅ 首页模块： • 直播区块：包含背景图、直播中状态提示； • 赛事预告区块：展示赛事状态（预热中、已缴费、备战中、比赛中、已结束）； • 品牌区块：公司介绍、俱乐部介绍（细分：教练团队卡片/公司介绍/课程体系）、花絮展示； ✅ 训练报告区： • 与智能脚环配合展示课后训练数据报告，包含数据统计、训练建议、成长轨迹； ✅ 即时通讯： • 支持用户与客服/教练在线沟通； ✅ 我的中心： • 支持订单管理、绑定多个学员、切换学员档案； ✅ 设计风格建议： • 卡片式界面，模块清晰； • 配色活泼但不过于跳脱（可参考 Nike Training Club、Adidas Running 等配色）； • 图标生动、偏圆润，强调“运动感”与“成长感”； • 动画/动效适度，强调状态变化与个人成就展示； • 界面需兼顾父母端与青少年端的使用体验； ✅ 推荐界面原型图： • 注册 / 登录页 • 学员档案 / 电子名片页 • 首页（含直播、赛事、品牌三大区块） • 活动弹窗页 • 训练报告页 • 聊天对话页 • 个人中心页（支持多学员切换） 界面为常见的 tab bar+navigation bar结构，要求生成全部 tab bar 子页面的设计，界面为中文