wmantly/mp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Leo
2024-01-22 16:35:06 +08:00
parent 7dceee0b79
commit 409e647646
7 changed files with 152 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
consumerWebsite/public/css/api.css
View File

@ -523,4 +523,27 @@ body.one-content-column-version .content thead {
.cf:before, .cf:after { content: ""; display: block; }
.cf:after { clear: both; }
.ie6 .cf { zoom: 1 }
.ie6 .cf { zoom: 1 }
.generate-key-button {
float: right; /* Align the button to the right */
margin-right: 85%;
margin-top: -40px; /* Adjust the margin-top value based on your layout */
/* Add any additional styling you want for the button */
}
#content-get-api .generate-key-button {
background-color: #4caf50; /* Green background color */
color: white; /* White text color */
padding: 5px 11px; /* Padding for the button */
border: none; /* Remove button border */
border-radius: 5px; /* Add border-radius for rounded corners */
cursor: pointer; /* Add pointer cursor on hover */
font-size: 14px; /* Font size */
}
#content-get-api .generate-key-button:hover {
background-color: #45a049; /* Darker green on hover */
}

74
consumerWebsite/public/js/learnmore.js
View File

@ -1,28 +1,60 @@
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%";
// Replace the following with actual data retrieval based on the region
const aqi = "15";
const temperature = "25°C";
const humidity = "60%";
const pm25 = "10";
const pm10 = "20";
const so2 = "5";
const o3 = "35";
const co = "0.5";
const no2 = "15";
infoContainer.innerHTML = `
<div class="additional-info-box">
<h3>Additional Information - ${region}</h3>
<button id="downloadCsvButton">Download CSV</button>
<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 class="info-item">
<span class="info-label">PM2.5:</span>
<span class="info-value">${pm25}</span>
</div>
<div class="info-item">
<span class="info-label">PM10:</span>
<span class="info-value">${pm10}</span>
</div>
<div class="info-item">
<span class="info-label">SO2:</span>
<span class="info-value">${so2}</span>
</div>
<div class="info-item">
<span class="info-label">O3:</span>
<span class="info-value">${o3}</span>
</div>
<div class="info-item">
<span class="info-label">CO:</span>
<span class="info-value">${co}</span>
</div>
<div class="info-item">
<span class="info-label">NO2:</span>
<span class="info-value">${no2}</span>
</div>
</div>
`;
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');