129 lines
5.3 KiB
HTML
129 lines
5.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Tambah Pengunjung Baru</title>
|
|
<link rel="stylesheet" href="../assets/css/login.css">
|
|
<link rel="stylesheet" href="../assets/css/tambah_pengunjung.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
|
</head>
|
|
<body>
|
|
<div class="login-container">
|
|
<div class="login-left">
|
|
<div class="logo">🎮 Playground</div>
|
|
<div class="welcome-text">
|
|
Daftarkan pengunjung baru untuk<br>
|
|
bermain di wahana playground
|
|
</div>
|
|
</div>
|
|
|
|
<div class="login-right">
|
|
<form class="login-form" id="addVisitorForm">
|
|
<h2>Tambah Pengunjung Baru</h2>
|
|
<p>Daftarkan anak untuk bermain di playground</p>
|
|
|
|
<div id="errorMessage" class="error-message">
|
|
Terjadi kesalahan saat mendaftarkan pengunjung
|
|
</div>
|
|
|
|
<div id="successMessage" class="success-message">
|
|
Pengunjung berhasil didaftarkan!
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="namaAnak">Nama Anak</label>
|
|
<input type="text" id="namaAnak" name="namaAnak" class="form-input" required
|
|
placeholder="Masukkan nama lengkap anak">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="kodeGelang">Kode Gelang</label>
|
|
<input type="text" id="kodeGelang" name="kodeGelang" class="form-input"
|
|
placeholder="Scan gelang atau masukkan manual" readonly>
|
|
<div class="scan-info">
|
|
<i class="fas fa-info-circle"></i>
|
|
<span>Silakan scan gelang RFID terlebih dahulu</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="noHpOrtu">No HP Orang Tua</label>
|
|
<input type="tel" id="noHpOrtu" name="noHpOrtu" class="form-input" required
|
|
placeholder="Masukkan nomor HP orang tua">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="durasi">Durasi Bermain</label>
|
|
<select id="durasi" name="durasi" class="form-select" required>
|
|
<option value="">Pilih durasi bermain</option>
|
|
<option value="30">30 Menit</option>
|
|
<option value="60">1 Jam</option>
|
|
<option value="90">1.5 Jam</option>
|
|
<option value="120">2 Jam</option>
|
|
<option value="180">3 Jam</option>
|
|
<option value="240">4 Jam</option>
|
|
</select>
|
|
<div class="price-display" id="priceDisplay">
|
|
Pilih durasi untuk melihat harga
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="login-btn" id="submitBtn">
|
|
<span class="loading-spinner" id="loadingSpinner"></span>
|
|
<span id="btnText">Daftarkan Pengunjung</span>
|
|
</button>
|
|
|
|
<a href="dashboard.html" class="back-link">
|
|
<i class="fas fa-arrow-left"></i>
|
|
Kembali ke Dashboard
|
|
</a>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="endSessionModal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>Gelang Sedang Digunakan</h3>
|
|
<p>Gelang ini sedang digunakan oleh pengunjung lain</p>
|
|
</div>
|
|
|
|
<div id="currentUserInfo" class="current-user-info">
|
|
</div>
|
|
|
|
<div class="modal-buttons">
|
|
<button id="endSessionBtn" class="modal-btn modal-btn-primary">
|
|
<i class="fas fa-stop-circle"></i>
|
|
Akhiri Permainan
|
|
</button>
|
|
<button id="cancelEndBtn" class="modal-btn modal-btn-secondary">
|
|
<i class="fas fa-times"></i>
|
|
Batal
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="unknownRfidModal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3>Gelang Tidak Dikenali</h3>
|
|
<p>Kode gelang yang di-scan tidak terdaftar di sistem.</p>
|
|
</div>
|
|
<div id="unknownRfidInfo" class="current-user-info" style="border-left: 4px solid #f59e0b;">
|
|
<p><strong>Kode Gelang:</strong> <span id="displayUnknownRfidCode"></span></p>
|
|
<p class="status-info text-red-600">Gelang ini belum terdaftar.</p>
|
|
</div>
|
|
<div class="modal-buttons">
|
|
<button id="closeUnknownRfidModalBtn" class="modal-btn modal-btn-secondary">
|
|
<i class="fas fa-times"></i>
|
|
Tutup
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="../assets/js/tambah_pengunjung.js"></script>
|
|
</body>
|
|
</html> |