update
This commit is contained in:
Leo
parent
c76c819689
commit
bd58f96d3c
@ -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;
|
||||
}
|
||||
|
||||
0
consumerWebsite/public/documentation.html
Normal file
0
consumerWebsite/public/documentation.html
Normal file
87
consumerWebsite/public/js/learnmore.js
Normal file
87
consumerWebsite/public/js/learnmore.js
Normal file
@ -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");
|
||||
});
|
||||
|
||||
19
consumerWebsite/public/js/search.js
Normal file
19
consumerWebsite/public/js/search.js
Normal file
@ -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';
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -54,10 +54,37 @@
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<div class="map">
|
||||
<img src="images/map.png" alt="Map Image">
|
||||
</div>
|
||||
<div id="map-container">
|
||||
<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>
|
||||
@ -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>
|
||||
Loading…
x
Reference in New Issue
Block a user