nngo/GOV_QR_Codes_Management
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated language displayed

Browse Source
This commit is contained in:
Nguyen Ngo
2025-08-11 13:23:32 -04:00
parent 6c68501de1
commit c2008435ea
2 changed files with 179 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.py
+2 -1
View File
@@ -2319,7 +2319,8 @@ def qr_checkin(qr_url):
return jsonify({
'success': False,
'message': f'You can check in again in {minutes_remaining} minutes. Last check-in was at {recent_checkin.check_in_time.strftime("%H:%M")}.'
'message': f"You can check in again in {minutes_remaining} minutes. Last check-in was at {recent_checkin.check_in_time.strftime("%H:%M")}. \n"
f"Puedes volver a registrarte en {minutes_remaining} minutos. El último registro fue a las {recent_checkin.check_in_time.strftime("%H:%M")}."
}), 400
else:
print(f"✅ 30-minute interval satisfied. Allowing new check-in for {employee_id}")
templates/qr_destination.html
+176 -165
View File
@@ -9,10 +9,12 @@
rel="stylesheet"
/>
<style>
/* PRESERVED: All existing styles remain unchanged */
/* 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;
@@ -32,13 +34,24 @@
box-sizing: border-box;
}
/* Dynamic Background Based on Location Event */
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;
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 {
@@ -93,20 +106,27 @@
transform: translateY(0);
}
/* Dynamic Header Icon Colors */
.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);
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 {
@@ -130,10 +150,15 @@
gap: 0.5rem;
}
.location-info i {
/* 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);
@@ -166,13 +191,19 @@
gap: 0.5rem;
}
.checkin-header h2 i {
/* 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 {
@@ -189,13 +220,18 @@
font-size: 0.95rem;
}
.form-group label i {
/* 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.75rem 1rem;
padding: 0.875rem 1rem;
border: 2px solid var(--border-color);
border-radius: var(--border-radius);
font-size: 1rem;
@@ -205,111 +241,111 @@
.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);
}
.form-control.valid {
border-color: var(--success-color);
}
.form-control.invalid {
border-color: var(--error-color);
.check-out .form-control:focus {
border-color: var(--orange-color);
box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.1);
}
.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;
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;
text-align: center;
width: 100%;
}
.btn-primary {
background: var(--primary-color);
/* Dynamic Button Colors */
.check-in .btn-primary {
background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
color: white;
}
.btn-primary:hover:not(:disabled) {
background: var(--primary-hover);
transform: translateY(-2px);
.check-in .btn-primary:hover {
background: linear-gradient(135deg, var(--primary-hover), #1e40af);
transform: translateY(-1px);
box-shadow: var(--shadow-lg);
}
.btn-primary:disabled {
background: #9ca3af;
.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;
}
.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 Styles */
.status-message {
margin-bottom: 1rem;
padding: 0.875rem 1rem;
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: #ecfdf5;
color: #065f46;
border: 1px solid #a7f3d0;
background: #f0fdf4;
color: #15803d;
border-left-color: #15803d;
}
.status-message.error {
background: #fef2f2;
color: #991b1b;
border: 1px solid #fecaca;
color: #dc2626;
border-left-color: #dc2626;
}
.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;
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);
display: none;
opacity: 0;
transform: translateY(20px);
transition: all 0.6s ease-out;
transition: all 0.6s ease-out 0.4s;
}
.success-card.active {
@@ -319,44 +355,34 @@
.success-header {
text-align: center;
margin-bottom: 2rem;
margin-bottom: 1.5rem;
}
.success-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--success-color), #059669);
width: 60px;
height: 60px;
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;
margin: 0 auto 1rem;
font-size: 1.5rem;
color: white;
}
@keyframes successPulse {
0% {
transform: scale(0.8);
opacity: 0;
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
opacity: 1;
}
/* 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(--success-color);
color: var(--text-primary);
margin-bottom: 0.5rem;
}
@@ -365,6 +391,26 @@
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;
@@ -378,7 +424,16 @@
padding: 0.75rem;
background: var(--background-light);
border-radius: 0.375rem;
border-left: 4px solid var(--primary-color);
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 {
@@ -393,22 +448,6 @@
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;
@@ -430,19 +469,18 @@
margin: 0;
}
.check-in-again-section {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid #e0e4e7;
.fade-transition {
opacity: 0;
transform: translateY(20px);
transition: all 0.6s ease-out;
}
.check-in-again-text {
margin-bottom: 1rem;
color: var(--text-secondary);
font-size: 0.9rem;
text-align: center;
.fade-transition.active {
opacity: 1;
transform: translateY(0);
}
/* Responsive Design */
@media (max-width: 640px) {
.destination-container {
padding: 0.5rem;
@@ -472,22 +510,12 @@
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>
<body class="{% if qr_code.location_event == 'Check Out' %}check-out{% else %}check-in{% endif %}">
<div class="destination-container">
<!-- Language Selector
<!-- Language Selector (Commented out in original) -->
<!--
<div class="language-selector">
<button
id="languageToggle"
@@ -500,7 +528,8 @@
</button>
</div>
-->
<!-- Header Section -->
<!-- Header Section with Dynamic Styling -->
<div class="destination-header fade-transition active">
<div class="header-icon">
<i class="fas fa-qrcode"></i>
@@ -524,19 +553,9 @@
</div>
</div>
<!-- Check-in Form -->
<!-- Check-in Form with Dynamic Styling -->
<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 / Por favor ingrese su ID de empleado"
data-es="Por favor ingrese su ID de empleado"
@@ -590,7 +609,7 @@
</form>
</div>
<!-- Success Card (Enhanced for Multiple Check-ins) -->
<!-- Success Card with Dynamic Styling -->
<div id="successCard" class="success-card">
<div class="success-header">
<div class="success-icon">
@@ -604,15 +623,15 @@
>
</h2>
<p class="success-subtitle">
<span
data-en="Your attendance has been recorded"
<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</span
>Your attendance has been recorded / Su asistencia ha sido registrada</span
>
</p>
</div>
<!-- NEW: Check-in Sequence Display -->
<!-- Check-in Sequence Display with Dynamic Styling -->
<div id="successCheckinSequence" class="checkin-sequence">
{{ qr_code.location_event }} #1
</div>
@@ -621,23 +640,23 @@
<div class="detail-row">
<span
class="detail-label"
data-en="Employee ID"
data-en="Employee ID / ID de Empleado"
data-es="ID Empleado"
>Employee ID</span
>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"
data-en="Location/Building - Ubicación/Edificio"
data-es="Ubicación/Edificio"
>Location/Building</span
>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" data-es="Evento"
<span class="detail-label" data-en="Event / Evento" data-es="Evento"
>Event</span
>
<span class="detail-value" id="successEvent">-</span>
@@ -645,14 +664,14 @@
<div class="detail-row">
<span
class="detail-label"
data-en="Submission Time"
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" data-es="Fecha"
<span class="detail-label" data-en="Date / Fecha" data-es="Fecha"
>Date</span
>
<span class="detail-value" id="successCheckInDate">-</span>
@@ -664,10 +683,7 @@
<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"
<span class="detail-label" data-en="Coordinates" data-es="Coordenadas"
>Coordinates</span
>
<span class="detail-value" id="successCoordinates">-</span>
@@ -679,21 +695,16 @@
<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"
<span class="detail-label" data-en="Location Accuracy" data-es="Precisió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 -->
<!-- Include Original JavaScript File -->
<script src="{{ url_for('static', filename='js/qr_destination.js') }}"></script>
</body>
</html>