Update templates/combined_summary.html

templates/combined_summary.html

@@ -398,7 +398,7 @@
             border-color: #10B981;
         }
         /* Green border when section is visible */
-        .ingredients выполнение-section:not(.hidden) .ingredient-image {
+        .ingredients-section:not(.hidden) .ingredient-image {
             border: 2px solid #10B981;
         }
         /* Ensure ingredient section is smooth */
@@ -435,7 +435,7 @@
         .order-confirmed::before {
             content: '✔';
             position: absolute;
-            top: 50%;
+            top: 50;
             left: 50%;
             transform: translate(-50%, -50%);
             font-size: 120px;
@@ -447,6 +447,20 @@
             z-index: 1;
             position: relative;
         }
+        /* Success message styling */
+        .success-message {
+            text-align: center;
+            color: #10B981;
+            font-size: 1.5rem;
+            font-weight: 600;
+            margin-top: 1rem;
+            animation: fadeIn 0.5s ease-in-out;
+        }
+        /* Timer styling */
+        .delivery-timer {
+            color: #F59E0B;
+            font-weight: 600;
+        }
         /* Tier details animation */
         .tier-details {
             overflow: hidden;
@@ -568,6 +582,9 @@
             .grid {
                 grid-template-columns: repeat(2, 1fr);
             }
+            .success-message {
+                font-size: 1.25rem;
+            }
         }
         @media (min-width: 768px) {
             .grid {
@@ -588,7 +605,10 @@
         <!-- Order Confirmation -->
         <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: {{ delivery_time }} minutes</p>
+            <p class="text-center text-gray-600 mt-2">
+                Estimated delivery time: <span id="deliveryTimer" class="delivery-timer">{{ delivery_time }}:00</span>
+            </p>
+            <p id="successMessage" class="success-message hidden">Successfully Delivered!</p>
         </div>
 
         <!-- Reward Status Section -->
@@ -634,8 +654,6 @@
                     <span class="font-semibold text-orange-500" id="nextTier">{{ next_tier }}</span>
                 </p>
 
-
-
                 <!-- Tier Benefits -->
                 <div class="mt-6 bg-gray-50 rounded-xl p-4">
                     <h3 class="text-lg font-semibold mb-4 text-gray-800" id="benefitsTitle">
@@ -991,9 +1009,40 @@
             }
         }
 
-        // Set progress bar color based on points
+        // Delivery timer function
+        function startDeliveryTimer(minutes) {
+            try {
+                const timerElement = document.getElementById('deliveryTimer');
+                const successMessage = document.getElementById('successMessage');
+                const deliveryText = document.querySelector('.order-confirmed p.text-center.text-gray-600');
+
+                let totalSeconds = minutes * 60;
+
+                const updateTimer = () => {
+                    if (totalSeconds <= 0) {
+                        clearInterval(timerInterval);
+                        deliveryText.classList.add('hidden');
+                        successMessage.classList.remove('hidden');
+                        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);
+            } catch (e) {
+                console.error('Error in delivery timer:', e);
+            }
+        }
+
+        // Set progress bar color based on points and start delivery timer
         document.addEventListener('DOMContentLoaded', () => {
             try {
+                // Progress bar color
                 const progressBar = document.getElementById('progressBar');
                 const pointsDisplay = document.getElementById('pointsDisplay');
                 const points = parseInt(pointsDisplay.textContent, 10) || 0;
@@ -1005,29 +1054,36 @@
                 } else {
                     progressBar.classList.add('range-200-plus');
                 }
-            } catch (e) {
-                console.error('Error setting progress bar color:', e);
-            }
 
-            // Lazy load images with IntersectionObserver
-            const images = document.querySelectorAll('img.lazyload');
-            if ('IntersectionObserver' in window) {
-                const observer = new IntersectionObserver((entries, observer) => {
-                    entries.forEach(entry => {
-                        if (entry.isIntersecting) {
-                            const img = entry.target;
-                            img.src = img.src || '/static/placeholder.jpg';
-                            img.classList.remove('lazyload');
-                            observer.unobserve(img);
-                        }
+                // Start delivery timer
+                const deliveryTimeElement = document.getElementById('deliveryTimer');
+                const deliveryTime = parseInt(deliveryTimeElement.textContent.split(':')[0], 10) || 0;
+                if (deliveryTime > 0) {
+                    startDeliveryTimer(deliveryTime);
+                }
+
+                // Lazy load images with IntersectionObserver
+                const images = document.querySelectorAll('img.lazyload');
+                if ('IntersectionObserver' in window) {
+                    const observer = new IntersectionObserver((entries, observer) => {
+                        entries.forEach(entry => {
+                            if (entry.isIntersecting) {
+                                const img = entry.target;
+                                img.src = img.src || '/static/placeholder.jpg';
+                                img.classList.remove('lazyload');
+                                observer.unobserve(img);
+                            }
+                        });
                     });
-                });
-                images.forEach(img => observer.observe(img));
-            } else {
-                images.forEach(img => {
-                    img.src = img.src || '/static/placeholder.jpg';
-                    img.classList.remove('lazyload');
-                });
+                    images.forEach(img => observer.observe(img));
+                } else {
+                    images.forEach(img => {
+                        img.src = img.src || '/static/placeholder.jpg';
+                        img.classList.remove('lazyload');
+                    });
+                }
+            } catch (e) {
+                console.error('Error in DOMContentLoaded:', e);
             }
         });