Merge pull request #1005 from Ibrangrd/buy_page_responsive

Make buy page responsive
ankit071105 · Nov 6, 2024 · 2acbbd0 · 2acbbd0
2 parents 36054c1 + 4d84783
commit 2acbbd0
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git 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
@@ -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 {
@@ -790,4 +796,4 @@ button:hover {
   .faq-heading {
     font-size: 20px;
   }
-}
+}