kumi/promise.restaurant
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: introduce landing page for Promise Restaurant

Browse source 
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:
Kumi 2024-06-14 07:03:04 +02:00
commit 472d36b44f
Signed by: kumi
GPG key ID: ECBCC9082395383F
1 changed files with 115 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

115
index.html Normal file
View 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>