feat: introduce landing page for Promise Restaurant

Added a new index.html file that sets up a basic landing page for Promise Restaurant. It includes a heading, "Place Order" button, and a message div. The "Place Order" button simulates food ordering using JavaScript Promises, displaying success or failure messages based on operation outcomes. Ensures responsiveness and user interaction cues for better UX. Contains basic styles for an aesthetically pleasing UI.
2024-06-14 07:03:04 +02:00 · 2024-06-14 07:03:04 +02:00 · 472d36b44f
commit 472d36b44f
1 changed files with 115 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Promise Restaurant</title>
+    <style>
+        body {
+            font-family: 'Arial', sans-serif;
+            background-color: #f4f4f9;
+            color: #333;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+            margin: 0;
+        }
+
+        h1 {
+            color: #4CAF50;
+            margin-bottom: 20px;
+        }
+
+        #orderButton {
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            padding: 15px 30px;
+            font-size: 1.2em;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+
+        #orderButton:hover:enabled {
+            background-color: #45a049;
+        }
+
+        #orderButton:disabled {
+            background-color: #ccc;
+            cursor: not-allowed;
+        }
+
+        #message {
+            margin-top: 20px;
+            font-size: 1.2em;
+            padding: 10px 20px;
+            border-radius: 5px;
+            border: 1px solid #ddd;
+            background-color: #fff;
+            width: 60%;
+            max-width: 500px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+
+        #message.error {
+            border-color: #e74c3c;
+            color: #e74c3c;
+        }
+
+        #message.success {
+            border-color: #4CAF50;
+            color: #4CAF50;
+        }
+    </style>
+</head>
+<body>
+    <h1>Promise Restaurant</h1>
+    <button id="orderButton">Place Order</button>
+    <div id="message">Please place your order!</div>
+
+    <script>
+        document.getElementById('orderButton').addEventListener('click', () => {
+            const messageDiv = document.getElementById('message');
+			const orderButton = document.getElementById('orderButton');
+			
+            messageDiv.innerHTML = 'Processing your order...';
+            messageDiv.className = '';
+			orderButton.disabled = true;
+
+            const Restaurant = new Promise((resolve, reject) => {
+                const currentHour = new Date().getHours();
+                const kitchenOpen = currentHour >= 11 && currentHour < 23;
+
+                if (!kitchenOpen) {
+                    reject("Sorry, the kitchen is closed. We cannot prepare your food.");
+                    return;
+                }
+
+                console.log("Order received. Preparing your food...");
+
+                const preparationTime = Math.floor(Math.random() * 10000);
+
+                setTimeout(() => {
+                    resolve("Your food is ready! Enjoy your meal.");
+                }, preparationTime);
+            });
+
+            Restaurant
+                .then(message => {
+                    messageDiv.innerHTML = message;
+                    messageDiv.className = 'success';
+                })
+                .catch(error => {
+                    messageDiv.innerHTML = error;
+                    messageDiv.className = 'error';
+                })
+			    .finally(() => {
+                    orderButton.disabled = false;
+                });
+        });
+    </script>
+</body>
+</html>