Spaces:
Runtime error
Runtime error
Create combined_summary.html
Browse files- templates/combined_summary.html +127 -87
templates/combined_summary.html
CHANGED
|
@@ -1,6 +1,5 @@
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
<html lang="en">
|
| 3 |
-
|
| 4 |
<head>
|
| 5 |
<meta charset="UTF-8">
|
| 6 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
@@ -36,7 +35,7 @@
|
|
| 36 |
.tier-badge {
|
| 37 |
position: relative;
|
| 38 |
overflow: hidden;
|
| 39 |
-
background-color: #
|
| 40 |
}
|
| 41 |
.tier-badge::after {
|
| 42 |
content: '';
|
|
@@ -88,7 +87,7 @@
|
|
| 88 |
max-width: 100px;
|
| 89 |
color: #1F2937;
|
| 90 |
}
|
| 91 |
-
/* Full-width
|
| 92 |
.back-to-menu {
|
| 93 |
position: fixed;
|
| 94 |
top: 0;
|
|
@@ -97,7 +96,7 @@
|
|
| 97 |
display: flex;
|
| 98 |
align-items: center;
|
| 99 |
padding: 14px 24px;
|
| 100 |
-
background
|
| 101 |
color: #FFFFFF;
|
| 102 |
font-size: 1.125rem;
|
| 103 |
font-weight: 600;
|
|
@@ -107,7 +106,7 @@
|
|
| 107 |
transition: background-color 0.3s ease, transform 0.2s ease;
|
| 108 |
}
|
| 109 |
.back-to-menu:hover {
|
| 110 |
-
background
|
| 111 |
transform: translateY(-1px);
|
| 112 |
}
|
| 113 |
/* Content spacing */
|
|
@@ -120,7 +119,6 @@
|
|
| 120 |
position: fixed;
|
| 121 |
inset: 0;
|
| 122 |
background: rgba(17, 24, 39, 0.6);
|
| 123 |
-
display: flex;
|
| 124 |
justify-content: center;
|
| 125 |
align-items: center;
|
| 126 |
z-index: 10000;
|
|
@@ -143,21 +141,21 @@
|
|
| 143 |
position: relative;
|
| 144 |
padding-bottom: 12px;
|
| 145 |
margin-bottom: 16px;
|
| 146 |
-
border-bottom: 2px solid #
|
| 147 |
display: flex;
|
| 148 |
justify-content: space-between;
|
| 149 |
align-items: center;
|
| 150 |
}
|
| 151 |
.popup-close {
|
| 152 |
-
background: #
|
| 153 |
color: #FFFFFF;
|
| 154 |
border-radius: 50%;
|
| 155 |
-
width:
|
| 156 |
-
height:
|
| 157 |
display: flex;
|
| 158 |
align-items: center;
|
| 159 |
justify-content: center;
|
| 160 |
-
font-size:
|
| 161 |
font-weight: bold;
|
| 162 |
border: none;
|
| 163 |
cursor: pointer;
|
|
@@ -180,7 +178,7 @@
|
|
| 180 |
z-index: 0;
|
| 181 |
}
|
| 182 |
.popup-close:hover {
|
| 183 |
-
background: #
|
| 184 |
transform: scale(1.1);
|
| 185 |
}
|
| 186 |
.popup-close span {
|
|
@@ -193,7 +191,6 @@
|
|
| 193 |
position: fixed;
|
| 194 |
inset: 0;
|
| 195 |
background: rgba(0, 0, 0, 0.6);
|
| 196 |
-
display: flex;
|
| 197 |
justify-content: center;
|
| 198 |
align-items: center;
|
| 199 |
z-index: 10000;
|
|
@@ -227,6 +224,16 @@
|
|
| 227 |
body.modal-open {
|
| 228 |
overflow: hidden;
|
| 229 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 230 |
/* Responsive adjustments */
|
| 231 |
@media (max-width: 640px) {
|
| 232 |
.back-to-menu {
|
|
@@ -257,9 +264,9 @@
|
|
| 257 |
max-height: 80vh;
|
| 258 |
}
|
| 259 |
.popup-close {
|
| 260 |
-
width: 40px;
|
| 261 |
height: 40px;
|
| 262 |
-
font-size: 24px;
|
| 263 |
}
|
| 264 |
.popup-close::before {
|
| 265 |
animation: lightMoveUp 1.2s infinite linear;
|
|
@@ -267,9 +274,8 @@
|
|
| 267 |
}
|
| 268 |
</style>
|
| 269 |
</head>
|
| 270 |
-
|
| 271 |
<body class="bg-gray-50">
|
| 272 |
-
<a href="
|
| 273 |
<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">
|
| 274 |
<path d="M15 18l-6-6 6-6"></path>
|
| 275 |
</svg>
|
|
@@ -280,16 +286,14 @@
|
|
| 280 |
<!-- Order Confirmation -->
|
| 281 |
<div class="section bg-white shadow-sm rounded-xl p-6 mb-6">
|
| 282 |
<h1 class="text-center text-2xl font-bold text-orange-500">Order Confirmed!</h1>
|
| 283 |
-
<p class="text-center text-gray-600 mt-2">Estimated delivery time:
|
| 284 |
</div>
|
| 285 |
|
| 286 |
<!-- Reward Status Section -->
|
| 287 |
<div class="section bg-white rounded-xl shadow-lg p-6 mb-6">
|
| 288 |
-
<div class="flex items-center justify-between mb-4 cursor-pointer" onclick="toggleTierDetails()">
|
| 289 |
<div id="tierBadge" class="w-8 h-8 p-1 rounded-full flex items-center justify-center tier-badge">
|
| 290 |
-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
| 291 |
-
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
| 292 |
-
class="text-white">
|
| 293 |
<path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"></path>
|
| 294 |
<path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"></path>
|
| 295 |
<path d="M4 22h16"></path>
|
|
@@ -300,9 +304,7 @@
|
|
| 300 |
</svg>
|
| 301 |
</div>
|
| 302 |
<span class="ml-2 text-xl font-bold text-orange-500" id="currentTier">{{ current_tier }} Tier</span>
|
| 303 |
-
<svg id="arrowIcon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
| 304 |
-
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
| 305 |
-
class="text-gray-600">
|
| 306 |
<path id="arrowPath" d="M19 9l-7 7-7-7"></path>
|
| 307 |
</svg>
|
| 308 |
</div>
|
|
@@ -310,14 +312,13 @@
|
|
| 310 |
<!-- Collapsible Content Section -->
|
| 311 |
<div id="tierDetails" class="tier-details hidden">
|
| 312 |
<div class="text-center mb-6">
|
| 313 |
-
<p class="text-gray-600">Valid through December
|
| 314 |
<p class="text-lg font-semibold mt-2 text-yellow-600" id="pointsDisplay">{{ user_points }} points</p>
|
| 315 |
</div>
|
| 316 |
|
| 317 |
<!-- Progress Bar -->
|
| 318 |
<div class="relative h-4 bg-gray-200 rounded-full overflow-hidden mb-4">
|
| 319 |
-
<div id="progressBar" class="absolute left-0 top-0 h-full progress-bar bg-teal-400"
|
| 320 |
-
style="width: {{ progress_percentage }}%"></div>
|
| 321 |
</div>
|
| 322 |
|
| 323 |
<div class="flex justify-between text-sm text-gray-600 mb-4">
|
|
@@ -364,31 +365,37 @@
|
|
| 364 |
<span class="text-2xl mr-3">🍴</span>
|
| 365 |
<span class="text-gray-700">Free entrée with your next order</span>
|
| 366 |
</li>
|
|
|
|
|
|
|
| 367 |
{% endif %}
|
| 368 |
</ul>
|
| 369 |
</div>
|
| 370 |
</div>
|
| 371 |
</div>
|
|
|
|
| 372 |
<!-- Ingredient History -->
|
| 373 |
<div class="history">
|
| 374 |
<h1 class="text-center text-2xl font-bold text-orange-500">Ingredient History</h1>
|
| 375 |
</div>
|
|
|
|
| 376 |
<div class="sector-images-container">
|
| 377 |
{% for sector_name, sector in sector_details.items() %}
|
| 378 |
<div class="sector-item">
|
| 379 |
-
<img src="{{ sector.image_url }}" alt="{{ sector_name }}" class="sector-image lazyload" loading="lazy"
|
| 380 |
-
onclick="showSectorDescription('{{ sector.description }}')">
|
| 381 |
<h3 class="sector-name">{{ sector_name }}</h3>
|
| 382 |
</div>
|
| 383 |
{% endfor %}
|
| 384 |
</div>
|
|
|
|
|
|
|
|
|
|
| 385 |
|
| 386 |
<!-- Popup for Sector Description -->
|
| 387 |
-
<div id="sector-popup" class="popup" style="display:none;" role="dialog" aria-modal="true">
|
| 388 |
<div id="popup-content">
|
| 389 |
<div class="popup-header flex justify-between items-center">
|
| 390 |
-
<h3 class="text-xl font-semibold text-gray-800">Origin History</h3>
|
| 391 |
-
<button onclick="closePopup()" class="popup-close"><span>×</span></button>
|
| 392 |
</div>
|
| 393 |
<p id="sector-description" class="text-gray-700 leading-relaxed"></p>
|
| 394 |
</div>
|
|
@@ -396,14 +403,15 @@
|
|
| 396 |
|
| 397 |
<!-- Order Items Section -->
|
| 398 |
<div class="text-center text-2xl font-bold text-orange-500 mb-6">Previous Orders</div>
|
|
|
|
| 399 |
{% for item in order_items %}
|
| 400 |
<div class="custom-class">
|
| 401 |
-
<img src="{{ item.image_url }}" alt="{{ item.name }}" class="w-full h-48 object-cover rounded-xl mb-4 lazyload" loading="lazy" />
|
| 402 |
-
<h3 class="text-lg font-semibold text-gray-800">{{ item.name }}</h3>
|
| 403 |
-
<p class="text-gray-600 mb-2">${{ "%.2f"|format(item.price) }}</p>
|
| 404 |
|
| 405 |
{% if item.ingredients %}
|
| 406 |
-
<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 }})">
|
| 407 |
Show Ingredients
|
| 408 |
</button>
|
| 409 |
|
|
@@ -412,23 +420,24 @@
|
|
| 412 |
{% for ingredient in item.ingredients %}
|
| 413 |
<button
|
| 414 |
onclick="showIngredientDetails(
|
| 415 |
-
|
| 416 |
-
|
| 417 |
-
|
| 418 |
-
|
| 419 |
-
|
| 420 |
-
|
| 421 |
class="relative group ingredient-button"
|
|
|
|
| 422 |
>
|
| 423 |
<div class="overflow-hidden rounded-lg">
|
| 424 |
<img
|
| 425 |
-
src="{{ ingredient.image }}"
|
| 426 |
-
alt="{{ ingredient.name }}"
|
| 427 |
class="w-full h-32 object-cover ingredient-image lazyload"
|
| 428 |
loading="lazy"
|
| 429 |
/>
|
| 430 |
</div>
|
| 431 |
-
<p class="mt-2 text-center text-sm font-medium text-gray-800">{{ ingredient.name }}</p>
|
| 432 |
</button>
|
| 433 |
{% endfor %}
|
| 434 |
</div>
|
|
@@ -437,12 +446,12 @@
|
|
| 437 |
</div>
|
| 438 |
|
| 439 |
<!-- Modal for Ingredients -->
|
| 440 |
-
<div id="ingredientModal{{ loop.index }}" class="ingredient-modal-container hidden modal" role="dialog" aria-modal="true">
|
| 441 |
<div class="ingredient-modal">
|
| 442 |
<div class="p-6">
|
| 443 |
<div class="popup-header flex justify-between items-center mb-4">
|
| 444 |
<h3 id="modalTitle{{ loop.index }}" class="text-xl font-semibold text-gray-800"></h3>
|
| 445 |
-
<button onclick="closeModal({{ loop.index }})" class="popup-close"><span>×</span></button>
|
| 446 |
</div>
|
| 447 |
|
| 448 |
<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" />
|
|
@@ -472,9 +481,13 @@
|
|
| 472 |
</div>
|
| 473 |
</div>
|
| 474 |
{% endfor %}
|
|
|
|
|
|
|
|
|
|
| 475 |
</div>
|
| 476 |
|
| 477 |
<script>
|
|
|
|
| 478 |
function debounce(func, wait) {
|
| 479 |
let timeout;
|
| 480 |
return function executedFunction(...args) {
|
|
@@ -487,74 +500,102 @@
|
|
| 487 |
};
|
| 488 |
}
|
| 489 |
|
|
|
|
| 490 |
function showSectorDescription(description) {
|
| 491 |
-
|
| 492 |
-
|
| 493 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
| 494 |
}
|
| 495 |
-
|
|
|
|
| 496 |
function closePopup() {
|
| 497 |
document.getElementById('sector-popup').style.display = 'none';
|
| 498 |
document.body.classList.remove('modal-open');
|
| 499 |
}
|
| 500 |
|
|
|
|
| 501 |
function toggleTierDetails() {
|
| 502 |
const tierDetails = document.getElementById('tierDetails');
|
| 503 |
const arrowPath = document.getElementById('arrowPath');
|
|
|
|
|
|
|
| 504 |
tierDetails.classList.toggle('hidden');
|
| 505 |
arrowPath.setAttribute('d', tierDetails.classList.contains('hidden') ? 'M19 9l-7 7-7-7' : 'M19 15l-7-7-7 7');
|
|
|
|
| 506 |
}
|
| 507 |
|
| 508 |
-
|
| 509 |
-
|
| 510 |
function toggleIngredients(index) {
|
| 511 |
-
|
| 512 |
-
|
| 513 |
-
|
|
|
|
| 514 |
|
| 515 |
-
|
| 516 |
-
|
|
|
|
|
|
|
|
|
|
| 517 |
|
| 518 |
-
|
| 519 |
-
|
| 520 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
| 521 |
}
|
| 522 |
}
|
| 523 |
|
|
|
|
| 524 |
function showIngredientDetails(index, name, image, healthBenefits, funFacts) {
|
| 525 |
-
|
| 526 |
-
|
| 527 |
-
|
| 528 |
-
|
| 529 |
-
|
| 530 |
-
|
| 531 |
-
|
| 532 |
-
|
| 533 |
-
|
| 534 |
-
|
| 535 |
-
|
| 536 |
-
|
| 537 |
-
|
| 538 |
-
|
| 539 |
-
|
| 540 |
-
|
| 541 |
-
|
| 542 |
-
|
| 543 |
-
|
| 544 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
| 545 |
}
|
| 546 |
|
|
|
|
| 547 |
function closeModal(index) {
|
| 548 |
-
|
| 549 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
| 550 |
}
|
| 551 |
|
|
|
|
| 552 |
document.addEventListener('click', function(e) {
|
| 553 |
-
if (e.target.
|
| 554 |
closePopup();
|
| 555 |
}
|
| 556 |
document.querySelectorAll('.ingredient-modal-container').forEach(modal => {
|
| 557 |
-
if (e.target
|
| 558 |
const index = modal.id.replace('ingredientModal', '');
|
| 559 |
closeModal(index);
|
| 560 |
}
|
|
@@ -562,5 +603,4 @@
|
|
| 562 |
});
|
| 563 |
</script>
|
| 564 |
</body>
|
| 565 |
-
|
| 566 |
</html>
|
|
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
<html lang="en">
|
|
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
| 35 |
.tier-badge {
|
| 36 |
position: relative;
|
| 37 |
overflow: hidden;
|
| 38 |
+
background-color: #FFB347;
|
| 39 |
}
|
| 40 |
.tier-badge::after {
|
| 41 |
content: '';
|
|
|
|
| 87 |
max-width: 100px;
|
| 88 |
color: #1F2937;
|
| 89 |
}
|
| 90 |
+
/* Full-width gradient header */
|
| 91 |
.back-to-menu {
|
| 92 |
position: fixed;
|
| 93 |
top: 0;
|
|
|
|
| 96 |
display: flex;
|
| 97 |
align-items: center;
|
| 98 |
padding: 14px 24px;
|
| 99 |
+
background: linear-gradient(45deg, #FFA07A, #FFB347);
|
| 100 |
color: #FFFFFF;
|
| 101 |
font-size: 1.125rem;
|
| 102 |
font-weight: 600;
|
|
|
|
| 106 |
transition: background-color 0.3s ease, transform 0.2s ease;
|
| 107 |
}
|
| 108 |
.back-to-menu:hover {
|
| 109 |
+
background: linear-gradient(45deg, #FF8C61, #FF9E2C);
|
| 110 |
transform: translateY(-1px);
|
| 111 |
}
|
| 112 |
/* Content spacing */
|
|
|
|
| 119 |
position: fixed;
|
| 120 |
inset: 0;
|
| 121 |
background: rgba(17, 24, 39, 0.6);
|
|
|
|
| 122 |
justify-content: center;
|
| 123 |
align-items: center;
|
| 124 |
z-index: 10000;
|
|
|
|
| 141 |
position: relative;
|
| 142 |
padding-bottom: 12px;
|
| 143 |
margin-bottom: 16px;
|
| 144 |
+
border-bottom: 2px solid #FFB347;
|
| 145 |
display: flex;
|
| 146 |
justify-content: space-between;
|
| 147 |
align-items: center;
|
| 148 |
}
|
| 149 |
.popup-close {
|
| 150 |
+
background: #FFB347;
|
| 151 |
color: #FFFFFF;
|
| 152 |
border-radius: 50%;
|
| 153 |
+
width: 40px;
|
| 154 |
+
height: 40px;
|
| 155 |
display: flex;
|
| 156 |
align-items: center;
|
| 157 |
justify-content: center;
|
| 158 |
+
font-size: 24px;
|
| 159 |
font-weight: bold;
|
| 160 |
border: none;
|
| 161 |
cursor: pointer;
|
|
|
|
| 178 |
z-index: 0;
|
| 179 |
}
|
| 180 |
.popup-close:hover {
|
| 181 |
+
background: #FF9E2C;
|
| 182 |
transform: scale(1.1);
|
| 183 |
}
|
| 184 |
.popup-close span {
|
|
|
|
| 191 |
position: fixed;
|
| 192 |
inset: 0;
|
| 193 |
background: rgba(0, 0, 0, 0.6);
|
|
|
|
| 194 |
justify-content: center;
|
| 195 |
align-items: center;
|
| 196 |
z-index: 10000;
|
|
|
|
| 224 |
body.modal-open {
|
| 225 |
overflow: hidden;
|
| 226 |
}
|
| 227 |
+
/* Fallback messages */
|
| 228 |
+
.no-data {
|
| 229 |
+
text-align: center;
|
| 230 |
+
color: #6B7280;
|
| 231 |
+
font-size: 1.125rem;
|
| 232 |
+
padding: 20px;
|
| 233 |
+
background: #F9FAFB;
|
| 234 |
+
border-radius: 8px;
|
| 235 |
+
margin-bottom: 20px;
|
| 236 |
+
}
|
| 237 |
/* Responsive adjustments */
|
| 238 |
@media (max-width: 640px) {
|
| 239 |
.back-to-menu {
|
|
|
|
| 264 |
max-height: 80vh;
|
| 265 |
}
|
| 266 |
.popup-close {
|
| 267 |
+
width: 40px;
|
| 268 |
height: 40px;
|
| 269 |
+
font-size: 24px;
|
| 270 |
}
|
| 271 |
.popup-close::before {
|
| 272 |
animation: lightMoveUp 1.2s infinite linear;
|
|
|
|
| 274 |
}
|
| 275 |
</style>
|
| 276 |
</head>
|
|
|
|
| 277 |
<body class="bg-gray-50">
|
| 278 |
+
<a href="{{ url_for('menu.menu') }}" class="back-to-menu" aria-label="Go back to menu">
|
| 279 |
<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">
|
| 280 |
<path d="M15 18l-6-6 6-6"></path>
|
| 281 |
</svg>
|
|
|
|
| 286 |
<!-- Order Confirmation -->
|
| 287 |
<div class="section bg-white shadow-sm rounded-xl p-6 mb-6">
|
| 288 |
<h1 class="text-center text-2xl font-bold text-orange-500">Order Confirmed!</h1>
|
| 289 |
+
<p class="text-center text-gray-600 mt-2">Estimated delivery time: {{ delivery_time }} minutes</p>
|
| 290 |
</div>
|
| 291 |
|
| 292 |
<!-- Reward Status Section -->
|
| 293 |
<div class="section bg-white rounded-xl shadow-lg p-6 mb-6">
|
| 294 |
+
<div class="flex items-center justify-between mb-4 cursor-pointer" onclick="toggleTierDetails()" aria-expanded="false" aria-controls="tierDetails">
|
| 295 |
<div id="tierBadge" class="w-8 h-8 p-1 rounded-full flex items-center justify-center tier-badge">
|
| 296 |
+
<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">
|
|
|
|
|
|
|
| 297 |
<path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"></path>
|
| 298 |
<path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"></path>
|
| 299 |
<path d="M4 22h16"></path>
|
|
|
|
| 304 |
</svg>
|
| 305 |
</div>
|
| 306 |
<span class="ml-2 text-xl font-bold text-orange-500" id="currentTier">{{ current_tier }} Tier</span>
|
| 307 |
+
<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">
|
|
|
|
|
|
|
| 308 |
<path id="arrowPath" d="M19 9l-7 7-7-7"></path>
|
| 309 |
</svg>
|
| 310 |
</div>
|
|
|
|
| 312 |
<!-- Collapsible Content Section -->
|
| 313 |
<div id="tierDetails" class="tier-details hidden">
|
| 314 |
<div class="text-center mb-6">
|
| 315 |
+
<p class="text-gray-600">Valid through December {{ validity_year }}</p>
|
| 316 |
<p class="text-lg font-semibold mt-2 text-yellow-600" id="pointsDisplay">{{ user_points }} points</p>
|
| 317 |
</div>
|
| 318 |
|
| 319 |
<!-- Progress Bar -->
|
| 320 |
<div class="relative h-4 bg-gray-200 rounded-full overflow-hidden mb-4">
|
| 321 |
+
<div id="progressBar" class="absolute left-0 top-0 h-full progress-bar bg-teal-400" style="width: {{ progress_percentage }}%"></div>
|
|
|
|
| 322 |
</div>
|
| 323 |
|
| 324 |
<div class="flex justify-between text-sm text-gray-600 mb-4">
|
|
|
|
| 365 |
<span class="text-2xl mr-3">🍴</span>
|
| 366 |
<span class="text-gray-700">Free entrée with your next order</span>
|
| 367 |
</li>
|
| 368 |
+
{% else %}
|
| 369 |
+
<li class="text-gray-700">You've reached the highest tier! Enjoy exclusive benefits.</li>
|
| 370 |
{% endif %}
|
| 371 |
</ul>
|
| 372 |
</div>
|
| 373 |
</div>
|
| 374 |
</div>
|
| 375 |
+
|
| 376 |
<!-- Ingredient History -->
|
| 377 |
<div class="history">
|
| 378 |
<h1 class="text-center text-2xl font-bold text-orange-500">Ingredient History</h1>
|
| 379 |
</div>
|
| 380 |
+
{% if sector_details %}
|
| 381 |
<div class="sector-images-container">
|
| 382 |
{% for sector_name, sector in sector_details.items() %}
|
| 383 |
<div class="sector-item">
|
| 384 |
+
<img src="{{ sector.image_url | default('/static/placeholder.jpg') }}" alt="{{ sector_name }}" class="sector-image lazyload" loading="lazy" onclick="showSectorDescription('{{ sector.description | escape }}')">
|
|
|
|
| 385 |
<h3 class="sector-name">{{ sector_name }}</h3>
|
| 386 |
</div>
|
| 387 |
{% endfor %}
|
| 388 |
</div>
|
| 389 |
+
{% else %}
|
| 390 |
+
<div class="no-data">No sector details available.</div>
|
| 391 |
+
{% endif %}
|
| 392 |
|
| 393 |
<!-- Popup for Sector Description -->
|
| 394 |
+
<div id="sector-popup" class="popup" style="display:none;" role="dialog" aria-modal="true" aria-labelledby="sector-popup-title">
|
| 395 |
<div id="popup-content">
|
| 396 |
<div class="popup-header flex justify-between items-center">
|
| 397 |
+
<h3 id="sector-popup-title" class="text-xl font-semibold text-gray-800">Origin History</h3>
|
| 398 |
+
<button onclick="closePopup()" class="popup-close" aria-label="Close sector description popup"><span>×</span></button>
|
| 399 |
</div>
|
| 400 |
<p id="sector-description" class="text-gray-700 leading-relaxed"></p>
|
| 401 |
</div>
|
|
|
|
| 403 |
|
| 404 |
<!-- Order Items Section -->
|
| 405 |
<div class="text-center text-2xl font-bold text-orange-500 mb-6">Previous Orders</div>
|
| 406 |
+
{% if order_items %}
|
| 407 |
{% for item in order_items %}
|
| 408 |
<div class="custom-class">
|
| 409 |
+
<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" />
|
| 410 |
+
<h3 class="text-lg font-semibold text-gray-800">{{ item.name | escape }}</h3>
|
| 411 |
+
<p class="text-gray-600 mb-2">${{ "%.2f"|format(item.price | default(0)) }}</p>
|
| 412 |
|
| 413 |
{% if item.ingredients %}
|
| 414 |
+
<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 }}">
|
| 415 |
Show Ingredients
|
| 416 |
</button>
|
| 417 |
|
|
|
|
| 420 |
{% for ingredient in item.ingredients %}
|
| 421 |
<button
|
| 422 |
onclick="showIngredientDetails(
|
| 423 |
+
'{{ loop.index }}',
|
| 424 |
+
'{{ ingredient.name | escape }}',
|
| 425 |
+
'{{ ingredient.image | default('/static/placeholder.jpg') | escape }}',
|
| 426 |
+
'{{ ingredient.health_benefits | escape }}',
|
| 427 |
+
'{{ ingredient.fun_facts | escape }}'
|
| 428 |
+
)"
|
| 429 |
class="relative group ingredient-button"
|
| 430 |
+
aria-label="View details for {{ ingredient.name }}"
|
| 431 |
>
|
| 432 |
<div class="overflow-hidden rounded-lg">
|
| 433 |
<img
|
| 434 |
+
src="{{ ingredient.image | default('/static/placeholder.jpg') }}"
|
| 435 |
+
alt="{{ ingredient.name | escape }}"
|
| 436 |
class="w-full h-32 object-cover ingredient-image lazyload"
|
| 437 |
loading="lazy"
|
| 438 |
/>
|
| 439 |
</div>
|
| 440 |
+
<p class="mt-2 text-center text-sm font-medium text-gray-800">{{ ingredient.name | escape }}</p>
|
| 441 |
</button>
|
| 442 |
{% endfor %}
|
| 443 |
</div>
|
|
|
|
| 446 |
</div>
|
| 447 |
|
| 448 |
<!-- Modal for Ingredients -->
|
| 449 |
+
<div id="ingredientModal{{ loop.index }}" class="ingredient-modal-container hidden modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle{{ loop.index }}">
|
| 450 |
<div class="ingredient-modal">
|
| 451 |
<div class="p-6">
|
| 452 |
<div class="popup-header flex justify-between items-center mb-4">
|
| 453 |
<h3 id="modalTitle{{ loop.index }}" class="text-xl font-semibold text-gray-800"></h3>
|
| 454 |
+
<button onclick="closeModal({{ loop.index }})" class="popup-close" aria-label="Close ingredient details modal"><span>×</span></button>
|
| 455 |
</div>
|
| 456 |
|
| 457 |
<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" />
|
|
|
|
| 481 |
</div>
|
| 482 |
</div>
|
| 483 |
{% endfor %}
|
| 484 |
+
{% else %}
|
| 485 |
+
<div class="no-data">No previous orders found.</div>
|
| 486 |
+
{% endif %}
|
| 487 |
</div>
|
| 488 |
|
| 489 |
<script>
|
| 490 |
+
// Debounce function for performance
|
| 491 |
function debounce(func, wait) {
|
| 492 |
let timeout;
|
| 493 |
return function executedFunction(...args) {
|
|
|
|
| 500 |
};
|
| 501 |
}
|
| 502 |
|
| 503 |
+
// Show sector description popup
|
| 504 |
function showSectorDescription(description) {
|
| 505 |
+
try {
|
| 506 |
+
document.getElementById('sector-description').innerText = description || 'No description available.';
|
| 507 |
+
document.getElementById('sector-popup').style.display = 'flex';
|
| 508 |
+
document.body.classList.add('modal-open');
|
| 509 |
+
} catch (e) {
|
| 510 |
+
console.error('Error showing sector description:', e);
|
| 511 |
+
}
|
| 512 |
}
|
| 513 |
+
|
| 514 |
+
// Close sector popup
|
| 515 |
function closePopup() {
|
| 516 |
document.getElementById('sector-popup').style.display = 'none';
|
| 517 |
document.body.classList.remove('modal-open');
|
| 518 |
}
|
| 519 |
|
| 520 |
+
// Toggle tier details
|
| 521 |
function toggleTierDetails() {
|
| 522 |
const tierDetails = document.getElementById('tierDetails');
|
| 523 |
const arrowPath = document.getElementById('arrowPath');
|
| 524 |
+
const toggleButton = tierDetails.parentElement.querySelector('[aria-controls="tierDetails"]');
|
| 525 |
+
const isExpanded = !tierDetails.classList.contains('hidden');
|
| 526 |
tierDetails.classList.toggle('hidden');
|
| 527 |
arrowPath.setAttribute('d', tierDetails.classList.contains('hidden') ? 'M19 9l-7 7-7-7' : 'M19 15l-7-7-7 7');
|
| 528 |
+
toggleButton.setAttribute('aria-expanded', !isExpanded);
|
| 529 |
}
|
| 530 |
|
| 531 |
+
// Toggle ingredients section
|
|
|
|
| 532 |
function toggleIngredients(index) {
|
| 533 |
+
try {
|
| 534 |
+
const currentSection = document.getElementById('ingredientsSection' + index);
|
| 535 |
+
const currentButton = document.getElementById('ingredientsToggleButton' + index);
|
| 536 |
+
const isCurrentlyVisible = !currentSection.classList.contains('hidden');
|
| 537 |
|
| 538 |
+
document.querySelectorAll('[id^="ingredientsSection"]').forEach(section => section.classList.add('hidden'));
|
| 539 |
+
document.querySelectorAll('[id^="ingredientsToggleButton"]').forEach(button => {
|
| 540 |
+
button.textContent = 'Show Ingredients';
|
| 541 |
+
button.setAttribute('aria-expanded', 'false');
|
| 542 |
+
});
|
| 543 |
|
| 544 |
+
if (!isCurrentlyVisible) {
|
| 545 |
+
currentSection.classList.remove('hidden');
|
| 546 |
+
currentButton.textContent = 'Hide Ingredients';
|
| 547 |
+
currentButton.setAttribute('aria-expanded', 'true');
|
| 548 |
+
}
|
| 549 |
+
} catch (e) {
|
| 550 |
+
console.error('Error toggling ingredients:', e);
|
| 551 |
}
|
| 552 |
}
|
| 553 |
|
| 554 |
+
// Show ingredient details modal
|
| 555 |
function showIngredientDetails(index, name, image, healthBenefits, funFacts) {
|
| 556 |
+
try {
|
| 557 |
+
const healthBenefitsList = (healthBenefits || '').split(',').filter(item => item.trim());
|
| 558 |
+
const funFactsList = (funFacts || '').split(',').filter(item => item.trim());
|
| 559 |
+
document.getElementById("modalTitle" + index).textContent = name || 'Unknown Ingredient';
|
| 560 |
+
document.getElementById("modalImage" + index).src = image || '/static/placeholder.jpg';
|
| 561 |
+
const healthBenefitsUl = document.getElementById("healthBenefits" + index);
|
| 562 |
+
const funFactsUl = document.getElementById("funFacts" + index);
|
| 563 |
+
healthBenefitsUl.innerHTML = '';
|
| 564 |
+
funFactsUl.innerHTML = '';
|
| 565 |
+
healthBenefitsList.length ? healthBenefitsList.forEach(item => {
|
| 566 |
+
const li = document.createElement("li");
|
| 567 |
+
li.textContent = item.trim();
|
| 568 |
+
healthBenefitsUl.appendChild(li);
|
| 569 |
+
}) : healthBenefitsUl.innerHTML = '<li>No health benefits available.</li>';
|
| 570 |
+
funFactsList.length ? funFactsList.forEach(item => {
|
| 571 |
+
const li = document.createElement("li");
|
| 572 |
+
li.textContent = item.trim();
|
| 573 |
+
funFactsUl.appendChild(li);
|
| 574 |
+
}) : funFactsUl.innerHTML = '<li>No fun facts available.</li>';
|
| 575 |
+
document.getElementById("ingredientModal" + index).style.display = "flex";
|
| 576 |
+
document.body.classList.add('modal-open');
|
| 577 |
+
} catch (e) {
|
| 578 |
+
console.error('Error showing ingredient details:', e);
|
| 579 |
+
}
|
| 580 |
}
|
| 581 |
|
| 582 |
+
// Close ingredient modal
|
| 583 |
function closeModal(index) {
|
| 584 |
+
try {
|
| 585 |
+
document.getElementById("ingredientModal" + index).style.display = "none";
|
| 586 |
+
document.body.classList.remove('modal-open');
|
| 587 |
+
} catch (e) {
|
| 588 |
+
console.error('Error closing modal:', e);
|
| 589 |
+
}
|
| 590 |
}
|
| 591 |
|
| 592 |
+
// Close modals on outside click
|
| 593 |
document.addEventListener('click', function(e) {
|
| 594 |
+
if (e.target.id === 'sector-popup') {
|
| 595 |
closePopup();
|
| 596 |
}
|
| 597 |
document.querySelectorAll('.ingredient-modal-container').forEach(modal => {
|
| 598 |
+
if (e.target === modal) {
|
| 599 |
const index = modal.id.replace('ingredientModal', '');
|
| 600 |
closeModal(index);
|
| 601 |
}
|
|
|
|
| 603 |
});
|
| 604 |
</script>
|
| 605 |
</body>
|
|
|
|
| 606 |
</html>
|