File size: 2,646 Bytes
df53738 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | {% extends "base.html" %}
{% block content %}
<div class="top-bar">
<a href="/dashboard" style="color: var(--color-text); text-decoration: none;">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M19 12H5M12 19l-7-7 7-7" />
</svg>
</a>
<h2>Check in</h2>
<a href="/dashboard" class="top-bar-logo-wrap">
<img src="{{ url_for('static', filename='images/logo.png') }}" alt="One Step Greener" class="top-bar-logo top-bar-logo-sm" />
</a>
</div>
<div class="camera-container" id="cameraContainer">
<video id="videoFeed" class="circle-feed" autoplay playsinline muted></video>
<svg class="overlay-svg" viewBox="0 0 300 300">
<!-- Corner brackets -->
<path d="M60 40 L40 40 L40 60" stroke="#00C853" stroke-width="4" fill="none" />
<path d="M240 40 L260 40 L260 60" stroke="#00C853" stroke-width="4" fill="none" />
<path d="M60 260 L40 260 L40 240" stroke="#00C853" stroke-width="4" fill="none" />
<path d="M240 260 L260 260 L260 240" stroke="#00C853" stroke-width="4" fill="none" />
<!-- Rotating ring -->
<circle cx="150" cy="150" r="140" stroke="#00C853" stroke-width="2" stroke-dasharray="20 20" fill="none"
class="spin-ring" opacity="0.5" />
</svg>
</div>
<div class="status-indicator" id="statusDot"></div>
<p class="status-text" id="statusText">Position your face in the frame</p>
<!-- ════ Spoof toast (banner, auto-dismiss) ═══════════════════════════════ -->
<div id="spoofToast" class="toast toast-danger" role="alert" aria-live="polite">
<span class="toast-icon">⚠</span>
<div class="toast-body">
<strong class="toast-title">Spoofing detected</strong>
<p class="toast-message" id="spoofToastMessage">Use a live face, not a photo or screen.</p>
</div>
</div>
<!-- ════ Success Modal ═══════════════════════════════════════════════════ -->
<div id="successModal" class="modal-overlay">
<div class="modal-card">
<div class="checkmark-animated">✓</div>
<h2>Checked in</h2>
<p class="employee-name" id="modalName">John Doe</p>
<p class="timestamp" id="modalTime">09:42 AM</p>
<button class="btn-primary" onclick="dismissModal()">DONE</button>
</div>
</div>
{% endblock %}
{% block scripts %}
<script src="{{ url_for('static', filename='js/attendance.js') }}"></script>
{% endblock %} |