From c2008435ea70b4b2040fb612904b79d2510e3b62 Mon Sep 17 00:00:00 2001
From: Nguyen Ngo <da.nguyen8744@gmail.com>
Date: Mon, 11 Aug 2025 13:23:32 -0400
Subject: [PATCH] Updated language displayed

---
 app.py                        |   3 +-
 templates/qr_destination.html | 343 ++++++++++++++++++----------------
 2 files changed, 179 insertions(+), 167 deletions(-)

diff --git a/app.py b/app.py
index 996bdb0..8f46578 100644
--- a/app.py
+++ b/app.py
@@ -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}")
diff --git a/templates/qr_destination.html b/templates/qr_destination.html
index 449e249..400a054 100644
--- a/templates/qr_destination.html
+++ b/templates/qr_destination.html
@@ -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>
+</html>
\ No newline at end of file