BiryaniHubflaskSalesTeam7

Sleeping

App Files Files Community

nagasurendra commited on 15 days ago

Commit

9dfe58f

verified ·

1 Parent(s): d8b180b

Update templates/redirect_page.html

Browse files

Files changed (1) hide show

templates/redirect_page.html +187 -16

templates/redirect_page.html CHANGED Viewed

@@ -3,23 +3,194 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Logging Out...</title>
-    <script type="text/javascript">
-        // Get the table number from Flask (if needed)
-        var tableNumber = "{{ table_number }}";
-        window.onload = function() {
-            // Construct the logout redirect URL with table number (optional)
-            let redirectURL = "/login";  // Redirect to login page
-            if (tableNumber) {
-                redirectURL += "?table=" + encodeURIComponent(tableNumber);
-            }
-            // Optionally, redirect the current tab to the login page
-            window.location.href = redirectURL;
-        };
-    </script>
 </head>
 <body>
-    <h1>Logging out...</h1>
-    <p>Please wait while we log you out and redirect you to the login page.</p>
 </body>
 </html>

 <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;
+            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;
+        }
+        .order-confirmed h1 {
+            font-size: 2em;
+            color: #ff6f00;
+        }
+        .reward-status {
+            margin-top: 30px;
+            background-color: #fff;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+            display: flex;
+            justify-content: space-between;
+            height: 800px;
+        }
+        .item-section {
+            width: 50%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            padding: 10px;
+        }
+        .item-image {
+            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;
+            padding-top: 10px;
+        }
+        .ingredient {
+            width: 48%;
+            text-align: center;
+            cursor: pointer;
+        }
+        .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>
+<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="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>
+        <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>
+<!-- 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>
+            <ul id="healthBenefits"></ul>
+            <h3>Fun Facts:</h3>
+            <ul id="funFacts"></ul>
+        </div>
+    </div>
+</div>
+<script>
+    function showIngredientDetails(name, image, healthBenefits, funFacts) {
+        // Split the health benefits and fun facts by commas
+        const healthBenefitsList = healthBenefits.split(',');
+        const funFactsList = funFacts.split(',');
+        // Set ingredient name and image
+        document.getElementById("ingredientName").textContent = name;
+        document.getElementById("ingredientImage").src = image;
+        // Clear the previous lists
+        document.getElementById("healthBenefits").innerHTML = '';
+        document.getElementById("funFacts").innerHTML = '';
+        // Add each health benefit as a list item
+        healthBenefitsList.forEach(function(item) {
+            const li = document.createElement("li");
+            li.textContent = item.trim();
+            document.getElementById("healthBenefits").appendChild(li);
+        });
+        // Add each fun fact as a list item
+        funFactsList.forEach(function(item) {
+            const li = document.createElement("li");
+            li.textContent = item.trim();
+            document.getElementById("funFacts").appendChild(li);
+        });
+        // Display the modal
+        document.getElementById("ingredientModal").style.display = "block";
+    }
+    function closeModal() {
+        document.getElementById("ingredientModal").style.display = "none";
+    }
+</script>
 </body>
 </html>