156 lines
8.4 KiB
HTML
156 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="th">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
|
<title>Main Lobby — JD JUSTICE DIVERS</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css?v=0.0156">
|
|
</head>
|
|
<body class="lobby-page">
|
|
<div class="lobby-bg" role="img" aria-label="พื้นหลัง">
|
|
<img src="IMAGE/BG-Main-Lobby.png" alt="" class="lobby-bg-img" role="presentation" decoding="async">
|
|
</div>
|
|
<div class="lobby-vignette" aria-hidden="true"></div>
|
|
|
|
<div class="lobby-ui">
|
|
<header class="lobby-header">
|
|
<div class="lobby-profile-panel">
|
|
<img src="IMAGE/profile-bg.png" alt="" class="lobby-profile-bg" role="presentation" decoding="async">
|
|
<div class="lobby-profile-inner">
|
|
<div class="lobby-avatar-wrap">
|
|
<img src="/Main-Menu/char-main.png" alt="" class="lobby-avatar-mask" id="lobby-profile-avatar" width="64" height="64" decoding="async">
|
|
</div>
|
|
<div class="lobby-profile-info">
|
|
<p class="lobby-profile-name" id="lobby-profile-name">MONE</p>
|
|
<p class="lobby-profile-meta">AGENT ID : <span id="lobby-profile-agent-id">001998</span></p>
|
|
<p class="lobby-profile-coins">
|
|
<img src="IMAGE/coin-JD.png" alt="" class="lobby-coin-icon" role="presentation" width="18" height="18" decoding="async">
|
|
COINS : <span id="lobby-profile-coins">0</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="lobby-news-wrap">
|
|
<img src="IMAGE/news-banner-bg.png" alt="" class="lobby-news-bg" role="presentation" decoding="async">
|
|
<img src="IMAGE/news.png" alt="ข่าวสารศูนย์บัญชาการ" class="lobby-news-img" role="presentation" decoding="async">
|
|
</div>
|
|
<div class="lobby-header-row2-left">
|
|
<button type="button" class="lobby-btn-tutorial" id="btn-tutorial" title="วิธีเล่น" aria-label="วิธีเล่น">
|
|
<img src="IMAGE/btn-tutorial.png" alt="" class="lobby-btn-tutorial-img" role="presentation" decoding="async">
|
|
</button>
|
|
</div>
|
|
<button type="button" class="lobby-btn-daily" id="btn-daily" aria-label="รางวัลประจำวัน">
|
|
<img src="IMAGE/daily-rewards.png" alt="" class="lobby-daily-img" role="presentation" decoding="async">
|
|
<span class="lobby-daily-dot" aria-hidden="true"></span>
|
|
</button>
|
|
</header>
|
|
|
|
<div class="lobby-character-area">
|
|
<div class="lobby-center-left">
|
|
<button type="button" class="lobby-btn-cloth" id="btn-cloth" aria-label="ห้องแต่งตัว">
|
|
<img src="IMAGE/btn-cloth.png" alt="" class="lobby-btn-cloth-img" role="presentation" decoding="async">
|
|
</button>
|
|
</div>
|
|
<div class="lobby-character-center" id="lobby-character-center" aria-hidden="true">
|
|
<img id="lobby-character-img" src="" alt="" class="lobby-character-img" width="256" height="256" decoding="async">
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="lobby-leaderboard" aria-label="กระดานผู้นำ">
|
|
<img src="IMAGE/leaderboard-bg.png" alt="" class="lobby-leaderboard-bg" role="presentation" decoding="async">
|
|
<div class="lobby-leaderboard-inner">
|
|
<ul class="lobby-leaderboard-list">
|
|
<li>
|
|
<img src="IMAGE/leaderboard-1.png" alt="" role="presentation" decoding="async">
|
|
<span>Mixie Kim</span>
|
|
<span>9999</span>
|
|
</li>
|
|
<li>
|
|
<img src="IMAGE/leaderboard-2.png" alt="" role="presentation" decoding="async">
|
|
<span>Golden L.</span>
|
|
<span>9951</span>
|
|
</li>
|
|
<li>
|
|
<img src="IMAGE/leaderboard-3.png" alt="" role="presentation" decoding="async">
|
|
<span>Lilly 991</span>
|
|
<span>9552</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</aside>
|
|
|
|
<footer class="lobby-footer">
|
|
<div class="lobby-footer-left">
|
|
<button type="button" class="lobby-btn-ai-chat" id="btn-ai-chat" aria-label="เทพความรู้">
|
|
<img src="IMAGE/BTN-AI-ChatBOT.png" alt="" class="lobby-btn-ai-chat-img" role="presentation" decoding="async">
|
|
</button>
|
|
</div>
|
|
<div class="lobby-footer-center">
|
|
<button type="button" class="lobby-btn-start" id="btn-start-mission" aria-label="ไปเมนูหลัก" data-href="/Main-Menu/">
|
|
<img src="IMAGE/btn-start-mission.png" alt="" class="lobby-btn-start-img" role="presentation" decoding="async">
|
|
</button>
|
|
<button type="button" class="lobby-btn-quiz" id="btn-quiz-battle" aria-label="ห้องเกมตอบคำถาม" data-href="/Quiz-Battle/">
|
|
<img src="IMAGE/btn-quix%20battle.png" alt="" class="lobby-btn-quiz-img" role="presentation" decoding="async">
|
|
</button>
|
|
</div>
|
|
<div class="lobby-footer-right">
|
|
<button type="button" class="lobby-btn-profile" id="btn-myprofile" aria-label="โปรไฟล์ของฉัน">
|
|
<img src="IMAGE/btn-myprofile.png" alt="" class="lobby-btn-profile-img" role="presentation" decoding="async">
|
|
</button>
|
|
</div>
|
|
</footer>
|
|
|
|
<div id="lobby-guide-dim" class="lobby-guide-dim hidden" aria-hidden="true"></div>
|
|
<div class="lobby-guide-bar hidden" id="lobby-guide-bar" role="dialog" aria-modal="true" aria-labelledby="guide-img-label">
|
|
<span id="guide-img-label" class="sr-only">คำแนะนำทีละขั้น</span>
|
|
<div class="lobby-guide-frame">
|
|
<img src="/Main-Lobby/IMAGE/guide/guide-01.png" alt="คำแนะนำ" class="lobby-guide-img" id="guide-img" decoding="async">
|
|
<button type="button" class="lobby-guide-next" id="btn-guide-next" aria-label="ถัดไป">
|
|
<img src="/Main-Lobby/IMAGE/guide/btn-next.png" alt="" decoding="async">
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- แชท AI — API เดียวกับ room-lobby -->
|
|
<div id="lobby-ai-chat-panel" class="lobby-ai-chat-panel lobby-ai-chat-hidden" role="dialog" aria-label="เทพความรู้">
|
|
<div class="lobby-ai-chat-header">
|
|
<span class="lobby-ai-chat-title">
|
|
<img src="/Game/img/ai-chat-header.png" alt="คุยกับ AI" decoding="async">
|
|
<img src="/Game/img/ai-chat-title-label.png" alt="เทพความรู้" class="lobby-ai-chat-title-label" decoding="async">
|
|
</span>
|
|
<button type="button" class="lobby-ai-chat-close" id="lobby-ai-chat-close-btn" title="ปิดแชท AI" aria-label="ปิดแชท AI">
|
|
<img src="/Game/img/chat-close-btn.png" alt="ปิด" id="lobby-ai-chat-toggle-img" width="50" height="50" decoding="async">
|
|
</button>
|
|
</div>
|
|
<div id="lobby-ai-chat-messages" class="lobby-ai-chat-messages"></div>
|
|
<form id="lobby-ai-chat-form" class="lobby-ai-chat-form">
|
|
<input id="lobby-ai-chat-input" type="text" placeholder="Type a here..." autocomplete="off" aria-label="ข้อความถึง AI">
|
|
<button type="submit" class="lobby-ai-chat-send" title="ส่ง" aria-label="ส่ง">
|
|
<img src="/Game/img/chat-btn-send.png" alt="" decoding="async">
|
|
</button>
|
|
</form>
|
|
<p class="lobby-ai-chat-admin-link"><a href="/Game/ai-admin.html" target="_blank" rel="noopener noreferrer">ตั้งค่า AI (Admin)</a></p>
|
|
</div>
|
|
|
|
<div id="lobby-howto-overlay" class="lobby-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="lobby-howto-title">
|
|
<div class="lobby-howto-inner">
|
|
<h2 id="lobby-howto-title" class="sr-only">วิธีเล่น</h2>
|
|
<img src="IMAGE/Howto/howtoplay.png" alt="วิธีเล่น" decoding="async">
|
|
<div class="lobby-howto-close">
|
|
<button type="button" class="lobby-icon-btn" id="btn-howto-got-it" aria-label="เข้าใจแล้ว">
|
|
<img src="IMAGE/Howto/btn-got-it.png" alt="" decoding="async" onerror="this.style.display='none'; this.parentElement.textContent='ปิด';">
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="lobby-toast" class="lobby-toast" role="status" aria-live="polite"></div>
|
|
|
|
<script src="lobby.js?v=0.0156"></script>
|
|
</body>
|
|
</html>
|