help page UI improved

ankit071105 · Nov 3, 2024 · 5862bf0 · 5862bf0
1 parent 0cb18d8
commit 5862bf0
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 58 deletions.
diff --git a/contactus.html b/contactus.html
@@ -423,7 +423,7 @@ <h2>Contact Us</h2>
             <div class="footer-column">
                 <h4>HELPFUL LINKS</h4>
                 <ul>
-                    <li><a href="#">Help Centre</a></li>
+                    <li><a href="help.html">Help Centre</a></li>
                     <li><a href="#">Special Assistance</a></li>
                     <li><a href="#">Download The App</a></li>
                     <li><a href="#">Booking Conditions</a></li>

diff --git a/help.html b/help.html
@@ -18,6 +18,7 @@
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
     />
     <link rel="stylesheet" href="footer.css">
+    <link rel="stylesheet" href="navbar.css">
     <style>
       .nav-container {
         display: flex;
@@ -26,64 +27,26 @@
   </head>
   <body>
     <nav class="navbar">
-      <a href="./index.html" id="logo-href">
-        <div class="logo-container">
-          <img
-            src="images/4.jpeg"
-            alt="Ticket Booking Logo"
-            class="logo-image"
-          />
-          <div class="logo">Ticket Booking</div>
-        </div>
-      </a>
-      <nav class="navbar">
-        <ul>
-          <li><a href="#home">Home</a></li>
-          <li><a href="#reviews">Reviews</a></li>
-          <li><a href="#queries">Queries</a></li>
-        </ul>
-      </nav>
-
-      <div class="nav-container">
-        <div class="menu-toggle">
-          <span class="bar"></span>
-          <span class="bar"></span>
-          <span class="bar"></span>
-        </div>
+      <img src="https://ticket-booking-blue.vercel.app/images/4.jpeg" alt="" style="border-radius: 50%; height: 35px; width: 35px;">
+      <div class="logo" style="font-size: 20px;">Ticket Marketplace</div>
 
-        <ul class="nav-links">
-          <li>
-            <a href="index.html" class="home-button"
-              ><i class="fas fa-home"></i>HOME</a
-            >
-          </li>
-          <li>
-            <a href="buy.html"><i class="fas fa-shopping-cart"></i> Buy</a>
-          </li>
-          <li>
-            <a href="sell.html"><i class="fas fa-tag"></i> Sell</a>
-          </li>
-          <li>
-            <a href="#contact"><i class="fas fa-envelope"></i> Contact</a>
-          </li>
-          <li>
-            <a href="contributors.html"
-              ><i class="fas fa-users"></i> Our Contributors</a
-            >
-          </li>
+      <!-- Toggle Button (Visible on Small Screens) -->
+      <button id="navToggle">☰</button>
 
-          <li>
-            <a href="/client/register.html" class="login-btn"
-              ><i class="fas fa-user"></i
-            ></a>
-          </li>
-        </ul>
-
-        <button id="darkModeToggle" style="width: 40px; height: 40px">
-          🌙
-        </button>
+      <!-- Navbar Links -->
+      <div id="navLinks">
+          <a href="index.html"><i class="fas fa-home"></i> Home</a>
+          <a href="about.html"><i class="fas fa-info-circle"></i> About</a>
+          <a href="buy.html"><i class="fas fa-ticket-alt"></i> Buy Ticket</a>
+          <a href="sell.html"><i class="fas fa-tags"></i> Sell</a>
+          <a href="contactus.html"><i class="fas fa-envelope"></i> Contact</a>
+          <a href="contributor.html"><i class="fas fa-users"></i> Contributors</a>
+          <a href="client/login.html"><i class="fas fa-sign-in-alt"></i> Login</a>
       </div>
-    </nav>
+
+      <!-- Dark Mode Button -->
+      <button id="darkModeToggle" style="width: 40px; height: 40px;">🌙</button>
+  </nav>
     <script>
       const darkModeToggle = document.getElementById("darkModeToggle");
       const body = document.querySelector("body");
@@ -133,7 +96,7 @@
     </script>
     <div class="helpcontainer">
         <div id="helpservice-section">
-            <h2>Help Center</h2>
+            <h1>Help Center</h1>
             <p id="para">
                 Here's a compilation of all the travel queries you may have.
                  We're pretty sure the answer to your question will be here. 
@@ -286,6 +249,37 @@ <h4>FIND US</h4>
       src="https://cdn.gtranslate.net/widgets/latest/float.js"
       defer
     ></script>
+    <script>
+      //toggle chatbot function
+      function toggleChatbot() {
+        const chatbotContainer = document.getElementById("chatbot-container");
+        chatbotContainer.classList.toggle("chatbot-show");
+    }
+
+      // Toggle Navbar Links
+      const navToggle = document.getElementById('navToggle');
+      const navlinks = document.getElementById('navLinks');
+
+      navToggle.addEventListener('click', () => {
+          navlinks.style.display = navlinks.style.display === 'flex' ? 'none' : 'flex';
+      });
+
+      // Ensure navbar links are visible on large screens
+      window.addEventListener('resize', () => {
+          if (window.innerWidth > 768) {
+              navlinks.style.display = 'flex'; // Show links on large screens
+          } else {
+              navlinks.style.display = 'none'; // Hide links on small screens
+          }
+      });
+
+      // Set initial state based on the current window size
+      if (window.innerWidth > 768) {
+          navlinks.style.display = 'flex'; // Show links if starting on a large screen
+      } else {
+          navlinks.style.display = 'none'; // Hide links if starting on a small screen
+      }
+  </script>
   </body>
 </html>
 <style>

diff --git a/index.html b/index.html
@@ -1318,7 +1318,7 @@ <h2>Frequently Asked Questions</h2>
                 <div class="footer-column">
                     <h4>HELPFUL LINKS</h4>
                     <ul>
-                        <li><a href="#">Help Centre</a></li>
+                        <li><a href="help.html">Help Centre</a></li>
                         <li><a href="#">Special Assistance</a></li>
                         <li><a href="#">Download The App</a></li>
                         <li><a href="#">Booking Conditions</a></li>