adjust the UI to make it appealing?

ctkqiang · Nov 4, 2024 · ad3496f · ad3496f
1 parent 97dfbdb
commit ad3496f
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 9 deletions.
diff --git a/public/pages/about.ejs b/public/pages/about.ejs
@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
     <style>
         .hero-section {
-            background: linear-gradient(135deg, #1e88e5, #1565c0);
+            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');
             color: white;
             padding: 120px 0 60px 0;
             margin-bottom: 40px;

diff --git a/public/pages/aed.ejs b/public/pages/aed.ejs
@@ -10,45 +10,51 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
     <style>
+
+
       .hero-section {
-        background: linear-gradient(135deg, #1e88e5, #1565c0);
+        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');
         color: white;
         padding: 80px 0 20px 0;
       }
 
       .map-container {
         height: 70vh;
         margin: 20px 0;
-        border-radius: 10px;
+        border-radius: 20px;
         overflow: hidden;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
       }
 
       #map {
         height: 100%;
         width: 100%;
+        border-radius: 20px;
       }
 
       .popup-content {
         padding: 10px;
+        border-radius: 20px;
         min-width: 250px;
         max-width: 300px;
       }
 
       .popup-content .btn {
         color: white;
+        border-radius: 20px;
         margin-top: 10px;
         margin-bottom: 10px;
       }
 
       .popup-images {
         margin: 10px 0;
+        border-radius: 20px;
       }
 
       .popup-images img {
         max-width: 100%;
         height: auto;
-        border-radius: 5px;
+        border-radius: 20px;
         margin: 5px 0;
         display: block;
       }
@@ -62,8 +68,8 @@
       .carousel-item img {
         width: 100%;
         height: 200px;
+        border-radius: 20px;
         object-fit: cover;
-        border-radius: 5px;
       }
 
       .carousel-control-prev,
@@ -74,7 +80,7 @@
 
       .location-info {
         background: white;
-        border-radius: 10px;
+        border-radius: 20px;
         padding: 20px;
         margin-top: 20px;
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
@@ -89,7 +95,7 @@
       .custom-popup .leaflet-popup-content-wrapper {
           background: #ffffff;
           color: #333333;
-          border-radius: 10px;
+          border-radius: 20px;
           box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
       }
 
@@ -129,6 +135,7 @@
           background-color: #1e88e5;
           border-color: #1e88e5;
           transition: all 0.3s ease;
+          border-radius: 20px;
       }
 
       .custom-popup .btn-primary:hover {
@@ -151,7 +158,7 @@
       /* Carousel in popup */
       .custom-popup .carousel {
           border: 2px solid #f5f5f5;
-          border-radius: 8px;
+          border-radius: 20px;
       }
 
       /* Close button */

diff --git a/public/pages/contact.ejs b/public/pages/contact.ejs
@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
     <style>
         .contact-header {
-            background: linear-gradient(135deg, #1e88e5, #1565c0);
+            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');
             color: white;
             padding: 80px 0;
         }
@@ -232,6 +232,8 @@
             // Here you would typically send the data to your server
             console.log('Form submitted:', formData);
 
+            /// TODO add Logic here
+
             // Show success message
             const successAlert = document.getElementById('successAlert');
             successAlert.style.display = 'block';