update

consumerWebsite/public/css/learnmore.css

@@ -1,6 +1,102 @@
-img {
+body {
+    margin: 0;
+    font-family: Arial, sans-serif;
+}
+
+#map {
     display: block;
     margin: auto;
     max-width: 100%;
     max-height: 100vh;
 }
+
+#map-container {
+    position: relative;
+}
+
+#north {
+    top: 25%;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+#south {
+    top: 60%;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+#east {
+    top: 50%;
+    left: 60%;
+    transform: translateX(-50%) translateY(-50%);
+}
+
+#west {
+    top: 50%;
+    left: 40%;
+    transform: translateX(-50%) translateY(-50%);
+}
+
+#central {
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+}
+
+.info-box {
+    position: absolute;
+    background-color: rgba(255, 255, 255, 0.8);
+    padding: 10px;
+    border-radius: 5px;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+    font-size: 12px;
+}
+
+#north h3 {
+    color: #34d0db;
+}
+
+#south h3 {
+    color: #2ecc71;
+}
+
+#east h3 {
+    color: #3498db;
+}
+
+#west h3 {
+    color: #e74c3c;
+}
+
+.additional-info-box {
+    background-color: #f8f8f8;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    padding: 15px;
+    margin: 20px auto; /* Center horizontally */
+    max-width: 300px auto; /* Adjust the maximum width as needed */
+    text-align: center; /* Center text horizontally */
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.info-item {
+    margin-bottom: 10px;
+}
+
+.info-label {
+    font-weight: bold;
+    margin-right: 10px;
+}
+
+.info-value {
+    color: #007bff; /* Adjust the color as needed */
+}
+
+.info-box.active {
+    background-color: #213f6d; 
+    color: #fff;
+}

consumerWebsite/public/js/learnmore.js

@@ -0,0 +1,87 @@
+document.addEventListener("DOMContentLoaded", function () {
+    function updateAdditionalInfo(region) {
+        const infoContainer = document.getElementById("additional-info");
+        // Replace the following with actual data retrieval based on the region
+        const aqi = "15";
+        const temperature = "25°C";
+        const humidity = "60%";
+
+        infoContainer.innerHTML = `
+            <div class="additional-info-box">
+                <h3>Additional Information - ${region}</h3>
+                <div class="info-item">
+                    <span class="info-label">Air Quality Index:</span>
+                    <span class="info-value">${aqi}</span>
+                </div>
+                <div class="info-item">
+                    <span class="info-label">Temperature:</span>
+                    <span class="info-value">${temperature}</span>
+                </div>
+                <div class="info-item">
+                    <span class="info-label">Humidity:</span>
+                    <span class="info-value">${humidity}</span>
+                </div>
+            </div>
+        `;
+
+        // Remove the 'active' class from all info-box elements
+        const infoBoxes = document.querySelectorAll('.info-box');
+        infoBoxes.forEach(box => box.classList.remove('active'));
+
+        // Add the 'active' class to the clicked info-box
+        const clickedBox = document.getElementById(region.toLowerCase());
+        clickedBox.classList.add('active');
+    }
+
+    const defaultRegion = "North";
+    const defaultBox = document.getElementById(defaultRegion.toLowerCase());
+    defaultBox.classList.add('active');
+    const defaultAqi = "--"; // Replace with actual data retrieval
+    updateAdditionalInfo(defaultRegion, defaultAqi);
+    
+    // Event listeners for each region's info-box
+    document.getElementById("north").addEventListener("click", function () {
+        const northAqi = "--"; // Replace with actual data retrieval
+        updateAdditionalInfo("North", northAqi);
+    });
+    document.getElementById("south").addEventListener("click", function () {
+        const southAqi = "--";
+        updateAdditionalInfo("South", southAqi);
+    });
+    document.getElementById("east").addEventListener("click", function () {
+        const eastAqi = "--";
+        updateAdditionalInfo("East", eastAqi);
+    });
+    document.getElementById("west").addEventListener("click", function () {
+        const westAqi = "--";
+        updateAdditionalInfo("West", westAqi);
+    });
+    document.getElementById("central").addEventListener("click", function () {
+        const centralAqi = "--";
+        updateAdditionalInfo("Central", centralAqi);
+    });
+
+});
+
+
+// Event listeners for each region's info-box
+document.getElementById("north").addEventListener("click", function () {
+    updateAdditionalInfo("North");
+});
+
+document.getElementById("south").addEventListener("click", function () {
+    updateAdditionalInfo("South");
+});
+
+document.getElementById("east").addEventListener("click", function () {
+    updateAdditionalInfo("East");
+});
+
+document.getElementById("west").addEventListener("click", function () {
+    updateAdditionalInfo("West");
+});
+
+document.getElementById("central").addEventListener("click", function () {
+    updateAdditionalInfo("Central");
+});
+

consumerWebsite/public/js/search.js

@@ -0,0 +1,19 @@
+function searchFunction() {
+    // Get the search input value
+    var searchTerm = document.getElementById('searchInput').value.toLowerCase();
+
+    // Get all blog entries
+    var blogEntries = document.getElementById('blogEntries').getElementsByClassName('card');
+
+    // Loop through each blog entry and hide/show based on the search term
+    for (var i = 0; i < blogEntries.length; i++) {
+      var title = blogEntries[i].getElementsByClassName('card-title')[0].innerText.toLowerCase();
+      var text = blogEntries[i].getElementsByClassName('card-text')[0].innerText.toLowerCase();
+
+      if (title.includes(searchTerm) || text.includes(searchTerm)) {
+        blogEntries[i].style.display = 'block';
+      } else {
+        blogEntries[i].style.display = 'none';
+      }
+    }
+  }

consumerWebsite/public/learnmore.html

@@ -54,10 +54,37 @@
     <br>
     <br>
 
-    <div class="map">
+    <div id="map-container">
-        <img src="images/map.png" alt="Map Image">
+        <img src="images/map.png" alt="Singapore Map" id="map">
+
+        <!-- Information boxes for each region -->
+        <div class="info-box" id="north">
+            <h3>North</h3>
+            <p>Air Quality Index: 15 <span id="north-aqi"></span></p>
         </div>
 
+        <div class="info-box" id="south">
+            <h3>South</h3>
+            <p>Air Quality Index: 16 <span id="south-aqi"></span></p>
+        </div>
+
+        <div class="info-box" id="east">
+            <h3>East</h3>
+            <p>Air Quality Index: 16 <span id="east-aqi"></span></p>
+        </div>
+
+        <div class="info-box" id="west">
+            <h3>West</h3>
+            <p>Air Quality Index: 18 <span id="west-aqi"></span></p>
+        </div>
+
+        <div class="info-box" id="central">
+            <h3>Central</h3>
+            <p>Air Quality Index: 17 <span id="central-aqi"></span></p>
+        </div>
+
+    </div>
+    <div id="additional-info"></div>
 
     <br>
     <br>
@@ -148,6 +175,7 @@
     <!-- Bootstrap core JavaScript -->
     <script src="vendor/jquery/jquery.min.js"></script>
     <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+    <script src="js/learnmore.js"></script>
 </body>
 
 </html>

consumerWebsite/public/news.html

@@ -73,7 +73,7 @@
 
 	<div class="container">
 		<div class="row">
-			<div class="col-md-8 blog-entries">
+			<div class="col-md-8 blog-entries" id="blogEntries">
 				<div class="card mb-4">
 					<img class="card-img-top" src="images/newspic.jpg" alt="Card image Blog" />
 					<div class="card-body">
@@ -145,7 +145,7 @@
 					<h5 class="card-header">Search</h5>
 					<div class="card-body">
 						<div class="input-group">
-							<input type="text" class="form-control" placeholder="Search for...">
+							<input type="text" id="searchInput" oninput="searchFunction()" class="form-control" placeholder="Search for...">
 							<span class="input-group-btn">
 								<button class="btn btn-secondary" type="button">Go!</button>
 							</span>
@@ -242,6 +242,7 @@
 	<!-- Bootstrap core JavaScript -->
 	<script src="vendor/jquery/jquery.min.js"></script>
 	<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+	<script src="js/search.js"></script>
 </body>
 
 </html>