| <!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"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: '#6E8EFB', |
| secondary: '#A777FF', |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| .member-card { |
| width: 120px; |
| height: 80px; |
| transition: all 0.3s ease; |
| } |
| .member-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
| } |
| .ai-bubble { |
| border-radius: 8px; |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
| } |
| .team-name-option { |
| transition: all 0.2s ease; |
| } |
| .team-name-option:hover { |
| transform: scale(1.05); |
| } |
| .countdown-timer { |
| font-family: monospace; |
| } |
| .slide-fade-enter-active { |
| transition: all 0.3s ease-out; |
| } |
| .slide-fade-leave-active { |
| transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1); |
| } |
| .slide-fade-enter-from, |
| .slide-fade-leave-to { |
| transform: translateX(20px); |
| opacity: 0; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 min-h-screen"> |
| <div class="container mx-auto px-4 py-8"> |
| |
| <header class="mb-8"> |
| <h1 class="text-3xl font-bold text-center text-primary">趣味组队系统</h1> |
| <p class="text-center text-gray-600 mt-2">为45名成员提供智能有趣的组队体验</p> |
| |
| |
| <div class="flex justify-between items-center mt-6 bg-white p-4 rounded-lg shadow"> |
| <div class="flex items-center"> |
| <div class="w-64 bg-gray-200 rounded-full h-4 mr-4"> |
| <div class="bg-primary h-4 rounded-full" style="width: 65%"></div> |
| </div> |
| <span class="text-sm font-medium">65% 已完成组队</span> |
| </div> |
| <div class="countdown-timer bg-gray-100 px-4 py-2 rounded-lg"> |
| <span class="font-bold">⏰ 剩余时间:</span> |
| <span id="countdown" class="ml-2">23:45:12</span> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> |
| |
| <div class="lg:col-span-1 bg-white p-6 rounded-lg shadow"> |
| <h2 class="text-xl font-semibold mb-4 flex items-center"> |
| <i class="fas fa-users mr-2 text-secondary"></i> 成员名单 (45人) |
| </h2> |
| <div class="mb-4"> |
| <input type="text" placeholder="搜索成员..." class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"> |
| </div> |
| <div class="h-96 overflow-y-auto pr-2"> |
| <div class="grid grid-cols-2 sm:grid-cols-3 gap-3"> |
| |
| <template id="member-template"> |
| <div class="member-card bg-white border border-gray-200 rounded-lg p-2 flex flex-col items-center justify-center cursor-pointer hover:border-primary"> |
| <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center mb-1 text-sm font-medium"></div> |
| <span class="text-sm text-center font-medium truncate w-full"></span> |
| <span class="text-xs text-gray-500"></span> |
| </div> |
| </template> |
| </div> |
| </div> |
| <div class="mt-4 text-sm text-gray-500"> |
| <p>点击成员可查看详情或邀请组队</p> |
| </div> |
| </div> |
|
|
| |
| <div class="lg:col-span-1 bg-white p-6 rounded-lg shadow"> |
| <h2 class="text-xl font-semibold mb-4 flex items-center"> |
| <i class="fas fa-random mr-2 text-secondary"></i> 组队方式 |
| </h2> |
| |
| |
| <div class="space-y-4"> |
| |
| <div class="border border-gray-200 rounded-lg p-4 hover:border-primary transition-colors"> |
| <div class="flex items-start"> |
| <div class="bg-primary bg-opacity-10 p-2 rounded-full mr-3"> |
| <i class="fas fa-user-plus text-primary"></i> |
| </div> |
| <div> |
| <h3 class="font-medium">自由组队</h3> |
| <p class="text-sm text-gray-600 mt-1">创建队伍并邀请其他成员加入</p> |
| <button class="mt-3 bg-primary text-white px-4 py-2 rounded-lg text-sm hover:bg-opacity-90 transition">创建队伍</button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="border border-gray-200 rounded-lg p-4 hover:border-secondary transition-colors"> |
| <div class="flex items-start"> |
| <div class="bg-secondary bg-opacity-10 p-2 rounded-full mr-3"> |
| <i class="fas fa-robot text-secondary"></i> |
| </div> |
| <div> |
| <h3 class="font-medium">AI智能分组</h3> |
| <p class="text-sm text-gray-600 mt-1">基于姓名特征、加入时间等智能匹配</p> |
| <div class="mt-3 flex space-x-2"> |
| <button class="bg-secondary text-white px-4 py-2 rounded-lg text-sm hover:bg-opacity-90 transition">智能推荐</button> |
| <button class="border border-gray-300 px-4 py-2 rounded-lg text-sm hover:bg-gray-50 transition">匹配规则</button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="border border-gray-200 rounded-lg p-4 hover:border-primary transition-colors"> |
| <div class="flex items-start"> |
| <div class="bg-primary bg-opacity-10 p-2 rounded-full mr-3"> |
| <i class="fas fa-magic text-primary"></i> |
| </div> |
| <div> |
| <h3 class="font-medium">自动分组</h3> |
| <p class="text-sm text-gray-600 mt-1">系统随机分配，快速完成组队</p> |
| <div class="mt-3"> |
| <label class="flex items-center text-sm"> |
| <input type="checkbox" class="rounded text-primary mr-2"> |
| 平衡各组人数 |
| </label> |
| <button class="mt-2 bg-gray-100 text-gray-800 px-4 py-2 rounded-lg text-sm hover:bg-gray-200 transition w-full">自动分配</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="mt-6 ai-bubble bg-indigo-50 p-4 border-l-4 border-secondary"> |
| <div class="flex"> |
| <div class="mr-3"> |
| <div class="w-8 h-8 rounded-full bg-secondary text-white flex items-center justify-center"> |
| <i class="fas fa-lightbulb"></i> |
| </div> |
| </div> |
| <div> |
| <h4 class="font-medium text-secondary">AI 推荐</h4> |
| <p class="text-sm mt-1">建议将【王宝奇】【王晓楠】【王莹】组成"王牌战队"，因三位姓名均含"王"字且字数呈2-3-1递减排列</p> |
| <div class="mt-2 flex space-x-2"> |
| <button class="text-xs bg-secondary text-white px-3 py-1 rounded hover:bg-opacity-90">采纳建议</button> |
| <button class="text-xs border border-gray-300 px-3 py-1 rounded hover:bg-gray-50">查看详情</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="lg:col-span-1 bg-white p-6 rounded-lg shadow"> |
| <h2 class="text-xl font-semibold mb-4 flex items-center"> |
| <i class="fas fa-users-between-lines mr-2 text-secondary"></i> 队伍管理 |
| </h2> |
| |
| |
| <div class="mb-6"> |
| <div class="flex justify-between items-center mb-3"> |
| <h3 class="font-medium">我的队伍</h3> |
| <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded">已锁定</span> |
| </div> |
| <div class="border border-gray-200 rounded-lg p-4"> |
| <div class="flex justify-between items-center mb-3"> |
| <h4 class="font-medium text-lg">冰雪聪明</h4> |
| <button class="text-xs text-primary hover:underline">编辑队名</button> |
| </div> |
| |
| |
| <div class="space-y-2"> |
| <div class="flex items-center justify-between p-2 bg-blue-50 rounded"> |
| <div class="flex items-center"> |
| <div class="w-6 h-6 rounded-full bg-blue-100 mr-2 flex items-center justify-center text-xs">温</div> |
| <span>温媛媛</span> |
| </div> |
| <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">队长</span> |
| </div> |
| <div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded"> |
| <div class="flex items-center"> |
| <div class="w-6 h-6 rounded-full bg-gray-100 mr-2 flex items-center justify-center text-xs">覃</div> |
| <span>覃海冰</span> |
| </div> |
| <button class="text-xs text-gray-500 hover:text-primary">设为队长</button> |
| </div> |
| <div class="flex items-center justify-between p-2 hover:bg-gray-50 rounded"> |
| <div class="flex items-center"> |
| <div class="w-6 h-6 rounded-full bg-gray-100 mr-2 flex items-center justify-center text-xs">李</div> |
| <span>李颖超</span> |
| </div> |
| <button class="text-xs text-gray-500 hover:text-primary">设为队长</button> |
| </div> |
| </div> |
| |
| |
| <div class="mt-4 pt-3 border-t border-gray-200 flex justify-between"> |
| <button class="text-xs text-red-500 hover:text-red-700 flex items-center"> |
| <i class="fas fa-trash-alt mr-1"></i> 解散队伍 |
| </button> |
| <button class="text-xs text-gray-500 hover:text-primary flex items-center"> |
| <i class="fas fa-user-plus mr-1"></i> 邀请成员 |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="mb-6"> |
| <h3 class="font-medium mb-3">队名生成器</h3> |
| <div class="border border-gray-200 rounded-lg p-4"> |
| <div class="flex items-center mb-3"> |
| <input type="text" placeholder="输入关键词..." class="flex-1 px-3 py-2 border rounded-l-lg focus:outline-none focus:ring-1 focus:ring-primary"> |
| <button class="bg-primary text-white px-4 py-2 rounded-r-lg hover:bg-opacity-90"> |
| <i class="fas fa-wand-magic-sparkles"></i> |
| </button> |
| </div> |
| |
| |
| <div class="space-y-2 mt-3"> |
| <div class="team-name-option flex items-center justify-between p-3 bg-gray-50 rounded-lg cursor-pointer"> |
| <span class="font-medium">镌刻时光</span> |
| <button class="text-xs bg-primary text-white px-2 py-1 rounded hover:bg-opacity-90">采纳</button> |
| </div> |
| <div class="team-name-option flex items-center justify-between p-3 bg-gray-50 rounded-lg cursor-pointer"> |
| <span class="font-medium">吴与伦比</span> |
| <button class="text-xs bg-primary text-white px-2 py-1 rounded hover:bg-opacity-90">采纳</button> |
| </div> |
| <div class="team-name-option flex items-center justify-between p-3 bg-gray-50 rounded-lg cursor-pointer"> |
| <span class="font-medium">冰雪聪明</span> |
| <button class="text-xs bg-primary text-white px-2 py-1 rounded hover:bg-opacity-90">采纳</button> |
| </div> |
| </div> |
| |
| <div class="mt-3 flex justify-between text-xs text-gray-500"> |
| <button class="hover:text-primary flex items-center"> |
| <i class="fas fa-rotate-right mr-1"></i> 重新生成 |
| </button> |
| <button class="hover:text-primary flex items-center"> |
| <i class="fas fa-pen mr-1"></i> 手动编辑 |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div> |
| <h3 class="font-medium mb-3">组队状态</h3> |
| <div class="border border-gray-200 rounded-lg p-4"> |
| <div class="flex justify-between items-center mb-2"> |
| <span class="text-sm">已完成组队</span> |
| <span class="text-sm font-medium">29/45</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-green-500 h-2 rounded-full" style="width: 65%"></div> |
| </div> |
| |
| <div class="mt-4 text-sm"> |
| <div class="flex justify-between py-1 border-b border-gray-100"> |
| <span>已锁定队伍</span> |
| <span class="font-medium">10</span> |
| </div> |
| <div class="flex justify-between py-1 border-b border-gray-100"> |
| <span>待确认队伍</span> |
| <span class="font-medium">4</span> |
| </div> |
| <div class="flex justify-between py-1"> |
| <span>未组队成员</span> |
| <span class="font-medium">16</span> |
| </div> |
| </div> |
| |
| <button class="mt-4 w-full bg-primary text-white py-2 rounded-lg hover:bg-opacity-90 text-sm"> |
| 锁定队伍并提交 |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <footer class="mt-12 text-center text-sm text-gray-500"> |
| <p>趣味组队系统 © 2023 | 超时未组队成员将自动分配</p> |
| <p class="mt-1">截止时间: <span id="deadline" class="font-medium">2023-12-31 18:00</span></p> |
| </footer> |
| </div> |
|
|
| <script> |
| |
| const members = [ |
| {name: "曾谦", joinTime: "2023-10-01"}, |
| {name: "陈香玉", joinTime: "2023-10-02"}, |
| {name: "陈雅", joinTime: "2023-10-02"}, |
| {name: "崔晓雪", joinTime: "2023-10-03"}, |
| {name: "代小丹", joinTime: "2023-10-03"}, |
| {name: "丁雪晶", joinTime: "2023-10-04"}, |
| {name: "董雪", joinTime: "2023-10-05"}, |
| {name: "杜娟", joinTime: "2023-10-05"}, |
| {name: "冯帆", joinTime: "2023-10-06"}, |
| {name: "高菲", joinTime: "2023-10-07"}, |
| {name: "高阳", joinTime: "2023-10-08"}, |
| {name: "郭晓萌", joinTime: "2023-10-08"}, |
| {name: "韩旭", joinTime: "2023-10-09"}, |
| {name: "何苗", joinTime: "2023-10-10"}, |
| {name: "侯亚楠", joinTime: "2023-10-11"}, |
| {name: "胡畔", joinTime: "2023-10-12"}, |
| {name: "黄珊", joinTime: "2023-10-13"}, |
| {name: "贾茹", joinTime: "2023-10-14"}, |
| {name: "姜楠", joinTime: "2023-10-15"}, |
| {name: "蒋文文", joinTime: "2023-10-16"}, |
| {name: "金鑫", joinTime: "2023-10-17"}, |
| {name: "康慨", joinTime: "2023-10-18"}, |
| {name: "李丹", joinTime: "2023-10-19"}, |
| {name: "李颖超", joinTime: "2023-10-20"}, |
| {name: "梁家镌", joinTime: "2023-10-21"}, |
| {name: "刘畅", joinTime: "2023-10-22"}, |
| {name: "刘洋", joinTime: "2023-10-23"}, |
| {name: "卢珊", joinTime: "2023-10-24"}, |
| {name: "罗薇", joinTime: "2023-10-25"}, |
| {name: "马丽", joinTime: "2023-10-26"}, |
| {name: "牛萌萌", joinTime: "2023-10-27"}, |
| {name: "潘婷", joinTime: "2023-10-28"}, |
| {name: "齐悦", joinTime: "2023-10-29"}, |
| {name: "钱芳", joinTime: "2023-10-30"}, |
| {name: "秦雯", joinTime: "2023-10-31"}, |
| {name: "邱月", joinTime: "2023-11-01"}, |
| {name: "任静", joinTime: "2023-11-02"}, |
| {name: "沈洁", joinTime: "2023-11-03"}, |
| {name: "宋佳", joinTime: "2023-11-04"}, |
| {name: "孙梅", joinTime: "2023-11-05"}, |
| {name: "覃海冰", joinTime: "2023-11-06"}, |
| {name: "王宝奇", joinTime: "2023-11-07"}, |
| {name: "王晓楠", joinTime: "2023-11-08"}, |
| {name: "王莹", joinTime: "2023-11-09"}, |
| {name: "温媛媛", joinTime: "2023-11-10"}, |
| {name: "吴桐", joinTime: "2023-11-11"}, |
| {name: "吴洋", joinTime: "2023-11-12"}, |
| {name: "武迪", joinTime: "2023-11-13"}, |
| {name: "肖雪", joinTime: "2023-11-14"}, |
| {name: "徐静", joinTime: "2023-11-15"}, |
| {name: "许晴", joinTime: "2023-11-16"}, |
| {name: "杨光", joinTime: "2023-11-17"}, |
| {name: "于娜", joinTime: "2023-11-18"}, |
| {name: "袁媛", joinTime: "2023-11-19"}, |
| {name: "张丽", joinTime: "2023-11-20"}, |
| {name: "赵静", joinTime: "2023-11-21"}, |
| {name: "周梅", joinTime: "2023-11-22"}, |
| {name: "朱凯莉", joinTime: "2023-11-23"} |
| ]; |
| |
| |
| const memberContainer = document.querySelector('.grid.grid-cols-2.sm:grid-cols-3.gap-3'); |
| const memberTemplate = document.getElementById('member-template'); |
| |
| members.slice(0, 45).forEach(member => { |
| const clone = memberTemplate.content.cloneNode(true); |
| const avatar = clone.querySelector('.w-8.h-8'); |
| const name = clone.querySelector('span.text-sm'); |
| const joinTime = clone.querySelector('span.text-xs'); |
| |
| |
| const lastNameChar = member.name.charAt(0); |
| avatar.textContent = lastNameChar; |
| |
| name.textContent = member.name; |
| joinTime.textContent = member.joinTime.split('-')[1] + '月加入'; |
| |
| |
| const colors = ['bg-blue-100', 'bg-green-100', 'bg-yellow-100', 'bg-red-100', 'bg-purple-100', 'bg-pink-100']; |
| const randomColor = colors[Math.floor(Math.random() * colors.length)]; |
| avatar.classList.add(randomColor); |
| |
| memberContainer.appendChild(clone); |
| }); |
| |
| |
| function updateCountdown() { |
| const now = new Date(); |
| const deadline = new Date('2023-12-31T18:00:00'); |
| const diff = deadline - now; |
| |
| if (diff <= 0) { |
| document.getElementById('countdown').textContent = "已截止"; |
| return; |
| } |
| |
| const hours = Math.floor(diff / (1000 * 60 * 60)); |
| const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); |
| const seconds = Math.floor((diff % (1000 * 60)) / 1000); |
| |
| document.getElementById('countdown').textContent = |
| `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; |
| } |
| |
| setInterval(updateCountdown, 1000); |
| updateCountdown(); |
| |
| |
| document.querySelectorAll('.team-name-option').forEach(option => { |
| option.addEventListener('click', function(e) { |
| if (e.target.tagName === 'BUTTON') return; |
| |
| const button = this.querySelector('button'); |
| button.classList.toggle('bg-primary'); |
| button.classList.toggle('bg-green-500'); |
| button.textContent = button.textContent === '采纳' ? '已采纳' : '采纳'; |
| }); |
| }); |
| |
| |
| const aiBubble = document.querySelector('.ai-bubble'); |
| setTimeout(() => { |
| aiBubble.classList.add('animate-pulse'); |
| setTimeout(() => { |
| aiBubble.classList.remove('animate-pulse'); |
| }, 2000); |
| }, 1500); |
| </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=yuanyuanwen/ai-share" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
