Hugging Face's logo

Spaces:
lokesh341
/
voicemenuwithregisterandloginnnwithmenuuuu
Sleeping

App Files Community
lokesh341 commited on
Commit
d5bb658
·
verified ·
1 Parent(s): efa0646

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +23 -301
templates/index.html CHANGED
@@ -49,17 +49,6 @@
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;
@@ -72,315 +61,48 @@
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>
88
- <!-- Welcome Page -->
89
  <div class="container" id="welcomePage">
90
  <h1>Welcome to Biriyani Hub 🍽</h1>
91
- <h2 class="info" id="infoMessage">Welcome! Are you a new customer or an existing one?</h2>
92
- <p class="status" id="status">🔊 Please say 'new' to register or 'existing' to login.</p>
93
  </div>
94
 
95
- <!-- Registration Form -->
96
  <div class="container" id="registrationForm" style="display: none;">
97
  <h2>Register</h2>
98
- <label for="name">Your Name</label>
99
- <input type="text" id="name" placeholder="Listening for name..." readonly>
 
 
 
 
100
 
101
- <label for="email">Your Email</label>
102
- <input type="text" id="email" placeholder="Listening for email..." readonly>
103
 
104
- <label for="mobile">Your Mobile Number</label>
105
- <input type="text" id="mobile" placeholder="Listening for mobile number..." readonly>
106
 
107
- <p class="status" id="registrationStatus">Listening... 🗣</p>
 
108
  </div>
109
 
110
- <!-- Login Form -->
111
  <div class="container" id="loginForm" style="display: none;">
112
  <h2>Login</h2>
113
- <label for="loginEmail">Your Email</label>
114
- <input type="text" id="loginEmail" placeholder="Listening for email..." readonly>
 
115
 
116
- <label for="loginMobile">Your Mobile Number</label>
117
- <input type="text" id="loginMobile" placeholder="Listening for mobile number..." readonly>
118
 
119
- <p class="status" id="loginStatus">Listening... 🗣</p>
120
- </div>
121
 
122
- <!-- Confirmation Page -->
123
- <div class="container" id="confirmationPage" style="display: none;">
124
- <h2>Confirm Your Details</h2>
125
- <div class="confirm-details">
126
- <p class="details"><strong>Name:</strong> <span id="confirmName"></span></p>
127
- <p class="details"><strong>Email:</strong> <span id="confirmEmail"></span></p>
128
- <p class="details"><strong>Phone:</strong> <span id="confirmPhone"></span></p>
129
- </div>
130
- <button class="confirm-button" onclick="submitRegistration()">Confirm & Submit</button>
131
  </div>
132
-
133
- <div id="statusMessage" style="display: none;">
134
- <h2 id="statusText"></h2>
135
- </div>
136
-
137
- <script>
138
- let recognition;
139
- if ('webkitSpeechRecognition' in window) {
140
- recognition = new webkitSpeechRecognition();
141
- recognition.continuous = false;
142
- recognition.interimResults = false;
143
- recognition.lang = 'en-US';
144
- } else {
145
- alert("Speech Recognition API is not supported in this browser.");
146
- }
147
-
148
- function speak(text, callback) {
149
- const speech = new SpeechSynthesisUtterance(text);
150
- speech.onend = callback;
151
- window.speechSynthesis.speak(speech);
152
- }
153
-
154
- function askLoginOrRegister() {
155
- speak("Are you a new customer or an existing customer? Say 'new' to register or 'existing' to login.", function () {
156
- recognition.start();
157
- recognition.onresult = function (event) {
158
- let response = event.results[0][0].transcript.trim().toLowerCase();
159
- recognition.stop();
160
- if (response.includes("new")) {
161
- showRegistrationForm();
162
- captureName();
163
- } else if (response.includes("existing")) {
164
- showLoginForm();
165
- captureLoginDetails();
166
- } else {
167
- speak("I didn't understand. Please say 'new' for registration or 'existing' for login.", askLoginOrRegister);
168
- }
169
- };
170
- });
171
- }
172
-
173
- function showRegistrationForm() {
174
- document.getElementById('welcomePage').style.display = 'none';
175
- document.getElementById('registrationForm').style.display = 'block';
176
- document.getElementById('loginForm').style.display = 'none';
177
- document.getElementById('confirmationPage').style.display = 'none';
178
- document.getElementById('statusMessage').style.display = 'none';
179
- }
180
-
181
- function showLoginForm() {
182
- document.getElementById('welcomePage').style.display = 'none';
183
- document.getElementById('registrationForm').style.display = 'none';
184
- document.getElementById('loginForm').style.display = 'block';
185
- document.getElementById('confirmationPage').style.display = 'none';
186
- document.getElementById('statusMessage').style.display = 'none';
187
- }
188
-
189
- function captureName() {
190
- speak("Please say your name.", function () {
191
- recognition.start();
192
- recognition.onresult = function (event) {
193
- let nameCaptured = event.results[0][0].transcript.trim();
194
- document.getElementById('name').value = nameCaptured;
195
- recognition.stop();
196
- speak("You said " + nameCaptured + ". Is it correct?", function () {
197
- confirmName(nameCaptured);
198
- });
199
- };
200
- });
201
- }
202
-
203
- function confirmName(nameCaptured) {
204
- recognition.start();
205
- recognition.onresult = function (event) {
206
- let confirmation = event.results[0][0].transcript.trim().toLowerCase();
207
- recognition.stop();
208
- if (confirmation.includes("yes") || confirmation.includes("ok")) {
209
- captureEmail();
210
- } else {
211
- captureName();
212
- }
213
- };
214
- }
215
-
216
- function captureEmail() {
217
- speak("Now, say your email.", function () {
218
- recognition.start();
219
- recognition.onresult = function (event) {
220
- let emailCaptured = event.results[0][0].transcript.trim().replace(/\bat\b/g, '@').replace(/\s+/g, '');
221
- document.getElementById('email').value = emailCaptured;
222
- recognition.stop();
223
- speak("You said " + emailCaptured + ". Is it correct?", function () {
224
- confirmEmail(emailCaptured);
225
- });
226
- };
227
- });
228
- }
229
-
230
- function confirmEmail(emailCaptured) {
231
- recognition.start();
232
- recognition.onresult = function (event) {
233
- let confirmation = event.results[0][0].transcript.trim().toLowerCase();
234
- recognition.stop();
235
- if (confirmation.includes("yes") || confirmation.includes("ok")) {
236
- captureMobile();
237
- } else {
238
- captureEmail();
239
- }
240
- };
241
- }
242
-
243
- function captureMobile() {
244
- speak("Now, say your mobile number.", function () {
245
- recognition.start();
246
- recognition.onresult = function (event) {
247
- let mobileCaptured = event.results[0][0].transcript.trim().replace(/\s+/g, '');
248
- document.getElementById('mobile').value = mobileCaptured;
249
- recognition.stop();
250
- speak("You said " + mobileCaptured + ". Is it correct?", function () {
251
- confirmMobile(mobileCaptured);
252
- });
253
- };
254
- });
255
- }
256
-
257
- function confirmMobile(mobileCaptured) {
258
- recognition.start();
259
- recognition.onresult = function (event) {
260
- let confirmation = event.results[0][0].transcript.trim().toLowerCase();
261
- recognition.stop();
262
- if (confirmation.includes("yes") || confirmation.includes("ok")) {
263
- showConfirmationPage();
264
- } else {
265
- captureMobile();
266
- }
267
- };
268
- }
269
-
270
- function showConfirmationPage() {
271
- const name = document.getElementById('name').value;
272
- const email = document.getElementById('email').value;
273
- const phone = document.getElementById('mobile').value;
274
- document.getElementById('confirmName').textContent = name;
275
- document.getElementById('confirmEmail').textContent = email;
276
- document.getElementById('confirmPhone').textContent = phone;
277
- document.getElementById('confirmationPage').style.display = 'block';
278
- }
279
-
280
- function submitRegistration() {
281
- const name = document.getElementById('name').value;
282
- const email = document.getElementById('email').value;
283
- const phone = document.getElementById('mobile').value;
284
- // Simulate submission to Salesforce
285
- fetch('/submit', {
286
- method: 'POST',
287
- headers: { 'Content-Type': 'application/json' },
288
- body: JSON.stringify({ name, email, phone })
289
- })
290
- .then(response => response.json())
291
- .then(data => {
292
- if (data.success) {
293
- document.getElementById('statusText').textContent = `Hi ${name}, successfully registered!`;
294
- document.getElementById('statusMessage').style.display = 'block';
295
- setTimeout(() => {
296
- document.getElementById('statusText').textContent = 'Thank you for registering!';
297
- setTimeout(() => {
298
- window.location.reload(); // Refresh after 5 seconds
299
- }, 5000);
300
- }, 5000);
301
- } else {
302
- document.getElementById('statusText').textContent = 'There was an error submitting your details. Please try again.';
303
- document.getElementById('statusMessage').style.display = 'block';
304
- }
305
- })
306
- .catch(error => {
307
- document.getElementById('statusText').textContent = 'An error occurred. Please try again.';
308
- document.getElementById('statusMessage').style.display = 'block';
309
- });
310
- }
311
-
312
- function captureLoginDetails() {
313
- speak("Please say your email for login.", function () {
314
- recognition.start();
315
- recognition.onresult = function (event) {
316
- let emailCaptured = event.results[0][0].transcript.trim().replace(/\bat\b/g, '@').replace(/\s+/g, '');
317
- document.getElementById('loginEmail').value = emailCaptured;
318
- recognition.stop();
319
- speak("You said " + emailCaptured + ". Is it correct?", function () {
320
- confirmLoginEmail(emailCaptured);
321
- });
322
- };
323
- });
324
- }
325
-
326
- function confirmLoginEmail(emailCaptured) {
327
- recognition.start();
328
- recognition.onresult = function (event) {
329
- let confirmation = event.results[0][0].transcript.trim().toLowerCase();
330
- recognition.stop();
331
- if (confirmation.includes("yes") || confirmation.includes("ok")) {
332
- captureLoginMobile();
333
- } else {
334
- captureLoginDetails();
335
- }
336
- };
337
- }
338
-
339
- function captureLoginMobile() {
340
- speak("Now, say your mobile number.", function () {
341
- recognition.start();
342
- recognition.onresult = function (event) {
343
- let mobileCaptured = event.results[0][0].transcript.trim().replace(/\s+/g, '');
344
- document.getElementById('loginMobile').value = mobileCaptured;
345
- recognition.stop();
346
- speak("You said " + mobileCaptured + ". Is it correct?", function () {
347
- confirmLoginMobile(mobileCaptured);
348
- });
349
- };
350
- });
351
- }
352
-
353
- function confirmLoginMobile(mobileCaptured) {
354
- recognition.start();
355
- recognition.onresult = function (event) {
356
- let confirmation = event.results[0][0].transcript.trim().toLowerCase();
357
- recognition.stop();
358
- if (confirmation.includes("yes") || confirmation.includes("ok")) {
359
- submitLogin();
360
- } else {
361
- captureLoginMobile();
362
- }
363
- };
364
- }
365
-
366
- function submitLogin() {
367
- const loginEmail = document.getElementById('loginEmail').value;
368
- const loginMobile = document.getElementById('loginMobile').value;
369
- // Simulate login check
370
- if (loginEmail && loginMobile) {
371
- document.getElementById('statusText').textContent = 'Login successful! Redirecting...';
372
- document.getElementById('statusMessage').style.display = 'block';
373
- setTimeout(() => {
374
- window.location.href = '/dashboard'; // Redirect to dashboard
375
- }, 3000);
376
- } else {
377
- speak("Please enter valid login details.");
378
- }
379
- }
380
-
381
- window.onload = function () {
382
- askLoginOrRegister();
383
- };
384
- </script>
385
  </body>
386
  </html>
 
49
  border-color: #ff6a00;
50
  outline: none;
51
  }
 
 
 
 
 
 
 
 
 
 
 
52
  .confirm-button, .switch-button {
53
  padding: 10px 20px;
54
  background-color: #ff6a00;
 
61
  .confirm-button:hover, .switch-button:hover {
62
  background-color: #e65e00;
63
  }
 
 
 
 
 
 
 
 
 
 
64
  </style>
65
  </head>
66
  <body>
 
67
  <div class="container" id="welcomePage">
68
  <h1>Welcome to Biriyani Hub 🍽</h1>
69
+ <h2>Welcome! Are you a new customer or an existing one?</h2>
70
+ <p>🔊 Please say 'new' to register or 'existing' to login.</p>
71
  </div>
72
 
 
73
  <div class="container" id="registrationForm" style="display: none;">
74
  <h2>Register</h2>
75
+ <form action="/register" method="POST">
76
+ <label for="name">Your Name</label>
77
+ <input type="text" id="name" name="name" required>
78
+
79
+ <label for="email">Your Email</label>
80
+ <input type="email" id="email" name="email" required>
81
 
82
+ <label for="mobile">Your Mobile Number</label>
83
+ <input type="text" id="mobile" name="phone" required>
84
 
85
+ <label for="password">Your Password</label>
86
+ <input type="password" id="password" name="password" required>
87
 
88
+ <button class="confirm-button" type="submit">Register</button>
89
+ </form>
90
  </div>
91
 
 
92
  <div class="container" id="loginForm" style="display: none;">
93
  <h2>Login</h2>
94
+ <form action="/login" method="POST">
95
+ <label for="loginEmail">Your Email</label>
96
+ <input type="email" id="loginEmail" name="email" required>
97
 
98
+ <label for="loginMobile">Your Mobile Number</label>
99
+ <input type="text" id="loginMobile" name="phone" required>
100
 
101
+ <label for="loginPassword">Your Password</label>
102
+ <input type="password" id="loginPassword" name="password" required>
103
 
104
+ <button class="confirm-button" type="submit">Login</button>
105
+ </form>
 
 
 
 
 
 
 
106
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
107
  </body>
108
  </html>