Spaces:
Running
Running
| <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>EduPlay - 移动学习平台</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> .no-scrollbar::-webkit-scrollbar { display: none; } .feedback-modal { transition: opacity 0.3s ease; } .feedback-content { transition: transform 0.3s ease; } </style> </head> <body class="bg-gray-50 font-sans pb-20"> <!-- 顶部导航栏 --> <header class="bg-white shadow-sm sticky top-0 z-30"> <div class="max-w-md mx-auto px-4 py-3 flex justify-between items-center"> <div class="flex items-center"> <i class="fas fa-graduation-cap text-xl text-indigo-600 mr-2"></i> <h1 class="text-lg font-bold text-gray-800">EduPlay</h1> </div> <button id="user-menu-btn" aria-label="用户菜单" class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center"> <i class="fas fa-user text-gray-600"></i> </button> </div> </header> <!-- 端口选择 --> <div class="bg-white shadow-sm sticky top-12 z-20"> <div class="flex overflow-x-auto no-scrollbar px-2"> <button class="port-selector relative text-sm flex items-center justify-center flex-1 px-2 py-2 rounded-md" data-port="student" aria-label="学生端"> <i class="fas fa-user-graduate mr-1"></i> 学生端 <span class="role-badge hidden absolute -top-1 -right-1 bg-indigo-600 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">✓</span> </button> <button class="port-selector relative text-sm flex items-center justify-center flex-1 px-2 py-2 rounded-md" data-port="teacher" aria-label="教师端"> <i class="fas fa-chalkboard-teacher mr-1"></i> 教师端 <span class="role-badge hidden absolute -top-1 -right-1 bg-blue-600 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">✓</span> </button> <button class="port-selector relative text-sm flex items-center justify-center flex-1 px-2 py-2 rounded-md" data-port="parent" aria-label="家长端"> <i class="fas fa-users mr-1"></i> 家长端 <span class="role-badge hidden absolute -top-1 -right-1 bg-green-600 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">✓</span> </button> </div> </div> <!-- 页面内容容器 --> <main class="max-w-md mx-auto px-4 py-4 space-y-6"> <!-- 学生端 --> <section id="student-port" class="port-content"> <div class="text-center mb-4"> <h1 class="text-2xl font-bold text-indigo-800">学生学习中心</h1> <p class="text-gray-600">快乐学习，健康成长</p> </div> <div class="grid grid-cols-2 gap-3 mb-4"> <div class="subject-card bg-white rounded-lg shadow p-4 flex flex-col items-center active:scale-95 transition" data-subject="chinese"> <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mb-2"> <i class="fas fa-book-open text-indigo-600 text-xl"></i> </div> <h3 class="font-semibold">语文</h3> <p class="text-xs text-gray-500">12个新内容</p> </div> <div class="subject-card bg-white rounded-lg shadow p-4 flex flex-col items-center active:scale-95 transition" data-subject="math"> <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mb-2"> <i class="fas fa-calculator text-blue-600 text-xl"></i> </div> <h3 class="font-semibold">数学</h3> <p class="text-xs text-gray-500">8个新练习</p> </div> </div> <div class="bg-white rounded-lg shadow p-4"> <h2 class="text-lg font-bold flex items-center mb-3"> <i class="fas fa-tasks text-indigo-500 mr-2"></i> 今日任务 </h2> <ul class="space-y-2 text-sm"> <li class="flex justify-between items-center border-b pb-2"> <span>语文阅读练习</span> <span class="px-2 py-1 text-xs rounded-full bg-indigo-100 text-indigo-800">进行中</span> </li> <li class="flex justify-between items-center border-b pb-2"> <span>数学作业</span> <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">未开始</span> </li> <li class="flex justify-between items-center"> <span>英语单词背诵</span> <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">已完成</span> </li> </ul> </div> </section> <!-- 教师端 --> <section id="teacher-port" class="port-content hidden"> <h1 class="text-2xl font-bold text-blue-800 text-center">教师管理中心</h1> <p class="text-gray-600 text-center mb-4">班级管理 · 教学分析 · 作业布置</p> <div class="grid grid-cols-2 gap-3"> <div class="bg-white rounded-lg shadow p-4 flex flex-col items-center active:scale-95 transition"> <i class="fas fa-users text-blue-600 text-2xl mb-2"></i> <h3 class="text-sm font-semibold">班级管理</h3> </div> <div class="bg-white rounded-lg shadow p-4 flex flex-col items-center active:scale-95 transition"> <i class="fas fa-tasks text-blue-600 text-2xl mb-2"></i> <h3 class="text-sm font-semibold">布置作业</h3> </div> </div> </section> <!-- 家长端 --> <section id="parent-port" class="port-content hidden"> <h1 class="text-2xl font-bold text-green-800 text-center">家长监护中心</h1> <p class="text-gray-600 text-center mb-4">关注成长 · 学习陪伴 · 家校沟通</p> <div class="bg-white rounded-lg shadow p-4"> <h2 class="font-bold text-lg mb-2 flex items-center"> <i class="fas fa-chart-pie text-green-500 mr-2"></i> 学习报告 </h2> <p class="text-sm text-gray-600">本周学习：6小时15分钟</p> </div> </section> </main> <!-- 底部导航 --> <nav class="bottom-nav fixed bottom-0 left-0 right-0 bg-white shadow-md"> <div class="flex justify-around py-2"> <button class="nav-btn text-indigo-600 flex flex-col items-center text-xs" data-tab="home" aria-label="首页"> <i class="fas fa-home text-lg mb-1"></i><span>首页</span> </button> <button class="nav-btn text-gray-500 flex flex-col items-center text-xs" data-tab="courses" aria-label="课程"> <i class="fas fa-book text-lg mb-1"></i><span>课程</span> </button> <button class="nav-btn text-gray-500 flex flex-col items-center text-xs" data-tab="stats" aria-label="数据"> <i class="fas fa-chart-line text-lg mb-1"></i><span>数据</span> </button> <button class="nav-btn text-gray-500 flex flex-col items-center text-xs" data-tab="profile" aria-label="我的"> <i class="fas fa-user text-lg mb-1"></i><span>我的</span> </button> </div> </nav> <!-- 反馈按钮 --> <button id="feedback-btn" aria-label="反馈" class="fixed bottom-20 right-4 w-12 h-12 bg-indigo-600 rounded-full shadow-lg text-white flex items-center justify-center"> <i class="fas fa-comment-dots text-xl"></i> </button> <!-- 反馈模态框 --> <div id="feedback-modal" class="feedback-modal fixed inset-0 bg-black bg-opacity-50 hidden flex justify-center items-center z-50"> <div class="feedback-content bg-white w-11/12 max-w-sm rounded-lg p-4 transform scale-95 opacity-0"> <h3 class="text-lg font-bold mb-4 text-center">意见反馈</h3> <form id="feedback-form" class="space-y-3"> <select id="feedback-type" class="w-full border rounded px-2 py-2"> <option value="suggestion">建议</option> <option value="bug">错误报告</option> <option value="question">问题咨询</option> </select> <textarea id="feedback-content" rows="3" class="w-full border rounded px-2 py-2" placeholder="请描述您的反馈..."></textarea> <div class="flex justify-center space-x-1"> <button type="button" class="rating-star text-2xl" data-rating="1">☆</button> <button type="button" class="rating-star text-2xl" data-rating="2">☆</button> <button type="button" class="rating-star text-2xl" data-rating="3">☆</button> <button type="button" class="rating-star text-2xl" data-rating="4">☆</button> <button type="button" class="rating-star text-2xl" data-rating="5">☆</button> </div> <input type="hidden" id="feedback-rating" value="0"> <button type="submit" id="submit-feedback" class="w-full bg-indigo-600 text-white py-2 rounded">提交</button> </form> </div> </div> <!-- 成功提示 --> <div id="feedback-success" class="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white p-6 rounded-lg shadow-lg hidden z-50 text-center"> <i class="fas fa-check-circle text-green-500 text-3xl mb-2"></i> <p class="font-bold">反馈成功！</p> </div> <script> document.addEventListener('DOMContentLoaded', () => { const portSelectors = document.querySelectorAll('.port-selector'); const portContents = document.querySelectorAll('.port-content'); const navBtns = document.querySelectorAll('.nav-btn'); function switchPort(port) { portSelectors.forEach(btn => { const badge = btn.querySelector('.role-badge'); badge.classList.add('hidden'); btn.classList.remove('bg-indigo-600','bg-blue-600','bg-green-600','text-white'); if(btn.dataset.port === port) { badge.classList.remove('hidden'); btn.classList.add(port === 'student' ? 'bg-indigo-600 text-white' : port === 'teacher' ? 'bg-blue-600 text-white' : 'bg-green-600 text-white'); } }); portContents.forEach(c => c.classList.add('hidden')); document.getElementById(`${port}-port`).classList.remove('hidden'); } portSelectors.forEach(btn => btn.addEventListener('click', () => switchPort(btn.dataset.port))); switchPort('student'); navBtns.forEach(btn => btn.addEventListener('click', () => { navBtns.forEach(b => b.classList.replace('text-indigo-600','text-gray-500')); btn.classList.replace('text-gray-500','text-indigo-600'); alert(`切换到 ${btn.dataset.tab} 页面`); })); const feedbackBtn = document.getElementById('feedback-btn'); const feedbackModal = document.getElementById('feedback-modal'); const feedbackContent = feedbackModal.querySelector('.feedback-content'); const feedbackForm = document.getElementById('feedback-form'); const ratingStars = document.querySelectorAll('.rating-star'); const feedbackRating = document.getElementById('feedback-rating'); const successBox = document.getElementById('feedback-success'); feedbackBtn.onclick = () => { feedbackModal.classList.remove('hidden'); setTimeout(() => { feedbackContent.classList.remove('scale-95','opacity-0'); feedbackContent.classList.add('scale-100','opacity-100'); },10); }; feedbackModal.onclick = e => { if(e.target === feedbackModal) feedbackModal.classList.add('hidden'); }; ratingStars.forEach(star => { star.onclick = () => { const rating = +star.dataset.rating; feedbackRating.value = rating; ratingStars.forEach((s,i) => { s.textContent = i < rating ? '★':'☆'; s.classList.toggle('text-yellow-400', i < rating); }); }; }); feedbackForm.onsubmit = e => { e.preventDefault(); const submitBtn = document.getElementById('submit-feedback'); submitBtn.textContent = '提交中...'; setTimeout(() => { submitBtn.textContent = '提交'; feedbackModal.classList.add('hidden'); successBox.classList.remove('hidden'); setTimeout(()=> successBox.classList.add('hidden'),2000); feedbackForm.reset(); feedbackRating.value = 0; ratingStars.forEach(s => { s.textContent = '☆'; s.classList.remove('text-yellow-400'); }); },1000); }; }); </script> </body> </html>有那些需要优化的，按照你的建议开始优化 |