lokesh341 commited on
Commit
b31d6fc
·
verified ·
1 Parent(s): e6f4c89

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +66 -104
templates/index.html CHANGED
@@ -3,123 +3,85 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Biryani Hub Registration</title>
7
- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
8
  <style>
9
- body {
10
- font-family: 'Roboto', sans-serif;
11
- background: linear-gradient(135deg, #f4c542, #ff8f6a); /* Light gradient background */
12
- margin: 0;
13
- display: flex;
14
- justify-content: center;
15
- align-items: center;
16
- height: 100vh;
17
- text-align: center;
18
- }
19
- .container {
20
- background: white;
21
- padding: 40px 50px;
22
- border-radius: 10px;
23
- width: 400px;
24
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
25
- }
26
- h1 {
27
- font-size: 30px;
28
- font-weight: bold;
29
- color: #ff6a00; /* Bright orange for title */
30
- }
31
- label {
32
- font-size: 18px;
33
- margin-top: 20px;
34
- display: block;
35
- text-align: left;
36
- }
37
- input[type="text"] {
38
- width: 100%;
39
- padding: 10px;
40
- font-size: 16px;
41
- border: 1px solid #ccc;
42
- border-radius: 5px;
43
- margin-top: 8px;
44
- }
45
- .info {
46
- margin-top: 20px;
47
- font-size: 16px;
48
- color: #ff6a00;
49
- font-weight: bold;
50
- }
51
- .status {
52
- font-size: 14px;
53
- color: gray;
54
- margin-top: 20px;
55
- }
56
  </style>
57
  </head>
58
  <body>
59
- <div class="container">
60
- <h1>Biryani Hub</h1>
 
 
 
 
 
 
 
 
 
61
 
62
- <!-- Name Input Field -->
63
- <label for="name">Name:</label>
64
- <input type="text" id="name" placeholder="Your name will appear here..." readonly>
65
 
66
- <!-- Email Input Field -->
67
- <label for="email">Email:</label>
68
- <input type="text" id="email" placeholder="Your email will appear here..." readonly>
 
 
69
 
70
- <!-- Info Message for Listening -->
71
- <p class="info">Listening will start automatically...</p>
 
 
 
 
 
72
 
73
- <!-- Status Message -->
74
- <p class="status" id="status">Initializing...</p>
75
- </div>
 
76
 
77
- <script>
78
- let recognition;
79
- let isListening = false;
80
- let isNameCaptured = false;
81
 
82
- // Initialize speech recognition
83
- if ('webkitSpeechRecognition' in window) {
84
- recognition = new webkitSpeechRecognition();
85
- recognition.continuous = true;
86
- recognition.interimResults = true;
87
- recognition.lang = 'en-US';
88
- } else {
89
- alert("Speech Recognition API is not supported in this browser.");
90
- }
91
 
92
- // Function to make the welcome message speak automatically when the page loads
93
- function welcomeMessage() {
94
- const welcomeMsg = "Welcome to Biryani Hub. Please say your name after the beep.";
95
- const speech = new SpeechSynthesisUtterance(welcomeMsg);
96
- window.speechSynthesis.speak(speech);
97
  }
98
 
99
- // Function to handle starting the listening process after the welcome message
100
- function startListening() {
101
- const status = document.getElementById('status');
102
- const nameInput = document.getElementById('name');
103
- const emailInput = document.getElementById('email');
 
 
104
 
105
- status.textContent = 'Listening for your name...';
106
- recognition.start(); // Start voice recognition
 
 
 
107
 
108
- // Handle recognition results
109
- recognition.onresult = function(event) {
110
- const transcript = event.results[event.resultIndex][0].transcript.trim();
111
- console.log('Recognized Text:', transcript); // Debugging line
112
- if (event.results[event.resultIndex].isFinal) {
113
- if (!isNameCaptured) {
114
- // If name is empty, fill it with the recognized text
115
- nameInput.value = transcript;
116
- status.textContent = 'Listening for your email...';
117
- isNameCaptured = true; // Mark name as captured
118
- recognition.stop(); // Stop listening for name
119
- recognition.start(); // Start listening for email
120
- } else if (isNameCaptured && !emailInput.value) {
121
- // If email is empty, fill it with the recognized text
122
- emailInput.value = transcript;
123
- status.textContent = 'Registration complete.';
124
 
125
- // After registration is complete, refresh page automatically after 15 se
 
 
 
 
 
 
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Biryani Hub Voice Assistant</title>
 
7
  <style>
8
+ body { text-align: center; padding: 20px; }
9
+ button { padding: 10px 20px; font-size: 16px; cursor: pointer; }
10
+ #result { margin: 20px; font-size: 18px; }
11
+ #username { margin: 20px; font-size: 18px; font-weight: bold; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12
  </style>
13
  </head>
14
  <body>
15
+ <h1>Biryani Hub Voice Assistant</h1>
16
+ <button onclick="startListening()">Start Listening</button>
17
+ <div id="result"></div>
18
+ <div id="status"></div>
19
+ <div id="username"></div>
20
+
21
+ <script>
22
+ // Initialize speech recognition
23
+ const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
24
+ const recognition = new SpeechRecognition();
25
+ recognition.lang = 'en-US'; // Set language
26
 
27
+ // Text-to-speech
28
+ const synth = window.speechSynthesis;
 
29
 
30
+ // Greet the user
31
+ function greetUser() {
32
+ const greeting = "Welcome to Biryani Hub.";
33
+ speak(greeting);
34
+ document.getElementById('status').textContent = greeting;
35
 
36
+ // Ask for the user's name after a short delay
37
+ setTimeout(() => {
38
+ const prompt = "Tell me your name.";
39
+ speak(prompt);
40
+ document.getElementById('status').textContent = prompt;
41
+ }, 2000); // Wait 2 seconds before asking for the name
42
+ }
43
 
44
+ // Handle speech input
45
+ recognition.onresult = (event) => {
46
+ const transcript = event.results[0][0].transcript.trim();
47
+ document.getElementById('result').textContent = `You said: ${transcript}`;
48
 
49
+ // Register the user's name
50
+ registerName(transcript);
51
+ };
 
52
 
53
+ recognition.onerror = (event) => {
54
+ console.error('Error:', event.error);
55
+ document.getElementById('status').textContent = 'Error: ' + event.error;
56
+ };
 
 
 
 
 
57
 
58
+ // Start listening
59
+ function startListening() {
60
+ document.getElementById('status').textContent = 'Listening...';
61
+ recognition.start();
 
62
  }
63
 
64
+ // Register the user's name
65
+ function registerName(name) {
66
+ document.getElementById('username').textContent = `Registered Name: ${name}`;
67
+ const response = `Thank you, ${name}. How can I assist you today?`;
68
+ speak(response);
69
+ document.getElementById('status').textContent = response;
70
+ }
71
 
72
+ // Speak function
73
+ function speak(text) {
74
+ const utterance = new SpeechSynthesisUtterance(text);
75
+ synth.speak(utterance);
76
+ }
77
 
78
+ // Initial greeting when the page loads
79
+ window.onload = greetUser;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
80
 
81
+ // Refresh the page every 15 seconds
82
+ setTimeout(() => {
83
+ window.location.reload();
84
+ }, 15000); // 15 seconds
85
+ </script>
86
+ </body>
87
+ </html>