Fokusnya: mempermudah testing dan penggunaan awal di Android (Chrome) tanpa perlu build APK native dulu. Nantinya bisa dibungkus jadi aplikasi Android (WebView / TWA) jika dibutuhkan.

Struktur

index.html — halaman utama device absensi
styles.css — styling mobile-first (tombol besar, UI simpel untuk layar sentuh)
app.js — logic pemanggilan API backend /api/attendance/checkin

Fitur

Simpan Backend URL, device_code, dan api_key di localStorage.
Ambil lokasi GPS lewat navigator.geolocation dan kirim ke backend.
Form sederhana untuk input student_id (sementara, menunggu integrasi Face Recognition / QR).
Tampilkan hasil status:
- PRESENT, LATE, OUTSIDE_ZONE, NO_SCHEDULE, INVALID_DEVICE, dll.
Desain UI:
- Satu kolom, tombol besar, teks jelas, nyaman dipakai di HP Android (Chrome).

Cara Menjalankan (dev)

Pastikan backend jalan di misalnya:
- http://localhost/sman1/backend/public
- atau IP di jaringan lokal, misal http://192.168.1.10/sman1/backend/public
Buka folder mobile di VSCode / editor.
Jalankan static server sederhana (opsi):
- Dengan PHP:
```
cd mobile
php -S localhost:8001
```
  Lalu buka http://localhost:8001 di browser Android.
- Atau cukup buka index.html langsung di browser (double click), tapi lebih baik lewat HTTP.
Di HP Android (Chrome):
- Akses: http://IP_LAPTOP:8001 (misal http://192.168.1.10:8001).
- Masukkan:
  - Backend URL: http://IP_LAPTOP/sman1/backend/public
  - Device Code dan API Key dari halaman Device Absen di dashboard.
- Isi ID Siswa, pastikan ada jadwal aktif dan zona device sudah diatur.
- Tekan Check-in Sekarang.

Integrasi Lanjutan

Ke depan, layar ini bisa dikembangkan menjadi:

Integrasi kamera + Face Recognition (panggil external engine, hanya kirim student_id ke backend).
Scan QR code untuk student_id.
Pembatasan UI (mode kiosk) untuk dipasang di tablet di gerbang sekolah.