Hugging Face's logo

Spaces:
geethareddy
/
voicemenuspe
Running

App Files Community
lokesh341 commited on
Commit
44553b9
·
verified ·
1 Parent(s): 4c51ad6

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +159 -109
templates/index.html CHANGED
@@ -4,51 +4,77 @@
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Welcome to Biryani Hub</title>
 
8
  <style>
9
  body {
10
- font-family: Arial, sans-serif;
11
  background: linear-gradient(135deg, #f4c542, #ff8f6a);
 
12
  display: flex;
13
  justify-content: center;
14
  align-items: center;
15
  height: 100vh;
16
- margin: 0;
17
  }
18
  .container {
19
  background-color: #fff;
20
  padding: 40px 50px;
21
  border-radius: 10px;
22
- text-align: center;
23
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
24
  }
25
  h1 {
26
- font-size: 32px;
27
  color: #ff6a00;
28
  }
29
- p {
30
- font-size: 20px;
 
 
31
  color: #333;
 
 
 
 
 
 
 
 
 
 
 
32
  }
33
- .category-buttons {
34
- margin-top: 30px;
 
35
  }
36
- .category-buttons button {
37
- padding: 15px 30px;
 
 
 
 
 
 
 
 
 
 
 
38
  background-color: #ff6a00;
39
  color: white;
40
  border: none;
41
  border-radius: 5px;
42
  cursor: pointer;
43
- font-size: 18px;
44
  }
45
- .category-buttons button:hover {
46
- background-color: #e65c00;
47
  }
48
  </style>
49
  </head>
50
  <body>
51
-
52
  <!-- Welcome Page -->
53
  <div class="container" id="welcomePage">
54
  <h1>Welcome to Biriyani Hub 🍽</h1>
@@ -83,20 +109,6 @@
83
  <p class="status" id="loginStatus">Listening... 🗣</p>
84
  </div>
85
 
86
- <!-- Confirmation Page -->
87
- <div class="container" id="confirmationPage" style="display: none;">
88
- <h2>Confirm Your Details</h2>
89
- <div class="confirm-details">
90
- <p class="details"><strong>Name:</strong> <span id="confirmName"></span></p>
91
- <p class="details"><strong>Email:</strong> <span id="confirmEmail"></span></p>
92
- <p class="details"><strong>Phone:</strong> <span id="confirmPhone"></span></p>
93
- </div>
94
- </div>
95
-
96
- <div id="statusMessage" style="display: none;">
97
- <h2 id="statusText"></h2>
98
- </div>
99
-
100
  <script>
101
  let recognition;
102
  if ('webkitSpeechRecognition' in window) {
@@ -108,26 +120,26 @@
108
  alert("Speech Recognition API is not supported in this browser.");
109
  }
110
 
111
- // This function will speak the text and trigger the callback after it finishes
112
  function speak(text, callback) {
113
  const speech = new SpeechSynthesisUtterance(text);
114
  speech.onend = callback;
115
  window.speechSynthesis.speak(speech);
116
  }
117
 
118
- // Function to ask whether the user is new or existing
119
  function askLoginOrRegister() {
120
- speak("Are you a new customer or an existing customer? Say 'new' to register or 'existing' to login.", function () {
121
  recognition.start();
122
  recognition.onresult = function (event) {
123
  let response = event.results[0][0].transcript.trim().toLowerCase();
124
  recognition.stop();
125
  if (response.includes("new")) {
126
  showRegistrationForm();
127
- captureEmail();
128
  } else if (response.includes("existing")) {
129
  showLoginForm();
130
- captureEmail();
131
  } else {
132
  speak("I didn't understand. Please say 'new' for registration or 'existing' for login.", askLoginOrRegister);
133
  }
@@ -135,107 +147,126 @@
135
  });
136
  }
137
 
138
- // Function to capture the email
139
- function captureEmail() {
140
- speak("Please say your email address.", function () {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
141
  recognition.start();
142
  recognition.onresult = function (event) {
143
- let emailCaptured = event.results[0][0].transcript.trim();
144
- document.getElementById('email').value = emailCaptured;
145
  recognition.stop();
146
- if (!isValidEmail(emailCaptured)) {
147
- speak("The email address is invalid. Please provide a valid email like example@gmail.com.", captureEmail);
148
- } else {
149
- checkEmailExists(emailCaptured);
150
- }
151
  };
152
  });
153
  }
154
 
155
- // Function to validate email format
156
- function isValidEmail(email) {
157
- return /\S+@\S+\.\S+/.test(email);
158
- }
159
-
160
- // Simulate email existence check (this is where you could call your server)
161
- function checkEmailExists(email) {
162
- const existingEmails = ["existing@domain.com"]; // Replace with actual check
163
- if (existingEmails.includes(email)) {
164
- speak("Welcome back! You are logged in.");
165
- document.getElementById('loginForm').style.display = 'block';
166
- document.getElementById('registrationForm').style.display = 'none';
167
- } else {
168
- speak("You are a new customer. Please proceed with registration.");
169
- showRegistrationForm();
170
- }
171
  }
172
 
173
- // Show registration form
174
- function showRegistrationForm() {
175
- document.getElementById('registrationForm').style.display = 'block';
176
- document.getElementById('loginForm').style.display = 'none';
 
 
 
 
 
 
 
 
 
177
  }
178
 
179
- // Show login form
180
- function showLoginForm() {
181
- document.getElementById('loginForm').style.display = 'block';
182
- document.getElementById('registrationForm').style.display = 'none';
 
 
 
 
 
 
 
 
183
  }
184
 
185
- // Function to capture mobile number
186
  function captureMobile() {
187
- speak("Please say your 12-digit mobile number.", function () {
188
  recognition.start();
189
  recognition.onresult = function (event) {
190
  let mobileCaptured = event.results[0][0].transcript.trim().replace(/\s+/g, '');
191
  document.getElementById('mobile').value = mobileCaptured;
192
  recognition.stop();
193
- if (!isValidPhone(mobileCaptured)) {
194
- speak("The mobile number is invalid. Please provide exactly 12 digits.", captureMobile);
195
- } else {
196
- speak("You said " + mobileCaptured + ". Is it correct?", function () {
197
- confirmMobile(mobileCaptured);
198
- });
199
- }
200
  };
201
  });
202
  }
203
 
204
- // Function to validate mobile phone number
205
- function isValidPhone(phone) {
206
- return /^\d{12}$/.test(phone);
207
- }
208
-
209
- // Function to confirm mobile number
210
  function confirmMobile(mobileCaptured) {
211
  recognition.start();
212
  recognition.onresult = function (event) {
213
  let confirmation = event.results[0][0].transcript.trim().toLowerCase();
214
  recognition.stop();
215
- if (confirmation.includes("yes") || confirmation.includes("ok")) {
216
- showConfirmationPage();
217
  } else {
218
  captureMobile();
219
  }
220
  };
221
  }
222
 
223
- // Function to show confirmation page
224
- function showConfirmationPage() {
225
- const name = document.getElementById('name').value;
226
- const email = document.getElementById('email').value;
227
- const phone = document.getElementById('mobile').value;
228
- document.getElementById('confirmName').textContent = name;
229
- document.getElementById('confirmEmail').textContent = email;
230
- document.getElementById('confirmPhone').textContent = phone;
231
- setTimeout(submitRegistration, 6000);
232
  }
233
 
234
- // Function to simulate registration submission (you can replace this with actual submission)
235
  function submitRegistration() {
236
- const name = document.getElementById('name').value;
237
- const email = document.getElementById('email').value;
238
- const phone = document.getElementById('mobile').value;
 
 
 
 
 
 
 
 
239
  fetch('/submit', {
240
  method: 'POST',
241
  headers: { 'Content-Type': 'application/json' },
@@ -244,22 +275,41 @@
244
  .then(response => response.json())
245
  .then(data => {
246
  if (data.success) {
247
- document.getElementById('statusText').textContent = `Thank you for registering, ${name}!`;
248
- document.getElementById('statusMessage').style.display = 'block';
249
- setTimeout(() => {
250
- document.getElementById('statusText').textContent = 'Submitted Successfully!';
 
 
 
251
  setTimeout(() => {
252
- window.location.reload();
253
- }, 5000);
254
- }, 6000);
 
 
 
255
  } else {
256
- document.getElementById('statusText').textContent = 'There was an error submitting your details. Please try again.';
257
- document.getElementById('statusMessage').style.display = 'block';
 
 
 
 
 
 
258
  }
259
  })
260
  .catch(error => {
261
- document.getElementById('statusText').textContent = 'An error occurred. Please try again.';
262
- document.getElementById('statusMessage').style.display = 'block';
 
 
 
 
 
 
 
263
  });
264
  }
265
 
 
4
  <head>
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 {
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
  </style>
76
  </head>
77
  <body>
 
78
  <!-- Welcome Page -->
79
  <div class="container" id="welcomePage">
80
  <h1>Welcome to Biriyani Hub 🍽</h1>
 
109
  <p class="status" id="loginStatus">Listening... 🗣</p>
110
  </div>
111
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
112
  <script>
113
  let recognition;
114
  if ('webkitSpeechRecognition' in window) {
 
120
  alert("Speech Recognition API is not supported in this browser.");
121
  }
122
 
123
+ // Speak function to read out messages
124
  function speak(text, callback) {
125
  const speech = new SpeechSynthesisUtterance(text);
126
  speech.onend = callback;
127
  window.speechSynthesis.speak(speech);
128
  }
129
 
130
+ // Ask if the user is new or existing
131
  function askLoginOrRegister() {
132
+ speak("Welcome to Biryani Hub. Are you a new customer or an existing customer? Say 'new' to register or 'existing' to login.", 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("new")) {
138
  showRegistrationForm();
139
+ captureName();
140
  } else if (response.includes("existing")) {
141
  showLoginForm();
142
+ captureLoginDetails();
143
  } else {
144
  speak("I didn't understand. Please say 'new' for registration or 'existing' for login.", askLoginOrRegister);
145
  }
 
147
  });
148
  }
149
 
150
+ // Show Registration form
151
+ function showRegistrationForm() {
152
+ document.getElementById('welcomePage').style.display = 'none';
153
+ document.getElementById('registrationForm').style.display = 'block';
154
+ document.getElementById('loginForm').style.display = 'none';
155
+ }
156
+
157
+ // Show Login form
158
+ function showLoginForm() {
159
+ document.getElementById('welcomePage').style.display = 'none';
160
+ document.getElementById('registrationForm').style.display = 'none';
161
+ document.getElementById('loginForm').style.display = 'block';
162
+ }
163
+
164
+ // Capture Name
165
+ function captureName() {
166
+ speak("Please say your name.", function () {
167
  recognition.start();
168
  recognition.onresult = function (event) {
169
+ let nameCaptured = event.results[0][0].transcript.trim();
170
+ document.getElementById('name').value = nameCaptured;
171
  recognition.stop();
172
+ speak("You said " + nameCaptured + ". Is it correct?", function () {
173
+ confirmName(nameCaptured);
174
+ });
 
 
175
  };
176
  });
177
  }
178
 
179
+ // Confirm Name
180
+ function confirmName(nameCaptured) {
181
+ recognition.start();
182
+ recognition.onresult = function (event) {
183
+ let confirmation = event.results[0][0].transcript.trim().toLowerCase();
184
+ recognition.stop();
185
+ if (isConfirmation(confirmation)) {
186
+ captureEmail();
187
+ } else {
188
+ captureName();
189
+ }
190
+ };
 
 
 
 
191
  }
192
 
193
+ // Capture Email
194
+ function captureEmail() {
195
+ speak("Now, say your email.", function () {
196
+ recognition.start();
197
+ recognition.onresult = function (event) {
198
+ let emailCaptured = event.results[0][0].transcript.trim().replace(/\bat\b/g, '@').replace(/\s+/g, '');
199
+ document.getElementById('email').value = emailCaptured;
200
+ recognition.stop();
201
+ speak("You said " + emailCaptured + ". Is it correct?", function () {
202
+ confirmEmail(emailCaptured);
203
+ });
204
+ };
205
+ });
206
  }
207
 
208
+ // Confirm Email
209
+ function confirmEmail(emailCaptured) {
210
+ recognition.start();
211
+ recognition.onresult = function (event) {
212
+ let confirmation = event.results[0][0].transcript.trim().toLowerCase();
213
+ recognition.stop();
214
+ if (isConfirmation(confirmation)) {
215
+ captureMobile();
216
+ } else {
217
+ captureEmail();
218
+ }
219
+ };
220
  }
221
 
222
+ // Capture Mobile
223
  function captureMobile() {
224
+ speak("Now, say your mobile number.", function () {
225
  recognition.start();
226
  recognition.onresult = function (event) {
227
  let mobileCaptured = event.results[0][0].transcript.trim().replace(/\s+/g, '');
228
  document.getElementById('mobile').value = mobileCaptured;
229
  recognition.stop();
230
+ speak("You said " + mobileCaptured + ". Is it correct?", function () {
231
+ confirmMobile(mobileCaptured);
232
+ });
 
 
 
 
233
  };
234
  });
235
  }
236
 
237
+ // Confirm Mobile
 
 
 
 
 
238
  function confirmMobile(mobileCaptured) {
239
  recognition.start();
240
  recognition.onresult = function (event) {
241
  let confirmation = event.results[0][0].transcript.trim().toLowerCase();
242
  recognition.stop();
243
+ if (isConfirmation(confirmation)) {
244
+ submitRegistration();
245
  } else {
246
  captureMobile();
247
  }
248
  };
249
  }
250
 
251
+ // Check for confirmation responses
252
+ function isConfirmation(confirmation) {
253
+ const validResponses = ["yes", "ok", "yeah", "correct", "yep"];
254
+ return validResponses.some(response => confirmation.includes(response));
 
 
 
 
 
255
  }
256
 
257
+ // Submit Registration details
258
  function submitRegistration() {
259
+ const name = document.getElementById('name')?.value.trim();
260
+ const email = document.getElementById('email')?.value.trim();
261
+ const phone = document.getElementById('mobile')?.value.trim();
262
+
263
+ if (!name || !email || !phone) {
264
+ alert("Please provide all required details.");
265
+ return;
266
+ }
267
+
268
+ console.log("Sending data:", { name, email, phone });
269
+
270
  fetch('/submit', {
271
  method: 'POST',
272
  headers: { 'Content-Type': 'application/json' },
 
275
  .then(response => response.json())
276
  .then(data => {
277
  if (data.success) {
278
+ speak(`Thank you for registering, ${name}!`);
279
+ let statusText = document.getElementById('statusText');
280
+ let statusMessage = document.getElementById('statusMessage');
281
+
282
+ if (statusText && statusMessage) {
283
+ statusText.textContent = `Thank you for registering, ${name}!`;
284
+ statusMessage.style.display = 'block';
285
  setTimeout(() => {
286
+ statusText.textContent = 'Submitted Successfully!';
287
+ setTimeout(() => {
288
+ window.location.reload();
289
+ }, 5000);
290
+ }, 6000);
291
+ }
292
  } else {
293
+ speak("There was an error submitting your details. Please try again.");
294
+ let statusText = document.getElementById('statusText');
295
+ let statusMessage = document.getElementById('statusMessage');
296
+
297
+ if (statusText && statusMessage) {
298
+ statusText.textContent = 'There was an error submitting your details. Please try again.';
299
+ statusMessage.style.display = 'block';
300
+ }
301
  }
302
  })
303
  .catch(error => {
304
+ console.error("Fetch Error:", error);
305
+ speak("An error occurred. Please try again.");
306
+ let statusText = document.getElementById('statusText');
307
+ let statusMessage = document.getElementById('statusMessage');
308
+
309
+ if (statusText && statusMessage) {
310
+ statusText.textContent = 'An error occurred. Please try again.';
311
+ statusMessage.style.display = 'block';
312
+ }
313
  });
314
  }
315