88 lines
4.4 KiB
HTML
88 lines
4.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>เข้าร่วมเกม — JD JUSTICE DIVERS</title>
|
|
<link rel="stylesheet" href="style.css?v=0.004">
|
|
</head>
|
|
<body>
|
|
<div class="join-bg" role="img" aria-label="พื้นหลัง">
|
|
<img src="../Main-Menu/bg.png" alt="" class="join-bg-img" role="presentation">
|
|
</div>
|
|
<div class="join-char-layer" aria-hidden="true" role="img">
|
|
<img src="../Main-Menu/char-main.png" alt="" class="join-char-img" role="presentation">
|
|
</div>
|
|
<div class="join-vignette" aria-hidden="true"></div>
|
|
|
|
<div class="join-ui">
|
|
<div class="join-back-section">
|
|
<button type="button" class="join-btn-back" id="btn-back" aria-label="ย้อนกลับ">
|
|
<img src="../Main-Menu/IMAGE/btn-back.png" alt="" class="join-btn-back-img" role="presentation">
|
|
</button>
|
|
</div>
|
|
|
|
<div class="join-content">
|
|
<header class="join-header">
|
|
<img src="IMAGE/txt-joinroom.png" alt="เข้าร่วมเกม" class="join-title-img" role="presentation">
|
|
<img src="IMAGE/line.png" alt="" class="join-title-line" aria-hidden="true" role="presentation">
|
|
</header>
|
|
|
|
<div class="join-tabs" role="tablist" aria-label="เลือกประเภทห้อง">
|
|
<button type="button" class="join-tab" id="tab-public" role="tab" aria-selected="true" aria-controls="join-public-view">
|
|
<img src="IMAGE/btn-publish-room-h.png" alt="ห้องสาธารณะ" class="join-tab-img" id="tab-img-public" role="presentation">
|
|
</button>
|
|
<button type="button" class="join-tab" id="tab-private" role="tab" aria-selected="false" aria-controls="join-private-view">
|
|
<img src="IMAGE/btn-private-room.png" alt="ห้องส่วนตัว" class="join-tab-img" id="tab-img-private" role="presentation">
|
|
</button>
|
|
</div>
|
|
|
|
<div class="join-panel">
|
|
<div id="join-public-view" class="join-view" role="tabpanel">
|
|
<div class="join-list-scroll">
|
|
<div class="join-list" id="room-list-public" aria-label="รายการห้องสาธารณะ"></div>
|
|
<div class="join-scrollbar-thumb" id="join-scrollbar-thumb" aria-hidden="true"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="join-private-view" class="join-view join-view--hidden" role="tabpanel">
|
|
<div class="join-private-form">
|
|
<div class="join-private-row">
|
|
<img src="IMAGE/txt-room-id.png" alt="" class="join-private-label-img" role="presentation">
|
|
<div class="join-textfield-wrap">
|
|
<input type="text" id="join-private-room-id" class="join-textfield-input" placeholder="" maxlength="32" autocomplete="off" spellcheck="false" aria-label="รหัสห้อง">
|
|
</div>
|
|
</div>
|
|
<div class="join-private-row">
|
|
<img src="IMAGE/txt-password_1.png" alt="" class="join-private-label-img join-private-label-img--pass" role="presentation">
|
|
<div class="join-textfield-wrap">
|
|
<input type="text" id="join-private-password" class="join-textfield-input join-textfield-input--code" placeholder="0000" maxlength="4" inputmode="numeric" autocomplete="off" aria-label="รหัสผ่าน 4 หลัก">
|
|
</div>
|
|
</div>
|
|
<button type="button" class="join-private-submit" id="btn-private-join" aria-label="เข้าร่วมห้องส่วนตัว">
|
|
<img src="IMAGE/btn-join-room-2.png" alt="เข้าร่วม" class="join-private-submit-img" role="presentation">
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<template id="tpl-room-row">
|
|
<div class="join-room-row">
|
|
<div class="join-room-row-inner">
|
|
<span class="join-room-name"></span>
|
|
<span class="join-room-players"></span>
|
|
<button type="button" class="join-room-btn">
|
|
<img src="IMAGE/btn-join-room.png" alt="เข้าร่วม" class="join-room-btn-img" role="presentation">
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script src="../app-base.js?v=2"></script>
|
|
<script src="../Game/js/display-name.js?v=2"></script>
|
|
<script src="join.js?v=0.004"></script>
|
|
</body>
|
|
</html>
|