voicemenuwithregisterandloginnnwithmenuuuu

Sleeping

App Files Files Community

voicemenuwithregisterandloginnnwithmenuuuu / templates /index.html

DSatishchandra

Update templates/index.html

92930b9 verified 29 days ago

raw

history blame

9.99 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='styles.css') }}">
	</head>
	<!--<styles>
	/* static/styles.css */
	body {
	font-family: 'Roboto', sans-serif;
	background: linear-gradient(135deg, #f4c542, #ff8f6a);
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	text-align: center;
	}

	.container {
	background-color: #87ceeb; /* Light blue */
	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;
	}

	label {
	font-size: 16px;
	margin-top: 20px;
	display: block;
	text-align: left;
	font-weight: bold;
	}

	input[type="text"] {
	width: 100%;
	padding: 12px;
	font-size: 16px;
	border: 2px solid #ccc;
	border-radius: 8px;
	margin-top: 8px;
	box-sizing: border-box;
	}

	input[type="text"]:focus {
	border-color: #ff6a00;
	outline: none;
	}

	.info {
	margin-top: 20px;
	font-size: 16px;
	color: #ff6a00;
	font-weight: bold;
	}

	.status {
	font-size: 14px;
	color: gray;
	margin-top: 20px;
	}

	.image-logo {
	width: 80px;
	margin-bottom: 20px;
	}

	/* static/styles.css */
	body {
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
	background-color: #f0f0f0;
	}

	.container {
	width: 60%;
	margin: 0 auto;
	padding: 20px;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	margin-top: 50px;
	}

	h1 {
	color: #333;
	}

	label {
	font-weight: bold;
	}

	input[type="text"], input[type="email"] {
	width: 100%;
	padding: 10px;
	margin: 10px 0;
	border: 1px solid #ccc;
	border-radius: 5px;
	}

	button {
	background-color: #4CAF50;
	color: white;
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	}

	button:hover {
	background-color: #45a049;
	}

	#message {
	margin-top: 20px;
	font-size: 16px;
	font-weight: bold;
	}

	#confirmation {
	background-color: #f9f9f9;
	padding: 20px;
	border-radius: 5px;
	margin-top: 20px;
	}

	</styles>-->

	<body>
	<div class="container">
	<img src="https://yourimageurl.com/logo.png" alt="Logo" class="image-logo">
	<h1>Welcome to Biryani Hub 🍽 🍗</h1>

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

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

	<label for="mobile">Your Mobile Number</label>
	<input type="text" id="mobile" placeholder="Your mobile number will appear here..." readonly>

	<button type="button" id="confirmBtn">Confirm</button>

	<p class="info" id="infoMessage">Listening 🗣🎙️...</p>
	<p class="status" id="status">🔊...</p>
	</div>

	<div id="confirmation" style="display: none;">
	<h2>Confirm Your Details:</h2>
	<p><strong>Name:</strong> <span id="confirmName"></span></p>
	<p><strong>Email:</strong> <span id="confirmEmail"></span></p>
	<p><strong>Phone:</strong> <span id="confirmPhone"></span></p>
	<button type="button" id="submitBtn">Submit</button>
	</div>
	<script>
	let recognition;
	let nameCaptured = "";
	let emailCaptured = "";
	let mobileCaptured = "";

	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 startListeningForName() {
	recognition.start();
	recognition.onresult = function(event) {
	nameCaptured = event.results[0][0].transcript.trim();
	document.getElementById('name').value = nameCaptured;
	recognition.stop();
	setTimeout(confirmName, 500);
	};
	}

	function confirmName() {
	speak("You said " + nameCaptured + ". Is it okay, or do you want to change it?", function() {
	recognition.start();
	recognition.onresult = function(event) {
	let confirmation = event.results[0][0].transcript.trim().toLowerCase();
	recognition.stop();
	if (confirmation.includes("ok") \|\| confirmation.includes("yes")) {
	setTimeout(() => speak("Great! Now, tell me your email.", startListeningForEmail), 500);
	} else {
	setTimeout(() => speak("Let's try again. Tell me your name.", startListeningForName), 500);
	}
	};
	});
	}

	function startListeningForEmail() {
	recognition.start();
	recognition.onresult = function(event) {
	emailCaptured = event.results[0][0].transcript.trim().replace(/\bat\b/g, '@').replace(/\s+/g, '');
	document.getElementById('email').value = emailCaptured;
	recognition.stop();
	speak("You said " + emailCaptured + ". Is it correct?", function() {
	recognition.start();
	recognition.onresult = function(event) {
	let confirmation = event.results[0][0].transcript.trim().toLowerCase();
	recognition.stop();
	if (confirmation.includes("ok") \|\| confirmation.includes("yes")) {
	setTimeout(() => speak("Great! Now, tell me your mobile number.", startListeningForMobile), 500);
	} else {
	speak("Let's try again. Tell me your email.", startListeningForEmail);
	}
	};
	});
	};
	}

	function startListeningForMobile() {
	recognition.start();
	recognition.onresult = function(event) {
	mobileCaptured = event.results[0][0].transcript.trim().replace(/\s+/g, '');
	document.getElementById('mobile').value = mobileCaptured;
	recognition.stop();
	speak("You said " + mobileCaptured + ". Is it correct?", function() {
	recognition.start();
	recognition.onresult = function(event) {
	let confirmation = event.results[0][0].transcript.trim().toLowerCase();
	recognition.stop();
	if (confirmation.includes("ok") \|\| confirmation.includes("yes")) {
	speak("Your registration is complete. Thank you for registering.");
	setTimeout(() => location.reload(), 20000);
	} else {
	speak("Let's try again. Tell me your mobile number.", startListeningForMobile);
	}
	};
	});
	};
	}

	function startProcess() {
	speak("Welcome to Biryani Hub", function() {
	speak("Tell me your name, and I will confirm it with you.", function() {
	setTimeout(startListeningForName, 500);
	});
	});
	}

	window.onload = function () {
	setTimeout(startProcess, 4000);
	};

	document.getElementById('confirmBtn').addEventListener('click', function() {
	var name = document.getElementById('name').value;
	var email = document.getElementById('email').value;
	var phone = document.getElementById('phone').value;

	// Show confirmation details
	document.getElementById('confirmName').textContent = name;
	document.getElementById('confirmEmail').textContent = email;
	document.getElementById('confirmPhone').textContent = phone;

	// Hide the form and show confirmation
	document.getElementById('userForm').style.display = 'none';
	document.getElementById('confirmation').style.display = 'block';
	});

	document.getElementById('submitBtn').addEventListener('click', function() {
	var name = document.getElementById('name').value;
	var email = document.getElementById('email').value;
	var phone = document.getElementById('phone').value;

	fetch('/submit', {
	method: 'POST',
	headers: {
	'Content-Type': 'application/json'
	},
	body: JSON.stringify({ name: name, email: email, phone: phone })
	})
	.then(response => response.json())
	.then(data => {
	if (data.success) {
	document.getElementById('message').textContent = 'Your details were submitted successfully!';
	} else {
	document.getElementById('message').textContent = 'There was an error submitting your details.';
	}
	document.getElementById('message').style.display = 'block';
	});
	});
	</script>
	</body>
	</html>