Spaces:
Sleeping
Sleeping
Update templates/index.html
Browse files- templates/index.html +28 -10
templates/index.html
CHANGED
@@ -16,7 +16,6 @@
|
|
16 |
height: 100vh;
|
17 |
text-align: center;
|
18 |
}
|
19 |
-
|
20 |
.container {
|
21 |
background: white;
|
22 |
padding: 40px 50px;
|
@@ -24,20 +23,17 @@
|
|
24 |
width: 400px;
|
25 |
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
26 |
}
|
27 |
-
|
28 |
h1 {
|
29 |
font-size: 30px;
|
30 |
font-weight: bold;
|
31 |
color: #ff6a00; /* Bright orange for title */
|
32 |
}
|
33 |
-
|
34 |
label {
|
35 |
font-size: 18px;
|
36 |
margin-top: 20px;
|
37 |
display: block;
|
38 |
text-align: left;
|
39 |
}
|
40 |
-
|
41 |
input[type="text"] {
|
42 |
width: 100%;
|
43 |
padding: 10px;
|
@@ -46,14 +42,12 @@
|
|
46 |
border-radius: 5px;
|
47 |
margin-top: 8px;
|
48 |
}
|
49 |
-
|
50 |
.info {
|
51 |
margin-top: 20px;
|
52 |
font-size: 16px;
|
53 |
color: #ff6a00;
|
54 |
font-weight: bold;
|
55 |
}
|
56 |
-
|
57 |
.btn {
|
58 |
margin-top: 30px;
|
59 |
padding: 12px;
|
@@ -66,11 +60,9 @@
|
|
66 |
cursor: pointer;
|
67 |
transition: background-color 0.3s;
|
68 |
}
|
69 |
-
|
70 |
.btn:hover {
|
71 |
background-color: #ff5500;
|
72 |
}
|
73 |
-
|
74 |
.status {
|
75 |
font-size: 14px;
|
76 |
color: gray;
|
@@ -103,6 +95,7 @@
|
|
103 |
<script>
|
104 |
let recognition;
|
105 |
let isListening = false;
|
|
|
106 |
|
107 |
// Initialize speech recognition
|
108 |
if ('webkitSpeechRecognition' in window) {
|
@@ -135,6 +128,31 @@
|
|
135 |
recognition.onresult = function(event) {
|
136 |
const transcript = event.results[event.resultIndex][0].transcript.trim();
|
137 |
if (event.results[event.resultIndex].isFinal) {
|
138 |
-
if (!
|
139 |
// If name is empty, fill it with the recognized text
|
140 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
16 |
height: 100vh;
|
17 |
text-align: center;
|
18 |
}
|
|
|
19 |
.container {
|
20 |
background: white;
|
21 |
padding: 40px 50px;
|
|
|
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;
|
|
|
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 |
.btn {
|
52 |
margin-top: 30px;
|
53 |
padding: 12px;
|
|
|
60 |
cursor: pointer;
|
61 |
transition: background-color 0.3s;
|
62 |
}
|
|
|
63 |
.btn:hover {
|
64 |
background-color: #ff5500;
|
65 |
}
|
|
|
66 |
.status {
|
67 |
font-size: 14px;
|
68 |
color: gray;
|
|
|
95 |
<script>
|
96 |
let recognition;
|
97 |
let isListening = false;
|
98 |
+
let isNameCaptured = false;
|
99 |
|
100 |
// Initialize speech recognition
|
101 |
if ('webkitSpeechRecognition' in window) {
|
|
|
128 |
recognition.onresult = function(event) {
|
129 |
const transcript = event.results[event.resultIndex][0].transcript.trim();
|
130 |
if (event.results[event.resultIndex].isFinal) {
|
131 |
+
if (!isNameCaptured) {
|
132 |
// If name is empty, fill it with the recognized text
|
133 |
+
nameInput.value = transcript;
|
134 |
+
status.textContent = 'Listening for your email...';
|
135 |
+
isNameCaptured = true; // Mark name as captured
|
136 |
+
recognition.stop(); // Stop listening for name
|
137 |
+
recognition.start(); // Start listening for email
|
138 |
+
} else if (isNameCaptured && !emailInput.value) {
|
139 |
+
// If email is empty, fill it with the recognized text
|
140 |
+
emailInput.value = transcript;
|
141 |
+
status.textContent = 'Registration complete.';
|
142 |
+
|
143 |
+
// After registration is complete, refresh page automatically after 15 seconds
|
144 |
+
setTimeout(() => location.reload(), 15000); // Refresh after 15 seconds
|
145 |
+
}
|
146 |
+
}
|
147 |
+
};
|
148 |
+
|
149 |
+
recognition.onerror = function(event) {
|
150 |
+
console.error('Speech recognition error:', event.error);
|
151 |
+
status.textContent = 'Error recognizing speech. Please try again.';
|
152 |
+
};
|
153 |
+
}
|
154 |
+
|
155 |
+
document.getElementById('startListeningBtn').addEventListener('click', startListening);
|
156 |
+
</script>
|
157 |
+
</body>
|
158 |
+
</html>
|