77 lines
3.9 KiB
PHP
77 lines
3.9 KiB
PHP
<?php
|
|
require_once 'includes/header.php';
|
|
?>
|
|
|
|
<div class="page-content" id="attendance-page">
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8 col-md-10">
|
|
<div class="attendance-card shadow-lg">
|
|
<div class="card-header text-center">
|
|
<h1 class="card-title mb-0">Attendance Check-in</h1>
|
|
<p class="card-subtitle text-muted">Confirm your presence for the current session</p>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="attendance-status" class="alert d-none" role="alert"></div>
|
|
|
|
<div class="row">
|
|
<!-- Left Column: Camera/Scanner -->
|
|
<div class="col-md-6">
|
|
<div id="selfie-section" class="mb-4 text-center">
|
|
<p class="text-muted">Position your face in the frame below.</p>
|
|
<div class="video-container">
|
|
<video id="video-preview" width="100%" height="auto" autoplay playsinline></video>
|
|
<canvas id="selfie-canvas" class="d-none"></canvas>
|
|
</div>
|
|
<div id="qr-reader" class="d-none"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column: Controls -->
|
|
<div class="col-md-6">
|
|
<!-- Course Selection -->
|
|
<div class="mb-4">
|
|
<label for="course-select" class="form-label"><strong>Select Course:</strong></label>
|
|
<select id="course-select" class="form-select">
|
|
<option value="">-- Please select a course --</option>
|
|
<!-- Options loaded by JS -->
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Student Info (Hardcoded) -->
|
|
<input type="hidden" id="student-id" value="1">
|
|
<input type="hidden" id="qr-location-id" value="">
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="d-grid gap-2">
|
|
<button id="start-camera-btn" class="btn btn-secondary">Start Selfie Camera</button>
|
|
<button id="scan-qr-btn" class="btn btn-info">Scan QR Code</button>
|
|
<button id="check-in-btn" class="btn btn-primary btn-lg" disabled>Check In Now</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 border-top pt-3">
|
|
<h5 class="text-center">Other Check-in Methods</h5>
|
|
<div class="d-flex justify-content-around mt-3">
|
|
<div class="text-center text-muted">
|
|
<i class="bi bi-fingerprint fs-1"></i>
|
|
<p>Fingerprint</p>
|
|
</div>
|
|
<div class="text-center text-muted">
|
|
<i class="bi bi-wifi fs-1"></i>
|
|
<p>NFC/BLE</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- QR Scanner Library -->
|
|
<script src="https://unpkg.com/html5-qrcode@2.0.9/dist/html5-qrcode.min.js"></script>
|
|
|
|
<?php require_once 'includes/footer.php'; ?>
|