updated how to use aed

ctkqiang · Nov 4, 2024 · dad15c8 · dad15c8
1 parent a57f3df
commit dad15c8
Showing 1 changed file with 141 additions and 0 deletions.
diff --git a/public/index.ejs b/public/index.ejs
@@ -15,6 +15,47 @@
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
     <style>
+
+    @media (max-width: 768px) {
+      /* Hide screenshot column on mobile */
+      .hero-section .col-lg-6:last-child {
+        display: none;
+      }
+
+      /* Make the text column full width */
+      .hero-section .col-lg-6:first-child {
+        width: 100%;
+        text-align: center;
+        padding: 40px 20px;
+      }
+
+      /* Adjust hero section height for mobile without image */
+      .hero-section {
+        min-height: 60vh;
+        padding: 60px 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      /* Center the button */
+      .hero-section .btn {
+        margin: 0 auto;
+        display: block;
+      }
+
+      /* Adjust text sizes for better mobile readability */
+      .hero-section .display-4 {
+        font-size: 2.2rem;
+        margin-bottom: 1rem;
+      }
+
+      .hero-section .lead {
+        font-size: 1.1rem;
+        margin-bottom: 2rem;
+      }
+    }
+
     .hero-section {
             background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)), url('/assets/illustration/paramedic-giving-oxygen-injured-girl_107420-63759.webp');
             background-size: cover;
@@ -99,6 +140,106 @@
         border-radius: 20px;
       }
 
+      @media (max-width: 768px) {
+        .hero-section {
+          padding: 60px 0;
+          min-height: auto;
+        }
+
+        .hero-content {
+          text-align: center;
+          padding: 20px;
+        }
+
+        .display-4 {
+          font-size: 2rem;
+        }
+
+        .lead {
+          font-size: 1.1rem;
+        }
+
+        .screenshot {
+          margin-top: 30px;
+          transform: none !important;
+        }
+
+        .screenshot:hover {
+          transform: none !important;
+        }
+
+        .feature-card {
+          margin-bottom: 20px;
+        }
+
+        .icon-large {
+          font-size: 2.5rem;
+        }
+      }
+
+      /* Touch-friendly interactions */
+      @media (hover: none) {
+        .feature-card:hover {
+          transform: none;
+        }
+
+        .screenshot:hover {
+          transform: none;
+        }
+
+        .screenshot img:hover {
+          transform: none;
+        }
+      }
+
+      /* Improved navigation for mobile */
+      @media (max-width: 768px) {
+        .navbar-nav {
+          text-align: center;
+          padding: 10px 0;
+        }
+
+        .nav-item {
+          padding: 5px 0;
+        }
+      }
+
+      /* Better spacing for mobile content */
+      @media (max-width: 768px) {
+        section {
+          padding: 40px 0;
+        }
+
+        .container {
+          padding-left: 20px;
+          padding-right: 20px;
+        }
+      }
+
+      /* Dynamic font sizing */
+      :root {
+        --base-font-size: 16px;
+      }
+
+      @media (max-width: 768px) {
+        :root {
+          --base-font-size: 14px;
+        }
+      }
+
+      body {
+        font-size: var(--base-font-size);
+      }
+
+      /* Add smooth touch feedback */
+      .btn {
+        transition: transform 0.2s ease;
+      }
+
+      .btn:active {
+        transform: scale(0.95);
+      }
+
       @keyframes pulse {
         0% {
           transform: scale(1);