From 472d36b44fabf0657cee8f5702caf276b816fc79 Mon Sep 17 00:00:00 2001
From: Kumi <git@kumi.email>
Date: Fri, 14 Jun 2024 07:03:04 +0200
Subject: [PATCH] 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.
---
 index.html | 115 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 115 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..9926ec6
--- /dev/null
+++ 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>
\ No newline at end of file
