File size: 5,548 Bytes
4e70d0d
 
 
 
 
fe03a0b
 
fc1bc87
 
fe03a0b
 
fc1bc87
 
 
 
 
fe03a0b
fc1bc87
 
fe03a0b
 
 
 
fc1bc87
 
 
fe03a0b
 
 
fc1bc87
fe03a0b
 
 
 
 
fc1bc87
fe03a0b
 
 
 
 
 
 
fc1bc87
fe03a0b
 
 
 
 
fc1bc87
 
fe03a0b
 
 
fc1bc87
 
0e4d29e
 
d4eb4c5
fe03a0b
19b4f7c
fe03a0b
 
 
0e4d29e
fe03a0b
 
 
 
 
 
a945a59
6b18c62
fe03a0b
d4eb4c5
a945a59
d4eb4c5
fe03a0b
 
 
 
 
 
 
 
 
 
 
fc1bc87
 
fe03a0b
 
 
 
 
6b18c62
fe03a0b
 
 
 
 
 
 
96e9e1d
 
 
 
 
 
 
 
 
 
 
 
fe03a0b
 
6b18c62
fe03a0b
 
 
 
 
 
96e9e1d
fe03a0b
96e9e1d
 
 
 
 
 
 
 
 
 
 
 
fe03a0b
 
6b18c62
fe03a0b
 
 
 
 
6b18c62
fe03a0b
 
 
b31d6fc
 
fe03a0b
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!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: lightblue;
            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>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;  // Stop after capturing each input
            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;  // Once the speech ends, call the next function
            window.speechSynthesis.speak(speech);
        }

        function startListeningForName() {
            const status = document.getElementById('status');
            const nameInput = document.getElementById('name');
            status.textContent = "Listening for your name...";
            recognition.start();
            recognition.onresult = function(event) {
                const transcript = event.results[0][0].transcript.trim();
                
                // Remove all spaces from the name
                const cleanedName = transcript.replace(/\s+/g, '');
                
                if (!isNameCaptured) {
                    // If name is not yet captured, capture name first
                    nameInput.value = cleanedName;  // Set the cleaned name without spaces
                    status.textContent = 'Listening for your email...'; // Prompt for email
                    recognition.stop(); // Stop listening for name
                    isNameCaptured = true; // Mark name as captured
                    recognition.start();  // Start listening for email
                }
            };
        }

        function startListeningForEmail() {
            const status = document.getElementById('status');
            const emailInput = document.getElementById('email');
            status.textContent = "Listening for your email...";
            recognition.start();
            recognition.onresult = function(event) {
                let transcript = event.results[0][0].transcript.trim();
                
                // Replace "at" with "@" for email
                transcript = transcript.replace(/\bat\b/g, '@').trim();

                // Clean any spaces around the email
                const cleanedEmail = transcript.replace(/\s+/g, '');

                emailInput.value = cleanedEmail; // Set the email field with cleaned input
                status.textContent = 'Registration complete.';

                // After registration, refresh the page after 20 seconds
                setTimeout(() => location.reload(), 20000); // Refresh after 20 seconds
                isEmailCaptured = true;  // Mark email as captured
            };
        }

        function startProcess() {
            speak("Welcome to Biryani Hub", function() {
                speak("Tell me your name", startListeningForName);
            });
        }

        window.onload = function () {
            setTimeout(startProcess, 4000);  // Start process after 4 seconds
        };
    </script>
</body>
</html>