Update templates/reward_status.html

templates/reward_status.html

@@ -12,7 +12,7 @@
             padding: 0;
         }
         .container {
-            width: 80%;
+            width: 90%;
             margin: auto;
             padding-top: 20px;
         }
@@ -27,88 +27,54 @@
             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;
-            color: #ff6f00;
-            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;
-        }
-        /* Reward progress bar styling */
-        .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;
+            height: 800px;
         }
-
-        /* Card layout for item and ingredients */
-        .reward-item-card {
+        .item-section {
+            width: 50%;
+            height: 100%;
             display: flex;
-            align-items: center;
+            flex-direction: column;
             justify-content: space-between;
-            margin-top: 20px;
+            padding: 10px;
         }
-
         .item-image {
-            width: 150px;
-            height: 150px;
+            width: 100%;
+            height: 200px;
             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;
-            margin-top: 10px;
+            padding-top: 10px;
         }
-
         .ingredient {
+            width: 48%;
             text-align: center;
             cursor: pointer;
         }
-
         .ingredient img {
-            width: 100px;
+            width: 100%;
             height: 100px;
             object-fit: cover;
             border-radius: 8px;
         }
-
-        /* Modal styling for ingredient details */
+        /* Modal Styling */
         .modal {
             display: none;
             position: fixed;
@@ -131,19 +97,10 @@
             border-radius: 8px;
         }
 
-        .modal-header {
-            font-size: 1.5em;
-            margin-bottom: 15px;
-        }
-
-        .modal-body p {
-            font-size: 1em;
-            margin: 10px 0;
-        }
-
         .close {
             color: #aaa;
-            font-size: 1.5em;
+            font-size: 2em;
+            font-weight: bold;
             position: absolute;
             right: 10px;
             top: 10px;
@@ -160,35 +117,24 @@
     </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 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>
 
-        <!-- Reward Item Display -->
-        <div class="reward-item-card">
-            {% for item in order_items %}
-                <div>
-                    <img class="item-image" src="{{ item.image_url }}" alt="{{ item.name }}" onerror="this.src='/static/placeholder.jpg';">
-                    <h3>{{ item.name }}</h3>
-                    <p>Price: ${{ "%.2f"|format(item.price) }}</p>
-                </div>
-
-                <div class="ingredient-card">
-                    {% for ingredient in item.ingredients %}
-                        {% if ingredient.name %}
-                            <div class="ingredient" onclick="showIngredientDetails('{{ 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>
-                        {% endif %}
-                    {% endfor %}
-                </div>
-            {% endfor %}
+        <div class="item-section">
+            <div class="ingredient-card">
+                {% for ingredient in item.ingredients %}
+                    <div class="ingredient" onclick="showIngredientDetails('{{ 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 %}
+            </div>
         </div>
-
     </div>
 </div>
 
@@ -210,7 +156,6 @@
 </div>
 
 <script>
-    // Show Ingredient Details in the Modal
     function showIngredientDetails(name, image, healthBenefits, funFacts) {
         // Split the health benefits and fun facts by commas
         const healthBenefitsList = healthBenefits.split(',');
@@ -242,11 +187,10 @@
         document.getElementById("ingredientModal").style.display = "block";
     }
 
-    // Close the modal
     function closeModal() {
         document.getElementById("ingredientModal").style.display = "none";
     }
 </script>
 
 </body>
-</html>
+</html>