Spaces:
Sleeping
Sleeping
Update templates/index.html
Browse files- templates/index.html +31 -86
templates/index.html
CHANGED
@@ -60,7 +60,7 @@
|
|
60 |
color: gray;
|
61 |
margin-top: 10px;
|
62 |
}
|
63 |
-
.confirm-button, .switch-button {
|
64 |
padding: 10px 20px;
|
65 |
background-color: #ff6a00;
|
66 |
color: white;
|
@@ -69,7 +69,7 @@
|
|
69 |
cursor: pointer;
|
70 |
margin-top: 10px;
|
71 |
}
|
72 |
-
.confirm-button:hover, .switch-button:hover {
|
73 |
background-color: #e65e00;
|
74 |
}
|
75 |
</style>
|
@@ -119,11 +119,13 @@
|
|
119 |
} else {
|
120 |
alert("Speech Recognition API is not supported in this browser.");
|
121 |
}
|
|
|
122 |
function speak(text, callback) {
|
123 |
const speech = new SpeechSynthesisUtterance(text);
|
124 |
speech.onend = callback;
|
125 |
window.speechSynthesis.speak(speech);
|
126 |
}
|
|
|
127 |
function askLoginOrRegister() {
|
128 |
speak("Welcome to Biryani Hub. Are you a new customer or an existing customer? Say 'new' to register or 'existing' to login.", function () {
|
129 |
recognition.start();
|
@@ -142,16 +144,19 @@
|
|
142 |
};
|
143 |
});
|
144 |
}
|
|
|
145 |
function showRegistrationForm() {
|
146 |
document.getElementById('welcomePage').style.display = 'none';
|
147 |
document.getElementById('registrationForm').style.display = 'block';
|
148 |
document.getElementById('loginForm').style.display = 'none';
|
149 |
}
|
|
|
150 |
function showLoginForm() {
|
151 |
document.getElementById('welcomePage').style.display = 'none';
|
152 |
document.getElementById('registrationForm').style.display = 'none';
|
153 |
document.getElementById('loginForm').style.display = 'block';
|
154 |
}
|
|
|
155 |
function captureName() {
|
156 |
speak("Please say your name.", function () {
|
157 |
recognition.start();
|
@@ -165,6 +170,7 @@
|
|
165 |
};
|
166 |
});
|
167 |
}
|
|
|
168 |
function confirmName(nameCaptured) {
|
169 |
recognition.start();
|
170 |
recognition.onresult = function (event) {
|
@@ -177,6 +183,7 @@
|
|
177 |
}
|
178 |
};
|
179 |
}
|
|
|
180 |
function captureEmail() {
|
181 |
speak("Now, say your email.", function () {
|
182 |
recognition.start();
|
@@ -190,6 +197,7 @@
|
|
190 |
};
|
191 |
});
|
192 |
}
|
|
|
193 |
function confirmEmail(emailCaptured) {
|
194 |
recognition.start();
|
195 |
recognition.onresult = function (event) {
|
@@ -202,6 +210,7 @@
|
|
202 |
}
|
203 |
};
|
204 |
}
|
|
|
205 |
function captureMobile() {
|
206 |
speak("Now, say your mobile number.", function () {
|
207 |
recognition.start();
|
@@ -215,6 +224,7 @@
|
|
215 |
};
|
216 |
});
|
217 |
}
|
|
|
218 |
function confirmMobile(mobileCaptured) {
|
219 |
recognition.start();
|
220 |
recognition.onresult = function (event) {
|
@@ -227,10 +237,12 @@
|
|
227 |
}
|
228 |
};
|
229 |
}
|
|
|
230 |
function isConfirmation(confirmation) {
|
231 |
const validResponses = ["yes", "ok", "yeah", "correct", "yep"];
|
232 |
return validResponses.some(response => confirmation.includes(response));
|
233 |
}
|
|
|
234 |
function submitRegistration() {
|
235 |
const name = document.getElementById('name')?.value.trim();
|
236 |
const email = document.getElementById('email')?.value.trim();
|
@@ -249,21 +261,32 @@
|
|
249 |
.then(data => {
|
250 |
console.log("Response Data:", data);
|
251 |
if (data.success) {
|
252 |
-
speak(`Thank you for registering, ${name}
|
253 |
-
|
|
|
|
|
254 |
let statusText = document.getElementById('statusText');
|
255 |
let statusMessage = document.getElementById('statusMessage');
|
256 |
-
|
257 |
if (statusText && statusMessage) {
|
258 |
statusText.textContent = `Thank you for registering, ${name}!`;
|
259 |
statusMessage.style.display = 'block';
|
260 |
setTimeout(() => {
|
261 |
statusText.textContent = 'Submitted Successfully!';
|
|
|
262 |
setTimeout(() => {
|
263 |
-
|
264 |
-
},
|
265 |
}, 6000);
|
266 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
267 |
} else {
|
268 |
speak("There was an error submitting your details. Please try again.");
|
269 |
let statusText = document.getElementById('statusText');
|
@@ -285,85 +308,7 @@
|
|
285 |
}
|
286 |
});
|
287 |
}
|
288 |
-
|
289 |
-
speak("Please say your email for login.", function () {
|
290 |
-
recognition.start();
|
291 |
-
recognition.onresult = function (event) {
|
292 |
-
let emailCaptured = event.results[0][0].transcript.trim().replace(/\bat\b/g, '@').replace(/\s+/g, '');
|
293 |
-
document.getElementById('loginEmail').value = emailCaptured;
|
294 |
-
recognition.stop();
|
295 |
-
speak("You said " + emailCaptured + ". Is it correct?", function () {
|
296 |
-
confirmLoginEmail(emailCaptured);
|
297 |
-
});
|
298 |
-
};
|
299 |
-
});
|
300 |
-
}
|
301 |
-
function confirmLoginEmail(emailCaptured) {
|
302 |
-
recognition.start();
|
303 |
-
recognition.onresult = function (event) {
|
304 |
-
let confirmation = event.results[0][0].transcript.trim().toLowerCase();
|
305 |
-
recognition.stop();
|
306 |
-
if (isConfirmation(confirmation)) {
|
307 |
-
captureLoginMobile();
|
308 |
-
} else {
|
309 |
-
captureLoginDetails();
|
310 |
-
}
|
311 |
-
};
|
312 |
-
}
|
313 |
-
function captureLoginMobile() {
|
314 |
-
speak("Now, say your mobile number.", function () {
|
315 |
-
recognition.start();
|
316 |
-
recognition.onresult = function (event) {
|
317 |
-
let mobileCaptured = event.results[0][0].transcript.trim().replace(/\s+/g, '');
|
318 |
-
document.getElementById('loginMobile').value = mobileCaptured;
|
319 |
-
recognition.stop();
|
320 |
-
speak("You said " + mobileCaptured + ". Is it correct?", function () {
|
321 |
-
confirmLoginMobile(mobileCaptured);
|
322 |
-
});
|
323 |
-
};
|
324 |
-
});
|
325 |
-
}
|
326 |
-
function confirmLoginMobile(mobileCaptured) {
|
327 |
-
recognition.start();
|
328 |
-
recognition.onresult = function (event) {
|
329 |
-
let confirmation = event.results[0][0].transcript.trim().toLowerCase();
|
330 |
-
recognition.stop();
|
331 |
-
if (isConfirmation(confirmation)) {
|
332 |
-
submitLogin();
|
333 |
-
} else {
|
334 |
-
captureLoginMobile();
|
335 |
-
}
|
336 |
-
};
|
337 |
-
}
|
338 |
-
function submitLogin() {
|
339 |
-
const loginEmail = document.getElementById('loginEmail').value;
|
340 |
-
const loginMobile = document.getElementById('loginMobile').value;
|
341 |
-
// Simulate login check by querying Salesforce
|
342 |
-
if (loginEmail && loginMobile) {
|
343 |
-
fetch('/validate-login', {
|
344 |
-
method: 'POST',
|
345 |
-
headers: { 'Content-Type': 'application/json' },
|
346 |
-
body: JSON.stringify({ email: loginEmail, mobile: loginMobile })
|
347 |
-
})
|
348 |
-
.then(response => response.json())
|
349 |
-
.then(data => {
|
350 |
-
if (data.success) {
|
351 |
-
const userName = data.name; // Retrieve the name from the response
|
352 |
-
speak(`Welcome, ${userName}!`); // Speak the welcome message with the user's name
|
353 |
-
window.location.href = '/menu'; // Redirect to menu after successful login
|
354 |
-
} else {
|
355 |
-
// alert("Invalid login details. Please try again.");
|
356 |
-
speak("Invalid login details. Please try again.");
|
357 |
-
}
|
358 |
-
})
|
359 |
-
.catch(error => {
|
360 |
-
console.error('Login validation failed:', error);
|
361 |
-
alert("An error occurred. Please try again.");
|
362 |
-
});
|
363 |
-
} else {
|
364 |
-
alert("Please provide both email and mobile number.");
|
365 |
-
}
|
366 |
-
}
|
367 |
window.onload = function () {
|
368 |
askLoginOrRegister();
|
369 |
};
|
|
|
60 |
color: gray;
|
61 |
margin-top: 10px;
|
62 |
}
|
63 |
+
.confirm-button, .switch-button, .refresh-button {
|
64 |
padding: 10px 20px;
|
65 |
background-color: #ff6a00;
|
66 |
color: white;
|
|
|
69 |
cursor: pointer;
|
70 |
margin-top: 10px;
|
71 |
}
|
72 |
+
.confirm-button:hover, .switch-button:hover, .refresh-button:hover {
|
73 |
background-color: #e65e00;
|
74 |
}
|
75 |
</style>
|
|
|
119 |
} else {
|
120 |
alert("Speech Recognition API is not supported in this browser.");
|
121 |
}
|
122 |
+
|
123 |
function speak(text, callback) {
|
124 |
const speech = new SpeechSynthesisUtterance(text);
|
125 |
speech.onend = callback;
|
126 |
window.speechSynthesis.speak(speech);
|
127 |
}
|
128 |
+
|
129 |
function askLoginOrRegister() {
|
130 |
speak("Welcome to Biryani Hub. Are you a new customer or an existing customer? Say 'new' to register or 'existing' to login.", function () {
|
131 |
recognition.start();
|
|
|
144 |
};
|
145 |
});
|
146 |
}
|
147 |
+
|
148 |
function showRegistrationForm() {
|
149 |
document.getElementById('welcomePage').style.display = 'none';
|
150 |
document.getElementById('registrationForm').style.display = 'block';
|
151 |
document.getElementById('loginForm').style.display = 'none';
|
152 |
}
|
153 |
+
|
154 |
function showLoginForm() {
|
155 |
document.getElementById('welcomePage').style.display = 'none';
|
156 |
document.getElementById('registrationForm').style.display = 'none';
|
157 |
document.getElementById('loginForm').style.display = 'block';
|
158 |
}
|
159 |
+
|
160 |
function captureName() {
|
161 |
speak("Please say your name.", function () {
|
162 |
recognition.start();
|
|
|
170 |
};
|
171 |
});
|
172 |
}
|
173 |
+
|
174 |
function confirmName(nameCaptured) {
|
175 |
recognition.start();
|
176 |
recognition.onresult = function (event) {
|
|
|
183 |
}
|
184 |
};
|
185 |
}
|
186 |
+
|
187 |
function captureEmail() {
|
188 |
speak("Now, say your email.", function () {
|
189 |
recognition.start();
|
|
|
197 |
};
|
198 |
});
|
199 |
}
|
200 |
+
|
201 |
function confirmEmail(emailCaptured) {
|
202 |
recognition.start();
|
203 |
recognition.onresult = function (event) {
|
|
|
210 |
}
|
211 |
};
|
212 |
}
|
213 |
+
|
214 |
function captureMobile() {
|
215 |
speak("Now, say your mobile number.", function () {
|
216 |
recognition.start();
|
|
|
224 |
};
|
225 |
});
|
226 |
}
|
227 |
+
|
228 |
function confirmMobile(mobileCaptured) {
|
229 |
recognition.start();
|
230 |
recognition.onresult = function (event) {
|
|
|
237 |
}
|
238 |
};
|
239 |
}
|
240 |
+
|
241 |
function isConfirmation(confirmation) {
|
242 |
const validResponses = ["yes", "ok", "yeah", "correct", "yep"];
|
243 |
return validResponses.some(response => confirmation.includes(response));
|
244 |
}
|
245 |
+
|
246 |
function submitRegistration() {
|
247 |
const name = document.getElementById('name')?.value.trim();
|
248 |
const email = document.getElementById('email')?.value.trim();
|
|
|
261 |
.then(data => {
|
262 |
console.log("Response Data:", data);
|
263 |
if (data.success) {
|
264 |
+
speak(`Thank you for registering, ${name}!`, function () {
|
265 |
+
speak(`Hi ${name}, Welcome to Biryani Hub. Speak out.`);
|
266 |
+
});
|
267 |
+
|
268 |
let statusText = document.getElementById('statusText');
|
269 |
let statusMessage = document.getElementById('statusMessage');
|
|
|
270 |
if (statusText && statusMessage) {
|
271 |
statusText.textContent = `Thank you for registering, ${name}!`;
|
272 |
statusMessage.style.display = 'block';
|
273 |
setTimeout(() => {
|
274 |
statusText.textContent = 'Submitted Successfully!';
|
275 |
+
// Refresh the page after 10 seconds
|
276 |
setTimeout(() => {
|
277 |
+
location.reload(); // Refresh the page
|
278 |
+
}, 10000); // 10 seconds delay
|
279 |
}, 6000);
|
280 |
}
|
281 |
+
|
282 |
+
// Add the "Refresh me" button after successful registration
|
283 |
+
let refreshButton = document.createElement("button");
|
284 |
+
refreshButton.classList.add("refresh-button");
|
285 |
+
refreshButton.textContent = "Refresh Me";
|
286 |
+
refreshButton.onclick = function () {
|
287 |
+
location.reload();
|
288 |
+
};
|
289 |
+
document.body.appendChild(refreshButton);
|
290 |
} else {
|
291 |
speak("There was an error submitting your details. Please try again.");
|
292 |
let statusText = document.getElementById('statusText');
|
|
|
308 |
}
|
309 |
});
|
310 |
}
|
311 |
+
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
312 |
window.onload = function () {
|
313 |
askLoginOrRegister();
|
314 |
};
|