710 lines
20 KiB
HTML
710 lines
20 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 }}</title>
|
|
<link
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
|
rel="stylesheet"
|
|
/>
|
|
<style>
|
|
/* Enhanced CSS Variables with Orange Color Scheme */
|
|
:root {
|
|
--primary-color: #2563eb;
|
|
--primary-hover: #1d4ed8;
|
|
--orange-color: #ea580c;
|
|
--orange-hover: #dc2626;
|
|
--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;
|
|
}
|
|
|
|
/* Dynamic Background Based on Location Event */
|
|
body {
|
|
font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
|
|
min-height: 100vh;
|
|
padding: 1rem;
|
|
color: var(--text-primary);
|
|
line-height: 1.6;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
/* Check In Event - Blue Background (Default) */
|
|
body.check-in {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
}
|
|
|
|
/* Check Out Event - Orange Background */
|
|
body.check-out {
|
|
background: linear-gradient(135deg, #ff7849 0%, #ff4757 100%);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
/* Dynamic Header Icon Colors */
|
|
.header-icon {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 1.5rem;
|
|
box-shadow: var(--shadow-lg);
|
|
transition: var(--transition);
|
|
}
|
|
|
|
/* Check In - Blue Icon */
|
|
.check-in .header-icon {
|
|
background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
|
|
}
|
|
|
|
/* Check Out - Orange Icon */
|
|
.check-out .header-icon {
|
|
background: linear-gradient(135deg, var(--orange-color), var(--orange-hover));
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* Dynamic Location Info Icon Colors */
|
|
.check-in .location-info i {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.check-out .location-info i {
|
|
color: var(--orange-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;
|
|
}
|
|
|
|
/* Dynamic Header Icon Colors */
|
|
.check-in .checkin-header h2 i {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.check-out .checkin-header h2 i {
|
|
color: var(--orange-color);
|
|
}
|
|
|
|
.checkin-header p {
|
|
color: var(--text-secondary);
|
|
font-size: 0.95rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* Dynamic Label Icon Colors */
|
|
.check-in .form-group label i {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.check-out .form-group label i {
|
|
color: var(--orange-color);
|
|
}
|
|
|
|
.form-control {
|
|
width: 100%;
|
|
padding: 0.875rem 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;
|
|
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
|
}
|
|
|
|
/* Dynamic Focus Colors */
|
|
.check-in .form-control:focus {
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
|
}
|
|
|
|
.check-out .form-control:focus {
|
|
border-color: var(--orange-color);
|
|
box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.1);
|
|
}
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
padding: 0.875rem 2rem;
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
border: none;
|
|
border-radius: var(--border-radius);
|
|
cursor: pointer;
|
|
transition: var(--transition);
|
|
text-decoration: none;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Dynamic Button Colors */
|
|
.check-in .btn-primary {
|
|
background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
|
|
color: white;
|
|
}
|
|
|
|
.check-in .btn-primary:hover {
|
|
background: linear-gradient(135deg, var(--primary-hover), #1e40af);
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.check-out .btn-primary {
|
|
background: linear-gradient(135deg, var(--orange-color), var(--orange-hover));
|
|
color: white;
|
|
}
|
|
|
|
.check-out .btn-primary:hover {
|
|
background: linear-gradient(135deg, var(--orange-hover), #b91c1c);
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.btn:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
}
|
|
|
|
/* Status Message Styles */
|
|
.status-message {
|
|
padding: 1rem;
|
|
border-radius: var(--border-radius);
|
|
margin-bottom: 1rem;
|
|
display: none;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 0.95rem;
|
|
font-weight: 500;
|
|
border-left: 4px solid;
|
|
}
|
|
|
|
.status-message.show {
|
|
display: flex;
|
|
}
|
|
|
|
.status-message.success {
|
|
background: #f0fdf4;
|
|
color: #15803d;
|
|
border-left-color: #15803d;
|
|
}
|
|
|
|
.status-message.error {
|
|
background: #fef2f2;
|
|
color: #dc2626;
|
|
border-left-color: #dc2626;
|
|
}
|
|
|
|
.status-message.warning {
|
|
background: #fffbeb;
|
|
color: #d97706;
|
|
border-left-color: #d97706;
|
|
}
|
|
|
|
/* Success Card Styles */
|
|
.success-card {
|
|
display: none;
|
|
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.4s;
|
|
}
|
|
|
|
.success-card.active {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.success-header {
|
|
text-align: center;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.success-icon {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 1rem;
|
|
font-size: 1.5rem;
|
|
color: white;
|
|
}
|
|
|
|
/* Dynamic Success Icon Colors */
|
|
.check-in .success-icon {
|
|
background: linear-gradient(135deg, var(--success-color), #047857);
|
|
}
|
|
|
|
.check-out .success-icon {
|
|
background: linear-gradient(135deg, var(--orange-color), var(--orange-hover));
|
|
}
|
|
|
|
.success-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.success-subtitle {
|
|
color: var(--text-secondary);
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
/* Enhanced Checkin Sequence Display */
|
|
.checkin-sequence {
|
|
color: white;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 1rem;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
text-align: center;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* Dynamic Sequence Colors */
|
|
.check-in .checkin-sequence {
|
|
background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
|
|
}
|
|
|
|
.check-out .checkin-sequence {
|
|
background: linear-gradient(135deg, var(--orange-color), var(--orange-hover));
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* Dynamic Detail Row Border Colors */
|
|
.check-in .detail-row {
|
|
border-left-color: var(--primary-color);
|
|
}
|
|
|
|
.check-out .detail-row {
|
|
border-left-color: var(--orange-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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.fade-transition {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition: all 0.6s ease-out;
|
|
}
|
|
|
|
.fade-transition.active {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@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;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="{% if qr_code.location_event == 'Check Out' %}check-out{% else %}check-in{% endif %}">
|
|
<div class="destination-container">
|
|
<!-- Language Selector (Commented out in original) -->
|
|
<!--
|
|
<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 with Dynamic Styling -->
|
|
<div class="destination-header fade-transition active">
|
|
<div class="header-icon">
|
|
<i class="fas fa-qrcode"></i>
|
|
</div>
|
|
{% if qr_code.location_event == 'Check In' %}
|
|
<h1>{{ qr_code.location_event }} / Entrada</h1>
|
|
{% else %}
|
|
<h1>{{ qr_code.location_event }} / Salida</h1>
|
|
{% endif %}
|
|
<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 with Dynamic Styling -->
|
|
<div class="checkin-card fade-transition active">
|
|
<div class="checkin-header">
|
|
<p
|
|
data-en="Please enter your Employee ID / Por favor ingrese su ID de empleado"
|
|
data-es="Por favor ingrese su ID de empleado"
|
|
>
|
|
Please enter your Employee ID. / Por favor ingrese su ID de empleado.
|
|
</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 / ID de Empleado" data-es="ID de Empleado"
|
|
>Employee ID / ID de Empleado</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 / Ingrese su ID de Empleado"
|
|
autocomplete="off"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<button type="submit" id="submitCheckin" class="btn btn-primary">
|
|
<i class="fas fa-user-check"></i>
|
|
{% if qr_code.location_event == 'Check In' %}
|
|
<span data-en="{{ qr_code.location_event }} / Entrada" data-es="Someter">{{ qr_code.location_event }} / Entrada</span>
|
|
{% else %}
|
|
<span data-en="{{ qr_code.location_event }} / Salida" data-es="Someter">{{ qr_code.location_event }} / Salida</span>
|
|
{% endif %}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Success Card with Dynamic Styling -->
|
|
<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="{{ qr_code.location_event }} Successfully!"
|
|
data-es="Enviado exitosamente!"
|
|
>{{ qr_code.location_event }} Successful!</span
|
|
>
|
|
</h2>
|
|
<p class="success-subtitle">
|
|
<span style="white-space: pre-wrap;"
|
|
data-en="Your attendance has been recorded / Su asistencia ha sido registrada"
|
|
data-es="Su asistencia ha sido registrada"
|
|
>Your attendance has been recorded / Su asistencia ha sido registrada</span
|
|
>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Check-in Sequence Display with Dynamic Styling -->
|
|
<div id="successCheckinSequence" class="checkin-sequence">
|
|
{{ qr_code.location_event }} #1
|
|
</div>
|
|
|
|
<div class="success-details">
|
|
<div class="detail-row">
|
|
<span
|
|
class="detail-label"
|
|
data-en="Employee ID / ID de Empleado"
|
|
data-es="ID Empleado"
|
|
>Employee ID / ID de Empleado</span
|
|
>
|
|
<span class="detail-value" id="successEmployeeId">-</span>
|
|
</div>
|
|
<div class="detail-row">
|
|
<span
|
|
class="detail-label"
|
|
data-en="Location/Building - Ubicación/Edificio"
|
|
data-es="Ubicación/Edificio"
|
|
>Location/Building - Ubicación/Edificio</span
|
|
>
|
|
<span class="detail-value" id="successLocation">-</span>
|
|
</div>
|
|
<div class="detail-row">
|
|
<span class="detail-label" data-en="Event / Evento" 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 / Hora de presentación"
|
|
data-es="Hora de presentación"
|
|
>{{ qr_code.location_event }} Time</span
|
|
>
|
|
<span class="detail-value" id="successCheckInTime">-</span>
|
|
</div>
|
|
<div class="detail-row">
|
|
<span class="detail-label" data-en="Date / Fecha" 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"
|
|
>Location Accuracy</span
|
|
>
|
|
<span class="detail-value" id="successLocationAccuracy">-</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Include Original JavaScript File -->
|
|
<script src="{{ url_for('static', filename='js/qr_destination.js') }}"></script>
|
|
</body>
|
|
</html> |