40 lines
1.4 KiB
HTML
40 lines
1.4 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Kiosk · Face Attendance{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="page-header">
|
|
<div>
|
|
<p class="eyebrow">Recognition</p>
|
|
<h1>Attendance kiosk</h1>
|
|
</div>
|
|
<a class="btn btn-outline-secondary" href="{{ url_for('attendance.index') }}">Reports</a>
|
|
</div>
|
|
|
|
<div class="kiosk-grid" data-identify-url="{{ url_for('recognition.identify') }}" data-record-url="{{ url_for('attendance.create_event') }}">
|
|
<section class="camera-panel">
|
|
<div class="camera-frame">
|
|
<video id="cameraStream" autoplay playsinline muted></video>
|
|
<img id="snapshotPreview" alt="Processed camera snapshot">
|
|
<canvas id="snapshotCanvas"></canvas>
|
|
</div>
|
|
<div class="camera-actions">
|
|
<button class="btn btn-outline-secondary" id="startCamera" type="button">Start camera</button>
|
|
<button class="btn btn-primary" id="capturePhoto" type="button" disabled>Capture and identify</button>
|
|
</div>
|
|
<p class="text-secondary small mb-0" id="cameraStatus">Camera is not active.</p>
|
|
</section>
|
|
|
|
<section class="content-section result-panel">
|
|
<h2>Recognition results</h2>
|
|
<div id="recognitionResults" class="result-list">
|
|
<div class="empty-state">Capture a face to see matching people.</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script src="{{ url_for('static', filename='js/kiosk.js') }}"></script>
|
|
{% endblock %}
|