a86e33498b
- 添加移动端平铺入口页面 (mobile-index.html) - 添加6个移动端功能页面 - 更新统一入口页面，支持桌面端和移动端双端入口 - 更新桌面端平铺页面为单列布局 - 添加开发容器配置文件]
309 lines
18 KiB
HTML
309 lines
18 KiB
HTML
<!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>
|
||
:root {
|
||
--primary-blue: #1890FF;
|
||
--success-green: #52C41A;
|
||
--warning-orange: #FAAD14;
|
||
}
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
||
}
|
||
.hero-gradient {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
}
|
||
.card-hover {
|
||
transition: all 0.3s ease;
|
||
}
|
||
.card-hover:hover {
|
||
transform: translateY(-8px);
|
||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
||
}
|
||
.feature-icon {
|
||
width: 64px;
|
||
height: 64px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 16px;
|
||
font-size: 28px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-gray-50 min-h-screen">
|
||
<!-- 导航栏 -->
|
||
<nav class="bg-white shadow-sm sticky top-0 z-50">
|
||
<div class="max-w-7xl mx-auto px-6 py-4">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center">
|
||
<i class="fas fa-robot text-white"></i>
|
||
</div>
|
||
<span class="text-xl font-bold text-gray-800">AI 智能抽背助手</span>
|
||
</div>
|
||
<div class="flex items-center gap-4">
|
||
<a href="#features" class="text-gray-600 hover:text-blue-600 text-sm">功能特性</a>
|
||
<a href="#pages" class="text-gray-600 hover:text-blue-600 text-sm">页面列表</a>
|
||
<a href="docs-index.html" class="text-gray-600 hover:text-blue-600 text-sm">文档中心</a>
|
||
<a href="admin-index.html" class="px-3 py-2 bg-blue-100 text-blue-600 rounded-lg hover:bg-blue-200 text-sm transition">
|
||
<i class="fas fa-desktop mr-1"></i>桌面端
|
||
</a>
|
||
<a href="mobile-index.html" class="px-3 py-2 bg-green-100 text-green-600 rounded-lg hover:bg-green-200 text-sm transition">
|
||
<i class="fas fa-mobile-alt mr-1"></i>移动端
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 英雄区域 -->
|
||
<section class="hero-gradient text-white py-20">
|
||
<div class="max-w-7xl mx-auto px-6 text-center">
|
||
<div class="inline-flex items-center gap-2 bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full text-sm mb-6">
|
||
<i class="fas fa-sparkles"></i>
|
||
<span>基于 PRD 和 UX 设计规范自动生成</span>
|
||
</div>
|
||
<h1 class="text-5xl font-bold mb-6">AI 智能抽背助手</h1>
|
||
<p class="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
|
||
基于 AI 驱动的艾宾浩斯遗忘曲线算法，在用户即将遗忘知识点的关键时刻主动推送精准复习
|
||
</p>
|
||
<div class="flex justify-center gap-4">
|
||
<a href="admin-index.html" class="px-6 py-3 bg-white text-blue-600 rounded-xl font-medium hover:bg-gray-100 transition shadow-lg">
|
||
<i class="fas fa-desktop mr-2"></i>桌面端管理后台
|
||
</a>
|
||
<a href="mobile-index.html" class="px-6 py-3 bg-white text-green-600 rounded-xl font-medium hover:bg-gray-100 transition shadow-lg">
|
||
<i class="fas fa-mobile-alt mr-2"></i>移动端应用
|
||
</a>
|
||
<a href="docs-index.html" class="px-6 py-3 bg-white/20 backdrop-blur-sm text-white rounded-xl font-medium hover:bg-white/30 transition">
|
||
<i class="fas fa-book mr-2"></i>查看文档
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 功能特性 -->
|
||
<section id="features" class="py-16 bg-white">
|
||
<div class="max-w-7xl mx-auto px-6">
|
||
<div class="text-center mb-12">
|
||
<h2 class="text-3xl font-bold text-gray-800 mb-4">核心功能特性</h2>
|
||
<p class="text-gray-600">基于 PRD 文档定义的 5 大核心模块</p>
|
||
</div>
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||
<div class="card-hover bg-gradient-to-br from-blue-50 to-blue-100 rounded-2xl p-6">
|
||
<div class="feature-icon bg-blue-500 text-white mb-4">
|
||
<i class="fas fa-microphone-alt"></i>
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-800 mb-2">AI 语音抽背</h3>
|
||
<p class="text-gray-600 text-sm">支持语音/文字输入提问，AI 即时判断正误，自动标记错误内容为"待再次抽背"</p>
|
||
</div>
|
||
<div class="card-hover bg-gradient-to-br from-green-50 to-green-100 rounded-2xl p-6">
|
||
<div class="feature-icon bg-green-500 text-white mb-4">
|
||
<i class="fas fa-brain"></i>
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-800 mb-2">记忆曲线助力</h3>
|
||
<p class="text-gray-600 text-sm">基于艾宾浩斯遗忘曲线，在遗忘临界点推送再次抽背提醒</p>
|
||
</div>
|
||
<div class="card-hover bg-gradient-to-br from-purple-50 to-purple-100 rounded-2xl p-6">
|
||
<div class="feature-icon bg-purple-500 text-white mb-4">
|
||
<i class="fas fa-layer-group"></i>
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-800 mb-2">要点背诵</h3>
|
||
<p class="text-gray-600 text-sm">卡片式背诵、音频带背挖空、关联试题推荐，多种学习模式</p>
|
||
</div>
|
||
<div class="card-hover bg-gradient-to-br from-orange-50 to-orange-100 rounded-2xl p-6">
|
||
<div class="feature-icon bg-orange-500 text-white mb-4">
|
||
<i class="fas fa-tasks"></i>
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-800 mb-2">任务制定</h3>
|
||
<p class="text-gray-600 text-sm">自主设置学习任务，通过手机通知栏推送学习提醒</p>
|
||
</div>
|
||
<div class="card-hover bg-gradient-to-br from-pink-50 to-pink-100 rounded-2xl p-6">
|
||
<div class="feature-icon bg-pink-500 text-white mb-4">
|
||
<i class="fas fa-star"></i>
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-800 mb-2">收藏与分享</h3>
|
||
<p class="text-gray-600 text-sm">收藏重要题目，添加标签分类，支持分享到微信、QQ等平台</p>
|
||
</div>
|
||
<div class="card-hover bg-gradient-to-br from-cyan-50 to-cyan-100 rounded-2xl p-6">
|
||
<div class="feature-icon bg-cyan-500 text-white mb-4">
|
||
<i class="fas fa-chart-bar"></i>
|
||
</div>
|
||
<h3 class="text-xl font-semibold text-gray-800 mb-2">后台管理</h3>
|
||
<p class="text-gray-600 text-sm">查看抽背记录、数据统计、内容管理、系统配置</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 页面列表 -->
|
||
<section id="pages" class="py-16 bg-gray-50">
|
||
<div class="max-w-7xl mx-auto px-6">
|
||
<div class="text-center mb-12">
|
||
<h2 class="text-3xl font-bold text-gray-800 mb-4">后台管理页面</h2>
|
||
<p class="text-gray-600">共 6 个页面，涵盖数据概览、记录查询、学生管理等功能</p>
|
||
</div>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
<a href="pages/admin/dashboard.html" target="_blank" class="card-hover bg-white rounded-xl shadow-sm overflow-hidden">
|
||
<div class="h-2 bg-blue-500"></div>
|
||
<div class="p-6">
|
||
<div class="flex items-center gap-3 mb-3">
|
||
<div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
|
||
<i class="fas fa-chart-line text-blue-600"></i>
|
||
</div>
|
||
<h3 class="text-lg font-semibold text-gray-800">数据概览</h3>
|
||
</div>
|
||
<p class="text-gray-600 text-sm">总抽背次数、平均正确率、活跃用户数、正确率趋势图、错误知识点分布</p>
|
||
</div>
|
||
</a>
|
||
<a href="pages/admin/quiz-records.html" target="_blank" class="card-hover bg-white rounded-xl shadow-sm overflow-hidden">
|
||
<div class="h-2 bg-green-500"></div>
|
||
<div class="p-6">
|
||
<div class="flex items-center gap-3 mb-3">
|
||
<div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
|
||
<i class="fas fa-list-alt text-green-600"></i>
|
||
</div>
|
||
<h3 class="text-lg font-semibold text-gray-800">抽背记录查询</h3>
|
||
</div>
|
||
<p class="text-gray-600 text-sm">按用户/时间筛选，详细数据表格，导出Excel，发送报告</p>
|
||
</div>
|
||
</a>
|
||
<a href="pages/admin/student-management.html" target="_blank" class="card-hover bg-white rounded-xl shadow-sm overflow-hidden">
|
||
<div class="h-2 bg-purple-500"></div>
|
||
<div class="p-6">
|
||
<div class="flex items-center gap-3 mb-3">
|
||
<div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
|
||
<i class="fas fa-user-graduate text-purple-600"></i>
|
||
</div>
|
||
<h3 class="text-lg font-semibold text-gray-800">学生管理</h3>
|
||
</div>
|
||
<p class="text-gray-600 text-sm">学生列表、添加/编辑学生、查看学习数据、班级管理</p>
|
||
</div>
|
||
</a>
|
||
<a href="pages/admin/knowledge-management.html" target="_blank" class="card-hover bg-white rounded-xl shadow-sm overflow-hidden">
|
||
<div class="h-2 bg-orange-500"></div>
|
||
<div class="p-6">
|
||
<div class="flex items-center gap-3 mb-3">
|
||
<div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center">
|
||
<i class="fas fa-book text-orange-600"></i>
|
||
</div>
|
||
<h3 class="text-lg font-semibold text-gray-800">知识点管理</h3>
|
||
</div>
|
||
<p class="text-gray-600 text-sm">知识点列表、添加/编辑知识点、分类管理、难度设置</p>
|
||
</div>
|
||
</a>
|
||
<a href="pages/admin/task-management.html" target="_blank" class="card-hover bg-white rounded-xl shadow-sm overflow-hidden">
|
||
<div class="h-2 bg-pink-500"></div>
|
||
<div class="p-6">
|
||
<div class="flex items-center gap-3 mb-3">
|
||
<div class="w-10 h-10 bg-pink-100 rounded-lg flex items-center justify-center">
|
||
<i class="fas fa-tasks text-pink-600"></i>
|
||
</div>
|
||
<h3 class="text-lg font-semibold text-gray-800">学习任务管理</h3>
|
||
</div>
|
||
<p class="text-gray-600 text-sm">任务列表、创建/编辑任务、任务类型、完成率统计</p>
|
||
</div>
|
||
</a>
|
||
<a href="pages/admin/settings.html" target="_blank" class="card-hover bg-white rounded-xl shadow-sm overflow-hidden">
|
||
<div class="h-2 bg-cyan-500"></div>
|
||
<div class="p-6">
|
||
<div class="flex items-center gap-3 mb-3">
|
||
<div class="w-10 h-10 bg-cyan-100 rounded-lg flex items-center justify-center">
|
||
<i class="fas fa-cog text-cyan-600"></i>
|
||
</div>
|
||
<h3 class="text-lg font-semibold text-gray-800">系统设置</h3>
|
||
</div>
|
||
<p class="text-gray-600 text-sm">基本设置、抽背设置、提醒设置、数据管理、安全设置</p>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 快速入口 -->
|
||
<section class="py-16 bg-white">
|
||
<div class="max-w-7xl mx-auto px-6">
|
||
<div class="text-center mb-10">
|
||
<h2 class="text-3xl font-bold text-gray-800 mb-3">快速入口</h2>
|
||
<p class="text-gray-600">选择您想要查看的原型系统</p>
|
||
</div>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||
<!-- 桌面端管理后台 -->
|
||
<a href="admin-index.html" class="card-hover group">
|
||
<div class="bg-gradient-to-br from-blue-500 to-blue-700 rounded-2xl p-8 text-white h-full">
|
||
<div class="flex items-start justify-between mb-6">
|
||
<div class="w-16 h-16 bg-white/20 rounded-2xl flex items-center justify-center">
|
||
<i class="fas fa-desktop text-3xl"></i>
|
||
</div>
|
||
<i class="fas fa-arrow-right text-white/60 group-hover:text-white group-hover:translate-x-2 transition-all"></i>
|
||
</div>
|
||
<h3 class="text-2xl font-bold mb-3">桌面端管理后台</h3>
|
||
<p class="text-blue-100 mb-4">面向教师和管理员的 Web 管理系统</p>
|
||
<div class="flex flex-wrap gap-2">
|
||
<span class="px-3 py-1 bg-white/20 rounded-full text-sm">数据概览</span>
|
||
<span class="px-3 py-1 bg-white/20 rounded-full text-sm">学生管理</span>
|
||
<span class="px-3 py-1 bg-white/20 rounded-full text-sm">知识点管理</span>
|
||
<span class="px-3 py-1 bg-white/20 rounded-full text-sm">任务管理</span>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
<!-- 移动端前端应用 -->
|
||
<a href="mobile-index.html" class="card-hover group">
|
||
<div class="bg-gradient-to-br from-green-500 to-green-700 rounded-2xl p-8 text-white h-full">
|
||
<div class="flex items-start justify-between mb-6">
|
||
<div class="w-16 h-16 bg-white/20 rounded-2xl flex items-center justify-center">
|
||
<i class="fas fa-mobile-alt text-3xl"></i>
|
||
</div>
|
||
<i class="fas fa-arrow-right text-white/60 group-hover:text-white group-hover:translate-x-2 transition-all"></i>
|
||
</div>
|
||
<h3 class="text-2xl font-bold mb-3">移动端前端应用</h3>
|
||
<p class="text-green-100 mb-4">面向学生的移动学习应用</p>
|
||
<div class="flex flex-wrap gap-2">
|
||
<span class="px-3 py-1 bg-white/20 rounded-full text-sm">AI 抽背</span>
|
||
<span class="px-3 py-1 bg-white/20 rounded-full text-sm">要点背诵</span>
|
||
<span class="px-3 py-1 bg-white/20 rounded-full text-sm">学习任务</span>
|
||
<span class="px-3 py-1 bg-white/20 rounded-full text-sm">收藏分享</span>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<div class="mt-8 text-center">
|
||
<a href="docs-index.html" class="inline-flex items-center gap-2 px-6 py-3 bg-gray-100 text-gray-700 rounded-xl font-medium hover:bg-gray-200 transition">
|
||
<i class="fas fa-book"></i>查看文档中心
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 页脚 -->
|
||
<footer class="bg-gray-800 text-white py-8">
|
||
<div class="max-w-7xl mx-auto px-6">
|
||
<div class="flex items-center justify-between">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-8 h-8 bg-blue-500 rounded-lg flex items-center justify-center">
|
||
<i class="fas fa-robot text-white text-sm"></i>
|
||
</div>
|
||
<span class="font-semibold">AI 智能抽背助手</span>
|
||
</div>
|
||
<div class="text-gray-400 text-sm">
|
||
基于 PRD 和 UX 设计规范自动生成 | 2026-03-28
|
||
</div>
|
||
<div class="flex items-center gap-4 text-sm">
|
||
<a href="../{output_folder}/planning-artifacts/prd.md" target="_blank" class="text-gray-400 hover:text-white">
|
||
<i class="fas fa-file-alt mr-1"></i>PRD
|
||
</a>
|
||
<a href="../{output_folder}/planning-artifacts/ux-design-specification.md" target="_blank" class="text-gray-400 hover:text-white">
|
||
<i class="fas fa-palette mr-1"></i>UX
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</body>
|
||
</html>
|