Spaces:
Sleeping
Sleeping
File size: 5,620 Bytes
09e2b98 635ad5b 21e0e48 5a12a62 21e0e48 5a12a62 21e0e48 36abe92 a43603b 36abe92 21e0e48 5a12a62 36abe92 a43603b 5a12a62 d5bb658 a43603b 5a12a62 21e0e48 a43603b 5a12a62 21e0e48 a43603b 5a12a62 ad7521b a43603b 5a12a62 36abe92 ad7521b 5a12a62 36abe92 a43603b 5a12a62 a43603b 5a12a62 ad7521b a43603b 5a12a62 ba6bae6 a43603b 5a12a62 14d9093 a43603b 5a12a62 a43603b 635ad5b 5a12a62 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Biryani Hub - Register & Login</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Roboto', sans-serif;
background: linear-gradient(135deg, #f4c542, #ff8f6a);
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
text-align: center;
}
.container {
background-color: #fff;
padding: 40px 50px;
border-radius: 10px;
width: 500px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 24px;
color: #ff6a00;
}
label {
font-size: 16px;
display: block;
margin-top: 15px;
color: #333;
font-weight: bold;
}
input {
width: 100%;
padding: 12px;
font-size: 16px;
border: 2px solid #ccc;
border-radius: 8px;
margin-top: 5px;
background-color: #f9f9f9;
box-sizing: border-box;
}
input:focus {
border-color: #ff6a00;
outline: none;
}
.confirm-button {
padding: 10px 20px;
background-color: #ff6a00;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
}
.confirm-button:hover {
background-color: #e65e00;
}
</style>
</head>
<body>
<div class="container" id="welcomePage">
<h1>Welcome to Biriyani Hub 🍽</h1>
<h2 class="info" id="infoMessage">Welcome! Are you a new customer or an existing one?</h2>
<p class="status" id="status">🔊 Please say 'new' to register or 'existing' to login.</p>
</div>
<!-- Registration Form -->
<div class="container" id="registrationForm" style="display: none;">
<h2>Register</h2>
<label for="name">Your Name</label>
<input type="text" id="name" placeholder="Listening for name..." required>
<label for="email">Your Email</label>
<input type="text" id="email" placeholder="Listening for email..." required>
<label for="mobile">Your Mobile Number</label>
<input type="text" id="mobile" placeholder="Listening for mobile number..." required>
<label for="password">Your Password</label>
<input type="password" id="password" placeholder="Enter your password" required>
<p class="status" id="registrationStatus">Listening... 🗣</p>
<button class="confirm-button" onclick="submitRegistration()">Register</button>
</div>
<!-- Login Form -->
<div class="container" id="loginForm" style="display: none;">
<h2>Login</h2>
<label for="loginEmail">Your Email</label>
<input type="text" id="loginEmail" placeholder="Listening for email..." required>
<label for="loginMobile">Your Mobile Number</label>
<input type="text" id="loginMobile" placeholder="Listening for mobile number..." required>
<label for="loginPassword">Your Password</label>
<input type="password" id="loginPassword" placeholder="Enter your password" required>
<p class="status" id="loginStatus">Listening... 🗣</p>
<button class="confirm-button" onclick="submitLogin()">Login</button>
</div>
<script>
function submitRegistration() {
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const phone = document.getElementById('mobile').value;
const password = document.getElementById('password').value;
fetch('/register', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name, email, phone, password })
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert('Registration successful!');
window.location.reload();
} else {
alert('Error: ' + data.error);
}
})
.catch(error => {
alert('An error occurred. Please try again.');
});
}
function submitLogin() {
const email = document.getElementById('loginEmail').value;
const phone = document.getElementById('loginMobile').value;
const password = document.getElementById('loginPassword').value;
fetch('/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email, phone, password })
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert('Login successful!');
window.location.href = '/dashboard';
} else {
alert('Error: ' + data.error);
}
})
.catch(error => {
alert('An error occurred. Please try again.');
});
}
</script>
</body>
</html>
|