feat: mobile face attendance integration

README.md

@@ -0,0 +1,60 @@
+# SMAN1 Mobile Device Client (Web/PWA)
+
+Aplikasi web mobile-first untuk **perangkat absensi** yang terhubung ke backend CodeIgniter 4.
+
+> 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)
+
+1. Pastikan backend jalan di misalnya:
+   - `http://localhost/sman1/backend/public`
+   - atau IP di jaringan lokal, misal `http://192.168.1.10/sman1/backend/public`
+
+2. Buka folder `mobile` di VSCode / editor.
+
+3. Jalankan static server sederhana (opsi):
+
+   - Dengan PHP:
+
+     ```bash
+     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.
+
+4. 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.
+