Spaces:
Running
Running
设计一款面向青少年手球运动员与家庭用户的移动端 App，整体风格要现代、年轻、有运动感，适合教育类/体育类使用场景。 ✅ 基础功能： • 支持扫码注册与登录、创建学员档案、线上缴费、生成电子名片； • 报名海报、活动内容通过弹窗方式展示； ✅ 首页模块： • 直播区块：包含背景图、直播中状态提示； • 赛事预告区块：展示赛事状态（预热中、已缴费、备战中、比赛中、已结束）； • 品牌区块：公司介绍、俱乐部介绍（细分：教练团队卡片/公司介绍/课程体系）、花絮展示； ✅ 训练报告区： • 与智能脚环配合展示课后训练数据报告，包含数据统计、训练建议、成长轨迹； ✅ 即时通讯： • 支持用户与客服/教练在线沟通； ✅ 我的中心： • 支持订单管理、绑定多个学员、切换学员档案； ✅ 设计风格建议： • 卡片式界面，模块清晰； • 配色活泼但不过于跳脱（可参考 Nike Training Club、Adidas Running 等配色）； • 图标生动、偏圆润，强调“运动感”与“成长感”； • 动画/动效适度，强调状态变化与个人成就展示； • 界面需兼顾父母端与青少年端的使用体验； ✅ 推荐界面原型图： • 注册 / 登录页 • 学员档案 / 电子名片页 • 首页（含直播、赛事、品牌三大区块） • 活动弹窗页 • 训练报告页 • 聊天对话页 • 个人中心页（支持多学员切换） 界面为常见的 tab bar+navigation bar结构，要求生成全部 tab bar 子页面的设计，界面为中文 - Initial Deployment
c7229e7
verified
| <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-ring { | |
| transition: stroke-dashoffset 0.35s; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| .slide-up { | |
| animation: slideUp 0.5s ease-out forwards; | |
| } | |
| @keyframes slideUp { | |
| from { transform: translateY(100%); opacity: 0; } | |
| to { transform: translateY(0); opacity: 1; } | |
| } | |
| .tab-active { | |
| color: #3B82F6; | |
| position: relative; | |
| } | |
| .tab-active:after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -8px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background-color: #3B82F6; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50 text-gray-800 max-w-md mx-auto relative h-screen overflow-hidden"> | |
| <!-- Auth Screen (Initial View) --> | |
| <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"> | |
| <div class="w-32 h-32 mb-8 relative"> | |
| <div class="absolute inset-0 bg-white rounded-full flex items-center justify-center animate-pulse-slow"> | |
| <div class="w-24 h-24 bg-blue-500 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-hand-holding-heart text-3xl text-white"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <h1 class="text-3xl font-bold mb-2">手球少年营</h1> | |
| <p class="mb-8 text-center">青少年手球训练专家<br>培养未来运动新星</p> | |
| <button onclick="showApp()" class="w-full bg-white text-blue-600 py-3 rounded-full font-bold mb-4 flex items-center justify-center"> | |
| <i class="fas fa-qrcode mr-2"></i> 扫码登录/注册 | |
| </button> | |
| <div class="w-full flex items-center my-4"> | |
| <div class="flex-1 h-px bg-white bg-opacity-30"></div> | |
| <span class="px-4 text-sm">或</span> | |
| <div class="flex-1 h-px bg-white bg-opacity-30"></div> | |
| </div> | |
| <button onclick="showApp()" class="w-full border border-white text-white py-3 rounded-full font-bold flex items-center justify-center"> | |
| <i class="fas fa-user-plus mr-2"></i> 手机号注册 | |
| </button> | |
| <p class="text-xs mt-8 text-center text-white text-opacity-70">注册即代表同意《用户协议》和《隐私政策》</p> | |
| </div> | |
| <!-- Main App (Hidden Initially) --> | |
| <div id="app-container" class="h-full hidden flex flex-col"> | |
| <!-- Navigation Bar --> | |
| <div class="bg-white shadow-md py-3 px-4 flex items-center justify-between z-10"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center mr-2"> | |
| <i class="fas fa-hand-holding-heart text-white text-sm"></i> | |
| </div> | |
| <h1 class="font-bold">手球少年营</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="text-gray-600"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| <button class="text-gray-600 relative"> | |
| <i class="fas fa-bell"></i> | |
| <span class="absolute -top-1 -right-1 w-2 h-2 bg-red-500 rounded-full"></span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main Content Area --> | |
| <div class="flex-1 overflow-y-auto pb-16" id="main-content"> | |
| <!-- Home Tab Content --> | |
| <div id="home-tab" class="tab-content active pb-4"> | |
| <!-- Live Section --> | |
| <div class="mx-4 mt-4 rounded-xl overflow-hidden bg-white shadow-md"> | |
| <div class="relative"> | |
| <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" | |
| alt="手球训练直播" class="w-full h-48 object-cover"> | |
| <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"> | |
| <div class="w-2 h-2 bg-white rounded-full mr-1 animate-pulse"></div> | |
| <span>直播中</span> | |
| </div> | |
| <div class="absolute bottom-2 left-2 bg-black bg-opacity-50 text-white text-sm px-2 py-1 rounded"> | |
| <i class="fas fa-users mr-1"></i> 1,245 人正在观看 | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-1">周三青少年手球基础训练</h3> | |
| <p class="text-gray-600 text-sm mb-3">王教练带队 · 针对12-15岁学员</p> | |
| <button class="w-full bg-blue-500 text-white py-2 rounded-lg font-semibold"> | |
| <i class="fas fa-play mr-2"></i> 进入直播 | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Event Section --> | |
| <div class="mx-4 mt-6"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h2 class="font-bold text-lg">赛事与活动</h2> | |
| <a href="#" class="text-blue-500 text-sm">查看全部 <i class="fas fa-chevron-right ml-1"></i></a> | |
| </div> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <!-- Event Card 1 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <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=900&q=80" | |
| alt="赛事海报" class="w-full h-24 object-cover"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent h-8"> | |
| <div class="absolute bottom-1 left-2 text-white text-xs font-medium">备战中</div> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-bold text-sm mb-1">2023长三角青少年手球联赛</h3> | |
| <p class="text-gray-500 text-xs"><i class="far fa-calendar-alt mr-1"></i> 11月15-20日</p> | |
| <p class="text-gray-500 text-xs mt-1"><i class="fas fa-map-marker-alt mr-1"></i> 上海体育中心</p> | |
| <div class="mt-2 flex justify-between items-center"> | |
| <div class="text-xs text-gray-600">已缴费: 24/30人</div> | |
| <button class="text-xs text-blue-500 font-medium" onclick="showEventPopup()">详情</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Event Card 2 --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="relative"> | |
| <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" | |
| alt="赛事海报" class="w-full h-24 object-cover"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent h-8"> | |
| <div class="absolute bottom-1 left-2 text-white text-xs font-medium">预热中</div> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="font-bold text-sm mb-1">暑期手球训练营</h3> | |
| <p class="text-gray-500 text-xs"><i class="far fa-calendar-alt mr-1"></i> 7月1-30日</p> | |
| <p class="text-gray-500 text-xs mt-1"><i class="fas fa-map-marker-alt mr-1"></i> 南京路训练基地</p> | |
| <div class="mt-2 flex justify-between items-center"> | |
| <div class="text-xs text-gray-600">报名截止: 6月20日</div> | |
| <button class="text-xs text-blue-500 font-medium" onclick="showEventPopup()">详情</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Brand Section --> | |
| <div class="mx-4 mt-6"> | |
| <h2 class="font-bold text-lg mb-3">关于我们</h2> | |
| <!-- Club Intro --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-4"> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-2 flex items-center"> | |
| <i class="fas fa-home mr-2 text-blue-500"></i> 手球少年俱乐部 | |
| </h3> | |
| <p class="text-gray-600 text-sm"> | |
| 专注于青少年手球训练10年，培养国家级运动员50余人。我们致力于通过科学的训练体系和专业教练团队，帮助孩子提升运动技能、培养团队精神。 | |
| </p> | |
| <button class="mt-3 text-blue-500 text-sm font-medium" onclick="showBrandPopup('club')"> | |
| 了解更多 <i class="fas fa-chevron-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Coaches --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden mb-4"> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-3 flex items-center"> | |
| <i class="fas fa-users mr-2 text-blue-500"></i> 教练团队 | |
| </h3> | |
| <div class="grid grid-cols-3 gap-3"> | |
| <!-- Coach 1 --> | |
| <div class="text-center"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" | |
| alt="王教练" class="w-16 h-16 rounded-full mx-auto object-cover border-2 border-blue-300"> | |
| <h4 class="font-medium text-sm mt-1">王教练</h4> | |
| <p class="text-gray-500 text-xs">国家一级运动员</p> | |
| </div> | |
| <!-- Coach 2 --> | |
| <div class="text-center"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" | |
| alt="李教练" class="w-16 h-16 rounded-full mx-auto object-cover border-2 border-blue-300"> | |
| <h4 class="font-medium text-sm mt-1">李教练</h4> | |
| <p class="text-gray-500 text-xs">青少年训练专家</p> | |
| </div> | |
| <!-- Coach 3 --> | |
| <div class="text-center"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" | |
| alt="张教练" class="w-16 h-16 rounded-full mx-auto object-cover border-2 border-blue-300"> | |
| <h4 class="font-medium text-sm mt-1">张教练</h4> | |
| <p class="text-gray-500 text-xs">体能训练主管</p> | |
| </div> | |
| </div> | |
| <button class="mt-3 text-blue-500 text-sm font-medium w-full text-center" onclick="showBrandPopup('coaches')"> | |
| 查看全部 <i class="fas fa-chevron-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- HighLights --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-4"> | |
| <h3 class="font-bold text-lg mb-3 flex items-center"> | |
| <i class="fas fa-photo-video mr-2 text-blue-500"></i> 精彩花絮 | |
| </h3> | |
| <div class="grid grid-cols-3 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=900&q=80" | |
| alt="花絮" class="w-full h-24 rounded object-cover"> | |
| <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" | |
| alt="花絮" class="w-full h-24 rounded object-cover"> | |
| <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" | |
| alt="花絮" class="w-full h-24 rounded object-cover"> | |
| </div> | |
| <button class="mt-3 text-blue-500 text-sm font-medium" onclick="showBrandPopup('highlights')"> | |
| 观看更多 <i class="fas fa-chevron-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Training Report Tab Content (Hidden Initially) --> | |
| <div id="report-tab" class="tab-content hidden pb-4"> | |
| <div class="mx-4 mt-4"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="font-bold text-lg">训练报告</h2> | |
| <div class="flex items-center"> | |
| <div class="text-sm mr-3">李小明</div> | |
| <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-user text-blue-500 text-sm"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Connection Status --> | |
| <div class="bg-white rounded-xl shadow-md p-4 mb-4"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-wifi text-blue-500"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">智能手环连接状态</h3> | |
| <p class="text-green-500 text-sm">已连接</p> | |
| </div> | |
| </div> | |
| <button class="text-blue-500 text-sm font-medium">设置</button> | |
| </div> | |
| <div class="bg-gray-100 rounded-lg p-3 text-center"> | |
| <p class="text-sm text-gray-600">上次同步: 今天 09:15</p> | |
| <button class="mt-1 text-blue-500 text-sm font-medium"> | |
| <i class="fas fa-sync-alt mr-1"></i> 立即同步数据 | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Performance Summary --> | |
| <div class="bg-white rounded-xl shadow-md p-4 mb-4"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-bold">本周训练总结</h3> | |
| <div class="bg-green-100 text-green-700 px-2 py-1 rounded-md text-xs font-medium"> | |
| <i class="fas fa-arrow-up mr-1"></i> 进步12% | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-3 gap-2 mb-4"> | |
| <div class="bg-blue-50 rounded-lg p-2 text-center"> | |
| <div class="text-2xl font-bold text-blue-500">3.2</div> | |
| <div class="text-xs text-gray-500">公里</div> | |
| </div> | |
| <div class="bg-yellow-50 rounded-lg p-2 text-center"> | |
| <div class="text-2xl font-bold text-yellow-500">78%</div> | |
| <div class="text-xs text-gray-500">命中率</div> | |
| </div> | |
| <div class="bg-green-50 rounded-lg p-2 text-center"> | |
| <div class="text-2xl font-bold text-green-500">4.5</div> | |
| <div class="text-xs text-gray-500">评分</div> | |
| </div> | |
| </div> | |
| <div class="h-2 bg-gray-200 rounded-full overflow-hidden mb-1"> | |
| <div class="h-full bg-blue-500 rounded-full" style="width: 80%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span>训练完成度</span> | |
| <span>80%</span> | |
| </div> | |
| </div> | |
| <!-- Detailed Metrics --> | |
| <div class="bg-white rounded-xl shadow-md p-4 mb-4"> | |
| <h3 class="font-bold mb-3">详细数据</h3> | |
| <div class="space-y-4"> | |
| <!-- Metric 1 --> | |
| <div> | |
| <div class="flex justify-between items-center mb-1"> | |
| <div class="font-medium">移动速度</div> | |
| <div class="text-sm">4.8 km/h</div> | |
| </div> | |
| <div class="flex items-center text-xs text-gray-500"> | |
| <div class="w-16">中等水平</div> | |
| <div class="flex-1 h-2 bg-gray-200 rounded-full mx-2"> | |
| <div class="h-full bg-blue-400 rounded-full" style="width: 55%"></div> | |
| </div> | |
| <div>同龄前45%</div> | |
| </div> | |
| </div> | |
| <!-- Metric 2 --> | |
| <div> | |
| <div class="flex justify-between items-center mb-1"> | |
| <div class="font-medium">反应时间</div> | |
| <div class="text-sm">0.32秒</div> | |
| </div> | |
| <div class="flex items-center text-xs text-gray-500"> | |
| <div class="w-16">良好</div> | |
| <div class="flex-1 h-2 bg-gray-200 rounded-full mx-2"> | |
| <div class="h-full bg-green-400 rounded-full" style="width: 75%"></div> | |
| </div> | |
| <div>同龄前25%</div> | |
| </div> | |
| </div> | |
| <!-- Metric 3 --> | |
| <div> | |
| <div class="flex justify-between items-center mb-1"> | |
| <div class="font-medium">投掷力量</div> | |
| <div class="text-sm">28.5N</div> | |
| </div> | |
| <div class="flex items-center text-xs text-gray-500"> | |
| <div class="w-16">优秀</div> | |
| <div class="flex-1 h-2 bg-gray-200 rounded-full mx-2"> | |
| <div class="h-full bg-yellow-400 rounded-full" style="width: 85%"></div> | |
| </div> | |
| <div>同龄前15%</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Training Suggestions --> | |
| <div class="bg-white rounded-xl shadow-md p-4"> | |
| <h3 class="font-bold mb-3">训练建议</h3> | |
| <div class="bg-blue-50 rounded-lg p-3 mb-3"> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3 mt-1"> | |
| <i class="fas fa-bolt text-blue-500 text-sm"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium mb-1">提升建议</h4> | |
| <p class="text-gray-600 text-sm">建议进行投掷准确性专项训练，每周增加2次15分钟反应训练</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <div class="bg-white border border-gray-200 rounded-lg p-2 text-center"> | |
| <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-2"> | |
| <i class="fas fa-dumbbell text-blue-500"></i> | |
| </div> | |
| <h4 class="font-medium text-sm">腿部力量</h4> | |
| <p class="text-gray-500 text-xs">3个练习</p> | |
| </div> | |
| <div class="bg-white border border-gray-200 rounded-lg p-2 text-center"> | |
| <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-2"> | |
| <i class="fas fa-running text-green-500"></i> | |
| </div> | |
| <h4 class="font-medium text-sm">反应速度</h4> | |
| <p class="text-gray-500 text-xs">2个训练</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Message Tab Content (Hidden Initially) --> | |
| <div id="message-tab" class="tab-content hidden pb-4"> | |
| <div class="mx-4 mt-4"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="font-bold text-lg">消息</h2> | |
| <button class="text-blue-500"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| </div> | |
| <!-- Search Bar --> | |
| <div class="relative mb-4"> | |
| <input type="text" placeholder="搜索消息..." | |
| class="w-full bg-gray-100 rounded-full py-2 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-blue-300"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <!-- Conversation List --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <!-- Conversation 1 --> | |
| <div class="p-4 border-b border-gray-100 flex items-center" onclick="showChatDetail('coach')"> | |
| <div class="relative mr-3"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" | |
| alt="王教练" class="w-12 h-12 rounded-full object-cover"> | |
| <div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <h3 class="font-medium">王教练</h3> | |
| <span class="text-xs text-gray-500">15:30</span> | |
| </div> | |
| <p class="text-sm text-gray-500 truncate">明天的训练请提前15分钟到场，我们需要...</p> | |
| </div> | |
| </div> | |
| <!-- Conversation 2 --> | |
| <div class="p-4 border-b border-gray-100 flex items-center" onclick="showChatDetail('service')"> | |
| <div class="relative mr-3"> | |
| <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-headset text-blue-500"></i> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <h3 class="font-medium">客服中心</h3> | |
| <span class="text-xs text-gray-500">昨天</span> | |
| </div> | |
| <p class="text-sm text-gray-500 truncate">您的问题我们已经收到，将尽快处理...</p> | |
| </div> | |
| </div> | |
| <!-- Conversation 3 --> | |
| <div class="p-4 flex items-center" onclick="showChatDetail('team')"> | |
| <div class="relative mr-3"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" | |
| alt="李教练" class="w-12 h-12 rounded-full object-cover"> | |
| <div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <h3 class="font-medium">李教练</h3> | |
| <span class="text-xs text-gray-500">周三</span> | |
| </div> | |
| <p class="text-sm text-gray-500 truncate">小明的最近训练数据已更新，进步很...</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Profile Tab Content (Hidden Initially) --> | |
| <div id="profile-tab" class="tab-content hidden"> | |
| <!-- Profile Header --> | |
| <div class="bg-gradient-to-r from-blue-500 to-blue-700 text-white px-6 py-8"> | |
| <div class="flex items-center mb-4"> | |
| <div class="mr-4"> | |
| <img src="https://randomuser.me/api/portraits/men/42.jpg" | |
| alt="用户头像" class="w-16 h-16 rounded-full border-2 border-white"> | |
| </div> | |
| <div> | |
| <h2 class="font-bold text-xl">张先生</h2> | |
| <p class="text-sm opacity-90">会员编号: HS20230815</p> | |
| </div> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <button class="bg-white bg-opacity-20 rounded-full px-3 py-1 text-sm flex items-center"> | |
| <i class="fas fa-crown mr-1 text-yellow-300"></i> 黄金会员 | |
| </button> | |
| <button class="bg-white bg-opacity-20 rounded-full px-3 py-1 text-sm"> | |
| 账户设置 | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Students Section --> | |
| <div class="mx-4 -mt-6 z-10 relative"> | |
| <div class="bg-white rounded-xl shadow-lg p-4"> | |
| <div class="flex justify-between items-center mb-3"> | |
| <h3 class="font-bold flex items-center"> | |
| <i class="fas fa-user-graduate mr-2 text-blue-500"></i> 关联学员 | |
| </h3> | |
| <button class="text-blue-500 text-sm"> | |
| <i class="fas fa-plus"></i> 添加学员 | |
| </button> | |
| </div> | |
| <!-- Student Cards --> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <!-- Active Student --> | |
| <div class="border-2 border-blue-300 rounded-lg p-2 bg-blue-50"> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-2"> | |
| <i class="fas fa-user text-blue-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">李小明</h4> | |
| <p class="text-xs text-gray-500">12岁</p> | |
| </div> | |
| </div> | |
| <div class="mt-2 text-xs text-blue-500 flex items-center"> | |
| <i class="fas fa-check-circle mr-1"></i> 当前查看 | |
| </div> | |
| </div> | |
| <!-- Other Student --> | |
| <div class="border border-gray-200 rounded-lg p-2"> | |
| <div class="flex items-start"> | |
| <div class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center mr-2"> | |
| <i class="fas fa-user text-gray-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">李小华</h4> | |
| <p class="text-xs text-gray-500">9岁</p> | |
| </div> | |
| </div> | |
| <button class="mt-2 w-full text-xs bg-gray-100 rounded py-1"> | |
| 切换查看 | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Menu Items --> | |
| <div class="mt-10 px-4 space-y-4"> | |
| <!-- ID Card --> | |
| <div class="bg-white rounded-xl shadow-md p-4 flex items-center justify-between" onclick="showIdCard()"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-id-card text-blue-500"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">电子学员证</h3> | |
| <p class="text-sm text-gray-500">查看/分享学员电子名片</p> | |
| </div> | |
| </div> | |
| <i class="fas fa-chevron-right text-gray-400"></i> | |
| </div> | |
| <!-- Orders --> | |
| <div class="bg-white rounded-xl shadow-md p-4 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-ticket-alt text-green-500"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">我的订单</h3> | |
| <p class="text-sm text-gray-500">2个未完成订单</p> | |
| </div> | |
| </div> | |
| <i class="fas fa-chevron-right text-gray-400"></i> | |
| </div> | |
| <!-- Payment --> | |
| <div class="bg-white rounded-xl shadow-md p-4 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-wallet text-purple-500"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">支付管理</h3> | |
| <p class="text-sm text-gray-500">绑定支付方式/充值</p> | |
| </div> | |
| </div> | |
| <i class="fas fa-chevron-right text-gray-400"></i> | |
| </div> | |
| <!-- Settings --> | |
| <div class="bg-white rounded-xl shadow-md p-4 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-cog text-orange-500"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-medium">设置</h3> | |
| <p class="text-sm text-gray-500">通知偏好/隐私设置</p> | |
| </div> | |
| </div> | |
| <i class="fas fa-chevron-right text-gray-400"></i> | |
| </div> | |
| <!-- Logout Button --> | |
| <button class="w-full bg-red-50 text-red-500 py-3 rounded-xl font-medium mt-8 mb-6" onclick="logout()"> | |
| <i class="fas fa-sign-out-alt mr-2"></i> 退出登录 | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tab Bar --> | |
| <div class="bg-white shadow-t-lg py-2 px-4 flex justify-around items-center"> | |
| <button onclick="switchTab('home')" class="tab-button tab-active flex flex-col items-center"> | |
| <i class="fas fa-home text-xl"></i> | |
| <span class="text-xs mt-1">首页</span> | |
| </button> | |
| <button onclick="switchTab('report')" class="tab-button flex flex-col items-center"> | |
| <i class="fas fa-chart-line text-xl"></i> | |
| <span class="text-xs mt-1">训练</span> | |
| </button> | |
| <button onclick="switchTab('message')" class="tab-button flex flex-col items-center"> | |
| <i class="fas fa-comments text-xl"></i> | |
| <span class="text-xs mt-1">消息</span> | |
| </button> | |
| <button onclick="switchTab('profile')" class="tab-button flex flex-col items-center"> | |
| <i class="fas fa-user text-xl"></i> | |
| <span class="text-xs mt-1">我的</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Event Popup (Hidden Initially) --> | |
| <div id="event-popup" class="fixed inset-0 bg-black bg-opacity-50 z-20 hidden flex items-center justify-center p-4"> | |
| <div class="bg-white rounded-2xl w-full max-w-md overflow-hidden slide-up"> | |
| <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=900&q=80" | |
| alt="赛事详情" class="w-full h-48 object-cover"> | |
| <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"> | |
| <i class="fas fa-times text-white"></i> | |
| </button> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4"> | |
| <h3 class="text-white font-bold text-xl">2023长三角青少年手球联赛</h3> | |
| <div class="flex items-center mt-2"> | |
| <div class="bg-blue-500 text-white px-2 py-1 rounded-md text-xs mr-2">备战中</div> | |
| <div class="text-white text-opacity-80 text-xs"> | |
| <i class="fas fa-users mr-1"></i> 已报名24人 | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="flex items-start mb-4"> | |
| <div class="w-12 text-center mr-3"> | |
| <div class="text-blue-500 font-bold">15</div> | |
| <div class="text-xs text-gray-500">周一</div> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">日期与时间</h4> | |
| <p class="text-gray-600 text-sm">2023年11月15-20日<br>每天09:00-17:00</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-4"> | |
| <div class="w-12 text-center mr-3"> | |
| <i class="fas fa-map-marker-alt text-blue-500 text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">地点</h4> | |
| <p class="text-gray-600 text-sm">上海体育中心<br>浦东新区源深路655号</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-4"> | |
| <div class="w-12 text-center mr-3"> | |
| <i class="fas fa-info-circle text-blue-500 text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">赛事说明</h4> | |
| <p class="text-gray-600 text-sm"> | |
| 本次联赛面向12-16岁青少年，分男女组别。比赛采用国际手联最新规则，由国家级裁判执裁。 | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-6"> | |
| <div class="w-12 text-center mr-3"> | |
| <i class="fas fa-money-bill-wave text-blue-500 text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">费用</h4> | |
| <p class="text-gray-600 text-sm">报名费: 680元/人<br>含比赛期间保险、纪念T恤、奖牌</p> | |
| </div> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <button class="flex-1 bg-blue-500 text-white py-3 rounded-lg font-bold"> | |
| <i class="fas fa-qrcode mr-2"></i> 分享邀请 | |
| </button> | |
| <button class="flex-1 border border-blue-500 text-blue-500 py-3 rounded-lg font-bold"> | |
| <i class="fas fa-edit mr-2"></i> 立即报名 | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Brand Popup (Hidden Initially) --> | |
| <div id="brand-popup" class="fixed inset-0 bg-black bg-opacity-50 z-20 hidden flex items-center justify-center p-4"> | |
| <div class="bg-white rounded-2xl w-full max-w-md overflow-hidden slide-up max-h-[90vh] overflow-y-auto"> | |
| <div class="p-4"> | |
| <button onclick="hideBrandPopup()" class="absolute top-3 right-3 w-8 h-8 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-times text-gray-500"></i> | |
| </button> | |
| <div id="club-content" class="brand-popup-content"> | |
| <div class="text-center mb-6"> | |
| <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" | |
| alt="俱乐部" class="w-full h-40 object-cover rounded-xl mb-4"> | |
| <h2 class="text-2xl font-bold mb-2">手球少年俱乐部</h2> | |
| <p class="text-gray-500">成立于2013年 · 国家级青少年培训基地</p> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h3 class="font-bold mb-2 flex items-center"> | |
| <i class="fas fa-star text-yellow-500 mr-2"></i> 俱乐部荣誉 | |
| </h3> | |
| <p class="text-gray-600 text-sm"> | |
| · 连续5年获得"优秀青少年体育俱乐部"称号<br> | |
| · 培养国家级运动员52名，省级运动员120名<br> | |
| · 2022年全国青少年手球锦标赛U15组冠军 | |
| </p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h3 class="font-bold mb-2 flex items-center"> | |
| <i class="fas fa-medal text-blue-500 mr-2"></i> 培训体系 | |
| </h3> | |
| <p class="text-gray-600 text-sm"> | |
| · 4-6岁: 手球启蒙课程 (运动兴趣培养)<br> | |
| · 7-9岁: 基础技能课程 (基本功训练)<br> | |
| · 10-12岁: 战术意识课程 (团队配合)<br> | |
| · 13-16岁: 竞赛提升课程 (赛事准备) | |
| </p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h3 class="font-bold mb-2 flex items-center"> | |
| <i class="fas fa-map-marker-alt text-red-500 mr-2"></i> 训练基地 | |
| </h3> | |
| <div class="flex items-start mb-3"> | |
| <div class="w-6 text-center mr-2"> | |
| <i class="fas fa-circle text-xs text-gray-400"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium text-sm">浦东校区</p> | |
| <p class="text-gray-500 text-xs">张江高科技园区科苑路88号</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-6 text-center mr-2"> | |
| <i class="fas fa-circle text-xs text-gray-400"></i> | |
| </div> | |
| <div> | |
| <p class="font-medium text-sm">浦西校区</p> | |
| <p class="text-gray-500 text-xs">静安区南京西路1376号</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="coaches-content" class="brand-popup-content hidden"> | |
| <h2 class="text-2xl font-bold mb-4 text-center">教练团队</h2> | |
| <div class="space-y-4"> | |
| <!-- Coach 1 --> | |
| <div class="flex items-start bg-gray-50 p-3 rounded-lg"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" | |
| alt="王教练" class="w-16 h-16 rounded-full object-cover mr-3 border-2 border-blue-300"> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold">王教练</h3> | |
| <p class="text-blue-500 text-sm">国家一级运动员</p> | |
| </div> | |
| <div class="flex space-x-1"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 text-sm mt-1"> | |
| 专长: 手球基本功训练、战术指导<br> | |
| 执教经验: 10年<br> | |
| 个人成就: 前国家队队员，亚运会铜牌 | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Coach 2 --> | |
| <div class="flex items-start bg-gray-50 p-3 rounded-lg"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" | |
| alt="李教练" class="w-16 h-16 rounded-full object-cover mr-3 border-2 border-blue-300"> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold">李教练</h3> | |
| <p class="text-blue-500 text-sm">青少年训练专家</p> | |
| </div> | |
| <div class="flex space-x-1"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star-half-alt text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 text-sm mt-1"> | |
| 专长: 青少年运动心理、团队建设<br> | |
| 执教经验: 8年<br> | |
| 教育背景: 北京体育大学运动心理学硕士 | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Coach 3 --> | |
| <div class="flex items-start bg-gray-50 p-3 rounded-lg"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" | |
| alt="张教练" class="w-16 h-16 rounded-full object-cover mr-3 border-2 border-blue-300"> | |
| <div class="flex-1"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-bold">张教练</h3> | |
| <p class="text-blue-500 text-sm">体能训练主管</p> | |
| </div> | |
| <div class="flex space-x-1"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 text-sm mt-1"> | |
| 专长: 运动损伤预防、体能提升<br> | |
| 资质: NSCA认证体能训练专家<br> | |
| 个人格言: "科学训练，远离伤病" | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="highlights-content" class="brand-popup-content hidden"> | |
| <h2 class="text-2xl font-bold mb-4 text-center">精彩花絮</h2> | |
| <div class="mb-4"> | |
| <div class="relative"> | |
| <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" | |
| alt="训练花絮" class="w-full h-48 object-cover rounded-xl"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <div class="w-12 h-12 bg-white bg-opacity-80 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-play text-blue-500 text-xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-center text-sm mt-2">2023夏季训练营精彩集锦</p> | |
| </div> | |
| <div class="grid grid-cols-3 gap-2 mb-4"> | |
| <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" | |
| alt="花絮" class="w-full h-24 object-cover rounded"> | |
| <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" | |
| alt="花絮" class="w-full h-24 object-cover rounded"> | |
| <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" | |
| alt="花絮" class="w-full h-24 object-cover rounded"> | |
| <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" | |
| alt="花絮" class="w-full h-24 object-cover rounded"> | |
| <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" | |
| alt="花絮" class="w-full h-24 object-cover rounded"> | |
| <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" | |
| alt="花絮" class="w-full h-24 object-cover rounded"> | |
| </div> | |
| <button class="w-full bg-blue-500 text-white py-3 rounded-lg font-bold"> | |
| <i class="fas fa-images mr-2"></i> 查看全部相册 | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ID Card Popup (Hidden Initially) --> | |
| <div id="idcard-popup" class="fixed inset-0 bg-black bg-opacity-50 z-20 hidden flex items-center justify-center p-4"> | |
| <div class="bg-white rounded-2xl w-full max-w-md overflow-hidden slide-up"> | |
| <div class="relative"> | |
| <div class="bg-gradient-to-r from-blue-500 to-blue-700 p-6 text-white"> | |
| <button onclick="hideIdCard()" class="absolute top-3 right-3 w-8 h-8 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| <div class="text-center"> | |
| <h2 class="text-xl font-bold mb-1">手球少年俱乐部</h2> | |
| <p class="text-xs opacity-80">电子学员证 · 2023-2024赛季</p> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center"> | |
| <div class="relative mr-4"> | |
| <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" | |
| alt="学员照片" class="w-20 h-20 rounded-full border-4 border-white object-cover shadow-md"> | |
| <div class="absolute -bottom-1 -right-1 bg-blue-500 text-white w-6 h-6 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-check text-xs"></i> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-xl">李小明</h3> | |
| <div class="flex flex-wrap gap-1 mt-2"> | |
| <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-md text-xs">U12组</span> | |
| <span class="bg-green-100 text-green-800 px-2 py-1 rounded-md text-xs">正式学员</span> | |
| <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-md text-xs">黄金会员</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 grid grid-cols-2 gap-4"> | |
| <div> | |
| <p class="text-xs text-gray-500 mb-1">学号</p> | |
| <p class="font-medium">HS230815</p> | |
| </div> | |
| <div> | |
| <p class="text-xs text-gray-500 mb-1">有效期</p> | |
| <p class="font-medium">2023.09-2024.08</p> | |
| </div> | |
| <div> | |
| <p class="text-xs text-gray-500 mb-1">教练</p> | |
| <p class="font-medium">王教练</p> | |
| </div> | |
| <div> | |
| <p class="text-xs text-gray-500 mb-1">训练组</p> | |
| <p class="font-medium">周三A组</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 bg-gray-50 rounded-lg p-4"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <p class="font-medium">二维码</p> | |
| <button class="text-blue-500 text-sm"> | |
| <i class="fas fa-redo mr-1"></i> 刷新 | |
| </button> | |
| </div> | |
| <div class="flex justify-center"> | |
| <div class="w-32 h-32 bg-white p-2 rounded border border-gray-200 flex items-center justify-center"> | |
| <div class="w-full h-full bg-gray-200 flex items-center justify-center"> | |
| <p class="text-xs text-center">学员专属二维码</p> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-xs text-gray-500 mt-2 text-center">场馆签到/赛事核验使用</p> | |
| </div> | |
| <div class="mt-6 flex space-x-3"> | |
| <button class="flex-1 border border-blue-500 text-blue-500 py-2 rounded-lg font-medium"> | |
| <i class="fas fa-share-alt mr-2"></i> 分享 | |
| </button> | |
| <button class="flex-1 bg-blue-500 text-white py-2 rounded-lg font-medium"> | |
| <i class="fas fa-download mr-2"></i> 保存 | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chat Detail (Hidden Initially) --> | |
| <div id="chat-detail" class="fixed inset-0 bg-white z-20 hidden flex flex-col"> | |
| <!-- Chat Header --> | |
| <div class="bg-white shadow-sm py-3 px-4 flex items-center justify-between border-b border-gray-200"> | |
| <div class="flex items-center"> | |
| <button onclick="hideChatDetail()" class="mr-3"> | |
| <i class="fas fa-auto"></i> | |
| </button> | |
| <div class="relative"> | |
| <img id="chat-avatar" src="https://randomuser.me/api/portraits/men/32.jpg" | |
| alt="头像" class="w-10 h-10 rounded-full object-cover"> | |
| <div id="chat-status" class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div> | |
| </div> | |
| <div class="ml-3"> | |
| <h3 id="chat-name" class="font-bold">王教练</h3> | |
| <p id="chat-title" class="text-xs text-gray-500">国家一级运动员</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button> | |
| <i class="fas fa-phone-alt text-blue-500"></i> | |
| </button> | |
| <button> | |
| <i class="fas fa-ellipsis-v text-gray-500"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Chat Messages --> | |
| <div class="flex-1 overflow-y-auto p-4 bg-gray-50" id="chat-messages"> | |
| <!-- Messages will be inserted here by JavaScript --> | |
| </div> | |
| <!-- Chat Input --> | |
| <div class="bg-white border-t border-gray-200 p-3"> | |
| <div class="flex items-center"> | |
| <button class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-2"> | |
| <i class="fas fa-plus text-gray-500"></i> | |
| </button> | |
| <input type="text" placeholder="输入消息..." | |
| class="flex-1 bg-gray-100 rounded-full py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-300"> | |
| <button class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center ml-2"> | |
| <i class="fas fa-paper-plane text-white"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Show main app and hide auth screen | |
| function showApp() { | |
| document.getElementById('auth-screen').classList.add('hidden'); | |
| document.getElementById('app-container').classList.remove('hidden'); | |
| document.getElementById('app-container').classList.add('flex'); | |
| } | |
| // Logout and return to auth screen | |
| function logout() { | |
| document.getElementById('auth-screen').classList.remove('hidden'); | |
| document.getElementById('app-container').classList.remove('flex'); | |
| document.getElementById('app-container').classList.add('hidden'); | |
| } | |
| // Switch between tabs | |
| function switchTab(tabName) { | |
| // Hide all tab contents | |
| document.querySelectorAll('.tab-content').forEach(content => { | |
| content.classList.add('hidden'); | |
| content.classList.remove('active'); | |
| }); | |
| // Show selected tab content | |
| document.getElementById(tabName + '-tab').classList.remove('hidden'); | |
| document.getElementById(tabName + '-tab').classList.add('active'); | |
| // Update tab buttons | |
| document.querySelectorAll('.tab-button').forEach(button => { | |
| button.classList.remove('tab-active'); | |
| }); | |
| document.querySelector(`.tab-button[onclick="switchTab('${tabName}')"]`).classList.add('tab-active'); | |
| } | |
| // Show event popup | |
| function showEventPopup() { | |
| document.getElementById('event-popup').classList.remove('hidden'); | |
| document.getElementById('event-popup').classList.add('flex'); | |
| } | |
| // Hide event popup | |
| function hideEventPopup() { | |
| document.getElementById('event-popup').classList.add('hidden'); | |
| document.getElementById('event-popup').classList.remove('flex'); | |
| } | |
| // Show brand popup with specific content | |
| function showBrandPopup(content) { | |
| document.getElementById('brand-popup').classList.remove('hidden'); | |
| document.getElementById('brand-popup').classList.add('flex'); | |
| // Hide all content divs | |
| document.querySelectorAll('.brand-popup-content').forEach(div => { | |
| div.classList.add('hidden'); | |
| }); | |
| // Show selected content | |
| document.getElementById(content + '-content').classList.remove('hidden'); | |
| } | |
| // Hide brand popup | |
| function hideBrandPopup() { | |
| document.getElementById('brand-popup').classList.add('hidden'); | |
| document.getElementById('brand-popup').classList.remove('flex'); | |
| } | |
| // Show ID card popup | |
| function showIdCard() { | |
| document.getElementById('idcard-popup').classList.remove('hidden'); | |
| document.getElementById('idcard-popup').classList.add('flex'); | |
| } | |
| // Hide ID card popup | |
| function hideIdCard() { | |
| document.getElementById('idcard-popup').classList.add('hidden'); | |
| document.getElementById('idcard-popup').classList.remove('flex'); | |
| } | |
| // Show chat detail with specific user | |
| function showChatDetail(type) { | |
| document.getElementById('chat-detail').classList.remove('hidden'); | |
| document.getElementById('chat-detail').classList.add('flex'); | |
| // Clear previous messages | |
| document.getElementById('chat-messages').innerHTML = ''; | |
| // Set chat info based on type | |
| if (type === 'coach') { | |
| document.getElementById('chat-avatar').src = 'https://randomuser.me/api/portraits/men/32.jpg'; | |
| document.getElementById('chat-name').textContent = '王教练'; | |
| document.getElementById('chat-title').textContent = '国家一级运动员'; | |
| document.getElementById('chat-status').classList.replace('bg-gray-400', 'bg-green-500'); | |
| // Add some sample messages | |
| addMessage('coach', '李小明家长您好，明天的训练课请提前15分钟到达场地', '09:30'); | |
| addMessage('me', '好的王教练，我们一定准时到', '09:32'); | |
| addMessage('coach', '最近小明的进步很大，特别是在手部力量方面', '09:33'); | |
| addMessage('me', '谢谢王教练的指导，他自己也特别喜欢训练', '09:35'); | |
| addMessage('coach', '下个月我们有场友谊赛，建议小明参加锻炼一下', '10:15'); | |
| } else if (type === 'service') { | |
| document.getElementById('chat-avatar').src = ''; | |
| document.getElementById('chat-avatar').className = 'w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center'; | |
| document.getElementById('chat-avatar').innerHTML = '<i class="fas fa-headset text-blue-500"></i>'; | |
| document.getElementById('chat-name').textContent = '客服中心'; | |
| document.getElementById('chat-title').textContent = '服务时间: 9:00-18:00'; | |
| document.getElementById('chat-status').classList.replace('bg-green-500', 'bg-gray-400'); | |
| // Add some sample messages | |
| addMessage('service', '您好，有什么可以帮您？', '昨天 14:20'); | |
| addMessage('me', '我想咨询一下暑期训练营的报名', '昨天 14:22'); | |
| addMessage('service', '请稍等，我为您查询相关信息...', '昨天 14:22'); | |
| addMessage('service', '2023暑期训练营从7月1日开始，包含基础班和提高班两种', '昨天 14:24'); | |
| } else if (type === 'team') { | |
| document.getElementById('chat-avatar').src = 'https://randomuser.me/api/portraits/women/44.jpg'; | |
| document.getElementById('chat-name').textContent = '李教练'; | |
| document.getElementById('chat-title').textContent = '青少年训练专家'; | |
| document.getElementById('chat-status').classList.replace('bg-gray-400', 'bg-green-500'); | |
| // Add some sample messages | |
| addMessage('team', '各位U12组家长好，本周六训练时间调整为下午3点', '周三 08:15'); | |
| addMessage('team', '请大家携带护具和水杯，训练强度会稍微加大', '周三 08:16'); | |
| addMessage('me', '收到，谢谢李教练', '周三 09:30'); | |
| } | |
| // Scroll to bottom | |
| setTimeout(() => { | |
| document.getElementById('chat-messages').scrollTop = document.getElementById('chat-messages').scrollHeight; | |
| }, 100); | |
| } | |
| // Hide chat detail | |
| function hideChatDetail() { | |
| document.getElementById('chat-detail').classList.add('hidden'); | |
| document.getElementById('chat-detail').classList.remove('flex'); | |
| } | |
| // Helper function to add message to chat | |
| function addMessage(sender, text, time) { | |
| const messages = document.getElementById('chat-messages'); | |
| if (sender === 'me') { | |
| messages.innerHTML += ` | |
| <div class="flex justify-end mb-3"> | |
| <div class="max-w-xs lg:max-w-md"> | |
| <div class="bg-blue-500 text-white p-3 rounded-xl rounded-br-none"> | |
| ${text} | |
| </div> | |
| <div class="text-xs text-gray-500 text-right mt-1">${time}</div> | |
| </div> | |
| </div> | |
| `; | |
| } else { | |
| messages.innerHTML += ` | |
| <div class="flex justify-start mb-3"> | |
| <div class="max-w-xs lg:max-w-md"> | |
| <div class="bg-white p-3 rounded-xl rounded-bl-none shadow"> | |
| ${text} | |
| </div> | |
| <div class="text-xs text-gray-500 mt-1">${time}</div> | |
| </div> | |
| </div> | |
| `; | |
| } | |
| } | |
| </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-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |