BiryaniHubflaskSalesTeam8

Sleeping

App Files Files Community

nagasurendra commited on 20 days ago

Commit

8c3612e

verified ·

1 Parent(s): 91cf47e

Update templates/reward_status.html

Browse files

Files changed (1) hide show

templates/reward_status.html +21 -143

templates/reward_status.html CHANGED Viewed

@@ -5,130 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Reward Status</title>
     <style>
-        body {
-            font-family: Arial, sans-serif;
-            background-color: #f9f9f9;
-            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;
-            margin-bottom: 20px;
-        }
-        .order-confirmed h1 {
-            font-size: 2em;
-            color: #ff6f00;
-        }
-        .reward-status {
-            display: flex;
-            justify-content: space-between;
-            flex-wrap: wrap; /* This allows the layout to adjust on smaller screens */
-            background-color: #fff;
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-            height: auto;
-            max-height: 800px; /* Control the maximum height */
-            overflow: hidden; /* Prevents overflow if content gets too large */
-        }
-        .item-section {
-            width: 100%; /* Default to 100% width for smaller screens */
-            height: auto;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            padding: 10px;
-        }
-        @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; /* Ensures proper alignment in small screens */
-        }
-        .ingredient {
-            width: 48%;
-            text-align: center;
-            cursor: pointer;
-            margin-top: 10px;
-        }
-        .ingredient img {
-            width: 100%;
-            height: 100px;
-            object-fit: cover;
-            border-radius: 8px;
-        }
-        /* Modal Styling */
-        .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;
-        }
-        .close {
-            color: #aaa;
-            font-size: 2em;
-            font-weight: bold;
-            position: absolute;
-            right: 10px;
-            top: 10px;
-            cursor: pointer;
-        }
     </style>
 </head>
 <body>
@@ -140,26 +17,26 @@
     </div>
     <div class="reward-status">
-        <!-- First section: Item info -->
-        <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>
-        <!-- Second section: Ingredients -->
-        <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>
@@ -181,6 +58,7 @@
 </div>
 <script>
     function showIngredientDetails(name, image, healthBenefits, funFacts) {
         const healthBenefitsList = healthBenefits.split(',');
         const funFactsList = funFacts.split(',');

     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Reward Status</title>
     <style>
+        /* Styles for your layout */
     </style>
 </head>
 <body>
     </div>
     <div class="reward-status">
+        <!-- Loop through order_items -->
+        {% 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>
+                <!-- Ingredients -->
+                <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>
+        {% endfor %}
     </div>
 </div>
 </div>
 <script>
+    // JavaScript for showing ingredient details in modal
     function showIngredientDetails(name, image, healthBenefits, funFacts) {
         const healthBenefitsList = healthBenefits.split(',');
         const funFactsList = funFacts.split(',');