Update templates/index.html
Browse files- templates/index.html +48 -8
templates/index.html
CHANGED
@@ -72,6 +72,17 @@
|
|
72 |
.confirm-button:hover, .switch-button:hover {
|
73 |
background-color: #e65e00;
|
74 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
75 |
</style>
|
76 |
</head>
|
77 |
<body>
|
@@ -106,6 +117,20 @@
|
|
106 |
<button class="confirm-button" onclick="startLoginRecognition()">Restart Voice Input</button>
|
107 |
<button class="switch-button" onclick="showRegistrationForm()">Switch to Register</button>
|
108 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
109 |
</div>
|
110 |
|
111 |
<script>
|
@@ -228,24 +253,33 @@
|
|
228 |
let confirmation = event.results[0][0].transcript.trim().toLowerCase();
|
229 |
recognition.stop();
|
230 |
if (confirmation.includes("yes") || confirmation.includes("ok")) {
|
231 |
-
|
232 |
-
confirmDetailsAndSubmit();
|
233 |
} else {
|
234 |
captureMobile();
|
235 |
}
|
236 |
};
|
237 |
}
|
238 |
|
239 |
-
//
|
240 |
-
function
|
241 |
-
// Display confirmed details
|
242 |
const name = document.getElementById('name').value;
|
243 |
const email = document.getElementById('email').value;
|
244 |
const phone = document.getElementById('mobile').value;
|
245 |
|
246 |
-
|
|
|
|
|
|
|
|
|
|
|
247 |
|
248 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
249 |
fetch('/submit', {
|
250 |
method: 'POST',
|
251 |
headers: { 'Content-Type': 'application/json' },
|
@@ -258,7 +292,7 @@
|
|
258 |
.then(response => response.json())
|
259 |
.then(data => {
|
260 |
if (data.success) {
|
261 |
-
|
262 |
} else {
|
263 |
speak("There was an error submitting your details. Please try again.");
|
264 |
}
|
@@ -269,6 +303,12 @@
|
|
269 |
});
|
270 |
}
|
271 |
|
|
|
|
|
|
|
|
|
|
|
|
|
272 |
window.onload = function () {
|
273 |
askLoginOrRegister();
|
274 |
};
|
|
|
72 |
.confirm-button:hover, .switch-button:hover {
|
73 |
background-color: #e65e00;
|
74 |
}
|
75 |
+
.confirmation-details {
|
76 |
+
font-size: 18px;
|
77 |
+
margin-top: 20px;
|
78 |
+
color: green;
|
79 |
+
}
|
80 |
+
.success-message {
|
81 |
+
font-size: 18px;
|
82 |
+
color: green;
|
83 |
+
margin-top: 20px;
|
84 |
+
display: none;
|
85 |
+
}
|
86 |
</style>
|
87 |
</head>
|
88 |
<body>
|
|
|
117 |
<button class="confirm-button" onclick="startLoginRecognition()">Restart Voice Input</button>
|
118 |
<button class="switch-button" onclick="showRegistrationForm()">Switch to Register</button>
|
119 |
</div>
|
120 |
+
|
121 |
+
<!-- Confirmation Section -->
|
122 |
+
<div id="confirmationSection" style="display:none;">
|
123 |
+
<h3>Confirm Your Details:</h3>
|
124 |
+
<p id="confirmedName"></p>
|
125 |
+
<p id="confirmedEmail"></p>
|
126 |
+
<p id="confirmedPhone"></p>
|
127 |
+
<button class="confirm-button" onclick="submitDetails()">Confirm & Submit</button>
|
128 |
+
</div>
|
129 |
+
|
130 |
+
<!-- Success Message -->
|
131 |
+
<div class="success-message" id="successMessage">
|
132 |
+
<h3>Your details have been submitted successfully!</h3>
|
133 |
+
</div>
|
134 |
</div>
|
135 |
|
136 |
<script>
|
|
|
253 |
let confirmation = event.results[0][0].transcript.trim().toLowerCase();
|
254 |
recognition.stop();
|
255 |
if (confirmation.includes("yes") || confirmation.includes("ok")) {
|
256 |
+
showConfirmationDetails();
|
|
|
257 |
} else {
|
258 |
captureMobile();
|
259 |
}
|
260 |
};
|
261 |
}
|
262 |
|
263 |
+
// Show the confirmation details to the user
|
264 |
+
function showConfirmationDetails() {
|
|
|
265 |
const name = document.getElementById('name').value;
|
266 |
const email = document.getElementById('email').value;
|
267 |
const phone = document.getElementById('mobile').value;
|
268 |
|
269 |
+
document.getElementById('confirmedName').textContent = "Name: " + name;
|
270 |
+
document.getElementById('confirmedEmail').textContent = "Email: " + email;
|
271 |
+
document.getElementById('confirmedPhone').textContent = "Phone: " + phone;
|
272 |
+
|
273 |
+
document.getElementById('confirmationSection').style.display = 'block';
|
274 |
+
}
|
275 |
|
276 |
+
// Automatically submit to backend (Salesforce)
|
277 |
+
function submitDetails() {
|
278 |
+
const name = document.getElementById('name').value;
|
279 |
+
const email = document.getElementById('email').value;
|
280 |
+
const phone = document.getElementById('mobile').value;
|
281 |
+
|
282 |
+
// Send the details to your backend for Salesforce submission
|
283 |
fetch('/submit', {
|
284 |
method: 'POST',
|
285 |
headers: { 'Content-Type': 'application/json' },
|
|
|
292 |
.then(response => response.json())
|
293 |
.then(data => {
|
294 |
if (data.success) {
|
295 |
+
showSuccessMessage();
|
296 |
} else {
|
297 |
speak("There was an error submitting your details. Please try again.");
|
298 |
}
|
|
|
303 |
});
|
304 |
}
|
305 |
|
306 |
+
// Show the success message after submitting
|
307 |
+
function showSuccessMessage() {
|
308 |
+
document.getElementById('confirmationSection').style.display = 'none';
|
309 |
+
document.getElementById('successMessage').style.display = 'block';
|
310 |
+
}
|
311 |
+
|
312 |
window.onload = function () {
|
313 |
askLoginOrRegister();
|
314 |
};
|