606 lines
19 KiB
HTML
606 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<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>
|
|
/* 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 {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.language-toggle {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border: 1px solid rgba(255, 255, 255, 0.3);
|
|
border-radius: var(--border-radius);
|
|
color: white;
|
|
padding: 0.5rem 1rem;
|
|
cursor: pointer;
|
|
transition: var(--transition);
|
|
backdrop-filter: blur(10px);
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.language-toggle:hover {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.fade-transition {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition: all 0.6s ease-out;
|
|
}
|
|
|
|
.fade-transition.active {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="destination-container">
|
|
<!-- Language Selector -->
|
|
<div class="language-selector">
|
|
<button id="languageToggle" class="language-toggle" type="button" aria-label="Switch Language">
|
|
<i class="fas fa-globe"></i>
|
|
<span id="languageText">EN</span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Header Section -->
|
|
<div class="destination-header fade-transition active">
|
|
<div class="header-icon">
|
|
<i class="fas fa-qrcode"></i>
|
|
</div>
|
|
<h1>{{ qr_code.location_event }}</h1>
|
|
<p class="location-info">
|
|
<i class="fas fa-map-marker-alt"></i>
|
|
{{ qr_code.location }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 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>
|
|
</h2>
|
|
<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">
|
|
<!-- HIDDEN LOCATION FIELDS -->
|
|
<input type="hidden" id="latitude" name="latitude">
|
|
<input type="hidden" id="longitude" name="longitude">
|
|
<input type="hidden" id="accuracy" name="accuracy">
|
|
<input type="hidden" id="altitude" name="altitude">
|
|
<input type="hidden" id="locationSource" name="location_source" value="manual">
|
|
<input type="hidden" id="address" name="address">
|
|
|
|
<div class="form-group">
|
|
<label for="employee_id">
|
|
<i class="fas fa-id-badge"></i>
|
|
<span data-en="Employee ID" data-es="ID de Empleado">Employee ID</span>
|
|
</label>
|
|
<input type="text"
|
|
id="employee_id"
|
|
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"
|
|
required>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- JavaScript -->
|
|
<script src="{{ url_for('static', filename='js/qr_destination.js') }}"></script>
|
|
</body>
|
|
</html> |