Update templates/combined_summary.html

templates/combined_summary.html

@@ -20,22 +20,41 @@
             from { transform: rotate(0deg) translateX(-100%); }
             to { transform: rotate(25deg) translateX(100%); }
         }
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(255, 179, 71, 0.7); }
+            70% { box-shadow: 0 0 0 10px rgba(255, 179, 71, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(255, 179, 71, 0); }
+        }
+        @keyframes slideDown {
+            from { max-height: 0; opacity: 0; }
+            to { max-height: 1000px; opacity: 1; }
+        }
         .modal, .popup {
-            animation: fadeIn 0.2s ease-in-out;
+            animation: fadeIn 0.3s ease-in-out;
         }
         .progress-bar {
-            transition: width 0.6s ease-in-out;
+            transition: width 0.6s ease-in-out, background 0.3s ease-in-out;
         }
-        .ingredient-image {
-            transition: transform 0.3s ease-in-out;
+        /* Progress bar color ranges */
+        .progress-bar.range-0-100 {
+            background: linear-gradient(90deg, #2DD4BF, #5EEAD4);
+        }
+        .progress-bar.range-100-200 {
+            background: linear-gradient(90deg, #10B981, #34D399);
+        }
+        .progress-bar.range-200-plus {
+            background: linear-gradient(90deg, #F59E0B, #FBBF24);
         }
         .ingredient-button:hover .ingredient-image {
             transform: scale(1.1);
+            border-color: #10B981;
         }
         .tier-badge {
             position: relative;
             overflow: hidden;
             background-color: #FFB347;
+            animation: pulse 2s infinite;
+            will-change: box-shadow;
         }
         .tier-badge::after {
             content: '';
@@ -44,19 +63,82 @@
             left: -50%;
             width: 200%;
             height: 200%;
-            background: linear-gradient(45deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
+            background: linear-gradient(45deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
             animation: shine 3s infinite;
         }
         /* Custom class for order items */
         .custom-class {
             text-align: center;
-            border-radius: 8px;
+            border-radius: 12px;
             border-width: 1px;
             border-color: #E5E7EB;
-            padding: 20px !important;
-            margin-bottom: 12px;
+            padding: 24px !important;
+            margin-bottom: 16px;
             background-color: #FFFFFF;
             box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+            width: 100%;
+            max-width: clamp(288px, 100%, 488px);
+            margin-left: auto;
+            margin-right: auto;
+        }
+        .custom-class:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        }
+        /* Order image wrapper for positioning text */
+        .order-image-wrapper {
+            position: relative;
+            display: block;
+            margin-bottom: 16px;
+        }
+        /* Order image styles */
+        .order-image {
+            max-width: 100%;
+            max-height: 330px;
+            width: auto;
+            height: auto;
+            aspect-ratio: 4/3;
+            object-fit: contain;
+            border-radius: 10px;
+            border: 3px solid #D1D5DB;
+            box-sizing: border-box;
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+            will-change: transform, box-shadow;
+            display: block;
+            margin: 0 auto 20px;
+        }
+        .order-image:hover {
+            transform: scale(1.04);
+            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+        }
+        /* Fallback for placeholder images */
+        .order-image[src$="placeholder.jpg"] {
+            background: linear-gradient(135deg, #F9FAFB, #E5E7EB);
+            object-fit: contain;
+        }
+        /* Item name below image */
+        .order-item-name {
+            display: block;
+            text-align: center;
+            color: #000000;
+            font-size: 1.5rem;
+            font-weight: 600;
+            margin-top: 12px;
+            padding: 8px 16px;
+            background: #FFFFFF;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            max-width: 100%;
+            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+        }
+        .order-image-wrapper:hover .order-item-name {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         }
         .history {
             display: flex;
@@ -64,29 +146,110 @@
             font-size: 1.75rem;
             font-weight: 700;
             padding: 1.5rem;
+            background: linear-gradient(45deg, #FFF7ED, #FFE4D6);
+            border-radius: 8px;
+            margin-bottom: 1rem;
         }
         /* Scrollable sector images */
         .sector-images-container {
+            position: relative;
             display: flex;
+            flex-wrap: nowrap;
             overflow-x: auto;
-            padding: 10px 0;
-            gap: 15px;
+            overflow-y: hidden;
+            padding: 0 10px;
+            gap: 20px;
+            width: 100%;
+            max-width: none;
+            scroll-behavior: smooth;
+            scrollbar-width: thin;
+            scrollbar-color: #FFB347 #E5E7EB;
+        }
+        .sector-images-container::-webkit-scrollbar {
+            height: 8px;
+        }
+        .sector-images-container::-webkit-scrollbar-track {
+            background: #E5E7EB;
+        }
+        .sector-images-container::-webkit-scrollbar-thumb {
+            background: #FFB347;
+            border-radius: 4px;
+        }
+        .sector-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin: 0 auto;
+            flex-shrink: 0;
+            background: #FFF7ED;
+            border-radius: 8px;
+            padding: 8px;
+            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+        }
+        .sector-item:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         }
         .sector-image {
             max-width: 150px;
-            height: 100px;
-            object-fit: cover;
+            max-height: 100px;
+            width: auto;
+            height: auto;
+            aspect-ratio: 3/2;
+            object-fit: contain;
             cursor: pointer;
-            border-radius: 6px;
+            border-radius: 8px;
+            border: 1px solid #D1D5DB;
+            box-sizing: border-box;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+            transition: transform 0.15s ease-in-out;
+            will-change: transform;
+        }
+        .sector-image:hover {
+            transform: scale(1.08);
         }
         .sector-name {
             text-align: center;
             font-size: 0.75rem;
             font-weight: 600;
             margin-top: 6px;
-            max-width: 100px;
+            max-width: 150px;
             color: #1F2937;
         }
+        /* Scroll buttons */
+        .scroll-button {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            background: #FFB347;
+            color: #FFFFFF;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            cursor: pointer;
+            opacity: 0;
+            transition: opacity 0.3s ease-in-out, transform 0.2s ease-in-out;
+            z-index: 10;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+        .scroll-button:hover {
+            background: #FF9E2C;
+            transform: translateY(-50%) scale(1.1);
+        }
+        .sector-images-container:hover .scroll-button {
+            opacity: 1;
+        }
+        .scroll-button.left {
+            left: 0;
+        }
+        .scroll-button.right {
+            right: 0;
+        }
         /* Full-width gradient header */
         .back-to-menu {
             position: fixed;
@@ -112,6 +275,8 @@
         /* Content spacing */
         .container {
             margin-top: 90px;
+            max-width: 100%;
+            padding: 20px;
         }
         /* Sector popup */
         #sector-popup {
@@ -122,7 +287,7 @@
             justify-content: center;
             align-items: center;
             z-index: 10000;
-            animation: fadeIn 0.2s ease-in-out;
+            animation: fadeIn 0.3s ease-in-out;
         }
         #popup-content {
             background: linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 100%);
@@ -194,7 +359,7 @@
             justify-content: center;
             align-items: center;
             z-index: 10000;
-            animation: fadeIn 0.2s ease-in-out;
+            animation: fadeIn 0.3s ease-in-out;
         }
         .ingredient-modal {
             background: linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 100%);
@@ -215,10 +380,37 @@
             background: #F9FAFB;
             border-radius: 6px;
         }
-        /* Green border for ingredient images when section is visible */
-        .ingredients-section:not(.hidden) .ingredient-image {
-            border: 2px solid #10B981;
+        /* Ingredient images */
+        .ingredient-image {
+            max-width: 100%;
+            max-height: 100px;
+            width: 100%;
+            height: 100px;
+            aspect-ratio: 1/1;
+            object-fit: cover;
             border-radius: 6px;
+            border: 1px solid #D1D5DB;
+            transition: transform 0.3s ease-in-out, border-color 0.3s ease-in-out;
+        }
+        /* Hover effect for ingredient buttons */
+        .ingredient-button:hover .ingredient-image {
+            transform: scale(1.1);
+            border-color: #10B981;
+        }
+        /* Green border when section is visible */
+        .ingredients выполнение-section:not(.hidden) .ingredient-image {
+            border: 2px solid #10B981;
+        }
+        /* Ensure ingredient section is smooth */
+        .ingredients-section {
+            transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out;
+            max-height: 0;
+            opacity: 0;
+            overflow: hidden;
+        }
+        .ingredients-section:not(.hidden) {
+            max-height: 1000px;
+            opacity: 1;
         }
         /* Prevent body scroll when modal is open */
         body.modal-open {
@@ -234,7 +426,93 @@
             border-radius: 8px;
             margin-bottom: 20px;
         }
+        /* Order confirmed section */
+        .order-confirmed {
+            background: linear-gradient(135deg, #FFF7ED 0%, #FFE4D6 100%);
+            position: relative;
+            overflow: hidden;
+        }
+        .order-confirmed::before {
+            content: '✔';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 120px;
+            color: rgba(16, 185, 129, 0.1);
+            z-index: 0;
+        }
+        .order-confirmed h1 {
+            font-size: 2.25rem;
+            z-index: 1;
+            position: relative;
+        }
+        /* Tier details animation */
+        .tier-details {
+            overflow: hidden;
+            transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out;
+            max-height: 0;
+            opacity: 0;
+        }
+        .tier-details:not(.hidden) {
+            max-height: 1000px;
+            opacity: 1;
+            animation: slideDown 0.5s ease-in-out;
+        }
+        /* Price badge */
+        .price-badge {
+            display: inline-block;
+            background: #FFE4D6;
+            padding: 6px 14px;
+            border-radius: 14px;
+            font-weight: 600;
+            color: #C2410C;
+        }
+        /* Show Ingredients button focus style */
+        .ingredients-toggle-button:focus {
+            outline: none;
+            transform: scale(1.05);
+        }
         /* Responsive adjustments */
+        @media (max-width: 768px) {
+            .custom-class {
+                padding: 20px !important;
+                max-width: 400px;
+            }
+            .order-image {
+                max-height: 270px;
+            }
+            .order-item-name {
+                font-size: 1.25rem;
+                padding: 6px 12px;
+            }
+            .grid {
+                grid-template-columns: repeat(2, 1fr);
+            }
+        }
+        @media (max-width: 480px) {
+            .custom-class {
+                max-width: 336px;
+            }
+            .order-image {
+                max-height: 225px;
+            }
+            .order-item-name {
+                font-size: 1.125rem;
+            }
+        }
+        @media (max-width: 360px) {
+            .custom-class {
+                max-width: 296px;
+            }
+            .order-image {
+                max-height: 195px;
+            }
+            .order-item-name {
+                font-size: 1rem;
+                padding: 4px 10px;
+            }
+        }
         @media (max-width: 640px) {
             .back-to-menu {
                 padding: 12px 16px;
@@ -242,17 +520,29 @@
             }
             .container {
                 margin-top: 70px;
+                padding: 16px;
             }
             .history {
                 font-size: 1.5rem;
                 padding: 1rem;
             }
-            .custom-class {
-                padding: 16px !important;
-            }
             .sector-image {
                 max-width: 120px;
-                height: 80px;
+                max-height: 80px;
+            }
+            .sector-name {
+                max-width: 120px;
+            }
+            .sector-item {
+                padding: 6px;
+            }
+            .order-confirmed h1 {
+                font-size: 1.75rem;
+            }
+            .scroll-button {
+                width: 32px;
+                height: 32px;
+                font-size: 16px;
             }
             #popup-content {
                 width: 95%;
@@ -271,6 +561,18 @@
             .popup-close::before {
                 animation: lightMoveUp 1.2s infinite linear;
             }
+            .ingredient-image {
+                max-height: 80px;
+                height: 80px;
+            }
+            .grid {
+                grid-template-columns: repeat(2, 1fr);
+            }
+        }
+        @media (min-width: 768px) {
+            .grid {
+                grid-template-columns: repeat(3, 1fr);
+            }
         }
     </style>
 </head>
@@ -284,7 +586,7 @@
 
     <div class="container mx-auto p-6 pt-2">
         <!-- Order Confirmation -->
-        <div class="section bg-white shadow-sm rounded-xl p-6 mb-6">
+        <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>
         </div>
@@ -318,7 +620,7 @@
 
                 <!-- Progress Bar -->
                 <div class="relative h-4 bg-gray-200 rounded-full overflow-hidden mb-4">
-                    <div id="progressBar" class="absolute left-0 top-0 h-full progress-bar bg-teal-400" style="width: {{ progress_percentage }}%"></div>
+                    <div id="progressBar" class="absolute left-0 top-0 h-full progress-bar" style="width: {{ progress_percentage }}%"></div>
                 </div>
 
                 <div class="flex justify-between text-sm text-gray-600 mb-4">
@@ -378,13 +680,32 @@
             <h1 class="text-center text-2xl font-bold text-orange-500">Ingredient History</h1>
         </div>
         {% if sector_details %}
-        <div class="sector-images-container">
+        <div class="sector-images-container" role="region" aria-label="Ingredient History Carousel">
+            <button class="scroll-button left" onclick="scrollContainer('left')" aria-label="Scroll left">
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M15 18l-6-6 6-6"></path>
+                </svg>
+            </button>
             {% for sector_name, sector in sector_details.items() %}
             <div class="sector-item">
-                <img src="{{ sector.image_url | default('/static/placeholder.jpg') }}" alt="{{ sector_name }}" class="sector-image lazyload" loading="lazy" onclick="showSectorDescription('{{ sector.description | escape }}')">
-                <h3 class="sector-name">{{ sector_name }}</h3>
+                <img 
+                    src="{{ sector.image_url | default('/static/placeholder.jpg') }}" 
+                    alt="{{ sector_name }}" 
+                    class="sector-image lazyload" 
+                    loading="lazy" 
+                    onclick="showSectorDescription('{{ sector.description | escape }}')" 
+                    role="img" 
+                    aria-describedby="sector-name-{{ loop.index }}"
+                    onerror="this.src='/static/placeholder.jpg'; this.alt='Placeholder image'"
+                >
+                <h3 id="sector-name-{{ loop.index }}" class="sector-name">{{ sector_name }}</h3>
             </div>
             {% endfor %}
+            <button class="scroll-button right" onclick="scrollContainer('right')" aria-label="Scroll right">
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M9 18l6-6-6-6"></path>
+                </svg>
+            </button>
         </div>
         {% else %}
         <div class="no-data">No sector details available.</div>
@@ -406,46 +727,73 @@
         {% if order_items %}
         {% for item in order_items %}
         <div class="custom-class">
-            <img src="{{ item.image_url | default('/static/placeholder.jpg') }}" alt="{{ item.name | escape }}" class="w-full h-48 object-cover rounded-xl mb-4 lazyload" loading="lazy" />
-            <h3 class="text-lg font-semibold text-gray-800">{{ item.name | escape }}</h3>
-            <p class="text-gray-600 mb-2">${{ "%.2f"|format(item.price | default(0)) }}</p>
+            <div class="order-image-wrapper">
+                <img 
+                    src="{{ item.image_url | default('/static/placeholder.jpg') }}" 
+                    alt="{{ item.name | escape }}" 
+                    class="order-image lazyload" 
+                    loading="lazy" 
+                    decoding="async"
+                    role="img" 
+                    aria-label="Image of {{ item.name | escape }}"
+                    aria-describedby="order-price-{{ loop.index }}"
+                    onerror="this.src='/static/placeholder.jpg'; this.alt='Placeholder image'"
+                />
+                <h3 class="order-item-name" id="order-name-{{ loop.index }}">{{ item.name | escape }}</h3>
+            </div>
+            <p id="order-price-{{ loop.index }}" class="text-gray-600 mb-2 price-badge">${{ "%.2f"|format(item.price | default(0)) }}</p>
 
-            {% if item.ingredients %}
-            <button id="ingredientsToggleButton{{ loop.index }}" class="text-green-600 text-sm font-semibold mt-2 ml-2 text-left pb-4 hover:text-green-700" onclick="toggleIngredients({{ loop.index }})" aria-expanded="false" aria-controls="ingredientsSection{{ loop.index }}">
+            {% if item.category != 'Soft Drink' %}
+            <button 
+                id="ingredientsToggleButton{{ loop.index }}" 
+                class="ingredients-toggle-button text-green-600 text-sm font-semibold mt-2 ml-2 text-left pb-4 hover:text-green-700" 
+                onclick="toggleIngredients({{ loop.index }})" 
+                aria-expanded="false" 
+                aria-controls="ingredientsSection{{ loop.index }}"
+                data-index="{{ loop.index }}"
+            >
                 Show Ingredients
             </button>
 
-            <div id="ingredientsSection{{ loop.index }}" class="ingredients-section hidden mt-4">
-                <div class="grid grid-cols-2 gap-4">
+            <div id="ingredientsSection{{ loop.index }}" class="ingredients-section hidden mt-4" aria-hidden="true">
+                {% if item.ingredients and item.ingredients|length > 0 %}
+                <div class="grid grid-cols-2 gap-4 sm:grid-cols-3">
                     {% for ingredient in item.ingredients %}
                     <button 
-                        onclick="showIngredientDetails(
-                            '{{ loop.index }}', 
-                            '{{ ingredient.name | escape }}', 
-                            '{{ ingredient.image | default('/static/placeholder.jpg') | escape }}', 
-                            '{{ ingredient.health_benefits | escape }}', 
-                            '{{ ingredient.fun_facts | escape }}'
-                        )"
-                        class="relative group ingredient-button"
-                        aria-label="View details for {{ ingredient.name }}"
+                        class="relative group ingredient-button focus:outline-none focus:ring-2 focus:ring-green-500" 
+                        aria-label="View details for {{ ingredient.name | escape }}"
+                        data-ingredient='{
+                            "index": "{{ loop.index }}",
+                            "name": "{{ ingredient.name | escape }}",
+                            "image": "{{ ingredient.image | default('/static/placeholder.jpg') | escape }}",
+                            "health_benefits": "{{ ingredient.health_benefits | escape }}",
+                            "fun_facts": "{{ ingredient.fun_facts | escape }}"
+                        }'
+                        onclick="showIngredientDetails(this)"
                     >
                         <div class="overflow-hidden rounded-lg">
                             <img 
                                 src="{{ ingredient.image | default('/static/placeholder.jpg') }}" 
                                 alt="{{ ingredient.name | escape }}"
-                                class="w-full h-32 object-cover ingredient-image lazyload"
+                                class="ingredient-image lazyload"
                                 loading="lazy"
+                                decoding="async"
+                                onerror="this.src='/static/placeholder.jpg'; this.alt='Placeholder image'"
                             />
                         </div>
                         <p class="mt-2 text-center text-sm font-medium text-gray-800">{{ ingredient.name | escape }}</p>
                     </button>
                     {% endfor %}
                 </div>
+                {% else %}
+                <p class="text-gray-600 text-center">No ingredients available for this item.</p>
+                {% endif %}
             </div>
             {% endif %}
         </div>
 
         <!-- Modal for Ingredients -->
+        {% if item.category != 'Soft Drink' %}
         <div id="ingredientModal{{ loop.index }}" class="ingredient-modal-container hidden modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle{{ loop.index }}">
             <div class="ingredient-modal">
                 <div class="p-6">
@@ -454,7 +802,7 @@
                         <button onclick="closeModal({{ loop.index }})" class="popup-close" aria-label="Close ingredient details modal"><span>×</span></button>
                     </div>
 
-                    <img id="modalImage{{ loop.index }}" src="" alt="" class="w-full h-48 object-cover rounded-xl mb-4 border border-gray-200 lazyload" loading="lazy" />
+                    <img id="modalImage{{ loop.index }}" src="" alt="" class="w-full max-h-48 object-contain rounded-xl mb-4 border border-gray-200 lazyload" loading="lazy" decoding="async" />
 
                     <div class="space-y-4">
                         <div class="modal-section">
@@ -480,6 +828,7 @@
                 </div>
             </div>
         </div>
+        {% endif %}
         {% endfor %}
         {% else %}
         <div class="no-data">No previous orders found.</div>
@@ -500,6 +849,21 @@
             };
         }
 
+        // Scroll container function
+        function scrollContainer(direction) {
+            try {
+                const container = document.querySelector('.sector-images-container');
+                const scrollAmount = 200;
+                if (direction === 'left') {
+                    container.scrollLeft -= scrollAmount;
+                } else {
+                    container.scrollLeft += scrollAmount;
+                }
+            } catch (e) {
+                console.error('Error scrolling container:', e);
+            }
+        }
+
         // Show sector description popup
         function showSectorDescription(description) {
             try {
@@ -513,38 +877,63 @@
 
         // Close sector popup
         function closePopup() {
-            document.getElementById('sector-popup').style.display = 'none';
-            document.body.classList.remove('modal-open');
+            try {
+                document.getElementById('sector-popup').style.display = 'none';
+                document.body.classList.remove('modal-open');
+            } catch (e) {
+                console.error('Error closing popup:', e);
+            }
         }
 
-        // Toggle tier details
+        // Toggle tier details with animation
         function toggleTierDetails() {
-            const tierDetails = document.getElementById('tierDetails');
-            const arrowPath = document.getElementById('arrowPath');
-            const toggleButton = tierDetails.parentElement.querySelector('[aria-controls="tierDetails"]');
-            const isExpanded = !tierDetails.classList.contains('hidden');
-            tierDetails.classList.toggle('hidden');
-            arrowPath.setAttribute('d', tierDetails.classList.contains('hidden') ? 'M19 9l-7 7-7-7' : 'M19 15l-7-7-7 7');
-            toggleButton.setAttribute('aria-expanded', !isExpanded);
+            try {
+                const tierDetails = document.getElementById('tierDetails');
+                const arrowPath = document.getElementById('arrowPath');
+                const toggleButton = tierDetails.parentElement.querySelector('[aria-controls="tierDetails"]');
+                const isExpanded = !tierDetails.classList.contains('hidden');
+                tierDetails.classList.toggle('hidden');
+                arrowPath.setAttribute('d', tierDetails.classList.contains('hidden') ? 'M19 9l-7 7-7-7' : 'M19 15l-7-7-7 7');
+                toggleButton.setAttribute('aria-expanded', !isExpanded);
+            } catch (e) {
+                console.error('Error toggling tier details:', e);
+            }
         }
 
         // Toggle ingredients section
         function toggleIngredients(index) {
             try {
-                const currentSection = document.getElementById('ingredientsSection' + index);
-                const currentButton = document.getElementById('ingredientsToggleButton' + index);
-                const isCurrentlyVisible = !currentSection.classList.contains('hidden');
+                const section = document.getElementById(`ingredientsSection${index}`);
+                const button = document.getElementById(`ingredientsToggleButton${index}`);
 
-                document.querySelectorAll('[id^="ingredientsSection"]').forEach(section => section.classList.add('hidden'));
-                document.querySelectorAll('[id^="ingredientsToggleButton"]').forEach(button => {
-                    button.textContent = 'Show Ingredients';
-                    button.setAttribute('aria-expanded', 'false');
+                if (!section || !button) {
+                    console.error(`Elements not found for index ${index}`);
+                    return;
+                }
+
+                const isHidden = section.classList.contains('hidden');
+                
+                // Close all other ingredient sections
+                document.querySelectorAll('.ingredients-section').forEach(s => {
+                    s.classList.add('hidden');
+                    s.setAttribute('aria-hidden', 'true');
+                });
+                document.querySelectorAll('[id^="ingredientsToggleButton"]').forEach(b => {
+                    b.textContent = 'Show Ingredients';
+                    b.setAttribute('aria-expanded', 'false');
                 });
 
-                if (!isCurrentlyVisible) {
-                    currentSection.classList.remove('hidden');
-                    currentButton.textContent = 'Hide Ingredients';
-                    currentButton.setAttribute('aria-expanded', 'true');
+                // Toggle the current section
+                if (isHidden) {
+                    section.classList.remove('hidden');
+                    section.setAttribute('aria-hidden', 'false');
+                    button.textContent = 'Hide Ingredients';
+                    button.setAttribute('aria-expanded', 'true');
+                } else {
+                    section.classList.add('hidden');
+                    section.setAttribute('aria-hidden', 'true');
+                    button.textContent = 'Show Ingredients';
+                    button.setAttribute('aria-expanded', 'false');
                 }
             } catch (e) {
                 console.error('Error toggling ingredients:', e);
@@ -552,27 +941,35 @@
         }
 
         // Show ingredient details modal
-        function showIngredientDetails(index, name, image, healthBenefits, funFacts) {
+        function showIngredientDetails(button) {
             try {
-                const healthBenefitsList = (healthBenefits || '').split(',').filter(item => item.trim());
-                const funFactsList = (funFacts || '').split(',').filter(item => item.trim());
-                document.getElementById("modalTitle" + index).textContent = name || 'Unknown Ingredient';
-                document.getElementById("modalImage" + index).src = image || '/static/placeholder.jpg';
-                const healthBenefitsUl = document.getElementById("healthBenefits" + index);
-                const funFactsUl = document.getElementById("funFacts" + index);
-                healthBenefitsUl.innerHTML = '';
-                funFactsUl.innerHTML = '';
-                healthBenefitsList.length ? healthBenefitsList.forEach(item => {
-                    const li = document.createElement("li");
-                    li.textContent = item.trim();
-                    healthBenefitsUl.appendChild(li);
-                }) : healthBenefitsUl.innerHTML = '<li>No health benefits available.</li>';
-                funFactsList.length ? funFactsList.forEach(item => {
-                    const li = document.createElement("li");
-                    li.textContent = item.trim();
-                    funFactsUl.appendChild(li);
-                }) : funFactsUl.innerHTML = '<li>No fun facts available.</li>';
-                document.getElementById("ingredientModal" + index).style.display = "flex";
+                const data = JSON.parse(button.getAttribute('data-ingredient'));
+                const { index, name, image, health_benefits, fun_facts } = data;
+
+                const healthBenefitsList = (health_benefits || '').split(',').filter(item => item.trim());
+                const funFactsList = (fun_facts || '').split(',').filter(item => item.trim());
+
+                const modal = document.getElementById(`ingredientModal${index}`);
+                if (!modal) {
+                    console.error(`Modal not found for index ${index}`);
+                    return;
+                }
+
+                document.getElementById(`modalTitle${index}`).textContent = name || 'Unknown Ingredient';
+                const modalImage = document.getElementById(`modalImage${index}`);
+                modalImage.src = image || '/static/placeholder.jpg';
+                modalImage.alt = name || 'Ingredient image';
+
+                const healthBenefitsUl = document.getElementById(`healthBenefits${index}`);
+                const funFactsUl = document.getElementById(`funFacts${index}`);
+                healthBenefitsUl.innerHTML = healthBenefitsList.length 
+                    ? healthBenefitsList.map(item => `<li>${item.trim()}</li>`).join('')
+                    : '<li>No health benefits available.</li>';
+                funFactsUl.innerHTML = funFactsList.length 
+                    ? funFactsList.map(item => `<li>${item.trim()}</li>`).join('')
+                    : '<li>No fun facts available.</li>';
+
+                modal.style.display = 'flex';
                 document.body.classList.add('modal-open');
             } catch (e) {
                 console.error('Error showing ingredient details:', e);
@@ -582,22 +979,90 @@
         // Close ingredient modal
         function closeModal(index) {
             try {
-                document.getElementById("ingredientModal" + index).style.display = "none";
-                document.body.classList.remove('modal-open');
+                const modal = document.getElementById(`ingredientModal${index}`);
+                if (modal) {
+                    modal.style.display = 'none';
+                    document.body.classList.remove('modal-open');
+                }
             } catch (e) {
                 console.error('Error closing modal:', e);
             }
         }
 
+        // Set progress bar color based on points
+        document.addEventListener('DOMContentLoaded', () => {
+            try {
+                const progressBar = document.getElementById('progressBar');
+                const pointsDisplay = document.getElementById('pointsDisplay');
+                const points = parseInt(pointsDisplay.textContent, 10) || 0;
+
+                if (points <= 100) {
+                    progressBar.classList.add('range-0-100');
+                } else if (points <= 200) {
+                    progressBar.classList.add('range-100-200');
+                } 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);
+                        }
+                    });
+                });
+                images.forEach(img => observer.observe(img));
+            } else {
+                images.forEach(img => {
+                    img.src = img.src || '/static/placeholder.jpg';
+                    img.classList.remove('lazyload');
+                });
+            }
+        });
+
         // Close modals on outside click
-        document.addEventListener('click', function(e) {
-            if (e.target.id === 'sector-popup') {
-                closePopup();
-            }
-            document.querySelectorAll('.ingredient-modal-container').forEach(modal => {
-                if (e.target === modal) {
-                    const index = modal.id.replace('ingredientModal', '');
-                    closeModal(index);
+        document.addEventListener('click', (e) => {
+            try {
+                if (e.target.id === 'sector-popup') {
+                    closePopup();
+                }
+                document.querySelectorAll('.ingredient-modal-container').forEach(modal => {
+                    if (e.target === modal) {
+                        const index = modal.id.replace('ingredientModal', '');
+                        closeModal(index);
+                    }
+                });
+            } catch (e) {
+                console.error('Error handling outside click:', e);
+            }
+        });
+
+        // Keyboard navigation for scroll buttons
+        document.querySelectorAll('.scroll-button').forEach(button => {
+            button.addEventListener('keydown', function(e) {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    scrollContainer(button.classList.contains('left') ? 'left' : 'right');
+                }
+            });
+        });
+
+        // Keyboard navigation for toggle buttons
+        document.querySelectorAll('[id^="ingredientsToggleButton"]').forEach(button => {
+            button.addEventListener('keydown', (e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    const index = button.getAttribute('data-index');
+                    toggleIngredients(index);
                 }
             });
         });