Modify checkin page
This commit is contained in:
Nguyen Ngo
+507
-212
@@ -3,157 +3,466 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Check In - {{ qr_code.name }}</title>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='css/qr_destination.css') }}">
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
<title>{{ qr_code.location_event }} - Check In</title>
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
||||
<style>
|
||||
/* Additional styles for location tracking */
|
||||
.location-status {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
margin: 15px 0;
|
||||
font-size: 14px;
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.location-status.loading {
|
||||
background: #d1ecf1;
|
||||
border-color: #bee5eb;
|
||||
color: #0c5460;
|
||||
}
|
||||
|
||||
.location-status.success {
|
||||
background: #d4edda;
|
||||
border-color: #c3e6cb;
|
||||
color: #155724;
|
||||
}
|
||||
|
||||
.location-status.error {
|
||||
background: #f8d7da;
|
||||
border-color: #f5c6cb;
|
||||
color: #721c24;
|
||||
}
|
||||
|
||||
.location-info {
|
||||
background: #f8f9fa;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
margin: 15px 0;
|
||||
display: none;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.location-info h4 {
|
||||
margin: 0 0 10px 0;
|
||||
font-size: 14px;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.coord-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 4px 0;
|
||||
border-bottom: 1px solid #e9ecef;
|
||||
}
|
||||
|
||||
.coord-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.coord-value {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.location-controls {
|
||||
text-align: center;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 6px 12px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
margin: 0 4px;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.btn-small:hover {
|
||||
background: #545b62;
|
||||
/* PRESERVED: All existing styles remain unchanged */
|
||||
:root {
|
||||
--primary-color: #2563eb;
|
||||
--primary-hover: #1d4ed8;
|
||||
--success-color: #10b981;
|
||||
--warning-color: #f59e0b;
|
||||
--error-color: #ef4444;
|
||||
--text-primary: #1f2937;
|
||||
--text-secondary: #6b7280;
|
||||
--background-light: #f8fafc;
|
||||
--border-color: #e5e7eb;
|
||||
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
--border-radius: 0.5rem;
|
||||
--transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
padding: 1rem;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.destination-container {
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
/* Language Selector Styles */
|
||||
.language-selector {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.language-toggle {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 50px;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: var(--border-radius);
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
transition: var(--transition);
|
||||
backdrop-filter: blur(10px);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.language-toggle:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.language-toggle:active {
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
.destination-header {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
box-shadow: var(--shadow-lg);
|
||||
backdrop-filter: blur(10px);
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: all 0.6s ease-out;
|
||||
}
|
||||
|
||||
.destination-header.active {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.language-toggle:focus {
|
||||
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
|
||||
.header-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 1.5rem;
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.language-toggle i {
|
||||
.header-icon i {
|
||||
font-size: 2.5rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.destination-header h1 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.location-info {
|
||||
color: var(--text-secondary);
|
||||
font-size: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.location-info i {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.checkin-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 2rem;
|
||||
box-shadow: var(--shadow-lg);
|
||||
backdrop-filter: blur(10px);
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: all 0.6s ease-out 0.2s;
|
||||
}
|
||||
|
||||
.checkin-card.active {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.checkin-header {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.checkin-header h2 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.checkin-header h2 i {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.checkin-header p {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.form-group label i {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
font-size: 1rem;
|
||||
transition: var(--transition);
|
||||
background: white;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.form-control.valid {
|
||||
border-color: var(--success-color);
|
||||
}
|
||||
|
||||
.form-control.invalid {
|
||||
border-color: var(--error-color);
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
padding: 0.875rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: var(--border-radius);
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: var(--primary-hover);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
background: #9ca3af;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
color: var(--primary-color);
|
||||
border: 2px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.status-message {
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.875rem 1rem;
|
||||
border-radius: var(--border-radius);
|
||||
display: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-message.success {
|
||||
background: #ecfdf5;
|
||||
color: #065f46;
|
||||
border: 1px solid #a7f3d0;
|
||||
}
|
||||
|
||||
.status-message.error {
|
||||
background: #fef2f2;
|
||||
color: #991b1b;
|
||||
border: 1px solid #fecaca;
|
||||
}
|
||||
|
||||
.status-message.warning {
|
||||
background: #fffbeb;
|
||||
color: #92400e;
|
||||
border: 1px solid #fde68a;
|
||||
}
|
||||
|
||||
.status-message.info {
|
||||
background: #eff6ff;
|
||||
color: #1e40af;
|
||||
border: 1px solid #bfdbfe;
|
||||
}
|
||||
|
||||
.status-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.success-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 2rem;
|
||||
box-shadow: var(--shadow-lg);
|
||||
backdrop-filter: blur(10px);
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: all 0.6s ease-out;
|
||||
}
|
||||
|
||||
.success-card.active {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.success-header {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.success-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: linear-gradient(135deg, var(--success-color), #059669);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 1.5rem;
|
||||
animation: successPulse 2s ease-in-out;
|
||||
}
|
||||
|
||||
.success-icon i {
|
||||
font-size: 2.5rem;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@keyframes successPulse {
|
||||
0% { transform: scale(0.8); opacity: 0; }
|
||||
50% { transform: scale(1.1); }
|
||||
100% { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
|
||||
.success-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--success-color);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.success-subtitle {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.success-details {
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.75rem;
|
||||
background: var(--background-light);
|
||||
border-radius: 0.375rem;
|
||||
border-left: 4px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.detail-label {
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* NEW: Enhanced styles for multiple check-in information */
|
||||
.checkin-sequence {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 1rem;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.interval-info {
|
||||
background: #f0f9ff;
|
||||
border: 1px solid #bae6fd;
|
||||
border-radius: var(--border-radius);
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.interval-info h4 {
|
||||
color: #0369a1;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.interval-info p {
|
||||
color: #0369a1;
|
||||
font-size: 0.85rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.check-in-again-section {
|
||||
margin-top: 1.5rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid #e0e4e7;
|
||||
}
|
||||
|
||||
.check-in-again-text {
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.9rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.destination-container {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.destination-header,
|
||||
.checkin-card,
|
||||
.success-card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.destination-header h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.checkin-header h2 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.detail-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.detail-value {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
/* Smooth transitions */
|
||||
.fade-transition {
|
||||
transition: opacity 0.15s ease;
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: all 0.6s ease-out;
|
||||
}
|
||||
|
||||
.fade-transition.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Mobile responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.language-selector {
|
||||
position: relative;
|
||||
top: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
transform: translateY(0);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
@@ -167,7 +476,7 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Header Section - WITH TRANSLATIONS -->
|
||||
<!-- Header Section -->
|
||||
<div class="destination-header fade-transition active">
|
||||
<div class="header-icon">
|
||||
<i class="fas fa-qrcode"></i>
|
||||
@@ -179,14 +488,22 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Check-in Form - WITH TRANSLATIONS -->
|
||||
<!-- Status Message -->
|
||||
<div id="statusMessage" class="status-message">
|
||||
<div class="status-content">
|
||||
<i class="fas fa-info-circle"></i>
|
||||
<span>Status message</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Check-in Form -->
|
||||
<div class="checkin-card fade-transition active">
|
||||
<div class="checkin-header">
|
||||
<h2>
|
||||
<i class="fas fa-user-check"></i>
|
||||
<span data-en="Attendance Tracking" data-es="Seguimiento de asistencia">Attendance Tracking</span>
|
||||
<span data-en="Attendance Tracking" data-es="Seguimiento de Asistencia">Attendance Tracking</span>
|
||||
</h2>
|
||||
<p data-en="Please enter your Employee ID to check in" data-es="Por favor ingrese su ID de Empleado para registrarse">Please enter your Employee ID to check in</p>
|
||||
<p data-en="Please enter your Employee ID to check in/out" data-es="Por favor ingrese su ID de empleado para registrar su entrada/salida">Please enter your Employee ID to check in/out</p>
|
||||
</div>
|
||||
|
||||
<form id="checkinForm" class="checkin-form">
|
||||
@@ -205,107 +522,85 @@
|
||||
</label>
|
||||
<input type="text"
|
||||
id="employee_id"
|
||||
name="employee_id"
|
||||
required
|
||||
data-placeholder-en="Enter your Employee ID"
|
||||
data-placeholder-es="Ingrese su ID de Empleado"
|
||||
name="employee_id"
|
||||
class="form-control"
|
||||
data-en-placeholder="Enter your Employee ID"
|
||||
data-es-placeholder="Ingrese su ID de Empleado"
|
||||
placeholder="Enter your Employee ID"
|
||||
autocomplete="off"
|
||||
maxlength="20">
|
||||
<small class="form-help"
|
||||
data-en="Use your official employee ID (3-20 characters)"
|
||||
data-es="Use su ID oficial de empleado (3-20 caracteres)">
|
||||
Use your official employee ID (3-20 characters)
|
||||
</small>
|
||||
required>
|
||||
</div>
|
||||
|
||||
<div class="form-actions">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
<span class="btn-content">
|
||||
<i class="fas fa-check"></i>
|
||||
<span data-en="Submit" data-es="Someter">Submit</span>
|
||||
</span>
|
||||
<div class="btn-loader" style="display: none;">
|
||||
<i class="fas fa-spinner fa-spin"></i>
|
||||
<span data-en="Processing..." data-es="Procesando...">Processing...</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Status Messages -->
|
||||
<div id="statusMessage" class="status-message" style="display: none;">
|
||||
<!-- Dynamic status messages will appear here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Success Card (Hidden by default) - WITH TRANSLATIONS -->
|
||||
<div id="successCard" class="success-card fade-transition" style="display: none;">
|
||||
<div class="success-icon">
|
||||
<i class="fas fa-check-circle"></i>
|
||||
</div>
|
||||
<h2 data-en="Submitted Successful!" data-es="Enviado exitosamente!">Submitted Successful!</h2>
|
||||
<div class="success-details">
|
||||
<div class="success-item">
|
||||
<strong data-en="Employee ID:" data-es="ID de Empleado:">Employee ID:</strong>
|
||||
<span id="successEmployeeId">-</span>
|
||||
</div>
|
||||
<div class="success-item">
|
||||
<strong data-en="Location/Building:" data-es="Ubicación/Edificio:">Location/Building:</strong>
|
||||
<span id="successLocation">-</span>
|
||||
</div>
|
||||
<div class="success-item">
|
||||
<strong data-en="Event:" data-es="Evento:">Event:</strong>
|
||||
<span id="successEvent">-</span>
|
||||
</div>
|
||||
<div class="success-item">
|
||||
<strong data-en="Time:" data-es="Hora:">Time:</strong>
|
||||
<span id="successTime">-</span>
|
||||
</div>
|
||||
<div class="success-item">
|
||||
<strong data-en="Date:" data-es="Fecha:">Date:</strong>
|
||||
<span id="successDate">-</span>
|
||||
</div>
|
||||
<!-- LOCATION SUCCESS INFO -->
|
||||
<div class="success-item" id="successLocationInfo" style="display: none;">
|
||||
<strong data-en="GPS Location:" data-es="Ubicación GPS:">GPS Location:</strong>
|
||||
<span id="successGpsInfo">-</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="success-actions">
|
||||
<button onclick="checkInAnother()" class="btn btn-secondary">
|
||||
<i class="fas fa-plus"></i>
|
||||
<span data-en="Check In Another Employee" data-es="Registrar Otro Empleado">Check In Another Employee</span>
|
||||
<button type="submit" id="submitCheckin" class="btn btn-primary">
|
||||
<i class="fas fa-user-check"></i>
|
||||
<span data-en="Submit" data-es="Someter">Someter</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Success Card (Enhanced for Multiple Check-ins) -->
|
||||
<div id="successCard" class="success-card">
|
||||
<div class="success-header">
|
||||
<div class="success-icon">
|
||||
<i class="fas fa-check"></i>
|
||||
</div>
|
||||
<h2 class="success-title">
|
||||
<span data-en="Submitted Successful!" data-es="Enviado exitosamente!">Submitted Successful!</span>
|
||||
</h2>
|
||||
<p class="success-subtitle">
|
||||
<span data-en="Your attendance has been recorded" data-es="Su asistencia ha sido registrada">Your attendance has been recorded</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer - WITH TRANSLATIONS -->
|
||||
<div class="destination-footer fade-transition active">
|
||||
<p>
|
||||
<i class="fas fa-shield-alt"></i>
|
||||
<span data-en="Secure attendance tracking system" data-es="Sistema seguro de seguimiento de asistencia">Secure attendance tracking system</span>
|
||||
</p>
|
||||
<small data-en="© 2025 QR Management System" data-es="© 2025 Sistema de Gestión QR">© 2025 QR Management System</small>
|
||||
<!-- NEW: Check-in Sequence Display -->
|
||||
<div id="successCheckinSequence" class="checkin-sequence">
|
||||
Check-in #1
|
||||
</div>
|
||||
|
||||
<div class="success-details">
|
||||
<div class="detail-row">
|
||||
<span class="detail-label" data-en="Employee ID" data-es="ID Empleado">Employee ID</span>
|
||||
<span class="detail-value" id="successEmployeeId">-</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label" data-en="Location/Building" data-es="Ubicación/Edificio">Location/Building</span>
|
||||
<span class="detail-value" id="successLocation">-</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label" data-en="Event" data-es="Evento">Event</span>
|
||||
<span class="detail-value" id="successEvent">-</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label" data-en="Submission Time" data-es="Hora de presentación">Submission Time</span>
|
||||
<span class="detail-value" id="successCheckInTime">-</span>
|
||||
</div>
|
||||
<div class="detail-row">
|
||||
<span class="detail-label" data-en="Date" data-es="Fecha">Date</span>
|
||||
<span class="detail-value" id="successCheckInDate">-</span>
|
||||
</div>
|
||||
<div class="detail-row" style="display: none;" id="deviceInfoRow">
|
||||
<span class="detail-label" data-en="Device" data-es="Dispositivo">Device</span>
|
||||
<span class="detail-value" id="successDeviceInfo">-</span>
|
||||
</div>
|
||||
<div class="detail-row" style="display: none;" id="coordinatesRow">
|
||||
<span class="detail-label" data-en="Coordinates" data-es="Coordenadas">Coordinates</span>
|
||||
<span class="detail-value" id="successCoordinates">-</span>
|
||||
</div>
|
||||
<div class="detail-row" style="display: none;" id="addressRow">
|
||||
<span class="detail-label" data-en="Address" data-es="Dirección">Address</span>
|
||||
<span class="detail-value" id="successAddress">-</span>
|
||||
</div>
|
||||
<div class="detail-row" style="display: none;" id="accuracyRow">
|
||||
<span class="detail-label" data-en="Location Accuracy" data-es="Precisión de Ubicación">Location Accuracy</span>
|
||||
<span class="detail-value" id="successLocationAccuracy">-</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Check In Again Section will be dynamically added here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Loading Overlay - WITH TRANSLATIONS -->
|
||||
<div id="loadingOverlay" class="loading-overlay" style="display: none;">
|
||||
<div class="loading-spinner">
|
||||
<i class="fas fa-spinner fa-spin"></i>
|
||||
<p data-en="Processing check-in..." data-es="Procesando registro...">Processing check-in...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Load the JavaScript -->
|
||||
<!-- JavaScript -->
|
||||
<script src="{{ url_for('static', filename='js/qr_destination.js') }}"></script>
|
||||
<script>
|
||||
// Initialize page with QR code URL
|
||||
window.qrUrl = '{{ qr_code.qr_url }}';
|
||||
window.locationName = '{{ qr_code.location }}';
|
||||
window.eventName = '{{ qr_code.location_event }}';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user