<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>LINE Notify Integration</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="container text-center">
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTCeRYOp8_9mPAKBqyC57w2C5tNpSPZZrB3_7OfYu_uqg&s"
alt="โลโก้"
class="mb-2"
height="150"
/>
<h5>ระบบลงทะเบียนแจ้งเตือน เช็คชื่อเข้า ออก หอพัก</h5>
<h5>โรงเรียน เลิร์นสาธิตพัฒนา</h5>
</div>
<div class="form-container">
<div class="mb-2">
<strong>ข้อมูลบุตรของท่าน</strong>
</div>
<form id="userForm">
<div class="mb-3">
<label for="fullName" class="form-label">ชื่อ-นามสกุล บุตร</label>
<input type="text" class="form-control" id="fullName" required />
</div>
<div class="mb-3">
<label for="nickname" class="form-label">ชื่อเล่น</label>
<input type="text" class="form-control" id="nickname" required />
</div>
<p>
<strong>เงื่อนไขการเก็บข้อมูล</strong><br />
1. ระบบจัดเก็บข้อมูลชื่อ นามสกุล บุตรของท่าน
ตามระยะเวลาที่เข้าพักในหอพักของโรงเรียน<br />
2. ระบบจะเก็บข้อมูล Token LINE Application เพื่อยืนยันตัวตน
และส่งแจ้งเตือนให้ทราบ ทุกวัน ตามเวลาที่ครูผู้ดูแลหอพัก
เช็ครายชื่อนักเรียน
</p>
<div class="form-check mb-3">
<input
type="checkbox"
class="form-check-input"
id="termsCheckbox"
required
/>
<label class="form-check-label" for="termsCheckbox">
<strong>ยอมรับเงื่อนไข</strong>
</label>
</div>
<div class="text-center">
<button type="submit" class="btn btn-success" id="authButton">
ลงทะเบียน
</button>
</div>
</form>
</div>
<div id="successContainer" style="display: none">
<p>เชื่อมต่อ Line Notify สำเร็จแล้ว!</p>
</div>
<script src="script.js" defer></script>
</body>
</html>