LINXIVERSE
/
miniprogram-lineforfun


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
							<!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>