line for fun

lineforfun/README.md

@@ -0,0 +1,271 @@
+# LineFunQueue（排队互动小游戏合集）产品说明
+
+## 一、产品概述
+
+LineFunQueue是一款面向排队场景的微信小程序，提供多种互动小游戏，帮助用户在排队等待过程中消遣时间、增进社交互动。产品采用"轻交互、重线下沟通"理念，鼓励用户在现实场景中进行面对面互动。
+
+### 核心理念
+- **场景化社交**：针对排队、候车、候诊等等待场景
+- **即开即玩**：无需繁琐注册，扫码即可加入游戏
+- **线下互动**：促进陌生人面对面交流，打破社交隔阂
+- **简单有趣**：低门槛规则，高参与度玩法
+
+### 用户角色与画像
+- **主持人**：景区工作人员、餐厅服务员、活动组织者，负责创建房间、选择游戏、掌控游戏进程
+- **玩家**：排队等待的游客、聚会成员，参与游戏并尝试解谜
+
+## 二、核心功能模块
+
+- **游戏广场**：浏览全部游戏，快速筛选适合的游戏类型
+- **房间系统**：一键创建或加入房间，自动生成分享码
+- **游戏互动**：主持与参与互动、游戏进程控制、结果分享
+- **用户管理**：微信登录、个人资料、游戏历史
+- **付费系统**：体验增强型付费模式，非核心功能付费，确保免费用户完整体验
+
+## 三、游戏架构设计（可扩展）
+
+### 游戏接口规范
+所有游戏必须实现以下标准接口：
+```typescript
+interface Game {
+  gameId: string;          // 游戏唯一标识
+  gameName: string;        // 游戏名称
+  gameDescription: string; // 游戏描述
+  minPlayers: number;      // 最少玩家数
+  maxPlayers: number;      // 最多玩家数
+  timeEstimate: string;    // 预计游戏时长
+  
+  // 游戏初始化
+  initialize: (roomId: string, hostId: string) => Promise<boolean>;
+  
+  // 开始游戏
+  start: (roomId: string) => Promise<boolean>;
+  
+  // 结束游戏
+  end: (roomId: string) => Promise<GameResult>;
+  
+  // 获取主持人视图
+  getHostView: (roomId: string, userId: string) => Promise<HostViewData>;
+  
+  // 获取玩家视图
+  getPlayerView: (roomId: string, userId: string) => Promise<PlayerViewData>;
+  
+  // 处理用户行为
+  handleAction: (roomId: string, userId: string, action: UserAction) => Promise<ActionResult>;
+}
+```
+
+### 海龟汤游戏实现
+```typescript
+interface TurtleSoupGame extends Game {
+  // 特有属性
+  questions: TurtleSoupQuestion[];
+  currentQuestion: TurtleSoupQuestion;
+  playerAnswers: Record<string, string>;
+  
+  // 特有方法
+  revealClue: (roomId: string, clueId: string) => Promise<boolean>;
+  answerQuestion: (roomId: string, userId: string, answer: string) => Promise<AnswerResult>;
+  transferHost: (roomId: string, newHostId: string) => Promise<boolean>;
+}
+
+interface TurtleSoupQuestion {
+  question_id: string;
+  category: string;
+  汤面: string;
+  汤底: string;
+  关联IP?: string;
+  难度等级: number;
+  游戏时长: string;
+  适合人数: string;
+  关键线索: Array<{类型: string, 值: string}>;
+  引导问题: string[];
+  是否付费: boolean;
+  创建时间: string;
+}
+```
+
+## 四、付费系统设计
+
+### 付费原则
+- **完整免费体验**：所有核心功能和游戏内容均可免费体验
+- **高效付费模式**：所有付费内容均采用按小时计费，随开随关
+- **差异化付费点**：主持人和玩家有不同的付费重点
+- **即时价值**：付费后立即提升体验，无需等待
+
+### 付费内容
+
+#### 主持人付费点：主题解锁
+- **经典解谜**：基础主题，免费使用
+- **环球影城**：特色主题，20元/小时
+- **迪士尼奇幻**：特色主题，15元/小时
+- **奇幻冒险**：特色主题，12元/小时
+
+#### 玩家付费点：解谜工具
+- **解题助手**：智能分析问题并提供有效提示，8元/小时
+- **思路引导器**：分析当前思路，指引正确方向，6元/小时
+- **关键词提示**：提供解题关键词，5元/小时
+- **高级解谜套装**：包含全部工具，15元/小时（优惠套餐）
+
+## 五、数据结构
+
+### 用户数据
+```typescript
+interface User {
+  userId: string;        // 微信OpenID
+  nickName: string;      // 昵称
+  avatarUrl: string;     // 头像URL
+  gender: number;        // 性别
+  gameHistory: GameHistoryItem[];  // 游戏历史
+  premiumUser: boolean;  // 是否付费用户
+  createdAt: Date;       // 创建时间
+  lastLoginAt: Date;     // 最后登录时间
+}
+
+interface GameHistoryItem {
+  gameId: string;        // 游戏ID
+  roomId: string;        // 房间ID
+  role: 'host' | 'player'; // 角色
+  result: string;        // 结果
+  playedAt: Date;        // 游戏时间
+}
+```
+
+### 房间数据
+```typescript
+interface Room {
+  roomId: string;        // 房间ID
+  roomCode: string;      // 房间码
+  hostId: string;        // 主持人ID
+  gameId: string;        // 当前游戏ID
+  players: Player[];     // 玩家列表
+  status: 'waiting' | 'playing' | 'ended'; // 房间状态
+  gameData: any;         // 游戏数据（根据不同游戏类型有不同结构）
+  createdAt: Date;       // 创建时间
+  updatedAt: Date;       // 更新时间
+}
+
+interface Player {
+  userId: string;        // 用户ID
+  nickName: string;      // 昵称
+  avatarUrl: string;     // 头像
+  role: 'host' | 'player'; // 角色
+  status: 'online' | 'offline'; // 状态
+  joinedAt: Date;        // 加入时间
+}
+```
+
+## 六、技术架构设计
+
+### 开发框架与工具
+- 前端框架：Taro 3.x
+- 后端服务：微信云开发
+- 数据库：云开发数据库
+- 存储：云开发存储
+- 云函数：处理业务逻辑
+
+### 项目目录结构
+```
+miniprogram-lineforfun/
+├── client/                  # 小程序客户端
+│   ├── config/              # 配置文件
+│   ├── src/                 # 源代码
+│   │   ├── app.config.ts    # 应用配置
+│   │   ├── app.scss         # 全局样式
+│   │   ├── app.ts           # 应用入口
+│   │   ├── index.html       # HTML模板
+│   │   ├── assets/          # 静态资源
+│   │   ├── components/      # 通用组件
+│   │   │   ├── base/        # 基础组件
+│   │   │   ├── game/        # 游戏相关组件
+│   │   │   └── room/        # 房间相关组件
+│   │   ├── constants/       # 常量定义
+│   │   ├── hooks/           # 自定义Hooks
+│   │   ├── interfaces/      # 类型定义
+│   │   ├── pages/           # 页面
+│   │   │   ├── game-plaza/  # 游戏广场
+│   │   │   ├── login/       # 登录页
+│   │   │   ├── game-detail/ # 游戏详情页
+│   │   │   ├── room/        # 房间页面
+│   │   │   │   ├── create/  # 创建房间
+│   │   │   │   └── join/    # 加入房间
+│   │   │   ├── games/       # 游戏页面
+│   │   │   │   ├── turtle-soup/ # 海龟汤游戏
+│   │   │   │   │   ├── host/   # 主持人视图
+│   │   │   │   │   └── player/ # 玩家视图
+│   │   │   │   └── [game-template]/ # 游戏模板
+│   │   │   └── profile/     # 个人中心
+│   │   ├── services/        # 服务
+│   │   │   ├── api.ts       # API接口
+│   │   │   ├── cloud.ts     # 云开发服务
+│   │   │   └── game.ts      # 游戏服务
+│   │   ├── store/           # 状态管理
+│   │   ├── styles/          # 样式文件
+│   │   └── utils/           # 工具函数
+│   └── package.json         # 依赖配置
+├── cloud/                   # 云开发目录
+│   ├── functions/           # 云函数
+│   │   ├── login/           # 登录相关
+│   │   ├── room/            # 房间管理
+│   │   ├── games/           # 游戏逻辑
+│   │   │   ├── common/      # 通用游戏逻辑
+│   │   │   └── turtle-soup/ # 海龟汤游戏逻辑
+│   │   └── pay/             # 支付相关
+│   └── database/            # 数据库结构
+│       └── db_structure.json # 数据库结构定义
+└── README.md                # 项目说明
+```
+
+## 七、云开发接口设计
+
+### 游戏中心相关
+- getGameList: 获取游戏列表
+- getGameDetail: 获取游戏详情
+- favoriteGame: 收藏游戏
+- getRecommendedGames: 获取推荐游戏
+
+### 房间相关
+- createRoom: 创建房间
+- joinRoom: 加入房间
+- leaveRoom: 离开房间
+- transferHost: 转让主持人
+- getRoomInfo: 获取房间信息
+- updateRoomStatus: 更新房间状态
+- generateShareCode: 生成分享码和链接
+
+### 游戏互动相关
+- startGame: 开始游戏
+- endGame: 结束游戏
+- gameAction: 处理游戏内操作
+- getGameStatus: 获取游戏状态
+
+## 八、原型页面说明
+
+### 页面列表
+1. **游戏广场**：浏览全部游戏
+2. **游戏详情**：查看游戏介绍和规则
+3. **创建房间**：设置房间参数
+4. **加入房间**：输入房间号加入游戏
+5. **等待房间-主持人**：设置游戏主题和难度
+6. **等待房间-玩家**：等待游戏开始
+7. **海龟汤-主持人**：主持人控制游戏进程
+8. **海龟汤-玩家**：玩家解谜界面
+9. **游戏历史**：查看历史游戏记录
+10. **个人中心**：个人信息与设置
+
+### 使用说明
+1. 打开`index.html`查看所有原型页面
+2. 支持不同缩放级别和布局方式
+3. 各页面之间可通过链接互相跳转
+4. 所有原型页面均为静态HTML，可直接在浏览器中打开
+
+### 当前原型特点
+- 主持人等待房间专注于主题选择和游戏设置
+- 玩家和主持人有差异化的付费点
+- 所有付费内容采用按小时计费模式
+- 简化的页面流程和操作逻辑
+- 游戏历史记录支持断线重连
+
+---
+
+© 2023 LineFunQueue 排队互动游戏平台

lineforfun/components/nav-bar.html

@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>底部导航栏</title>
+    <!-- 自定义样式 -->
+    <link rel="stylesheet" href="../css/custom.css">
+    <!-- FontAwesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .nav-bar {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background-color: white;
+            border-top: 1px solid #eee;
+            display: flex;
+            justify-content: space-around;
+            padding: 10px 0;
+            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
+            z-index: 100;
+        }
+        
+        .nav-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            color: #888;
+            font-size: 10px;
+            transition: color 0.2s;
+        }
+        
+        .nav-item.active {
+            color: var(--color-primary);
+        }
+        
+        .nav-item i {
+            font-size: 22px;
+            margin-bottom: 2px;
+        }
+    </style>
+</head>
+<body>
+    <div class="nav-bar">
+        <a href="../pages/game-plaza.html" class="nav-item" id="nav-plaza">
+            <i class="fas fa-gamepad"></i>
+            <span>游戏广场</span>
+        </a>
+        <a href="../pages/room-join.html" class="nav-item" id="nav-room">
+            <i class="fas fa-door-open"></i>
+            <span>我的房间</span>
+        </a>
+        <a href="../pages/game-history.html" class="nav-item" id="nav-history">
+            <i class="fas fa-history"></i>
+            <span>游戏历史</span>
+        </a>
+        <a href="../pages/profile.html" class="nav-item" id="nav-profile">
+            <i class="fas fa-user"></i>
+            <span>我的</span>
+        </a>
+    </div>
+    
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            // 获取当前页面路径
+            let currentPath = window.parent.location.pathname;
+            
+            // 匹配路径并设置对应的导航项为活跃状态
+            if (currentPath.includes('game-plaza')) {
+                document.getElementById('nav-plaza').classList.add('active');
+            } else if (currentPath.includes('room-join') || currentPath.includes('room-waiting') || currentPath.includes('room-create')) {
+                document.getElementById('nav-room').classList.add('active');
+            } else if (currentPath.includes('game-history')) {
+                document.getElementById('nav-history').classList.add('active');
+            } else if (currentPath.includes('profile')) {
+                document.getElementById('nav-profile').classList.add('active');
+            } else if (currentPath.includes('game-turtle')) {
+                // 游戏页面不高亮导航栏中的任何选项
+            } else {
+                // 默认选中游戏广场
+                document.getElementById('nav-plaza').classList.add('active');
+            }
+        });
+    </script>
+</body>
+</html> 

lineforfun/components/status-bar.html

@@ -0,0 +1,16 @@
+<!-- iOS状态栏组件 -->
+<div class="ios-status-bar">
+    <div class="left"></div>
+    <div class="time">14:30</div>
+    <div class="right">
+        <div class="signal">
+            <i class="fas fa-signal"></i>
+        </div>
+        <div class="wifi">
+            <i class="fas fa-wifi"></i>
+        </div>
+        <div class="battery">
+            <i class="fas fa-battery-full"></i>
+        </div>
+    </div>
+</div> 

lineforfun/css/custom.css

@@ -0,0 +1,458 @@
+/* 自定义CSS样式 */
+:root {
+    /* 主色调 */
+    --color-primary: #4A6FE3; /* 活力蓝 */
+    --color-secondary-orange: #FF9500; /* 温暖橙 */
+    --color-secondary-green: #2DCE89; /* 轻松绿 */
+    
+    /* 中性色 */
+    --color-gray-100: #F8F9FA;
+    --color-gray-200: #E9ECEF;
+    --color-gray-300: #DEE2E6;
+    --color-gray-500: #6C757D;
+    --color-gray-800: #343A40;
+    
+    /* 功能色 */
+    --color-success: #28A745;
+    --color-danger: #DC3545;
+    --color-warning: #FFC107;
+    
+    /* 字体 */
+    --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+}
+
+/* 设备屏幕样式 */
+.iphone-frame {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    background-color: white;
+    display: flex;
+    flex-direction: column;
+}
+
+/* iOS状态栏样式 */
+.ios-status-bar {
+    height: 44px;
+    padding: 0 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 14px;
+    font-weight: 600;
+    background-color: white;
+    color: #000;
+    position: relative;
+}
+
+.ios-status-bar .time {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+.ios-status-bar .right {
+    display: flex;
+    align-items: center;
+}
+
+.ios-status-bar .right .signal,
+.ios-status-bar .right .wifi,
+.ios-status-bar .right .battery {
+    margin-left: 6px;
+}
+
+/* 底部Tab Bar样式 */
+.ios-tab-bar {
+    height: 83px;
+    background-color: rgba(255, 255, 255, 0.95);
+    border-top: 1px solid var(--color-gray-200);
+    display: flex;
+    justify-content: space-around;
+    padding-bottom: 25px; /* 适应底部安全区域 */
+}
+
+.ios-tab-bar .tab-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: 10px;
+    color: var(--color-gray-500);
+    width: 25%;
+    padding-top: 8px;
+}
+
+.ios-tab-bar .tab-item.active {
+    color: var(--color-primary);
+}
+
+.ios-tab-bar .tab-item i {
+    font-size: 22px;
+    margin-bottom: 2px;
+}
+
+/* 内容区域 */
+.app-content {
+    flex: 1;
+    overflow-y: auto;
+    background-color: #F8F9FA;
+    position: relative;
+}
+
+/* 卡片样式 */
+.app-card {
+    background-color: white;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    margin-bottom: 16px;
+    overflow: hidden;
+}
+
+/* 按钮样式 */
+.app-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 40px;
+    padding: 0 15px;
+    border-radius: 5px;
+    font-size: 16px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.app-button.primary {
+    background-color: var(--color-primary);
+    color: white;
+}
+
+.app-button.secondary {
+    background-color: var(--color-secondary-orange);
+    color: white;
+}
+
+.app-button.green {
+    background-color: var(--color-secondary-green);
+    color: white;
+}
+
+.app-button.outline {
+    border: 1px solid var(--color-primary);
+    color: var(--color-primary);
+    background-color: transparent;
+}
+
+/* 输入框样式 */
+.app-input {
+    height: 40px;
+    border-radius: 5px;
+    border: 1px solid var(--color-gray-300);
+    padding: 0 10px;
+    font-size: 14px;
+    width: 100%;
+    outline: none;
+}
+
+.app-input:focus {
+    border-color: var(--color-primary);
+}
+
+/* 导航栏样式 */
+.app-navbar {
+    height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    border-bottom: 1px solid var(--color-gray-200);
+    background-color: white;
+}
+
+.app-navbar .title {
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.app-navbar .left-button,
+.app-navbar .right-button {
+    position: absolute;
+    font-size: 16px;
+    display: flex;
+    align-items: center;
+}
+
+.app-navbar .left-button {
+    left: 16px;
+}
+
+.app-navbar .right-button {
+    right: 16px;
+}
+
+/* 标签导航 */
+.app-tabs {
+    display: flex;
+    border-bottom: 1px solid var(--color-gray-200);
+    background-color: white;
+}
+
+.app-tabs .tab {
+    flex: 1;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    color: var(--color-gray-500);
+    position: relative;
+}
+
+.app-tabs .tab.active {
+    color: var(--color-primary);
+    font-weight: 500;
+}
+
+.app-tabs .tab.active:after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 25%;
+    width: 50%;
+    height: 2px;
+    background-color: var(--color-primary);
+}
+
+/* 游戏卡片样式 */
+.game-card {
+    background-color: white;
+    border-radius: 10px;
+    overflow: hidden;
+    margin-bottom: 16px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+}
+
+.game-card-image {
+    width: 100%;
+    height: 140px;
+    background-size: cover;
+    background-position: center;
+}
+
+.game-card-content {
+    padding: 12px;
+}
+
+.game-card-title {
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 6px;
+}
+
+.game-card-info {
+    display: flex;
+    font-size: 12px;
+    color: var(--color-gray-500);
+}
+
+.game-card-badge {
+    font-size: 10px;
+    padding: 2px 6px;
+    border-radius: 3px;
+    margin-right: 6px;
+}
+
+/* 玩家头像样式 */
+.player-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    overflow: hidden;
+    background-color: var(--color-gray-200);
+}
+
+.player-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+/* 海龟汤游戏样式 */
+.turtle-soup-card {
+    background-color: var(--color-gray-100);
+    border-radius: 10px;
+    padding: 16px;
+    margin-bottom: 16px;
+}
+
+.turtle-soup-title {
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 12px;
+}
+
+.turtle-soup-content {
+    font-size: 14px;
+    line-height: 1.5;
+    margin-bottom: 16px;
+}
+
+.turtle-soup-clues {
+    margin-top: 16px;
+}
+
+.turtle-soup-clue {
+    background-color: white;
+    border-radius: 6px;
+    padding: 10px;
+    margin-bottom: 8px;
+    font-size: 13px;
+    border-left: 3px solid var(--color-primary);
+}
+
+/* 对话气泡样式 */
+.chat-container {
+    padding: 10px;
+}
+
+.chat-bubble {
+    max-width: 80%;
+    margin-bottom: 10px;
+    padding: 10px 12px;
+    border-radius: 18px;
+    position: relative;
+    font-size: 14px;
+    line-height: 1.4;
+}
+
+.chat-bubble.left {
+    border-bottom-left-radius: 4px;
+    background-color: var(--color-gray-200);
+    color: black;
+    align-self: flex-start;
+    margin-right: auto;
+}
+
+.chat-bubble.right {
+    border-bottom-right-radius: 4px;
+    background-color: var(--color-primary);
+    color: white;
+    align-self: flex-end;
+    margin-left: auto;
+}
+
+/* 房间代码样式 */
+.room-code {
+    font-size: 24px;
+    font-weight: 700;
+    letter-spacing: 5px;
+    text-align: center;
+    margin: 24px 0;
+    color: var(--color-primary);
+}
+
+/* 动画效果 */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+.fade-in {
+    animation: fadeIn 0.3s ease;
+}
+
+/* 付费功能卡片样式 */
+.premium-card {
+    background-color: white;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+    margin-bottom: 16px;
+    border: 2px solid var(--color-secondary-orange);
+}
+
+.premium-header {
+    background-color: var(--color-secondary-orange);
+    color: white;
+    padding: 10px;
+    font-weight: 600;
+    text-align: center;
+}
+
+.premium-content {
+    padding: 12px;
+}
+
+.premium-price {
+    font-size: 18px;
+    font-weight: 700;
+    color: var(--color-secondary-orange);
+    text-align: right;
+    margin-top: 8px;
+}
+
+/* 进度条样式 */
+.progress-bar {
+    height: 6px;
+    border-radius: 3px;
+    background-color: var(--color-gray-200);
+    overflow: hidden;
+    margin: 12px 0;
+}
+
+.progress-bar .progress {
+    height: 100%;
+    background-color: var(--color-primary);
+    transition: width 0.3s ease;
+}
+
+/* 通用间距 */
+.app-padding {
+    padding: 16px;
+}
+
+/* 全屏覆盖层 */
+.overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+/* 模态框样式 */
+.modal {
+    background-color: white;
+    border-radius: 15px;
+    width: 80%;
+    max-width: 320px;
+    padding: 20px;
+    animation: fadeIn 0.2s ease;
+}
+
+.modal-title {
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 12px;
+    text-align: center;
+}
+
+.modal-content {
+    margin-bottom: 16px;
+}
+
+.modal-actions {
+    display: flex;
+    justify-content: space-between;
+} 

lineforfun/index.html

@@ -0,0 +1,448 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LineFunQueue 原型预览</title>
+    <style>
+        :root {
+            --primary-color: #4d79ff;
+            --secondary-color: #f0f4ff;
+            --text-color: #2c3e50;
+            --background-color: #f5f7fa;
+            --border-color: #e2e8f0;
+        }
+        
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            margin: 0;
+            padding: 20px;
+            background-color: var(--background-color);
+            color: var(--text-color);
+            line-height: 1.5;
+        }
+        
+        .header {
+            text-align: center;
+            padding: 20px;
+            margin-bottom: 20px;
+            border-bottom: 1px solid var(--border-color);
+        }
+        
+        .header h1 {
+            margin: 0;
+            color: var(--primary-color);
+            font-size: 28px;
+        }
+        
+        .header p {
+            margin: 10px 0 0;
+            color: #64748b;
+            font-size: 16px;
+        }
+        
+        .controls {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+            padding: 10px 15px;
+            background-color: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+        }
+        
+        .scale-controls {
+            display: flex;
+            gap: 10px;
+        }
+        
+        .scale-btn {
+            background-color: white;
+            border: 1px solid var(--border-color);
+            color: var(--text-color);
+            padding: 5px 12px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 14px;
+        }
+        
+        .scale-btn.active {
+            background-color: var(--primary-color);
+            color: white;
+            border-color: var(--primary-color);
+        }
+        
+        .layout-controls {
+            display: flex;
+            gap: 10px;
+        }
+        
+        .layout-btn {
+            background-color: white;
+            border: 1px solid var(--border-color);
+            color: var(--text-color);
+            padding: 5px 12px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 14px;
+        }
+        
+        .layout-btn.active {
+            background-color: var(--primary-color);
+            color: white;
+            border-color: var(--primary-color);
+        }
+        
+        .scale-info {
+            font-size: 14px;
+            color: #64748b;
+            margin-left: 10px;
+        }
+        
+        .prototypes {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            gap: 20px;
+            margin-bottom: 30px;
+        }
+        
+        .prototypes.compact {
+            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+        }
+        
+        .prototype {
+            background-color: white;
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+            transition: transform 0.2s, box-shadow 0.2s;
+            position: relative;
+        }
+        
+        .prototype:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 8px 15px rgba(0,0,0,0.05);
+        }
+        
+        .prototype-title {
+            padding: 12px 15px;
+            font-weight: 600;
+            border-bottom: 1px solid var(--border-color);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        
+        .prototype-tags {
+            display: flex;
+            gap: 5px;
+        }
+        
+        .prototype-tag {
+            font-size: 11px;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-weight: normal;
+        }
+        
+        .tag-host {
+            background-color: #fff9db;
+            color: #f59f00;
+        }
+        
+        .tag-player {
+            background-color: #e3fafc;
+            color: #0c8599;
+        }
+        
+        .device-container {
+            position: relative;
+            padding: 10px;
+            margin: 0 auto;
+            width: 100%;
+            overflow: hidden;
+            box-sizing: border-box;
+        }
+        
+        .device {
+            position: relative;
+            margin: 0 auto;
+            width: 100%;
+            border-radius: 30px;
+            background: #111;
+            box-shadow: 0 0 0 2px #303030;
+            overflow: hidden;
+            padding-bottom: 210%;
+        }
+        
+        .device-screen {
+            position: absolute;
+            top: 5%;
+            left: 5%;
+            width: 90%;
+            height: 90%;
+            background: white;
+            overflow: hidden;
+            border-radius: 3px;
+        }
+        
+        .screen-iframe {
+            width: 100%;
+            height: 100%;
+            border: none;
+            overflow: hidden;
+            transform-origin: 0 0;
+            background: white;
+        }
+        
+        .footer {
+            text-align: center;
+            padding-top: 20px;
+            margin-top: 20px;
+            border-top: 1px solid var(--border-color);
+            color: #64748b;
+            font-size: 14px;
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <h1>LineFunQueue 原型预览</h1>
+        <p>排队互动游戏平台 UI 原型</p>
+    </div>
+    
+    <div class="controls">
+        <div class="scale-controls">
+            <button class="scale-btn" data-scale="0.5">小</button>
+            <button class="scale-btn active" data-scale="0.6">中</button>
+            <button class="scale-btn" data-scale="0.7">大</button>
+            <span class="scale-info">缩放: <span id="scaleValue">0.6</span></span>
+        </div>
+        <div class="layout-controls">
+            <button class="layout-btn active" data-layout="normal">标准布局</button>
+            <button class="layout-btn" data-layout="compact">紧凑布局</button>
+        </div>
+    </div>
+    
+    <div class="prototypes" id="prototypes">
+        <!-- 游戏广场 -->
+        <div class="prototype">
+            <div class="prototype-title">
+                游戏广场
+            </div>
+            <div class="device-container">
+                <div class="device">
+                    <div class="device-screen">
+                        <iframe src="pages/game-plaza.html" class="screen-iframe"></iframe>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 游戏详情 -->
+        <div class="prototype">
+            <div class="prototype-title">
+                游戏详情
+            </div>
+            <div class="device-container">
+                <div class="device">
+                    <div class="device-screen">
+                        <iframe src="pages/game-detail.html" class="screen-iframe"></iframe>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 创建房间 -->
+        <div class="prototype">
+            <div class="prototype-title">
+                创建房间
+            </div>
+            <div class="device-container">
+                <div class="device">
+                    <div class="device-screen">
+                        <iframe src="pages/room-create.html" class="screen-iframe"></iframe>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 加入房间 -->
+        <div class="prototype">
+            <div class="prototype-title">
+                加入房间
+            </div>
+            <div class="device-container">
+                <div class="device">
+                    <div class="device-screen">
+                        <iframe src="pages/room-join.html" class="screen-iframe"></iframe>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 等待房间 - 主持人 -->
+        <div class="prototype">
+            <div class="prototype-title">
+                等待房间
+                <div class="prototype-tags">
+                    <span class="prototype-tag tag-host">主持人</span>
+                </div>
+            </div>
+            <div class="device-container">
+                <div class="device">
+                    <div class="device-screen">
+                        <iframe src="pages/room-waiting.html?nocheck=1" class="screen-iframe"></iframe>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 等待房间 - 玩家 -->
+        <div class="prototype">
+            <div class="prototype-title">
+                等待房间
+                <div class="prototype-tags">
+                    <span class="prototype-tag tag-player">玩家</span>
+                </div>
+            </div>
+            <div class="device-container">
+                <div class="device">
+                    <div class="device-screen">
+                        <iframe src="pages/room-waiting-player.html" class="screen-iframe"></iframe>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 海龟汤 - 主持人视图 -->
+        <div class="prototype">
+            <div class="prototype-title">
+                海龟汤
+                <div class="prototype-tags">
+                    <span class="prototype-tag tag-host">主持人</span>
+                </div>
+            </div>
+            <div class="device-container">
+                <div class="device">
+                    <div class="device-screen">
+                        <iframe src="pages/game-turtle-host.html" class="screen-iframe"></iframe>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 海龟汤 - 玩家视图 -->
+        <div class="prototype">
+            <div class="prototype-title">
+                海龟汤
+                <div class="prototype-tags">
+                    <span class="prototype-tag tag-player">玩家</span>
+                </div>
+            </div>
+            <div class="device-container">
+                <div class="device">
+                    <div class="device-screen">
+                        <iframe src="pages/game-turtle-player.html" class="screen-iframe"></iframe>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 游戏历史 -->
+        <div class="prototype">
+            <div class="prototype-title">
+                游戏历史
+            </div>
+            <div class="device-container">
+                <div class="device">
+                    <div class="device-screen">
+                        <iframe src="pages/game-history.html" class="screen-iframe"></iframe>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 个人中心 -->
+        <div class="prototype">
+            <div class="prototype-title">
+                个人中心
+            </div>
+            <div class="device-container">
+                <div class="device">
+                    <div class="device-screen">
+                        <iframe src="pages/profile.html" class="screen-iframe"></iframe>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <div class="footer">
+        <p>© 2023 排队互动游戏平台 | 原型设计</p>
+    </div>
+    
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // 初始设置
+            const scaleValue = document.getElementById('scaleValue');
+            const iframes = document.querySelectorAll('.screen-iframe');
+            const prototypes = document.getElementById('prototypes');
+            
+            // 默认缩放值
+            let currentScale = 0.6;
+            
+            // 应用缩放到所有iframe
+            function applyScale(scale) {
+                iframes.forEach(iframe => {
+                    iframe.style.transform = `scale(${scale})`;
+                    iframe.style.width = `${(100 / scale)}%`;
+                    iframe.style.height = `${(100 / scale)}%`;
+                });
+                scaleValue.textContent = scale;
+                currentScale = scale;
+            }
+            
+            // 初始应用默认缩放
+            applyScale(currentScale);
+            
+            // 缩放按钮点击事件
+            document.querySelectorAll('.scale-btn').forEach(button => {
+                button.addEventListener('click', function() {
+                    const scale = parseFloat(this.getAttribute('data-scale'));
+                    
+                    // 更新活动按钮状态
+                    document.querySelectorAll('.scale-btn').forEach(btn => {
+                        btn.classList.remove('active');
+                    });
+                    this.classList.add('active');
+                    
+                    // 应用新缩放
+                    applyScale(scale);
+                });
+            });
+            
+            // 布局按钮点击事件
+            document.querySelectorAll('.layout-btn').forEach(button => {
+                button.addEventListener('click', function() {
+                    const layout = this.getAttribute('data-layout');
+                    
+                    // 更新活动按钮状态
+                    document.querySelectorAll('.layout-btn').forEach(btn => {
+                        btn.classList.remove('active');
+                    });
+                    this.classList.add('active');
+                    
+                    // 应用布局
+                    if (layout === 'compact') {
+                        prototypes.classList.add('compact');
+                    } else {
+                        prototypes.classList.remove('compact');
+                    }
+                });
+            });
+        });
+    </script>
+</body>
+</html> 

lineforfun/pages/game-detail.html

@@ -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>海龟汤 - 游戏详情</title>
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- FontAwesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- 自定义样式 -->
+    <link rel="stylesheet" href="../css/custom.css">
+    <style>
+        .app-content {
+            padding-bottom: 60px; /* 为底部导航栏留出空间 */
+        }
+    </style>
+</head>
+<body>
+    <div class="iphone-frame">
+        <!-- 引入状态栏 -->
+        <iframe src="../components/status-bar.html" frameborder="0" scrolling="no" style="width:100%; height:44px; overflow:hidden;"></iframe>
+        
+        <!-- 导航栏 -->
+        <div class="app-navbar">
+            <div class="left-button" onclick="history.back()">
+                <i class="fas fa-chevron-left mr-1"></i> 返回
+            </div>
+            <div class="title">游戏详情</div>
+            <div class="right-button">
+                <i class="far fa-heart"></i>
+            </div>
+        </div>
+        
+        <!-- 内容区域 -->
+        <div class="app-content">
+            <!-- 游戏封面 -->
+            <div class="relative">
+                <img src="https://images.unsplash.com/photo-1582845512747-e42001c95638?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&h=200&q=80" class="w-full h-48 object-cover" alt="海龟汤">
+                <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-4">
+                    <div class="text-white font-bold text-xl">海龟汤</div>
+                    <div class="text-white/80 text-xs mt-1 flex items-center">
+                        <span class="bg-blue-500 text-white px-2 py-0.5 rounded text-xs mr-2">解谜</span>
+                        <span class="mr-3"><i class="fas fa-user-friends mr-1"></i> 3-10人</span>
+                        <span><i class="far fa-clock mr-1"></i> 30-60分钟</span>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 游戏评分 -->
+            <div class="flex justify-between items-center p-3 bg-white">
+                <div class="flex flex-col">
+                    <div class="text-xl font-bold text-amber-500">4.8</div>
+                    <div class="flex text-amber-500 text-xs">
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star-half-alt"></i>
+                    </div>
+                    <div class="text-xs text-gray-500 mt-1">2,456人评价</div>
+                </div>
+                <div class="flex flex-col">
+                    <div class="text-xl font-bold text-primary">3.5万</div>
+                    <div class="text-xs text-gray-500">累计场次</div>
+                </div>
+                <div class="flex flex-col">
+                    <div class="text-xl font-bold text-green-500">92%</div>
+                    <div class="text-xs text-gray-500">完成率</div>
+                </div>
+            </div>
+            
+            <!-- 按钮区域 -->
+            <div class="p-3 bg-white mb-2 flex space-x-2">
+                <a href="room-create.html" class="app-button primary flex-1 flex justify-center items-center">
+                    <i class="fas fa-plus-circle mr-1"></i> 创建房间
+                </a>
+                <a href="room-join.html" class="app-button secondary flex-1 flex justify-center items-center">
+                    <i class="fas fa-sign-in-alt mr-1"></i> 加入房间
+                </a>
+            </div>
+            
+            <!-- 游戏介绍 -->
+            <div class="app-card mb-2">
+                <div class="p-3">
+                    <h3 class="font-bold text-base mb-2">游戏介绍</h3>
+                    <p class="text-sm text-gray-700 leading-relaxed">
+                        海龟汤是一种解谜类游戏，起源于日本，又名"乌龟汤"。游戏开始时，主持人会给出一个离奇古怪的情境（汤面），玩家需要通过提问获取更多线索，最终解开谜题找出真相（汤底）。游戏非常适合排队等待时进行，可以锻炼逻辑思维和推理能力。
+                    </p>
+                </div>
+            </div>
+            
+            <!-- 游戏玩法 -->
+            <div class="app-card mb-2">
+                <div class="p-3">
+                    <h3 class="font-bold text-base mb-2">游戏玩法</h3>
+                    <div class="space-y-2 text-sm text-gray-700">
+                        <div class="flex">
+                            <div class="flex-shrink-0 w-5 h-5 rounded-full bg-primary text-white flex items-center justify-center text-xs">1</div>
+                            <div class="ml-2">有一位玩家担任主持人，其他人担任猜谜者</div>
+                        </div>
+                        <div class="flex">
+                            <div class="flex-shrink-0 w-5 h-5 rounded-full bg-primary text-white flex items-center justify-center text-xs">2</div>
+                            <div class="ml-2">主持人选择一个谜题并公布"汤面"（谜面）</div>
+                        </div>
+                        <div class="flex">
+                            <div class="flex-shrink-0 w-5 h-5 rounded-full bg-primary text-white flex items-center justify-center text-xs">3</div>
+                            <div class="ml-2">猜谜者通过提出是/否问题来获取线索</div>
+                        </div>
+                        <div class="flex">
+                            <div class="flex-shrink-0 w-5 h-5 rounded-full bg-primary text-white flex items-center justify-center text-xs">4</div>
+                            <div class="ml-2">主持人可以适时揭示额外线索以推动游戏进行</div>
+                        </div>
+                        <div class="flex">
+                            <div class="flex-shrink-0 w-5 h-5 rounded-full bg-primary text-white flex items-center justify-center text-xs">5</div>
+                            <div class="ml-2">猜谜者成功解开谜题后，游戏结束</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 示例谜题 -->
+            <div class="app-card">
+                <div class="p-3">
+                    <h3 class="font-bold text-base mb-2">示例谜题</h3>
+                    <div class="bg-gray-100 rounded-lg p-3 text-sm">
+                        <div class="font-bold mb-1">汤面：</div>
+                        <div class="text-gray-700">一个男人走进一家餐厅，点了一份海龟汤。他尝了一口后，立刻走出餐厅自杀了。为什么？</div>
+                        <div class="mt-3 font-bold text-primary">提示：</div>
+                        <div class="text-gray-700">这个男人之前经历过一场可怕的海难...</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 引入底部导航栏 -->
+        <iframe src="../components/nav-bar.html" frameborder="0" scrolling="no" style="width:100%; height:50px; overflow:hidden; position:fixed; bottom:0;"></iframe>
+    </div>
+</body>
+</html> 

lineforfun/pages/game-history.html

@@ -0,0 +1,259 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>游戏历史 - LineFunQueue</title>
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- FontAwesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- 自定义样式 -->
+    <link rel="stylesheet" href="../css/custom.css">
+    <style>
+        .app-content {
+            padding-bottom: 60px; /* 为底部导航栏留出空间 */
+        }
+        
+        .room-card {
+            transition: all 0.2s ease;
+            border: 1px solid #eee;
+        }
+        
+        .room-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+        }
+        
+        .active-status {
+            background-color: #10b981;
+            color: white;
+        }
+        
+        .inactive-status {
+            background-color: #6b7280;
+            color: white;
+        }
+        
+        .completed-status {
+            background-color: #3b82f6;
+            color: white;
+        }
+    </style>
+</head>
+<body>
+    <div class="iphone-frame">
+        <!-- 引入状态栏 -->
+        <iframe src="../components/status-bar.html" frameborder="0" scrolling="no" style="width:100%; height:44px; overflow:hidden;"></iframe>
+        
+        <!-- 导航栏 -->
+        <div class="app-navbar">
+            <div class="title">游戏历史</div>
+            <div class="right-button text-sm">
+                <i class="fas fa-filter"></i>
+            </div>
+        </div>
+        
+        <!-- 内容区域 -->
+        <div class="app-content bg-gray-50">
+            <!-- 选项卡 -->
+            <div class="app-tabs flex text-sm sticky top-0 z-10 bg-white">
+                <div class="tab active">最近游戏</div>
+                <div class="tab">我创建的</div>
+                <div class="tab">我参与的</div>
+            </div>
+            
+            <!-- 最近房间 -->
+            <div class="p-3">
+                <h3 class="text-sm font-medium text-gray-700 mb-3">进行中的房间</h3>
+                
+                <div class="space-y-3">
+                    <!-- 进行中房间1 -->
+                    <div class="room-card rounded-lg bg-white overflow-hidden">
+                        <div class="p-3 flex items-center justify-between">
+                            <div class="flex items-center">
+                                <div class="w-12 h-12 rounded-lg overflow-hidden bg-gray-200 mr-3 flex-shrink-0">
+                                    <img src="https://images.unsplash.com/photo-1582845512747-e42001c95638?ixlib=rb-1.2.1&auto=format&fit=crop&w=48&h=48&q=80" class="w-full h-full object-cover" alt="海龟汤">
+                                </div>
+                                <div>
+                                    <div class="font-medium">欢乐海龟汤</div>
+                                    <div class="text-xs text-gray-500 mt-0.5">
+                                        <span class="mr-2">房间码: ABC123</span>
+                                        <span>10分钟前</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="flex flex-col items-end">
+                                <span class="text-xs px-1.5 py-0.5 rounded-full active-status mb-1">进行中</span>
+                                <button class="text-xs bg-primary text-white px-3 py-1 rounded-md">重新进入</button>
+                            </div>
+                        </div>
+                        <div class="px-3 py-2 bg-amber-50 border-t border-amber-100 flex justify-between items-center">
+                            <div class="text-xs text-amber-800">
+                                <i class="fas fa-users mr-1"></i> 5/10 人在线
+                            </div>
+                            <div class="text-xs text-amber-800">
+                                <i class="fas fa-user-shield mr-1"></i> 主持人: 小明
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- 等待中房间 -->
+                    <div class="room-card rounded-lg bg-white overflow-hidden">
+                        <div class="p-3 flex items-center justify-between">
+                            <div class="flex items-center">
+                                <div class="w-12 h-12 rounded-lg overflow-hidden bg-gray-200 mr-3 flex-shrink-0">
+                                    <img src="https://images.unsplash.com/photo-1553481187-be93c21490a9?ixlib=rb-1.2.1&auto=format&fit=crop&w=48&h=48&q=80" class="w-full h-full object-cover" alt="谁是卧底">
+                                </div>
+                                <div>
+                                    <div class="font-medium">趣味谁是卧底</div>
+                                    <div class="text-xs text-gray-500 mt-0.5">
+                                        <span class="mr-2">房间码: DEF456</span>
+                                        <span>30分钟前</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="flex flex-col items-end">
+                                <span class="text-xs px-1.5 py-0.5 rounded-full active-status mb-1">等待中</span>
+                                <button class="text-xs bg-primary text-white px-3 py-1 rounded-md">重新进入</button>
+                            </div>
+                        </div>
+                        <div class="px-3 py-2 bg-blue-50 border-t border-blue-100 flex justify-between items-center">
+                            <div class="text-xs text-blue-800">
+                                <i class="fas fa-users mr-1"></i> 3/8 人在线
+                            </div>
+                            <div class="text-xs text-blue-800">
+                                <i class="fas fa-user-shield mr-1"></i> 主持人: 小李
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 历史游戏 -->
+            <div class="p-3">
+                <h3 class="text-sm font-medium text-gray-700 mb-3">已结束的游戏</h3>
+                
+                <div class="space-y-3">
+                    <!-- 已结束游戏1 -->
+                    <div class="room-card rounded-lg bg-white overflow-hidden">
+                        <div class="p-3 flex items-center justify-between">
+                            <div class="flex items-center">
+                                <div class="w-12 h-12 rounded-lg overflow-hidden bg-gray-200 mr-3 flex-shrink-0">
+                                    <img src="https://images.unsplash.com/photo-1582845512747-e42001c95638?ixlib=rb-1.2.1&auto=format&fit=crop&w=48&h=48&q=80" class="w-full h-full object-cover" alt="海龟汤">
+                                </div>
+                                <div>
+                                    <div class="font-medium">神秘的手表</div>
+                                    <div class="text-xs text-gray-500 mt-0.5">
+                                        <span class="mr-2">海龟汤</span>
+                                        <span>2023-08-15 15:30</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="flex flex-col items-end">
+                                <span class="text-xs px-1.5 py-0.5 rounded-full completed-status mb-1">已解谜</span>
+                                <div class="text-xs text-gray-500">游戏时长: 45分钟</div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- 已结束游戏2 -->
+                    <div class="room-card rounded-lg bg-white overflow-hidden">
+                        <div class="p-3 flex items-center justify-between">
+                            <div class="flex items-center">
+                                <div class="w-12 h-12 rounded-lg overflow-hidden bg-gray-200 mr-3 flex-shrink-0">
+                                    <img src="https://images.unsplash.com/photo-1553481187-be93c21490a9?ixlib=rb-1.2.1&auto=format&fit=crop&w=48&h=48&q=80" class="w-full h-full object-cover" alt="谁是卧底">
+                                </div>
+                                <div>
+                                    <div class="font-medium">动物园奇案</div>
+                                    <div class="text-xs text-gray-500 mt-0.5">
+                                        <span class="mr-2">谁是卧底</span>
+                                        <span>2023-08-12 20:15</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="flex flex-col items-end">
+                                <span class="text-xs px-1.5 py-0.5 rounded-full inactive-status mb-1">未完成</span>
+                                <div class="text-xs text-gray-500">游戏时长: 35分钟</div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- 已结束游戏3 -->
+                    <div class="room-card rounded-lg bg-white overflow-hidden">
+                        <div class="p-3 flex items-center justify-between">
+                            <div class="flex items-center">
+                                <div class="w-12 h-12 rounded-lg overflow-hidden bg-gray-200 mr-3 flex-shrink-0">
+                                    <img src="https://images.unsplash.com/photo-1582845512747-e42001c95638?ixlib=rb-1.2.1&auto=format&fit=crop&w=48&h=48&q=80" class="w-full h-full object-cover" alt="海龟汤">
+                                </div>
+                                <div>
+                                    <div class="font-medium">迷路的青蛙</div>
+                                    <div class="text-xs text-gray-500 mt-0.5">
+                                        <span class="mr-2">海龟汤</span>
+                                        <span>2023-08-10 18:45</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="flex flex-col items-end">
+                                <span class="text-xs px-1.5 py-0.5 rounded-full completed-status mb-1">已解谜</span>
+                                <div class="text-xs text-gray-500">游戏时长: 28分钟</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 加载更多 -->
+            <div class="p-4 text-center">
+                <button class="text-sm text-gray-500 flex items-center justify-center mx-auto">
+                    <i class="fas fa-sync-alt mr-1"></i> 加载更多记录
+                </button>
+            </div>
+        </div>
+        
+        <!-- 引入底部导航栏 -->
+        <iframe src="../components/nav-bar.html" frameborder="0" scrolling="no" style="width:100%; height:50px; overflow:hidden; position:fixed; bottom:0;"></iframe>
+    </div>
+    
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            // 选项卡切换
+            const tabs = document.querySelectorAll('.app-tabs .tab');
+            tabs.forEach(tab => {
+                tab.addEventListener('click', function() {
+                    tabs.forEach(t => t.classList.remove('active'));
+                    this.classList.add('active');
+                    // 这里可以添加实际的筛选逻辑
+                });
+            });
+            
+            // 重新进入房间按钮点击事件
+            const rejoinButtons = document.querySelectorAll('.room-card button');
+            rejoinButtons.forEach(button => {
+                button.addEventListener('click', function() {
+                    const roomCard = this.closest('.room-card');
+                    const roomName = roomCard.querySelector('.font-medium').textContent;
+                    const roomCodeText = roomCard.querySelector('.text-xs.text-gray-500').textContent;
+                    const roomCode = roomCodeText.match(/房间码: (\w+)/)[1];
+                    
+                    // 保存房间信息到本地存储
+                    const roomData = {
+                        id: roomCode,
+                        name: roomName,
+                        gameType: roomName.includes('海龟汤') ? '海龟汤' : '谁是卧底',
+                        maxPlayers: 10,
+                        currentPlayers: 5,
+                        isHost: false,
+                        status: 'waiting'
+                    };
+                    
+                    localStorage.setItem('currentRoom', JSON.stringify(roomData));
+                    
+                    // 跳转到等待房间
+                    window.location.href = 'room-waiting-player.html';
+                });
+            });
+        });
+    </script>
+</body>
+</html> 

lineforfun/pages/game-plaza.html

@@ -0,0 +1,167 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>游戏广场 - LineFunQueue</title>
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- FontAwesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- 自定义样式 -->
+    <link rel="stylesheet" href="../css/custom.css">
+    <style>
+        .app-content {
+            padding-bottom: 60px; /* 为底部导航栏留出空间 */
+        }
+        
+        /* 游戏卡片更紧凑的样式 */
+        .game-card {
+            margin-bottom: 10px;
+        }
+        
+        .game-card .game-img {
+            height: 20px;
+        }
+        
+        .game-content {
+            padding: 8px;
+        }
+    </style>
+</head>
+<body>
+    <div class="iphone-frame">
+        <!-- 引入状态栏 -->
+        <iframe src="../components/status-bar.html" frameborder="0" scrolling="no" style="width:100%; height:44px; overflow:hidden;"></iframe>
+        
+        <!-- 导航栏 -->
+        <div class="app-navbar">
+            <div class="title">游戏广场</div>
+            <div class="right-button">
+                <i class="far fa-bell"></i>
+            </div>
+        </div>
+        
+        <!-- 内容区域 -->
+        <div class="app-content">
+            <!-- 搜索栏 -->
+            <div class="p-2 bg-white">
+                <div class="relative">
+                    <input type="text" class="app-input pl-10 py-1 text-sm" placeholder="搜索游戏...">
+                    <i class="fas fa-search absolute left-3 top-2 text-gray-400"></i>
+                </div>
+            </div>
+            
+            <!-- 分类导航 -->
+            <div class="app-tabs flex text-sm">
+                <div class="tab active">推荐</div>
+                <div class="tab">解谜</div>
+                <div class="tab">社交</div>
+                <div class="tab">冒险</div>
+            </div>
+            
+            <!-- 游戏列表 -->
+            <div class="p-2">
+                <h2 class="font-semibold mb-2 text-sm">热门游戏</h2>
+                
+                <!-- 海龟汤游戏卡片 -->
+                <a href="game-detail.html" class="bg-white rounded-lg overflow-hidden shadow-sm block mb-2 game-card">
+                    <div class="relative h-20">
+                        <img src="https://images.unsplash.com/photo-1582845512747-e42001c95638?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&h=100&q=80" class="w-full h-full object-cover" alt="海龟汤">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex flex-col justify-end p-2">
+                            <div class="text-white font-bold text-sm">海龟汤</div>
+                            <div class="flex items-center text-white/80 text-xs">
+                                <span class="mr-2"><i class="fas fa-users mr-1"></i>3-10人</span>
+                                <span><i class="fas fa-clock mr-1"></i>30-60分钟</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="p-2 game-content">
+                        <div class="flex items-center justify-between">
+                            <span class="bg-blue-100 text-blue-800 text-xs px-2 py-0.5 rounded">解谜</span>
+                            <div class="text-amber-400 text-xs flex items-center">
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star-half-alt"></i>
+                                <span class="text-gray-500 ml-1">4.8</span>
+                            </div>
+                        </div>
+                    </div>
+                </a>
+                
+                <!-- 你画我猜游戏卡片 -->
+                <a href="#" class="bg-white rounded-lg overflow-hidden shadow-sm block mb-2 game-card">
+                    <div class="relative h-20">
+                        <img src="https://images.unsplash.com/photo-1555212697-194d092e3b8f?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&h=100&q=80" class="w-full h-full object-cover" alt="你画我猜">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex flex-col justify-end p-2">
+                            <div class="text-white font-bold text-sm">你画我猜</div>
+                            <div class="flex items-center text-white/80 text-xs">
+                                <span class="mr-2"><i class="fas fa-users mr-1"></i>2-8人</span>
+                                <span><i class="fas fa-clock mr-1"></i>15-30分钟</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="p-2 game-content">
+                        <div class="flex items-center justify-between">
+                            <span class="bg-green-100 text-green-800 text-xs px-2 py-0.5 rounded">社交</span>
+                            <div class="text-amber-400 text-xs flex items-center">
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="far fa-star"></i>
+                                <span class="text-gray-500 ml-1">4.2</span>
+                            </div>
+                        </div>
+                    </div>
+                </a>
+                
+                <!-- 谁是卧底游戏卡片 -->
+                <a href="#" class="bg-white rounded-lg overflow-hidden shadow-sm block mb-2 game-card">
+                    <div class="relative h-20">
+                        <img src="https://images.unsplash.com/photo-1529156069898-49953e39b3ac?ixlib=rb-1.2.1&auto=format&fit=crop&w=400&h=100&q=80" class="w-full h-full object-cover" alt="谁是卧底">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex flex-col justify-end p-2">
+                            <div class="text-white font-bold text-sm">谁是卧底</div>
+                            <div class="flex items-center text-white/80 text-xs">
+                                <span class="mr-2"><i class="fas fa-users mr-1"></i>5-10人</span>
+                                <span><i class="fas fa-clock mr-1"></i>20-40分钟</span>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="p-2 game-content">
+                        <div class="flex items-center justify-between">
+                            <span class="bg-orange-100 text-orange-800 text-xs px-2 py-0.5 rounded">推理</span>
+                            <div class="text-amber-400 text-xs flex items-center">
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <i class="fas fa-star"></i>
+                                <span class="text-gray-500 ml-1">4.9</span>
+                            </div>
+                        </div>
+                    </div>
+                </a>
+            </div>
+        </div>
+        
+        <!-- 引入底部导航栏 -->
+        <iframe src="../components/nav-bar.html" frameborder="0" scrolling="no" style="width:100%; height:50px; overflow:hidden; position:fixed; bottom:0;"></iframe>
+    </div>
+    
+    <script>
+        // 为了演示，添加活跃状态
+        document.addEventListener("DOMContentLoaded", function() {
+            // 活跃第一个标签
+            document.querySelectorAll('.app-tabs .tab').forEach((tab, index) => {
+                tab.addEventListener('click', function() {
+                    document.querySelectorAll('.app-tabs .tab').forEach(t => t.classList.remove('active'));
+                    this.classList.add('active');
+                });
+            });
+        });
+    </script>
+</body>
+</html> 

lineforfun/pages/game-turtle-host.html

@@ -0,0 +1,384 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>海龟汤 - 主持人视图</title>
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- FontAwesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- 自定义样式 -->
+    <link rel="stylesheet" href="../css/custom.css">
+    <style>
+        .app-content {
+            padding-bottom: 60px; /* 为底部导航栏留出空间 */
+        }
+        
+        .host-theme {
+            --host-primary: #FFA000;
+            --host-secondary: #FFF8E1;
+            --host-accent: #FF6F00;
+        }
+        
+        .host-header {
+            background-color: var(--host-primary);
+            color: white;
+        }
+        
+        .chat-container {
+            max-height: 250px;
+            overflow-y: auto;
+        }
+        
+        .turtle-soup-clue {
+            padding: 10px;
+            border-radius: 6px;
+            background-color: white;
+            margin-bottom: 8px;
+            border-left: 3px solid #4d79ff;
+        }
+        
+        .turtle-soup-clue.unrevealed {
+            background-color: #f3f4f6;
+            border-left: 3px solid #9ca3af;
+        }
+        
+        .host-button {
+            background-color: var(--host-primary);
+            color: white;
+        }
+        
+        .host-button:hover {
+            background-color: var(--host-accent);
+        }
+        
+        .host-badge {
+            background-color: var(--host-primary);
+            color: white;
+            padding: 2px 8px;
+            border-radius: 9999px;
+            font-size: 0.75rem;
+        }
+        
+        .solution-card {
+            background-color: var(--host-secondary);
+            border: 1px solid var(--host-primary);
+            border-radius: 8px;
+            padding: 12px;
+            margin-bottom: 16px;
+        }
+        
+        .solution-header {
+            color: var(--host-primary);
+            font-weight: 600;
+            font-size: 0.875rem;
+            margin-bottom: 4px;
+            display: flex;
+            align-items: center;
+        }
+        
+        .solution-header i {
+            margin-right: 6px;
+        }
+    </style>
+</head>
+<body class="host-theme">
+    <div class="iphone-frame">
+        <!-- 引入状态栏 -->
+        <iframe src="../components/status-bar.html" frameborder="0" scrolling="no" style="width:100%; height:44px; overflow:hidden;"></iframe>
+        
+        <!-- 导航栏 -->
+        <div class="app-navbar host-header">
+            <div class="title">海龟汤 - 主持人</div>
+            <div class="right-button text-sm">
+                <span class="host-badge">主持人</span>
+            </div>
+        </div>
+        
+        <!-- 内容区域 -->
+        <div class="app-content">
+            <!-- 游戏状态 -->
+            <div class="bg-amber-100 p-3 text-center">
+                <div class="flex items-center justify-center">
+                    <i class="fas fa-hourglass-half text-amber-500 mr-2"></i>
+                    <span class="text-amber-700 font-medium">游戏进行中</span>
+                </div>
+                <div class="text-xs text-amber-700 mt-1">已进行: 12分钟 · 主持人模式</div>
+            </div>
+            
+            <!-- 谜题信息 -->
+            <div class="m-3">
+                <div class="flex items-center justify-between mb-2">
+                    <div class="font-bold text-lg">神秘的手表</div>
+                    <div class="text-xs text-amber-500">难度: 中等</div>
+                </div>
+                
+                <!-- 汤面（玩家可见） -->
+                <div class="p-3 bg-white rounded-md mb-3 border-l-4 border-primary shadow-sm">
+                    <div class="text-xs text-primary font-medium mb-1 flex items-center">
+                        <i class="fas fa-eye mr-1"></i> 汤面（玩家可见）
+                    </div>
+                    <p class="text-sm">
+                        一个男人收到了一块神秘的手表，戴上后就再也无法取下来。一周后，他自杀了。为什么？
+                    </p>
+                </div>
+                
+                <!-- 汤底（只有主持人可见） -->
+                <div class="solution-card">
+                    <div class="solution-header">
+                        <i class="fas fa-lock"></i> 汤底（仅主持人可见）
+                    </div>
+                    <p class="text-sm">
+                        这个手表可以预知未来24小时内将发生的事情。男人看到了自己将在一周后死亡，尝试了各种方法改变命运但都失败了。最终，由于无法承受这种恐惧和绝望，他选择了自杀。这反而实现了手表的预言。
+                    </p>
+                </div>
+            </div>
+            
+            <!-- 关键线索列表 -->
+            <div class="m-3">
+                <div class="flex justify-between items-center mb-2">
+                    <h3 class="font-medium flex items-center">
+                        <i class="fas fa-key text-amber-500 mr-1"></i> 关键线索
+                    </h3>
+                    <div class="text-xs px-2 py-0.5 bg-amber-100 text-amber-700 rounded-full">2/5已揭示</div>
+                </div>
+                
+                <div class="space-y-2">
+                    <!-- 已揭示线索 -->
+                    <div class="turtle-soup-clue">
+                        <div class="flex justify-between items-center">
+                            <span class="text-xs text-primary font-medium">线索1（已揭示）</span>
+                            <span class="text-xs text-gray-500">12:05揭示</span>
+                        </div>
+                        <p class="text-sm mt-1">这块手表有特殊功能，不是普通手表。</p>
+                    </div>
+                    
+                    <div class="turtle-soup-clue">
+                        <div class="flex justify-between items-center">
+                            <span class="text-xs text-primary font-medium">线索2（已揭示）</span>
+                            <span class="text-xs text-gray-500">12:08揭示</span>
+                        </div>
+                        <p class="text-sm mt-1">手表可以显示未来将发生的事情。</p>
+                    </div>
+                    
+                    <!-- 未揭示线索 -->
+                    <div class="turtle-soup-clue unrevealed">
+                        <div class="flex justify-between items-center">
+                            <span class="text-xs text-gray-500 font-medium">线索3（未揭示）</span>
+                            <button class="text-xs text-amber-600 font-medium">揭示</button>
+                        </div>
+                        <p class="text-sm mt-1 text-gray-400">男人尝试了多种方法阻止预言的实现，但都失败了。</p>
+                    </div>
+                    
+                    <div class="turtle-soup-clue unrevealed">
+                        <div class="flex justify-between items-center">
+                            <span class="text-xs text-gray-500 font-medium">线索4（未揭示）</span>
+                            <button class="text-xs text-amber-600 font-medium">揭示</button>
+                        </div>
+                        <p class="text-sm mt-1 text-gray-400">手表预测的是他的死亡，但没有预测到死亡的具体方式。</p>
+                    </div>
+                    
+                    <div class="turtle-soup-clue unrevealed">
+                        <div class="flex justify-between items-center">
+                            <span class="text-xs text-gray-500 font-medium">线索5（未揭示）</span>
+                            <button class="text-xs text-amber-600 font-medium">揭示</button>
+                        </div>
+                        <p class="text-sm mt-1 text-gray-400">手表的预言总是会实现，但方式可能有所不同。</p>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 问答互动区域 -->
+            <div class="p-3 bg-white border-t border-gray-200">
+                <h3 class="font-medium mb-3 flex items-center">
+                    <i class="fas fa-comments text-amber-500 mr-1"></i> 玩家问题
+                </h3>
+                
+                <div class="chat-container flex flex-col">
+                    <!-- 玩家问题1 -->
+                    <div class="chat-bubble left">
+                        <div class="text-xs text-gray-500 mb-1">小红 · 2分钟前</div>
+                        手表是有特殊功能的吗？
+                    </div>
+                    
+                    <!-- 主持人回答1 -->
+                    <div class="chat-bubble right bg-amber-50 border-amber-200">
+                        <div class="text-xs text-amber-500 mb-1">我 (主持人) · 2分钟前</div>
+                        是的
+                    </div>
+                    
+                    <!-- 玩家问题2 -->
+                    <div class="chat-bubble left">
+                        <div class="text-xs text-gray-500 mb-1">小明 · 1分钟前</div>
+                        这块手表能预测未来吗？
+                    </div>
+                    
+                    <!-- 主持人回答2 -->
+                    <div class="chat-bubble right bg-amber-50 border-amber-200">
+                        <div class="text-xs text-amber-500 mb-1">我 (主持人) · 1分钟前</div>
+                        是的
+                    </div>
+                    
+                    <!-- 玩家问题3 -->
+                    <div class="chat-bubble left">
+                        <div class="text-xs text-gray-500 mb-1">小红 · 刚刚</div>
+                        手表预测了他的死亡？
+                    </div>
+                </div>
+                
+                <!-- 快速回答按钮 -->
+                <div class="flex flex-wrap gap-2 mt-3">
+                    <button class="bg-amber-100 text-amber-700 text-sm py-1 px-3 rounded-full">是的</button>
+                    <button class="bg-gray-100 text-gray-700 text-sm py-1 px-3 rounded-full">不是</button>
+                    <button class="bg-gray-100 text-gray-700 text-sm py-1 px-3 rounded-full">相关</button>
+                    <button class="bg-gray-100 text-gray-700 text-sm py-1 px-3 rounded-full">不相关</button>
+                </div>
+                
+                <!-- 回答输入框 -->
+                <div class="mt-3 flex">
+                    <input type="text" class="app-input flex-1" placeholder="输入回答...">
+                    <button class="bg-amber-500 text-white ml-2 px-3 py-2 rounded-md">
+                        <i class="fas fa-paper-plane"></i>
+                    </button>
+                </div>
+            </div>
+            
+            <!-- 游戏控制按钮 -->
+            <div class="p-3 sticky bottom-0 bg-white border-t border-gray-200">
+                <div class="flex items-center justify-between mb-2">
+                    <button class="bg-amber-500 text-white rounded-md text-sm px-3 py-1.5 flex items-center">
+                        <i class="fas fa-lightbulb mr-1"></i> 揭示线索
+                    </button>
+                    <button class="bg-amber-500 text-white rounded-md text-sm px-3 py-1.5 flex items-center">
+                        <i class="fas fa-trophy mr-1"></i> 结束游戏
+                    </button>
+                </div>
+                
+                <!-- 道具购买区 -->
+                <div class="bg-blue-50 rounded-lg p-2 mb-2 border border-blue-200">
+                    <div class="flex justify-between items-center">
+                        <div class="flex items-center">
+                            <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2">
+                                <i class="fas fa-palette text-blue-500"></i>
+                            </div>
+                            <div>
+                                <div class="text-sm font-medium">游戏主题</div>
+                                <div class="text-xs text-gray-500">解锁多种主题内容</div>
+                            </div>
+                        </div>
+                        <button class="bg-blue-500 text-white text-xs py-1 px-2 rounded-md" id="openPropsBtn">
+                            更换主题
+                        </button>
+                    </div>
+                </div>
+                
+                <!-- 道具弹窗 -->
+                <div id="propsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
+                    <div class="bg-white w-11/12 rounded-lg max-h-[80vh] overflow-y-auto">
+                        <div class="p-3 border-b border-gray-200 flex justify-between items-center sticky top-0 bg-white">
+                            <h3 class="font-bold">游戏主题</h3>
+                            <button id="closePropsBtn" class="text-gray-500">
+                                <i class="fas fa-times"></i>
+                            </button>
+                        </div>
+                        
+                        <div class="p-3">
+                            <div class="space-y-3">
+                                <!-- 主题包 -->
+                                <div class="flex items-center p-2 border border-gray-200 rounded-md bg-amber-50 border-amber-200">
+                                    <div class="flex-shrink-0 w-10 h-10 bg-amber-100 rounded-md flex items-center justify-center mr-3">
+                                        <i class="fas fa-bookmark text-amber-500"></i>
+                                    </div>
+                                    <div class="flex-1">
+                                        <div class="flex justify-between">
+                                            <div class="text-sm font-medium">经典解谜</div>
+                                            <div class="text-xs text-amber-600">免费</div>
+                                        </div>
+                                        <div class="text-xs text-gray-500">基础主题，包含多种经典谜题</div>
+                                    </div>
+                                    <div class="text-xs bg-amber-500 text-white py-1 px-2 rounded-md">已解锁</div>
+                                </div>
+                                
+                                <div class="flex items-center p-2 border border-gray-200 rounded-md bg-white relative">
+                                    <div class="flex-shrink-0 w-10 h-10 bg-amber-100 rounded-md flex items-center justify-center mr-3">
+                                        <i class="fas fa-ticket-alt text-amber-500"></i>
+                                    </div>
+                                    <div class="flex-1">
+                                        <div class="flex justify-between">
+                                            <div class="text-sm font-medium">环球影城</div>
+                                            <div class="text-xs text-amber-600">20元/小时</div>
+                                        </div>
+                                        <div class="text-xs text-gray-500">包含多个环球影城主题谜题</div>
+                                    </div>
+                                    <button class="text-xs bg-amber-500 text-white py-1 px-2 rounded-md">解锁</button>
+                                    <div class="absolute -top-1 -right-1 bg-red-500 text-white text-xs px-1.5 py-0.5 rounded-full">新</div>
+                                </div>
+                                
+                                <div class="flex items-center p-2 border border-gray-200 rounded-md bg-white">
+                                    <div class="flex-shrink-0 w-10 h-10 bg-amber-100 rounded-md flex items-center justify-center mr-3">
+                                        <i class="fas fa-hat-wizard text-amber-500"></i>
+                                    </div>
+                                    <div class="flex-1">
+                                        <div class="flex justify-between">
+                                            <div class="text-sm font-medium">迪士尼奇幻</div>
+                                            <div class="text-xs text-amber-600">15元/小时</div>
+                                        </div>
+                                        <div class="text-xs text-gray-500">迪士尼主题相关谜题</div>
+                                    </div>
+                                    <button class="text-xs bg-amber-500 text-white py-1 px-2 rounded-md">解锁</button>
+                                </div>
+                                
+                                <div class="flex items-center p-2 border border-gray-200 rounded-md bg-white">
+                                    <div class="flex-shrink-0 w-10 h-10 bg-amber-100 rounded-md flex items-center justify-center mr-3">
+                                        <i class="fas fa-dragon text-amber-500"></i>
+                                    </div>
+                                    <div class="flex-1">
+                                        <div class="flex justify-between">
+                                            <div class="text-sm font-medium">奇幻冒险</div>
+                                            <div class="text-xs text-amber-600">12元/小时</div>
+                                        </div>
+                                        <div class="text-xs text-gray-500">奇幻世界主题谜题</div>
+                                    </div>
+                                    <button class="text-xs bg-amber-500 text-white py-1 px-2 rounded-md">解锁</button>
+                                </div>
+                                
+                                <div class="mt-3 py-2 text-center border-t border-gray-200">
+                                    <div class="text-xs text-gray-500">主题随时可切换，计费按使用时长计算</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 引入底部导航栏 -->
+        <iframe src="../components/nav-bar.html" frameborder="0" scrolling="no" style="width:100%; height:50px; overflow:hidden; position:fixed; bottom:0;"></iframe>
+    </div>
+    
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            // 道具弹窗控制
+            const openPropsBtn = document.getElementById('openPropsBtn');
+            const closePropsBtn = document.getElementById('closePropsBtn');
+            const propsModal = document.getElementById('propsModal');
+            
+            openPropsBtn.addEventListener('click', function() {
+                propsModal.classList.remove('hidden');
+            });
+            
+            closePropsBtn.addEventListener('click', function() {
+                propsModal.classList.add('hidden');
+            });
+            
+            // 点击弹窗外部关闭
+            propsModal.addEventListener('click', function(e) {
+                if (e.target === propsModal) {
+                    propsModal.classList.add('hidden');
+                }
+            });
+        });
+    </script>
+</body>
+</html> 

lineforfun/pages/game-turtle-player.html

@@ -0,0 +1,384 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>海龟汤 - 玩家视图</title>
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- FontAwesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- 自定义样式 -->
+    <link rel="stylesheet" href="../css/custom.css">
+    <style>
+        .app-content {
+            padding-bottom: 60px; /* 为底部导航栏留出空间 */
+        }
+        
+        .player-theme {
+            --player-primary: #0EA5E9;
+            --player-secondary: #EFF6FF;
+            --player-accent: #0284C7;
+        }
+        
+        .player-header {
+            background-color: var(--player-primary);
+            color: white;
+        }
+        
+        .chat-container {
+            max-height: 250px;
+            overflow-y: auto;
+        }
+        
+        .turtle-soup-clue {
+            padding: 10px;
+            border-radius: 6px;
+            background-color: white;
+            margin-bottom: 8px;
+            border-left: 3px solid var(--player-primary);
+        }
+        
+        .player-badge {
+            background-color: var(--player-primary);
+            color: white;
+            padding: 2px 8px;
+            border-radius: 9999px;
+            font-size: 0.75rem;
+        }
+        
+        .progress-bar {
+            height: 6px;
+            width: 100%;
+            background-color: #e2e8f0;
+            border-radius: 999px;
+            overflow: hidden;
+        }
+        
+        .progress {
+            height: 100%;
+            background-color: var(--player-primary);
+            border-radius: 999px;
+            transition: width 0.5s ease;
+        }
+        
+        .question-btn {
+            background-color: #f1f5f9;
+            border-radius: 999px;
+            padding: 4px 12px;
+            font-size: 0.875rem;
+            color: #334155;
+            border: none;
+            cursor: pointer;
+            white-space: nowrap;
+            transition: all 0.2s ease;
+        }
+        
+        .question-btn:hover {
+            background-color: #e2e8f0;
+        }
+        
+        .puzzle-card {
+            background-color: var(--player-secondary);
+            border-radius: 8px;
+            padding: 16px;
+            margin-bottom: 16px;
+            border: 1px solid rgba(14, 165, 233, 0.2);
+        }
+        
+        .puzzle-title {
+            font-weight: 600;
+            color: var(--player-primary);
+            margin-bottom: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+    </style>
+</head>
+<body class="player-theme">
+    <div class="iphone-frame">
+        <!-- 引入状态栏 -->
+        <iframe src="../components/status-bar.html" frameborder="0" scrolling="no" style="width:100%; height:44px; overflow:hidden;"></iframe>
+        
+        <!-- 导航栏 -->
+        <div class="app-navbar player-header">
+            <div class="title">海龟汤 - 玩家</div>
+            <div class="right-button text-sm">
+                <span class="player-badge">玩家</span>
+            </div>
+        </div>
+        
+        <!-- 内容区域 -->
+        <div class="app-content">
+            <!-- 游戏状态 -->
+            <div class="bg-sky-100 p-3 text-center">
+                <div class="flex items-center justify-center">
+                    <i class="fas fa-hourglass-half text-sky-500 mr-2"></i>
+                    <span class="text-sky-700 font-medium">游戏进行中</span>
+                </div>
+                <div class="text-xs text-sky-700 mt-1">已进行: 12分钟 · 玩家模式</div>
+            </div>
+            
+            <!-- 谜题信息 -->
+            <div class="m-3">
+                <div class="puzzle-card">
+                    <div class="puzzle-title">
+                        <div class="flex items-center">
+                            <i class="fas fa-puzzle-piece mr-2"></i>
+                            神秘的手表
+                        </div>
+                        <div class="text-xs px-2 py-0.5 bg-sky-100 text-sky-600 rounded-full">难度: 中等</div>
+                    </div>
+                    
+                    <!-- 汤面（玩家可见） -->
+                    <div class="p-3 bg-white rounded-md mb-3 shadow-sm">
+                        <p class="text-sm">
+                            一个男人收到了一块神秘的手表，戴上后就再也无法取下来。一周后，他自杀了。为什么？
+                        </p>
+                    </div>
+                    
+                    <!-- 游戏进度 -->
+                    <div class="mt-3">
+                        <div class="flex justify-between text-xs text-gray-500 mb-1">
+                            <span>解谜进度</span>
+                            <span>40%</span>
+                        </div>
+                        <div class="progress-bar">
+                            <div class="progress" style="width: 40%"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 已揭示线索列表 -->
+            <div class="m-3">
+                <div class="flex justify-between items-center mb-2">
+                    <h3 class="font-medium flex items-center">
+                        <i class="fas fa-key text-sky-500 mr-1"></i> 已揭示线索
+                    </h3>
+                    <div class="text-xs px-2 py-0.5 bg-sky-100 text-sky-600 rounded-full">2/5已揭示</div>
+                </div>
+                
+                <div class="space-y-2">
+                    <!-- 线索1 -->
+                    <div class="turtle-soup-clue">
+                        <div class="flex justify-between items-center">
+                            <span class="text-xs text-sky-600 font-medium">线索1</span>
+                            <span class="text-xs text-gray-500">12:05揭示</span>
+                        </div>
+                        <p class="text-sm mt-1">这块手表有特殊功能，不是普通手表。</p>
+                    </div>
+                    
+                    <!-- 线索2 -->
+                    <div class="turtle-soup-clue">
+                        <div class="flex justify-between items-center">
+                            <span class="text-xs text-sky-600 font-medium">线索2</span>
+                            <span class="text-xs text-gray-500">12:08揭示</span>
+                        </div>
+                        <p class="text-sm mt-1">手表可以显示未来将发生的事情。</p>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 问答互动区域 -->
+            <div class="p-3 bg-white border-t border-gray-200">
+                <h3 class="font-medium mb-2 flex items-center">
+                    <i class="fas fa-comments text-sky-500 mr-1"></i> 问答区
+                </h3>
+                
+                <div class="chat-container flex flex-col">
+                    <!-- 玩家问题1（不是我） -->
+                    <div class="chat-bubble left">
+                        <div class="text-xs text-gray-500 mb-1">小红</div>
+                        手表是有特殊功能的吗？
+                    </div>
+                    
+                    <!-- 主持人回答1 -->
+                    <div class="chat-bubble left bg-amber-50">
+                        <div class="text-xs text-amber-500 mb-1">主持人</div>
+                        是的
+                    </div>
+                    
+                    <!-- 玩家问题2（不是我） -->
+                    <div class="chat-bubble left">
+                        <div class="text-xs text-gray-500 mb-1">小明</div>
+                        这块手表能预测未来吗？
+                    </div>
+                    
+                    <!-- 主持人回答2 -->
+                    <div class="chat-bubble left bg-amber-50">
+                        <div class="text-xs text-amber-500 mb-1">主持人</div>
+                        是的
+                    </div>
+                    
+                    <!-- 玩家问题3（不是我） -->
+                    <div class="chat-bubble left">
+                        <div class="text-xs text-gray-500 mb-1">小红</div>
+                        手表预测了他的死亡？
+                    </div>
+                    
+                    <!-- 我的问题 -->
+                    <div class="chat-bubble right bg-sky-50 border-sky-200">
+                        <div class="text-xs text-sky-500 mb-1">我</div>
+                        他是因为看到了什么预言而自杀的吗？
+                    </div>
+                </div>
+                
+                <!-- 快速提问按钮 -->
+                <div class="flex flex-wrap gap-2 mt-3">
+                    <button class="question-btn">手表是被诅咒的吗？</button>
+                    <button class="question-btn">他尝试取下手表吗？</button>
+                    <button class="question-btn">预言是关于他自己的吗？</button>
+                </div>
+                
+                <!-- 提问输入框 -->
+                <div class="mt-3 flex">
+                    <input type="text" class="app-input flex-1" placeholder="输入问题...">
+                    <button class="bg-sky-500 text-white ml-2 px-3 py-2 rounded-md">
+                        <i class="fas fa-paper-plane"></i>
+                    </button>
+                </div>
+            </div>
+            
+            <!-- 游戏按钮 -->
+            <div class="p-3 sticky bottom-0 bg-white border-t border-gray-200">
+                <div class="flex items-center justify-between mb-2">
+                    <button class="bg-sky-500 text-white rounded-md text-sm px-3 py-1.5 flex items-center">
+                        <i class="fas fa-question-circle mr-1"></i> 提问
+                    </button>
+                    <button class="bg-green-500 text-white rounded-md text-sm px-3 py-1.5 flex items-center">
+                        <i class="fas fa-lightbulb mr-1"></i> 猜测
+                    </button>
+                </div>
+                
+                <!-- 道具购买区 -->
+                <div class="bg-blue-50 rounded-lg p-2 mb-2 border border-blue-200">
+                    <div class="flex justify-between items-center">
+                        <div class="flex items-center">
+                            <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-2">
+                                <i class="fas fa-lightbulb text-blue-500"></i>
+                            </div>
+                            <div>
+                                <div class="text-sm font-medium">解谜助手</div>
+                                <div class="text-xs text-gray-500">提高解谜效率</div>
+                            </div>
+                        </div>
+                        <button class="bg-blue-500 text-white text-xs py-1 px-2 rounded-md" id="openPropsBtn">
+                            解锁道具
+                        </button>
+                    </div>
+                </div>
+                
+                <!-- 道具弹窗 -->
+                <div id="propsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50">
+                    <div class="bg-white w-11/12 rounded-lg max-h-[80vh] overflow-y-auto">
+                        <div class="p-3 border-b border-gray-200 flex justify-between items-center sticky top-0 bg-white">
+                            <h3 class="font-bold">解谜道具</h3>
+                            <button id="closePropsBtn" class="text-gray-500">
+                                <i class="fas fa-times"></i>
+                            </button>
+                        </div>
+                        
+                        <div class="p-3">
+                            <div class="space-y-3">
+                                <!-- 道具1 -->
+                                <div class="flex items-center p-2 border border-gray-200 rounded-md bg-blue-50">
+                                    <div class="flex-shrink-0 w-10 h-10 bg-blue-100 rounded-md flex items-center justify-center mr-3">
+                                        <i class="fas fa-lightbulb text-blue-500"></i>
+                                    </div>
+                                    <div class="flex-1">
+                                        <div class="flex justify-between">
+                                            <div class="text-sm font-medium">解题助手</div>
+                                            <div class="text-xs text-blue-600">8元/小时</div>
+                                        </div>
+                                        <div class="text-xs text-gray-500">智能分析问题并提供有效提示</div>
+                                    </div>
+                                    <button class="text-xs bg-blue-500 text-white py-1 px-2 rounded-md">解锁</button>
+                                </div>
+                                
+                                <!-- 道具2 -->
+                                <div class="flex items-center p-2 border border-gray-200 rounded-md bg-purple-50">
+                                    <div class="flex-shrink-0 w-10 h-10 bg-purple-100 rounded-md flex items-center justify-center mr-3">
+                                        <i class="fas fa-filter text-purple-500"></i>
+                                    </div>
+                                    <div class="flex-1">
+                                        <div class="flex justify-between">
+                                            <div class="text-sm font-medium">思路引导器</div>
+                                            <div class="text-xs text-purple-600">6元/小时</div>
+                                        </div>
+                                        <div class="text-xs text-gray-500">分析当前思路，指引正确方向</div>
+                                    </div>
+                                    <button class="text-xs bg-purple-500 text-white py-1 px-2 rounded-md">解锁</button>
+                                </div>
+                                
+                                <!-- 道具3 -->
+                                <div class="flex items-center p-2 border border-gray-200 rounded-md bg-green-50">
+                                    <div class="flex-shrink-0 w-10 h-10 bg-green-100 rounded-md flex items-center justify-center mr-3">
+                                        <i class="fas fa-bullseye text-green-500"></i>
+                                    </div>
+                                    <div class="flex-1">
+                                        <div class="flex justify-between">
+                                            <div class="text-sm font-medium">关键词提示</div>
+                                            <div class="text-xs text-green-600">5元/小时</div>
+                                        </div>
+                                        <div class="text-xs text-gray-500">提供解题关键词提示</div>
+                                    </div>
+                                    <button class="text-xs bg-green-500 text-white py-1 px-2 rounded-md">解锁</button>
+                                </div>
+                                
+                                <!-- 套餐 -->
+                                <div class="flex items-center p-2 border border-gray-200 rounded-md bg-red-50 relative">
+                                    <div class="flex-shrink-0 w-10 h-10 bg-red-100 rounded-md flex items-center justify-center mr-3">
+                                        <i class="fas fa-gift text-red-500"></i>
+                                    </div>
+                                    <div class="flex-1">
+                                        <div class="flex justify-between">
+                                            <div class="text-sm font-medium">高级解谜套装</div>
+                                            <div class="text-xs text-red-600">15元/小时</div>
+                                        </div>
+                                        <div class="text-xs text-gray-500">包含全部高级解谜工具</div>
+                                    </div>
+                                    <button class="text-xs bg-red-500 text-white py-1 px-2 rounded-md">解锁</button>
+                                    <div class="absolute -top-1 -right-1 bg-amber-500 text-white text-xs px-1.5 py-0.5 rounded-full">优惠</div>
+                                </div>
+                                
+                                <div class="mt-3 py-2 text-center border-t border-gray-200">
+                                    <div class="text-xs text-gray-500">道具随时可开启/关闭，按实际使用时长计费</div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- 引入底部导航栏 -->
+        <iframe src="../components/nav-bar.html" frameborder="0" scrolling="no" style="width:100%; height:50px; overflow:hidden; position:fixed; bottom:0;"></iframe>
+    </div>
+    
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            // 道具弹窗控制
+            const openPropsBtn = document.getElementById('openPropsBtn');
+            const closePropsBtn = document.getElementById('closePropsBtn');
+            const propsModal = document.getElementById('propsModal');
+            
+            openPropsBtn.addEventListener('click', function() {
+                propsModal.classList.remove('hidden');
+            });
+            
+            closePropsBtn.addEventListener('click', function() {
+                propsModal.classList.add('hidden');
+            });
+            
+            // 点击弹窗外部关闭
+            propsModal.addEventListener('click', function(e) {
+                if (e.target === propsModal) {
+                    propsModal.classList.add('hidden');
+                }
+            });
+        });
+    </script>
+</body>
+</html> 

lineforfun/pages/premium.html

@@ -0,0 +1,202 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>高级会员 - LineFunQueue</title>
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- FontAwesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- 自定义样式 -->
+    <link rel="stylesheet" href="../css/custom.css">
+</head>
+<body>
+    <div class="iphone-frame">
+        <!-- 引入状态栏 -->
+        <iframe src="../components/status-bar.html" frameborder="0" scrolling="no" style="width:100%; height:44px; overflow:hidden;"></iframe>
+        
+        <!-- 导航栏 -->
+        <div class="app-navbar">
+            <div class="left-button" onclick="history.back()">
+                <i class="fas fa-chevron-left mr-1"></i> 返回
+            </div>
+            <div class="title">高级会员</div>
+        </div>
+        
+        <!-- 内容区域 -->
+        <div class="app-content">
+            <!-- 会员banner -->
+            <div class="relative">
+                <img src="https://images.unsplash.com/photo-1579621970795-87facc2f976d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&h=200&q=80" class="w-full h-48 object-cover" alt="高级会员">
+                <div class="absolute top-0 left-0 right-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent flex flex-col justify-end p-4">
+                    <h2 class="text-white text-2xl font-bold">LineFun 高级会员</h2>
+                    <p class="text-white/80 text-sm mt-1">解锁更多专属游戏功能和特权</p>
+                </div>
+            </div>
+            
+            <!-- 会员计划 -->
+            <div class="bg-white p-4">
+                <h3 class="font-medium text-lg mb-4">选择会员计划</h3>
+                
+                <!-- 会员选项 -->
+                <div class="space-y-4">
+                    <!-- 月度计划 -->
+                    <div class="border border-secondary-orange rounded-lg p-4 relative">
+                        <div class="absolute top-0 right-0 bg-secondary-orange text-white text-xs px-2 py-1 rounded-bl-lg">推荐</div>
+                        <div class="flex justify-between items-center">
+                            <div>
+                                <h4 class="font-medium">月度会员</h4>
+                                <div class="text-xs text-gray-500 mt-1">每月自动续费，可随时取消</div>
+                            </div>
+                            <div class="text-right">
+                                <div class="text-xl font-bold text-secondary-orange">¥18.00</div>
+                                <div class="text-xs text-gray-500">每月</div>
+                            </div>
+                        </div>
+                        <div class="mt-3">
+                            <button class="app-button secondary w-full">立即开通</button>
+                        </div>
+                    </div>
+                    
+                    <!-- 季度计划 -->
+                    <div class="border border-gray-200 rounded-lg p-4">
+                        <div class="flex justify-between items-center">
+                            <div>
+                                <h4 class="font-medium">季度会员</h4>
+                                <div class="text-xs text-gray-500 mt-1">每季度自动续费，可随时取消</div>
+                            </div>
+                            <div class="text-right">
+                                <div class="text-xl font-bold">¥45.00</div>
+                                <div class="text-xs text-gray-500">每季度</div>
+                            </div>
+                        </div>
+                        <div class="mt-3">
+                            <button class="app-button outline w-full">开通</button>
+                        </div>
+                    </div>
+                    
+                    <!-- 年度计划 -->
+                    <div class="border border-gray-200 rounded-lg p-4">
+                        <div class="flex justify-between items-center">
+                            <div>
+                                <h4 class="font-medium">年度会员</h4>
+                                <div class="text-xs text-gray-500 mt-1">一次性支付，尊享12个月高级特权</div>
+                            </div>
+                            <div class="text-right">
+                                <div class="flex items-center">
+                                    <div class="text-sm line-through text-gray-400 mr-2">¥216</div>
+                                    <div class="text-xl font-bold">¥158.00</div>
+                                </div>
+                                <div class="text-xs text-green-500">节省 27%</div>
+                            </div>
+                        </div>
+                        <div class="mt-3">
+                            <button class="app-button outline w-full">开通</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 会员权益 -->
+            <div class="app-card mx-4 my-4">
+                <div class="p-4">
+                    <h3 class="font-medium text-lg mb-4">会员权益</h3>
+                    
+                    <div class="space-y-4">
+                        <!-- 权益1 -->
+                        <div class="flex">
+                            <div class="flex-shrink-0 w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
+                                <i class="fas fa-lightbulb text-blue-500"></i>
+                            </div>
+                            <div>
+                                <div class="font-medium">智能提示系统</div>
+                                <div class="text-sm text-gray-500 mt-1">解谜游戏中获得AI辅助提示，提高解谜效率</div>
+                            </div>
+                        </div>
+                        
+                        <!-- 权益2 -->
+                        <div class="flex">
+                            <div class="flex-shrink-0 w-10 h-10 bg-green-100 rounded-full flex items-center justify-center mr-3">
+                                <i class="fas fa-ad text-green-500"></i>
+                            </div>
+                            <div>
+                                <div class="font-medium">无广告体验</div>
+                                <div class="text-sm text-gray-500 mt-1">彻底移除游戏中的所有广告，畅享无打扰体验</div>
+                            </div>
+                        </div>
+                        
+                        <!-- 权益3 -->
+                        <div class="flex">
+                            <div class="flex-shrink-0 w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3">
+                                <i class="fas fa-gift text-purple-500"></i>
+                            </div>
+                            <div>
+                                <div class="font-medium">专属游戏道具</div>
+                                <div class="text-sm text-gray-500 mt-1">获得专属游戏道具，在各种游戏中获得优势</div>
+                            </div>
+                        </div>
+                        
+                        <!-- 权益4 -->
+                        <div class="flex">
+                            <div class="flex-shrink-0 w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center mr-3">
+                                <i class="fas fa-gamepad text-yellow-500"></i>
+                            </div>
+                            <div>
+                                <div class="font-medium">高级游戏内容</div>
+                                <div class="text-sm text-gray-500 mt-1">解锁更多高级谜题和游戏内容，提前体验新游戏</div>
+                            </div>
+                        </div>
+                        
+                        <!-- 权益5 -->
+                        <div class="flex">
+                            <div class="flex-shrink-0 w-10 h-10 bg-red-100 rounded-full flex items-center justify-center mr-3">
+                                <i class="fas fa-user-shield text-red-500"></i>
+                            </div>
+                            <div>
+                                <div class="font-medium">专属客服支持</div>
+                                <div class="text-sm text-gray-500 mt-1">获得优先客服支持，问题解决更快速</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 常见问题 -->
+            <div class="app-card mx-4 mb-4">
+                <div class="p-4">
+                    <h3 class="font-medium text-lg mb-4">常见问题</h3>
+                    
+                    <div class="space-y-4">
+                        <div>
+                            <h4 class="font-medium text-sm">会员可以在多少设备上使用？</h4>
+                            <p class="text-sm text-gray-500 mt-1">会员可以在最多3台设备上同时使用，超过设备数量将自动登出最早的设备。</p>
+                        </div>
+                        
+                        <div>
+                            <h4 class="font-medium text-sm">如何取消自动续费？</h4>
+                            <p class="text-sm text-gray-500 mt-1">在个人中心 > 会员管理中可以随时取消自动续费，当前会员有效期内仍可享受会员权益。</p>
+                        </div>
+                        
+                        <div>
+                            <h4 class="font-medium text-sm">是否支持退款？</h4>
+                            <p class="text-sm text-gray-500 mt-1">会员服务开通后不支持退款，建议先试用月度会员再考虑长期订阅。</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 底部购买按钮 -->
+            <div class="p-4 sticky bottom-0 bg-white border-t border-gray-200">
+                <button class="app-button secondary w-full flex justify-center items-center">
+                    <i class="fas fa-crown mr-2"></i>
+                    立即开通月度会员 ¥18/月
+                </button>
+                <div class="text-center text-xs text-gray-500 mt-2">
+                    开通即同意<a href="#" class="text-primary">《会员服务协议》</a>
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html> 

lineforfun/pages/profile.html

@@ -0,0 +1,212 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>个人中心 - LineFunQueue</title>
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- FontAwesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- 自定义样式 -->
+    <link rel="stylesheet" href="../css/custom.css">
+    <style>
+        .app-content {
+            padding-bottom: 60px; /* 为底部导航栏留出空间 */
+        }
+        
+        .room-item {
+            transition: all 0.2s ease;
+        }
+        
+        .room-item:hover {
+            transform: translateY(-2px);
+        }
+    </style>
+</head>
+<body>
+    <div class="iphone-frame">
+        <!-- 引入状态栏 -->
+        <iframe src="../components/status-bar.html" frameborder="0" scrolling="no" style="width:100%; height:44px; overflow:hidden;"></iframe>
+        
+        <!-- 导航栏 -->
+        <div class="app-navbar">
+            <div class="title">个人中心</div>
+            <div class="right-button">
+                <i class="fas fa-cog text-gray-600"></i>
+            </div>
+        </div>
+        
+        <!-- 内容区域 -->
+        <div class="app-content">
+            <!-- 用户信息 -->
+            <div class="bg-white p-4">
+                <div class="flex items-center">
+                    <div class="w-16 h-16 rounded-full overflow-hidden mr-4 border-2 border-primary">
+                        <img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=80&h=80&q=80" class="w-full h-full object-cover" alt="用户头像">
+                    </div>
+                    <div>
+                        <h2 class="text-lg font-bold">林小明</h2>
+                        <div class="flex items-center mt-1">
+                            <span class="text-xs text-gray-500">玩家ID: 12345678</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- 个人数据统计 -->
+                <div class="flex justify-between mt-4 text-center">
+                    <div class="flex-1">
+                        <div class="text-lg font-bold">28</div>
+                        <div class="text-xs text-gray-500">参与游戏</div>
+                    </div>
+                    <div class="flex-1 border-l border-r border-gray-200">
+                        <div class="text-lg font-bold">12</div>
+                        <div class="text-xs text-gray-500">创建房间</div>
+                    </div>
+                    <div class="flex-1">
+                        <div class="text-lg font-bold">92%</div>
+                        <div class="text-xs text-gray-500">解谜成功率</div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 我的房间 -->
+            <div class="app-card mx-3 my-3">
+                <div class="p-3 border-b border-gray-100 flex justify-between items-center">
+                    <h3 class="font-medium">我的房间</h3>
+                    <span class="text-xs text-primary">查看全部</span>
+                </div>
+                
+                <!-- 有房间的视图 -->
+                <div class="p-3">
+                    <!-- 房间1 - 正在进行中 -->
+                    <a href="room-waiting.html" class="block bg-white border border-gray-200 rounded-lg p-3 mb-2 room-item">
+                        <div class="flex justify-between items-center">
+                            <div class="flex items-center">
+                                <div class="w-10 h-10 rounded-lg overflow-hidden mr-3">
+                                    <img src="https://images.unsplash.com/photo-1582845512747-e42001c95638?ixlib=rb-1.2.1&auto=format&fit=crop&w=40&h=40&q=80" class="w-full h-full object-cover" alt="海龟汤">
+                                </div>
+                                <div>
+                                    <div class="font-medium text-sm">欢乐海龟汤</div>
+                                    <div class="text-xs text-gray-500 mt-0.5">房间码: ABC123</div>
+                                </div>
+                            </div>
+                            <div class="flex flex-col items-end">
+                                <span class="text-xs bg-green-500 text-white px-1.5 py-0.5 rounded-full mb-1">进行中</span>
+                                <span class="text-xs text-gray-500">3/10人</span>
+                            </div>
+                        </div>
+                    </a>
+                    
+                    <!-- 房间2 - 等待中 -->
+                    <a href="room-waiting.html" class="block bg-white border border-gray-200 rounded-lg p-3 room-item">
+                        <div class="flex justify-between items-center">
+                            <div class="flex items-center">
+                                <div class="w-10 h-10 rounded-lg overflow-hidden mr-3">
+                                    <img src="https://images.unsplash.com/photo-1553481187-be93c21490a9?ixlib=rb-1.2.1&auto=format&fit=crop&w=40&h=40&q=80" class="w-full h-full object-cover" alt="谁是卧底">
+                                </div>
+                                <div>
+                                    <div class="font-medium text-sm">趣味谁是卧底</div>
+                                    <div class="text-xs text-gray-500 mt-0.5">房间码: DEF456</div>
+                                </div>
+                            </div>
+                            <div class="flex flex-col items-end">
+                                <span class="text-xs bg-blue-500 text-white px-1.5 py-0.5 rounded-full mb-1">等待中</span>
+                                <span class="text-xs text-gray-500">2/8人</span>
+                            </div>
+                        </div>
+                    </a>
+                </div>
+                
+                <!-- 创建/加入按钮 -->
+                <div class="p-3 border-t border-gray-100">
+                    <div class="flex space-x-2">
+                        <a href="room-create.html" class="flex-1 py-2 bg-primary text-white text-sm rounded-md flex items-center justify-center">
+                            <i class="fas fa-plus-circle mr-1"></i> 创建房间
+                        </a>
+                        <a href="room-join.html" class="flex-1 py-2 bg-gray-100 text-gray-700 text-sm rounded-md flex items-center justify-center">
+                            <i class="fas fa-sign-in-alt mr-1"></i> 加入房间
+                        </a>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 功能菜单 - 简化版 -->
+            <div class="app-card mx-3">
+                <a href="#" class="flex items-center justify-between p-3 border-b border-gray-100">
+                    <div class="flex items-center">
+                        <i class="fas fa-history text-blue-500 w-5"></i>
+                        <span class="ml-3 text-sm">游戏历史</span>
+                    </div>
+                    <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
+                </a>
+                
+                <a href="#" class="flex items-center justify-between p-3">
+                    <div class="flex items-center">
+                        <i class="fas fa-info-circle text-gray-500 w-5"></i>
+                        <span class="ml-3 text-sm">关于我们</span>
+                    </div>
+                    <i class="fas fa-chevron-right text-gray-400 text-xs"></i>
+                </a>
+            </div>
+            
+            <!-- 最近游戏 -->
+            <div class="mx-3 mt-3">
+                <div class="flex justify-between items-center mb-2">
+                    <h3 class="font-medium">历史游戏</h3>
+                    <a href="#" class="text-xs text-primary">清空记录</a>
+                </div>
+                
+                <div class="space-y-2">
+                    <!-- 游戏记录1 -->
+                    <div class="bg-white rounded-lg overflow-hidden shadow-sm">
+                        <div class="p-3 flex">
+                            <div class="w-12 h-12 rounded-lg overflow-hidden mr-3">
+                                <img src="https://images.unsplash.com/photo-1582845512747-e42001c95638?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=48&h=48&q=80" class="w-full h-full object-cover" alt="海龟汤">
+                            </div>
+                            <div class="flex-1">
+                                <div class="flex justify-between">
+                                    <div class="font-medium text-sm">神秘的手表</div>
+                                    <div class="text-xs bg-green-500 text-white px-1.5 py-0.5 rounded-full">已解谜</div>
+                                </div>
+                                <div class="text-xs text-gray-500 mt-1">
+                                    <span class="mr-2">海龟汤</span>
+                                    <span>昨天 15:30</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- 游戏记录2 -->
+                    <div class="bg-white rounded-lg overflow-hidden shadow-sm">
+                        <div class="p-3 flex">
+                            <div class="w-12 h-12 rounded-lg overflow-hidden mr-3">
+                                <img src="https://images.unsplash.com/photo-1553481187-be93c21490a9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=48&h=48&q=80" class="w-full h-full object-cover" alt="谁是卧底">
+                            </div>
+                            <div class="flex-1">
+                                <div class="flex justify-between">
+                                    <div class="font-medium text-sm">神秘词语</div>
+                                    <div class="text-xs bg-red-500 text-white px-1.5 py-0.5 rounded-full">未完成</div>
+                                </div>
+                                <div class="text-xs text-gray-500 mt-1">
+                                    <span class="mr-2">谁是卧底</span>
+                                    <span>前天 20:15</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 版本信息 -->
+            <div class="mt-5 text-center text-xs text-gray-400">
+                <p>LineFunQueue v1.0</p>
+                <p class="mt-1">© 2023 排队游戏小组</p>
+            </div>
+        </div>
+        
+        <!-- 引入底部导航栏 -->
+        <iframe src="../components/nav-bar.html" frameborder="0" scrolling="no" style="width:100%; height:50px; overflow:hidden; position:fixed; bottom:0;"></iframe>
+    </div>
+</body>
+</html> 

lineforfun/pages/room-create.html

@@ -0,0 +1,172 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>创建房间 - LineFunQueue</title>
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- FontAwesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- 自定义样式 -->
+    <link rel="stylesheet" href="../css/custom.css">
+    <style>
+        .app-content {
+            padding-bottom: 60px; /* 为底部导航栏留出空间 */
+        }
+        
+        /* 开关样式 */
+        .switch {
+            position: relative;
+            display: inline-block;
+            width: 44px;
+            height: 24px;
+        }
+        
+        .switch input {
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+        
+        .slider {
+            position: absolute;
+            cursor: pointer;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: #ccc;
+            transition: .4s;
+        }
+        
+        .slider:before {
+            position: absolute;
+            content: "";
+            height: 18px;
+            width: 18px;
+            left: 3px;
+            bottom: 3px;
+            background-color: white;
+            transition: .4s;
+        }
+        
+        input:checked + .slider {
+            background-color: var(--color-primary);
+        }
+        
+        input:checked + .slider:before {
+            transform: translateX(20px);
+        }
+        
+        .slider.round {
+            border-radius: 24px;
+        }
+        
+        .slider.round:before {
+            border-radius: 50%;
+        }
+    </style>
+</head>
+<body>
+    <div class="iphone-frame">
+        <!-- 引入状态栏 -->
+        <iframe src="../components/status-bar.html" frameborder="0" scrolling="no" style="width:100%; height:44px; overflow:hidden;"></iframe>
+        
+        <!-- 导航栏 -->
+        <div class="app-navbar">
+            <div class="left-button" onclick="history.back()">
+                <i class="fas fa-chevron-left mr-1"></i> 返回
+            </div>
+            <div class="title">创建房间</div>
+        </div>
+        
+        <!-- 内容区域 -->
+        <div class="app-content">
+            <!-- 游戏信息 -->
+            <div class="p-3 bg-white flex items-center">
+                <div class="w-14 h-14 rounded-lg overflow-hidden mr-3">
+                    <img src="https://images.unsplash.com/photo-1582845512747-e42001c95638?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=64&h=64&q=80" class="w-full h-full object-cover" alt="海龟汤">
+                </div>
+                <div>
+                    <h3 class="font-bold text-base">海龟汤</h3>
+                    <div class="text-xs text-gray-500">
+                        <span class="mr-2"><i class="fas fa-user-friends mr-1"></i> 3-10人</span>
+                        <span><i class="far fa-clock mr-1"></i> 30-60分钟</span>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 房间设置 -->
+            <div class="p-3">
+                <h3 class="font-medium text-base mb-3">房间设置</h3>
+                
+                <!-- 房间名称 -->
+                <div class="mb-3">
+                    <label class="block text-sm text-gray-700 mb-1">房间名称</label>
+                    <input type="text" class="app-input" placeholder="给房间起个名字...">
+                </div>
+                
+                <!-- 最大人数 -->
+                <div class="mb-3">
+                    <label class="block text-sm text-gray-700 mb-1">最大人数</label>
+                    <div class="flex items-center justify-between">
+                        <input type="range" min="3" max="10" value="6" class="w-4/5">
+                        <span class="text-primary font-medium">6人</span>
+                    </div>
+                </div>
+                
+                <!-- 房间公开性 -->
+                <div class="mb-3">
+                    <label class="block text-sm text-gray-700 mb-1">房间可见性</label>
+                    <div class="flex items-center">
+                        <label class="inline-flex items-center mr-4">
+                            <input type="radio" name="room-visibility" checked class="form-radio text-primary">
+                            <span class="ml-2 text-sm">仅限邀请</span>
+                        </label>
+                        <label class="inline-flex items-center">
+                            <input type="radio" name="room-visibility" class="form-radio text-primary">
+                            <span class="ml-2 text-sm">公开房间</span>
+                        </label>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 创建按钮 -->
+            <div class="p-3 mb-3">
+                <button id="createBtn" class="app-button primary w-full flex justify-center items-center">
+                    <i class="fas fa-play-circle mr-1"></i> 创建并开始
+                </button>
+            </div>
+        </div>
+        
+        <!-- 引入底部导航栏 -->
+        <iframe src="../components/nav-bar.html" frameborder="0" scrolling="no" style="width:100%; height:50px; overflow:hidden; position:fixed; bottom:0;"></iframe>
+    </div>
+    
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            // 创建房间并跳转
+            const createBtn = document.getElementById('createBtn');
+            
+            createBtn.addEventListener('click', function() {
+                // 保存创建的房间信息到本地存储（模拟）
+                const roomData = {
+                    id: 'ABC123',
+                    name: document.querySelector('.app-input').value || '欢乐海龟汤',
+                    gameType: '海龟汤',
+                    maxPlayers: 6,
+                    currentPlayers: 1,
+                    isHost: true,
+                    status: 'waiting'
+                };
+                
+                localStorage.setItem('currentRoom', JSON.stringify(roomData));
+                
+                // 跳转到等待房间，并在底部导航切换到"我的房间"
+                window.location.href = 'room-waiting-host.html';
+            });
+        });
+    </script>
+</body>
+</html> 

lineforfun/pages/room-join.html

@@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>加入房间 - LineFunQueue</title>
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- FontAwesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- 自定义样式 -->
+    <link rel="stylesheet" href="../css/custom.css">
+    <style>
+        .app-content {
+            padding-bottom: 60px; /* 为底部导航栏留出空间 */
+        }
+    </style>
+</head>
+<body>
+    <div class="iphone-frame">
+        <!-- 引入状态栏 -->
+        <iframe src="../components/status-bar.html" frameborder="0" scrolling="no" style="width:100%; height:44px; overflow:hidden;"></iframe>
+        
+        <!-- 导航栏 -->
+        <div class="app-navbar">
+            <div class="left-button" onclick="history.back()">
+                <i class="fas fa-chevron-left mr-1"></i> 返回
+            </div>
+            <div class="title">加入房间</div>
+        </div>
+        
+        <!-- 内容区域 -->
+        <div class="app-content bg-white">
+            <!-- 扫码提示 -->
+            <div class="text-center py-8">
+                <div class="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <i class="fas fa-qrcode text-4xl text-primary"></i>
+                </div>
+                <h2 class="text-xl font-bold">扫描二维码加入房间</h2>
+                <p class="text-sm text-gray-500 mt-2 px-8">请扫描主持人分享的二维码，或输入房间码手动加入</p>
+            </div>
+            
+            <!-- 分隔线 -->
+            <div class="relative flex py-5 items-center px-8">
+                <div class="flex-grow border-t border-gray-200"></div>
+                <span class="flex-shrink mx-4 text-gray-400 text-sm">或者</span>
+                <div class="flex-grow border-t border-gray-200"></div>
+            </div>
+            
+            <!-- 手动输入 -->
+            <div class="px-8 pb-8">
+                <h3 class="text-center font-medium mb-4">手动输入房间码</h3>
+                
+                <!-- 房间码输入框 -->
+                <div class="flex justify-center mb-6">
+                    <div class="flex space-x-2">
+                        <input type="text" maxlength="1" class="w-12 h-12 border-2 border-primary rounded-md text-center text-xl font-bold room-code" value="A">
+                        <input type="text" maxlength="1" class="w-12 h-12 border-2 border-primary rounded-md text-center text-xl font-bold room-code" value="B">
+                        <input type="text" maxlength="1" class="w-12 h-12 border-2 border-primary rounded-md text-center text-xl font-bold room-code" value="C">
+                        <input type="text" maxlength="1" class="w-12 h-12 border-2 border-gray-300 rounded-md text-center text-xl font-bold focus:border-primary room-code" value="1">
+                        <input type="text" maxlength="1" class="w-12 h-12 border-2 border-gray-300 rounded-md text-center text-xl font-bold focus:border-primary room-code" value="2">
+                        <input type="text" maxlength="1" class="w-12 h-12 border-2 border-gray-300 rounded-md text-center text-xl font-bold focus:border-primary room-code" value="3">
+                    </div>
+                </div>
+                
+                <!-- 加入按钮 -->
+                <button id="joinBtn" class="app-button primary w-full flex justify-center">
+                    加入房间
+                </button>
+            </div>
+            
+            <!-- 最近房间记录 -->
+            <div class="p-4 bg-gray-50">
+                <h3 class="text-sm font-medium text-gray-700 mb-3">最近加入的房间</h3>
+                
+                <div class="space-y-3">
+                    <!-- 房间记录1 -->
+                    <div class="bg-white p-3 rounded-lg shadow-sm flex justify-between items-center">
+                        <div>
+                            <div class="font-medium">欢乐海龟汤</div>
+                            <div class="flex items-center text-xs text-gray-500">
+                                <span class="mr-2">房间码: ABC123</span>
+                                <span>2分钟前</span>
+                            </div>
+                        </div>
+                        <button class="text-primary recent-room" data-room-code="ABC123" data-room-name="欢乐海龟汤">加入</button>
+                    </div>
+                    
+                    <!-- 房间记录2 -->
+                    <div class="bg-white p-3 rounded-lg shadow-sm flex justify-between items-center">
+                        <div>
+                            <div class="font-medium">周末猜谜</div>
+                            <div class="flex items-center text-xs text-gray-500">
+                                <span class="mr-2">房间码: XYZ456</span>
+                                <span>昨天</span>
+                            </div>
+                        </div>
+                        <button class="text-primary recent-room" data-room-code="XYZ456" data-room-name="周末猜谜">加入</button>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 扫码按钮 -->
+            <div class="fixed bottom-24 right-6">
+                <button class="w-14 h-14 rounded-full bg-primary text-white flex items-center justify-center shadow-lg">
+                    <i class="fas fa-camera text-xl"></i>
+                </button>
+            </div>
+        </div>
+        
+        <!-- 引入底部导航栏 -->
+        <iframe src="../components/nav-bar.html" frameborder="0" scrolling="no" style="width:100%; height:50px; overflow:hidden; position:fixed; bottom:0;"></iframe>
+    </div>
+    
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            // 自动聚焦到下一个输入框
+            const inputs = document.querySelectorAll('.room-code');
+            
+            inputs.forEach((input, index) => {
+                input.addEventListener('keyup', function() {
+                    if (this.value.length === 1 && index < inputs.length - 1) {
+                        inputs[index + 1].focus();
+                    }
+                });
+                
+                input.addEventListener('keydown', function(e) {
+                    if (e.key === 'Backspace' && this.value.length === 0 && index > 0) {
+                        inputs[index - 1].focus();
+                    }
+                });
+            });
+            
+            // 加入房间按钮
+            const joinBtn = document.getElementById('joinBtn');
+            joinBtn.addEventListener('click', function() {
+                joinRoom();
+            });
+            
+            // 快速加入最近的房间
+            const recentRoomBtns = document.querySelectorAll('.recent-room');
+            recentRoomBtns.forEach(btn => {
+                btn.addEventListener('click', function() {
+                    const roomCode = this.getAttribute('data-room-code');
+                    const roomName = this.getAttribute('data-room-name');
+                    joinRoomWithCode(roomCode, roomName);
+                });
+            });
+            
+            // 加入房间函数
+            function joinRoom() {
+                let roomCode = '';
+                inputs.forEach(input => {
+                    roomCode += input.value;
+                });
+                
+                joinRoomWithCode(roomCode, '');
+            }
+            
+            // 使用指定房间码加入
+            function joinRoomWithCode(roomCode, roomName) {
+                // 保存加入的房间信息到本地存储（模拟）
+                const roomData = {
+                    id: roomCode,
+                    name: roomName || `房间 ${roomCode}`,
+                    gameType: '海龟汤',
+                    maxPlayers: 6,
+                    currentPlayers: 3,
+                    isHost: false,
+                    status: 'waiting'
+                };
+                
+                localStorage.setItem('currentRoom', JSON.stringify(roomData));
+                
+                // 跳转到等待房间
+                window.location.href = 'room-waiting.html';
+            }
+        });
+    </script>
+</body>
+</html> 

lineforfun/pages/room-waiting-player.html

@@ -0,0 +1,293 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>等待房间 - 玩家 - LineFunQueue</title>
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- FontAwesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- 自定义样式 -->
+    <link rel="stylesheet" href="../css/custom.css">
+    <style>
+        .app-content {
+            padding-bottom: 60px; /* 为底部导航栏留出空间 */
+        }
+        
+        .share-btn {
+            position: relative;
+        }
+        
+        .share-options {
+            display: none;
+            position: absolute;
+            top: 100%;
+            right: 0;
+            width: 200px;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+            padding: 8px 0;
+            z-index: 100;
+        }
+        
+        .share-option {
+            padding: 8px 16px;
+            display: flex;
+            align-items: center;
+        }
+        
+        .share-option i {
+            width: 24px;
+            margin-right: 8px;
+            text-align: center;
+        }
+        
+        .share-option:hover {
+            background-color: #f3f4f6;
+        }
+        
+        .user-status.ready {
+            color: var(--color-primary);
+        }
+        
+        .user-status.not-ready {
+            color: #9ca3af;
+        }
+        
+        .host-badge {
+            background-color: #FFA000;
+            color: white;
+        }
+        
+        .player-badge {
+            background-color: #0EA5E9;
+            color: white;
+        }
+    </style>
+</head>
+<body>
+    <div class="iphone-frame">
+        <!-- 引入状态栏 -->
+        <iframe src="../components/status-bar.html" frameborder="0" scrolling="no" style="width:100%; height:44px; overflow:hidden;"></iframe>
+        
+        <!-- 导航栏 -->
+        <div class="app-navbar">
+            <div class="left-button" onclick="history.back()">
+                <i class="fas fa-chevron-left mr-1"></i> 返回
+            </div>
+            <div class="title" id="roomName">欢乐海龟汤</div>
+            <div class="right-button">
+                <i class="fas fa-ellipsis-v"></i>
+            </div>
+        </div>
+        
+        <!-- 内容区域 -->
+        <div class="app-content bg-white">
+            <!-- 房间状态 -->
+            <div class="bg-sky-100 p-3 text-center">
+                <div class="text-sky-700 font-medium">等待开始...</div>
+                <div class="text-xs text-sky-600 mt-1"><span id="playerCount">3</span>/10人已加入，等待主持人开始游戏</div>
+            </div>
+            
+            <!-- 房间信息和分享 -->
+            <div class="p-3 border-b border-gray-200">
+                <div class="flex justify-between items-center">
+                    <div class="flex items-center">
+                        <div class="font-bold text-lg mr-2" id="roomCode">ABC123</div>
+                        <button id="copyBtn" class="text-xs text-gray-500 border border-gray-300 rounded px-1.5 py-0.5 flex items-center">
+                            <i class="far fa-copy mr-1"></i> 复制
+                        </button>
+                    </div>
+                    <div class="share-btn relative">
+                        <button id="shareBtn" class="bg-sky-100 text-sky-700 py-1 px-3 rounded-full text-sm flex items-center">
+                            <i class="fas fa-share-alt mr-1"></i> 邀请好友
+                        </button>
+                        <div class="share-options" id="shareOptions">
+                            <div class="share-option">
+                                <i class="fab fa-weixin text-green-500"></i>
+                                <span>微信好友</span>
+                            </div>
+                            <div class="share-option">
+                                <i class="fab fa-qq text-blue-500"></i>
+                                <span>QQ好友</span>
+                            </div>
+                            <div class="share-option">
+                                <i class="fas fa-comment text-yellow-500"></i>
+                                <span>短信</span>
+                            </div>
+                            <div class="share-option">
+                                <i class="fas fa-link text-gray-500"></i>
+                                <span>复制链接</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 游戏信息 -->
+            <div class="p-3 flex items-center border-b border-gray-200">
+                <div class="w-12 h-12 rounded-lg overflow-hidden mr-3">
+                    <img src="https://images.unsplash.com/photo-1582845512747-e42001c95638?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=48&h=48&q=80" class="w-full h-full object-cover" alt="海龟汤">
+                </div>
+                <div>
+                    <h3 class="font-medium">海龟汤</h3>
+                    <div class="text-xs text-gray-500">
+                        <span>预计游戏时长: 30分钟</span>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 玩家列表 -->
+            <div class="p-3">
+                <h3 class="font-medium mb-2">玩家 (<span id="currentPlayers">3</span>/<span id="maxPlayers">10</span>)</h3>
+                
+                <div class="space-y-2">
+                    <!-- 主持人 -->
+                    <div class="flex items-center p-2 bg-amber-50 rounded-lg">
+                        <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
+                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=40&h=40&q=80" class="w-full h-full object-cover" alt="用户头像">
+                        </div>
+                        <div class="flex-1">
+                            <div class="font-medium flex items-center">
+                                小明
+                                <span class="ml-2 text-xs host-badge px-1.5 py-0.5 rounded-full">主持人</span>
+                            </div>
+                            <div class="text-xs text-amber-600 user-status ready">准备中...</div>
+                        </div>
+                    </div>
+                    
+                    <!-- 玩家1 -->
+                    <div class="flex items-center p-2 bg-gray-50 rounded-lg">
+                        <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
+                            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=40&h=40&q=80" class="w-full h-full object-cover" alt="用户头像">
+                        </div>
+                        <div class="flex-1">
+                            <div class="font-medium">小红</div>
+                            <div class="text-xs user-status ready">
+                                <i class="fas fa-check-circle mr-1"></i> 已准备
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- 玩家2 (我) -->
+                    <div id="player-view" class="flex items-center p-2 bg-sky-50 rounded-lg border border-sky-200">
+                        <div class="w-10 h-10 rounded-full overflow-hidden mr-3 border-2 border-sky-500">
+                            <img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=40&h=40&q=80" class="w-full h-full object-cover" alt="用户头像">
+                        </div>
+                        <div class="flex-1">
+                            <div class="font-medium flex items-center">
+                                我
+                                <span class="ml-2 text-xs player-badge px-1.5 py-0.5 rounded-full">我</span>
+                            </div>
+                            <div class="text-xs user-status not-ready" id="myStatus">
+                                <i class="fas fa-clock mr-1"></i> 等待准备
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 游戏说明 -->
+            <div class="p-3 bg-gray-50 mb-3">
+                <h3 class="font-medium mb-2 text-sm">游戏说明</h3>
+                <p class="text-xs text-gray-700">
+                    海龟汤是一种解谜类游戏，游戏开始时，主持人会给出一个离奇古怪的情境（汤面），玩家需要通过提问获取更多线索，最终解开谜题找出真相（汤底）。
+                </p>
+            </div>
+            
+            <!-- 玩家视图的按钮 -->
+            <div id="player-controls" class="p-3 sticky bottom-0 bg-white border-t border-gray-200">
+                <button id="readyBtn" class="app-button primary w-full flex justify-center items-center">
+                    <i class="fas fa-check-circle mr-1"></i> 我已准备
+                </button>
+            </div>
+        </div>
+        
+        <!-- 引入底部导航栏 -->
+        <iframe src="../components/nav-bar.html" frameborder="0" scrolling="no" style="width:100%; height:50px; overflow:hidden; position:fixed; bottom:0;"></iframe>
+    </div>
+    
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            // 检查是否为玩家
+            const currentRoom = JSON.parse(localStorage.getItem('currentRoom') || '{}');
+            if (currentRoom.isHost) {
+                // 如果是主持人，跳转到主持人等待页面
+                window.location.href = 'room-waiting.html';
+                return;
+            }
+            
+            // 填充房间信息
+            document.getElementById('roomName').textContent = currentRoom.name || '欢乐海龟汤';
+            document.getElementById('roomCode').textContent = currentRoom.id || 'ABC123';
+            document.getElementById('playerCount').textContent = currentRoom.currentPlayers || 3;
+            document.getElementById('currentPlayers').textContent = currentRoom.currentPlayers || 3;
+            document.getElementById('maxPlayers').textContent = currentRoom.maxPlayers || 10;
+            
+            // 分享按钮功能
+            const shareBtn = document.getElementById('shareBtn');
+            const shareOptions = document.getElementById('shareOptions');
+            
+            shareBtn.addEventListener('click', function() {
+                if (shareOptions.style.display === 'block') {
+                    shareOptions.style.display = 'none';
+                } else {
+                    shareOptions.style.display = 'block';
+                }
+            });
+            
+            // 点击其他地方关闭分享选项
+            document.addEventListener('click', function(e) {
+                if (!shareBtn.contains(e.target) && !shareOptions.contains(e.target)) {
+                    shareOptions.style.display = 'none';
+                }
+            });
+            
+            // 复制房间码功能
+            const copyBtn = document.getElementById('copyBtn');
+            copyBtn.addEventListener('click', function() {
+                const roomCode = document.getElementById('roomCode').textContent;
+                navigator.clipboard.writeText(roomCode).then(function() {
+                    copyBtn.innerHTML = '<i class="fas fa-check mr-1"></i> 已复制';
+                    setTimeout(function() {
+                        copyBtn.innerHTML = '<i class="far fa-copy mr-1"></i> 复制';
+                    }, 2000);
+                });
+            });
+            
+            // 准备按钮功能
+            const readyBtn = document.getElementById('readyBtn');
+            const myStatus = document.getElementById('myStatus');
+            let isReady = false;
+            
+            readyBtn.addEventListener('click', function() {
+                isReady = !isReady;
+                
+                if (isReady) {
+                    // 已准备状态
+                    myStatus.classList.remove('not-ready');
+                    myStatus.classList.add('ready');
+                    myStatus.innerHTML = '<i class="fas fa-check-circle mr-1"></i> 已准备';
+                    readyBtn.innerHTML = '<i class="fas fa-times-circle mr-1"></i> 取消准备';
+                    readyBtn.classList.remove('primary');
+                    readyBtn.classList.add('secondary');
+                } else {
+                    // 未准备状态
+                    myStatus.classList.remove('ready');
+                    myStatus.classList.add('not-ready');
+                    myStatus.innerHTML = '<i class="fas fa-clock mr-1"></i> 等待准备';
+                    readyBtn.innerHTML = '<i class="fas fa-check-circle mr-1"></i> 我已准备';
+                    readyBtn.classList.remove('secondary');
+                    readyBtn.classList.add('primary');
+                }
+                
+                // 保存准备状态（模拟）
+                currentRoom.isReady = isReady;
+                localStorage.setItem('currentRoom', JSON.stringify(currentRoom));
+            });
+        });
+    </script>
+</body>
+</html> 

lineforfun/pages/room-waiting.html

@@ -0,0 +1,396 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+    <meta http-equiv="Pragma" content="no-cache">
+    <meta http-equiv="Expires" content="0">
+    <title>等待房间 - 主持人 - LineFunQueue</title>
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- FontAwesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- 自定义样式 -->
+    <link rel="stylesheet" href="../css/custom.css">
+    <style>
+        .app-content {
+            padding-bottom: 60px; /* 为底部导航栏留出空间 */
+        }
+        
+        .share-btn {
+            position: relative;
+        }
+        
+        .share-options {
+            display: none;
+            position: absolute;
+            top: 100%;
+            right: 0;
+            width: 200px;
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+            padding: 8px 0;
+            z-index: 100;
+        }
+        
+        .share-option {
+            padding: 8px 16px;
+            display: flex;
+            align-items: center;
+        }
+        
+        .share-option i {
+            width: 24px;
+            margin-right: 8px;
+            text-align: center;
+        }
+        
+        .share-option:hover {
+            background-color: #f3f4f6;
+        }
+        
+        .user-status.ready {
+            color: var(--color-primary);
+        }
+        
+        .user-status.not-ready {
+            color: #9ca3af;
+        }
+        
+        .host-badge {
+            background-color: #FFA000;
+            color: white;
+        }
+    </style>
+</head>
+<body>
+    <div class="iphone-frame">
+        <!-- 引入状态栏 -->
+        <iframe src="../components/status-bar.html" frameborder="0" scrolling="no" style="width:100%; height:44px; overflow:hidden;"></iframe>
+        
+        <!-- 导航栏 -->
+        <div class="app-navbar">
+            <div class="left-button" onclick="history.back()">
+                <i class="fas fa-chevron-left mr-1"></i> 返回
+            </div>
+            <div class="title" id="roomName">欢乐海龟汤</div>
+            <div class="right-button">
+                <i class="fas fa-ellipsis-v"></i>
+            </div>
+        </div>
+        
+        <!-- 内容区域 -->
+        <div class="app-content bg-white">
+            <!-- 房间状态 -->
+            <div class="bg-amber-100 p-3 text-center">
+                <div class="text-amber-700 font-medium">等待开始...</div>
+                <div class="text-xs text-amber-600 mt-1"><span id="playerCount">3</span>/10人已加入，等待玩家准备</div>
+            </div>
+            
+            <!-- 房间信息和分享 -->
+            <div class="p-3 border-b border-gray-200">
+                <div class="flex justify-between items-center">
+                    <div class="flex items-center">
+                        <div class="font-bold text-lg mr-2" id="roomCode">ABC123</div>
+                        <button id="copyBtn" class="text-xs text-gray-500 border border-gray-300 rounded px-1.5 py-0.5 flex items-center">
+                            <i class="far fa-copy mr-1"></i> 复制
+                        </button>
+                    </div>
+                    <div class="share-btn relative">
+                        <button id="shareBtn" class="bg-amber-100 text-amber-700 py-1 px-3 rounded-full text-sm flex items-center">
+                            <i class="fas fa-share-alt mr-1"></i> 邀请好友
+                        </button>
+                        <div class="share-options" id="shareOptions">
+                            <div class="share-option">
+                                <i class="fab fa-weixin text-green-500"></i>
+                                <span>微信好友</span>
+                            </div>
+                            <div class="share-option">
+                                <i class="fab fa-qq text-blue-500"></i>
+                                <span>QQ好友</span>
+                            </div>
+                            <div class="share-option">
+                                <i class="fas fa-comment text-yellow-500"></i>
+                                <span>短信</span>
+                            </div>
+                            <div class="share-option">
+                                <i class="fas fa-link text-gray-500"></i>
+                                <span>复制链接</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 游戏设置（主持人视图） -->
+            <div class="p-3 border-b border-gray-200">
+                <h3 class="font-medium mb-3">游戏设置</h3>
+                
+                <!-- 主题选择 -->
+                <div class="mb-3">
+                    <label class="block text-sm text-gray-700 mb-1">主题选择</label>
+                    <div class="space-y-2">
+                        <div class="flex items-center p-2 border border-gray-200 rounded-md bg-amber-50 border-amber-200">
+                            <input type="radio" name="theme" id="theme1" checked class="w-4 h-4 text-amber-500">
+                            <div class="ml-3 flex-1">
+                                <div class="text-sm font-medium">经典解谜</div>
+                                <div class="text-xs text-gray-500">基础主题 · 免费</div>
+                            </div>
+                        </div>
+                        
+                        <div class="flex items-center p-2 border border-gray-200 rounded-md relative">
+                            <input type="radio" name="theme" id="theme2" class="w-4 h-4 text-amber-500">
+                            <div class="ml-3 flex-1">
+                                <div class="text-sm font-medium">环球影城</div>
+                                <div class="text-xs text-gray-500">特色主题 · 20元/小时</div>
+                            </div>
+                            <button class="text-xs bg-amber-500 text-white py-1 px-2 rounded-full">解锁</button>
+                            <div class="absolute -top-1 -right-1 bg-red-500 text-white text-xs px-1.5 py-0.5 rounded-full">新</div>
+                        </div>
+                        
+                        <div class="flex items-center p-2 border border-gray-200 rounded-md relative">
+                            <input type="radio" name="theme" id="theme3" class="w-4 h-4 text-amber-500">
+                            <div class="ml-3 flex-1">
+                                <div class="text-sm font-medium">迪士尼奇幻</div>
+                                <div class="text-xs text-gray-500">特色主题 · 15元/小时</div>
+                            </div>
+                            <button class="text-xs bg-amber-500 text-white py-1 px-2 rounded-full">解锁</button>
+                        </div>
+                        
+                        <div class="flex items-center p-2 border border-gray-200 rounded-md relative">
+                            <input type="radio" name="theme" id="theme4" class="w-4 h-4 text-amber-500">
+                            <div class="ml-3 flex-1">
+                                <div class="text-sm font-medium">奇幻冒险</div>
+                                <div class="text-xs text-gray-500">特色主题 · 12元/小时</div>
+                            </div>
+                            <button class="text-xs bg-amber-500 text-white py-1 px-2 rounded-full">解锁</button>
+                        </div>
+                    </div>
+                </div>
+                
+                <!-- 游戏难度 -->
+                <div class="mb-3">
+                    <label class="block text-sm text-gray-700 mb-1">游戏难度</label>
+                    <div class="flex space-x-2">
+                        <button id="easy" class="flex-1 py-2 bg-amber-500 text-white text-sm rounded-md difficulty-btn">简单</button>
+                        <button id="medium" class="flex-1 py-2 bg-gray-200 text-gray-700 text-sm rounded-md difficulty-btn">中等</button>
+                        <button id="hard" class="flex-1 py-2 bg-gray-200 text-gray-700 text-sm rounded-md difficulty-btn">困难</button>
+                    </div>
+                </div>
+                
+                <!-- 题目选择 -->
+                <div class="mb-3">
+                    <div class="flex justify-between items-center mb-2">
+                        <label class="text-sm text-gray-700">题目选择</label>
+                        <button id="randomBtn" class="text-xs bg-amber-100 text-amber-700 py-1 px-2 rounded-md flex items-center">
+                            <i class="fas fa-random mr-1"></i> 随机题目
+                        </button>
+                    </div>
+                    
+                    <div id="puzzleSelection" class="space-y-2">
+                        <div class="flex items-center p-2 border border-gray-200 rounded-md">
+                            <input type="radio" name="puzzle" id="puzzle1" checked class="w-4 h-4 text-amber-500">
+                            <div class="ml-3">
+                                <div class="text-sm font-medium">神秘的手表</div>
+                                <div class="text-xs text-gray-500">简单 · 平均用时25分钟</div>
+                            </div>
+                        </div>
+                        
+                        <div class="flex items-center p-2 border border-gray-200 rounded-md">
+                            <input type="radio" name="puzzle" id="puzzle2" class="w-4 h-4 text-amber-500">
+                            <div class="ml-3">
+                                <div class="text-sm font-medium">迷路的青蛙</div>
+                                <div class="text-xs text-gray-500">中等 · 平均用时35分钟</div>
+                            </div>
+                        </div>
+                        
+                        <div class="flex items-center p-2 border border-gray-200 rounded-md">
+                            <input type="radio" name="puzzle" id="puzzle3" class="w-4 h-4 text-amber-500">
+                            <div class="ml-3">
+                                <div class="text-sm font-medium">消失的邮轮</div>
+                                <div class="text-xs text-gray-500">困难 · 平均用时50分钟</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 玩家列表 -->
+            <div class="p-3">
+                <h3 class="font-medium mb-2">玩家 (<span id="currentPlayers">3</span>/<span id="maxPlayers">10</span>)</h3>
+                
+                <div class="space-y-2">
+                    <!-- 主持人（我） -->
+                    <div class="flex items-center p-2 bg-amber-50 rounded-lg border border-amber-200">
+                        <div class="w-10 h-10 rounded-full overflow-hidden mr-3 border-2 border-amber-500">
+                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=40&h=40&q=80" class="w-full h-full object-cover" alt="用户头像">
+                        </div>
+                        <div class="flex-1">
+                            <div class="font-medium flex items-center">
+                                小明 (我)
+                                <span class="ml-2 text-xs host-badge px-1.5 py-0.5 rounded-full">主持人</span>
+                            </div>
+                            <div class="text-xs text-amber-600 user-status ready">选择中题目和难度...</div>
+                        </div>
+                    </div>
+                    
+                    <!-- 玩家1 -->
+                    <div class="flex items-center p-2 bg-gray-50 rounded-lg">
+                        <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
+                            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=40&h=40&q=80" class="w-full h-full object-cover" alt="用户头像">
+                        </div>
+                        <div class="flex-1">
+                            <div class="font-medium">小红</div>
+                            <div class="text-xs user-status ready">
+                                <i class="fas fa-check-circle mr-1"></i> 已准备
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- 玩家2 -->
+                    <div class="flex items-center p-2 bg-gray-50 rounded-lg">
+                        <div class="w-10 h-10 rounded-full overflow-hidden mr-3">
+                            <img src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=40&h=40&q=80" class="w-full h-full object-cover" alt="用户头像">
+                        </div>
+                        <div class="flex-1">
+                            <div class="font-medium">小王</div>
+                            <div class="text-xs user-status not-ready">
+                                <i class="fas fa-clock mr-1"></i> 等待准备
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- 游戏说明 -->
+            <div class="p-3 bg-gray-50 mb-3">
+                <h3 class="font-medium mb-2 text-sm">游戏说明</h3>
+                <p class="text-xs text-gray-700">
+                    海龟汤是一种解谜类游戏，游戏开始时，主持人会给出一个离奇古怪的情境（汤面），玩家需要通过提问获取更多线索，最终解开谜题找出真相（汤底）。
+                </p>
+            </div>
+            
+            <!-- 主持人视图的按钮 -->
+            <div class="p-3 sticky bottom-0 bg-white border-t border-gray-200">
+                <a href="game-turtle-host.html" class="app-button primary w-full flex justify-center items-center">
+                    <i class="fas fa-play-circle mr-1"></i> 开始游戏 (<span id="readyCount">1</span>/<span id="totalPlayers">3</span>人已准备)
+                </a>
+            </div>
+        </div>
+        
+        <!-- 引入底部导航栏 -->
+        <iframe src="../components/nav-bar.html" frameborder="0" scrolling="no" style="width:100%; height:50px; overflow:hidden; position:fixed; bottom:0;"></iframe>
+    </div>
+    
+    <script>
+        document.addEventListener("DOMContentLoaded", function() {
+            // 阻止页面跳转，以便预览
+            if (window.location.href.indexOf('?nocheck=1') > -1 || window.location.href.indexOf('?t=') > -1) {
+                console.log('预览模式，禁止跳转');
+                return;
+            }
+            
+            // 检查是否为主持人
+            const currentRoom = JSON.parse(localStorage.getItem('currentRoom') || '{}');
+            if (!currentRoom.isHost) {
+                // 如果不是主持人，跳转到玩家等待页面
+                window.location.href = 'room-waiting-player.html';
+                return;
+            }
+            
+            // 填充房间信息
+            document.getElementById('roomName').textContent = currentRoom.name || '欢乐海龟汤';
+            document.getElementById('roomCode').textContent = currentRoom.id || 'ABC123';
+            document.getElementById('playerCount').textContent = currentRoom.currentPlayers || 3;
+            document.getElementById('currentPlayers').textContent = currentRoom.currentPlayers || 3;
+            document.getElementById('maxPlayers').textContent = currentRoom.maxPlayers || 10;
+            document.getElementById('totalPlayers').textContent = currentRoom.currentPlayers || 3;
+            
+            // 假设第一个玩家已准备，总共三个玩家（包括主持人）
+            document.getElementById('readyCount').textContent = 1;
+            
+            // 分享按钮功能
+            const shareBtn = document.getElementById('shareBtn');
+            const shareOptions = document.getElementById('shareOptions');
+            
+            shareBtn.addEventListener('click', function() {
+                if (shareOptions.style.display === 'block') {
+                    shareOptions.style.display = 'none';
+                } else {
+                    shareOptions.style.display = 'block';
+                }
+            });
+            
+            // 点击其他地方关闭分享选项
+            document.addEventListener('click', function(e) {
+                if (!shareBtn.contains(e.target) && !shareOptions.contains(e.target)) {
+                    shareOptions.style.display = 'none';
+                }
+            });
+            
+            // 复制房间码功能
+            const copyBtn = document.getElementById('copyBtn');
+            copyBtn.addEventListener('click', function() {
+                const roomCode = document.getElementById('roomCode').textContent;
+                navigator.clipboard.writeText(roomCode).then(function() {
+                    copyBtn.innerHTML = '<i class="fas fa-check mr-1"></i> 已复制';
+                    setTimeout(function() {
+                        copyBtn.innerHTML = '<i class="far fa-copy mr-1"></i> 复制';
+                    }, 2000);
+                });
+            });
+            
+            // 难度选择
+            const difficultyBtns = document.querySelectorAll('.difficulty-btn');
+            difficultyBtns.forEach(btn => {
+                btn.addEventListener('click', function() {
+                    difficultyBtns.forEach(b => {
+                        b.classList.remove('bg-amber-500', 'text-white');
+                        b.classList.add('bg-gray-200', 'text-gray-700');
+                    });
+                    this.classList.remove('bg-gray-200', 'text-gray-700');
+                    this.classList.add('bg-amber-500', 'text-white');
+                });
+            });
+            
+            // 随机题目按钮功能
+            const randomBtn = document.getElementById('randomBtn');
+            const puzzleSelection = document.getElementById('puzzleSelection');
+            const puzzleRadios = document.querySelectorAll('input[name="puzzle"]');
+            
+            randomBtn.addEventListener('click', function() {
+                // 随机选择一个题目
+                const randomIndex = Math.floor(Math.random() * puzzleRadios.length);
+                puzzleRadios.forEach((radio, index) => {
+                    radio.checked = (index === randomIndex);
+                });
+                
+                // 闪烁显示效果
+                puzzleSelection.classList.add('opacity-50');
+                setTimeout(() => {
+                    puzzleSelection.classList.remove('opacity-50');
+                }, 300);
+                
+                // 选中的题目滚动到可见区域
+                const selectedPuzzle = puzzleRadios[randomIndex].closest('.flex');
+                if(selectedPuzzle) {
+                    selectedPuzzle.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+                }
+                
+                // 显示随机选择成功提示
+                randomBtn.innerHTML = '<i class="fas fa-check-circle mr-1"></i> 已随机选择';
+                randomBtn.classList.add('bg-green-100', 'text-green-700');
+                randomBtn.classList.remove('bg-amber-100', 'text-amber-700');
+                
+                setTimeout(() => {
+                    randomBtn.innerHTML = '<i class="fas fa-random mr-1"></i> 随机题目';
+                    randomBtn.classList.remove('bg-green-100', 'text-green-700');
+                    randomBtn.classList.add('bg-amber-100', 'text-amber-700');
+                }, 1500);
+            });
+        });
+    </script>
+</body>
+</html> 

lineforfun/request.md

@@ -0,0 +1,3 @@
+请你阅读README文件中的要求，现在需要输出高保真的原型图，请通过以下方式帮我完成所有界面的原型设计，并确保这些原型界面可以直接用于开发 ：
+1、HTML 原型实现：使用 HTML + Tailwind CSS（或 Bootstrap）生成所有原型界面，并使用 FontAwesome（或其他开源 UI 组件）让界面更加精美、接近真实的 App 设计。拆分代码文件，保持结构清晰：
+2、每个界面应作为独立的 HTML 文件存放，例如 home.html、profile.html、settings.html 等。index.html 作为主入口，不直接写入所有界面的 HTML 代码，而是使用 iframe 的方式嵌入这些 HTML 片段，并将所有页面直接平铺展示在 index 页面中，而不是跳转链接。真实感增强：- 界面尺寸应模拟 iPhone 15 Pro，并让界面圆角化，使其更像真实的手机界面。 使用真实的 UI 图片，而非占位符图片（可从 Unsplash、Pexels、Apple 官方 UI 资源中选择）。 添加顶部状态栏（模拟 iOS 状态栏），并包含 App 导航栏（类似 iOS 底部 Tab Bar）。请按照以上要求生成完整的 HTML 代码，并确保其可用于实际开发。