Update templates/index.html

templates/index.html

@@ -5,71 +5,143 @@
     <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);
-            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;
-        }
-        .image-logo {
-            width: 80px;
-            margin-bottom: 20px;
-        }
-    </style>
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
 </head>
+  <styles>
+    /* static/styles.css */
+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;
+}
+
+.image-logo {
+    width: 80px;
+    margin-bottom: 20px;
+}
+
+    /* static/styles.css */
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f0f0f0;
+}
+
+.container {
+    width: 60%;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    margin-top: 50px;
+}
+
+h1 {
+    color: #333;
+}
+
+label {
+    font-weight: bold;
+}
+
+input[type="text"], input[type="email"] {
+    width: 100%;
+    padding: 10px;
+    margin: 10px 0;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+button {
+    background-color: #4CAF50;
+    color: white;
+    padding: 10px 20px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #45a049;
+}
+
+#message {
+    margin-top: 20px;
+    font-size: 16px;
+    font-weight: bold;
+}
+
+#confirmation {
+    background-color: #f9f9f9;
+    padding: 20px;
+    border-radius: 5px;
+    margin-top: 20px;
+}
+
+  </styles>
+
 <body>
     <div class="container">
+        <img src="https://yourimageurl.com/logo.png" alt="Logo" class="image-logo">
         <h1>Welcome to Biryani Hub 🍽 🍗</h1>
         
-        
         <label for="name">Your Name</label>
         <input type="text" id="name" placeholder="Your name will appear here..." readonly>
         
@@ -79,15 +151,25 @@
         <label for="mobile">Your Mobile Number</label>
         <input type="text" id="mobile" placeholder="Your mobile number will appear here..." readonly>
 
+      <button type="button" id="confirmBtn">Confirm</button>
+
         <p class="info" id="infoMessage">Listening 🗣🎙️...</p>
         <p class="status" id="status">🔊...</p>
     </div>
-
+  
+ <div id="confirmation" style="display: none;">
+            <h2>Confirm Your Details:</h2>
+            <p><strong>Name:</strong> <span id="confirmName"></span></p>
+            <p><strong>Email:</strong> <span id="confirmEmail"></span></p>
+            <p><strong>Phone:</strong> <span id="confirmPhone"></span></p>
+            <button type="button" id="submitBtn">Submit</button>
+        </div>
     <script>
         let recognition;
         let nameCaptured = "";
         let emailCaptured = "";
         let mobileCaptured = "";
+
         if ('webkitSpeechRecognition' in window) {
             recognition = new webkitSpeechRecognition();
             recognition.continuous = false;
@@ -96,11 +178,13 @@
         } else {
             alert("Speech Recognition API is not supported in this browser.");
         }
+
         function speak(text, callback) {
             const speech = new SpeechSynthesisUtterance(text);
             speech.onend = callback;
             window.speechSynthesis.speak(speech);
         }
+
         function startListeningForName() {
             recognition.start();
             recognition.onresult = function(event) {
@@ -110,6 +194,7 @@
                 setTimeout(confirmName, 500);
             };
         }
+
         function confirmName() {
             speak("You said " + nameCaptured + ". Is it okay, or do you want to change it?", function() {
                 recognition.start();
@@ -124,6 +209,7 @@
                 };
             });
         }
+
         function startListeningForEmail() {
             recognition.start();
             recognition.onresult = function(event) {
@@ -144,6 +230,7 @@
                 });
             };
         }
+
         function startListeningForMobile() {
             recognition.start();
             recognition.onresult = function(event) {
@@ -165,6 +252,7 @@
                 });
             };
         }
+
         function startProcess() {
             speak("Welcome to Biryani Hub", function() {
                 speak("Tell me your name, and I will confirm it with you.", function() {
@@ -172,9 +260,48 @@
                 });
             });
         }
+
         window.onload = function () {
             setTimeout(startProcess, 4000);
         };
+
+       document.getElementById('confirmBtn').addEventListener('click', function() {
+            var name = document.getElementById('name').value;
+            var email = document.getElementById('email').value;
+            var phone = document.getElementById('phone').value;
+
+            // Show confirmation details
+            document.getElementById('confirmName').textContent = name;
+            document.getElementById('confirmEmail').textContent = email;
+            document.getElementById('confirmPhone').textContent = phone;
+
+            // Hide the form and show confirmation
+            document.getElementById('userForm').style.display = 'none';
+            document.getElementById('confirmation').style.display = 'block';
+        });
+
+        document.getElementById('submitBtn').addEventListener('click', function() {
+            var name = document.getElementById('name').value;
+            var email = document.getElementById('email').value;
+            var phone = document.getElementById('phone').value;
+
+            fetch('/submit', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ name: name, email: email, phone: phone })
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    document.getElementById('message').textContent = 'Your details were submitted successfully!';
+                } else {
+                    document.getElementById('message').textContent = 'There was an error submitting your details.';
+                }
+                document.getElementById('message').style.display = 'block';
+            });
+        });
     </script>
 </body>
 </html>