BiryaniHubflaskSalesTeam11

Sleeping

App Files Files Community

nagasurendra commited on Apr 1

Commit

cdddf78

verified ·

1 Parent(s): 23cff82

Update templates/reward_status.html

Browse files

Files changed (1) hide show

templates/reward_status.html +103 -119

templates/reward_status.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Reward Status</title>
     <style>
         body {
             font-family: Arial, sans-serif;
@@ -11,35 +11,27 @@
             margin: 0;
             padding: 0;
         }
         .container {
             width: 90%;
             margin: auto;
             padding-top: 20px;
         }
-        .order-confirmed {
             background-color: #fff;
             padding: 20px;
             border-radius: 10px;
             box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            text-align: center;
         }
-        .order-confirmed h1 {
-            font-size: 2em;
             color: #ff6f00;
         }
-        .order-confirmed .delivery-time {
-            margin-top: 10px;
-            font-size: 1.2em;
-            color: #666;
-        }
-        .reward-status {
-            margin-top: 30px;
-            background-color: #fff;
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-        }
         .badge {
             font-size: 1.2em;
             font-weight: bold;
@@ -47,110 +39,97 @@
             background-color: #fff3e0;
             padding: 8px 15px;
             border-radius: 5px;
-            margin: 10px 0;
             display: inline-block;
         }
-        .valid-through {
-            font-size: 1em;
-            color: #888;
-            margin-bottom: 20px;
         }
         .points-bar {
             width: 100%;
             height: 20px;
             background-color: #e0e0e0;
             border-radius: 10px;
             margin: 20px 0;
         }
         .progress {
             height: 100%;
             background-color: #ffd700;
             width: {{ progress_percentage }}%;
             border-radius: 10px;
         }
-        .points-info {
-            display: flex;
-            justify-content: space-between;
-            font-size: 0.9em;
-            color: #333;
-        }
-        .points {
-            font-size: 1.1em;
-            font-weight: bold;
-        }
-        .next-tier {
-            font-size: 1.1em;
-            font-weight: bold;
-        }
-        .points-bar-info {
-            display: flex;
-            justify-content: space-between;
-            font-size: 0.9em;
-            color: #333;
-        }
-         #ff6f00;
-        }
-        .reward-status2 {
             display: flex;
-            justify-content: flex-start;
             flex-wrap: wrap;
-            gap: 20px; /* Adjust spacing between items */
-            background-color: #fff;
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
         }
         .item-section {
-            width: 100%; /* Default to 100% width on small screens */
-            height: auto; /* Ensure dynamic height */
             display: flex;
             flex-direction: column;
             justify-content: space-between;
             padding: 10px;
-            flex-grow: 1; /* Allow the container to grow as needed */
         }
         @media (min-width: 768px) {
             .item-section {
-                width: 48%; /* When on larger screens, use 48% to create side-by-side layout */
             }
         }
         .item-image {
             width: 100%;
             height: 250px;
             object-fit: cover;
             border-radius: 8px;
         }
         .item-info {
             text-align: center;
         }
         .item-info h3 {
             font-size: 1.5em;
             margin-top: 10px;
         }
         .ingredient-card {
             display: flex;
-            justify-content: space-between;
-            padding-top: 10px;
             flex-wrap: wrap;
-            gap: 10px; /* Ensures ingredients are spaced out evenly */
         }
         .ingredient {
             width: 48%;
             text-align: center;
             cursor: pointer;
-            margin-top: 10px;
-            transition: transform 0.3s ease; /* Added smooth hover effect */
         }
         .ingredient:hover {
-            transform: scale(1.05); /* Makes the ingredient slightly larger when hovered */
         }
         .ingredient img {
             width: 100%;
             height: 100px;
             object-fit: cover;
             border-radius: 8px;
         }
-        /* Modal Styling */
         .modal {
             display: none;
             position: fixed;
@@ -161,103 +140,108 @@
             height: 100%;
             background-color: rgba(0, 0, 0, 0.5);
             overflow: auto;
-            padding-top: 60px; /* Allow for more content to be shown */
         }
         .modal-content {
             background-color: #fff;
             margin: 5% auto;
             padding: 20px;
             border: 1px solid #888;
-            width: 80%; /* Adjust to 80% of screen width */
             border-radius: 8px;
             position: relative;
         }
         .close {
             color: #aaa;
             font-size: 2em;
             font-weight: bold;
             position: absolute;
-            right: 20px; /* Positioned inside the modal */
-            top: 10px; /* Placed above the image */
             cursor: pointer;
         }
     </style>
 </head>
 <body>
 <div class="container">
-    <div class="order-confirmed">
         <h1>Order Confirmed!</h1>
-        <p class="delivery-time">Estimated delivery time: 35 minutes</p>
     </div>
-    <div class="reward-status">
-        <div class="badge">{{ current_tier }} Status</div>
-        <div class="valid-through">Valid through December 2024</div>
-        <div class="points-info">
-            <div class="points">You have <strong>{{ user_points }}</strong> points</div>
-        </div>
-        <div class="points-bar-info">
-            <div>{{ start_point }}</div> <!-- Start of the range -->
-            <div>{{ end_point }}</div>   <!-- End of the range -->
-        </div>
         <div class="points-bar">
             <div class="progress"></div>
         </div>
         <div class="points-info">
-            <div class="points">You need <strong>{{ points_needed_for_next_tier }}</strong> more points</div>
-            <div class="next-tier">Next tier: {{ next_tier }}</div>
         </div>
     </div>
-    <div class="reward-status2">
-        <div class="item-section">
             {% for item in order_items %}
-                <img class="item-image" src="{{ item.image_url }}" alt="{{ item.name }}" onerror="this.src='/static/placeholder.jpg';">
-                <div class="item-info">
-                    <h3>{{ item.name }}</h3>
-                    <p>Price: ${{ "%.2f"|format(item.price) }}</p>
-                </div>
-                <!-- Ingredients Section -->
-                <div class="ingredient-card">
-                    {% if item.ingredients %}
-                        {% for ingredient in item.ingredients %}
-                            <div class="ingredient" onclick="showIngredientDetails('{{ loop.index }}', '{{ ingredient.name }}', '{{ ingredient.image }}', '{{ ingredient.health_benefits }}', '{{ ingredient.fun_facts }}')">
-                                <img src="{{ ingredient.image }}" alt="{{ ingredient.name }}" onerror="this.src='/static/placeholder.jpg';">
-                                <p>{{ ingredient.name }}</p>
-                            </div>
-                        {% endfor %}
-                    {% else %}
-                        <p>No ingredients found for {{ item.name }}</p>
-                    {% endif %}
-                </div>
-                <!-- Ingredient Modal for each item -->
-                <div id="ingredientModal{{ loop.index }}" class="modal">
-                    <div class="modal-content">
-                        <span class="close" onclick="closeModal({{ loop.index }})">&times;</span>
-                        <div class="modal-header">
-                            <h2 id="ingredientName{{ loop.index }}"></h2>
-                        </div>
-                        <div class="modal-body">
-                            <img id="ingredientImage{{ loop.index }}" src="" alt="" style="width: 150px; height: 150px; object-fit: cover; border-radius: 8px;">
-                            <h3>Health Benefits:</h3>
-                            <ul id="healthBenefits{{ loop.index }}"></ul>
-                            <h3>Fun Facts:</h3>
-                            <ul id="funFacts{{ loop.index }}"></ul>
                         </div>
                     </div>
                 </div>
             {% endfor %}
         </div>
     </div>
 </div>
 <script>
-    // JavaScript for showing ingredient details in modal
     function showIngredientDetails(index, name, image, healthBenefits, funFacts) {
         const healthBenefitsList = healthBenefits.split(',');
         const funFactsList = funFacts.split(',');
@@ -265,7 +249,7 @@
         document.getElementById("ingredientImage" + index).src = image;
         document.getElementById("healthBenefits" + index).innerHTML = '';
         document.getElementById("funFacts" + index).innerHTML = '';
         healthBenefitsList.forEach(function(item) {
             const li = document.createElement("li");
             li.textContent = item.trim();

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>My Summary</title>
     <style>
         body {
             font-family: Arial, sans-serif;
             margin: 0;
             padding: 0;
         }
         .container {
             width: 90%;
             margin: auto;
             padding-top: 20px;
         }
+        .section {
             background-color: #fff;
             padding: 20px;
             border-radius: 10px;
             box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            margin-bottom: 20px;
         }
+        .section h1, .section h2 {
+            text-align: center;
             color: #ff6f00;
         }
+        /* --- Reward Status --- */
         .badge {
             font-size: 1.2em;
             font-weight: bold;
             background-color: #fff3e0;
             padding: 8px 15px;
             border-radius: 5px;
             display: inline-block;
+            margin: 0 auto;
+            text-align: center;
         }
+        .valid-through, .points-info, .points-bar-info, .next-tier {
+            text-align: center;
+            color: #555;
+            margin-top: 10px;
         }
         .points-bar {
             width: 100%;
             height: 20px;
             background-color: #e0e0e0;
             border-radius: 10px;
             margin: 20px 0;
+            position: relative;
         }
         .progress {
             height: 100%;
             background-color: #ffd700;
             width: {{ progress_percentage }}%;
             border-radius: 10px;
         }
+        /* --- Order Summary Cards --- */
+        .reward-status {
             display: flex;
             flex-wrap: wrap;
+            gap: 20px;
+            justify-content: flex-start;
         }
         .item-section {
+            width: 100%;
             display: flex;
             flex-direction: column;
             justify-content: space-between;
             padding: 10px;
         }
         @media (min-width: 768px) {
             .item-section {
+                width: 48%;
             }
         }
         .item-image {
             width: 100%;
             height: 250px;
             object-fit: cover;
             border-radius: 8px;
         }
         .item-info {
             text-align: center;
         }
         .item-info h3 {
             font-size: 1.5em;
             margin-top: 10px;
         }
         .ingredient-card {
             display: flex;
             flex-wrap: wrap;
+            justify-content: space-between;
+            gap: 10px;
         }
         .ingredient {
             width: 48%;
             text-align: center;
             cursor: pointer;
+            transition: transform 0.3s ease;
         }
         .ingredient:hover {
+            transform: scale(1.05);
         }
         .ingredient img {
             width: 100%;
             height: 100px;
             object-fit: cover;
             border-radius: 8px;
         }
+        /* --- Modal --- */
         .modal {
             display: none;
             position: fixed;
             height: 100%;
             background-color: rgba(0, 0, 0, 0.5);
             overflow: auto;
+            padding-top: 60px;
         }
         .modal-content {
             background-color: #fff;
             margin: 5% auto;
             padding: 20px;
             border: 1px solid #888;
+            width: 80%;
             border-radius: 8px;
             position: relative;
         }
         .close {
             color: #aaa;
             font-size: 2em;
             font-weight: bold;
             position: absolute;
+            right: 20px;
+            top: 10px;
             cursor: pointer;
         }
+        ul {
+            text-align: left;
+        }
     </style>
 </head>
 <body>
 <div class="container">
+    <!-- ✅ Order Confirmation -->
+    <div class="section">
         <h1>Order Confirmed!</h1>
+        <p class="valid-through">Estimated delivery time: 35 minutes</p>
     </div>
+    <!-- 🌟 Reward Status -->
+    <div class="section">
+        <div class="badge">{{ current_tier }} Tier</div>
+        <div class="valid-through">Valid through December 2024</div>
+        <div class="points-info">You have <strong>{{ user_points }}</strong> points</div>
+        <div class="points-bar-info">{{ start_point }} – {{ end_point }}</div>
         <div class="points-bar">
             <div class="progress"></div>
         </div>
         <div class="points-info">
+            You need <strong>{{ points_needed_for_next_tier }}</strong> more points to reach <strong>{{ next_tier }}</strong>
         </div>
     </div>
+    <!-- 🧾 Order Summary -->
+    <div class="section">
+        <h2>Your Order Summary</h2>
+        <div class="reward-status">
             {% for item in order_items %}
+                <div class="item-section">
+                    <img class="item-image" src="{{ item.image_url }}" alt="{{ item.name }}" onerror="this.src='/static/placeholder.jpg';">
+                    <div class="item-info">
+                        <h3>{{ item.name }}</h3>
+                        <p>Price: ${{ "%.2f"|format(item.price) }}</p>
+                    </div>
+                    <div class="ingredient-card">
+                        {% if item.ingredients %}
+                            {% for ingredient in item.ingredients %}
+                                <div class="ingredient" onclick="showIngredientDetails('{{ loop.index }}', '{{ ingredient.name }}', '{{ ingredient.image }}', '{{ ingredient.health_benefits }}', '{{ ingredient.fun_facts }}')">
+                                    <img src="{{ ingredient.image }}" alt="{{ ingredient.name }}" onerror="this.src='/static/placeholder.jpg';">
+                                    <p>{{ ingredient.name }}</p>
+                                </div>
+                            {% endfor %}
+                        {% else %}
+                            <p>No ingredients found for {{ item.name }}</p>
+                        {% endif %}
+                    </div>
+                    <!-- Modal -->
+                    <div id="ingredientModal{{ loop.index }}" class="modal">
+                        <div class="modal-content">
+                            <span class="close" onclick="closeModal({{ loop.index }})">&times;</span>
+                            <div class="modal-header">
+                                <h2 id="ingredientName{{ loop.index }}"></h2>
+                            </div>
+                            <div class="modal-body">
+                                <img id="ingredientImage{{ loop.index }}" src="" alt="" style="width: 150px; height: 150px; object-fit: cover; border-radius: 8px;">
+                                <h3>Health Benefits:</h3>
+                                <ul id="healthBenefits{{ loop.index }}"></ul>
+                                <h3>Fun Facts:</h3>
+                                <ul id="funFacts{{ loop.index }}"></ul>
+                            </div>
                         </div>
                     </div>
                 </div>
             {% endfor %}
         </div>
     </div>
 </div>
+<!-- Modal Script -->
 <script>
     function showIngredientDetails(index, name, image, healthBenefits, funFacts) {
         const healthBenefitsList = healthBenefits.split(',');
         const funFactsList = funFacts.split(',');
         document.getElementById("ingredientImage" + index).src = image;
         document.getElementById("healthBenefits" + index).innerHTML = '';
         document.getElementById("funFacts" + index).innerHTML = '';
         healthBenefitsList.forEach(function(item) {
             const li = document.createElement("li");
             li.textContent = item.trim();