feat: 添加移动端原型系统（微信小程序风格）
- 7 个 HTML 页面（106KB） - 移动端模式：375×812 手机框架 - 基于需求文档中的 UI/UX 设计规格生成 页面列表： - mobile-index.html: 移动端统一入口 - home.html: 首页抽背启动（4个抽背考点按钮） - ai-quiz.html: AI抽背界面（语音交互） - quiz-report.html: 抽背报告（正确率、错误分析） - memory-curve.html: 记忆曲线可视化（复习计划日历） - card-recite.html: 卡片背诵（挖空填空） - profile.html: 个人中心 技术栈：Tailwind CSS + Font Awesome 设计规范：蓝色/绿色渐变导航，375×812 手机框架 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
yourname
140
prototype-mobile/mobile-index.html
Normal file
140
prototype-mobile/mobile-index.html
Normal file
@@ -0,0 +1,140 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>移动端原型 - AI智能抽背助手</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>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
}
|
||||
.prototype-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
|
||||
gap: 30px;
|
||||
padding: 30px;
|
||||
max-width: 1800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.prototype-card {
|
||||
background: white;
|
||||
border-radius: 20px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.prototype-card h3 {
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
left: 20px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 8px 20px;
|
||||
border-radius: 20px;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
.prototype-iframe {
|
||||
width: 100%;
|
||||
height: 880px;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.header {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
color: white;
|
||||
}
|
||||
.header h1 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.header p {
|
||||
font-size: 1.1rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.info-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
padding: 8px 16px;
|
||||
border-radius: 20px;
|
||||
margin: 0 5px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 头部标题 -->
|
||||
<div class="header">
|
||||
<h1><i class="fas fa-mobile-alt mr-3"></i>AI智能抽背助手 - 移动端原型</h1>
|
||||
<p>微信小程序风格 | 375×812 手机框架 | 6个核心页面</p>
|
||||
<div class="mt-4 flex justify-center flex-wrap">
|
||||
<span class="info-badge">
|
||||
<i class="fas fa-layer-group"></i>
|
||||
平铺展示模式
|
||||
</span>
|
||||
<span class="info-badge">
|
||||
<i class="fas fa-palette"></i>
|
||||
蓝紫渐变主题
|
||||
</span>
|
||||
<span class="info-badge">
|
||||
<i class="fas fa-microphone-alt"></i>
|
||||
AI语音交互
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 平铺网格容器 -->
|
||||
<div class="prototype-grid">
|
||||
<!-- 页面1：首页抽背 -->
|
||||
<div class="prototype-card relative">
|
||||
<h3><i class="fas fa-home mr-2"></i>首页抽背</h3>
|
||||
<iframe src="pages/mobile/home.html" class="prototype-iframe" title="首页抽背"></iframe>
|
||||
</div>
|
||||
|
||||
<!-- 页面2：AI智能抽背 -->
|
||||
<div class="prototype-card relative">
|
||||
<h3><i class="fas fa-microphone-alt mr-2"></i>AI智能抽背</h3>
|
||||
<iframe src="pages/mobile/ai-quiz.html" class="prototype-iframe" title="AI智能抽背"></iframe>
|
||||
</div>
|
||||
|
||||
<!-- 页面3：抽背报告 -->
|
||||
<div class="prototype-card relative">
|
||||
<h3><i class="fas fa-chart-bar mr-2"></i>抽背报告</h3>
|
||||
<iframe src="pages/mobile/quiz-report.html" class="prototype-iframe" title="抽背报告"></iframe>
|
||||
</div>
|
||||
|
||||
<!-- 页面4：记忆曲线 -->
|
||||
<div class="prototype-card relative">
|
||||
<h3><i class="fas fa-brain mr-2"></i>记忆曲线</h3>
|
||||
<iframe src="pages/mobile/memory-curve.html" class="prototype-iframe" title="记忆曲线"></iframe>
|
||||
</div>
|
||||
|
||||
<!-- 页面5：卡片背诵 -->
|
||||
<div class="prototype-card relative">
|
||||
<h3><i class="fas fa-clone mr-2"></i>卡片背诵</h3>
|
||||
<iframe src="pages/mobile/card-recite.html" class="prototype-iframe" title="卡片背诵"></iframe>
|
||||
</div>
|
||||
|
||||
<!-- 页面6：个人中心 -->
|
||||
<div class="prototype-card relative">
|
||||
<h3><i class="fas fa-user mr-2"></i>个人中心</h3>
|
||||
<iframe src="pages/mobile/profile.html" class="prototype-iframe" title="个人中心"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 页脚信息 -->
|
||||
<div class="text-center py-8 text-white/80">
|
||||
<p><i class="fas fa-info-circle mr-2"></i>移动端原型系统 | 基于需求文档生成</p>
|
||||
<p class="text-sm mt-2 opacity-70">生成时间: 2026-03-28 | 设计风格: 微信小程序</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
267
prototype-mobile/pages/mobile/ai-quiz.html
Normal file
267
prototype-mobile/pages/mobile/ai-quiz.html
Normal file
@@ -0,0 +1,267 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>AI智能抽背 - AI智能抽背助手</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>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.phone-frame {
|
||||
width: 375px;
|
||||
height: 812px;
|
||||
margin: 20px auto;
|
||||
border-radius: 40px;
|
||||
border: 12px solid #1a1a1a;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
position: relative;
|
||||
}
|
||||
.status-bar {
|
||||
height: 44px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
}
|
||||
.mic-button {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 8px 30px rgba(102, 126, 234, 0.4);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
.mic-button:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 12px 40px rgba(102, 126, 234, 0.5);
|
||||
}
|
||||
.mic-button.listening {
|
||||
animation: pulse-ring 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
|
||||
}
|
||||
@keyframes pulse-ring {
|
||||
0% {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
|
||||
}
|
||||
70% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 0 0 30px rgba(102, 126, 234, 0);
|
||||
}
|
||||
100% {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
|
||||
}
|
||||
}
|
||||
.wave-animation {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
height: 30px;
|
||||
}
|
||||
.wave-bar {
|
||||
width: 4px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 2px;
|
||||
animation: wave 1s ease-in-out infinite;
|
||||
}
|
||||
.wave-bar:nth-child(1) { animation-delay: 0s; height: 10px; }
|
||||
.wave-bar:nth-child(2) { animation-delay: 0.1s; height: 20px; }
|
||||
.wave-bar:nth-child(3) { animation-delay: 0.2s; height: 15px; }
|
||||
.wave-bar:nth-child(4) { animation-delay: 0.3s; height: 25px; }
|
||||
.wave-bar:nth-child(5) { animation-delay: 0.4s; height: 12px; }
|
||||
@keyframes wave {
|
||||
0%, 100% { transform: scaleY(1); }
|
||||
50% { transform: scaleY(1.5); }
|
||||
}
|
||||
.ai-bubble {
|
||||
background: linear-gradient(135deg, #f0f4ff 0%, #faf5ff 100%);
|
||||
border-radius: 20px 20px 20px 4px;
|
||||
}
|
||||
.user-bubble {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 20px 20px 4px 20px;
|
||||
}
|
||||
.nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
.nav-item.active {
|
||||
color: #667eea;
|
||||
}
|
||||
.feedback-correct {
|
||||
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||
}
|
||||
.feedback-wrong {
|
||||
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-frame">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span>09:41</span>
|
||||
<div class="flex gap-1">
|
||||
<i class="fas fa-signal"></i>
|
||||
<i class="fas fa-wifi"></i>
|
||||
<i class="fas fa-battery-full"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="bg-white px-4 py-3 flex items-center justify-between border-b border-gray-100">
|
||||
<a href="home.html" class="text-gray-600">
|
||||
<i class="fas fa-arrow-left text-xl"></i>
|
||||
</a>
|
||||
<h1 class="text-lg font-bold text-gray-800">AI智能抽背</h1>
|
||||
<button class="text-gray-600">
|
||||
<i class="fas fa-cog text-xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="h-[calc(100%-44px-56px-70px)] overflow-y-auto bg-gray-50">
|
||||
<!-- 进度提示 -->
|
||||
<div class="bg-gradient-to-r from-indigo-500 to-purple-500 px-5 py-3 text-white">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-sm">当前进度</span>
|
||||
<span class="font-bold">3 / 10 题</span>
|
||||
</div>
|
||||
<div class="mt-2 bg-white/30 rounded-full h-2">
|
||||
<div class="bg-white rounded-full h-2 w-[30%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AI对话区 -->
|
||||
<div class="px-5 py-4 space-y-4">
|
||||
<!-- AI问候 -->
|
||||
<div class="flex gap-3">
|
||||
<div class="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-robot text-white"></i>
|
||||
</div>
|
||||
<div class="ai-bubble px-4 py-3 max-w-[260px]">
|
||||
<p class="text-gray-800 text-sm">你好！我是你的AI助教，准备好了吗？我们开始今天的学习吧！</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AI问题 -->
|
||||
<div class="flex gap-3">
|
||||
<div class="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-robot text-white"></i>
|
||||
</div>
|
||||
<div class="ai-bubble px-4 py-3 max-w-[260px]">
|
||||
<p class="text-gray-800 text-sm font-medium mb-2">第3题：请背诵麻黄汤的组成</p>
|
||||
<div class="flex items-center gap-2 text-xs text-gray-500">
|
||||
<i class="fas fa-book-open"></i>
|
||||
<span>方剂学 - 解表剂</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户回答区 -->
|
||||
<div class="flex gap-3 justify-end">
|
||||
<div class="user-bubble px-4 py-3 max-w-[260px]">
|
||||
<p class="text-white text-sm" id="userAnswer">点击麦克风开始回答...</p>
|
||||
</div>
|
||||
<div class="w-10 h-10 bg-gray-300 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-user text-white"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 语音波形（显示状态） -->
|
||||
<div class="flex justify-center" id="waveContainer">
|
||||
<div class="wave-animation">
|
||||
<div class="wave-bar"></div>
|
||||
<div class="wave-bar"></div>
|
||||
<div class="wave-bar"></div>
|
||||
<div class="wave-bar"></div>
|
||||
<div class="wave-bar"></div>
|
||||
</div>
|
||||
<span class="text-gray-500 text-sm ml-2">正在倾听...</span>
|
||||
</div>
|
||||
|
||||
<!-- AI反馈 -->
|
||||
<div class="flex gap-3" id="feedbackArea">
|
||||
<div class="w-10 h-10 bg-gradient-to-br from-indigo-500 to-purple-500 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<i class="fas fa-robot text-white"></i>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl p-4 shadow-sm max-w-[280px]">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="feedback-correct text-white px-2 py-1 rounded-full text-xs">
|
||||
<i class="fas fa-check mr-1"></i>正确
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-gray-700 text-sm mb-3">
|
||||
麻黄汤由麻黄、桂枝、杏仁、甘草四味药组成，发汗解表，宣肺平喘。
|
||||
</p>
|
||||
<div class="bg-indigo-50 rounded-lg p-3">
|
||||
<p class="text-xs text-gray-600 mb-1">
|
||||
<i class="fas fa-lightbulb text-yellow-500 mr-1"></i>知识点解析
|
||||
</p>
|
||||
<p class="text-xs text-gray-700">
|
||||
麻黄汤为发汗解表之峻剂，主治外感风寒表实证。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作区 -->
|
||||
<div class="absolute bottom-0 left-0 right-0 h-[calc(70px+100px)] bg-white border-t border-gray-100">
|
||||
<!-- 麦克风按钮 -->
|
||||
<div class="flex justify-center items-end py-4">
|
||||
<div class="mic-button listening">
|
||||
<i class="fas fa-microphone text-white text-4xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="flex justify-center gap-4 px-6 pb-4">
|
||||
<button class="flex-1 bg-gray-100 text-gray-700 py-3 rounded-xl font-medium">
|
||||
<i class="fas fa-redo mr-2"></i>重录
|
||||
</button>
|
||||
<button class="flex-1 bg-gradient-to-r from-indigo-500 to-purple-500 text-white py-3 rounded-xl font-medium">
|
||||
下一题<i class="fas fa-arrow-right ml-2"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 底部导航栏 -->
|
||||
<div class="flex items-center justify-around px-4 pb-2">
|
||||
<a href="home.html" class="nav-item">
|
||||
<i class="fas fa-home text-xl"></i>
|
||||
<span>首页</span>
|
||||
</a>
|
||||
<a href="ai-quiz.html" class="nav-item active">
|
||||
<div class="w-12 h-12 -mt-6 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg">
|
||||
<i class="fas fa-microphone-alt text-white text-xl"></i>
|
||||
</div>
|
||||
<span class="text-indigo-500 font-medium">智能抽背</span>
|
||||
</a>
|
||||
<a href="profile.html" class="nav-item">
|
||||
<i class="fas fa-user text-xl"></i>
|
||||
<span>我的</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
248
prototype-mobile/pages/mobile/card-recite.html
Normal file
248
prototype-mobile/pages/mobile/card-recite.html
Normal file
@@ -0,0 +1,248 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>卡片背诵 - AI智能抽背助手</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>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.phone-frame {
|
||||
width: 375px;
|
||||
height: 812px;
|
||||
margin: 20px auto;
|
||||
border-radius: 40px;
|
||||
border: 12px solid #1a1a1a;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
position: relative;
|
||||
}
|
||||
.status-bar {
|
||||
height: 44px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
}
|
||||
.flashcard {
|
||||
background: white;
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.6s ease;
|
||||
transform-style: preserve-3d;
|
||||
cursor: pointer;
|
||||
}
|
||||
.flashcard:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.flashcard-front {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
.flashcard-back {
|
||||
background: white;
|
||||
border: 2px solid #e5e7eb;
|
||||
}
|
||||
.progress-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #e5e7eb;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.progress-dot.active {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
width: 24px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.progress-dot.completed {
|
||||
background: #10b981;
|
||||
}
|
||||
.nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
.nav-item.active {
|
||||
color: #667eea;
|
||||
}
|
||||
.swipe-hint {
|
||||
animation: swipe 2s ease-in-out infinite;
|
||||
}
|
||||
@keyframes swipe {
|
||||
0%, 100% { transform: translateX(0); opacity: 0.5; }
|
||||
50% { transform: translateX(10px); opacity: 1; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-frame">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span>09:41</span>
|
||||
<div class="flex gap-1">
|
||||
<i class="fas fa-signal"></i>
|
||||
<i class="fas fa-wifi"></i>
|
||||
<i class="fas fa-battery-full"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="bg-white px-4 py-3 flex items-center justify-between border-b border-gray-100">
|
||||
<a href="home.html" class="text-gray-600">
|
||||
<i class="fas fa-times text-xl"></i>
|
||||
</a>
|
||||
<h1 class="text-lg font-bold text-gray-800">卡片背诵</h1>
|
||||
<button class="text-gray-600">
|
||||
<i class="fas fa-cog text-xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="h-[calc(100%-44px-56px-70px)] overflow-hidden bg-gray-50 flex flex-col">
|
||||
<!-- 进度指示 -->
|
||||
<div class="px-5 pt-4 pb-2">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<span class="text-sm text-gray-500">方剂学 - 解表剂</span>
|
||||
<span class="text-sm font-medium text-indigo-500">4 / 12</span>
|
||||
</div>
|
||||
<div class="flex gap-2 justify-center">
|
||||
<div class="progress-dot completed"></div>
|
||||
<div class="progress-dot completed"></div>
|
||||
<div class="progress-dot completed"></div>
|
||||
<div class="progress-dot active"></div>
|
||||
<div class="progress-dot"></div>
|
||||
<div class="progress-dot"></div>
|
||||
<div class="progress-dot"></div>
|
||||
<div class="progress-dot"></div>
|
||||
<div class="progress-dot"></div>
|
||||
<div class="progress-dot"></div>
|
||||
<div class="progress-dot"></div>
|
||||
<div class="progress-dot"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片区域 -->
|
||||
<div class="flex-1 flex items-center justify-center px-5 py-4">
|
||||
<div class="flashcard flashcard-front w-full h-[340px] p-6 flex flex-col items-center justify-center text-white">
|
||||
<div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mb-6">
|
||||
<i class="fas fa-book-medical text-3xl"></i>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold text-center mb-4">麻黄汤</h2>
|
||||
<p class="text-sm opacity-80 text-center mb-6">点击卡片查看详情</p>
|
||||
<div class="flex items-center gap-2 text-sm swipe-hint">
|
||||
<i class="fas fa-hand-point-left"></i>
|
||||
<span>左右滑动切换</span>
|
||||
<i class="fas fa-hand-point-right"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片背面（翻转后显示） -->
|
||||
<div class="px-5 pb-4 hidden" id="cardBack">
|
||||
<div class="flashcard flashcard-back w-full h-[340px] p-6">
|
||||
<h3 class="text-lg font-bold text-gray-800 mb-4 text-center">麻黄汤</h3>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<p class="text-xs text-gray-500 mb-1">组成</p>
|
||||
<p class="text-sm text-gray-800">麻黄、桂枝、杏仁、甘草</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-gray-500 mb-1">功效</p>
|
||||
<p class="text-sm text-gray-800">发汗解表，宣肺平喘</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-gray-500 mb-1">主治</p>
|
||||
<p class="text-sm text-gray-800">外感风寒表实证</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs text-gray-500 mb-1">方歌</p>
|
||||
<p class="text-sm text-indigo-600">麻黄汤中臣桂枝，杏仁甘草四般施</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="px-5 pb-4">
|
||||
<div class="flex gap-3 mb-4">
|
||||
<button class="flex-1 bg-white border-2 border-gray-300 text-gray-700 py-4 rounded-xl font-medium">
|
||||
<i class="fas fa-times mr-2 text-red-500"></i>未记住
|
||||
</button>
|
||||
<button class="flex-1 bg-gradient-to-r from-indigo-500 to-purple-500 text-white py-4 rounded-xl font-medium">
|
||||
<i class="fas fa-check mr-2"></i>已记住
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 导航按钮 -->
|
||||
<div class="flex justify-between items-center">
|
||||
<button class="w-12 h-12 bg-white rounded-full shadow flex items-center justify-center text-gray-600">
|
||||
<i class="fas fa-chevron-left"></i>
|
||||
</button>
|
||||
<div class="flex gap-2">
|
||||
<button class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-500">
|
||||
<i class="fas fa-bookmark"></i>
|
||||
</button>
|
||||
<button class="w-10 h-10 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-500">
|
||||
<i class="fas fa-share-alt"></i>
|
||||
</button>
|
||||
</div>
|
||||
<button class="w-12 h-12 bg-white rounded-full shadow flex items-center justify-center text-gray-600">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部导航栏 -->
|
||||
<div class="absolute bottom-0 left-0 right-0 h-[70px] bg-white border-t border-gray-100 flex items-center justify-around px-4 pb-2">
|
||||
<a href="home.html" class="nav-item">
|
||||
<i class="fas fa-home text-xl"></i>
|
||||
<span>首页</span>
|
||||
</a>
|
||||
<a href="ai-quiz.html" class="nav-item active">
|
||||
<div class="w-12 h-12 -mt-6 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg">
|
||||
<i class="fas fa-microphone-alt text-white text-xl"></i>
|
||||
</div>
|
||||
<span class="text-indigo-500 font-medium">智能抽背</span>
|
||||
</a>
|
||||
<a href="profile.html" class="nav-item">
|
||||
<i class="fas fa-user text-xl"></i>
|
||||
<span>我的</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 卡片翻转效果
|
||||
const card = document.querySelector('.flashcard');
|
||||
const cardBack = document.getElementById('cardBack');
|
||||
const cardFront = document.querySelector('.flashcard-front');
|
||||
|
||||
card.addEventListener('click', function() {
|
||||
if (cardBack.classList.contains('hidden')) {
|
||||
// 显示背面
|
||||
cardFront.classList.add('hidden');
|
||||
cardFront.classList.remove('flashcard-front');
|
||||
cardBack.classList.remove('hidden');
|
||||
} else {
|
||||
// 显示正面
|
||||
cardFront.classList.remove('hidden');
|
||||
cardFront.classList.add('flashcard-front');
|
||||
cardBack.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
288
prototype-mobile/pages/mobile/home.html
Normal file
288
prototype-mobile/pages/mobile/home.html
Normal file
@@ -0,0 +1,288 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>首页抽背 - AI智能抽背助手</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>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.phone-frame {
|
||||
width: 375px;
|
||||
height: 812px;
|
||||
margin: 20px auto;
|
||||
border-radius: 40px;
|
||||
border: 12px solid #1a1a1a;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
position: relative;
|
||||
}
|
||||
.status-bar {
|
||||
height: 44px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
}
|
||||
.avatar-ring {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 3px;
|
||||
margin: 0 auto 10px;
|
||||
}
|
||||
.avatar-inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.quiz-btn {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.quiz-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
.stat-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.progress-ring {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
.nav-item.active {
|
||||
color: #667eea;
|
||||
}
|
||||
.reminder-badge {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-frame">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span>09:41</span>
|
||||
<div class="flex gap-1">
|
||||
<i class="fas fa-signal"></i>
|
||||
<i class="fas fa-wifi"></i>
|
||||
<i class="fas fa-battery-full"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="h-[calc(100%-44px-70px)] overflow-y-auto bg-gray-50">
|
||||
<!-- 顶部用户信息区 -->
|
||||
<div class="bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-400 px-5 pt-6 pb-16 text-white">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<p class="text-sm opacity-90">欢迎回来</p>
|
||||
<h1 class="text-xl font-bold">小明同学</h1>
|
||||
</div>
|
||||
<div class="avatar-ring">
|
||||
<div class="avatar-inner">
|
||||
<i class="fas fa-user text-2xl text-indigo-500"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 学习概览 -->
|
||||
<div class="bg-white/20 backdrop-blur-sm rounded-2xl p-4 mt-4">
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<span class="text-sm font-medium">学习概览</span>
|
||||
<span class="text-xs opacity-80">2026-03-28</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-3 gap-3 text-center">
|
||||
<div>
|
||||
<p class="text-2xl font-bold">128</p>
|
||||
<p class="text-xs opacity-80">已记忆</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-2xl font-bold">45</p>
|
||||
<p class="text-xs opacity-80">未记忆</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-2xl font-bold text-yellow-300">12</p>
|
||||
<p class="text-xs opacity-80">待复习</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 快速抽背区 -->
|
||||
<div class="px-5 -mt-8">
|
||||
<div class="bg-white rounded-2xl shadow-lg p-5 mb-5">
|
||||
<h2 class="text-lg font-bold text-gray-800 mb-4">
|
||||
<i class="fas fa-bolt text-yellow-500 mr-2"></i>快速抽背
|
||||
</h2>
|
||||
<div class="grid grid-cols-2 gap-3">
|
||||
<a href="ai-quiz.html" class="quiz-btn text-white rounded-xl p-4 text-center">
|
||||
<i class="fas fa-microphone-alt text-2xl mb-2"></i>
|
||||
<p class="text-sm font-medium">AI语音抽背</p>
|
||||
</a>
|
||||
<a href="card-recite.html" class="bg-gradient-to-r from-emerald-500 to-teal-500 text-white rounded-xl p-4 text-center">
|
||||
<i class="fas fa-clone text-2xl mb-2"></i>
|
||||
<p class="text-sm font-medium">卡片背诵</p>
|
||||
</a>
|
||||
<a href="#" class="bg-gradient-to-r from-orange-500 to-amber-500 text-white rounded-xl p-4 text-center">
|
||||
<i class="fas fa-headphones text-2xl mb-2"></i>
|
||||
<p class="text-sm font-medium">音频带背</p>
|
||||
</a>
|
||||
<a href="#" class="bg-gradient-to-r from-rose-500 to-pink-500 text-white rounded-xl p-4 text-center">
|
||||
<i class="fas fa-edit text-2xl mb-2"></i>
|
||||
<p class="text-sm font-medium">挖空填空</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 记忆曲线提醒 -->
|
||||
<div class="bg-white rounded-2xl shadow-sm p-5 mb-5">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h2 class="text-lg font-bold text-gray-800">
|
||||
<i class="fas fa-brain text-purple-500 mr-2"></i>记忆曲线提醒
|
||||
</h2>
|
||||
<a href="memory-curve.html" class="text-indigo-500 text-sm">查看全部</a>
|
||||
</div>
|
||||
<div class="bg-gradient-to-r from-purple-50 to-pink-50 rounded-xl p-4 reminder-badge">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center">
|
||||
<i class="fas fa-bell text-white text-xl"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-medium text-gray-800">临界点复习</p>
|
||||
<p class="text-sm text-gray-600">麻黄汤功效、桂枝汤组成</p>
|
||||
</div>
|
||||
<a href="ai-quiz.html" class="bg-indigo-500 text-white px-4 py-2 rounded-lg text-sm">
|
||||
去背诵
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 高频考点 -->
|
||||
<div class="bg-white rounded-2xl shadow-sm p-5 mb-5">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h2 class="text-lg font-bold text-gray-800">
|
||||
<i class="fas fa-star text-yellow-500 mr-2"></i>高频考点
|
||||
</h2>
|
||||
<a href="#" class="text-indigo-500 text-sm">更多</a>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center gap-3 p-3 bg-gray-50 rounded-xl">
|
||||
<div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
|
||||
<span class="text-red-500 font-bold">1</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-medium text-gray-800">方剂学-解表剂</p>
|
||||
<p class="text-xs text-gray-500">错误率 68%</p>
|
||||
</div>
|
||||
<a href="#" class="text-indigo-500"><i class="fas fa-chevron-right"></i></a>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-3 bg-gray-50 rounded-xl">
|
||||
<div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
|
||||
<span class="text-orange-500 font-bold">2</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-medium text-gray-800">中医基础-阴阳学说</p>
|
||||
<p class="text-xs text-gray-500">错误率 52%</p>
|
||||
</div>
|
||||
<a href="#" class="text-indigo-500"><i class="fas fa-chevron-right"></i></a>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-3 bg-gray-50 rounded-xl">
|
||||
<div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center">
|
||||
<span class="text-yellow-600 font-bold">3</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-medium text-gray-800">中药学-解表药</p>
|
||||
<p class="text-xs text-gray-500">错误率 45%</p>
|
||||
</div>
|
||||
<a href="#" class="text-indigo-500"><i class="fas fa-chevron-right"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 今日任务 -->
|
||||
<div class="bg-white rounded-2xl shadow-sm p-5 mb-5">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h2 class="text-lg font-bold text-gray-800">
|
||||
<i class="fas fa-tasks text-blue-500 mr-2"></i>今日任务
|
||||
</h2>
|
||||
<span class="text-sm text-gray-500">2/5 完成</span>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center">
|
||||
<i class="fas fa-check text-white text-xs"></i>
|
||||
</div>
|
||||
<span class="flex-1 text-gray-600 line-through">完成30道题目</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-6 h-6 bg-green-500 rounded-full flex items-center justify-center">
|
||||
<i class="fas fa-check text-white text-xs"></i>
|
||||
</div>
|
||||
<span class="flex-1 text-gray-600 line-through">复习错题本</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-6 h-6 border-2 border-gray-300 rounded-full"></div>
|
||||
<span class="flex-1 text-gray-800">AI抽背20题</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-6 h-6 border-2 border-gray-300 rounded-full"></div>
|
||||
<span class="flex-1 text-gray-800">背诵10个知识点</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-6 h-6 border-2 border-gray-300 rounded-full"></div>
|
||||
<span class="flex-1 text-gray-800">查看学习报告</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部导航栏 -->
|
||||
<div class="absolute bottom-0 left-0 right-0 h-[70px] bg-white border-t border-gray-100 flex items-center justify-around px-4 pb-2">
|
||||
<a href="home.html" class="nav-item active">
|
||||
<i class="fas fa-home text-xl"></i>
|
||||
<span>首页</span>
|
||||
</a>
|
||||
<a href="ai-quiz.html" class="nav-item">
|
||||
<div class="w-12 h-12 -mt-6 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg">
|
||||
<i class="fas fa-microphone-alt text-white text-xl"></i>
|
||||
</div>
|
||||
<span class="text-indigo-500 font-medium">智能抽背</span>
|
||||
</a>
|
||||
<a href="profile.html" class="nav-item">
|
||||
<i class="fas fa-user text-xl"></i>
|
||||
<span>我的</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
333
prototype-mobile/pages/mobile/memory-curve.html
Normal file
333
prototype-mobile/pages/mobile/memory-curve.html
Normal file
@@ -0,0 +1,333 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>记忆曲线 - AI智能抽背助手</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>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.phone-frame {
|
||||
width: 375px;
|
||||
height: 812px;
|
||||
margin: 20px auto;
|
||||
border-radius: 40px;
|
||||
border: 12px solid #1a1a1a;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
position: relative;
|
||||
}
|
||||
.status-bar {
|
||||
height: 44px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
}
|
||||
.curve-container {
|
||||
position: relative;
|
||||
height: 200px;
|
||||
background: linear-gradient(180deg, #f0f4ff 0%, #faf5ff 100%);
|
||||
border-radius: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.curve-line {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
height: 120px;
|
||||
}
|
||||
.memory-point {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border: 2px solid white;
|
||||
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.5);
|
||||
}
|
||||
.calendar-day {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content:;
|
||||
border-radius: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.calendar-day.urgent {
|
||||
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
|
||||
color: white;
|
||||
}
|
||||
.calendar-day.today {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
.calendar-day.reviewed {
|
||||
background: #10b981;
|
||||
color: white;
|
||||
}
|
||||
.calendar-day.future {
|
||||
background: #e5e7eb;
|
||||
color: #9ca3af;
|
||||
}
|
||||
.nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
.nav-item.active {
|
||||
color: #667eea;
|
||||
}
|
||||
.reminder-pulse {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.6; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-frame">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span>09:41</span>
|
||||
<div class="flex gap-1">
|
||||
<i class="fas fa-signal"></i>
|
||||
<i class="fas fa-wifi"></i>
|
||||
<i class="fas fa-battery-full"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="bg-white px-4 py-3 flex items-center justify-between border-b border-gray-100">
|
||||
<a href="home.html" class="text-gray-600">
|
||||
<i class="fas fa-arrow-left text-xl"></i>
|
||||
</a>
|
||||
<h1 class="text-lg font-bold text-gray-800">记忆曲线</h1>
|
||||
<button class="text-gray-600">
|
||||
<i class="fas fa-cog text-xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="h-[calc(100%-44px-56px-70px)] overflow-y-auto bg-gray-50 px-5 py-4">
|
||||
<!-- 紧急提醒 -->
|
||||
<div class="bg-gradient-to-r from-red-500 to-pink-500 rounded-2xl p-4 mb-5 reminder-pulse">
|
||||
<div class="flex items-center gap-3 text-white">
|
||||
<div class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center">
|
||||
<i class="fas fa-bell text-2xl"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-bold">该复习啦！</p>
|
||||
<p class="text-sm opacity-90">你有 5 个知识点即将遗忘</p>
|
||||
</div>
|
||||
<a href="ai-quiz.html" class="bg-white text-red-500 px-4 py-2 rounded-lg text-sm font-medium">
|
||||
开始
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 艾宾浩斯记忆曲线 -->
|
||||
<div class="curve-container mb-5 p-4">
|
||||
<h3 class="font-bold text-gray-800 mb-2">
|
||||
<i class="fas fa-chart-area text-indigo-500 mr-2"></i>记忆强度曲线
|
||||
</h3>
|
||||
<svg class="curve-line" viewBox="0 0 300 120" preserveAspectRatio="none">
|
||||
<!-- 网格线 -->
|
||||
<line x1="0" y1="30" x2="300" y2="30" stroke="#e5e7eb" stroke-width="1" stroke-dasharray="4"/>
|
||||
<line x1="0" y1="60" x2="300" y2="60" stroke="#e5e7eb" stroke-width="1" stroke-dasharray="4"/>
|
||||
<line x1="0" y1="90" x2="300" y2="90" stroke="#e5e7eb" stroke-width="1" stroke-dasharray="4"/>
|
||||
<!-- 记忆曲线 -->
|
||||
<path d="M0,10 Q30,25 60,35 T120,55 T180,70 T240,85 T300,95" fill="none" stroke="url(#gradient)" stroke-width="3"/>
|
||||
<defs>
|
||||
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#667eea"/>
|
||||
<stop offset="100%" style="stop-color:#764ba2"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- 复习点标记 -->
|
||||
<circle cx="60" cy="35" r="5" fill="#10b981"/>
|
||||
<circle cx="120" cy="55" r="5" fill="#10b981"/>
|
||||
<circle cx="180" cy="70" r="5" fill="#f59e0b"/>
|
||||
</svg>
|
||||
<div class="flex justify-between text-xs text-gray-500 mt-2">
|
||||
<span>学习时</span>
|
||||
<span>20分钟后</span>
|
||||
<span>1小时后</span>
|
||||
<span>1天后</span>
|
||||
<span>3天后</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 复习日历 -->
|
||||
<div class="bg-white rounded-2xl p-4 mb-5 shadow-sm">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="font-bold text-gray-800">
|
||||
<i class="fas fa-calendar-alt text-indigo-500 mr-2"></i>复习计划
|
||||
</h3>
|
||||
<span class="text-sm text-gray-500">2026年3月</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-7 gap-2 text-center mb-2">
|
||||
<span class="text-xs text-gray-400">日</span>
|
||||
<span class="text-xs text-gray-400">一</span>
|
||||
<span class="text-xs text-gray-400">二</span>
|
||||
<span class="text-xs text-gray-400">三</span>
|
||||
<span class="text-xs text-gray-400">四</span>
|
||||
<span class="text-xs text-gray-400">五</span>
|
||||
<span class="text-xs text-gray-400">六</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-7 gap-2">
|
||||
<div class="calendar-day"></div>
|
||||
<div class="calendar-day"></div>
|
||||
<div class="calendar-day"></div>
|
||||
<div class="calendar-day"></div>
|
||||
<div class="calendar-day"></div>
|
||||
<div class="calendar-day reviewed">1</div>
|
||||
<div class="calendar-day reviewed">2</div>
|
||||
<div class="calendar-day reviewed">3</div>
|
||||
<div class="calendar-day reviewed">4</div>
|
||||
<div class="calendar-day reviewed">5</div>
|
||||
<div class="calendar-day reviewed">6</div>
|
||||
<div class="calendar-day reviewed">7</div>
|
||||
<div class="calendar-day reviewed">8</div>
|
||||
<div class="calendar-day reviewed">9</div>
|
||||
<div class="calendar-day reviewed">10</div>
|
||||
<div class="calendar-day reviewed">11</div>
|
||||
<div class="calendar-day reviewed">12</div>
|
||||
<div class="calendar-day reviewed">13</div>
|
||||
<div class="calendar-day reviewed">14</div>
|
||||
<div class="calendar-day reviewed">15</div>
|
||||
<div class="calendar-day reviewed">16</div>
|
||||
<div class="calendar-day reviewed">17</div>
|
||||
<div class="calendar-day reviewed">18</div>
|
||||
<div class="calendar-day reviewed">19</div>
|
||||
<div class="calendar-day reviewed">20</div>
|
||||
<div class="calendar-day reviewed">21</div>
|
||||
<div class="calendar-day reviewed">22</div>
|
||||
<div class="calendar-day reviewed">23</div>
|
||||
<div class="calendar-day reviewed">24</div>
|
||||
<div class="calendar-day reviewed">25</div>
|
||||
<div class="calendar-day reviewed">26</div>
|
||||
<div class="calendar-day reviewed">27</div>
|
||||
<div class="calendar-day today">28</div>
|
||||
<div class="calendar-day urgent">29</div>
|
||||
<div class="calendar-day future">30</div>
|
||||
<div class="calendar-day future">31</div>
|
||||
</div>
|
||||
<div class="flex justify-center gap-4 mt-4 text-xs">
|
||||
<div class="flex items-center gap-1">
|
||||
<div class="w-3 h-3 bg-green-500 rounded"></div>
|
||||
<span class="text-gray-600">已完成</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<div class="w-3 h-3 bg-indigo-500 rounded"></div>
|
||||
<span class="text-gray-600">今天</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-1">
|
||||
<div class="w-3 h-3 bg-red-500 rounded"></div>
|
||||
<span class="text-gray-600">紧急</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 待复习列表 -->
|
||||
<div class="bg-white rounded-2xl p-4 mb-5 shadow-sm">
|
||||
<h3 class="font-bold text-gray-800 mb-4">
|
||||
<i class="fas fa-clock text-yellow-500 mr-2"></i>待复习知识点
|
||||
</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center gap-3 p-3 bg-red-50 rounded-xl border-l-4 border-red-500">
|
||||
<div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center">
|
||||
<i class="fas fa-exclamation-triangle text-red-500"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-medium text-gray-800 text-sm">麻黄汤功效</p>
|
||||
<p class="text-xs text-red-500">紧急复习 · 今天到期</p>
|
||||
</div>
|
||||
<a href="ai-quiz.html" class="text-indigo-500">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-3 bg-orange-50 rounded-xl border-l-4 border-orange-500">
|
||||
<div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
|
||||
<i class="fas fa-hourglass-half text-orange-500"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-medium text-gray-800 text-sm">桂枝汤组成</p>
|
||||
<p class="text-xs text-orange-500">明天到期</p>
|
||||
</div>
|
||||
<a href="ai-quiz.html" class="text-indigo-500">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex items-center gap-3 p-3 bg-yellow-50 rounded-xl border-l-4 border-yellow-500">
|
||||
<div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center">
|
||||
<i class="fas fa-clock text-yellow-500"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-medium text-gray-800 text-sm">阴阳失调概念</p>
|
||||
<p class="text-xs text-yellow-600">3天后到期</p>
|
||||
</div>
|
||||
<a href="ai-quiz.html" class="text-indigo-500">
|
||||
<i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 记忆统计 -->
|
||||
<div class="bg-white rounded-2xl p-4 mb-5 shadow-sm">
|
||||
<h3 class="font-bold text-gray-800 mb-4">
|
||||
<i class="fas fa-chart-pie text-indigo-500 mr-2"></i>记忆统计
|
||||
</h3>
|
||||
<div class="grid grid-cols-3 gap-3">
|
||||
<div class="text-center p-3 bg-green-50 rounded-xl">
|
||||
<p class="text-2xl font-bold text-green-500">86</p>
|
||||
<p class="text-xs text-gray-600">已牢固记忆</p>
|
||||
</div>
|
||||
<div class="text-center p-3 bg-yellow-50 rounded-xl">
|
||||
<p class="text-2xl font-bold text-yellow-500">32</p>
|
||||
<p class="text-xs text-gray-600">复习中</p>
|
||||
</div>
|
||||
<div class="text-center p-3 bg-red-50 rounded-xl">
|
||||
<p class="text-2xl font-bold text-red-500">10</p>
|
||||
<p class="text-xs text-gray-600">待巩固</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部导航栏 -->
|
||||
<div class="absolute bottom-0 left-0 right-0 h-[70px] bg-white border-t border-gray-100 flex items-center justify-around px-4 pb-2">
|
||||
<a href="home.html" class="nav-item">
|
||||
<i class="fas fa-home text-xl"></i>
|
||||
<span>首页</span>
|
||||
</a>
|
||||
<a href="ai-quiz.html" class="nav-item active">
|
||||
<div class="w-12 h-12 -mt-6 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg">
|
||||
<i class="fas fa-microphone-alt text-white text-xl"></i>
|
||||
</div>
|
||||
<span class="text-indigo-500 font-medium">智能抽背</span>
|
||||
</a>
|
||||
<a href="profile.html" class="nav-item">
|
||||
<i class="fas fa-user text-xl"></i>
|
||||
<span>我的</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
330
prototype-mobile/pages/mobile/profile.html
Normal file
330
prototype-mobile/pages/mobile/profile.html
Normal file
@@ -0,0 +1,330 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>个人中心 - AI智能抽背助手</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>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.phone-frame {
|
||||
width: 375px;
|
||||
height: 812px;
|
||||
margin: 20px auto;
|
||||
border-radius: 40px;
|
||||
border: 12px solid #1a1a1a;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
position: relative;
|
||||
}
|
||||
.status-bar {
|
||||
height: 44px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
}
|
||||
.avatar-ring {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 3px;
|
||||
}
|
||||
.avatar-inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.stat-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
background: white;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
.menu-item:hover {
|
||||
background: #f9fafb;
|
||||
}
|
||||
.menu-item:first-child {
|
||||
border-radius: 16px 16px 0 0;
|
||||
}
|
||||
.menu-item:last-child {
|
||||
border-radius: 0 0 16px 16px;
|
||||
border-bottom: none;
|
||||
}
|
||||
.nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
.nav-item.active {
|
||||
color: #667eea;
|
||||
}
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
font-size: 10px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-frame">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span>09:41</span>
|
||||
<div class="flex gap-1">
|
||||
<i class="fas fa-signal"></i>
|
||||
<i class="fas fa-wifi"></i>
|
||||
<i class="fas fa-battery-full"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="h-[calc(100%-44px-70px)] overflow-y-auto bg-gray-50">
|
||||
<!-- 用户信息头部 -->
|
||||
<div class="bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-400 px-5 pt-6 pb-20 text-white">
|
||||
<div class="flex justify-between items-start mb-6">
|
||||
<h1 class="text-xl font-bold">个人中心</h1>
|
||||
<button class="text-white/80">
|
||||
<i class="fas fa-cog text-xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="avatar-ring">
|
||||
<div class="avatar-inner">
|
||||
<i class="fas fa-user text-3xl text-indigo-500"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h2 class="text-xl font-bold">小明同学</h2>
|
||||
<p class="text-sm opacity-80">ID: 10086888</p>
|
||||
</div>
|
||||
<button class="bg-white/20 px-4 py-2 rounded-full text-sm">
|
||||
编辑
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 学习统计卡片 -->
|
||||
<div class="px-5 -mt-12 mb-5">
|
||||
<div class="stat-card">
|
||||
<div class="grid grid-cols-4 gap-2 text-center">
|
||||
<div>
|
||||
<p class="text-xl font-bold text-indigo-500">128</p>
|
||||
<p class="text-xs text-gray-500">已记忆</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xl font-bold text-purple-500">45</p>
|
||||
<p class="text-xs text-gray-500">学习中</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xl font-bold text-pink-500">32</p>
|
||||
<p class="text-xs text-gray-500">收藏</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xl font-bold text-amber-500">15</p>
|
||||
<p class="text-xs text-gray-500">连续天数</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 学习数据 -->
|
||||
<div class="px-5 mb-5">
|
||||
<div class="stat-card">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="font-bold text-gray-800">本周学习</h3>
|
||||
<span class="text-xs text-gray-500">03/21 - 03/28</span>
|
||||
</div>
|
||||
<div class="flex items-end justify-between h-24 px-2">
|
||||
<div class="flex flex-col items-center gap-1 flex-1">
|
||||
<div class="w-full max-w-[24px] bg-gradient-to-t from-indigo-500 to-purple-500 rounded-t" style="height: 60%"></div>
|
||||
<span class="text-xs text-gray-500">一</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1 flex-1">
|
||||
<div class="w-full max-w-[24px] bg-gradient-to-t from-indigo-500 to-purple-500 rounded-t" style="height: 80%"></div>
|
||||
<span class="text-xs text-gray-500">二</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1 flex-1">
|
||||
<div class="w-full max-w-[24px] bg-gradient-to-t from-indigo-500 to-purple-500 rounded-t" style="height: 45%"></div>
|
||||
<span class="text-xs text-gray-500">三</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1 flex-1">
|
||||
<div class="w-full max-w-[24px] bg-gradient-to-t from-indigo-500 to-purple-500 rounded-t" style="height: 90%"></div>
|
||||
<span class="text-xs text-gray-500">四</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1 flex-1">
|
||||
<div class="w-full max-w-[24px] bg-gradient-to-t from-indigo-500 to-purple-500 rounded-t" style="height: 70%"></div>
|
||||
<span class="text-xs text-gray-500">五</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1 flex-1">
|
||||
<div class="w-full max-w-[24px] bg-gradient-to-t from-indigo-500 to-purple-500 rounded-t" style="height: 100%"></div>
|
||||
<span class="text-xs text-gray-500">六</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1 flex-1">
|
||||
<div class="w-full max-w-[24px] bg-gray-200 rounded-t" style="height: 30%"></div>
|
||||
<span class="text-xs text-indigo-500 font-medium">日</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 功能菜单 -->
|
||||
<div class="px-5 mb-5">
|
||||
<div class="bg-white rounded-2xl shadow-sm overflow-hidden">
|
||||
<a href="quiz-report.html" class="menu-item">
|
||||
<div class="w-10 h-10 bg-indigo-100 rounded-xl flex items-center justify-center">
|
||||
<i class="fas fa-chart-bar text-indigo-500"></i>
|
||||
</div>
|
||||
<span class="flex-1 text-gray-800">学习报告</span>
|
||||
<i class="fas fa-chevron-right text-gray-400"></i>
|
||||
</a>
|
||||
<a href="memory-curve.html" class="menu-item">
|
||||
<div class="w-10 h-10 bg-purple-100 rounded-xl flex items-center justify-center">
|
||||
<i class="fas fa-brain text-purple-500"></i>
|
||||
</div>
|
||||
<span class="flex-1 text-gray-800">记忆曲线</span>
|
||||
<span class="bg-red-500 text-white text-xs px-2 py-1 rounded-full mr-2">12</span>
|
||||
<i class="fas fa-chevron-right text-gray-400"></i>
|
||||
</a>
|
||||
<a href="#" class="menu-item">
|
||||
<div class="w-10 h-10 bg-amber-100 rounded-xl flex items-center justify-center">
|
||||
<i class="fas fa-bookmark text-amber-500"></i>
|
||||
</div>
|
||||
<span class="flex-1 text-gray-800">我的收藏</span>
|
||||
<i class="fas fa-chevron-right text-gray-400"></i>
|
||||
</a>
|
||||
<a href="#" class="menu-item">
|
||||
<div class="w-10 h-10 bg-rose-100 rounded-xl flex items-center justify-center relative">
|
||||
<i class="fas fa-times-circle text-rose-500"></i>
|
||||
<span class="badge">45</span>
|
||||
</div>
|
||||
<span class="flex-1 text-gray-800">错题本</span>
|
||||
<i class="fas fa-chevron-right text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 更多功能 -->
|
||||
<div class="px-5 mb-5">
|
||||
<div class="bg-white rounded-2xl shadow-sm overflow-hidden">
|
||||
<a href="#" class="menu-item">
|
||||
<div class="w-10 h-10 bg-green-100 rounded-xl flex items-center justify-center">
|
||||
<i class="fas fa-bell text-green-500"></i>
|
||||
</div>
|
||||
<span class="flex-1 text-gray-800">学习提醒</span>
|
||||
<span class="text-gray-400 text-sm mr-2">每天 09:00</span>
|
||||
<i class="fas fa-chevron-right text-gray-400"></i>
|
||||
</a>
|
||||
<a href="#" class="menu-item">
|
||||
<div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center">
|
||||
<i class="fas fa-download text-blue-500"></i>
|
||||
</div>
|
||||
<span class="flex-1 text-gray-800">离线题库</span>
|
||||
<i class="fas fa-chevron-right text-gray-400"></i>
|
||||
</a>
|
||||
<a href="#" class="menu-item">
|
||||
<div class="w-10 h-10 bg-cyan-100 rounded-xl flex items-center justify-center">
|
||||
<i class="fas fa-share-alt text-cyan-500"></i>
|
||||
</div>
|
||||
<span class="flex-1 text-gray-800">分享给好友</span>
|
||||
<i class="fas fa-chevron-right text-gray-400"></i>
|
||||
</a>
|
||||
<a href="#" class="menu-item">
|
||||
<div class="w-10 h-10 bg-gray-100 rounded-xl flex items-center justify-center">
|
||||
<i class="fas fa-cog text-gray-500"></i>
|
||||
</div>
|
||||
<span class="flex-1 text-gray-800">设置</span>
|
||||
<i class="fas fa-chevron-right text-gray-400"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 成就徽章 -->
|
||||
<div class="px-5 mb-5">
|
||||
<div class="stat-card">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="font-bold text-gray-800">
|
||||
<i class="fas fa-trophy text-yellow-500 mr-2"></i>我的成就
|
||||
</h3>
|
||||
<a href="#" class="text-indigo-500 text-sm">查看全部</a>
|
||||
</div>
|
||||
<div class="flex gap-4 justify-center">
|
||||
<div class="text-center">
|
||||
<div class="w-14 h-14 bg-gradient-to-br from-yellow-400 to-orange-500 rounded-full flex items-center justify-center mb-1">
|
||||
<i class="fas fa-fire text-white text-xl"></i>
|
||||
</div>
|
||||
<p class="text-xs text-gray-600">连续7天</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-14 h-14 bg-gradient-to-br from-indigo-400 to-purple-500 rounded-full flex items-center justify-center mb-1">
|
||||
<i class="fas fa-star text-white text-xl"></i>
|
||||
</div>
|
||||
<p class="text-xs text-gray-600">百题达人</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-14 h-14 bg-gradient-to-br from-green-400 to-emerald-500 rounded-full flex items-center justify-center mb-1">
|
||||
<i class="fas fa-check-double text-white text-xl"></i>
|
||||
</div>
|
||||
<p class="text-xs text-gray-600">正确率90%</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="w-14 h-14 bg-gray-200 rounded-full flex items-center justify-center mb-1">
|
||||
<i class="fas fa-lock text-gray-400 text-xl"></i>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400">待解锁</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部导航栏 -->
|
||||
<div class="absolute bottom-0 left-0 right-0 h-[70px] bg-white border-t border-gray-100 flex items-center justify-around px-4 pb-2">
|
||||
<a href="home.html" class="nav-item">
|
||||
<i class="fas fa-home text-xl"></i>
|
||||
<span>首页</span>
|
||||
</a>
|
||||
<a href="ai-quiz.html" class="nav-item active">
|
||||
<div class="w-12 h-12 -mt-6 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg">
|
||||
<i class="fas fa-microphone-alt text-white text-xl"></i>
|
||||
</div>
|
||||
<span class="text-indigo-500 font-medium">智能抽背</span>
|
||||
</a>
|
||||
<a href="profile.html" class="nav-item">
|
||||
<i class="fas fa-user text-xl"></i>
|
||||
<span>我的</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
300
prototype-mobile/pages/mobile/quiz-report.html
Normal file
300
prototype-mobile/pages/mobile/quiz-report.html
Normal file
@@ -0,0 +1,300 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>抽背报告 - AI智能抽背助手</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>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.phone-frame {
|
||||
width: 375px;
|
||||
height: 812px;
|
||||
margin: 20px auto;
|
||||
border-radius: 40px;
|
||||
border: 12px solid #1a1a1a;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
|
||||
overflow: hidden;
|
||||
background: white;
|
||||
position: relative;
|
||||
}
|
||||
.status-bar {
|
||||
height: 44px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
}
|
||||
.score-circle {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
border-radius: 50%;
|
||||
background: conic-gradient(
|
||||
from 0deg,
|
||||
#10b981 0deg,
|
||||
#10b981 252deg,
|
||||
#e5e7eb 252deg,
|
||||
#e5e7eb 360deg
|
||||
);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
.score-circle::before {
|
||||
content: '';
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
border-radius: 50%;
|
||||
background: white;
|
||||
position: absolute;
|
||||
}
|
||||
.score-text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
}
|
||||
.stat-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.error-item {
|
||||
background: #fef2f2;
|
||||
border-left: 4px solid #ef4444;
|
||||
}
|
||||
.nav-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
.nav-item.active {
|
||||
color: #667eea;
|
||||
}
|
||||
.chart-bar {
|
||||
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
|
||||
border-radius: 4px 4px 0 0;
|
||||
transition: height 0.5s ease;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="phone-frame">
|
||||
<!-- 状态栏 -->
|
||||
<div class="status-bar">
|
||||
<span>09:41</span>
|
||||
<div class="flex gap-1">
|
||||
<i class="fas fa-signal"></i>
|
||||
<i class="fas fa-wifi"></i>
|
||||
<i class="fas fa-battery-full"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<div class="bg-white px-4 py-3 flex items-center justify-between border-b border-gray-100">
|
||||
<a href="ai-quiz.html" class="text-gray-600">
|
||||
<i class="fas fa-arrow-left text-xl"></i>
|
||||
</a>
|
||||
<h1 class="text-lg font-bold text-gray-800">抽背报告</h1>
|
||||
<button class="text-gray-600">
|
||||
<i class="fas fa-share-alt text-xl"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 主内容区 -->
|
||||
<div class="h-[calc(100%-44px-56px-70px)] overflow-y-auto bg-gray-50 px-5 py-4">
|
||||
<!-- 报告时间 -->
|
||||
<div class="text-center mb-4">
|
||||
<p class="text-sm text-gray-500">报告生成于 2026-03-28 09:41</p>
|
||||
<p class="text-xs text-gray-400">报告将保存30天</p>
|
||||
</div>
|
||||
|
||||
<!-- 核心数据 - 正确率 -->
|
||||
<div class="stat-card mb-5">
|
||||
<div class="flex flex-col items-center py-4">
|
||||
<div class="score-circle mb-4">
|
||||
<div class="score-text">
|
||||
<p class="text-4xl font-bold text-gray-800">70%</p>
|
||||
<p class="text-sm text-gray-500">正确率</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-4 gap-4 w-full px-4">
|
||||
<div class="text-center">
|
||||
<p class="text-2xl font-bold text-gray-800">10</p>
|
||||
<p class="text-xs text-gray-500">总题数</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="text-2xl font-bold text-green-500">7</p>
|
||||
<p class="text-xs text-gray-500">正确</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="text-2xl font-bold text-red-500">3</p>
|
||||
<p class="text-xs text-gray-500">错误</p>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="text-2xl font-bold text-indigo-500">5:32</p>
|
||||
<p class="text-xs text-gray-500">用时</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表现趋势 -->
|
||||
<div class="stat-card mb-5">
|
||||
<h3 class="font-bold text-gray-800 mb-4">
|
||||
<i class="fas fa-chart-line text-indigo-500 mr-2"></i>表现趋势
|
||||
</h3>
|
||||
<div class="flex items-end justify-between h-32 px-2">
|
||||
<div class="flex flex-col items-center gap-1">
|
||||
<div class="chart-bar w-6" style="height: 40%"></div>
|
||||
<span class="text-xs text-gray-500">周一</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1">
|
||||
<div class="chart-bar w-6" style="height: 55%"></div>
|
||||
<span class="text-xs text-gray-500">周二</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1">
|
||||
<div class="chart-bar w-6" style="height: 48%"></div>
|
||||
<span class="text-xs text-gray-500">周三</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1">
|
||||
<div class="chart-bar w-6" style="height: 65%"></div>
|
||||
<span class="text-xs text-gray-500">周四</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1">
|
||||
<div class="chart-bar w-6" style="height: 70%"></div>
|
||||
<span class="text-xs text-gray-500">今天</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 mt-3 text-center">
|
||||
<i class="fas fa-arrow-up text-green-500 mr-1"></i>
|
||||
比上次提升 5%，继续保持！
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 错题分析 -->
|
||||
<div class="stat-card mb-5">
|
||||
<h3 class="font-bold text-gray-800 mb-4">
|
||||
<i class="fas fa-times-circle text-red-500 mr-2"></i>错题分析
|
||||
</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="error-item rounded-lg p-3">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<div>
|
||||
<p class="font-medium text-gray-800 text-sm">桂枝汤的组成</p>
|
||||
<p class="text-xs text-gray-500">方剂学 - 解表剂</p>
|
||||
</div>
|
||||
<span class="bg-red-100 text-red-600 px-2 py-1 rounded text-xs">未掌握</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-600">
|
||||
<i class="fas fa-info-circle mr-1"></i>
|
||||
正确答案：桂枝、芍药、甘草、生姜、大枣
|
||||
</p>
|
||||
</div>
|
||||
<div class="error-item rounded-lg p-3">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<div>
|
||||
<p class="font-medium text-gray-800 text-sm">阴阳失调的基本概念</p>
|
||||
<p class="text-xs text-gray-500">中医基础理论</p>
|
||||
</div>
|
||||
<span class="bg-orange-100 text-orange-600 px-2 py-1 rounded text-xs">模糊</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-600">
|
||||
<i class="fas fa-info-circle mr-1"></i>
|
||||
阴阳失调是指阴阳之间失去平衡协调
|
||||
</p>
|
||||
</div>
|
||||
<div class="error-item rounded-lg p-3">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<div>
|
||||
<p class="font-medium text-gray-800 text-sm">麻黄汤的主治病证</p>
|
||||
<p class="text-xs text-gray-500">方剂学 - 解表剂</p>
|
||||
</div>
|
||||
<span class="bg-red-100 text-red-600 px-2 py-1 rounded text-xs">未掌握</span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-600">
|
||||
<i class="fas fa-info-circle mr-1"></i>
|
||||
主治外感风寒表实证
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 复习建议 -->
|
||||
<div class="stat-card mb-5">
|
||||
<h3 class="font-bold text-gray-800 mb-4">
|
||||
<i class="fas fa-lightbulb text-yellow-500 mr-2"></i>复习建议
|
||||
</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-indigo-600 font-bold text-sm">1</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-800">重点复习方剂学解表剂章节</p>
|
||||
<p class="text-xs text-gray-500">建议用时：20分钟</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-indigo-600 font-bold text-sm">2</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-800">使用卡片背诵模式巩固记忆</p>
|
||||
<p class="text-xs text-gray-500">推荐题目：10道</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-indigo-600 font-bold text-sm">3</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm text-gray-800">明天同一时间进行复习</p>
|
||||
<p class="text-xs text-gray-500">记忆曲线最佳复习时间</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 操作按钮 -->
|
||||
<div class="flex gap-3 mb-4">
|
||||
<a href="ai-quiz.html" class="flex-1 bg-gradient-to-r from-indigo-500 to-purple-500 text-white py-3 rounded-xl font-medium text-center">
|
||||
<i class="fas fa-redo mr-2"></i>重新抽背
|
||||
</a>
|
||||
<a href="card-recite.html" class="flex-1 bg-white border-2 border-indigo-500 text-indigo-500 py-3 rounded-xl font-medium text-center">
|
||||
<i class="fas fa-clone mr-2"></i>卡片练习
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部导航栏 -->
|
||||
<div class="absolute bottom-0 left-0 right-0 h-[70px] bg-white border-t border-gray-100 flex items-center justify-around px-4 pb-2">
|
||||
<a href="home.html" class="nav-item">
|
||||
<i class="fas fa-home text-xl"></i>
|
||||
<span>首页</span>
|
||||
</a>
|
||||
<a href="ai-quiz.html" class="nav-item active">
|
||||
<div class="w-12 h-12 -mt-6 bg-gradient-to-r from-indigo-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg">
|
||||
<i class="fas fa-microphone-alt text-white text-xl"></i>
|
||||
</div>
|
||||
<span class="text-indigo-500 font-medium">智能抽背</span>
|
||||
</a>
|
||||
<a href="profile.html" class="nav-item">
|
||||
<i class="fas fa-user text-xl"></i>
|
||||
<span>我的</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
172
prototype-mobile/server.js
vendored
Normal file
172
prototype-mobile/server.js
vendored
Normal file
@@ -0,0 +1,172 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
/**
|
||||
* AI 智能抽背助手 - 移动端原型本地预览服务器
|
||||
*
|
||||
* 使用方法:
|
||||
* node server.js
|
||||
*
|
||||
* 功能:
|
||||
* - 启动本地 HTTP 服务器（端口 8081）
|
||||
* - 自动打开浏览器访问移动端原型
|
||||
* - 支持热重载（修改文件后自动刷新）
|
||||
*
|
||||
* @author generate-prototype-grid skill
|
||||
* @date 2026-03-28
|
||||
*/
|
||||
|
||||
const http = require('http');
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const { exec } = require('child_process');
|
||||
|
||||
const PORT = 8081;
|
||||
const PROTOTYPE_DIR = __dirname;
|
||||
|
||||
// MIME 类型映射
|
||||
const MIME_TYPES = {
|
||||
'.html': 'text/html; charset=utf-8',
|
||||
'.css': 'text/css; charset=utf-8',
|
||||
'.js': 'application/javascript; charset=utf-8',
|
||||
'.json': 'application/json; charset=utf-8',
|
||||
'.png': 'image/png',
|
||||
'.jpg': 'image/jpeg',
|
||||
'.jpeg': 'image/jpeg',
|
||||
'.gif': 'image/gif',
|
||||
'.svg': 'image/svg+xml',
|
||||
'.ico': 'image/x-icon',
|
||||
'.woff': 'font/woff',
|
||||
'.woff2': 'font/woff2',
|
||||
'.ttf': 'font/ttf',
|
||||
'.md': 'text/markdown; charset=utf-8',
|
||||
};
|
||||
|
||||
// 创建服务器
|
||||
const server = http.createServer((req, res) => {
|
||||
// 解析 URL
|
||||
let urlPath = req.url;
|
||||
|
||||
// 处理根路径
|
||||
if (urlPath === '/') {
|
||||
urlPath = '/mobile-index.html';
|
||||
}
|
||||
|
||||
// 构建文件路径
|
||||
const filePath = path.join(PROTOTYPE_DIR, urlPath);
|
||||
const extname = path.extname(filePath).toLowerCase();
|
||||
|
||||
// 设置响应头
|
||||
const contentType = MIME_TYPES[extname] || 'application/octet-stream';
|
||||
|
||||
// 读取并返回文件
|
||||
fs.readFile(filePath, (err, content) => {
|
||||
if (err) {
|
||||
if (err.code === 'ENOENT') {
|
||||
// 文件不存在
|
||||
res.writeHead(404, { 'Content-Type': 'text/html; charset=utf-8' });
|
||||
res.end(`
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>404 - 文件未找到</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
.error-box {
|
||||
text-align: center;
|
||||
background: white;
|
||||
padding: 40px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
}
|
||||
h1 { color: #667eea; margin: 0 0 16px 0; }
|
||||
p { color: #666; margin: 0 0 24px 0; }
|
||||
a {
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
padding: 8px 16px;
|
||||
border: 1px solid #667eea;
|
||||
border-radius: 6px;
|
||||
display: inline-block;
|
||||
}
|
||||
a:hover { background: #667eea; color: white; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="error-box">
|
||||
<h1>404</h1>
|
||||
<p>文件未找到: ${urlPath}</p>
|
||||
<a href="/mobile-index.html">返回首页</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`);
|
||||
} else {
|
||||
// 服务器错误
|
||||
res.writeHead(500, { 'Content-Type': 'text/html; charset=utf-8' });
|
||||
res.end('服务器错误: ' + err.code);
|
||||
}
|
||||
} else {
|
||||
// 成功返回文件
|
||||
res.writeHead(200, { 'Content-Type': contentType });
|
||||
res.end(content);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 启动服务器
|
||||
server.listen(PORT, () => {
|
||||
console.log('='.repeat(60));
|
||||
console.log(' AI 智能抽背助手 - 移动端原型本地预览服务器');
|
||||
console.log('='.repeat(60));
|
||||
console.log('');
|
||||
console.log(` 服务器地址: http://localhost:${PORT}`);
|
||||
console.log('');
|
||||
console.log(' 可用页面:');
|
||||
console.log(` - 统一入口: http://localhost:${PORT}/mobile-index.html`);
|
||||
console.log('');
|
||||
console.log(' 移动端页面:');
|
||||
console.log(` - 首页抽背: /pages/mobile/home.html`);
|
||||
console.log(` - AI智能抽背: /pages/mobile/ai-quiz.html`);
|
||||
console.log(` - 抽背报告: /pages/mobile/quiz-report.html`);
|
||||
console.log(` - 记忆曲线: /pages/mobile/memory-curve.html`);
|
||||
console.log(` - 卡片背诵: /pages/mobile/card-recite.html`);
|
||||
console.log(` - 个人中心: /pages/mobile/profile.html`);
|
||||
console.log('');
|
||||
console.log(' 按 Ctrl+C 停止服务器');
|
||||
console.log('='.repeat(60));
|
||||
console.log('');
|
||||
|
||||
// 自动打开浏览器
|
||||
const openCommand = process.platform === 'win32' ? 'start' :
|
||||
process.platform === 'darwin' ? 'open' : 'xdg-open';
|
||||
|
||||
exec(`${openCommand} http://localhost:${PORT}`, (error) => {
|
||||
if (error) {
|
||||
console.log(' 提示: 无法自动打开浏览器，请手动访问上述地址');
|
||||
} else {
|
||||
console.log(' 已自动打开浏览器');
|
||||
}
|
||||
console.log('');
|
||||
});
|
||||
});
|
||||
|
||||
// 优雅退出
|
||||
process.on('SIGINT', () => {
|
||||
console.log('');
|
||||
console.log('正在停止服务器...');
|
||||
server.close(() => {
|
||||
console.log('服务器已停止');
|
||||
process.exit(0);
|
||||
});
|
||||
});
|
||||
|
||||
module.exports = server;
|
||||
Reference in New Issue
Block a user