Update templates/reward_status.html

templates/reward_status.html

@@ -54,6 +54,7 @@
             color: #888;
             margin-bottom: 20px;
         }
+        /* Reward progress bar styling */
         .points-bar {
             width: 100%;
             height: 20px;
@@ -73,19 +74,80 @@
             font-size: 0.9em;
             color: #333;
         }
-        .points {
-            font-size: 1.1em;
-            font-weight: bold;
+
+        /* Card layout for item and ingredients */
+        .reward-item-card {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-top: 20px;
         }
-        .next-tier {
-            font-size: 1.1em;
-            font-weight: bold;
+
+        .item-image {
+            width: 150px;
+            height: 150px;
+            object-fit: cover;
+            border-radius: 8px;
         }
-        .points-bar-info {
+
+        .ingredient-card {
             display: flex;
             justify-content: space-between;
-            font-size: 0.9em;
-            color: #333;
+            margin-top: 10px;
+        }
+
+        .ingredient {
+            text-align: center;
+            cursor: pointer;
+        }
+
+        .ingredient img {
+            width: 100px;
+            height: 100px;
+            object-fit: cover;
+            border-radius: 8px;
+        }
+
+        /* Modal styling for ingredient details */
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1;
+            left: 0;
+            top: 0;
+            width: 100%;
+            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: 50%;
+            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;
+            position: absolute;
+            right: 10px;
+            top: 10px;
+            cursor: pointer;
         }
     </style>
 </head>
@@ -100,16 +162,11 @@
     <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>
@@ -118,8 +175,77 @@
             <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>
+
+        <!-- Reward Item Display -->
+        <div class="reward-item-card">
+            <div>
+                <img class="item-image" src="{{ item_image_url }}" alt="{{ item_name }}">
+                <h3>{{ item_name }}</h3>
+            </div>
+            <div class="ingredient-card">
+                <div class="ingredient" onclick="showIngredientDetails('ingredient_1')">
+                    <img src="{{ ingredient_1_image }}" alt="{{ ingredient_1_name }}">
+                    <p>{{ ingredient_1_name }}</p>
+                </div>
+                <div class="ingredient" onclick="showIngredientDetails('ingredient_2')">
+                    <img src="{{ ingredient_2_image }}" alt="{{ ingredient_2_name }}">
+                    <p>{{ ingredient_2_name }}</p>
+                </div>
+            </div>
+        </div>
     </div>
 </div>
 
+<!-- Ingredient Modal -->
+<div id="ingredientModal" class="modal">
+    <div class="modal-content">
+        <span class="close" onclick="closeModal()">&times;</span>
+        <div class="modal-header">
+            <h2 id="ingredientName"></h2>
+        </div>
+        <div class="modal-body">
+            <img id="ingredientImage" src="" alt="" style="width: 150px; height: 150px; object-fit: cover; border-radius: 8px;">
+            <h3>Health Benefits:</h3>
+            <p id="healthBenefits"></p>
+            <h3>Fun Facts:</h3>
+            <p id="funFacts"></p>
+        </div>
+    </div>
+</div>
+
+<script>
+    function showIngredientDetails(ingredient) {
+        // Fetch data for the selected ingredient
+        let ingredientData = {
+            'ingredient_1': {
+                name: "{{ ingredient_1_name }}",
+                image: "{{ ingredient_1_image }}",
+                health_benefits: "{{ ingredient_1_health_benefits }}",
+                fun_facts: "{{ ingredient_1_fun_facts }}"
+            },
+            'ingredient_2': {
+                name: "{{ ingredient_2_name }}",
+                image: "{{ ingredient_2_image }}",
+                health_benefits: "{{ ingredient_2_health_benefits }}",
+                fun_facts: "{{ ingredient_2_fun_facts }}"
+            }
+        };
+
+        // Update modal content
+        document.getElementById("ingredientName").textContent = ingredientData[ingredient].name;
+        document.getElementById("ingredientImage").src = ingredientData[ingredient].image;
+        document.getElementById("healthBenefits").textContent = ingredientData[ingredient].health_benefits;
+        document.getElementById("funFacts").textContent = ingredientData[ingredient].fun_facts;
+
+        // Show the modal
+        document.getElementById("ingredientModal").style.display = "block";
+    }
+
+    function closeModal() {
+        // Hide the modal
+        document.getElementById("ingredientModal").style.display = "none";
+    }
+</script>
+
 </body>
-</html>
+</html>