Spaces:

seascheng
/

handball-2

Running

handball-2 / index.html

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

f6cc13c verified 16 days ago

raw

history blame contribute delete

58 kB

	<!DOCTYPE html>
	<html lang="zh-CN">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>青少年手球运动中心</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	@keyframes pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.05); }
	}
	.animate-pulse-slow {
	animation: pulse 3s infinite;
	}
	.live-badge {
	box-shadow: 0 0 10px rgba(255, 59, 48, 0.7);
	}
	.progress-track {
	background: linear-gradient(90deg, #3B82F6 0%, #10B981 50%, #EF4444 100%);
	}
	.slide-up {
	animation: slideUp 0.5s ease-out;
	}
	@keyframes slideUp {
	from { transform: translateY(20px); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
	}
	.blob {
	border-radius: 50% 50% 45% 55% / 60% 40% 60% 40%;
	}
	</style>
	</head>
	<body class="bg-gray-50 font-sans text-gray-800">
	<!-- App Container -->
	<div class="max-w-md mx-auto bg-white min-h-screen flex flex-col">
	<!-- Navigation Bar -->
	<header class="bg-gradient-to-r from-blue-600 to-purple-600 text-white p-4 shadow-md">
	<div class="flex justify-between items-center">
	<button class="p-2 rounded-full bg-white/20">
	<i class="fas fa-bars"></i>
	</button>
	<h1 class="text-xl font-bold">手球梦工场</h1>
	<button class="p-2 rounded-full bg-white/20">
	<i class="fas fa-user-circle"></i>
	</button>
	</div>
	</header>

	<!-- Main Content Area -->
	<main class="flex-1 overflow-y-auto pb-20">
	<!-- Tab Content - This would change based on selected tab -->
	<div class="p-4 space-y-6" id="home-content">
	<!-- Live Section -->
	<section class="relative rounded-xl overflow-hidden shadow-lg">
	<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"
	alt="手球训练现场" class="w-full h-48 object-cover">
	<div class="absolute inset-0 bg-black/30 flex items-center justify-center">
	<div class="text-center">
	<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">
	<span class="w-2 h-2 bg-white rounded-full mr-2 animate-pulse"></span>
	直播中
	</span>
	<h3 class="text-white text-xl font-bold">今日训练公开课</h3>
	<p class="text-white/90 text-sm">教练: 张明</p>
	</div>
	</div>
	<button class="absolute bottom-4 right-4 bg-white/90 text-blue-600 p-2 rounded-full shadow-md">
	<i class="fas fa-play"></i>
	</button>
	</section>

	<!-- Events Section -->
	<section>
	<h2 class="text-lg font-bold mb-3 flex items-center">
	<span class="bg-blue-100 text-blue-600 p-2 rounded-full mr-2">
	<i class="fas fa-calendar-alt"></i>
	</span>
	赛事预告
	</h2>

	<div class="grid grid-cols-2 gap-3">
	<!-- Event Card 1 -->
	<div class="bg-white border border-gray-100 rounded-xl p-4 shadow-sm hover:shadow-md transition">
	<div class="relative">
	<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"
	alt="赛事宣传" class="w-full h-20 object-cover rounded-lg mb-2">
	<span class="absolute top-2 left-2 bg-yellow-400/90 text-yellow-900 text-xs px-2 py-1 rounded-full">预热中</span>
	</div>
	<h3 class="font-semibold text-sm">青少年手球联赛夏季赛</h3>
	<p class="text-gray-500 text-xs mt-1">2023.07.15 ~ 2023.07.20</p>
	<button class="mt-2 w-full bg-blue-100 text-blue-600 py-1 rounded-lg text-sm font-medium">了解详情</button>
	</div>

	<!-- Event Card 2 -->
	<div class="bg-white border border-gray-100 rounded-xl p-4 shadow-sm hover:shadow-md transition">
	<div class="relative">
	<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"
	alt="赛事宣传" class="w-full h-20 object-cover rounded-lg mb-2">
	<span class="absolute top-2 left-2 bg-green-400/90 text-green-900 text-xs px-2 py-1 rounded-full">已缴费</span>
	</div>
	<h3 class="font-semibold text-sm">周末友谊训练赛</h3>
	<p class="text-gray-500 text-xs mt-1">2023.06.10 14:00</p>
	<button class="mt-2 w-full bg-blue-100 text-blue-600 py-1 rounded-lg text-sm font-medium">查看详情</button>
	</div>
	</div>
	</section>

	<!-- Brand Section -->
	<section>
	<h2 class="text-lg font-bold mb-3 flex items-center">
	<span class="bg-purple-100 text-purple-600 p-2 rounded-full mr-2">
	<i class="fas fa-star"></i>
	</span>
	俱乐部风采
	</h2>

	<div class="space-y-4">
	<!-- Coach Team -->
	<div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
	<div class="flex justify-between items-center mb-3">
	<h3 class="font-semibold text-base">明星教练团队</h3>
	<button class="text-blue-500 text-sm">查看全部 ></button>
	</div>

	<div class="flex space-x-3 overflow-x-auto pb-2">
	<!-- Coach 1 -->
	<div class="flex-shrink-0">
	<div class="relative">
	<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">
	<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="教练" class="w-full h-full object-cover">
	</div>
	<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">
	<i class="fas fa-check"></i>
	</span>
	</div>
	<p class="text-center text-xs mt-1 font-medium">张教练</p>
	</div>

	<!-- Coach 2 -->
	<div class="flex-shrink-0">
	<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">
	<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="教练" class="w-full h-full object-cover">
	</div>
	<p class="text-center text-xs mt-1 font-medium">李教练</p>
	</div>

	<!-- Coach 3 -->
	<div class="flex-shrink-0">
	<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">
	<img src="https://randomuser.me/api/portraits/men/67.jpg" alt="教练" class="w-full h-full object-cover">
	</div>
	<p class="text-center text-xs mt-1 font-medium">王教练</p>
	</div>

	<!-- Add more button -->
	<div class="flex-shrink-0">
	<div class="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center">
	<i class="fas fa-plus text-gray-400"></i>
	</div>
	<p class="text-center text-xs mt-1 text-gray-400">更多</p>
	</div>
	</div>
	</div>

	<!-- About Brand -->
	<div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
	<h3 class="font-semibold text-base mb-2">关于我们</h3>
	<p class="text-gray-600 text-sm">青少年手球梦工场成立于2018年，致力于为6-18岁青少年提供专业手球训练。我们拥有国家级教练团队和先进的训练体系，已培养百余名选手进入省市代表队。</p>
	<button class="mt-3 text-blue-500 text-sm font-medium flex items-center">
	了解更多 <i class="fas fa-chevron-right ml-1 text-xs"></i>
	</button>
	</div>

	<!-- Course System -->
	<div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
	<h3 class="font-semibold text-base mb-2">课程体系</h3>
	<div class="grid grid-cols-3 gap-2">
	<div class="bg-blue-50 text-blue-700 text-xs p-2 rounded-lg text-center">
	启蒙班
	</div>
	<div class="bg-green-50 text-green-700 text-xs p-2 rounded-lg text-center">
	进阶班
	</div>
	<div class="bg-purple-50 text-purple-700 text-xs p-2 rounded-lg text-center">
	竞赛班
	</div>
	</div>
	<button class="mt-3 text-blue-500 text-sm font-medium flex items-center">
	查看课程详情 <i class="fas fa-chevron-right ml-1 text-xs"></i>
	</button>
	</div>

	<!-- Gallery -->
	<div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
	<h3 class="font-semibold text-base mb-3">精彩花絮</h3>
	<div class="grid grid-cols-2 gap-2">
	<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"
	alt="训练花絮" class="h-20 rounded-lg object-cover">
	<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"
	alt="训练花絮" class="h-20 rounded-lg object-cover">
	<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"
	alt="训练花絮" class="h-20 rounded-lg object-cover">
	<div class="h-20 rounded-lg bg-gray-100 flex items-center justify-center">
	<span class="text-xs text-gray-500">+ 更多</span>
	</div>
	</div>
	</div>
	</div>
	</section>
	</div>

	<!-- Other Tab Contents (Hidden by default, will be shown when tabs are clicked) -->
	<!-- Training Report Content -->
	<div class="p-4 space-y-6 hidden" id="report-content">
	<section>
	<h2 class="text-lg font-bold mb-3 flex items-center">
	<span class="bg-green-100 text-green-600 p-2 rounded-full mr-2">
	<i class="fas fa-chart-line"></i>
	</span>
	训练报告
	</h2>

	<div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
	<div class="flex justify-between items-center mb-4">
	<div>
	<h3 class="font-bold text-base">本周训练数据</h3>
	<p class="text-gray-500 text-sm">2023.06.01 ~ 2023.06.07</p>
	</div>
	<div class="bg-blue-100 text-blue-600 px-3 py-1 rounded-full text-sm font-medium">
	张三 (8岁)
	</div>
	</div>

	<div class="grid grid-cols-4 gap-2 text-center mb-4">
	<div class="bg-blue-50 p-2 rounded-lg">
	<p class="text-2xl font-bold text-blue-600">4.2</p>
	<p class="text-xs text-gray-500">公里</p>
	</div>
	<div class="bg-green-50 p-2 rounded-lg">
	<p class="text-2xl font-bold text-green-600">3680</p>
	<p class="text-xs text-gray-500">步数</p>
	</div>
	<div class="bg-yellow-50 p-2 rounded-lg">
	<p class="text-2xl font-bold text-yellow-600">96</p>
	<p class="text-xs text-gray-500">投球数</p>
	</div>
	<div class="bg-purple-50 p-2 rounded-lg">
	<p class="text-2xl font-bold text-purple-600">87%</p>
	<p class="text-xs text-gray-500">命中率</p>
	</div>
	</div>

	<div class="mb-4">
	<div class="flex justify-between text-sm mb-1">
	<span>训练强度</span>
	<span>中高强度</span>
	</div>
	<div class="w-full bg-gray-200 rounded-full h-2.5">
	<div class="bg-gradient-to-r from-yellow-400 to-orange-500 h-2.5 rounded-full" style="width: 65%"></div>
	</div>
	</div>

	<div class="mb-4">
	<div class="flex justify-between items-center mb-2">
	<h4 class="font-medium text-sm">成长轨迹</h4>
	<button class="text-blue-500 text-xs">查看历史</button>
	</div>
	<div class="bg-gray-50 rounded-lg p-3">
	<div class="relative h-20">
	<div class="progress-track absolute w-full h-1 top-1/2 transform -translate-y-1/2 rounded-full"></div>
	<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>
	<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>
	<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>
	</div>
	<div class="grid grid-cols-3 text-xs text-center mt-6">
	<div>
	<p class="font-medium">1月</p>
	<p class="text-gray-500">60分</p>
	</div>
	<div>
	<p class="font-medium">3月</p>
	<p class="text-gray-500">75分</p>
	</div>
	<div>
	<p class="font-medium">6月</p>
	<p class="text-gray-500">87分</p>
	</div>
	</div>
	</div>
	</div>

	<div class="bg-yellow-50 border border-yellow-100 rounded-lg p-3">
	<div class="flex items-start">
	<div class="bg-yellow-100 text-yellow-600 p-2 rounded-full mr-2">
	<i class="fas fa-lightbulb"></i>
	</div>
	<div>
	<h4 class="font-medium text-sm mb-1">教练建议</h4>
	<p class="text-gray-700 text-sm">张三本周进步明显，投球力度有所提升，建议下周加强移动中的接球训练，继续增强下肢力量。</p>
	</div>
	</div>
	</div>
	</div>
	</section>

	<section>
	<h3 class="font-bold text-base mb-2 flex items-center">
	<span class="bg-gradient-to-r from-blue-400 to-purple-500 text-white p-2 rounded-full mr-2 text-sm">
	<i class="fas fa-medal"></i>
	</span>
	成就徽章
	</h3>

	<div class="grid grid-cols-3 gap-3">
	<div class="bg-white border border-gray-100 rounded-xl p-3 flex flex-col items-center shadow-sm">
	<div class="w-12 h-12 bg-blue-100 text-blue-500 rounded-full flex items-center justify-center mb-2">
	<i class="fas fa-bolt"></i>
	</div>
	<p class="text-xs font-medium text-center">闪电快手</p>
	<p class="text-[10px] text-gray-500 text-center">完成100次快速投球</p>
	</div>

	<div class="bg-white border border-gray-100 rounded-xl p-3 flex flex-col items-center shadow-sm">
	<div class="w-12 h-12 bg-green-100 text-green-500 rounded-full flex items-center justify-center mb-2">
	<i class="fas fa-fire"></i>
	</div>
	<p class="text-xs font-medium text-center">耐力王</p>
	<p class="text-[10px] text-gray-500 text-center">连续3周每日训练</p>
	</div>

	<div class="bg-white border border-gray-100 rounded-xl p-3 flex flex-col items-center shadow-sm relative">
	<div class="w-12 h-12 bg-gray-100 text-gray-400 rounded-full flex items-center justify-center mb-2">
	<i class="fas fa-lock"></i>
	</div>
	<p class="text-xs font-medium text-center">??</p>
	<p class="text-[10px] text-gray-500 text-center">待解锁</p>
	</div>
	</div>
	</section>
	</div>

	<!-- Message Content -->
	<div class="p-4 space-y-6 hidden" id="message-content">
	<section>
	<h2 class="text-lg font-bold mb-3 flex items-center">
	<span class="bg-pink-100 text-pink-600 p-2 rounded-full mr-2">
	<i class="fas fa-comments"></i>
	</span>
	消息中心
	</h2>

	<div class="space-y-3">
	<!-- Chat Item 1 -->
	<div class="bg-white rounded-xl p-3 shadow-sm border border-gray-100 flex items-center">
	<div class="relative mr-3">
	<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">
	<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="教练" class="w-full h-full object-cover">
	</div>
	<span class="absolute -bottom-1 -right-1 bg-green-400 border-2 border-white w-3 h-3 rounded-full"></span>
	</div>
	<div class="flex-1">
	<div class="flex justify-between items-center">
	<h3 class="font-medium">张教练</h3>
	<span class="text-gray-400 text-xs">10:25</span>
	</div>
	<p class="text-sm text-gray-500 truncate">关于下周比赛的战术安排已经发在群里了...</p>
	</div>
	</div>

	<!-- Chat Item 2 -->
	<div class="bg-white rounded-xl p-3 shadow-sm border border-gray-100 flex items-center">
	<div class="relative mr-3">
	<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">
	<i class="fas fa-headset"></i>
	</div>
	</div>
	<div class="flex-1">
	<div class="flex justify-between items-center">
	<h3 class="font-medium">客服中心</h3>
	<span class="text-gray-400 text-xs">昨天</span>
	</div>
	<p class="text-sm text-gray-500 truncate">您关于夏季装备的咨询我们已经收到...</p>
	</div>
	</div>

	<!-- Chat Item 3 -->
	<div class="bg-white rounded-xl p-3 shadow-sm border border-gray-100 flex items-center">
	<div class="relative mr-3">
	<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">
	<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="教练" class="w-full h-full object-cover">
	</div>
	</div>
	<div class="flex-1">
	<div class="flex justify-between items-center">
	<h3 class="font-medium">李教练</h3>
	<span class="text-gray-400 text-xs">周一</span>
	</div>
	<p class="text-sm text-gray-500 truncate">张三最近的训练报告已更新...</p>
	</div>
	<span class="bg-red-500 text-white text-xs w-5 h-5 rounded-full flex items-center justify-center ml-2">2</span>
	</div>
	</div>
	</section>
	</div>

	<!-- Chat Detail Content (hidden by default) -->
	<div class="hidden" id="chat-detail-content">
	<div class="h-full flex flex-col">
	<!-- Chat Header -->
	<div class="bg-gradient-to-r from-blue-500 to-purple-500 text-white p-4 flex items-center">
	<button class="mr-2" onclick="showTab('message-content')">
	<i class="fas fa-arrow-left"></i>
	</button>
	<div class="w-10 h-10 rounded-full bg-white/20 mr-3 flex items-center justify-center overflow-hidden">
	<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="教练" class="w-full h-full object-cover">
	</div>
	<div>
	<h3 class="font-medium">张教练</h3>
	<p class="text-xs opacity-80">在线</p>
	</div>
	</div>

	<!-- Chat Messages -->
	<div class="flex-1 p-4 space-y-4 overflow-y-auto bg-gray-50">
	<!-- Date -->
	<div class="text-center">
	<span class="bg-white px-3 py-1 rounded-full text-xs text-gray-500 shadow-sm">2023年6月8日</span>
	</div>

	<!-- Received Message -->
	<div class="flex items-start space-x-2">
	<div class="w-8 h-8 rounded-full bg-blue-100 flex-shrink-0 mt-1 overflow-hidden">
	<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="教练" class="w-full h-full object-cover">
	</div>
	<div class="max-w-xs">
	<div class="bg-white px-4 py-2 rounded-xl shadow-sm">
	<p class="text-sm">张三家长您好，这是本周的训练报告，请查收</p>
	</div>
	<p class="text-xs text-gray-500 mt-1">10:25</p>
	</div>
	</div>

	<!-- Sent Message -->
	<div class="flex items-start space-x-2 justify-end">
	<div class="max-w-xs">
	<div class="bg-blue-100 px-4 py-2 rounded-xl">
	<p class="text-sm">好的，谢谢张教练，我看到投球命中率进步很大</p>
	</div>
	<p class="text-xs text-gray-500 mt-1 text-right">10:27</p>
	</div>
	<div class="w-8 h-8 rounded-full bg-gray-200 flex-shrink-0 mt-1 overflow-hidden">
	<img src="https://randomuser.me/api/portraits/women/43.jpg" alt="家长" class="w-full h-full object-cover">
	</div>
	</div>

	<!-- Received Message with Image -->
	<div class="flex items-start space-x-2">
	<div class="w-8 h-8 rounded-full bg-blue-100 flex-shrink-0 mt-1 overflow-hidden">
	<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="教练" class="w-full h-full object-cover">
	</div>
	<div class="max-w-xs">
	<div class="bg-white px-4 py-2 rounded-xl shadow-sm">
	<p class="text-sm">这是在训练中抓拍的精彩瞬间</p>
	<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"
	class="mt-2 rounded-lg w-full">
	</div>
	<p class="text-xs text-gray-500 mt-1">10:28</p>
	</div>
	</div>
	</div>

	<!-- Message Input -->
	<div class="p-3 border-t border-gray-200 bg-white">
	<div class="flex items-center space-x-2">
	<button class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center">
	<i class="fas fa-plus text-gray-500"></i>
	</button>
	<input type="text" placeholder="输入消息..."
	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">
	<button class="w-10 h-10 rounded-full bg-blue-500 text-white flex items-center justify-center">
	<i class="fas fa-paper-plane"></i>
	</button>
	</div>
	</div>
	</div>
	</div>

	<!-- Profile Content -->
	<div class="p-4 hidden" id="profile-content">
	<section>
	<div class="flex flex-col items-center mb-6">
	<div class="relative mb-3">
	<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">
	<img src="https://randomuser.me/api/portraits/women/43.jpg" alt="家长" class="w-full h-full object-cover">
	</div>
	<button class="absolute bottom-0 right-0 bg-white p-1 rounded-full border border-gray-200">
	<i class="fas fa-camera text-blue-500 text-xs"></i>
	</button>
	</div>
	<h2 class="text-xl font-bold">李女士</h2>
	<p class="text-gray-500 text-sm">家长账号</p>
	</div>

	<div class="space-y-4">
	<!-- Student Switch -->
	<div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
	<h3 class="font-semibold text-base mb-3 flex items-center">
	<span class="bg-blue-100 text-blue-600 p-2 rounded-full mr-2">
	<i class="fas fa-users"></i>
	</span>
	学员管理
	</h3>

	<div class="flex items-center justify-between mb-3">
	<div class="flex items-center">
	<div class="w-12 h-12 rounded-full bg-blue-100 mr-3 flex items-center justify-center overflow-hidden">
	<img src="https://randomuser.me/api/portraits/boys/12.jpg" alt="学员" class="w-full h-full object-cover">
	</div>
	<div>
	<h4 class="font-medium">张三</h4>
	<p class="text-gray-500 text-xs">8岁 \| 进阶班</p>
	</div>
	</div>
	<span class="bg-blue-100 text-blue-600 px-3 py-1 rounded-full text-xs">当前</span>
	</div>

	<div class="flex items-center justify-between">
	<div class="flex items-center">
	<div class="w-12 h-12 rounded-full bg-gray-100 mr-3 flex items-center justify-center overflow-hidden">
	<img src="https://randomuser.me/api/portraits/girls/23.jpg" alt="学员" class="w-full h-full object-cover">
	</div>
	<div>
	<h4 class="font-medium">张小小</h4>
	<p class="text-gray-500 text-xs">6岁 \| 启蒙班</p>
	</div>
	</div>
	<button class="text-blue-500 text-sm">切换</button>
	</div>

	<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">
	<i class="fas fa-plus mr-1"></i> 添加学员
	</button>
	</div>

	<!-- Order Management -->
	<div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
	<h3 class="font-semibold text-base mb-3 flex items-center">
	<span class="bg-green-100 text-green-600 p-2 rounded-full mr-2">
	<i class="fas fa-receipt"></i>
	</span>
	订单管理
	</h3>

	<div class="flex justify-between items-center mb-1">
	<p class="text-sm">青少年夏季联赛报名</p>
	<span class="text-xs bg-green-100 text-green-600 px-2 py-1 rounded-full">已完成</span>
	</div>
	<p class="text-xs text-gray-500 mb-3">订单号: XK202306011234 \| 2023.06.01</p>

	<div class="flex justify-between items-center">
	<p class="text-sm">周末训练营课程包</p>
	<span class="text-xs bg-yellow-100 text-yellow-600 px-2 py-1 rounded-full">待支付</span>
	</div>
	<p class="text-xs text-gray-500">订单号: XK202305281234 \| 2023.05.28</p>

	<button class="mt-3 text-sm text-blue-500 font-medium flex items-center justify-center">
	查看全部订单 <i class="fas fa-chevron-right ml-1"></i>
	</button>
	</div>

	<!-- Electronic Badge -->
	<div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
	<h3 class="font-semibold text-base mb-3 flex items-center">
	<span class="bg-purple-100 text-purple-600 p-2 rounded-full mr-2">
	<i class="fas fa-id-card"></i>
	</span>
	电子名片
	</h3>

	<div class="bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg p-4 text-white relative overflow-hidden">
	<div class="absolute -right-10 -top-10 w-20 h-20 bg-white/10 rounded-full"></div>
	<div class="absolute -right-5 -bottom-5 w-16 h-16 bg-white/10 rounded-full"></div>

	<div class="relative z-10">
	<div class="flex items-center mb-4">
	<div class="w-12 h-12 rounded-full bg-white/20 mr-3 flex items-center justify-center overflow-hidden border-2 border-white">
	<img src="https://randomuser.me/api/portraits/boys/12.jpg" alt="学员" class="w-full h-full object-cover">
	</div>
	<div>
	<h4 class="font-bold">张三</h4>
	<p class="text-xs opacity-80">手球梦工场 · 学员</p>
	</div>
	</div>

	<div class="grid grid-cols-2 gap-3 text-sm">
	<div>
	<p class="text-xs opacity-80">年龄</p>
	<p class="font-medium">8岁</p>
	</div>
	<div>
	<p class="text-xs opacity-80">课程</p>
	<p class="font-medium">进阶班</p>
	</div>
	<div>
	<p class="text-xs opacity-80">加入</p>
	<p class="font-medium">2022.09</p>
	</div>
	<div>
	<p class="text-xs opacity-80">教练</p>
	<p class="font-medium">张教练</p>
	</div>
	</div>
	</div>
	</div>

	<button class="mt-3 w-full bg-blue-500 text-white py-2 rounded-lg text-sm font-medium flex items-center justify-center">
	<i class="fas fa-share-alt mr-2"></i> 分享名片
	</button>
	</div>

	<!-- Settings -->
	<div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100">
	<h3 class="font-semibold text-base mb-3">账户设置</h3>

	<div class="space-y-3">
	<button class="w-full flex items-center justify-between py-2">
	<div class="flex items-center">
	<div class="w-8 h-8 rounded-full bg-gray-100 mr-3 flex items-center justify-center">
	<i class="fas fa-user text-gray-600"></i>
	</div>
	<span class="text-sm">个人信息</span>
	</div>
	<i class="fas fa-chevron-right text-gray-400"></i>
	</button>

	<button class="w-full flex items-center justify-between py-2">
	<div class="flex items-center">
	<div class="w-8 h-8 rounded-full bg-blue-100 mr-3 flex items-center justify-center">
	<i class="fas fa-heart text-blue-600"></i>
	</div>
	<span class="text-sm">健康数据</span>
	</div>
	<i class="fas fa-chevron-right text-gray-400"></i>
	</button>

	<button class="w-full flex items-center justify-between py-2">
	<div class="flex items-center">
	<div class="w-8 h-8 rounded-full bg-green-100 mr-3 flex items-center justify-center">
	<i class="fas fa-bell text-green-600"></i>
	</div>
	<span class="text-sm">通知设置</span>
	</div>
	<i class="fas fa-chevron-right text-gray-400"></i>
	</button>

	<button class="w-full flex items-center justify-between py-2">
	<div class="flex items-center">
	<div class="w-8 h-8 rounded-full bg-yellow-100 mr-3 flex items-center justify-center">
	<i class="fas fa-shield-alt text-yellow-600"></i>
	</div>
	<span class="text-sm">隐私设置</span>
	</div>
	<i class="fas fa-chevron-right text-gray-400"></i>
	</button>

	<button class="w-full flex items-center justify-between py-2 text-red-500">
	<div class="flex items-center">
	<div class="w-8 h-8 rounded-full bg-red-100 mr-3 flex items-center justify-center">
	<i class="fas fa-sign-out-alt"></i>
	</div>
	<span class="text-sm">退出登录</span>
	</div>
	<i class="fas fa-chevron-right"></i>
	</button>
	</div>
	</div>
	</div>
	</section>
	</div>

	<!-- Login/Signup Modal (hidden by default) -->
	<div class="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50 hidden" id="auth-modal">
	<div class="bg-white rounded-2xl w-full max-w-md p-6 animate-pulse-slow transform slide-up">
	<button class="absolute top-4 right-4 text-gray-500" onclick="hideModal('auth-modal')">
	<i class="fas fa-times"></i>
	</button>

	<div class="text-center mb-6">
	<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">
	<i class="fas fa-hand-holding-medical text-white text-2xl"></i>
	</div>
	<h2 class="text-2xl font-bold mb-1">欢迎回来</h2>
	<p class="text-gray-500">请登录您的账号</p>
	</div>

	<div class="space-y-4">
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">手机号码</label>
	<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">
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">密码</label>
	<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">
	</div>

	<button class="w-full bg-gradient-to-r from-blue-500 to-purple-500 text-white py-3 rounded-lg font-bold">登录</button>

	<div class="text-center text-sm">
	<button class="text-blue-500">忘记密码?</button>
	<span class="mx-2 text-gray-400">\|</span>
	<button class="text-blue-500">注册新账号</button>
	</div>

	<div class="relative my-6">
	<div class="absolute inset-0 flex items-center">
	<div class="w-full border-t border-gray-300"></div>
	</div>
	<div class="relative flex justify-center text-sm">
	<span class="px-2 bg-white text-gray-500">或使用以下方式登录</span>
	</div>
	</div>

	<div class="grid grid-cols-2 gap-4">
	<button class="flex items-center justify-center space-x-2 border border-gray-300 rounded-lg py-2">
	<i class="fab fa-weixin text-green-500"></i>
	<span class="text-sm">微信登录</span>
	</button>
	<button class="flex items-center justify-center space-x-2 border border-gray-300 rounded-lg py-2">
	<i class="fab fa-qq text-blue-400"></i>
	<span class="text-sm">QQ登录</span>
	</button>
	</div>

	<div class="text-center mt-4">
	<button class="flex items-center justify-center space-x-2 w-full border border-gray-300 rounded-lg py-2">
	<i class="fas fa-qrcode text-blue-500"></i>
	<span class="text-sm">扫码登录</span>
	</button>
	</div>
	</div>
	</div>
	</div>

	<!-- Event Popup Modal (hidden by default) -->
	<div class="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50 hidden" id="event-modal">
	<div class="bg-white rounded-2xl w-full max-w-md overflow-hidden transform slide-up">
	<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')">
	<i class="fas fa-times"></i>
	</button>

	<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"
	alt="活动海报" class="w-full h-48 object-cover">

	<div class="p-6">
	<div class="flex justify-between items-start mb-4">
	<div>
	<h3 class="font-bold text-lg">青少年手球联赛夏季赛</h3>
	<p class="text-gray-500 text-sm">2023.07.15 ~ 2023.07.20</p>
	</div>
	<span class="bg-green-100 text-green-600 px-3 py-1 rounded-full text-sm">报名中</span>
	</div>

	<div class="bg-blue-50 rounded-lg p-3 mb-4">
	<div class="flex items-start">
	<i class="fas fa-info-circle text-blue-500 mt-1 mr-2"></i>
	<p class="text-sm text-gray-700">本次活动面向8-12岁青少年，分为U8/U10/U12三个组别，需根据年龄分组参加。</p>
	</div>
	</div>

	<div class="mb-6">
	<h4 class="font-medium text-sm mb-2">活动详情</h4>
	<p class="text-gray-700 text-sm">本次夏季联赛共有来自全市12个青少年手球俱乐部的队伍参加，将进行小组赛和淘汰赛两个阶段的比赛。优秀选手将有机会入选市青少年队集训名单。</p>

	<div class="mt-3 grid grid-cols-3 gap-2 text-center">
	<div class="bg-blue-50 p-2 rounded-lg">
	<p class="text-blue-600 font-bold">15</p>
	<p class="text-xs text-gray-500">参赛队伍</p>
	</div>
	<div class="bg-purple-50 p-2 rounded-lg">
	<p class="text-purple-600 font-bold">6</p>
	<p class="text-xs text-gray-500">比赛日</p>
	</div>
	<div class="bg-green-50 p-2 rounded-lg">
	<p class="text-green-600 font-bold">30+</p>
	<p class="text-xs text-gray-500">专业教练</p>
	</div>
	</div>
	</div>

	<div class="bg-yellow-50 border border-yellow-100 rounded-lg p-3 mb-6">
	<div class="flex items-start">
	<i class="fas fa-exclamation-triangle text-yellow-500 mt-1 mr-2"></i>
	<p class="text-sm text-gray-700">报名需提交体检证明和监护人同意书，截止时间2023.06.30。</p>
	</div>
	</div>

	<div class="grid grid-cols-2 gap-4">
	<button class="border-2 border-blue-500 text-blue-500 py-2 rounded-lg font-medium">收藏活动</button>
	<button class="bg-blue-500 text-white py-2 rounded-lg font-medium">立即报名</button>
	</div>
	</div>
	</div>
	</div>
	</main>

	<!-- Tab Bar -->
	<nav class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 max-w-md mx-auto">
	<div class="flex justify-around py-3 px-4">
	<button class="flex flex-col items-center text-blue-500" onclick="showTab('home-content')">
	<i class="fas fa-home text-xl"></i>
	<span class="text-xs mt-1">首页</span>
	</button>
	<button class="flex flex-col items-center text-gray-500" onclick="showTab('report-content')">
	<i class="fas fa-chart-line text-xl"></i>
	<span class="text-xs mt-1">数据</span>
	</button>
	<button class="flex flex-col items-center text-gray-500 relative" onclick="showMessageTab()">
	<i class="fas fa-comments text-xl"></i>
	<span class="text-xs mt-1">消息</span>
	<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>
	</button>
	<button class="flex flex-col items-center text-gray-500" onclick="showTab('profile-content')">
	<i class="fas fa-user text-xl"></i>
	<span class="text-xs mt-1">我的</span>
	</button>
	</div>
	</nav>
	</div>

	<script>
	// Function to show specific tab content
	function showTab(tabId) {
	document.querySelectorAll('main > div').forEach(tab => {
	tab.classList.add('hidden');
	});
	document.getElementById(tabId).classList.remove('hidden');

	// Update tab bar active state
	const tabButtons = document.querySelectorAll('nav button');
	tabButtons.forEach(button => {
	button.classList.remove('text-blue-500');
	button.classList.add('text-gray-500');
	});

	// Set the correct button as active
	if(tabId === 'home-content') {
	tabButtons[0].classList.add('text-blue-500');
	tabButtons[0].classList.remove('text-gray-500');
	} else if(tabId === 'report-content') {
	tabButtons[1].classList.add('text-blue-500');
	tabButtons[1].classList.remove('text-gray-500');
	} else if(tabId === 'message-content' \|\| tabId === 'chat-detail-content') {
	tabButtons[2].classList.add('text-blue-500');
	tabButtons[2].classList.remove('text-gray-500');
	} else if(tabId === 'profile-content') {
	tabButtons[3].classList.add('text-blue-500');
	tabButtons[3].classList.remove('text-gray-500');
	}
	}

	// Special function for message tab to handle chat detail
	function showMessageTab() {
	showTab('message-content');
	document.getElementById('chat-detail-content').classList.add('hidden');
	}

	// Function to show chat detail
	function showChatDetail() {
	document.getElementById('message-content').classList.add('hidden');
	document.getElementById('chat-detail-content').classList.remove('hidden');
	}

	// Function to show modal
	function showModal(modalId) {
	document.getElementById(modalId).classList.remove('hidden');
	}

	// Function to hide modal
	function hideModal(modalId) {
	document.getElementById(modalId).classList.add('hidden');
	}

	// Add event listeners to chat items to show chat detail
	document.addEventListener('DOMContentLoaded', function() {
	// Show auth modal for demo (you can remove this in production)
	setTimeout(() => {
	showModal('auth-modal');
	}, 500);

	// Add click handler for first chat to show detail
	const firstChat = document.querySelector('#message-content .bg-white');
	if(firstChat) {
	firstChat.addEventListener('click', showChatDetail);
	}

	// Add click handler for event button to show event modal
	const eventBtn = document.querySelector('#home-content button');
	if(eventBtn) {
	eventBtn.addEventListener('click', function() {
	showModal('event-modal');
	});
	}
	});
	</script>
	<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>
	</html>