|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge"> |
|
|
<title>Order Summary</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<style> |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; transform: translateY(10px); } |
|
|
to { opacity: 1; transform: translateY(0); } |
|
|
} |
|
|
@keyframes lightMoveUp { |
|
|
0% { background-position: 0 100%; } |
|
|
100% { background-position: 0 0%; } |
|
|
} |
|
|
@keyframes shine { |
|
|
from { transform: rotate(0deg) translateX(-100%); } |
|
|
to { transform: rotate(25deg) translateX(100%); } |
|
|
} |
|
|
.modal, .popup { |
|
|
animation: fadeIn 0.2s ease-in-out; |
|
|
} |
|
|
.progress-bar { |
|
|
transition: width 0.6s ease-in-out; |
|
|
} |
|
|
.ingredient-image { |
|
|
transition: transform 0.3s ease-in-out; |
|
|
} |
|
|
.ingredient-button:hover .ingredient-image { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
.tier-badge { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
background-color: #FFB347; |
|
|
} |
|
|
.tier-badge::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: -50%; |
|
|
left: -50%; |
|
|
width: 200%; |
|
|
height: 200%; |
|
|
background: linear-gradient(45deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%); |
|
|
animation: shine 3s infinite; |
|
|
} |
|
|
|
|
|
.custom-class { |
|
|
text-align: center; |
|
|
border-radius: 8px; |
|
|
border-width: 1px; |
|
|
border-color: #E5E7EB; |
|
|
padding: 20px !important; |
|
|
margin-bottom: 12px; |
|
|
background-color: #FFFFFF; |
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
.history { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
font-size: 1.75rem; |
|
|
font-weight: 700; |
|
|
padding: 1.5rem; |
|
|
} |
|
|
|
|
|
.sector-images-container { |
|
|
display: flex; |
|
|
overflow-x: auto; |
|
|
padding: 10px 0; |
|
|
gap: 15px; |
|
|
} |
|
|
.sector-image { |
|
|
max-width: 150px; |
|
|
height: 100px; |
|
|
object-fit: cover; |
|
|
cursor: pointer; |
|
|
border-radius: 6px; |
|
|
} |
|
|
.sector-name { |
|
|
text-align: center; |
|
|
font-size: 0.75rem; |
|
|
font-weight: 600; |
|
|
margin-top: 6px; |
|
|
max-width: 100px; |
|
|
color: #1F2937; |
|
|
} |
|
|
|
|
|
.back-to-menu { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
padding: 14px 24px; |
|
|
background: linear-gradient(45deg, #FFA07A, #FFB347); |
|
|
color: #FFFFFF; |
|
|
font-size: 1.125rem; |
|
|
font-weight: 600; |
|
|
text-decoration: none; |
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); |
|
|
z-index: 9999; |
|
|
transition: background-color 0.3s ease, transform 0.2s ease; |
|
|
} |
|
|
.back-to-menu:hover { |
|
|
background: linear-gradient(45deg, #FF8C61, #FF9E2C); |
|
|
transform: translateY(-1px); |
|
|
} |
|
|
|
|
|
.container { |
|
|
margin-top: 90px; |
|
|
} |
|
|
|
|
|
#sector-popup { |
|
|
display: none; |
|
|
position: fixed; |
|
|
inset: 0; |
|
|
background: rgba(17, 24, 39, 0.6); |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
z-index: 10000; |
|
|
animation: fadeIn 0.2s ease-in-out; |
|
|
} |
|
|
#popup-content { |
|
|
background: linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 100%); |
|
|
padding: 24px; |
|
|
border-radius: 12px; |
|
|
width: 90%; |
|
|
max-width: 550px; |
|
|
max-height: 85vh; |
|
|
overflow-y: auto; |
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); |
|
|
border: 1px solid #E5E7EB; |
|
|
position: relative; |
|
|
contain: layout; |
|
|
} |
|
|
.popup-header { |
|
|
position: relative; |
|
|
padding-bottom: 12px; |
|
|
margin-bottom: 16px; |
|
|
border-bottom: 2px solid #FFB347; |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
} |
|
|
.popup-close { |
|
|
background: #FFB347; |
|
|
color: #FFFFFF; |
|
|
border-radius: 50%; |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 24px; |
|
|
font-weight: bold; |
|
|
border: none; |
|
|
cursor: pointer; |
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
|
|
line-height: 1; |
|
|
padding: 0; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
will-change: transform, background; |
|
|
} |
|
|
.popup-close::before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 100%; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: linear-gradient(to top, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%); |
|
|
animation: lightMoveUp 1.5s infinite linear; |
|
|
z-index: 0; |
|
|
} |
|
|
.popup-close:hover { |
|
|
background: #FF9E2C; |
|
|
transform: scale(1.1); |
|
|
} |
|
|
.popup-close span { |
|
|
position: relative; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.ingredient-modal-container { |
|
|
display: none; |
|
|
position: fixed; |
|
|
inset: 0; |
|
|
background: rgba(0, 0, 0, 0.6); |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
z-index: 10000; |
|
|
animation: fadeIn 0.2s ease-in-out; |
|
|
} |
|
|
.ingredient-modal { |
|
|
background: linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 100%); |
|
|
border-radius: 12px; |
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); |
|
|
border: 1px solid #E5E7EB; |
|
|
width: 90%; |
|
|
max-width: 500px; |
|
|
max-height: 90vh; |
|
|
overflow-y: auto; |
|
|
position: relative; |
|
|
contain: layout; |
|
|
} |
|
|
.modal-section { |
|
|
padding: 16px; |
|
|
border-left: 4px solid #2DD4BF; |
|
|
margin-bottom: 16px; |
|
|
background: #F9FAFB; |
|
|
border-radius: 6px; |
|
|
} |
|
|
|
|
|
.ingredients-section:not(.hidden) .ingredient-image { |
|
|
border: 2px solid #10B981; |
|
|
border-radius: 6px; |
|
|
} |
|
|
|
|
|
body.modal-open { |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.no-data { |
|
|
text-align: center; |
|
|
color: #6B7280; |
|
|
font-size: 1.125rem; |
|
|
padding: 20px; |
|
|
background: #F9FAFB; |
|
|
border-radius: 8px; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
@media (max-width: 640px) { |
|
|
.back-to-menu { |
|
|
padding: 12px 16px; |
|
|
font-size: 1rem; |
|
|
} |
|
|
.container { |
|
|
margin-top: 70px; |
|
|
} |
|
|
.history { |
|
|
font-size: 1.5rem; |
|
|
padding: 1rem; |
|
|
} |
|
|
.custom-class { |
|
|
padding: 16px !important; |
|
|
} |
|
|
.sector-image { |
|
|
max-width: 120px; |
|
|
height: 80px; |
|
|
} |
|
|
#popup-content { |
|
|
width: 95%; |
|
|
padding: 16px; |
|
|
max-height: 80vh; |
|
|
} |
|
|
.ingredient-modal { |
|
|
width: 95%; |
|
|
max-height: 80vh; |
|
|
} |
|
|
.popup-close { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
font-size: 24px; |
|
|
} |
|
|
.popup-close::before { |
|
|
animation: lightMoveUp 1.2s infinite linear; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
<a href="{{ url_for('menu.menu') }}" class="back-to-menu" aria-label="Go back to menu"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mr-2" 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> |
|
|
Back to Menu |
|
|
</a> |
|
|
|
|
|
<div class="container mx-auto p-6 pt-2"> |
|
|
|
|
|
<div class="section bg-white shadow-sm rounded-xl p-6 mb-6"> |
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="section bg-white rounded-xl shadow-lg p-6 mb-6"> |
|
|
<div class="flex items-center justify-between mb-4 cursor-pointer" onclick="toggleTierDetails()" aria-expanded="false" aria-controls="tierDetails"> |
|
|
<div id="tierBadge" class="w-8 h-8 p-1 rounded-full flex items-center justify-center tier-badge"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-white"> |
|
|
<path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"></path> |
|
|
<path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"></path> |
|
|
<path d="M4 22h16"></path> |
|
|
<path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"></path> |
|
|
<path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"></path> |
|
|
<path d="M9 9c0 .97.64 1.79 1.5 2.05A2 2 0 0 1 12 13c.82 0 1.54-.39 2-1"></path> |
|
|
<path d="M18 9H6a4 4 0 0 1 0-8h12a4 4 0 0 1 0 8Z"></path> |
|
|
</svg> |
|
|
</div> |
|
|
<span class="ml-2 text-xl font-bold text-orange-500" id="currentTier">{{ current_tier }} Tier</span> |
|
|
<svg id="arrowIcon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-gray-600"> |
|
|
<path id="arrowPath" d="M19 9l-7 7-7-7"></path> |
|
|
</svg> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="tierDetails" class="tier-details hidden"> |
|
|
<div class="text-center mb-6"> |
|
|
<p class="text-gray-600">Valid through December {{ validity_year }}</p> |
|
|
<p class="text-lg font-semibold mt-2 text-yellow-600" id="pointsDisplay">{{ user_points }} points</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
<div class="flex justify-between text-sm text-gray-600 mb-4"> |
|
|
<span id="startPoint">{{ start_point }}</span> |
|
|
<span id="endPoint">{{ end_point }}</span> |
|
|
</div> |
|
|
|
|
|
<p class="text-center text-gray-700"> |
|
|
You need <span class="font-semibold text-gray-800" id="pointsNeeded">{{ points_needed_for_next_tier }}</span> more |
|
|
points to reach |
|
|
<span class="font-semibold text-orange-500" id="nextTier">{{ next_tier }}</span> |
|
|
</p> |
|
|
|
|
|
|
|
|
<div class="mt-6 bg-gray-50 rounded-xl p-4"> |
|
|
<h3 class="text-lg font-semibold mb-4 text-gray-800" id="benefitsTitle"> |
|
|
Benefits of Reaching {{ next_tier }} Tier |
|
|
</h3> |
|
|
<ul class="space-y-3" id="benefitsList"> |
|
|
{% if next_tier == "Silver" %} |
|
|
<li class="flex items-center"> |
|
|
<span class="text-2xl mr-3">🏷️</span> |
|
|
<span class="text-gray-700">10% discount on next purchase</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<span class="text-2xl mr-3">🍹</span> |
|
|
<span class="text-gray-700">Free soft drink with your next order</span> |
|
|
</li> |
|
|
{% elif next_tier == "Gold" %} |
|
|
<li class="flex items-center"> |
|
|
<span class="text-2xl mr-3">🏷️</span> |
|
|
<span class="text-gray-700">15% discount on next purchase</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<span class="text-2xl mr-3">🍰</span> |
|
|
<span class="text-gray-700">Free dessert on next order</span> |
|
|
</li> |
|
|
{% elif next_tier == "Platinum" %} |
|
|
<li class="flex items-center"> |
|
|
<span class="text-2xl mr-3">🏷️</span> |
|
|
<span class="text-gray-700">20% discount on next purchase</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<span class="text-2xl mr-3">🍴</span> |
|
|
<span class="text-gray-700">Free entrée with your next order</span> |
|
|
</li> |
|
|
{% else %} |
|
|
<li class="text-gray-700">You've reached the highest tier! Enjoy exclusive benefits.</li> |
|
|
{% endif %} |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="history"> |
|
|
<h1 class="text-center text-2xl font-bold text-orange-500">Ingredient History</h1> |
|
|
</div> |
|
|
{% if sector_details %} |
|
|
<div class="sector-images-container"> |
|
|
{% 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> |
|
|
</div> |
|
|
{% endfor %} |
|
|
</div> |
|
|
{% else %} |
|
|
<div class="no-data">No sector details available.</div> |
|
|
{% endif %} |
|
|
|
|
|
|
|
|
<div id="sector-popup" class="popup" style="display:none;" role="dialog" aria-modal="true" aria-labelledby="sector-popup-title"> |
|
|
<div id="popup-content"> |
|
|
<div class="popup-header flex justify-between items-center"> |
|
|
<h3 id="sector-popup-title" class="text-xl font-semibold text-gray-800">Origin History</h3> |
|
|
<button onclick="closePopup()" class="popup-close" aria-label="Close sector description popup"><span>×</span></button> |
|
|
</div> |
|
|
<p id="sector-description" class="text-gray-700 leading-relaxed"></p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="text-center text-2xl font-bold text-orange-500 mb-6">Previous Orders</div> |
|
|
{% 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> |
|
|
|
|
|
{% 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 }}"> |
|
|
Show Ingredients |
|
|
</button> |
|
|
|
|
|
<div id="ingredientsSection{{ loop.index }}" class="ingredients-section hidden mt-4"> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
{% 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 }}" |
|
|
> |
|
|
<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" |
|
|
loading="lazy" |
|
|
/> |
|
|
</div> |
|
|
<p class="mt-2 text-center text-sm font-medium text-gray-800">{{ ingredient.name | escape }}</p> |
|
|
</button> |
|
|
{% endfor %} |
|
|
</div> |
|
|
</div> |
|
|
{% endif %} |
|
|
</div> |
|
|
|
|
|
|
|
|
<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"> |
|
|
<div class="popup-header flex justify-between items-center mb-4"> |
|
|
<h3 id="modalTitle{{ loop.index }}" class="text-xl font-semibold text-gray-800"></h3> |
|
|
<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" /> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="modal-section"> |
|
|
<h4 class="font-semibold mb-2 text-gray-800 flex items-center"> |
|
|
<svg class="w-5 h-5 mr-2 text-teal-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path> |
|
|
</svg> |
|
|
Health Benefits |
|
|
</h4> |
|
|
<ul id="healthBenefits{{ loop.index }}" class="list-disc list-inside text-gray-700"></ul> |
|
|
</div> |
|
|
|
|
|
<div class="modal-section"> |
|
|
<h4 class="font-semibold mb-2 text-gray-800 flex items-center"> |
|
|
<svg class="w-5 h-5 mr-2 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path> |
|
|
</svg> |
|
|
Fun Facts |
|
|
</h4> |
|
|
<ul id="funFacts{{ loop.index }}" class="list-disc list-inside text-gray-700"></ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
{% endfor %} |
|
|
{% else %} |
|
|
<div class="no-data">No previous orders found.</div> |
|
|
{% endif %} |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
function debounce(func, wait) { |
|
|
let timeout; |
|
|
return function executedFunction(...args) { |
|
|
const later = () => { |
|
|
clearTimeout(timeout); |
|
|
func(...args); |
|
|
}; |
|
|
clearTimeout(timeout); |
|
|
timeout = setTimeout(later, wait); |
|
|
}; |
|
|
} |
|
|
|
|
|
|
|
|
function showSectorDescription(description) { |
|
|
try { |
|
|
document.getElementById('sector-description').innerText = description || 'No description available.'; |
|
|
document.getElementById('sector-popup').style.display = 'flex'; |
|
|
document.body.classList.add('modal-open'); |
|
|
} catch (e) { |
|
|
console.error('Error showing sector description:', e); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function closePopup() { |
|
|
document.getElementById('sector-popup').style.display = 'none'; |
|
|
document.body.classList.remove('modal-open'); |
|
|
} |
|
|
|
|
|
|
|
|
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); |
|
|
} |
|
|
|
|
|
|
|
|
function toggleIngredients(index) { |
|
|
try { |
|
|
const currentSection = document.getElementById('ingredientsSection' + index); |
|
|
const currentButton = document.getElementById('ingredientsToggleButton' + index); |
|
|
const isCurrentlyVisible = !currentSection.classList.contains('hidden'); |
|
|
|
|
|
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 (!isCurrentlyVisible) { |
|
|
currentSection.classList.remove('hidden'); |
|
|
currentButton.textContent = 'Hide Ingredients'; |
|
|
currentButton.setAttribute('aria-expanded', 'true'); |
|
|
} |
|
|
} catch (e) { |
|
|
console.error('Error toggling ingredients:', e); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function showIngredientDetails(index, name, image, healthBenefits, funFacts) { |
|
|
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"; |
|
|
document.body.classList.add('modal-open'); |
|
|
} catch (e) { |
|
|
console.error('Error showing ingredient details:', e); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function closeModal(index) { |
|
|
try { |
|
|
document.getElementById("ingredientModal" + index).style.display = "none"; |
|
|
document.body.classList.remove('modal-open'); |
|
|
} catch (e) { |
|
|
console.error('Error closing modal:', e); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
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); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
