From 4d84783007fe4ffdc1686d30c6e240581cb571cb Mon Sep 17 00:00:00 2001
From: Ibrangrd <ibrangrd@gmail.com>
Date: Wed, 6 Nov 2024 19:28:08 +0530
Subject: [PATCH] Make buy page responsive

---
 buy.html  |  8 ++++----
 index.css | 12 +++++++++---
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/buy.html b/buy.html
index d708f84..e9d7627 100644
--- a/buy.html
+++ b/buy.html
@@ -315,7 +315,7 @@
 
     <nav class="navbar">
       <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>
+      <div class="logo">Ticket Marketplace</div>
 
       <!-- Toggle Button (Visible on Small Screens) -->
       <button id="navToggle">☰</button>
@@ -332,7 +332,7 @@
       </div>
 
       <!-- Dark Mode Button -->
-      <button id="darkModeToggle" style="width: 40px; height: 40px;">🌙</button>
+      <button id="darkModeToggle">🌙</button>
   </nav>
 
               
@@ -692,7 +692,7 @@ <h2>Book Your Ticket</h2>
         const ticketList = type === 'bus' ? document.getElementById('busTicketsList') : document.getElementById('trainTicketsList');
 
         if (filteredTickets.length === 0) {
-          ticketList.innerHTML = `<p>No ${type} tickets available.</p>`;
+          ticketList.innerHTML = <p>No ${type} tickets available.</p>;
         } else {
           filteredTickets.forEach(ticket => {
             const ticketElement = document.createElement('div');
@@ -711,7 +711,7 @@ <h3>${type === 'bus' ? ticket.busName : 'Train Number: ' + ticket.trainNumber}</
       }
 
       function buyTicket(ticketNumber, type) {
-        alert(`You have successfully purchased the ${type} ticket: ${ticketNumber}`);
+        alert(`You have successfully purchased the ${type}` `ticket: ${ticketNumber}`);
       }
     </script>
     <!-- footer -->
diff --git a/index.css b/index.css
index b11ac20..7c9b1bb 100644
--- a/index.css
+++ b/index.css
@@ -328,7 +328,12 @@ p {
   font-size: 20px;
   cursor: pointer;
 }
-
+@media (max-width:480px)
+{ 
+  #darkModeToggle{
+  margin-top: 20px;
+  }
+}
 /* Dark Mode CSS */
 body.dark-mode {
   background-color: #121212;
@@ -615,7 +620,8 @@ body.dark-mode .ticket-card button:hover {
 
 @media (max-width: 500px) {
   .navbar .logo {
-    font-size: 20px;
+    font-size: 15px;
+    margin-top: -15px;
   }
 
   .btn {
@@ -789,4 +795,4 @@ button:hover {
   .faq-heading {
     font-size: 20px;
   }
-}
+}
\ No newline at end of file