d8dfun/bmad-method-template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
cde556863a487ade91adc451183d9a8613f7d980
bmad-method-template/prototype/index.html
yourname cde556863a feat: 添加 AI 智能抽背助手原型系统 
- 基于完整 PRD（1082行）和 UX 设计（1094行）生成
- 9 个 HTML 页面（174KB）
- 桌面端管理后台原型（6个管理页面）
- 平铺展示架构：所有页面同时显示在 iframe 网格中
- 使用 Tailwind CSS + Font Awesome
- 包含本地预览服务器（server.js）

页面列表：
- index.html: 统一入口
- admin-index.html: 平铺展示入口
- docs-index.html: 文档中心
- dashboard.html: 数据概览
- quiz-records.html: 抽背记录查询
- student-management.html: 学生管理
- knowledge-management.html: 知识点管理
- task-management.html: 学习任务管理
- settings.html: 系统设置

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-28 15:38:24 +00:00

270 lines
15 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm transition">
<i class="fas fa-th mr-2"></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-8 py-3 bg-white text-blue-600 rounded-xl font-medium hover:bg-gray-100 transition shadow-lg">
<i class="fas fa-th mr-2"></i>查看平铺展示
</a>
<a href="docs-index.html" class="px-8 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="bg-gradient-to-r from-blue-600 to-blue-700 rounded-2xl p-8 text-white">
<div class="flex items-center justify-between">
<div>
<h2 class="text-2xl font-bold mb-2">开始使用原型系统</h2>
<p class="text-blue-100">选择您想要的查看方式</p>
</div>
<div class="flex 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">
<i class="fas fa-th 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>
</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>
Reference in New Issue View Git Blame Copy Permalink