Merge pull request #171 from ragini-gp/main

Solved issue #128
suryanshsk · Oct 12, 2024 · 515fe9c · 515fe9c
2 parents a498435 + 56bea0b
commit 515fe9c
Show file tree

Hide file tree

Showing 5 changed files with 239 additions and 36 deletions.
diff --git a/frontend/contact.html b/frontend/contact.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Contact Us</title>
+    <link rel="stylesheet" href="styles.css">
+
+</head>
+<style>
+    * {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-family: Arial, sans-serif;
+}
+
+body {
+    background-color: #f4f4f4;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+}
+
+.contact-container {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    width: 400px;
+}
+
+h2 {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.form-group {
+    margin-bottom: 15px;
+}
+
+label {
+    display: block;
+    font-weight: bold;
+    margin-bottom: 5px;
+}
+
+input[type="text"],
+input[type="email"],
+input[type="tel"],
+textarea {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+button {
+    width: 100%;
+    padding: 10px;
+    background-color: #3498db;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #1974b1;
+}
+
+</style>
+<body>
+    <div class="contact-container">
+        <h2>Contact Us</h2>
+        <form id="contactForm">
+            <div class="form-group">
+                <label for="first_name">First Name:</label>
+                <input type="text" id="first_name" name="first_name" required>
+            </div>
+            <div class="form-group">
+                <label for="last_name">Last Name:</label>
+                <input type="text" id="last_name" name="last_name" required>
+            </div>
+            <div class="form-group">
+                <label for="email">Email:</label>
+                <input type="email" id="email" name="email" required>
+            </div>
+            <div class="form-group">
+                <label for="phone">Phone Number:</label>
+                <input type="tel" id="phone" name="phone" required>
+            </div>
+            <div class="form-group">
+                <label for="message">Message:</label>
+                <textarea id="message" name="message" rows="5" required></textarea>
+            </div>
+            <button type="submit">Submit</button>
+        </form>
+    </div>
+
+    <script>
+        // Add an event listener to the form to prevent submission
+        document.getElementById('contactForm').addEventListener('submit', function(event) {
+            // Prevent default form submission behavior
+            event.preventDefault();
+
+            // Display a success message or take any other action
+            alert('Form submitted successfully!');
+
+            window.location.href = "index.html";
+
+            // You can add more actions here, like clearing the form fields:
+            // this.reset();
+        });
+    </script>
+</body>
+</html>
diff --git a/frontend/image/dark_mode.png b/frontend/image/dark_mode.png
diff --git a/frontend/image/light_mode.png b/frontend/image/light_mode.png
diff --git a/frontend/index.html b/frontend/index.html
@@ -13,21 +13,24 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css"/>
 
 </head>
+
 <body>
+
     <!-- Header Section -->
     <header class="main-header">
         <nav>
             <div class="logo">Voice Assistant AI</div>
             <ul>
+                <img id="icon" src="image/dark_mode.png">
                 <li><a href="#features">Features</a></li>
                 <li><a href="#setup">Setup</a></li>
-                <li><a href="#footer">Contact</a></li>
+                <li><a href="contact.html">Contact</a></li>
             </ul>
         </nav>
         <div class="header-content">
             <img src="image/ voice.png" alt="Voice Assistant Image" class="header-image" /> <!-- Add image here -->
-            <h1>Python Voice Assistant with Gemini AI</h1>
-            <p>A smart, AI-powered voice assistant that simplifies your living!</p>
+            <h1 class="main_topic">Python Voice Assistant with Gemini AI</h1>
+            <p class="main_para">A smart, AI-powered voice assistant that simplifies your living!</p>
 
         </div>
     </header>
@@ -156,7 +159,7 @@ <h2>Contact Us</h2>
                     Have questions or feedback? Reach out to us:
                 </p>
                 <ul>
-                    <li>Email: <a href="mailto:[email protected]">[email protected]</a></li>
+                    <li><span class="email-text">Email:</span> <a href="mailto:[email protected]">[email protected]</a></li>
                 </ul>
             </div>
         </div>
@@ -165,4 +168,20 @@ <h2>Contact Us</h2>
             <p>&copy; 2024 Suryanshsk. All rights reserved.</p>
         </div>
     </footer>
+
+<script>
+
+    var icon = document.getElementById("icon");
+    icon.onclick = function(){
+        document.body.classList.toggle("dark-theme");
+        if(document.body.classList.contains("dark-theme")){
+            icon.src="image/light_mode.png";
+        }
+        else{
+            icon.src="image/dark_mode.png";
+        }
+    }
+</script>
+
+    </body>