lokesh341's picture
Update templates/index.html
5adc22d verified
raw
history blame
3.57 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Biryani Hub Registration</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<div class="container">
<h1>Welcome to Biryani Hub</h1>
<!-- Name Input Field -->
<label for="name">Your Name</label>
<input type="text" id="name" placeholder="Your name will appear here..." readonly>
<!-- Email Input Field -->
<label for="email">Your Email</label>
<input type="text" id="email" placeholder="Your email will appear here..." readonly>
<!-- Info Message for Listening -->
<p class="info" id="infoMessage">Listening will start automatically...</p>
<!-- Status Message -->
<p class="status" id="status">Initializing...</p>
</div>
<script>
let recognition;
let isNameCaptured = false;
let isEmailCaptured = false;
if ('webkitSpeechRecognition' in window) {
recognition = new webkitSpeechRecognition();
recognition.continuous = false;
recognition.interimResults = false;
recognition.lang = 'en-US';
} else {
alert("Speech Recognition API is not supported in this browser.");
}
function speak(text, callback) {
const speech = new SpeechSynthesisUtterance(text);
speech.onend = callback;
window.speechSynthesis.speak(speech);
}
function startProcess() {
speak("Welcome to Biryani Hub", function() {
speak("Tell me your name", startListening);
});
}
function startListening() {
const status = document.getElementById('status');
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
recognition.start();
recognition.onresult = function(event) {
let transcript = event.results[0][0].transcript.trim();
// Remove any spaces from the name input
transcript = transcript.replace(/\s+/g, '');
if (isNameCaptured && !isEmailCaptured) {
let cleanedEmail = transcript.replace(/\b(at|At|AT)\b/g, '@').replace(/\s+/g, '');
cleanedEmail = cleanedEmail.replace(/@{2,}/g, '@');
emailInput.value = cleanedEmail.charAt(0).toUpperCase() + cleanedEmail.slice(1);
status.textContent = 'Registration complete.';
speak("Registration complete. Go to the next step and take the order you want.");
setTimeout(() => location.reload(), 20000);
isEmailCaptured = true;
} else if (!isNameCaptured) {
nameInput.value = transcript;
status.textContent = 'Listening for your email...';
recognition.stop();
isNameCaptured = true;
speak("Tell me your email", function() {
recognition.start();
});
}
};
}
window.onload = function () {
setTimeout(startProcess, 4000);
};
</script>
</body>
</html>