Hugging Face's logo

Spaces:
lokesh341
/
voicemenuwithregisterandloginnnwithmenu
Sleeping

App Files Community
lokesh341 commited on
Commit
14d9093
·
verified ·
1 Parent(s): 3afd166

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +43 -3
templates/index.html CHANGED
@@ -72,15 +72,27 @@
72
  .confirm-button:hover, .switch-button:hover {
73
  background-color: #e65e00;
74
  }
 
 
 
 
 
 
 
 
 
 
75
  </style>
76
  </head>
77
  <body>
 
78
  <div class="container" id="welcomePage">
79
  <h1>Welcome to Biriyani Hub 🍽</h1>
80
  <h2 class="info" id="infoMessage">Welcome! Are you a new customer or an existing one?</h2>
81
  <p class="status" id="status">🔊 Please say 'new' to register or 'existing' to login.</p>
82
  </div>
83
 
 
84
  <div class="container" id="registrationForm" style="display: none;">
85
  <h2>Register</h2>
86
  <label for="name">Your Name</label>
@@ -95,6 +107,7 @@
95
  <p class="status" id="registrationStatus">Listening... 🗣</p>
96
  </div>
97
 
 
98
  <div class="container" id="loginForm" style="display: none;">
99
  <h2>Login</h2>
100
  <label for="loginEmail">Your Email</label>
@@ -106,6 +119,17 @@
106
  <p class="status" id="loginStatus">Listening... 🗣</p>
107
  </div>
108
 
 
 
 
 
 
 
 
 
 
 
 
109
  <div id="statusMessage" style="display: none;">
110
  <h2 id="statusText"></h2>
111
  </div>
@@ -150,6 +174,7 @@
150
  document.getElementById('welcomePage').style.display = 'none';
151
  document.getElementById('registrationForm').style.display = 'block';
152
  document.getElementById('loginForm').style.display = 'none';
 
153
  document.getElementById('statusMessage').style.display = 'none';
154
  }
155
 
@@ -157,6 +182,7 @@
157
  document.getElementById('welcomePage').style.display = 'none';
158
  document.getElementById('registrationForm').style.display = 'none';
159
  document.getElementById('loginForm').style.display = 'block';
 
160
  document.getElementById('statusMessage').style.display = 'none';
161
  }
162
 
@@ -234,20 +260,34 @@
234
  let confirmation = event.results[0][0].transcript.trim().toLowerCase();
235
  recognition.stop();
236
  if (confirmation.includes("yes") || confirmation.includes("ok")) {
237
- // Automatically submit details to Salesforce after confirmation
238
- submitRegistration();
239
  } else {
240
  captureMobile();
241
  }
242
  };
243
  }
244
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
245
  function submitRegistration() {
246
  const name = document.getElementById('name').value;
247
  const email = document.getElementById('email').value;
248
  const phone = document.getElementById('mobile').value;
249
 
250
- // Make a POST request to Salesforce (simulated)
251
  fetch('/submit', {
252
  method: 'POST',
253
  headers: { 'Content-Type': 'application/json' },
 
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>
 
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>
 
119
  <p class="status" id="loginStatus">Listening... 🗣</p>
120
  </div>
121
 
122
+ <!-- Confirmation Page (New) -->
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 and Submit</button>
131
+ </div>
132
+
133
  <div id="statusMessage" style="display: none;">
134
  <h2 id="statusText"></h2>
135
  </div>
 
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
 
 
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
 
 
260
  let confirmation = event.results[0][0].transcript.trim().toLowerCase();
261
  recognition.stop();
262
  if (confirmation.includes("yes") || confirmation.includes("ok")) {
263
+ // Show the confirmation page with captured details
264
+ showConfirmationPage();
265
  } else {
266
  captureMobile();
267
  }
268
  };
269
  }
270
 
271
+ function showConfirmationPage() {
272
+ const name = document.getElementById('name').value;
273
+ const email = document.getElementById('email').value;
274
+ const phone = document.getElementById('mobile').value;
275
+
276
+ document.getElementById('confirmName').textContent = name;
277
+ document.getElementById('confirmEmail').textContent = email;
278
+ document.getElementById('confirmPhone').textContent = phone;
279
+
280
+ // Show confirmation page
281
+ document.getElementById('registrationForm').style.display = 'none';
282
+ document.getElementById('confirmationPage').style.display = 'block';
283
+ }
284
+
285
  function submitRegistration() {
286
  const name = document.getElementById('name').value;
287
  const email = document.getElementById('email').value;
288
  const phone = document.getElementById('mobile').value;
289
 
290
+ // Simulate submission to Salesforce
291
  fetch('/submit', {
292
  method: 'POST',
293
  headers: { 'Content-Type': 'application/json' },