voicemenuwithregisterandloginnnwithmenuuuu

Sleeping

App Files Files Community

voicemenuwithregisterandloginnnwithmenuuuu / templates /index.html

lokesh341

Update templates/index.html

d4eb4c5 verified about 1 month ago

raw

history blame

5.41 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">
	<style>
	body {
	font-family: 'Roboto', sans-serif;
	background: linear-gradient(135deg, #f4c542, #ff8f6a); /* Light gradient background */
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	text-align: center;
	}
	.container {
	background: white;
	padding: 40px 50px;
	border-radius: 10px;
	width: 400px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	}
	h1 {
	font-size: 30px;
	font-weight: bold;
	color: #ff6a00; /* Bright orange for title */
	}
	label {
	font-size: 18px;
	margin-top: 20px;
	display: block;
	text-align: left;
	}
	input[type="text"] {
	width: 100%;
	padding: 10px;
	font-size: 16px;
	border: 1px solid #ccc;
	border-radius: 5px;
	margin-top: 8px;
	}
	.info {
	margin-top: 20px;
	font-size: 16px;
	color: #ff6a00;
	font-weight: bold;
	}
	.status {
	font-size: 14px;
	color: gray;
	margin-top: 20px;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<h1>Biryani Hub</h1>

	<!-- Name Input Field -->
	<label for="name">Name:</label>
	<input type="text" id="name" placeholder="Your name will appear here..." readonly>

	<!-- Email Input Field -->
	<label for="email">Email:</label>
	<input type="text" id="email" placeholder="Your email will appear here..." readonly>

	<!-- Info Message for Listening -->
	<p class="info">Listening will start automatically...</p>

	<!-- Status Message -->
	<p class="status" id="status">Initializing...</p>
	</div>

	<script>
	let recognition;
	let isListening = false;
	let isNameCaptured = false;

	// Initialize speech recognition
	if ('webkitSpeechRecognition' in window) {
	recognition = new webkitSpeechRecognition();
	recognition.continuous = true;
	recognition.interimResults = true;
	recognition.lang = 'en-US';
	} else {
	alert("Speech Recognition API is not supported in this browser.");
	}

	// Function to make the welcome message speak automatically when the page loads
	function welcomeMessage() {
	const welcomeMsg = "Welcome to Biryani Hub. Please say your name after the beep.";
	const speech = new SpeechSynthesisUtterance(welcomeMsg);
	window.speechSynthesis.speak(speech);
	}

	// Function to handle starting the listening process after the welcome message
	function startListening() {
	const status = document.getElementById('status');
	const nameInput = document.getElementById('name');
	const emailInput = document.getElementById('email');

	status.textContent = 'Listening for your name...';
	recognition.start(); // Start voice recognition

	// Handle recognition results
	recognition.onresult = function(event) {
	const transcript = event.results[event.resultIndex][0].transcript.trim();
	console.log('Recognized Text:', transcript); // Debugging line
	if (event.results[event.resultIndex].isFinal) {
	if (!isNameCaptured) {
	// If name is empty, fill it with the recognized text
	nameInput.value = transcript;
	status.textContent = 'Listening for your email...';
	isNameCaptured = true; // Mark name as captured
	recognition.stop(); // Stop listening for name
	recognition.start(); // Start listening for email
	} else if (isNameCaptured && !emailInput.value) {
	// If email is empty, fill it with the recognized text
	emailInput.value = transcript;
	status.textContent = 'Registration complete.';

	// After registration is complete, refresh page automatically after 15 seconds
	setTimeout(() => location.reload(), 15000); // Refresh after 15 seconds
	}
	}
	};

	recognition.onerror = function(event) {
	console.error('Speech recognition error:', event.error);
	status.textContent = 'Error recognizing speech. Please try again.';
	};
	}

	// Make sure to start listening as soon as the page loads
	window.onload = function () {
	welcomeMessage(); // Automatically say the welcome message
	setTimeout(startListening, 5000); // Start listening after the welcome message
	};
	</script>
	</body>
	</html>