LINXIVERSE
/
miniprogram-lineforfun


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