Spaces:
Running
Running
| <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> | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| @keyframes slideUp { | |
| from { transform: translateY(20px); } | |
| to { transform: translateY(0); } | |
| } | |
| .no-scrollbar::-webkit-scrollbar { display: none; } | |
| .feedback-modal { transition: opacity 0.3s ease; } | |
| .feedback-content { transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } | |
| .subject-card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .nav-btn.active { | |
| position: relative; | |
| } | |
| .nav-btn.active::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -4px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background-color: #4f46e5; | |
| } | |
| .progress-ring { | |
| transform: rotate(-90deg); | |
| } | |
| .progress-ring-circle { | |
| stroke-dasharray: 100; | |
| stroke-dashoffset: 100; | |
| transition: stroke-dashoffset 0.5s 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 animate-bounce"></i> | |
| <h1 class="text-lg font-bold text-gray-800">EduPlay</h1> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <button aria-label="通知" class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center relative"> | |
| <i class="fas fa-bell text-gray-600"></i> | |
| <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-4 h-4 flex items-center justify-center">3</span> | |
| </button> | |
| <button id="user-menu-btn" aria-label="用户菜单" class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center"> | |
| <i class="fas fa-user text-indigo-600"></i> | |
| </button> | |
| </div> | |
| </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 transition-colors duration-200" | |
| 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 transition-colors duration-200" | |
| 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 transition-colors duration-200" | |
| 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-6 animate-fadeIn"> | |
| <h1 class="text-2xl font-bold text-indigo-800">学生学习中心</h1> | |
| <p class="text-gray-600">快乐学习，健康成长</p> | |
| </div> | |
| <!-- 学习进度 --> | |
| <div class="bg-white rounded-xl shadow p-4 mb-4 animate-slideUp"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h2 class="font-bold text-lg flex items-center"> | |
| <i class="fas fa-chart-line text-indigo-500 mr-2"></i> 学习进度 | |
| </h2> | |
| <span class="text-xs text-indigo-600">本周</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="relative w-16 h-16 mr-4"> | |
| <svg class="progress-ring w-16 h-16" viewBox="0 0 36 36"> | |
| <circle class="progress-ring-circle" stroke="#e0e7ff" stroke-width="3" fill="none" r="16" cx="18" cy="18"></circle> | |
| <circle class="progress-ring-circle" stroke="#4f46e5" stroke-width="3" stroke-linecap="round" fill="none" r="16" cx="18" cy="18"></circle> | |
| </svg> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <span class="text-sm font-bold">68%</span> | |
| </div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span>语文</span> | |
| <span>75%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5 mb-2"> | |
| <div class="bg-indigo-600 h-1.5 rounded-full" style="width: 75%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span>数学</span> | |
| <span>62%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5"> | |
| <div class="bg-blue-600 h-1.5 rounded-full" style="width: 62%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 学科卡片 --> | |
| <div class="grid grid-cols-2 gap-3 mb-4"> | |
| <div class="subject-card bg-white rounded-xl shadow p-4 flex flex-col items-center active:scale-95 transition-all duration-200 cursor-pointer" 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 mt-1">12个新内容</p> | |
| <div class="w-full mt-2 bg-gray-200 rounded-full h-1"> | |
| <div class="bg-indigo-600 h-1 rounded-full" style="width: 75%"></div> | |
| </div> | |
| </div> | |
| <div class="subject-card bg-white rounded-xl shadow p-4 flex flex-col items-center active:scale-95 transition-all duration-200 cursor-pointer" 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 mt-1">8个新练习</p> | |
| <div class="w-full mt-2 bg-gray-200 rounded-full h-1"> | |
| <div class="bg-blue-600 h-1 rounded-full" style="width: 62%"></div> | |
| </div> | |
| </div> | |
| <div class="subject-card bg-white rounded-xl shadow p-4 flex flex-col items-center active:scale-95 transition-all duration-200 cursor-pointer" data-subject="english"> | |
| <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mb-2"> | |
| <i class="fas fa-language text-green-600 text-xl"></i> | |
| </div> | |
| <h3 class="font-semibold">英语</h3> | |
| <p class="text-xs text-gray-500 mt-1">20个新单词</p> | |
| <div class="w-full mt-2 bg-gray-200 rounded-full h-1"> | |
| <div class="bg-green-600 h-1 rounded-full" style="width: 45%"></div> | |
| </div> | |
| </div> | |
| <div class="subject-card bg-white rounded-xl shadow p-4 flex flex-col items-center active:scale-95 transition-all duration-200 cursor-pointer" data-subject="science"> | |
| <div class="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center mb-2"> | |
| <i class="fas fa-flask text-yellow-600 text-xl"></i> | |
| </div> | |
| <h3 class="font-semibold">科学</h3> | |
| <p class="text-xs text-gray-500 mt-1">3个新实验</p> | |
| <div class="w-full mt-2 bg-gray-200 rounded-full h-1"> | |
| <div class="bg-yellow-600 h-1 rounded-full" style="width: 30%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 今日任务 --> | |
| <div class="bg-white rounded-xl 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-3"> | |
| <li class="flex justify-between items-center p-2 rounded-lg hover:bg-gray-50 transition-colors duration-150"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-book text-indigo-600 text-sm"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">语文阅读练习</p> | |
| <p class="text-xs text-gray-500">《春》阅读理解</p> | |
| </div> | |
| </div> | |
| <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 p-2 rounded-lg hover:bg-gray-50 transition-colors duration-150"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-calculator text-blue-600 text-sm"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">数学作业</p> | |
| <p class="text-xs text-gray-500">二次函数练习题</p> | |
| </div> | |
| </div> | |
| <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 p-2 rounded-lg hover:bg-gray-50 transition-colors duration-150"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-language text-green-600 text-sm"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">英语单词背诵</p> | |
| <p class="text-xs text-gray-500">Unit 3 单词</p> | |
| </div> | |
| </div> | |
| <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 animate-fadeIn">教师管理中心</h1> | |
| <p class="text-gray-600 text-center mb-6">班级管理 · 教学分析 · 作业布置</p> | |
| <!-- 快速操作 --> | |
| <div class="grid grid-cols-2 gap-3 mb-4"> | |
| <div class="bg-white rounded-xl shadow p-4 flex flex-col items-center active:scale-95 transition-all duration-200 cursor-pointer hover:shadow-md"> | |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mb-2"> | |
| <i class="fas fa-users text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-sm font-semibold">班级管理</h3> | |
| <p class="text-xs text-gray-500 mt-1">3个班级</p> | |
| </div> | |
| <div class="bg-white rounded-xl shadow p-4 flex flex-col items-center active:scale-95 transition-all duration-200 cursor-pointer hover:shadow-md"> | |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mb-2"> | |
| <i class="fas fa-tasks text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-sm font-semibold">布置作业</h3> | |
| <p class="text-xs text-gray-500 mt-1">5份待批改</p> | |
| </div> | |
| <div class="bg-white rounded-xl shadow p-4 flex flex-col items-center active:scale-95 transition-all duration-200 cursor-pointer hover:shadow-md"> | |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mb-2"> | |
| <i class="fas fa-chart-bar text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-sm font-semibold">教学分析</h3> | |
| <p class="text-xs text-gray-500 mt-1">查看报告</p> | |
| </div> | |
| <div class="bg-white rounded-xl shadow p-4 flex flex-col items-center active:scale-95 transition-all duration-200 cursor-pointer hover:shadow-md"> | |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mb-2"> | |
| <i class="fas fa-calendar-alt text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="text-sm font-semibold">课程计划</h3> | |
| <p class="text-xs text-gray-500 mt-1">下周课程</p> | |
| </div> | |
| </div> | |
| <!-- 待办事项 --> | |
| <div class="bg-white rounded-xl shadow p-4"> | |
| <h2 class="text-lg font-bold flex items-center mb-3"> | |
| <i class="fas fa-clipboard-list text-blue-500 mr-2"></i> 待办事项 | |
| </h2> | |
| <ul class="space-y-3"> | |
| <li class="flex justify-between items-center p-2 rounded-lg hover:bg-gray-50 transition-colors duration-150"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-check-circle text-blue-600 text-sm"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">批改作业</p> | |
| <p class="text-xs text-gray-500">语文作文</p> | |
| </div> | |
| </div> | |
| <span class="text-xs text-gray-500">今天截止</span> | |
| </li> | |
| <li class="flex justify-between items-center p-2 rounded-lg hover:bg-gray-50 transition-colors duration-150"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-chalkboard-teacher text-blue-600 text-sm"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">备课</p> | |
| <p class="text-xs text-gray-500">数学第3章</p> | |
| </div> | |
| </div> | |
| <span class="text-xs text-gray-500">明天</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </section> | |
| <!-- 家长端 --> | |
| <section id="parent-port" class="port-content hidden"> | |
| <h1 class="text-2xl font-bold text-green-800 text-center animate-fadeIn">家长监护中心</h1> | |
| <p class="text-gray-600 text-center mb-6">关注成长 · 学习陪伴 · 家校沟通</p> | |
| <!-- 孩子信息 --> | |
| <div class="bg-white rounded-xl shadow p-4 mb-4"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-3"> | |
| <i class="fas fa-child text-green-600 text-xl"></i> | |
| </div> | |
| <div> | |
| <h2 class="font-bold">小明</h2> | |
| <p class="text-xs text-gray-500">三年级二班</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-between text-center"> | |
| <div> | |
| <p class="text-sm text-gray-600">今日学习</p> | |
| <p class="font-bold">1.5小时</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-600">本周学习</p> | |
| <p class="font-bold">6小时15分钟</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-600">作业完成</p> | |
| <p class="font-bold">80%</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 学习报告 --> | |
| <div class="bg-white rounded-xl shadow p-4 mb-4"> | |
| <h2 class="font-bold text-lg mb-3 flex items-center"> | |
| <i class="fas fa-chart-pie text-green-500 mr-2"></i> 学习报告 | |
| </h2> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-sm">语文</span> | |
| <span class="text-sm font-medium">75%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2 mb-3"> | |
| <div class="bg-green-600 h-2 rounded-full" style="width: 75%"></div> | |
| </div> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-sm">数学</span> | |
| <span class="text-sm font-medium">62%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2 mb-3"> | |
| <div class="bg-green-600 h-2 rounded-full" style="width: 62%"></div> | |
| </div> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-sm">英语</span> | |
| <span class="text-sm font-medium">45%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-600 h-2 rounded-full" style="width: 45%"></div> | |
| </div> | |
| </div> | |
| <!-- 家校沟通 --> | |
| <div class="bg-white rounded-xl shadow p-4"> | |
| <h2 class="font-bold text-lg mb-3 flex items-center"> | |
| <i class="fas fa-comments text-green-500 mr-2"></i> 家校沟通 | |
| </h2> | |
| <div class="space-y-3"> | |
| <div class="flex items-start p-2 rounded-lg bg-green-50"> | |
| <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-3 flex-shrink-0"> | |
| <i class="fas fa-user-tie text-green-600 text-sm"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">李老师</p> | |
| <p class="text-xs text-gray-700">小明最近在数学课上表现积极，继续保持！</p> | |
| <p class="text-xs text-gray-500 mt-1">今天 10:30</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start p-2 rounded-lg bg-gray-50"> | |
| <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center mr-3 flex-shrink-0"> | |
| <i class="fas fa-user text-gray-600 text-sm"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">您</p> | |
| <p class="text-xs text-gray-700">谢谢老师，我们会继续督促他学习。</p> | |
| <p class="text-xs text-gray-500 mt-1">昨天 18:15</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full mt-3 bg-green-600 text-white py-2 rounded-lg text-sm flex items-center justify-center"> | |
| <i class="fas fa-plus mr-1"></i> 发送消息 | |
| </button> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- 底部导航 --> | |
| <nav class="bottom-nav fixed bottom-0 left-0 right-0 bg-white shadow-lg border-t border-gray-100"> | |
| <div class="flex justify-around py-2"> | |
| <button class="nav-btn text-indigo-600 flex flex-col items-center text-xs active" 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 hover:bg-indigo-700 transition-colors duration-200"> | |
| <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-xl p-6 transform scale-95 opacity-0"> | |
| <h3 class="text-lg font-bold mb-4 text-center">意见反馈</h3> | |
| <form id="feedback-form" class="space-y-4"> | |
| <div> | |
| <label for="feedback-type" class="block text-sm font-medium text-gray-700 mb-1">反馈类型</label> | |
| <select id="feedback-type" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> | |
| <option value="suggestion">建议</option> | |
| <option value="bug">错误报告</option> | |
| <option value="question">问题咨询</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="feedback-content" class="block text-sm font-medium text-gray-700 mb-1">反馈内容</label> | |
| <textarea id="feedback-content" rows="4" class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="请详细描述您的反馈..."></textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">满意度评分</label> | |
| <div class="flex justify-center space-x-1"> | |
| <button type="button" class="rating-star text-2xl hover:text-yellow-400 transition-colors duration-150" data-rating="1">☆</button> | |
| <button type="button" class="rating-star text-2xl hover:text-yellow-400 transition-colors duration-150" data-rating="2">☆</button> | |
| <button type="button" class="rating-star text-2xl hover:text-yellow-400 transition-colors duration-150" data-rating="3">☆</button> | |
| <button type="button" class="rating-star text-2xl hover:text-yellow-400 transition-colors duration-150" data-rating="4">☆</button> | |
| <button type="button" class="rating-star text-2xl hover:text-yellow-400 transition-colors duration-150" data-rating="5">☆</button> | |
| </div> | |
| </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-lg hover:bg-indigo-700 transition-colors duration-200 flex items-center justify-center"> | |
| <i class="fas fa-paper-plane mr-2"></i> 提交反馈 | |
| </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-xl shadow-xl hidden z-50 text-center animate-fadeIn"> | |
| <div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-check-circle text-green-500 text-3xl"></i> | |
| </div> | |
| <p class="font-bold text-lg mb-1">反馈成功！</p> | |
| <p class="text-sm text-gray-600">感谢您的宝贵意见</p> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // 初始化圆形进度条 | |
| const progressCircle = document.querySelector('.progress-ring-circle'); | |
| if (progressCircle) { | |
| const radius = progressCircle.r.baseVal.value; | |
| const circumference = 2 * Math.PI * radius; | |
| progressCircle.style.strokeDasharray = circumference; | |
| progressCircle.style.strokeDashoffset = circumference - (68 / 100) * circumference; | |
| } | |
| // 端口切换功能 | |
| const portSelectors = document.querySelectorAll('.port-selector'); | |
| const portContents = document.querySelectorAll('.port-content'); | |
| 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')); | |
| const activePort = document.getElementById(`${port}-port`); | |
| activePort.classList.remove('hidden'); | |
| activePort.classList.add('animate-fadeIn'); | |
| } | |
| portSelectors.forEach(btn => btn.addEventListener('click', () => switchPort(btn.dataset.port))); | |
| switchPort('student'); | |
| // 底部导航切换 | |
| const navBtns = document.querySelectorAll('.nav-btn'); | |
| navBtns.forEach(btn => btn.addEventListener('click', () => { | |
| navBtns.forEach(b => { | |
| b.classList.replace('text-indigo-600','text-gray-500'); | |
| b.classList.remove('active'); | |
| }); | |
| btn.classList.replace('text-gray-500','text-indigo-600'); | |
| btn.classList.add('active'); | |
| })); | |
| // 学科卡片点击效果 | |
| const subjectCards = document.querySelectorAll('.subject-card'); | |
| subjectCards.forEach(card => { | |
| card.addEventListener('click', function() { | |
| const subject = this.dataset.subject; | |
| alert(`打开${subject}学科页面`); | |
| }); | |
| }); | |
| // 反馈功能 | |
| 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) { | |
| feedbackContent.classList.remove('scale-100','opacity-100'); | |
| feedbackContent.classList.add('scale-95','opacity-0'); | |
| setTimeout(() => feedbackModal.classList.add('hidden'), 300); | |
| } | |
| }; | |
| 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.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> 提交中...'; | |
| setTimeout(() => { | |
| submitBtn.innerHTML = '<i class="fas fa-paper-plane mr-2"></i> 提交反馈'; | |
| feedbackContent.classList.remove('scale-100','opacity-100'); | |
| feedbackContent.classList.add('scale-95','opacity-0'); | |
| setTimeout(() => { | |
| 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'); | |
| }); | |
| }, 300); | |
| }, 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=chen829/educational-software" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |