voicemenu1433

Sleeping

App Files Files Community

lokesh341 commited on Feb 1

Commit

0e4d29e

verified ·

1 Parent(s): 05a9a93

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +101 -72

templates/index.html CHANGED Viewed

@@ -4,101 +4,130 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Biryani Hub Registration</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
-</head>
-<body>
-    <div class="container">
-        <h1>Biryani Hub</h1>
-        <label for="name">Name:</label>
-        <input type="text" id="name" readonly>
-        <label for="email">Email:</label>
-        <input type="text" id="email" readonly>
-        <p id="status">Initializing...</p>
-        <audio id="audio-player" autoplay></audio>
-    </div>
-    <script>
-        async function playAudio(src) {
-            const audioPlayer = document.getElementById('audio-player');
-            audioPlayer.src = src;
-            await audioPlayer.play();
-            return new Promise(resolve => {
-                audioPlayer.onended = resolve;
-            });
         }
-        async function recordAudio() {
-            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-            const mediaRecorder = new MediaRecorder(stream);
-            let audioChunks = [];
-            return new Promise(resolve => {
-                mediaRecorder.ondataavailable = event => {
-                    audioChunks.push(event.data);
-                };
-                mediaRecorder.onstop = () => {
-                    const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
-                    resolve(audioBlob);
-                };
-                mediaRecorder.start();
-                setTimeout(() => mediaRecorder.stop(), 5000);  // Reduced to 5 seconds for quicker interaction
-            });
         }
-        async function transcribeAudio(audioBlob) {
-            const formData = new FormData();
-            formData.append('audio', audioBlob, 'input.wav');
-            const response = await fetch('/transcribe', {
-                method: 'POST',
-                body: formData
-            });
-            const result = await response.json();
-            return result.text || 'Error capturing speech';
-        }
-        async function startInteraction() {
             const status = document.getElementById('status');
             const nameInput = document.getElementById('name');
             const emailInput = document.getElementById('email');
             status.textContent = 'Playing welcome message...';
-            await playAudio('{{ url_for("static", filename="welcome.mp3") }}');
-            status.textContent = 'Asking for your name...';
-            await playAudio('{{ url_for("static", filename="ask_name.mp3") }}');
-            status.textContent = 'Listening for your name...';
-            const nameAudio = await recordAudio();
-            const nameText = await transcribeAudio(nameAudio);
-            nameInput.value = nameText;
-            status.textContent = 'Asking for your email...';
-            await playAudio('{{ url_for("static", filename="ask_email.mp3") }}');
-            status.textContent = 'Listening for your email...';
-            const emailAudio = await recordAudio();
-            const emailText = await transcribeAudio(emailAudio);
-            emailInput.value = emailText;
-            status.textContent = 'Playing thank you message...';
-            await playAudio('{{ url_for("static", filename="thank_you.mp3") }}');
-            status.textContent = 'Registration complete.';
-            // Auto refresh the page after 15 seconds
             setTimeout(() => {
-                location.reload();
-            }, 15000); // 15 seconds
         }
-        window.onload = startInteraction;
     </script>
 </body>
 </html>

     <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;
+        }
+        .btn {
+            margin-top: 30px;
+            padding: 12px;
+            background-color: #ff6a00;
+            color: white;
+            font-size: 18px;
+            font-weight: bold;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: background-color 0.3s;
+        }
+        .btn:hover {
+            background-color: #ff5500;
+        }
+        .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>
+        <!-- Welcome Button -->
+        <button class="btn" id="startListeningBtn">Welcome to Biryani Hub</button>
+        <!-- Status Message -->
+        <p class="status" id="status">Initializing...</p>
+    </div>
+    <script>
+        // This function simulates the speech recognition and fills in the fields after listening
+        async function startListening() {
             const status = document.getElementById('status');
             const nameInput = document.getElementById('name');
             const emailInput = document.getElementById('email');
             status.textContent = 'Playing welcome message...';
+            // Simulate listening for name
+            setTimeout(() => {
+                nameInput.value = "John Doe"; // Simulated name input from voice
+                status.textContent = 'Listening for your email...';
+            }, 5000);
+            // Simulate listening for email after 5 seconds
             setTimeout(() => {
+                emailInput.value = "[email protected]"; // Simulated email input from voice
+                status.textContent = 'Registration complete.';
+                // Auto refresh after 15 seconds
+                setTimeout(() => {
+                    location.reload();
+                }, 15000); // 15 seconds auto-refresh
+            }, 10000);
         }
+        document.getElementById('startListeningBtn').addEventListener('click', startListening);
     </script>
 </body>
 </html>