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.
This commit is contained in:
commit
472d36b44f
1 changed files with 115 additions and 0 deletions
115
index.html
Normal file
115
index.html
Normal file
|
@ -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>
|
Loading…
Reference in a new issue