LINXIVERSE
/
prototype-design


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