Hugging Face's logo

Spaces:
Subbu1304
/
logindirectmenuworking
Sleeping

App Files Community
geethareddy commited on
Commit
0d73c11
·
verified ·
1 Parent(s): b06368e

Templates/index.html

Browse files
Files changed (1) hide show
  1. Templates/index.html +0 -393
Templates/index.html DELETED
@@ -1,393 +0,0 @@
1
-
2
- <!DOCTYPE html>
3
- <html lang="en">
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
- .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
- </div>
131
-
132
- <div id="statusMessage" style="display: none;">
133
- <h2 id="statusText"></h2>
134
- </div>
135
-
136
- <script>
137
- let recognition;
138
- if ('webkitSpeechRecognition' in window) {
139
- recognition = new webkitSpeechRecognition();
140
- recognition.continuous = false;
141
- recognition.interimResults = false;
142
- recognition.lang = 'en-US';
143
- } else {
144
- alert("Speech Recognition API is not supported in this browser.");
145
- }
146
-
147
- function speak(text, callback) {
148
- const speech = new SpeechSynthesisUtterance(text);
149
- speech.onend = callback;
150
- window.speechSynthesis.speak(speech);
151
- }
152
-
153
- function askLoginOrRegister() {
154
- speak("Are you a new customer or an existing customer? Say 'new' to register or 'existing' to login.", function () {
155
- recognition.start();
156
- recognition.onresult = function (event) {
157
- let response = event.results[0][0].transcript.trim().toLowerCase();
158
- recognition.stop();
159
- if (response.includes("new")) {
160
- showRegistrationForm();
161
- captureName();
162
- } else if (response.includes("existing")) {
163
- showLoginForm();
164
- captureLoginDetails();
165
- } else {
166
- speak("I didn't understand. Please say 'new' for registration or 'existing' for login.", askLoginOrRegister);
167
- }
168
- };
169
- });
170
- }
171
-
172
- function showRegistrationForm() {
173
- document.getElementById('welcomePage').style.display = 'none';
174
- document.getElementById('registrationForm').style.display = 'block';
175
- document.getElementById('loginForm').style.display = 'none';
176
- document.getElementById('confirmationPage').style.display = 'none';
177
- document.getElementById('statusMessage').style.display = 'none';
178
- }
179
-
180
- function showLoginForm() {
181
- document.getElementById('welcomePage').style.display = 'none';
182
- document.getElementById('registrationForm').style.display = 'none';
183
- document.getElementById('loginForm').style.display = 'block';
184
- document.getElementById('confirmationPage').style.display = 'none';
185
- document.getElementById('statusMessage').style.display = 'none';
186
- }
187
-
188
- function captureName() {
189
- speak("Please say your name.", function () {
190
- recognition.start();
191
- recognition.onresult = function (event) {
192
- let nameCaptured = event.results[0][0].transcript.trim();
193
- document.getElementById('name').value = nameCaptured;
194
- recognition.stop();
195
- speak("You said " + nameCaptured + ". Is it correct?", function () {
196
- confirmName(nameCaptured);
197
- });
198
- };
199
- });
200
- }
201
-
202
- function confirmName(nameCaptured) {
203
- recognition.start();
204
- recognition.onresult = function (event) {
205
- let confirmation = event.results[0][0].transcript.trim().toLowerCase();
206
- recognition.stop();
207
- if (confirmation.includes("yes") || confirmation.includes("ok")) {
208
- captureEmail();
209
- } else {
210
- captureName();
211
- }
212
- };
213
- }
214
-
215
- function captureEmail() {
216
- speak("Now, say your email.", function () {
217
- recognition.start();
218
- recognition.onresult = function (event) {
219
- let emailCaptured = event.results[0][0].transcript.trim().replace(/\bat\b/g, '@').replace(/\s+/g, '');
220
- document.getElementById('email').value = emailCaptured;
221
- recognition.stop();
222
- speak("You said " + emailCaptured + ". Is it correct?", function () {
223
- confirmEmail(emailCaptured);
224
- });
225
- };
226
- });
227
- }
228
-
229
- function confirmEmail(emailCaptured) {
230
- recognition.start();
231
- recognition.onresult = function (event) {
232
- let confirmation = event.results[0][0].transcript.trim().toLowerCase();
233
- recognition.stop();
234
- if (confirmation.includes("yes") || confirmation.includes("ok")) {
235
- captureMobile();
236
- } else {
237
- captureEmail();
238
- }
239
- };
240
- }
241
-
242
- function captureMobile() {
243
- speak("Now, say your mobile number.", function () {
244
- recognition.start();
245
- recognition.onresult = function (event) {
246
- let mobileCaptured = event.results[0][0].transcript.trim().replace(/\s+/g, '');
247
- document.getElementById('mobile').value = mobileCaptured;
248
- recognition.stop();
249
- speak("You said " + mobileCaptured + ". Is it correct?", function () {
250
- confirmMobile(mobileCaptured);
251
- });
252
- };
253
- });
254
- }
255
-
256
- function confirmMobile(mobileCaptured) {
257
- recognition.start();
258
- recognition.onresult = function (event) {
259
- let confirmation = event.results[0][0].transcript.trim().toLowerCase();
260
- recognition.stop();
261
- if (confirmation.includes("yes") || confirmation.includes("ok")) {
262
- // Show confirmation page with details
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
-
275
- document.getElementById('confirmName').textContent = name;
276
- document.getElementById('confirmEmail').textContent = email;
277
- document.getElementById('confirmPhone').textContent = phone;
278
-
279
- // Automatically submit the details after a delay
280
- setTimeout(submitRegistration, 6000); // 6 seconds delay
281
- }
282
-
283
- function submitRegistration() {
284
- const name = document.getElementById('name').value;
285
- const email = document.getElementById('email').value;
286
- const phone = document.getElementById('mobile').value;
287
-
288
- // Simulate submission to Salesforce
289
- fetch('/submit', {
290
- method: 'POST',
291
- headers: { 'Content-Type': 'application/json' },
292
- body: JSON.stringify({ name, email, phone })
293
- })
294
- .then(response => response.json())
295
- .then(data => {
296
- if (data.success) {
297
- document.getElementById('statusText').textContent = `Thank you for registering, ${name}!`;
298
- document.getElementById('statusMessage').style.display = 'block';
299
-
300
- // Show 'Submitted Successfully' after 6 seconds, then refresh the page after 5 seconds
301
- setTimeout(() => {
302
- document.getElementById('statusText').textContent = 'Submitted Successfully!';
303
- setTimeout(() => {
304
- window.location.reload(); // Refresh after 5 seconds
305
- }, 5000);
306
- }, 6000);
307
- } else {
308
- document.getElementById('statusText').textContent = 'There was an error submitting your details. Please try again.';
309
- document.getElementById('statusMessage').style.display = 'block';
310
- }
311
- })
312
- .catch(error => {
313
- document.getElementById('statusText').textContent = 'An error occurred. Please try again.';
314
- document.getElementById('statusMessage').style.display = 'block';
315
- });
316
- }
317
-
318
- function captureLoginDetails() {
319
- speak("Please say your email for login.", function () {
320
- recognition.start();
321
- recognition.onresult = function (event) {
322
- let emailCaptured = event.results[0][0].transcript.trim().replace(/\bat\b/g, '@').replace(/\s+/g, '');
323
- document.getElementById('loginEmail').value = emailCaptured;
324
- recognition.stop();
325
- speak("You said " + emailCaptured + ". Is it correct?", function () {
326
- confirmLoginEmail(emailCaptured);
327
- });
328
- };
329
- });
330
- }
331
-
332
- function confirmLoginEmail(emailCaptured) {
333
- recognition.start();
334
- recognition.onresult = function (event) {
335
- let confirmation = event.results[0][0].transcript.trim().toLowerCase();
336
- recognition.stop();
337
- if (confirmation.includes("yes") || confirmation.includes("ok")) {
338
- captureLoginMobile();
339
- } else {
340
- captureLoginDetails();
341
- }
342
- };
343
- }
344
-
345
- function captureLoginMobile() {
346
- speak("Now, say your mobile number.", function () {
347
- recognition.start();
348
- recognition.onresult = function (event) {
349
- let mobileCaptured = event.results[0][0].transcript.trim().replace(/\s+/g, '');
350
- document.getElementById('loginMobile').value = mobileCaptured;
351
- recognition.stop();
352
- speak("You said " + mobileCaptured + ". Is it correct?", function () {
353
- confirmLoginMobile(mobileCaptured);
354
- });
355
- };
356
- });
357
- }
358
-
359
- function confirmLoginMobile(mobileCaptured) {
360
- recognition.start();
361
- recognition.onresult = function (event) {
362
- let confirmation = event.results[0][0].transcript.trim().toLowerCase();
363
- recognition.stop();
364
- if (confirmation.includes("yes") || confirmation.includes("ok")) {
365
- submitLogin();
366
- } else {
367
- captureLoginMobile();
368
- }
369
- };
370
- }
371
-
372
- function submitLogin() {
373
- const loginEmail = document.getElementById('loginEmail').value;
374
- const loginMobile = document.getElementById('loginMobile').value;
375
-
376
- // Simulate login check
377
- if (loginEmail && loginMobile) {
378
- document.getElementById('statusText').textContent = 'Login successful! Redirecting...';
379
- document.getElementById('statusMessage').style.display = 'block';
380
- setTimeout(() => {
381
- window.location.href = '/dashboard'; // Redirect to dashboard
382
- }, 3000);
383
- } else {
384
- speak("Please enter valid login details.");
385
- }
386
- }
387
-
388
- window.onload = function () {
389
- askLoginOrRegister();
390
- };
391
- </script>
392
- </body>
393
- </html>