Update templates/combined_summary.html

templates/combined_summary.html

@@ -435,7 +435,7 @@
         .order-confirmed::before {
             content: '✔';
             position: absolute;
-            top: 50;
+            top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
             font-size: 120px;
@@ -457,9 +457,15 @@
             animation: fadeIn 0.5s ease-in-out;
         }
         /* Timer styling */
-        .delivery-timer {
-            color: #F59E0B;
+        #deliveryTimer {
+            display: inline-block;
             font-weight: 600;
+            color: #10B981;
+            background: #ECFDF5;
+            padding: 4px 12px;
+            border-radius: 6px;
+            min-width: 80px;
+            text-align: center;
         }
         /* Tier details animation */
         .tier-details {
@@ -606,7 +612,7 @@
         <div class="section bg-white shadow-sm rounded-xl p-6 mb-6 order-confirmed" role="alert">
             <h1 class="text-center text-2xl font-bold text-orange-500">Order Confirmed!</h1>
             <p class="text-center text-gray-600 mt-2">
-                Estimated delivery time: <span id="deliveryTimer" class="delivery-timer">{{ delivery_time }}:00</span>
+                Estimated delivery time: <span id="deliveryTimer" aria-live="polite">{{ delivery_time }}:00</span>
             </p>
             <p id="successMessage" class="success-message hidden">Successfully Delivered!</p>
         </div>
@@ -1010,32 +1016,59 @@
         }
 
         // Delivery timer function
-        function startDeliveryTimer(minutes) {
+        function startDeliveryTimer() {
             try {
                 const timerElement = document.getElementById('deliveryTimer');
                 const successMessage = document.getElementById('successMessage');
                 const deliveryText = document.querySelector('.order-confirmed p.text-center.text-gray-600');
+                const storageKey = 'orderDeliveryTimer';
+                const now = Date.now();
+
+                // Get delivery time from template (in minutes)
+                const initialDeliveryTime = {{ delivery_time | default(15) }};
+                const totalDuration = initialDeliveryTime * 60 * 1000; // Convert to milliseconds
 
-                let totalSeconds = minutes * 60;
+                // Check if timer data exists in localStorage
+                let timerData = JSON.parse(localStorage.getItem(storageKey));
+                let startTime;
 
-                const updateTimer = () => {
-                    if (totalSeconds <= 0) {
+                if (timerData && timerData.startTime && timerData.totalDuration === totalDuration) {
+                    // Resume existing timer
+                    startTime = timerData.startTime;
+                } else {
+                    // Start new timer
+                    startTime = now;
+                    localStorage.setItem(storageKey, JSON.stringify({
+                        startTime: startTime,
+                        totalDuration: totalDuration
+                    }));
+                }
+
+                // Update timer every second
+                const timerInterval = setInterval(() => {
+                    const elapsedTime = Date.now() - startTime;
+                    const remainingTime = totalDuration - elapsedTime;
+
+                    if (remainingTime <= 0) {
                         clearInterval(timerInterval);
                         deliveryText.classList.add('hidden');
                         successMessage.classList.remove('hidden');
+                        timerElement.textContent = 'Order is ready!';
+                        timerElement.setAttribute('aria-label', 'Order is ready for delivery');
+                        localStorage.removeItem(storageKey);
                         return;
                     }
 
-                    const mins = Math.floor(totalSeconds / 60);
-                    const secs = totalSeconds % 60;
-                    timerElement.textContent = `${mins}:${secs < 10 ? '0' : ''}${secs}`;
-                    totalSeconds--;
-                };
-
-                updateTimer(); // Initial call
-                const timerInterval = setInterval(updateTimer, 1000);
+                    const remainingSeconds = Math.floor(remainingTime / 1000);
+                    const minutes = Math.floor(remainingSeconds / 60);
+                    const seconds = remainingSeconds % 60;
+                    const formattedTime = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+                    timerElement.textContent = formattedTime;
+                    timerElement.setAttribute('aria-label', `Estimated delivery time: ${minutes} minutes and ${seconds} seconds`);
+                }, 1000);
             } catch (e) {
-                console.error('Error in delivery timer:', e);
+                console.error('Error running delivery timer:', e);
+                document.getElementById('deliveryTimer').textContent = 'Time unavailable';
             }
         }
 
@@ -1056,11 +1089,7 @@
                 }
 
                 // Start delivery timer
-                const deliveryTimeElement = document.getElementById('deliveryTimer');
-                const deliveryTime = parseInt(deliveryTimeElement.textContent.split(':')[0], 10) || 0;
-                if (deliveryTime > 0) {
-                    startDeliveryTimer(deliveryTime);
-                }
+                startDeliveryTimer();
 
                 // Lazy load images with IntersectionObserver
                 const images = document.querySelectorAll('img.lazyload');