a86e33498b
- 添加移动端平铺入口页面 (mobile-index.html) - 添加6个移动端功能页面 - 更新统一入口页面，支持桌面端和移动端双端入口 - 更新桌面端平铺页面为单列布局 - 添加开发容器配置文件]
141 lines
5.0 KiB
HTML
141 lines
5.0 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>
|
||
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>
|