feat: Update login and signup pages with UI UX improvements and Auth.

accountpage.html

@@ -6,7 +6,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-  
+
   <title>Vehigo - Rent your favourite car</title>
 
   <!-- 
@@ -60,7 +60,7 @@
           </li>
 
           <li>
-            <a href="#blog" class="navbar-link" data-nav-link>Blog</a>
+            <a href="blog.html" class="navbar-link" data-nav-link>Blog</a>
           </li>
 
         </ul>
@@ -106,17 +106,17 @@
         - #HERO
       -->
 
-      <section class=" profile" >
+      <section class=" profile">
         <div class="container profile">
-            <img class="profilepic" src="./assets/images/girl1.jpg" alt="Alock Patel">
-            <div class="ppdetail">
-              <h1 class="name h2 section-title">Aaru Gupta</h1>
-              <p class="email ">[email protected]</p>
-              <p class="phone ">+91 987416545</p><br>
-              <p class="total_cars"> Total cars : 3</p>
-              <p class="total_earn"> Total earnings : ₹8769</p>
-              <p class="member"> Member Since : November, 21, 2023</p>
-            </div>
+          <img class="profilepic" src="./assets/images/girl1.jpg" alt="Alock Patel">
+          <div class="ppdetail">
+            <h1 class="name h2 section-title">Aaru Gupta</h1>
+            <p class="email ">[email protected]</p>
+            <p class="phone ">+91 987416545</p><br>
+            <p class="total_cars"> Total cars : 3</p>
+            <p class="total_earn"> Total earnings : ₹8769</p>
+            <p class="member"> Member Since : November, 21, 2023</p>
+          </div>
 
 
         </div>
@@ -197,7 +197,7 @@ <h3 class="h3 card-title">
                       <strong>₹210</strong> / hour
                     </p>
 
-                    
+
 
                     <button class="btn">Track Car</button>
 
@@ -213,8 +213,8 @@ <h3 class="h3 card-title">
               <div class="featured-car-card">
 
                 <figure class="card-banner">
-                  <img src="./assets/images/fortuner.jpg" alt="Toyota Fortuner" loading="lazy" width="440"
-                    height="300" class="w-100">
+                  <img src="./assets/images/fortuner.jpg" alt="Toyota Fortuner" loading="lazy" width="440" height="300"
+                    class="w-100">
                 </figure>
 
                 <div class="card-content">
@@ -335,18 +335,18 @@ <h3 class="h3 card-title">
 
             <li>
 
-                  </div>
+        </div>
 
-                </div>
+        </div>
 
-              </div>
-            </li>
+        </div>
+        </li>
 
-          </ul>
-  <a href="./index.html" style="
+        </ul>
+        <a href="./index.html" style="
   position: fixed;
   bottom: 30px;
-  right: 30px;
+  left: 30px;
   background-color: #007BFF;
   color: white;
   border-radius: 50%;
@@ -360,15 +360,15 @@ <h3 class="h3 card-title">
   z-index: 999;
   transition: background-color 0.3s;
 " onmouseover="this.style.backgroundColor='#0056b3'" onmouseout="this.style.backgroundColor='#007BFF'">
-  <ion-icon name="chevron-up-outline" style="font-size: 24px;"></ion-icon>
-</a>
+          <ion-icon name="chevron-up-outline" style="font-size: 24px;"></ion-icon>
+        </a>
 
         </div>
       </section>
 
 
 
-      
+
   </main>
 
 
@@ -390,8 +390,8 @@ <h3 class="h3 card-title">
           </a>
 
           <p class="footer-text">
-            Search for cheap rental cars in Madhaya Pradesh. We offers our
-            customers an attractive and fun selection of vehicals as well as an opportunity to rent thier cars when not in use.
+            Discover affordable rental cars in Madhya Pradesh. Choose from our wide and exciting range of vehicles, and
+            even earn extra income by renting out your own car when it’s not in use.
           </p>
         </div>
 
@@ -410,11 +410,11 @@ <h3 class="h3 card-title">
           </li>
 
           <li>
-            <a href="#" class="footer-link">Our blog</a>
+            <a href="blog.html" class="footer-link">Our blog</a>
           </li>
 
           <li>
-            <a href="#" class="footer-link">Contacts</a>
+            <a href="ContactUs.html" class="footer-link">Contacts</a>
           </li>
 
         </ul>
@@ -444,7 +444,7 @@ <h3 class="h3 card-title">
         </ul>
 
         <ul class="footer-list">
-            
+
           <li>
             <p class="footer-list-title"> </p>
           </li>
@@ -514,6 +514,38 @@ <h3 class="h3 card-title">
   <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
   <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
 
+  <!-- Scroll Buttons -->
+<button id="scrollTopBtn" style="
+    position: fixed; bottom: 80px; right: 20px; background: #007bff; color: white;
+    border: none; outline: none; width: 50px; height: 50px; border-radius: 50%;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.2); cursor: pointer; font-size: 20px;
+    display: none; z-index: 999;">&#9650;</button>
+
+<button id="scrollBottomBtn" style="
+    position: fixed; bottom: 20px; right: 20px; background: #007bff; color: white;
+    border: none; outline: none; width: 50px; height: 50px; border-radius: 50%;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.2); cursor: pointer; font-size: 20px;
+    display: none; z-index: 999;">&#9660;</button>
+
+<script>
+  const topBtn = document.getElementById("scrollTopBtn");
+  const bottomBtn = document.getElementById("scrollBottomBtn");
+
+  window.addEventListener("scroll", () => {
+    topBtn.style.display = window.scrollY > 200 ? "block" : "none";
+    bottomBtn.style.display = (window.innerHeight + window.scrollY < document.body.scrollHeight - 200) ? "block" : "none";
+  });
+
+  topBtn.addEventListener("click", () => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  });
+
+  bottomBtn.addEventListener("click", () => {
+    window.scrollTo({ top: document.body.scrollHeight, behavior: "smooth" });
+  });
+</script>
+
+
 </body>
 
 </html>

buy.html

@@ -19,6 +19,11 @@
       <li><a href="rentcar.html" class="navbar-link" data-nav-link>Rent Your Car</a></li>
     </ul>
   </nav>
+   <h1 style="color: brown; font-size: medium;">Search</h1>
+  <div class="search-container">
+  <input type="text" id="searchBar" placeholder="Search for cars...">
+</div>
+
 
   <section class="featured-section">
     <div class="section-header">

buycar.js

@@ -46,4 +46,17 @@
           () => { window.location.href = 'login.html'; }
         );
       });
-    });
+    });
+    // Buy Car Page Script
+    document.addEventListener("DOMContentLoaded", () => {
+  const searchBar = document.getElementById("searchBar");
+  const carCards = document.querySelectorAll(".car-card");
+
+  searchBar.addEventListener("input", () => {
+    const searchTerm = searchBar.value.toLowerCase();
+    carCards.forEach(card => {
+      const carName = card.querySelector("h2").textContent.toLowerCase();
+      card.style.display = carName.includes(searchTerm) ? "block" : "none";
+    });
+  });
+});

buyscar.css

@@ -149,6 +149,24 @@ body {
     align-items: center;
   }
 }
+/* Search */
+.search-container {
+  margin: 1rem 0;
+  text-align: center;
+}
+#searchBar {
+  padding: 0.5rem;
+  width: 50%;
+  font-size: 1rem;
+}
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #007bff;
+  padding: 1rem;
+  border-radius: 8px;
+}
 
 
 

index.html

@@ -57,7 +57,7 @@
             </li>
 
             <li>
-              <a href="#blog" class="navbar-link" data-nav-link>Blog</a>
+              <a href="blog.html" class="navbar-link" data-nav-link>Blog</a>
             </li>
             <!-- changes -->
              <li>
@@ -1213,7 +1213,7 @@ <h3 class="h3 card-title">
     <a href="./index.html" style="
       position: fixed;
       bottom: 30px;
-      right: 30px;
+      left: 30px;
       background-color: #007BFF;
       color: white;
       border-radius: 50%;
@@ -1229,5 +1229,36 @@ <h3 class="h3 card-title">
     " onmouseover="this.style.backgroundColor='#0056b3'" onmouseout="this.style.backgroundColor='#007BFF'">
       <ion-icon name="chevron-up-outline" style="font-size: 24px;"></ion-icon>
     </a>
+      <!-- Scroll Buttons -->
+<button id="scrollTopBtn" style="
+    position: fixed; bottom: 80px; right: 20px; background: #007bff; color: white;
+    border: none; outline: none; width: 50px; height: 50px; border-radius: 50%;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.2); cursor: pointer; font-size: 20px;
+    display: none; z-index: 999;">&#9650;</button>
+
+<button id="scrollBottomBtn" style="
+    position: fixed; bottom: 20px; right: 20px; background: #007bff; color: white;
+    border: none; outline: none; width: 50px; height: 50px; border-radius: 50%;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.2); cursor: pointer; font-size: 20px;
+    display: none; z-index: 999;">&#9660;</button>
+
+<script>
+  const topBtn = document.getElementById("scrollTopBtn");
+  const bottomBtn = document.getElementById("scrollBottomBtn");
+
+  window.addEventListener("scroll", () => {
+    topBtn.style.display = window.scrollY > 200 ? "block" : "none";
+    bottomBtn.style.display = (window.innerHeight + window.scrollY < document.body.scrollHeight - 200) ? "block" : "none";
+  });
+
+  topBtn.addEventListener("click", () => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  });
+
+  bottomBtn.addEventListener("click", () => {
+    window.scrollTo({ top: document.body.scrollHeight, behavior: "smooth" });
+  });
+</script>
+
   </body>
 </html>