diff --git a/consumerWebsite/public/css/learnmore.css b/consumerWebsite/public/css/learnmore.css index f8a3b5b..7d7589f 100644 --- a/consumerWebsite/public/css/learnmore.css +++ b/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; -} \ No newline at end of file +} + +#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; +} diff --git a/consumerWebsite/public/documentation.html b/consumerWebsite/public/documentation.html new file mode 100644 index 0000000..e69de29 diff --git a/consumerWebsite/public/js/learnmore.js b/consumerWebsite/public/js/learnmore.js new file mode 100644 index 0000000..c965824 --- /dev/null +++ b/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 = ` +
+

Additional Information - ${region}

+
+ Air Quality Index: + ${aqi} +
+
+ Temperature: + ${temperature} +
+
+ Humidity: + ${humidity} +
+
+ `; + + // 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"); +}); + diff --git a/consumerWebsite/public/js/search.js b/consumerWebsite/public/js/search.js new file mode 100644 index 0000000..6b1d6a7 --- /dev/null +++ b/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'; + } + } + } \ No newline at end of file diff --git a/consumerWebsite/public/learnmore.html b/consumerWebsite/public/learnmore.html index ada7a5d..a8cc7ba 100644 --- a/consumerWebsite/public/learnmore.html +++ b/consumerWebsite/public/learnmore.html @@ -54,10 +54,37 @@

-
- Map Image -
+
+ Singapore Map + +
+

North

+

Air Quality Index: 15

+
+ +
+

South

+

Air Quality Index: 16

+
+ +
+

East

+

Air Quality Index: 16

+
+ +
+

West

+

Air Quality Index: 18

+
+ +
+

Central

+

Air Quality Index: 17

+
+ +
+


@@ -148,6 +175,7 @@ + \ No newline at end of file