Hugging Face's logo

Spaces:
Subbu1304
/
voicemenulogin625
Sleeping

App Files Community
1
lokesh341 commited on
Commit
b8143e8
·
verified ·
1 Parent(s): 8402302

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +52 -217
templates/index.html CHANGED
@@ -5,7 +5,6 @@
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>Biryani Hub - Register & Login</title>
8
- <h1>Welcome to Biryani Hub 🍽 🍗</h1>
9
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
10
  <style>
11
  body {
@@ -13,37 +12,45 @@
13
  background: linear-gradient(135deg, #f4c542, #ff8f6a);
14
  margin: 0;
15
  display: flex;
 
16
  justify-content: center;
17
  align-items: center;
18
  height: 100vh;
19
  text-align: center;
20
  }
 
 
 
 
 
 
 
21
  .container {
22
  background-color: #fff;
23
  padding: 40px 50px;
24
  border-radius: 10px;
25
  width: 500px;
26
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
27
- display: flex;
28
- justify-content: space-between;
29
  }
30
  .form-container {
31
- width: 48%;
32
  }
33
- h1 {
34
- font-size: 30px;
35
  font-weight: bold;
36
  color: #ff6a00;
 
37
  }
38
  label {
39
  font-size: 16px;
40
- margin-top: 20px;
41
  display: block;
42
  text-align: left;
43
  font-weight: bold;
44
  color: #333;
 
45
  }
46
- input[type="text"] {
47
  width: 100%;
48
  padding: 12px;
49
  font-size: 16px;
@@ -53,7 +60,7 @@
53
  box-sizing: border-box;
54
  background-color: #f9f9f9;
55
  }
56
- input[type="text"]:focus {
57
  border-color: #ff6a00;
58
  outline: none;
59
  }
@@ -66,99 +73,46 @@
66
  .status {
67
  font-size: 14px;
68
  color: gray;
69
- margin-top: 20px;
70
- }
71
- .header {
72
- font-size: 24px;
73
- font-weight: bold;
74
- color: #ff6a00;
75
- margin-bottom: 20px;
76
- }
77
- .form-section {
78
- padding: 20px;
79
- background-color: #f9f9f9;
80
- border-radius: 10px;
81
- }
82
- #confirmation {
83
- display: none;
84
- margin-top: 20px;
85
- background-color: #f9f9f9;
86
- padding: 20px;
87
- border-radius: 10px;
88
- }
89
- #confirmation h2 {
90
- font-size: 20px;
91
- font-weight: bold;
92
- }
93
- .confirm-details {
94
- margin: 10px 0;
95
- }
96
- .confirm-button {
97
- padding: 10px 20px;
98
- background-color: #ff6a00;
99
- color: white;
100
- border: none;
101
- border-radius: 5px;
102
- cursor: pointer;
103
- }
104
- .confirm-button:hover {
105
- background-color: #e65e00;
106
  }
107
  </style>
108
  </head>
109
  <body>
110
- <div class="container">
111
- <!-- Register Section -->
112
- <div class="form-container" id="registrationForm" style="display: none;">
113
- <h1>Welcome to Biryani Hub 🍽 🍗</h1>
114
- <div class="form-section">
115
- <h2 class="header">Register</h2>
116
- <label for="name">Your Name</label>
117
- <input type="text" id="name" placeholder="Your name will appear here..." readonly>
118
-
119
- <label for="email">Your Email</label>
120
- <input type="text" id="email" placeholder="Your email will appear here..." readonly>
121
-
122
- <label for="mobile">Your Mobile Number</label>
123
- <input type="text" id="mobile" placeholder="Your mobile number will appear here..." readonly>
124
 
125
- <p class="info" id="infoMessage">Listening 🗣🎙️...</p>
126
- <p class="status" id="status">🔊...</p>
127
- </div>
128
- </div>
 
 
 
 
129
 
130
- <!-- Login Section -->
131
- <div class="form-container" id="loginForm" style="display: none;">
132
- <h1>Welcome to Biryani Hub 🍽 🍗</h1>
133
- <div class="form-section">
134
- <h2 class="header">Login</h2>
135
- <label for="loginEmail">Your Email</label>
136
- <input type="text" id="loginEmail" placeholder="Your email will appear here..." readonly>
137
-
138
- <label for="loginMobile">Your Mobile Number</label>
139
- <input type="text" id="loginMobile" placeholder="Your mobile number will appear here..." readonly>
140
 
141
- <p class="info" id="infoMessageLogin">Listening 🗣🎙️...</p>
142
- <p class="status" id="statusLogin">🔊...</p>
143
- </div>
144
  </div>
145
  </div>
146
 
147
- <!-- Confirmation Section -->
148
- <div id="confirmation">
149
- <h2>Confirm Your Details:</h2>
150
- <p class="confirm-details"><strong>Name:</strong> <span id="confirmName"></span></p>
151
- <p class="confirm-details"><strong>Email:</strong> <span id="confirmEmail"></span></p>
152
- <p class="confirm-details"><strong>Phone:</strong> <span id="confirmPhone"></span></p>
153
- <button class="confirm-button" onclick="autoSubmit()">Confirm</button>
 
 
 
 
 
154
  </div>
155
 
156
  <script>
157
  let recognition;
158
- let nameCaptured = "";
159
- let emailCaptured = "";
160
- let mobileCaptured = "";
161
-
162
  if ('webkitSpeechRecognition' in window) {
163
  recognition = new webkitSpeechRecognition();
164
  recognition.continuous = false;
@@ -174,19 +128,18 @@
174
  window.speechSynthesis.speak(speech);
175
  }
176
 
177
- // Ask the user if they want to register or login
178
  function askLoginOrRegister() {
179
- speak("Are you a new customer or an existing customer? Say 'new' for registration or 'existing' for login.", function() {
180
  recognition.start();
181
  recognition.onresult = function(event) {
182
  let response = event.results[0][0].transcript.trim().toLowerCase();
183
  recognition.stop();
184
- if (response.includes("new")) {
185
  showRegistrationForm();
186
- } else if (response.includes("existing")) {
187
  showLoginForm();
188
  } else {
189
- speak("Sorry, I didn't understand. Please say 'new' for registration or 'existing' for login.", askLoginOrRegister);
190
  }
191
  };
192
  });
@@ -204,14 +157,12 @@
204
  speak("Please tell me your email to begin the login process.", startListeningForLoginEmail);
205
  }
206
 
207
- // Capture the name for registration
208
  function startListeningForName() {
209
  recognition.start();
210
  recognition.onresult = function(event) {
211
- nameCaptured = event.results[0][0].transcript.trim();
212
- document.getElementById('name').value = nameCaptured;
213
  recognition.stop();
214
- speak("You said " + nameCaptured + ". Is it correct?", confirmName);
215
  };
216
  }
217
 
@@ -228,14 +179,12 @@
228
  };
229
  }
230
 
231
- // Capture email for registration
232
  function startListeningForEmail() {
233
  recognition.start();
234
  recognition.onresult = function(event) {
235
- emailCaptured = event.results[0][0].transcript.trim().replace(/\bat\b/g, '@').replace(/\s+/g, '');
236
- document.getElementById('email').value = emailCaptured;
237
  recognition.stop();
238
- speak("You said " + emailCaptured + ". Is it correct?", confirmEmail);
239
  };
240
  }
241
 
@@ -252,129 +201,15 @@
252
  };
253
  }
254
 
255
- // Capture mobile number for registration
256
- function startListeningForMobile() {
257
- recognition.start();
258
- recognition.onresult = function(event) {
259
- mobileCaptured = event.results[0][0].transcript.trim().replace(/\s+/g, '');
260
- document.getElementById('mobile').value = mobileCaptured;
261
- recognition.stop();
262
- speak("You said " + mobileCaptured + ". Is it correct?", confirmMobile);
263
- };
264
- }
265
-
266
- function confirmMobile() {
267
- recognition.start();
268
- recognition.onresult = function(event) {
269
- let confirmation = event.results[0][0].transcript.trim().toLowerCase();
270
- recognition.stop();
271
- if (confirmation.includes("ok")) {
272
- autoConfirm();
273
- } else {
274
- speak("Let's try again. Tell me your mobile number.", startListeningForMobile);
275
- }
276
- };
277
- }
278
-
279
- // Confirm details and submit automatically
280
- function autoConfirm() {
281
- document.getElementById('confirmName').textContent = document.getElementById('name').value;
282
- document.getElementById('confirmEmail').textContent = document.getElementById('email').value;
283
- document.getElementById('confirmPhone').textContent = document.getElementById('mobile').value;
284
- document.getElementById('confirmation').style.display = 'block';
285
- setTimeout(autoSubmit, 3000);
286
- }
287
-
288
- // Submit details to backend
289
- function autoSubmit() {
290
- var name = document.getElementById('name').value;
291
- var email = document.getElementById('email').value;
292
- var phone = document.getElementById('mobile').value;
293
- fetch('/submit', {
294
- method: 'POST',
295
- headers: { 'Content-Type': 'application/json' },
296
- body: JSON.stringify({ name: name, email: email, phone: phone })
297
- })
298
- .then(response => response.json())
299
- .then(data => {
300
- if (data.success) {
301
- document.getElementById('status').textContent = 'Your details were submitted successfully!';
302
- document.getElementById('confirmation').style.display = 'none';
303
- speak("Your registration is complete. Thank you for registering.");
304
- setTimeout(() => location.reload(), 5000);
305
- } else {
306
- document.getElementById('status').textContent = 'There was an error submitting your details.';
307
- speak("There was an error submitting your details. Please try again.");
308
- }
309
- });
310
- }
311
-
312
- // Start login process
313
  function startListeningForLoginEmail() {
314
  recognition.start();
315
  recognition.onresult = function(event) {
316
- 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?", confirmLoginEmail);
320
  };
321
  }
322
 
323
- function confirmLoginEmail() {
324
- recognition.start();
325
- recognition.onresult = function(event) {
326
- let confirmation = event.results[0][0].transcript.trim().toLowerCase();
327
- recognition.stop();
328
- if (confirmation.includes("ok")) {
329
- speak("Great! Now, tell me your mobile number.", startListeningForLoginMobile);
330
- } else {
331
- speak("Let's try again. Tell me your email.", startListeningForLoginEmail);
332
- }
333
- };
334
- }
335
-
336
- function startListeningForLoginMobile() {
337
- recognition.start();
338
- recognition.onresult = function(event) {
339
- mobileCaptured = event.results[0][0].transcript.trim().replace(/\s+/g, '');
340
- document.getElementById('loginMobile').value = mobileCaptured;
341
- recognition.stop();
342
- speak("You said " + mobileCaptured + ". Is it correct?", confirmLoginMobile);
343
- };
344
- }
345
-
346
- function confirmLoginMobile() {
347
- recognition.start();
348
- recognition.onresult = function(event) {
349
- let confirmation = event.results[0][0].transcript.trim().toLowerCase();
350
- recognition.stop();
351
- if (confirmation.includes("ok")) {
352
- submitLogin();
353
- } else {
354
- speak("Let's try again. Tell me your mobile number.", startListeningForLoginMobile);
355
- }
356
- };
357
- }
358
-
359
- // Submit login details to backend
360
- function submitLogin() {
361
- let email = document.getElementById('loginEmail').value;
362
- let mobile = document.getElementById('loginMobile').value;
363
- fetch('/submit_login', {
364
- method: 'POST',
365
- headers: { 'Content-Type': 'application/json' },
366
- body: JSON.stringify({ email: email, mobile: mobile })
367
- })
368
- .then(response => response.json())
369
- .then(data => {
370
- speak("Login successful. Welcome back!");
371
- // Redirect or perform other actions
372
- })
373
- .catch(error => {
374
- speak("There was an error with your login. Please try again.");
375
- });
376
- }
377
-
378
  window.onload = function () {
379
  askLoginOrRegister();
380
  };
 
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
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 {
 
12
  background: linear-gradient(135deg, #f4c542, #ff8f6a);
13
  margin: 0;
14
  display: flex;
15
+ flex-direction: column;
16
  justify-content: center;
17
  align-items: center;
18
  height: 100vh;
19
  text-align: center;
20
  }
21
+ .header-title {
22
+ font-size: 40px;
23
+ font-weight: bold;
24
+ color: white;
25
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
26
+ margin-bottom: 20px;
27
+ }
28
  .container {
29
  background-color: #fff;
30
  padding: 40px 50px;
31
  border-radius: 10px;
32
  width: 500px;
33
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
34
+ display: none; /* Initially hidden, will show based on selection */
 
35
  }
36
  .form-container {
37
+ width: 100%;
38
  }
39
+ h2 {
40
+ font-size: 24px;
41
  font-weight: bold;
42
  color: #ff6a00;
43
+ margin-bottom: 20px;
44
  }
45
  label {
46
  font-size: 16px;
 
47
  display: block;
48
  text-align: left;
49
  font-weight: bold;
50
  color: #333;
51
+ margin-top: 10px;
52
  }
53
+ input {
54
  width: 100%;
55
  padding: 12px;
56
  font-size: 16px;
 
60
  box-sizing: border-box;
61
  background-color: #f9f9f9;
62
  }
63
+ input:focus {
64
  border-color: #ff6a00;
65
  outline: none;
66
  }
 
73
  .status {
74
  font-size: 14px;
75
  color: gray;
76
+ margin-top: 10px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
77
  }
78
  </style>
79
  </head>
80
  <body>
81
+ <h1 class="header-title">Welcome to Biryani Hub 🍽</h1>
 
 
 
 
 
 
 
 
 
 
 
 
 
82
 
83
+ <div class="container" id="registrationForm">
84
+ <div class="form-container">
85
+ <h2>Register</h2>
86
+ <label for="name">Your Name</label>
87
+ <input type="text" id="name" placeholder="Your name will appear here..." readonly>
88
+
89
+ <label for="email">Your Email</label>
90
+ <input type="text" id="email" placeholder="Your email will appear here..." readonly>
91
 
92
+ <label for="mobile">Your Mobile Number</label>
93
+ <input type="text" id="mobile" placeholder="Your mobile number will appear here..." readonly>
 
 
 
 
 
 
 
 
94
 
95
+ <p class="info" id="infoMessage">Listening 🗣🎙️...</p>
96
+ <p class="status" id="status">🔊...</p>
 
97
  </div>
98
  </div>
99
 
100
+ <div class="container" id="loginForm">
101
+ <div class="form-container">
102
+ <h2>Login</h2>
103
+ <label for="loginEmail">Your Email</label>
104
+ <input type="text" id="loginEmail" placeholder="Your email will appear here..." readonly>
105
+
106
+ <label for="loginMobile">Your Mobile Number</label>
107
+ <input type="text" id="loginMobile" placeholder="Your mobile number will appear here..." readonly>
108
+
109
+ <p class="info" id="infoMessageLogin">Listening 🗣🎙️...</p>
110
+ <p class="status" id="statusLogin">🔊...</p>
111
+ </div>
112
  </div>
113
 
114
  <script>
115
  let recognition;
 
 
 
 
116
  if ('webkitSpeechRecognition' in window) {
117
  recognition = new webkitSpeechRecognition();
118
  recognition.continuous = false;
 
128
  window.speechSynthesis.speak(speech);
129
  }
130
 
 
131
  function askLoginOrRegister() {
132
+ speak("Welcome to Biryani Hub. Are you a new customer or an existing customer? Say 'Register' for registration or 'Login' to log in.", function() {
133
  recognition.start();
134
  recognition.onresult = function(event) {
135
  let response = event.results[0][0].transcript.trim().toLowerCase();
136
  recognition.stop();
137
+ if (response.includes("register")) {
138
  showRegistrationForm();
139
+ } else if (response.includes("login")) {
140
  showLoginForm();
141
  } else {
142
+ speak("Sorry, I didn't understand. Please say 'Register' for registration or 'Login' to log in.", askLoginOrRegister);
143
  }
144
  };
145
  });
 
157
  speak("Please tell me your email to begin the login process.", startListeningForLoginEmail);
158
  }
159
 
 
160
  function startListeningForName() {
161
  recognition.start();
162
  recognition.onresult = function(event) {
163
+ document.getElementById('name').value = event.results[0][0].transcript.trim();
 
164
  recognition.stop();
165
+ speak("Your name is " + document.getElementById('name').value + ". Is it correct?", confirmName);
166
  };
167
  }
168
 
 
179
  };
180
  }
181
 
 
182
  function startListeningForEmail() {
183
  recognition.start();
184
  recognition.onresult = function(event) {
185
+ document.getElementById('email').value = event.results[0][0].transcript.trim().replace(/\bat\b/g, '@').replace(/\s+/g, '');
 
186
  recognition.stop();
187
+ speak("You said " + document.getElementById('email').value + ". Is it correct?", confirmEmail);
188
  };
189
  }
190
 
 
201
  };
202
  }
203
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
204
  function startListeningForLoginEmail() {
205
  recognition.start();
206
  recognition.onresult = function(event) {
207
+ document.getElementById('loginEmail').value = event.results[0][0].transcript.trim().replace(/\bat\b/g, '@').replace(/\s+/g, '');
 
208
  recognition.stop();
209
+ speak("You said " + document.getElementById('loginEmail').value + ". Is it correct?", confirmLoginEmail);
210
  };
211
  }
212
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
213
  window.onload = function () {
214
  askLoginOrRegister();
215
  };