78 lines
3.8 KiB
HTML
78 lines
3.8 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>สร้างห้องเกม — 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@500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css?v=0.021">
|
|
</head>
|
|
<body>
|
|
<div class="create-bg" aria-hidden="true">
|
|
<div class="create-bg-grid"></div>
|
|
<img src="/Main-Menu/bg.png" alt="" class="create-bg-img">
|
|
</div>
|
|
<div class="create-char-layer" aria-hidden="true">
|
|
<img src="/Main-Menu/char-main.png" alt="" class="create-char-img">
|
|
</div>
|
|
<div class="create-vignette" aria-hidden="true"></div>
|
|
|
|
<div class="create-ui">
|
|
<button type="button" class="menu-btn-back" id="btn-back" aria-label="ย้อนกลับ">
|
|
<img src="/Main-Menu/IMAGE/btn-back.png" alt="ย้อนกลับ" class="menu-btn-back-img" role="presentation" decoding="async">
|
|
</button>
|
|
|
|
<main class="create-content">
|
|
<h1 class="create-title">สร้างห้องเกม</h1>
|
|
|
|
<section class="create-panel" aria-label="ฟอร์มสร้างห้อง">
|
|
<div class="create-field">
|
|
<label class="create-label" for="create-room-name">ชื่อห้อง :</label>
|
|
<div class="create-input-shell">
|
|
<input type="text" id="create-room-name" class="create-input" maxlength="48" autocomplete="off" spellcheck="false" placeholder="ตั้งชื่อห้อง">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="create-field">
|
|
<span class="create-label" id="mode-label">โหมด :</span>
|
|
<div class="create-mode-row" role="tablist" aria-labelledby="mode-label">
|
|
<button type="button" class="create-mode-btn create-mode-btn--active" id="tab-public" role="tab" aria-selected="true">ห้องสาธารณะ</button>
|
|
<button type="button" class="create-mode-btn" id="tab-private" role="tab" aria-selected="false">ห้องส่วนตัว</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="create-private-block" class="create-private-block create-view--hidden" role="tabpanel">
|
|
<div class="create-pass-row">
|
|
<div>
|
|
<span class="create-label create-label--inline">PASSWORD :</span>
|
|
<span class="create-pass-sub">(รหัสผ่าน 4 ตัว)</span>
|
|
</div>
|
|
<div class="create-input-shell create-input-shell--pin">
|
|
<input type="text" id="create-private-pin" class="create-input create-input--pin" placeholder="0000" maxlength="4" inputmode="numeric" autocomplete="off" aria-label="รหัสผ่าน 4 หลัก">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="create-field create-field--players">
|
|
<span class="create-label" id="players-label">จำนวนผู้เล่น :</span>
|
|
<div class="create-num-grid" id="create-player-btns" role="group" aria-labelledby="players-label"></div>
|
|
</div>
|
|
|
|
<div class="create-summary" id="create-summary" aria-live="polite">สรุปจำนวน : 3 ผู้เล่น + 3 Bot</div>
|
|
|
|
<button type="button" class="create-confirm" id="btn-confirm" aria-label="ยืนยันสร้างห้อง">
|
|
<span class="create-confirm-glow"></span>
|
|
<span class="create-confirm-text">ยืนยัน</span>
|
|
</button>
|
|
|
|
<p class="create-status" id="create-status" role="status"></p>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="create-room.js?v=0.028"></script>
|
|
</body>
|
|
</html>
|