49 lines
2.1 KiB
HTML
49 lines
2.1 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 Menu — JD JUSTICE DIVERS</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<!-- พื้นหลังจาก Login -->
|
|
<div class="menu-bg" role="img" aria-label="พื้นหลัง">
|
|
<img src="bg.png" alt="" class="menu-bg-img" role="presentation">
|
|
</div>
|
|
<!-- ตัวละคร -->
|
|
<div class="menu-char-layer" aria-hidden="true" role="img">
|
|
<img src="char-main.png" alt="" class="menu-char-img" role="presentation">
|
|
</div>
|
|
<!-- Vignette fade สีดำ -->
|
|
<div class="menu-vignette" aria-hidden="true"></div>
|
|
|
|
<div class="menu-ui">
|
|
<!-- ปุ่มย้อนกลับ มุมซ้ายบน -->
|
|
<button type="button" class="menu-btn-back" id="btn-back" aria-label="ย้อนกลับ">
|
|
<img src="IMAGE/btn-back.png" alt="ย้อนกลับ" class="menu-btn-back-img" role="presentation">
|
|
</button>
|
|
|
|
<!-- Logo กลางบน -->
|
|
<div class="menu-logo">
|
|
<img src="IMAGE/logo-main.png" alt="JD JUSTICE DIVERS" class="menu-logo-img" role="presentation">
|
|
</div>
|
|
|
|
<!-- ปุ่มหลัก 3 ปุ่มกลาง -->
|
|
<div class="menu-buttons">
|
|
<button type="button" class="menu-btn-create" id="btn-create-room" aria-label="สร้างห้อง">
|
|
<img src="IMAGE/btn-create-room.png" alt="สร้างห้อง" class="menu-btn-create-img" role="presentation">
|
|
</button>
|
|
<button type="button" class="menu-btn-join" id="btn-join" aria-label="เข้าร่วม">
|
|
<img src="IMAGE/btn-join.png" alt="เข้าร่วม" class="menu-btn-join-img" role="presentation">
|
|
</button>
|
|
<button type="button" class="menu-btn-exit" id="btn-exit-game" aria-label="ออกจากเกม">
|
|
<img src="IMAGE/btn-exit-game.png" alt="ออกจากเกม" class="menu-btn-exit-img" role="presentation">
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="menu.js"></script>
|
|
</body>
|
|
</html>
|