Hugging Face's logo

Spaces:
seascheng
/
handball-2
Running

App Files Community
seascheng commited on
Commit
f6cc13c
·
verified ·
1 Parent(s): 2f43dfb

设计一款面向青少年手球运动员与家庭用户的移动端 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 +909 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Handball 2
3
- emoji: 📚
4
- colorFrom: indigo
5
- colorTo: purple
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-2
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: pink
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,909 @@
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-track {
21
+ background: linear-gradient(90deg, #3B82F6 0%, #10B981 50%, #EF4444 100%);
22
+ }
23
+ .slide-up {
24
+ animation: slideUp 0.5s ease-out;
25
+ }
26
+ @keyframes slideUp {
27
+ from { transform: translateY(20px); opacity: 0; }
28
+ to { transform: translateY(0); opacity: 1; }
29
+ }
30
+ .blob {
31
+ border-radius: 50% 50% 45% 55% / 60% 40% 60% 40%;
32
+ }
33
+ </style>
34
+ </head>
35
+ <body class="bg-gray-50 font-sans text-gray-800">
36
+ <!-- App Container -->
37
+ <div class="max-w-md mx-auto bg-white min-h-screen flex flex-col">
38
+ <!-- Navigation Bar -->
39
+ <header class="bg-gradient-to-r from-blue-600 to-purple-600 text-white p-4 shadow-md">
40
+ <div class="flex justify-between items-center">
41
+ <button class="p-2 rounded-full bg-white/20">
42
+ <i class="fas fa-bars"></i>
43
+ </button>
44
+ <h1 class="text-xl font-bold">手球梦工场</h1>
45
+ <button class="p-2 rounded-full bg-white/20">
46
+ <i class="fas fa-user-circle"></i>
47
+ </button>
48
+ </div>
49
+ </header>
50
+
51
+ <!-- Main Content Area -->
52
+ <main class="flex-1 overflow-y-auto pb-20">
53
+ <!-- Tab Content - This would change based on selected tab -->
54
+ <div class="p-4 space-y-6" id="home-content">
55
+ <!-- Live Section -->
56
+ <section class="relative rounded-xl overflow-hidden shadow-lg">
57
+ <img src="https://images.unsplash.com/photo-1540747913346-19e32dc3e97e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
58
+ alt="手球训练现场" class="w-full h-48 object-cover">
59
+ <div class="absolute inset-0 bg-black/30 flex items-center justify-center">
60
+ <div class="text-center">
61
+ <span class="live-badge bg-red-500 text-white px-3 py-1 rounded-full text-sm font-bold mb-2 inline-flex items-center">
62
+ <span class="w-2 h-2 bg-white rounded-full mr-2 animate-pulse"></span>
63
+ 直播中
64
+ </span>
65
+ <h3 class="text-white text-xl font-bold">今日训练公开课</h3>
66
+ <p class="text-white/90 text-sm">教练: 张明</p>
67
+ </div>
68
+ </div>
69
+ <button class="absolute bottom-4 right-4 bg-white/90 text-blue-600 p-2 rounded-full shadow-md">
70
+ <i class="fas fa-play"></i>
71
+ </button>
72
+ </section>
73
+
74
+ <!-- Events Section -->
75
+ <section>
76
+ <h2 class="text-lg font-bold mb-3 flex items-center">
77
+ <span class="bg-blue-100 text-blue-600 p-2 rounded-full mr-2">
78
+ <i class="fas fa-calendar-alt"></i>
79
+ </span>
80
+ 赛事预告
81
+ </h2>
82
+
83
+ <div class="grid grid-cols-2 gap-3">
84
+ <!-- Event Card 1 -->
85
+ <div class="bg-white border border-gray-100 rounded-xl p-4 shadow-sm hover:shadow-md transition">
86
+ <div class="relative">
87
+ <img src="https://images.unsplash.com/photo-1543351611-58f69d7c1781?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
88
+ alt="赛事宣传" class="w-full h-20 object-cover rounded-lg mb-2">
89
+ <span class="absolute top-2 left-2 bg-yellow-400/90 text-yellow-900 text-xs px-2 py-1 rounded-full">预热中</span>
90
+ </div>
91
+ <h3 class="font-semibold text-sm">青少年手球联赛夏季赛</h3>
92
+ <p class="text-gray-500 text-xs mt-1">2023.07.15 ~ 2023.07.20</p>
93
+ <button class="mt-2 w-full bg-blue-100 text-blue-600 py-1 rounded-lg text-sm font-medium">了解详情</button>
94
+ </div>
95
+
96
+ <!-- Event Card 2 -->
97
+ <div class="bg-white border border-gray-100 rounded-xl p-4 shadow-sm hover:shadow-md transition">
98
+ <div class="relative">
99
+ <img src="https://images.unsplash.com/photo-1517649763962-0c623066013b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
100
+ alt="赛事宣传" class="w-full h-20 object-cover rounded-lg mb-2">
101
+ <span class="absolute top-2 left-2 bg-green-400/90 text-green-900 text-xs px-2 py-1 rounded-full">已缴费</span>
102
+ </div>
103
+ <h3 class="font-semibold text-sm">周末友谊训练赛</h3>
104
+ <p class="text-gray-500 text-xs mt-1">2023.06.10 14:00</p>
105
+ <button class="mt-2 w-full bg-blue-100 text-blue-600 py-1 rounded-lg text-sm font-medium">查看详情</button>
106
+ </div>
107
+ </div>
108
+ </section>
109
+
110
+ <!-- Brand Section -->
111
+ <section>
112
+ <h2 class="text-lg font-bold mb-3 flex items-center">
113
+ <span class="bg-purple-100 text-purple-600 p-2 rounded-full mr-2">
114
+ <i class="fas fa-star"></i>
115
+ </span>
116
+ 俱乐部风采
117
+ </h2>
118
+
119
+ <div class="space-y-4">
120
+ <!-- Coach Team -->
121
+ <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
122
+ <div class="flex justify-between items-center mb-3">
123
+ <h3 class="font-semibold text-base">明星教练团队</h3>
124
+ <button class="text-blue-500 text-sm">查看全部 ></button>
125
+ </div>
126
+
127
+ <div class="flex space-x-3 overflow-x-auto pb-2">
128
+ <!-- Coach 1 -->
129
+ <div class="flex-shrink-0">
130
+ <div class="relative">
131
+ <div class="w-16 h-16 rounded-full bg-gradient-to-r from-amber-400 to-orange-500 flex items-center justify-center overflow-hidden blob">
132
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="教练" class="w-full h-full object-cover">
133
+ </div>
134
+ <span class="absolute -bottom-1 -right-1 bg-white border border-blue-500 text-blue-500 text-xs w-5 h-5 rounded-full flex items-center justify-center">
135
+ <i class="fas fa-check"></i>
136
+ </span>
137
+ </div>
138
+ <p class="text-center text-xs mt-1 font-medium">张教练</p>
139
+ </div>
140
+
141
+ <!-- Coach 2 -->
142
+ <div class="flex-shrink-0">
143
+ <div class="w-16 h-16 rounded-full bg-gradient-to-r from-blue-400 to-cyan-500 flex items-center justify-center overflow-hidden blob">
144
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="教练" class="w-full h-full object-cover">
145
+ </div>
146
+ <p class="text-center text-xs mt-1 font-medium">李教练</p>
147
+ </div>
148
+
149
+ <!-- Coach 3 -->
150
+ <div class="flex-shrink-0">
151
+ <div class="w-16 h-16 rounded-full bg-gradient-to-r from-purple-400 to-pink-500 flex items-center justify-center overflow-hidden blob">
152
+ <img src="https://randomuser.me/api/portraits/men/67.jpg" alt="教练" class="w-full h-full object-cover">
153
+ </div>
154
+ <p class="text-center text-xs mt-1 font-medium">王教练</p>
155
+ </div>
156
+
157
+ <!-- Add more button -->
158
+ <div class="flex-shrink-0">
159
+ <div class="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center">
160
+ <i class="fas fa-plus text-gray-400"></i>
161
+ </div>
162
+ <p class="text-center text-xs mt-1 text-gray-400">更多</p>
163
+ </div>
164
+ </div>
165
+ </div>
166
+
167
+ <!-- About Brand -->
168
+ <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
169
+ <h3 class="font-semibold text-base mb-2">关于我们</h3>
170
+ <p class="text-gray-600 text-sm">青少年手球梦工场成立于2018年，致力于为6-18岁青少年提供专业手球训练。我们拥有国家级教练团队和先进的训练体系，已培养百余名选手进入省市代表队。</p>
171
+ <button class="mt-3 text-blue-500 text-sm font-medium flex items-center">
172
+ 了解更多 <i class="fas fa-chevron-right ml-1 text-xs"></i>
173
+ </button>
174
+ </div>
175
+
176
+ <!-- Course System -->
177
+ <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
178
+ <h3 class="font-semibold text-base mb-2">课程体系</h3>
179
+ <div class="grid grid-cols-3 gap-2">
180
+ <div class="bg-blue-50 text-blue-700 text-xs p-2 rounded-lg text-center">
181
+ 启蒙班
182
+ </div>
183
+ <div class="bg-green-50 text-green-700 text-xs p-2 rounded-lg text-center">
184
+ 进阶班
185
+ </div>
186
+ <div class="bg-purple-50 text-purple-700 text-xs p-2 rounded-lg text-center">
187
+ 竞赛班
188
+ </div>
189
+ </div>
190
+ <button class="mt-3 text-blue-500 text-sm font-medium flex items-center">
191
+ 查看课程详情 <i class="fas fa-chevron-right ml-1 text-xs"></i>
192
+ </button>
193
+ </div>
194
+
195
+ <!-- Gallery -->
196
+ <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
197
+ <h3 class="font-semibold text-base mb-3">精彩花絮</h3>
198
+ <div class="grid grid-cols-2 gap-2">
199
+ <img src="https://images.unsplash.com/photo-1551958219-acbc608c9097?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
200
+ alt="训练花絮" class="h-20 rounded-lg object-cover">
201
+ <img src="https://images.unsplash.com/photo-1541213300306-2f92e6b09d1f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
202
+ alt="训练花絮" class="h-20 rounded-lg object-cover">
203
+ <img src="https://images.unsplash.com/photo-1519861531473-9200262188bf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
204
+ alt="训练花絮" class="h-20 rounded-lg object-cover">
205
+ <div class="h-20 rounded-lg bg-gray-100 flex items-center justify-center">
206
+ <span class="text-xs text-gray-500">+ 更多</span>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </div>
211
+ </section>
212
+ </div>
213
+
214
+ <!-- Other Tab Contents (Hidden by default, will be shown when tabs are clicked) -->
215
+ <!-- Training Report Content -->
216
+ <div class="p-4 space-y-6 hidden" id="report-content">
217
+ <section>
218
+ <h2 class="text-lg font-bold mb-3 flex items-center">
219
+ <span class="bg-green-100 text-green-600 p-2 rounded-full mr-2">
220
+ <i class="fas fa-chart-line"></i>
221
+ </span>
222
+ 训练报告
223
+ </h2>
224
+
225
+ <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
226
+ <div class="flex justify-between items-center mb-4">
227
+ <div>
228
+ <h3 class="font-bold text-base">本周训练数据</h3>
229
+ <p class="text-gray-500 text-sm">2023.06.01 ~ 2023.06.07</p>
230
+ </div>
231
+ <div class="bg-blue-100 text-blue-600 px-3 py-1 rounded-full text-sm font-medium">
232
+ 张三 (8岁)
233
+ </div>
234
+ </div>
235
+
236
+ <div class="grid grid-cols-4 gap-2 text-center mb-4">
237
+ <div class="bg-blue-50 p-2 rounded-lg">
238
+ <p class="text-2xl font-bold text-blue-600">4.2</p>
239
+ <p class="text-xs text-gray-500">公里</p>
240
+ </div>
241
+ <div class="bg-green-50 p-2 rounded-lg">
242
+ <p class="text-2xl font-bold text-green-600">3680</p>
243
+ <p class="text-xs text-gray-500">步数</p>
244
+ </div>
245
+ <div class="bg-yellow-50 p-2 rounded-lg">
246
+ <p class="text-2xl font-bold text-yellow-600">96</p>
247
+ <p class="text-xs text-gray-500">投球数</p>
248
+ </div>
249
+ <div class="bg-purple-50 p-2 rounded-lg">
250
+ <p class="text-2xl font-bold text-purple-600">87%</p>
251
+ <p class="text-xs text-gray-500">命中率</p>
252
+ </div>
253
+ </div>
254
+
255
+ <div class="mb-4">
256
+ <div class="flex justify-between text-sm mb-1">
257
+ <span>训练强度</span>
258
+ <span>中高强度</span>
259
+ </div>
260
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
261
+ <div class="bg-gradient-to-r from-yellow-400 to-orange-500 h-2.5 rounded-full" style="width: 65%"></div>
262
+ </div>
263
+ </div>
264
+
265
+ <div class="mb-4">
266
+ <div class="flex justify-between items-center mb-2">
267
+ <h4 class="font-medium text-sm">成长轨迹</h4>
268
+ <button class="text-blue-500 text-xs">查看历史</button>
269
+ </div>
270
+ <div class="bg-gray-50 rounded-lg p-3">
271
+ <div class="relative h-20">
272
+ <div class="progress-track absolute w-full h-1 top-1/2 transform -translate-y-1/2 rounded-full"></div>
273
+ <div class="absolute left-0 top-1/2 transform -translate-y-1/2 w-4 h-4 bg-blue-600 rounded-full border-2 border-white"></div>
274
+ <div class="absolute left-1/2 top-1/2 transform -translate-y-1/2 w-4 h-4 bg-green-500 rounded-full border-2 border-white"></div>
275
+ <div class="absolute right-0 top-1/2 transform -translate-y-1/2 w-4 h-4 bg-purple-500 rounded-full border-2 border-white"></div>
276
+ </div>
277
+ <div class="grid grid-cols-3 text-xs text-center mt-6">
278
+ <div>
279
+ <p class="font-medium">1月</p>
280
+ <p class="text-gray-500">60分</p>
281
+ </div>
282
+ <div>
283
+ <p class="font-medium">3月</p>
284
+ <p class="text-gray-500">75分</p>
285
+ </div>
286
+ <div>
287
+ <p class="font-medium">6月</p>
288
+ <p class="text-gray-500">87分</p>
289
+ </div>
290
+ </div>
291
+ </div>
292
+ </div>
293
+
294
+ <div class="bg-yellow-50 border border-yellow-100 rounded-lg p-3">
295
+ <div class="flex items-start">
296
+ <div class="bg-yellow-100 text-yellow-600 p-2 rounded-full mr-2">
297
+ <i class="fas fa-lightbulb"></i>
298
+ </div>
299
+ <div>
300
+ <h4 class="font-medium text-sm mb-1">教练建议</h4>
301
+ <p class="text-gray-700 text-sm">张三本周进步明显，投球力度有所提升，建议下周加强移动中的接球训练，继续增强下肢力量。</p>
302
+ </div>
303
+ </div>
304
+ </div>
305
+ </div>
306
+ </section>
307
+
308
+ <section>
309
+ <h3 class="font-bold text-base mb-2 flex items-center">
310
+ <span class="bg-gradient-to-r from-blue-400 to-purple-500 text-white p-2 rounded-full mr-2 text-sm">
311
+ <i class="fas fa-medal"></i>
312
+ </span>
313
+ 成就徽章
314
+ </h3>
315
+
316
+ <div class="grid grid-cols-3 gap-3">
317
+ <div class="bg-white border border-gray-100 rounded-xl p-3 flex flex-col items-center shadow-sm">
318
+ <div class="w-12 h-12 bg-blue-100 text-blue-500 rounded-full flex items-center justify-center mb-2">
319
+ <i class="fas fa-bolt"></i>
320
+ </div>
321
+ <p class="text-xs font-medium text-center">闪电快手</p>
322
+ <p class="text-[10px] text-gray-500 text-center">完成100次快速投球</p>
323
+ </div>
324
+
325
+ <div class="bg-white border border-gray-100 rounded-xl p-3 flex flex-col items-center shadow-sm">
326
+ <div class="w-12 h-12 bg-green-100 text-green-500 rounded-full flex items-center justify-center mb-2">
327
+ <i class="fas fa-fire"></i>
328
+ </div>
329
+ <p class="text-xs font-medium text-center">耐力王</p>
330
+ <p class="text-[10px] text-gray-500 text-center">连续3周每日训练</p>
331
+ </div>
332
+
333
+ <div class="bg-white border border-gray-100 rounded-xl p-3 flex flex-col items-center shadow-sm relative">
334
+ <div class="w-12 h-12 bg-gray-100 text-gray-400 rounded-full flex items-center justify-center mb-2">
335
+ <i class="fas fa-lock"></i>
336
+ </div>
337
+ <p class="text-xs font-medium text-center">??</p>
338
+ <p class="text-[10px] text-gray-500 text-center">待解锁</p>
339
+ </div>
340
+ </div>
341
+ </section>
342
+ </div>
343
+
344
+ <!-- Message Content -->
345
+ <div class="p-4 space-y-6 hidden" id="message-content">
346
+ <section>
347
+ <h2 class="text-lg font-bold mb-3 flex items-center">
348
+ <span class="bg-pink-100 text-pink-600 p-2 rounded-full mr-2">
349
+ <i class="fas fa-comments"></i>
350
+ </span>
351
+ 消息中心
352
+ </h2>
353
+
354
+ <div class="space-y-3">
355
+ <!-- Chat Item 1 -->
356
+ <div class="bg-white rounded-xl p-3 shadow-sm border border-gray-100 flex items-center">
357
+ <div class="relative mr-3">
358
+ <div class="w-12 h-12 rounded-full bg-gradient-to-r from-blue-400 to-cyan-500 flex items-center justify-center overflow-hidden">
359
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="教练" class="w-full h-full object-cover">
360
+ </div>
361
+ <span class="absolute -bottom-1 -right-1 bg-green-400 border-2 border-white w-3 h-3 rounded-full"></span>
362
+ </div>
363
+ <div class="flex-1">
364
+ <div class="flex justify-between items-center">
365
+ <h3 class="font-medium">张教练</h3>
366
+ <span class="text-gray-400 text-xs">10:25</span>
367
+ </div>
368
+ <p class="text-sm text-gray-500 truncate">关于下周比赛的战术安排已经发在群里了...</p>
369
+ </div>
370
+ </div>
371
+
372
+ <!-- Chat Item 2 -->
373
+ <div class="bg-white rounded-xl p-3 shadow-sm border border-gray-100 flex items-center">
374
+ <div class="relative mr-3">
375
+ <div class="w-12 h-12 rounded-full bg-gradient-to-r from-purple-400 to-pink-500 flex items-center justify-center text-white">
376
+ <i class="fas fa-headset"></i>
377
+ </div>
378
+ </div>
379
+ <div class="flex-1">
380
+ <div class="flex justify-between items-center">
381
+ <h3 class="font-medium">客服中心</h3>
382
+ <span class="text-gray-400 text-xs">昨天</span>
383
+ </div>
384
+ <p class="text-sm text-gray-500 truncate">您关于夏季装备的咨询我们已经收到...</p>
385
+ </div>
386
+ </div>
387
+
388
+ <!-- Chat Item 3 -->
389
+ <div class="bg-white rounded-xl p-3 shadow-sm border border-gray-100 flex items-center">
390
+ <div class="relative mr-3">
391
+ <div class="w-12 h-12 rounded-full bg-gradient-to-r from-amber-400 to-orange-500 flex items-center justify-center overflow-hidden">
392
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="教练" class="w-full h-full object-cover">
393
+ </div>
394
+ </div>
395
+ <div class="flex-1">
396
+ <div class="flex justify-between items-center">
397
+ <h3 class="font-medium">李教练</h3>
398
+ <span class="text-gray-400 text-xs">周一</span>
399
+ </div>
400
+ <p class="text-sm text-gray-500 truncate">张三最近的训练报告已更新...</p>
401
+ </div>
402
+ <span class="bg-red-500 text-white text-xs w-5 h-5 rounded-full flex items-center justify-center ml-2">2</span>
403
+ </div>
404
+ </div>
405
+ </section>
406
+ </div>
407
+
408
+ <!-- Chat Detail Content (hidden by default) -->
409
+ <div class="hidden" id="chat-detail-content">
410
+ <div class="h-full flex flex-col">
411
+ <!-- Chat Header -->
412
+ <div class="bg-gradient-to-r from-blue-500 to-purple-500 text-white p-4 flex items-center">
413
+ <button class="mr-2" onclick="showTab('message-content')">
414
+ <i class="fas fa-arrow-left"></i>
415
+ </button>
416
+ <div class="w-10 h-10 rounded-full bg-white/20 mr-3 flex items-center justify-center overflow-hidden">
417
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="教练" class="w-full h-full object-cover">
418
+ </div>
419
+ <div>
420
+ <h3 class="font-medium">张教练</h3>
421
+ <p class="text-xs opacity-80">在线</p>
422
+ </div>
423
+ </div>
424
+
425
+ <!-- Chat Messages -->
426
+ <div class="flex-1 p-4 space-y-4 overflow-y-auto bg-gray-50">
427
+ <!-- Date -->
428
+ <div class="text-center">
429
+ <span class="bg-white px-3 py-1 rounded-full text-xs text-gray-500 shadow-sm">2023年6月8日</span>
430
+ </div>
431
+
432
+ <!-- Received Message -->
433
+ <div class="flex items-start space-x-2">
434
+ <div class="w-8 h-8 rounded-full bg-blue-100 flex-shrink-0 mt-1 overflow-hidden">
435
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="教练" class="w-full h-full object-cover">
436
+ </div>
437
+ <div class="max-w-xs">
438
+ <div class="bg-white px-4 py-2 rounded-xl shadow-sm">
439
+ <p class="text-sm">张三家长您好，这是本周的训练报告，请查收</p>
440
+ </div>
441
+ <p class="text-xs text-gray-500 mt-1">10:25</p>
442
+ </div>
443
+ </div>
444
+
445
+ <!-- Sent Message -->
446
+ <div class="flex items-start space-x-2 justify-end">
447
+ <div class="max-w-xs">
448
+ <div class="bg-blue-100 px-4 py-2 rounded-xl">
449
+ <p class="text-sm">好的，谢谢张教练，我看到投球命中率进步很大</p>
450
+ </div>
451
+ <p class="text-xs text-gray-500 mt-1 text-right">10:27</p>
452
+ </div>
453
+ <div class="w-8 h-8 rounded-full bg-gray-200 flex-shrink-0 mt-1 overflow-hidden">
454
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="家长" class="w-full h-full object-cover">
455
+ </div>
456
+ </div>
457
+
458
+ <!-- Received Message with Image -->
459
+ <div class="flex items-start space-x-2">
460
+ <div class="w-8 h-8 rounded-full bg-blue-100 flex-shrink-0 mt-1 overflow-hidden">
461
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="教练" class="w-full h-full object-cover">
462
+ </div>
463
+ <div class="max-w-xs">
464
+ <div class="bg-white px-4 py-2 rounded-xl shadow-sm">
465
+ <p class="text-sm">这是在训练中抓拍的精彩瞬间</p>
466
+ <img src="https://images.unsplash.com/photo-1540747913346-19e32dc3e97e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
467
+ class="mt-2 rounded-lg w-full">
468
+ </div>
469
+ <p class="text-xs text-gray-500 mt-1">10:28</p>
470
+ </div>
471
+ </div>
472
+ </div>
473
+
474
+ <!-- Message Input -->
475
+ <div class="p-3 border-t border-gray-200 bg-white">
476
+ <div class="flex items-center space-x-2">
477
+ <button class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center">
478
+ <i class="fas fa-plus text-gray-500"></i>
479
+ </button>
480
+ <input type="text" placeholder="输入消息..."
481
+ class="flex-1 border border-gray-200 rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
482
+ <button class="w-10 h-10 rounded-full bg-blue-500 text-white flex items-center justify-center">
483
+ <i class="fas fa-paper-plane"></i>
484
+ </button>
485
+ </div>
486
+ </div>
487
+ </div>
488
+ </div>
489
+
490
+ <!-- Profile Content -->
491
+ <div class="p-4 hidden" id="profile-content">
492
+ <section>
493
+ <div class="flex flex-col items-center mb-6">
494
+ <div class="relative mb-3">
495
+ <div class="w-20 h-20 rounded-full bg-gradient-to-r from-blue-500 to-purple-500 flex items-center justify-center overflow-hidden shadow-lg">
496
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="家长" class="w-full h-full object-cover">
497
+ </div>
498
+ <button class="absolute bottom-0 right-0 bg-white p-1 rounded-full border border-gray-200">
499
+ <i class="fas fa-camera text-blue-500 text-xs"></i>
500
+ </button>
501
+ </div>
502
+ <h2 class="text-xl font-bold">李女士</h2>
503
+ <p class="text-gray-500 text-sm">家长账号</p>
504
+ </div>
505
+
506
+ <div class="space-y-4">
507
+ <!-- Student Switch -->
508
+ <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
509
+ <h3 class="font-semibold text-base mb-3 flex items-center">
510
+ <span class="bg-blue-100 text-blue-600 p-2 rounded-full mr-2">
511
+ <i class="fas fa-users"></i>
512
+ </span>
513
+ 学员管理
514
+ </h3>
515
+
516
+ <div class="flex items-center justify-between mb-3">
517
+ <div class="flex items-center">
518
+ <div class="w-12 h-12 rounded-full bg-blue-100 mr-3 flex items-center justify-center overflow-hidden">
519
+ <img src="https://randomuser.me/api/portraits/boys/12.jpg" alt="学员" class="w-full h-full object-cover">
520
+ </div>
521
+ <div>
522
+ <h4 class="font-medium">张三</h4>
523
+ <p class="text-gray-500 text-xs">8岁 | 进阶班</p>
524
+ </div>
525
+ </div>
526
+ <span class="bg-blue-100 text-blue-600 px-3 py-1 rounded-full text-xs">当前</span>
527
+ </div>
528
+
529
+ <div class="flex items-center justify-between">
530
+ <div class="flex items-center">
531
+ <div class="w-12 h-12 rounded-full bg-gray-100 mr-3 flex items-center justify-center overflow-hidden">
532
+ <img src="https://randomuser.me/api/portraits/girls/23.jpg" alt="学员" class="w-full h-full object-cover">
533
+ </div>
534
+ <div>
535
+ <h4 class="font-medium">张小小</h4>
536
+ <p class="text-gray-500 text-xs">6岁 | 启蒙班</p>
537
+ </div>
538
+ </div>
539
+ <button class="text-blue-500 text-sm">切换</button>
540
+ </div>
541
+
542
+ <button class="mt-4 w-full border-2 border-dashed border-gray-300 rounded-lg py-2 text-sm text-blue-500 font-medium flex items-center justify-center">
543
+ <i class="fas fa-plus mr-1"></i> 添加学员
544
+ </button>
545
+ </div>
546
+
547
+ <!-- Order Management -->
548
+ <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
549
+ <h3 class="font-semibold text-base mb-3 flex items-center">
550
+ <span class="bg-green-100 text-green-600 p-2 rounded-full mr-2">
551
+ <i class="fas fa-receipt"></i>
552
+ </span>
553
+ 订单管理
554
+ </h3>
555
+
556
+ <div class="flex justify-between items-center mb-1">
557
+ <p class="text-sm">青少年夏季联赛报名</p>
558
+ <span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded-full">已完成</span>
559
+ </div>
560
+ <p class="text-xs text-gray-500 mb-3">订单号: XK202306011234 | 2023.06.01</p>
561
+
562
+ <div class="flex justify-between items-center">
563
+ <p class="text-sm">周末训练营课程包</p>
564
+ <span class="text-xs bg-yellow-100 text-yellow-600 px-2 py-1 rounded-full">待支付</span>
565
+ </div>
566
+ <p class="text-xs text-gray-500">订单号: XK202305281234 | 2023.05.28</p>
567
+
568
+ <button class="mt-3 text-sm text-blue-500 font-medium flex items-center justify-center">
569
+ 查看全部订单 <i class="fas fa-chevron-right ml-1"></i>
570
+ </button>
571
+ </div>
572
+
573
+ <!-- Electronic Badge -->
574
+ <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
575
+ <h3 class="font-semibold text-base mb-3 flex items-center">
576
+ <span class="bg-purple-100 text-purple-600 p-2 rounded-full mr-2">
577
+ <i class="fas fa-id-card"></i>
578
+ </span>
579
+ 电子名片
580
+ </h3>
581
+
582
+ <div class="bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg p-4 text-white relative overflow-hidden">
583
+ <div class="absolute -right-10 -top-10 w-20 h-20 bg-white/10 rounded-full"></div>
584
+ <div class="absolute -right-5 -bottom-5 w-16 h-16 bg-white/10 rounded-full"></div>
585
+
586
+ <div class="relative z-10">
587
+ <div class="flex items-center mb-4">
588
+ <div class="w-12 h-12 rounded-full bg-white/20 mr-3 flex items-center justify-center overflow-hidden border-2 border-white">
589
+ <img src="https://randomuser.me/api/portraits/boys/12.jpg" alt="学员" class="w-full h-full object-cover">
590
+ </div>
591
+ <div>
592
+ <h4 class="font-bold">张三</h4>
593
+ <p class="text-xs opacity-80">手球梦工场 · 学员</p>
594
+ </div>
595
+ </div>
596
+
597
+ <div class="grid grid-cols-2 gap-3 text-sm">
598
+ <div>
599
+ <p class="text-xs opacity-80">年龄</p>
600
+ <p class="font-medium">8岁</p>
601
+ </div>
602
+ <div>
603
+ <p class="text-xs opacity-80">课程</p>
604
+ <p class="font-medium">进阶班</p>
605
+ </div>
606
+ <div>
607
+ <p class="text-xs opacity-80">加入</p>
608
+ <p class="font-medium">2022.09</p>
609
+ </div>
610
+ <div>
611
+ <p class="text-xs opacity-80">教练</p>
612
+ <p class="font-medium">张教练</p>
613
+ </div>
614
+ </div>
615
+ </div>
616
+ </div>
617
+
618
+ <button class="mt-3 w-full bg-blue-500 text-white py-2 rounded-lg text-sm font-medium flex items-center justify-center">
619
+ <i class="fas fa-share-alt mr-2"></i> 分享名片
620
+ </button>
621
+ </div>
622
+
623
+ <!-- Settings -->
624
+ <div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
625
+ <h3 class="font-semibold text-base mb-3">账户设置</h3>
626
+
627
+ <div class="space-y-3">
628
+ <button class="w-full flex items-center justify-between py-2">
629
+ <div class="flex items-center">
630
+ <div class="w-8 h-8 rounded-full bg-gray-100 mr-3 flex items-center justify-center">
631
+ <i class="fas fa-user text-gray-600"></i>
632
+ </div>
633
+ <span class="text-sm">个人信息</span>
634
+ </div>
635
+ <i class="fas fa-chevron-right text-gray-400"></i>
636
+ </button>
637
+
638
+ <button class="w-full flex items-center justify-between py-2">
639
+ <div class="flex items-center">
640
+ <div class="w-8 h-8 rounded-full bg-blue-100 mr-3 flex items-center justify-center">
641
+ <i class="fas fa-heart text-blue-600"></i>
642
+ </div>
643
+ <span class="text-sm">健康数据</span>
644
+ </div>
645
+ <i class="fas fa-chevron-right text-gray-400"></i>
646
+ </button>
647
+
648
+ <button class="w-full flex items-center justify-between py-2">
649
+ <div class="flex items-center">
650
+ <div class="w-8 h-8 rounded-full bg-green-100 mr-3 flex items-center justify-center">
651
+ <i class="fas fa-bell text-green-600"></i>
652
+ </div>
653
+ <span class="text-sm">通知设置</span>
654
+ </div>
655
+ <i class="fas fa-chevron-right text-gray-400"></i>
656
+ </button>
657
+
658
+ <button class="w-full flex items-center justify-between py-2">
659
+ <div class="flex items-center">
660
+ <div class="w-8 h-8 rounded-full bg-yellow-100 mr-3 flex items-center justify-center">
661
+ <i class="fas fa-shield-alt text-yellow-600"></i>
662
+ </div>
663
+ <span class="text-sm">隐私设置</span>
664
+ </div>
665
+ <i class="fas fa-chevron-right text-gray-400"></i>
666
+ </button>
667
+
668
+ <button class="w-full flex items-center justify-between py-2 text-red-500">
669
+ <div class="flex items-center">
670
+ <div class="w-8 h-8 rounded-full bg-red-100 mr-3 flex items-center justify-center">
671
+ <i class="fas fa-sign-out-alt"></i>
672
+ </div>
673
+ <span class="text-sm">退出登录</span>
674
+ </div>
675
+ <i class="fas fa-chevron-right"></i>
676
+ </button>
677
+ </div>
678
+ </div>
679
+ </div>
680
+ </section>
681
+ </div>
682
+
683
+ <!-- Login/Signup Modal (hidden by default) -->
684
+ <div class="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50 hidden" id="auth-modal">
685
+ <div class="bg-white rounded-2xl w-full max-w-md p-6 animate-pulse-slow transform slide-up">
686
+ <button class="absolute top-4 right-4 text-gray-500" onclick="hideModal('auth-modal')">
687
+ <i class="fas fa-times"></i>
688
+ </button>
689
+
690
+ <div class="text-center mb-6">
691
+ <div class="w-16 h-16 rounded-full bg-gradient-to-r from-blue-500 to-purple-500 flex items-center justify-center mx-auto mb-4">
692
+ <i class="fas fa-hand-holding-medical text-white text-2xl"></i>
693
+ </div>
694
+ <h2 class="text-2xl font-bold mb-1">欢迎回来</h2>
695
+ <p class="text-gray-500">请登录您的账号</p>
696
+ </div>
697
+
698
+ <div class="space-y-4">
699
+ <div>
700
+ <label class="block text-sm font-medium text-gray-700 mb-1">手机号码</label>
701
+ <input type="tel" placeholder="请输入您的手机号" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
702
+ </div>
703
+
704
+ <div>
705
+ <label class="block text-sm font-medium text-gray-700 mb-1">密码</label>
706
+ <input type="password" placeholder="请输入密码" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
707
+ </div>
708
+
709
+ <button class="w-full bg-gradient-to-r from-blue-500 to-purple-500 text-white py-3 rounded-lg font-bold">登录</button>
710
+
711
+ <div class="text-center text-sm">
712
+ <button class="text-blue-500">忘记密码?</button>
713
+ <span class="mx-2 text-gray-400">|</span>
714
+ <button class="text-blue-500">注册新账号</button>
715
+ </div>
716
+
717
+ <div class="relative my-6">
718
+ <div class="absolute inset-0 flex items-center">
719
+ <div class="w-full border-t border-gray-300"></div>
720
+ </div>
721
+ <div class="relative flex justify-center text-sm">
722
+ <span class="px-2 bg-white text-gray-500">或使用以下方式登录</span>
723
+ </div>
724
+ </div>
725
+
726
+ <div class="grid grid-cols-2 gap-4">
727
+ <button class="flex items-center justify-center space-x-2 border border-gray-300 rounded-lg py-2">
728
+ <i class="fab fa-weixin text-green-500"></i>
729
+ <span class="text-sm">微信登录</span>
730
+ </button>
731
+ <button class="flex items-center justify-center space-x-2 border border-gray-300 rounded-lg py-2">
732
+ <i class="fab fa-qq text-blue-400"></i>
733
+ <span class="text-sm">QQ登录</span>
734
+ </button>
735
+ </div>
736
+
737
+ <div class="text-center mt-4">
738
+ <button class="flex items-center justify-center space-x-2 w-full border border-gray-300 rounded-lg py-2">
739
+ <i class="fas fa-qrcode text-blue-500"></i>
740
+ <span class="text-sm">扫码登录</span>
741
+ </button>
742
+ </div>
743
+ </div>
744
+ </div>
745
+ </div>
746
+
747
+ <!-- Event Popup Modal (hidden by default) -->
748
+ <div class="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50 hidden" id="event-modal">
749
+ <div class="bg-white rounded-2xl w-full max-w-md overflow-hidden transform slide-up">
750
+ <button class="absolute top-4 right-4 bg-white/80 text-gray-700 w-8 h-8 rounded-full flex items-center justify-center" onclick="hideModal('event-modal')">
751
+ <i class="fas fa-times"></i>
752
+ </button>
753
+
754
+ <img src="https://images.unsplash.com/photo-1517649764148-a594e6c8e8f8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
755
+ alt="活动海报" class="w-full h-48 object-cover">
756
+
757
+ <div class="p-6">
758
+ <div class="flex justify-between items-start mb-4">
759
+ <div>
760
+ <h3 class="font-bold text-lg">青少年手球联赛夏季赛</h3>
761
+ <p class="text-gray-500 text-sm">2023.07.15 ~ 2023.07.20</p>
762
+ </div>
763
+ <span class="bg-green-100 text-green-600 px-3 py-1 rounded-full text-sm">报名中</span>
764
+ </div>
765
+
766
+ <div class="bg-blue-50 rounded-lg p-3 mb-4">
767
+ <div class="flex items-start">
768
+ <i class="fas fa-info-circle text-blue-500 mt-1 mr-2"></i>
769
+ <p class="text-sm text-gray-700">本次活动面向8-12岁青少年，分为U8/U10/U12三个组别，需根据年龄分组参加。</p>
770
+ </div>
771
+ </div>
772
+
773
+ <div class="mb-6">
774
+ <h4 class="font-medium text-sm mb-2">活动详情</h4>
775
+ <p class="text-gray-700 text-sm">本次夏季联赛共有来自全市12个青少年手球俱乐部的队伍参加，将进行小组赛和淘汰赛两个阶段的比赛。优秀选手将有机会入选市青少年队集训名单。</p>
776
+
777
+ <div class="mt-3 grid grid-cols-3 gap-2 text-center">
778
+ <div class="bg-blue-50 p-2 rounded-lg">
779
+ <p class="text-blue-600 font-bold">15</p>
780
+ <p class="text-xs text-gray-500">参赛队伍</p>
781
+ </div>
782
+ <div class="bg-purple-50 p-2 rounded-lg">
783
+ <p class="text-purple-600 font-bold">6</p>
784
+ <p class="text-xs text-gray-500">比赛日</p>
785
+ </div>
786
+ <div class="bg-green-50 p-2 rounded-lg">
787
+ <p class="text-green-600 font-bold">30+</p>
788
+ <p class="text-xs text-gray-500">专业教练</p>
789
+ </div>
790
+ </div>
791
+ </div>
792
+
793
+ <div class="bg-yellow-50 border border-yellow-100 rounded-lg p-3 mb-6">
794
+ <div class="flex items-start">
795
+ <i class="fas fa-exclamation-triangle text-yellow-500 mt-1 mr-2"></i>
796
+ <p class="text-sm text-gray-700">报名需提交体检证明和监护人同意书，截止时间2023.06.30。</p>
797
+ </div>
798
+ </div>
799
+
800
+ <div class="grid grid-cols-2 gap-4">
801
+ <button class="border-2 border-blue-500 text-blue-500 py-2 rounded-lg font-medium">收藏活动</button>
802
+ <button class="bg-blue-500 text-white py-2 rounded-lg font-medium">立即报名</button>
803
+ </div>
804
+ </div>
805
+ </div>
806
+ </div>
807
+ </main>
808
+
809
+ <!-- Tab Bar -->
810
+ <nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 max-w-md mx-auto">
811
+ <div class="flex justify-around py-3 px-4">
812
+ <button class="flex flex-col items-center text-blue-500" onclick="showTab('home-content')">
813
+ <i class="fas fa-home text-xl"></i>
814
+ <span class="text-xs mt-1">首页</span>
815
+ </button>
816
+ <button class="flex flex-col items-center text-gray-500" onclick="showTab('report-content')">
817
+ <i class="fas fa-chart-line text-xl"></i>
818
+ <span class="text-xs mt-1">数据</span>
819
+ </button>
820
+ <button class="flex flex-col items-center text-gray-500 relative" onclick="showMessageTab()">
821
+ <i class="fas fa-comments text-xl"></i>
822
+ <span class="text-xs mt-1">消息</span>
823
+ <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs w-4 h-4 rounded-full flex items-center justify-center">3</span>
824
+ </button>
825
+ <button class="flex flex-col items-center text-gray-500" onclick="showTab('profile-content')">
826
+ <i class="fas fa-user text-xl"></i>
827
+ <span class="text-xs mt-1">我的</span>
828
+ </button>
829
+ </div>
830
+ </nav>
831
+ </div>
832
+
833
+ <script>
834
+ // Function to show specific tab content
835
+ function showTab(tabId) {
836
+ document.querySelectorAll('main > div').forEach(tab => {
837
+ tab.classList.add('hidden');
838
+ });
839
+ document.getElementById(tabId).classList.remove('hidden');
840
+
841
+ // Update tab bar active state
842
+ const tabButtons = document.querySelectorAll('nav button');
843
+ tabButtons.forEach(button => {
844
+ button.classList.remove('text-blue-500');
845
+ button.classList.add('text-gray-500');
846
+ });
847
+
848
+ // Set the correct button as active
849
+ if(tabId === 'home-content') {
850
+ tabButtons[0].classList.add('text-blue-500');
851
+ tabButtons[0].classList.remove('text-gray-500');
852
+ } else if(tabId === 'report-content') {
853
+ tabButtons[1].classList.add('text-blue-500');
854
+ tabButtons[1].classList.remove('text-gray-500');
855
+ } else if(tabId === 'message-content' || tabId === 'chat-detail-content') {
856
+ tabButtons[2].classList.add('text-blue-500');
857
+ tabButtons[2].classList.remove('text-gray-500');
858
+ } else if(tabId === 'profile-content') {
859
+ tabButtons[3].classList.add('text-blue-500');
860
+ tabButtons[3].classList.remove('text-gray-500');
861
+ }
862
+ }
863
+
864
+ // Special function for message tab to handle chat detail
865
+ function showMessageTab() {
866
+ showTab('message-content');
867
+ document.getElementById('chat-detail-content').classList.add('hidden');
868
+ }
869
+
870
+ // Function to show chat detail
871
+ function showChatDetail() {
872
+ document.getElementById('message-content').classList.add('hidden');
873
+ document.getElementById('chat-detail-content').classList.remove('hidden');
874
+ }
875
+
876
+ // Function to show modal
877
+ function showModal(modalId) {
878
+ document.getElementById(modalId).classList.remove('hidden');
879
+ }
880
+
881
+ // Function to hide modal
882
+ function hideModal(modalId) {
883
+ document.getElementById(modalId).classList.add('hidden');
884
+ }
885
+
886
+ // Add event listeners to chat items to show chat detail
887
+ document.addEventListener('DOMContentLoaded', function() {
888
+ // Show auth modal for demo (you can remove this in production)
889
+ setTimeout(() => {
890
+ showModal('auth-modal');
891
+ }, 500);
892
+
893
+ // Add click handler for first chat to show detail
894
+ const firstChat = document.querySelector('#message-content .bg-white');
895
+ if(firstChat) {
896
+ firstChat.addEventListener('click', showChatDetail);
897
+ }
898
+
899
+ // Add click handler for event button to show event modal
900
+ const eventBtn = document.querySelector('#home-content button');
901
+ if(eventBtn) {
902
+ eventBtn.addEventListener('click', function() {
903
+ showModal('event-modal');
904
+ });
905
+ }
906
+ });
907
+ </script>
908
+ <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-2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
909
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ 设计一款面向青少年手球运动员与家庭用户的移动端 App，整体风格要现代、年轻、有运动感，适合教育类/体育类使用场景。 ✅ 基础功能： • 支持扫码注册与登录、创建学员档案、线上缴费、生成电子名片； • 报名海报、活动内容通过弹窗方式展示； ✅ 首页模块： • 直播区块：包含背景图、直播中状态提示； • 赛事预告区块：展示赛事状态（预热中、已缴费、备战中、比赛中、已结束）； • 品牌区块：公司介绍、俱乐部介绍（细分：教练团队卡片/公司介绍/课程体系）、花絮展示； ✅ 训练报告区： • 与智能脚环配合展示课后训练数据报告，包含数据统计、训练建议、成长轨迹； ✅ 即时通讯： • 支持用户与客服/教练在线沟通； ✅ 我的中心： • 支持订单管理、绑定多个学员、切换学员档案； ✅ 设计风格建议： • 卡片式界面，模块清晰； • 配色活泼但不过于跳脱（可参考 Nike Training Club、Adidas Running 等配色）； • 图标生动、偏圆润，强调“运动感”与“成长感”； • 动画/动效适度，强调状态变化与个人成就展示； • 界面需兼顾父母端与青少年端的使用体验； ✅ 推荐界面原型图： • 注册 / 登录页 • 学员档案 / 电子名片页 • 首页（含直播、赛事、品牌三大区块） • 活动弹窗页 • 训练报告页 • 聊天对话页 • 个人中心页（支持多学员切换） 界面为常见的 tab bar+navigation bar结构，要求生成全部 tab bar 子页面的设计，界面为中文