voicemenu1433

Sleeping

App Files Files Community

lokesh341 commited on 24 days ago

Commit

6fd742a

verified ·

1 Parent(s): 93827eb

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +105 -153

templates/index.html CHANGED Viewed

@@ -4,103 +4,121 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Biryani Hub</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>
-<style>
-    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;
-    }
-</style>
 <body>
     <div class="container">
         <h1>Welcome to Biryani Hub 🍽 🍗</h1>
-        <!-- Prompt for choosing between login and registration -->
-        <p class="info" id="infoMessage">Listening 🗣🎙️...</p>
-        <p class="status" id="status">🔊...</p>
-    </div>
-    <div id="registrationForm" style="display: none;">
-        <!-- Registration Form -->
-        <h2>Register</h2>
-        <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>
-        <p class="info" id="infoMessage">Listening 🗣🎙️...</p>
-        <p class="status" id="status">🔊...</p>
-    </div>
-    <div id="loginForm" style="display: none;">
-        <!-- Login Form -->
-        <h2>Login</h2>
-        <label for="loginEmail">Your Email</label>
-        <input type="text" id="loginEmail" placeholder="Your email will appear here..." readonly>
-        <label for="loginMobile">Your Mobile Number</label>
-        <input type="text" id="loginMobile" placeholder="Your mobile number will appear here..." readonly>
-        <p class="info" id="infoMessageLogin">Listening 🗣🎙️...</p>
-        <p class="status" id="statusLogin">🔊...</p>
     </div>
     <script>
@@ -246,72 +264,6 @@
             });
         }
-        // Start login process (similar to registration process but only email and phone)
-        function startListeningForLoginEmail() {
-            recognition.start();
-            recognition.onresult = function(event) {
-                emailCaptured = event.results[0][0].transcript.trim().replace(/\bat\b/g, '@').replace(/\s+/g, '');
-                document.getElementById('loginEmail').value = emailCaptured;
-                recognition.stop();
-                speak("You said " + emailCaptured + ". Is it correct?", confirmLoginEmail);
-            };
-        }
-        function confirmLoginEmail() {
-            recognition.start();
-            recognition.onresult = function(event) {
-                let confirmation = event.results[0][0].transcript.trim().toLowerCase();
-                recognition.stop();
-                if (confirmation.includes("ok")) {
-                    speak("Great! Now, tell me your mobile number.", startListeningForLoginMobile);
-                } else {
-                    speak("Let's try again. Tell me your email.", startListeningForLoginEmail);
-                }
-            };
-        }
-        function startListeningForLoginMobile() {
-            recognition.start();
-            recognition.onresult = function(event) {
-                mobileCaptured = event.results[0][0].transcript.trim().replace(/\s+/g, '');
-                document.getElementById('loginMobile').value = mobileCaptured;
-                recognition.stop();
-                speak("You said " + mobileCaptured + ". Is it correct?", confirmLoginMobile);
-            };
-        }
-        function confirmLoginMobile() {
-            recognition.start();
-            recognition.onresult = function(event) {
-                let confirmation = event.results[0][0].transcript.trim().toLowerCase();
-                recognition.stop();
-                if (confirmation.includes("ok")) {
-                    submitLogin();
-                } else {
-                    speak("Let's try again. Tell me your mobile number.", startListeningForLoginMobile);
-                }
-            };
-        }
-        // Submit login details to backend
-        function submitLogin() {
-            let email = document.getElementById('loginEmail').value;
-            let mobile = document.getElementById('loginMobile').value;
-            fetch('/submit_login', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ email: email, mobile: mobile })
-            })
-            .then(response => response.json())
-            .then(data => {
-                speak("Login successful. Welcome back!");
-                // Redirect or perform other actions
-            })
-            .catch(error => {
-                speak("There was an error with your login. Please try again.");
-            });
-        }
         window.onload = function () {
             askLoginOrRegister();
         };

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Biryani Hub Login & 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') }}">
+    <style>
+        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: #fff; /* White background for contrast */
+            padding: 40px 50px;
+            border-radius: 10px;
+            width: 450px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+            margin-right: 20px;
+        }
+        h1 {
+            font-size: 30px;
+            font-weight: bold;
+            color: #ff6a00;
+        }
+        label {
+            font-size: 16px;
+            margin-top: 20px;
+            display: block;
+            text-align: left;
+            font-weight: bold;
+            color: #333;
+        }
+        input[type="text"] {
+            width: 100%;
+            padding: 12px;
+            font-size: 16px;
+            border: 2px solid #ccc;
+            border-radius: 8px;
+            margin-top: 8px;
+            box-sizing: border-box;
+            background-color: #f9f9f9;
+        }
+        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;
+        }
+        .form-container {
+            display: flex;
+            justify-content: space-between;
+            gap: 30px;
+        }
+        .form-container > div {
+            width: 48%;
+        }
+        .form-section {
+            padding: 20px;
+            background-color: #f9f9f9;
+            border-radius: 10px;
+        }
+        .header {
+            font-size: 24px;
+            font-weight: bold;
+            color: #ff6a00;
+        }
+    </style>
 </head>
 <body>
     <div class="container">
         <h1>Welcome to Biryani Hub 🍽 🍗</h1>
+        <!-- Form Section -->
+        <div class="form-container">
+            <!-- Registration Form -->
+            <div class="form-section" id="registrationForm" style="display: block;">
+                <h2 class="header">Register</h2>
+                <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>
+                <p class="info" id="infoMessage">Listening 🗣🎙️...</p>
+                <p class="status" id="status">🔊...</p>
+            </div>
+            <!-- Login Form -->
+            <div class="form-section" id="loginForm" style="display: none;">
+                <h2 class="header">Login</h2>
+                <label for="loginEmail">Your Email</label>
+                <input type="text" id="loginEmail" placeholder="Your email will appear here..." readonly>
+                <label for="loginMobile">Your Mobile Number</label>
+                <input type="text" id="loginMobile" placeholder="Your mobile number will appear here..." readonly>
+                <p class="info" id="infoMessageLogin">Listening 🗣🎙️...</p>
+                <p class="status" id="statusLogin">🔊...</p>
+            </div>
+        </div>
     </div>
     <script>
             });
         }
         window.onload = function () {
             askLoginOrRegister();
         };