Hugging Face's logo

Spaces:
lokesh341
/
voicemenu143
Sleeping

App Files Community
lokesh341 commited on
Commit
8b696c7
·
verified ·
1 Parent(s): b0082be

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +39 -187
templates/index.html CHANGED
@@ -7,81 +7,7 @@
7
  <title>Biryani Hub - Register & Login</title>
8
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
9
  <style>
10
- body {
11
- font-family: 'Roboto', sans-serif;
12
- background: linear-gradient(135deg, #f4c542, #ff8f6a);
13
- margin: 0;
14
- display: flex;
15
- justify-content: center;
16
- align-items: center;
17
- height: 100vh;
18
- text-align: center;
19
- }
20
- .container {
21
- background-color: #fff;
22
- padding: 40px 50px;
23
- border-radius: 10px;
24
- width: 500px;
25
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
26
- }
27
- h1 {
28
- font-size: 24px;
29
- color: #ff6a00;
30
- }
31
- label {
32
- font-size: 16px;
33
- display: block;
34
- margin-top: 15px;
35
- color: #333;
36
- font-weight: bold;
37
- }
38
- input {
39
- width: 100%;
40
- padding: 12px;
41
- font-size: 16px;
42
- border: 2px solid #ccc;
43
- border-radius: 8px;
44
- margin-top: 5px;
45
- background-color: #f9f9f9;
46
- box-sizing: border-box;
47
- }
48
- input:focus {
49
- border-color: #ff6a00;
50
- outline: none;
51
- }
52
- .info {
53
- font-size: 16px;
54
- color: #ff6a00;
55
- font-weight: bold;
56
- margin-top: 10px;
57
- }
58
- .status {
59
- font-size: 14px;
60
- color: gray;
61
- margin-top: 10px;
62
- }
63
- .confirm-button, .switch-button {
64
- padding: 10px 20px;
65
- background-color: #ff6a00;
66
- color: white;
67
- border: none;
68
- border-radius: 5px;
69
- cursor: pointer;
70
- margin-top: 10px;
71
- }
72
- .confirm-button:hover, .switch-button:hover {
73
- background-color: #e65e00;
74
- }
75
- .confirm-details {
76
- margin-top: 20px;
77
- font-size: 18px;
78
- font-weight: bold;
79
- color: #333;
80
- }
81
- .details {
82
- font-size: 16px;
83
- margin: 5px 0;
84
- }
85
  </style>
86
  </head>
87
  <body>
@@ -143,11 +69,13 @@
143
  } else {
144
  alert("Speech Recognition API is not supported in this browser.");
145
  }
 
146
  function speak(text, callback) {
147
  const speech = new SpeechSynthesisUtterance(text);
148
  speech.onend = callback;
149
  window.speechSynthesis.speak(speech);
150
  }
 
151
  function askLoginOrRegister() {
152
  speak("Are you a new customer or an existing customer? Say 'new' to register or 'existing' to login.", function () {
153
  recognition.start();
@@ -166,58 +94,31 @@
166
  };
167
  });
168
  }
169
- function showRegistrationForm() {
170
- document.getElementById('welcomePage').style.display = 'none';
171
- document.getElementById('registrationForm').style.display = 'block';
172
- document.getElementById('loginForm').style.display = 'none';
173
- document.getElementById('confirmationPage').style.display = 'none';
174
- document.getElementById('statusMessage').style.display = 'none';
175
- }
176
- function showLoginForm() {
177
- document.getElementById('welcomePage').style.display = 'none';
178
- document.getElementById('registrationForm').style.display = 'none';
179
- document.getElementById('loginForm').style.display = 'block';
180
- document.getElementById('confirmationPage').style.display = 'none';
181
- document.getElementById('statusMessage').style.display = 'none';
182
- }
183
- function captureName() {
184
- speak("Please say your name.", function () {
185
- recognition.start();
186
- recognition.onresult = function (event) {
187
- let nameCaptured = event.results[0][0].transcript.trim();
188
- document.getElementById('name').value = nameCaptured;
189
- recognition.stop();
190
- speak("You said " + nameCaptured + ". Is it correct?", function () {
191
- confirmName(nameCaptured);
192
- });
193
- };
194
- });
195
- }
196
- function confirmName(nameCaptured) {
197
- recognition.start();
198
- recognition.onresult = function (event) {
199
- let confirmation = event.results[0][0].transcript.trim().toLowerCase();
200
- recognition.stop();
201
- if (confirmation.includes("yes") || confirmation.includes("ok")) {
202
- captureEmail();
203
- } else {
204
- captureName();
205
- }
206
- };
207
- }
208
  function captureEmail() {
209
- speak("Now, say your email.", function () {
210
  recognition.start();
211
  recognition.onresult = function (event) {
212
- let emailCaptured = event.results[0][0].transcript.trim().replace(/\bat\b/g, '@').replace(/\s+/g, '');
213
  document.getElementById('email').value = emailCaptured;
214
  recognition.stop();
215
- speak("You said " + emailCaptured + ". Is it correct?", function () {
216
- confirmEmail(emailCaptured);
217
- });
 
 
 
 
 
218
  };
219
  });
220
  }
 
 
 
 
 
 
221
  function confirmEmail(emailCaptured) {
222
  recognition.start();
223
  recognition.onresult = function (event) {
@@ -230,19 +131,31 @@
230
  }
231
  };
232
  }
 
233
  function captureMobile() {
234
- speak("Now, say your mobile number.", function () {
235
  recognition.start();
236
  recognition.onresult = function (event) {
237
  let mobileCaptured = event.results[0][0].transcript.trim().replace(/\s+/g, '');
238
  document.getElementById('mobile').value = mobileCaptured;
239
  recognition.stop();
240
- speak("You said " + mobileCaptured + ". Is it correct?", function () {
241
- confirmMobile(mobileCaptured);
242
- });
 
 
 
 
243
  };
244
  });
245
  }
 
 
 
 
 
 
 
246
  function confirmMobile(mobileCaptured) {
247
  recognition.start();
248
  recognition.onresult = function (event) {
@@ -256,6 +169,7 @@
256
  }
257
  };
258
  }
 
259
  function showConfirmationPage() {
260
  const name = document.getElementById('name').value;
261
  const email = document.getElementById('email').value;
@@ -266,6 +180,7 @@
266
  // Automatically submit the details after a delay
267
  setTimeout(submitRegistration, 6000); // 6 seconds delay
268
  }
 
269
  function submitRegistration() {
270
  const name = document.getElementById('name').value;
271
  const email = document.getElementById('email').value;
@@ -298,70 +213,7 @@
298
  document.getElementById('statusMessage').style.display = 'block';
299
  });
300
  }
301
- function captureLoginDetails() {
302
- speak("Please say your email for login.", function () {
303
- recognition.start();
304
- recognition.onresult = function (event) {
305
- let emailCaptured = event.results[0][0].transcript.trim().replace(/\bat\b/g, '@').replace(/\s+/g, '');
306
- document.getElementById('loginEmail').value = emailCaptured;
307
- recognition.stop();
308
- speak("You said " + emailCaptured + ". Is it correct?", function () {
309
- confirmLoginEmail(emailCaptured);
310
- });
311
- };
312
- });
313
- }
314
- function confirmLoginEmail(emailCaptured) {
315
- recognition.start();
316
- recognition.onresult = function (event) {
317
- let confirmation = event.results[0][0].transcript.trim().toLowerCase();
318
- recognition.stop();
319
- if (confirmation.includes("yes") || confirmation.includes("ok")) {
320
- captureLoginMobile();
321
- } else {
322
- captureLoginDetails();
323
- }
324
- };
325
- }
326
- function captureLoginMobile() {
327
- speak("Now, say your mobile number.", function () {
328
- recognition.start();
329
- recognition.onresult = function (event) {
330
- let mobileCaptured = event.results[0][0].transcript.trim().replace(/\s+/g, '');
331
- document.getElementById('loginMobile').value = mobileCaptured;
332
- recognition.stop();
333
- speak("You said " + mobileCaptured + ". Is it correct?", function () {
334
- confirmLoginMobile(mobileCaptured);
335
- });
336
- };
337
- });
338
- }
339
- function confirmLoginMobile(mobileCaptured) {
340
- recognition.start();
341
- recognition.onresult = function (event) {
342
- let confirmation = event.results[0][0].transcript.trim().toLowerCase();
343
- recognition.stop();
344
- if (confirmation.includes("yes") || confirmation.includes("ok")) {
345
- submitLogin();
346
- } else {
347
- captureLoginMobile();
348
- }
349
- };
350
- }
351
- function submitLogin() {
352
- const loginEmail = document.getElementById('loginEmail').value;
353
- const loginMobile = document.getElementById('loginMobile').value;
354
- // Simulate login check
355
- if (loginEmail && loginMobile) {
356
- document.getElementById('statusText').textContent = 'Login successful! Redirecting...';
357
- document.getElementById('statusMessage').style.display = 'block';
358
- setTimeout(() => {
359
- window.location.href = '/dashboard'; // Redirect to dashboard
360
- }, 3000);
361
- } else {
362
- speak("Please enter valid login details.");
363
- }
364
- }
365
  window.onload = function () {
366
  askLoginOrRegister();
367
  };
 
7
  <title>Biryani Hub - Register & Login</title>
8
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
9
  <style>
10
+ /* Your existing CSS styles here */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
11
  </style>
12
  </head>
13
  <body>
 
69
  } else {
70
  alert("Speech Recognition API is not supported in this browser.");
71
  }
72
+
73
  function speak(text, callback) {
74
  const speech = new SpeechSynthesisUtterance(text);
75
  speech.onend = callback;
76
  window.speechSynthesis.speak(speech);
77
  }
78
+
79
  function askLoginOrRegister() {
80
  speak("Are you a new customer or an existing customer? Say 'new' to register or 'existing' to login.", function () {
81
  recognition.start();
 
94
  };
95
  });
96
  }
97
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
98
  function captureEmail() {
99
+ speak("Please say your email address.", function () {
100
  recognition.start();
101
  recognition.onresult = function (event) {
102
+ let emailCaptured = event.results[0][0].transcript.trim();
103
  document.getElementById('email').value = emailCaptured;
104
  recognition.stop();
105
+ // Validate the email format
106
+ if (!isValidEmail(emailCaptured)) {
107
+ speak("The email address is invalid. Please provide a valid email like [email protected].", captureEmail);
108
+ } else {
109
+ speak("You said " + emailCaptured + ". Is it correct?", function () {
110
+ confirmEmail(emailCaptured);
111
+ });
112
+ }
113
  };
114
  });
115
  }
116
+
117
+ function isValidEmail(email) {
118
+ // Basic email validation check for "@" and "."
119
+ return /\S+@\S+\.\S+/.test(email);
120
+ }
121
+
122
  function confirmEmail(emailCaptured) {
123
  recognition.start();
124
  recognition.onresult = function (event) {
 
131
  }
132
  };
133
  }
134
+
135
  function captureMobile() {
136
+ speak("Please say your mobile number.", function () {
137
  recognition.start();
138
  recognition.onresult = function (event) {
139
  let mobileCaptured = event.results[0][0].transcript.trim().replace(/\s+/g, '');
140
  document.getElementById('mobile').value = mobileCaptured;
141
  recognition.stop();
142
+ if (!isValidPhone(mobileCaptured)) {
143
+ speak("The mobile number is invalid. Please provide a valid 15 digit number.", captureMobile);
144
+ } else {
145
+ speak("You said " + mobileCaptured + ". Is it correct?", function () {
146
+ confirmMobile(mobileCaptured);
147
+ });
148
+ }
149
  };
150
  });
151
  }
152
+
153
+ function isValidPhone(phone) {
154
+ // Check if phone number contains only digits and is 15 characters long
155
+ const phonePattern = /^\d{10,15}$/;
156
+ return phonePattern.test(phone);
157
+ }
158
+
159
  function confirmMobile(mobileCaptured) {
160
  recognition.start();
161
  recognition.onresult = function (event) {
 
169
  }
170
  };
171
  }
172
+
173
  function showConfirmationPage() {
174
  const name = document.getElementById('name').value;
175
  const email = document.getElementById('email').value;
 
180
  // Automatically submit the details after a delay
181
  setTimeout(submitRegistration, 6000); // 6 seconds delay
182
  }
183
+
184
  function submitRegistration() {
185
  const name = document.getElementById('name').value;
186
  const email = document.getElementById('email').value;
 
213
  document.getElementById('statusMessage').style.display = 'block';
214
  });
215
  }
216
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
217
  window.onload = function () {
218
  askLoginOrRegister();
219
  };