1294 lines
39 KiB
HTML
1294 lines
39 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;
|
|
|
|
/* Language Color Coding - High Contrast Theme */
|
|
--english-color: #1e40af;
|
|
--english-bg: rgba(59, 130, 246, 0.1);
|
|
--spanish-color: #15803d;
|
|
--spanish-bg: rgba(34, 197, 94, 0.1);
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Language Color Classes - Enhanced Contrast */
|
|
.english-text {
|
|
color: #1e40af !important;
|
|
font-weight: 700;
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.spanish-text {
|
|
color: #15803d !important;
|
|
font-weight: 700;
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.bilingual-container {
|
|
background: rgba(255, 255, 255, 0.98);
|
|
border-radius: 8px;
|
|
padding: 16px 20px;
|
|
margin: 8px 0;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.language-separator {
|
|
color: #64748b;
|
|
font-weight: 500;
|
|
margin: 0 12px;
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
/* 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: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
outline: none;
|
|
}
|
|
|
|
.language-toggle:hover {
|
|
background: rgba(255, 255, 255, 0.3) !important;
|
|
border-color: rgba(255, 255, 255, 0.5) !important;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.language-toggle:active {
|
|
background: rgba(255, 255, 255, 0.4) !important;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.language-toggle:focus {
|
|
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3) !important;
|
|
}
|
|
|
|
.language-toggle i {
|
|
font-size: 1rem;
|
|
color: white !important;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
/* Company Logo Styling */
|
|
.company-logo {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.fallback-icon {
|
|
font-size: 2.5rem;
|
|
color: white;
|
|
}
|
|
|
|
.destination-header h1 {
|
|
font-size: 1.75rem;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
margin-bottom: 0.5rem;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.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: 1.2rem 2rem;
|
|
font-size: 1.2rem;
|
|
font-weight: 700;
|
|
border: none;
|
|
border-radius: var(--border-radius);
|
|
cursor: pointer;
|
|
transition: var(--transition);
|
|
text-decoration: none;
|
|
width: 100%;
|
|
text-shadow: none;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
/* Dynamic Button Colors - Dark Salmon Theme */
|
|
.check-in .btn-primary {
|
|
background: #e9967a;
|
|
color: #ffffff;
|
|
border: 2px solid #e9967a;
|
|
}
|
|
|
|
.check-out .btn-primary {
|
|
background: #e9967a;
|
|
color: #ffffff;
|
|
border: 2px solid #e9967a;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.check-in .btn-primary:hover {
|
|
background: #cd853f;
|
|
border-color: #cd853f;
|
|
}
|
|
|
|
.check-out .btn-primary:hover {
|
|
background: #cd853f;
|
|
border-color: #cd853f;
|
|
}
|
|
|
|
.btn-primary:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.btn:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
transform: none !important;
|
|
}
|
|
|
|
.success-card {
|
|
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);
|
|
display: none;
|
|
}
|
|
|
|
.success-card.show {
|
|
display: block;
|
|
animation: slideUp 0.5s ease-out;
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.success-icon {
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 1.5rem;
|
|
font-size: 3rem;
|
|
color: white;
|
|
}
|
|
|
|
/* Dynamic Success Icon Colors - Green Theme */
|
|
.check-in .success-icon {
|
|
background: #10b981;
|
|
}
|
|
|
|
.check-out .success-icon {
|
|
background: #10b981;
|
|
}
|
|
|
|
.success-card h2 {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.success-details {
|
|
background: var(--background-light);
|
|
border-radius: var(--border-radius);
|
|
padding: 1.5rem;
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.detail-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0.5rem 0;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
|
|
.detail-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.detail-label {
|
|
font-weight: 500;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.detail-value {
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
text-align: right;
|
|
}
|
|
|
|
.status-message {
|
|
position: fixed;
|
|
top: 20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
padding: 1rem 1.5rem;
|
|
border-radius: var(--border-radius);
|
|
font-weight: 500;
|
|
z-index: 1000;
|
|
display: none;
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.status-message.show {
|
|
display: block;
|
|
animation: slideDown 0.3s ease-out;
|
|
}
|
|
|
|
.status-message.success {
|
|
background: var(--success-color);
|
|
color: white;
|
|
}
|
|
|
|
.status-message.error {
|
|
background: var(--error-color);
|
|
color: white;
|
|
}
|
|
|
|
.status-message.processing {
|
|
background: var(--warning-color);
|
|
color: white;
|
|
}
|
|
|
|
@keyframes slideDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-50%) translateY(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(-50%) translateY(0);
|
|
}
|
|
}
|
|
|
|
.loading-spinner {
|
|
border: 3px solid rgba(255, 255, 255, 0.3);
|
|
border-radius: 50%;
|
|
border-top: 3px solid white;
|
|
width: 20px;
|
|
height: 20px;
|
|
animation: spin 1s linear infinite;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
.fade-transition {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
|
|
}
|
|
|
|
.fade-transition.active {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* Language Legend */
|
|
.language-legend {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 1.5rem;
|
|
margin: 1rem 0;
|
|
padding: 12px;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
border-radius: 8px;
|
|
backdrop-filter: blur(10px);
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.legend-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.legend-color {
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.english-legend {
|
|
background: #1e40af;
|
|
}
|
|
|
|
.spanish-legend {
|
|
background: #15803d;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
.language-legend {
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
}
|
|
}
|
|
.location-warning-banner {
|
|
background: linear-gradient(135deg, #fef3c7, #fde68a);
|
|
border: 2px solid #f59e0b;
|
|
border-radius: var(--border-radius);
|
|
margin-bottom: 1rem;
|
|
padding: 1rem;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
animation: slideInWarning 0.5s ease-out;
|
|
}
|
|
|
|
.warning-content {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.warning-icon {
|
|
color: #d97706;
|
|
font-size: 1.25rem;
|
|
margin-top: 0.125rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.warning-text {
|
|
flex: 1;
|
|
}
|
|
|
|
.warning-message {
|
|
display: block;
|
|
color: #92400e;
|
|
font-weight: 500;
|
|
font-size: 0.95rem;
|
|
line-height: 1.5;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.warning-actions {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.warning-retry-btn,
|
|
.warning-dismiss-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.375rem;
|
|
padding: 0.5rem 0.75rem;
|
|
border: none;
|
|
border-radius: calc(var(--border-radius) * 0.75);
|
|
font-size: 0.85rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: var(--transition);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.warning-retry-btn {
|
|
background: #f59e0b;
|
|
color: white;
|
|
}
|
|
|
|
.warning-retry-btn:hover {
|
|
background: #d97706;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.warning-dismiss-btn {
|
|
background: rgba(156, 163, 175, 0.2);
|
|
color: #6b7280;
|
|
border: 1px solid rgba(156, 163, 175, 0.3);
|
|
}
|
|
|
|
.warning-dismiss-btn:hover {
|
|
background: rgba(156, 163, 175, 0.3);
|
|
color: #4b5563;
|
|
}
|
|
|
|
/* Warning animation */
|
|
@keyframes slideInWarning {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Language styling for warning buttons */
|
|
.warning-retry-btn .language-separator,
|
|
.warning-dismiss-btn .language-separator {
|
|
opacity: 0.7;
|
|
margin: 0 0.25rem;
|
|
}
|
|
|
|
.warning-retry-btn .spanish-text,
|
|
.warning-dismiss-btn .spanish-text {
|
|
font-style: italic;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* Responsive adjustments for warning */
|
|
@media (max-width: 640px) {
|
|
.warning-content {
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.warning-actions {
|
|
justify-content: center;
|
|
}
|
|
|
|
.warning-retry-btn,
|
|
.warning-dismiss-btn {
|
|
flex: 1;
|
|
justify-content: center;
|
|
min-width: 120px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="{% if qr_code.location_event == 'Check Out' %}check-out{% else %}check-in{% endif %}">
|
|
<div class="destination-container">
|
|
<!-- Header Section with Dynamic Styling and Color-Coded Languages -->
|
|
<div class="destination-header fade-transition active">
|
|
<div class="header-icon">
|
|
<!-- Company Logo -->
|
|
<img
|
|
src="{{ url_for('static', filename='images/logo.png') }}"
|
|
alt="Company Logo"
|
|
class="company-logo"
|
|
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';"
|
|
/>
|
|
<!-- Fallback QR Icon (hidden by default, shown if logo fails to load) -->
|
|
<i class="fas fa-qrcode fallback-icon" style="display: none;"></i>
|
|
</div>
|
|
{% if qr_code.location_event == 'Check In' %}
|
|
<h1>
|
|
<span class="english-text">{{ qr_code.location_event }}</span>
|
|
<span class="language-separator">/</span>
|
|
<span class="spanish-text">Entrada</span>
|
|
</h1>
|
|
{% else %}
|
|
<h1>
|
|
<span class="english-text">{{ qr_code.location_event }}</span>
|
|
<span class="language-separator">/</span>
|
|
<span class="spanish-text">Salida</span>
|
|
</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 and Color-Coded Instructions -->
|
|
<div class="checkin-card fade-transition active">
|
|
<div class="checkin-header">
|
|
<div class="bilingual-container">
|
|
<p>
|
|
<span class="english-text">Please enter your Employee ID.</span>
|
|
<span class="language-separator">/</span>
|
|
<span class="spanish-text">Por favor ingrese su ID de empleado.</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<form id="checkinForm" onsubmit="return false;">
|
|
<div class="form-group">
|
|
<label for="employee_id">
|
|
<i class="fas fa-id-card"></i>
|
|
<span class="english-text">Employee ID</span>
|
|
<span class="language-separator">/</span>
|
|
<span class="spanish-text">ID de Empleado</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="employee_id"
|
|
name="employee_id"
|
|
class="form-control"
|
|
placeholder="Enter your ID / Ingrese su ID"
|
|
required
|
|
autocomplete="off"
|
|
/>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-primary" id="submitButton">
|
|
{% if qr_code.location_event == 'Check In' %}
|
|
<i class="fas fa-sign-in-alt"></i>
|
|
<span class="english-text">Check In</span>
|
|
<span class="language-separator">/</span>
|
|
<span class="spanish-text">Registrar Entrada</span>
|
|
{% else %}
|
|
<i class="fas fa-sign-out-alt"></i>
|
|
<span class="english-text">Check Out</span>
|
|
<span class="language-separator">/</span>
|
|
<span class="spanish-text">Registrar Salida</span>
|
|
{% endif %}
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Success Card -->
|
|
<div class="success-card" id="successCard">
|
|
<div class="success-icon">
|
|
<i class="fas fa-check"></i>
|
|
</div>
|
|
<h2>
|
|
<span class="english-text">Success!</span>
|
|
<span class="language-separator">/</span>
|
|
<span class="spanish-text">¡Éxito!</span>
|
|
</h2>
|
|
<div class="bilingual-container">
|
|
<p>
|
|
<span class="english-text">Your submission has been recorded successfully.</span>
|
|
<span class="language-separator">/</span>
|
|
<span class="spanish-text">Su registro ha sido guardado exitosamente.</span>
|
|
</p>
|
|
</div>
|
|
<div class="success-details" id="successDetails">
|
|
<!-- Success details will be populated here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Enhanced JavaScript with preserved functionality -->
|
|
<script src="{{ url_for('static', filename='js/qr_destination.js') }}"></script>
|
|
<script>
|
|
// Use different variable name to avoid conflict with external JS
|
|
let currentUserLocation = {
|
|
latitude: null,
|
|
longitude: null,
|
|
accuracy: null,
|
|
altitude: null,
|
|
timestamp: null,
|
|
source: "manual",
|
|
address: null,
|
|
};
|
|
let locationCaptureActive = false;
|
|
|
|
// Initialize the page when DOM is loaded
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
console.log('🚀 QR Destination page loaded successfully');
|
|
console.log('📱 Enhanced with color-coded bilingual support');
|
|
|
|
// Initialize Employee ID auto-fill FIRST (before other functionality)
|
|
initializeEmployeeIdAutoFill();
|
|
|
|
// Then initialize other functionality
|
|
initializeFormHandling();
|
|
initializeLocationCapture();
|
|
|
|
// Add fade-in animations
|
|
setTimeout(() => {
|
|
document.querySelectorAll('.fade-transition').forEach(el => {
|
|
el.classList.add('active');
|
|
});
|
|
}, 100);
|
|
});
|
|
|
|
// FIXED Employee ID auto-fill functionality
|
|
function initializeEmployeeIdAutoFill() {
|
|
console.log("👤 Initializing Employee ID auto-fill functionality");
|
|
|
|
const employeeIdInput = document.getElementById('employee_id');
|
|
if (!employeeIdInput) {
|
|
console.log("❌ Employee ID input not found");
|
|
return;
|
|
}
|
|
|
|
// Load and auto-fill last used Employee ID immediately
|
|
try {
|
|
const lastEmployeeId = localStorage.getItem('qr_last_employee_id');
|
|
console.log(`📱 Checking localStorage for last employee ID: ${lastEmployeeId}`);
|
|
|
|
if (lastEmployeeId && lastEmployeeId.trim() !== '') {
|
|
employeeIdInput.value = lastEmployeeId.trim();
|
|
console.log(`✅ Auto-filled employee ID: ${lastEmployeeId}`);
|
|
|
|
// Visual feedback that it's auto-filled
|
|
employeeIdInput.style.backgroundColor = '#f0f9ff';
|
|
setTimeout(() => {
|
|
employeeIdInput.style.backgroundColor = '';
|
|
}, 2000);
|
|
} else {
|
|
console.log(`📱 No previous employee ID found`);
|
|
}
|
|
} catch (error) {
|
|
console.log(`❌ Error loading employee ID: ${error.message}`);
|
|
}
|
|
|
|
// Save Employee ID when it's entered successfully
|
|
employeeIdInput.addEventListener('input', function() {
|
|
const currentId = this.value.trim();
|
|
if (currentId.length >= 2) { // Save if at least 2 characters
|
|
try {
|
|
localStorage.setItem('qr_last_employee_id', currentId);
|
|
console.log(`💾 Saved employee ID: ${currentId}`);
|
|
} catch (error) {
|
|
console.log(`❌ Error saving employee ID: ${error.message}`);
|
|
}
|
|
}
|
|
});
|
|
|
|
console.log("✅ Employee ID auto-fill initialized successfully");
|
|
}
|
|
|
|
// Initialize location services (renamed to avoid conflicts)
|
|
function initializeLocationCapture() {
|
|
console.log("📍 Initializing enhanced location capture");
|
|
requestUserLocationData();
|
|
}
|
|
|
|
// Request location data from device (renamed to avoid conflicts)
|
|
function requestUserLocationData() {
|
|
if (locationCaptureActive) {
|
|
console.log("📍 Location request already active, skipping");
|
|
return;
|
|
}
|
|
|
|
if (!navigator.geolocation) {
|
|
console.log("❌ Geolocation not supported");
|
|
currentUserLocation.source = "manual";
|
|
return;
|
|
}
|
|
|
|
locationCaptureActive = true;
|
|
console.log("📍 Requesting enhanced location data (high accuracy)...");
|
|
|
|
const highAccuracyOptions = {
|
|
enableHighAccuracy: true,
|
|
timeout: 15000, // 15 sec for GPS attempt
|
|
maximumAge: 300000
|
|
};
|
|
|
|
navigator.geolocation.getCurrentPosition(
|
|
handleEnhancedLocationSuccess,
|
|
function(error) {
|
|
console.warn("⚠️ High accuracy failed:", error.message);
|
|
|
|
// Fallback to low accuracy
|
|
const lowAccuracyOptions = {
|
|
enableHighAccuracy: false,
|
|
timeout: 10000,
|
|
maximumAge: 600000
|
|
};
|
|
|
|
console.log("📍 Retrying with low accuracy...");
|
|
navigator.geolocation.getCurrentPosition(
|
|
handleEnhancedLocationSuccess,
|
|
handleEnhancedLocationError,
|
|
lowAccuracyOptions
|
|
);
|
|
},
|
|
highAccuracyOptions
|
|
);
|
|
}
|
|
|
|
// Handle successful location capture (renamed to avoid conflicts)
|
|
function handleEnhancedLocationSuccess(position) {
|
|
console.log("✅ Enhanced location obtained successfully");
|
|
|
|
currentUserLocation = {
|
|
latitude: position.coords.latitude,
|
|
longitude: position.coords.longitude,
|
|
accuracy: position.coords.accuracy,
|
|
altitude: position.coords.altitude,
|
|
timestamp: new Date(),
|
|
source: "gps",
|
|
address: null,
|
|
};
|
|
|
|
console.log("📍 Enhanced location data:", currentUserLocation);
|
|
|
|
// Reverse geocode to get address
|
|
reverseGeocodeEnhanced(currentUserLocation.latitude, currentUserLocation.longitude);
|
|
|
|
locationCaptureActive = false;
|
|
}
|
|
|
|
// Handle location capture errors (renamed to avoid conflicts)
|
|
function handleEnhancedLocationError(error) {
|
|
console.log("❌ Enhanced location error:", error.message);
|
|
currentUserLocation.source = "manual";
|
|
locationCaptureActive = false;
|
|
}
|
|
|
|
// Reverse geocode coordinates to address (renamed to avoid conflicts)
|
|
function reverseGeocodeEnhanced(lat, lng) {
|
|
console.log(`🌍 Starting enhanced reverse geocoding for: ${lat}, ${lng}`);
|
|
|
|
// Using Nominatim (OpenStreetMap) reverse geocoding service
|
|
const url = `https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lng}&format=json&addressdetails=1&zoom=18`;
|
|
|
|
fetch(url, {
|
|
method: "GET",
|
|
headers: {
|
|
"User-Agent": "QR-Attendance-System/1.0",
|
|
},
|
|
})
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
if (data && data.display_name) {
|
|
currentUserLocation.address = data.display_name;
|
|
console.log(`✅ Enhanced reverse geocoded address: ${currentUserLocation.address}`);
|
|
} else {
|
|
console.log(`⚠️ No address found, using coordinates as fallback`);
|
|
currentUserLocation.address = `${lat.toFixed(10)}, ${lng.toFixed(10)}`;
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.error(`❌ Enhanced reverse geocoding error:`, error);
|
|
// Fallback to coordinates if reverse geocoding fails
|
|
currentUserLocation.address = `${lat.toFixed(10)}, ${lng.toFixed(10)}`;
|
|
});
|
|
}
|
|
|
|
// Enhanced form handling with bilingual status messages
|
|
function initializeFormHandling() {
|
|
const form = document.getElementById('checkinForm');
|
|
const submitButton = document.getElementById('submitButton');
|
|
|
|
console.log('🔧 Initializing enhanced form handling...');
|
|
console.log('Form element:', form);
|
|
console.log('Submit button:', submitButton);
|
|
|
|
if (form && submitButton) {
|
|
// Remove any existing event listeners
|
|
form.removeEventListener('submit', handleEnhancedFormSubmission);
|
|
submitButton.removeEventListener('click', handleEnhancedFormSubmission);
|
|
|
|
// Add form submit event listener
|
|
form.addEventListener('submit', function(e) {
|
|
console.log('📝 Enhanced form submit event triggered');
|
|
e.preventDefault();
|
|
handleEnhancedFormSubmission();
|
|
});
|
|
|
|
// Also add click event listener to button as backup
|
|
submitButton.addEventListener('click', function(e) {
|
|
console.log('🖱️ Enhanced button click event triggered');
|
|
e.preventDefault();
|
|
handleEnhancedFormSubmission();
|
|
});
|
|
|
|
console.log('✅ Enhanced form handling initialized successfully');
|
|
} else {
|
|
console.error('❌ Form or submit button not found!');
|
|
}
|
|
}
|
|
|
|
// Handle form submission with location data (renamed to avoid conflicts)
|
|
function handleEnhancedFormSubmission() {
|
|
console.log('🚀 handleEnhancedFormSubmission called');
|
|
|
|
const employeeId = document.getElementById('employee_id').value.trim();
|
|
const submitButton = document.getElementById('submitButton');
|
|
|
|
console.log('Employee ID:', employeeId);
|
|
console.log('Submit button:', submitButton);
|
|
|
|
if (!employeeId) {
|
|
console.log('❌ No employee ID provided');
|
|
showStatusMessage('Please enter your Employee ID / Por favor ingrese su ID de empleado', 'error');
|
|
return;
|
|
}
|
|
|
|
console.log('✅ Employee ID valid, proceeding with enhanced submission');
|
|
|
|
// Save Employee ID to localStorage for next time
|
|
try {
|
|
localStorage.setItem('qr_last_employee_id', employeeId);
|
|
console.log(`💾 Saved employee ID for next time: ${employeeId}`);
|
|
} catch (error) {
|
|
console.log(`❌ Error saving employee ID: ${error.message}`);
|
|
}
|
|
|
|
// Disable button and show processing
|
|
if (submitButton) {
|
|
submitButton.disabled = true;
|
|
submitButton.innerHTML = `
|
|
<div class="loading-spinner"></div>
|
|
<span class="english-text">Processing</span>
|
|
<span class="language-separator">/</span>
|
|
<span class="spanish-text">Procesando</span>
|
|
`;
|
|
}
|
|
|
|
showStatusMessage('Processing check-in... / Procesando registro...', 'processing');
|
|
|
|
// Get current URL to determine QR URL
|
|
const pathParts = window.location.pathname.split('/');
|
|
const qrUrl = pathParts[pathParts.length - 1];
|
|
|
|
console.log('QR URL:', qrUrl);
|
|
console.log('Current enhanced location data:', currentUserLocation);
|
|
|
|
// Prepare form data with location information
|
|
const formData = new FormData();
|
|
formData.append('employee_id', employeeId);
|
|
|
|
// Add location data to form submission
|
|
if (currentUserLocation.latitude !== null) {
|
|
formData.append('latitude', currentUserLocation.latitude.toString());
|
|
}
|
|
if (currentUserLocation.longitude !== null) {
|
|
formData.append('longitude', currentUserLocation.longitude.toString());
|
|
}
|
|
if (currentUserLocation.accuracy !== null) {
|
|
formData.append('accuracy', currentUserLocation.accuracy.toString());
|
|
}
|
|
if (currentUserLocation.altitude !== null) {
|
|
formData.append('altitude', currentUserLocation.altitude.toString());
|
|
}
|
|
if (currentUserLocation.address) {
|
|
formData.append('address', currentUserLocation.address);
|
|
}
|
|
formData.append('location_source', currentUserLocation.source);
|
|
|
|
console.log('📤 Submitting enhanced form with location data:', {
|
|
employee_id: employeeId,
|
|
latitude: currentUserLocation.latitude,
|
|
longitude: currentUserLocation.longitude,
|
|
accuracy: currentUserLocation.accuracy,
|
|
altitude: currentUserLocation.altitude,
|
|
address: currentUserLocation.address,
|
|
location_source: currentUserLocation.source
|
|
});
|
|
|
|
// Submit to backend
|
|
fetch(`/qr/${qrUrl}/checkin`, {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
.then(response => {
|
|
console.log('📨 Received enhanced response:', response);
|
|
return response.json();
|
|
})
|
|
.then(data => {
|
|
console.log('📨 Enhanced response data:', data);
|
|
if (data.success) {
|
|
showStatusMessage('Submission successful! / Envío exitoso', 'success');
|
|
showEnhancedSuccessCard(data);
|
|
} else {
|
|
showStatusMessage(data.message || 'Submission failed / Envío fallido', 'error');
|
|
resetEnhancedSubmitButton();
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('❌ Enhanced fetch error:', error);
|
|
showStatusMessage('Network error / Error de red', 'error');
|
|
resetEnhancedSubmitButton();
|
|
});
|
|
}
|
|
|
|
// Reset submit button (renamed to avoid conflicts)
|
|
function resetEnhancedSubmitButton() {
|
|
const submitButton = document.getElementById('submitButton');
|
|
submitButton.disabled = false;
|
|
|
|
// Get the current location event from the page
|
|
const isCheckOut = document.body.classList.contains('check-out');
|
|
|
|
if (isCheckOut) {
|
|
submitButton.innerHTML = `
|
|
<i class="fas fa-sign-out-alt"></i>
|
|
<span class="english-text">Check Out</span>
|
|
<span class="language-separator">/</span>
|
|
<span class="spanish-text">Registrar Salida</span>
|
|
`;
|
|
} else {
|
|
submitButton.innerHTML = `
|
|
<i class="fas fa-sign-in-alt"></i>
|
|
<span class="english-text">Check In</span>
|
|
<span class="language-separator">/</span>
|
|
<span class="spanish-text">Registrar Entrada</span>
|
|
`;
|
|
}
|
|
}
|
|
|
|
// Enhanced status message display with color coding
|
|
function showStatusMessage(message, type) {
|
|
const statusMessage = document.getElementById('statusMessage');
|
|
const statusSpan = statusMessage.querySelector('span');
|
|
|
|
statusSpan.innerHTML = message;
|
|
statusMessage.className = `status-message ${type} show`;
|
|
|
|
setTimeout(() => {
|
|
statusMessage.classList.remove('show');
|
|
}, 5000);
|
|
}
|
|
|
|
// Enhanced success display with bilingual details (renamed to avoid conflicts)
|
|
function showEnhancedSuccessCard(data) {
|
|
const successCard = document.getElementById('successCard');
|
|
const checkinCard = document.querySelector('.checkin-card');
|
|
const successDetails = document.getElementById('successDetails');
|
|
|
|
// Hide check-in form
|
|
checkinCard.style.display = 'none';
|
|
|
|
// Get employee ID from form input (since data.employee_id might be undefined)
|
|
const employeeIdInput = document.getElementById('employee_id');
|
|
const employeeId = data.employee_id || (employeeIdInput ? employeeIdInput.value.trim() : 'N/A');
|
|
|
|
// Use QR code location instead of GPS address for main location display
|
|
const qrLocationElement = document.querySelector('.location-info');
|
|
let qrLocationName = 'Unknown Location';
|
|
if (qrLocationElement) {
|
|
// Extract text content, removing the icon
|
|
const locationText = qrLocationElement.textContent || qrLocationElement.innerText;
|
|
qrLocationName = locationText.trim();
|
|
}
|
|
|
|
// Get location event (Check In or Check Out)
|
|
const isCheckOut = document.body.classList.contains('check-out');
|
|
const locationEvent = isCheckOut ? 'Check Out' : 'Check In';
|
|
const locationEventSpanish = isCheckOut ? 'Salida' : 'Entrada';
|
|
|
|
// Alternative: try to get from page title or header
|
|
if (qrLocationName === 'Unknown Location') {
|
|
const headerElement = document.querySelector('.destination-header h1');
|
|
if (headerElement) {
|
|
// Extract just the location event part (Check In/Check Out)
|
|
qrLocationName = data.location || 'Check-in Location';
|
|
}
|
|
}
|
|
|
|
successDetails.innerHTML = `
|
|
<div class="detail-row">
|
|
<span class="detail-label">
|
|
<span class="english-text">Employee ID</span>
|
|
<span class="language-separator">/</span>
|
|
<span class="spanish-text">ID de Empleado</span>
|
|
</span>
|
|
<span class="detail-value">${employeeId}</span>
|
|
</div>
|
|
<div class="detail-row">
|
|
<span class="detail-label">
|
|
<span class="english-text">Event</span>
|
|
<span class="language-separator">/</span>
|
|
<span class="spanish-text">Evento</span>
|
|
</span>
|
|
<span class="detail-value">
|
|
<span class="english-text">${locationEvent}</span>
|
|
<span class="language-separator">/</span>
|
|
<span class="spanish-text">${locationEventSpanish}</span>
|
|
</span>
|
|
</div>
|
|
<div class="detail-row">
|
|
<span class="detail-label">
|
|
<span class="english-text">Time</span>
|
|
<span class="language-separator">/</span>
|
|
<span class="spanish-text">Hora</span>
|
|
</span>
|
|
<span class="detail-value">${data.timestamp || new Date().toLocaleString()}</span>
|
|
</div>
|
|
<div class="detail-row">
|
|
<span class="detail-label">
|
|
<span class="english-text">Location</span>
|
|
<span class="language-separator">/</span>
|
|
<span class="spanish-text">Ubicación</span>
|
|
</span>
|
|
<span class="detail-value">${qrLocationName}</span>
|
|
</div>
|
|
`;
|
|
|
|
// Show success card
|
|
successCard.classList.add('show');
|
|
|
|
console.log('✅ Enhanced success card displayed with:', {
|
|
employeeId: employeeId,
|
|
locationEvent: locationEvent,
|
|
qrLocation: qrLocationName,
|
|
timestamp: data.timestamp || new Date().toLocaleString()
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |