BiryaniHubflaskhema

Runtime error

App Files Files Community

lokeshloki143 commited on Apr 24

Commit

aa19fd3

verified ·

1 Parent(s): 6d180ea

Update templates/combined_summary.html

Browse files

Files changed (1) hide show

templates/combined_summary.html +1054 -247

templates/combined_summary.html CHANGED Viewed

@@ -1,266 +1,1073 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>User Profile</title>
-  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
-  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
-  <style>
-    body {
-      background-color: #FDF4E3;
-      margin: 0;
-      padding: 0;
-      position: relative;
-      min-height: 100vh;
-    }
-    /* Top orange bar */
-    .top-bar {
-      background-color: #FF6F3C;
-      width: 100%;
-      padding: 10px 15px;
-      display: flex;
-      align-items: center;
-      box-sizing: border-box;
-    }
-    .back-link {
-      display: flex;
-      align-items: center;
-      text-decoration: none;
-    }
-    .back-arrow {
-      font-size: 1.8rem;
-      color: #000; /* Dark black */
-      font-weight: bold;
-    }
-    .back-label {
-      margin-left: 10px;
-      color: white;
-      font-weight: bold;
-      font-size: 1rem;
-    }
-    h1 {
-      color: #1C1C1C;
-      font-size: 1.2rem;
-      margin: 30px 0 15px; /* Default margin for larger screens */
-      text-align: center;
-    }
-    /* For mobile view */
-    @media (max-width: 576px) {
-      h1 {
-        margin-top: 2px; /* Reduced top margin for mobile */
-      }
-    }
-    .form-control {
-      border: 1px solid #333;
-      color: #808080;
-      background-color: #F9F9F9;
-    }
-    #referralCode, #rewardPoints {
-      color: #000 !important;
-    }
-    .form-label {
-      color: #000 !important;
-      font-size: 0.8rem;
-    }
-    input.form-control[readonly], textarea.form-control[readonly] {
-      color: #808080;
-      background-color: #F9F9F9 !important;
-    }
-    input.form-control.editable, textarea.form-control.editable {
-      background-color: #FFF8E1 !important;
-      color: #000 !important;
-    }
-    .input-group {
-      position: relative;
-    }
-    .pen-icon {
-      position: absolute;
-      right: 5px;
-      top: 50%;
-      transform: translateY(-50%);
-      cursor: pointer;
-      font-size: 1.2rem;
-      color: black;
-    }
-    .pen-icon.editing {
-      color: #333;
-    }
-    .button-container {
-      display: flex;
-      flex-direction: column;
-      margin-top: 10px;
-    }
-    /* Updated label button style */
-    .orange-label {
-      background-color: #ffffff;
-      color: white;
-      padding: 8px 16px;
-      border-radius: 5px;
-      font-weight: bold;
-      text-align: center;
-      margin-top: 20px;
-      width: 100%; /* Ensure the label is full width */
-      position: absolute;
-      bottom: 0;
-    }
-    .update-btn {
-      background-color: #0FAA39; /* Green button */
-      color: white;
-      border: none;
-      border-radius: 5px;
-      padding: 5px 12px;
-      font-size: 0.8rem;
-      font-weight: bold;
-      width: 60%; /* Full width inside orange label */
-    }
-    .update-btn:hover {
-      background-color: #0f8e29;
-    }
-    @media (max-width: 576px) {
-      .container {
-        padding: 10px;
-      }
-      .update-btn {
-        width: 100%;
-      }
-      .form-label {
-        font-size: 0.75rem;
-      }
-      .form-control {
-        font-size: 0.8rem;
-      }
-    }
-  </style>
-  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-  <script>
-    function toggleEditableField(fieldId, penIcon) {
-      var input = document.getElementById(fieldId);
-      var icon = document.getElementById(penIcon);
-      if (input.hasAttribute('readonly')) {
-        input.removeAttribute('readonly');
-        input.classList.add('editable');
-        icon.classList.add('editing');
-      } else {
-        input.setAttribute('readonly', true);
-        input.classList.remove('editable');
-        icon.classList.remove('editing');
-      }
-    }
-    function updateProfile(event) {
-      event.preventDefault();
-      var formData = $('#profileForm').serialize();
-      $.ajax({
-        type: "POST",
-        url: "/update_profile",  // Update this URL with your back-end processing URL
-        data: formData,
-        success: function(response) {
-          if (response.status === "success") {
-            alert(response.message);
-            location.reload();
-          } else {
-            alert(response.message);
-          }
-        },
-        error: function() {
-          alert("An error occurred while updating the profile.");
-        }
-      });
-    }
-    function copyReferralCode() {
-      var referralInput = document.getElementById("referralCode");
-      referralInput.select();
-      referralInput.setSelectionRange(0, 99999);
-      document.execCommand("copy");
-      alert("Referral code copied: " + referralInput.value);
-    }
-  </script>
 </head>
-<body>
-  <!-- Top Orange Label Bar -->
-  <div class="top-bar">
-    <a href="/menu" class="back-link">
-      <span class="back-arrow">&#10216;</span>
-      <span class="back-label">Back to Menu</span>
-    </a>
-  </div>
-  <!-- Main Container -->
-  <div class="container mt-4">
-    <h1>User Profile</h1>
-    {% with messages = get_flashed_messages(with_categories=true) %}
-    {% if messages %}
-    <div class="alert alert-{{ messages[0][0] }}">
-      {{ messages[0][1] }}
-    </div>
-    {% endif %}
-    {% endwith %}
-    <div class="card">
-      <div class="card-body">
-        <form id="profileForm" method="POST" onsubmit="updateProfile(event)">
-          <!-- Name -->
-          <div class="mb-3">
-            <label for="customerName" class="form-label"><strong>Name:</strong></label>
-            <div class="input-group">
-              <input type="text" id="customerName" name="customerName" class="form-control" value="{{ customer['name'] }}" readonly>
-              <span id="pen-icon-customerName" class="pen-icon" onclick="toggleEditableField('customerName', 'pen-icon-customerName')">
-                <i class="fas fa-pen"></i>
-              </span>
             </div>
-          </div>
-          <!-- Email -->
-          <div class="mb-3">
-            <label for="email" class="form-label"><strong>Email:</strong></label>
-            <div class="input-group">
-              <input type="email" id="email" name="email" class="form-control" value="{{ customer['email'] }}" readonly>
-              <span id="pen-icon-email" class="pen-icon" onclick="toggleEditableField('email', 'pen-icon-email')">
-                <i class="fas fa-pen"></i>
-              </span>
             </div>
-          </div>
-          <!-- Phone -->
-          <div class="mb-3">
-            <label for="phone" class="form-label"><strong>Phone:</strong></label>
-            <div class="input-group">
-              <input type="text" id="phone" name="phone" class="form-control" value="{{ customer['phone'] }}" readonly>
-              <span id="pen-icon-phone" class="pen-icon" onclick="toggleEditableField('phone', 'pen-icon-phone')">
-                <i class="fas fa-pen"></i>
-              </span>
             </div>
-          </div>
-          <!-- Referral Code -->
-          <div class="mb-3">
-            <label for="referralCode" class="form-label"><strong>Referral Code:</strong></label>
-            <div class="input-group">
-              <input type="text" id="referralCode" name="referralCode" class="form-control" value="{{ customer['referral_code'] }}" readonly>
-              <button type="button" class="copy-btn" onclick="copyReferralCode()">📋</button>
             </div>
-          </div>
-          <!-- Reward Points -->
-          <div class="mb-3">
-            <label for="rewardPoints" class="form-label"><strong>Reward Points:</strong></label>
-            <input type="text" id="rewardPoints" name="rewardPoints" class="form-control" value="{{ customer['reward_points'] }}" readonly>
-          </div>
-        </form>
-      </div>
     </div>
-  </div>
-  <!-- Orange Label with Update Profile Button at the Bottom -->
-  <div class="orange-label">
-    <button type="submit" class="update-btn" form="profileForm">Update Profile</button>
-  </div>
 </body>
-</html>

 <!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>
+        /* Custom animations */
+        @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%); }
+        }
+        @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.3s ease-in-out;
+        }
+        .progress-bar {
+            transition: width 0.6s ease-in-out, background 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: '';
+            position: absolute;
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            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: 12px;
+            border-width: 1px;
+            border-color: #E5E7EB;
+            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;
+            justify-content: center;
+            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;
+            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;
+            max-height: 100px;
+            width: auto;
+            height: auto;
+            aspect-ratio: 3/2;
+            object-fit: contain;
+            cursor: pointer;
+            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: 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;
+            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);
+        }
+        /* Content spacing */
+        .container {
+            margin-top: 90px;
+            max-width: 100%;
+            padding: 20px;
+        }
+        /* Sector popup */
+        #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.3s 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 */
+        .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.3s 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;
+        }
+        /* 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 {
+            overflow: hidden;
+        }
+        /* Fallback messages */
+        .no-data {
+            text-align: center;
+            color: #6B7280;
+            font-size: 1.125rem;
+            padding: 20px;
+            background: #F9FAFB;
+            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;
+                font-size: 1rem;
+            }
+            .container {
+                margin-top: 70px;
+                padding: 16px;
+            }
+            .history {
+                font-size: 1.5rem;
+                padding: 1rem;
+            }
+            .sector-image {
+                max-width: 120px;
+                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%;
+                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;
+            }
+            .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>
+<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">
+        <!-- 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>
+        </div>
+        <!-- Reward Status Section -->
+        <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>
+            <!-- Collapsible Content Section -->
+            <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>
+                <!-- 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" 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>
+                <!-- 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">
+                        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>
+        <!-- Ingredient History -->
+        <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" 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 }}')"
+                    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>
+        {% endif %}
+        <!-- Popup for Sector Description -->
+        <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>
+        <!-- Order Items Section -->
+        <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">
+            <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.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" 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
+                        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="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">
+                    <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 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">
+                            <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>
+        {% endif %}
+        {% endfor %}
+        {% else %}
+        <div class="no-data">No previous orders found.</div>
+        {% endif %}
     </div>
+    <script>
+        // Debounce function for performance
+        function debounce(func, wait) {
+            let timeout;
+            return function executedFunction(...args) {
+                const later = () => {
+                    clearTimeout(timeout);
+                    func(...args);
+                };
+                clearTimeout(timeout);
+                timeout = setTimeout(later, wait);
+            };
+        }
+        // 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 {
+                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);
+            }
+        }
+        // Close sector popup
+        function closePopup() {
+            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 with animation
+        function toggleTierDetails() {
+            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 section = document.getElementById(`ingredientsSection${index}`);
+                const button = document.getElementById(`ingredientsToggleButton${index}`);
+                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');
+                });
+                // 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);
+            }
+        }
+        // Show ingredient details modal
+        function showIngredientDetails(button) {
+            try {
+                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);
+            }
+        }
+        // Close ingredient modal
+        function closeModal(index) {
+            try {
+                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', (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);
+                }
+            });
+        });
+    </script>
 </body>
+</html>