added active category with description to hopepage, pull updates dynamically.
This commit is contained in:
parent
af07065462
commit
e59eefca06
|
|
@ -24,21 +24,23 @@ h1 {
|
|||
}
|
||||
|
||||
h2 {
|
||||
font-family: Rubik-Light;
|
||||
font-family: Rubik-Bold;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: Rubik-Bold;
|
||||
font-family: Rubik-Light;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
p {
|
||||
font-family: Rubik-Regular;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.top_content,
|
||||
.weather_content,
|
||||
.tagline_content {
|
||||
.tagline_content,
|
||||
.desc_content {
|
||||
width: 70%;
|
||||
max-width: 900px;
|
||||
margin-left: auto;
|
||||
|
|
@ -126,10 +128,79 @@ p {
|
|||
margin: 10px 0;
|
||||
}
|
||||
|
||||
/* descriptions */
|
||||
.desc_wrap {
|
||||
margin: 40px 0;
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
.desc_content {
|
||||
display: grid;
|
||||
grid-template-columns: 33% 33% 33%;
|
||||
grid-column-gap: 10px;
|
||||
}
|
||||
|
||||
.desc_box {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.desc_item_wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.desc_item {
|
||||
padding: 8px 10px;
|
||||
margin: 10px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
width: 200px;
|
||||
transform: scale(1);
|
||||
transition-timing-function: ease;
|
||||
-webkit-transition: transform 2s;
|
||||
-moz-transition: transform 2s;
|
||||
-ms-transition: transform 2s;
|
||||
-o-transition: transform 2s;
|
||||
transition: transform 2s;
|
||||
}
|
||||
|
||||
.good {
|
||||
background-color: #85a762;
|
||||
}
|
||||
.moderate {
|
||||
background-color: #d4b93c;
|
||||
}
|
||||
.ufsg {
|
||||
background-color: #e96843;
|
||||
}
|
||||
.unhealthy {
|
||||
background-color: #d03f3b;
|
||||
}
|
||||
.vunhealthy {
|
||||
background-color: #be4173;
|
||||
}
|
||||
.hazardous {
|
||||
background-color: #714261;
|
||||
}
|
||||
|
||||
.category_icon img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tagline_content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.desc_item.active {
|
||||
transform: scale(1.2);
|
||||
font-size: 1.2em;
|
||||
box-shadow: darkgray 5px 5px;
|
||||
font-weight: bold;
|
||||
|
||||
}
|
||||
|
||||
/* responsiv */
|
||||
@media screen and (max-width: 1100px) {
|
||||
.top_content,
|
||||
|
|
@ -176,4 +247,7 @@ p {
|
|||
.weather_text h3 {
|
||||
font-size: 1.2;
|
||||
}
|
||||
.desc_content {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
@ -66,6 +66,42 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="desc_wrap light_background">
|
||||
<div class="desc_content">
|
||||
<div class="desc_box">
|
||||
<div class="desc_item_wrap">
|
||||
<div class="desc_item good">
|
||||
<p>GOOD</p>
|
||||
</div>
|
||||
<div class="desc_item moderate">
|
||||
<p>MODERATE</p>
|
||||
</div>
|
||||
<div class="desc_item ufsg">
|
||||
<p>UNHEALTHY FOR SENSITIVE GROUPS</p>
|
||||
</div>
|
||||
<div class="desc_item unhealthy">
|
||||
<p>UNHEALTHY</p>
|
||||
</div>
|
||||
<div class="desc_item vunhealthy">
|
||||
<p>VERY UNHEALTHY</p>
|
||||
</div>
|
||||
<div class="desc_item hazardous">
|
||||
<p>HAZARDOUS</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="desc_box">
|
||||
<div class="category_icon">
|
||||
<img src="/img/icon/category-plain.png" alt="category_icon" id="categoryIcon">
|
||||
</div>
|
||||
</div>
|
||||
<div class="desc_box">
|
||||
<h2 class="col_font" id="aqiName"></h2>
|
||||
<h3 id="aqiRange"></h3>
|
||||
<p id="aqiDesc">Good: No health concerns, enjoy activities.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tagline_wrap">
|
||||
<div class="tagline_content">
|
||||
<h1>More is coming soon here!</h1>
|
||||
|
|
|
|||
|
|
@ -6,27 +6,45 @@ var colorConfig =
|
|||
// green
|
||||
'Good': [
|
||||
"#85a762", "#dbe4d1",
|
||||
"invert(66%) sepia(11%) saturate(1318%) hue-rotate(47deg) brightness(92%) contrast(86%)"],
|
||||
"invert(66%) sepia(11%) saturate(1318%) hue-rotate(47deg) brightness(92%) contrast(86%)",
|
||||
"AQI 0 to 50",
|
||||
"Good: No health concerns, enjoy activities."
|
||||
],
|
||||
// yellow
|
||||
'Moderate': [
|
||||
"#d4b93c", "#f9f0c7",
|
||||
"invert(79%) sepia(5%) saturate(4660%) hue-rotate(9deg) brightness(89%) contrast(103%)"],
|
||||
"invert(79%) sepia(5%) saturate(4660%) hue-rotate(9deg) brightness(89%) contrast(103%)",
|
||||
"AQI 51 - 100:",
|
||||
"Moderate: Active children and adults, and people with respiratory disease, such as asthma, should limit prolonged outdoor exertion."
|
||||
],
|
||||
// orange
|
||||
'Unhealthy for Sensitive Groups': [
|
||||
"#e96843", "#f8d0c8",
|
||||
"invert(61%) sepia(93%) saturate(3252%) hue-rotate(333deg) brightness(95%) contrast(91%)"],
|
||||
"invert(61%) sepia(93%) saturate(3252%) hue-rotate(333deg) brightness(95%) contrast(91%)",
|
||||
"AQI 101 - 150:",
|
||||
"Unhealthy for Sensitive Groups: Active children and adults, and people with respiratory disease, such as asthma, should limit prolonged outdoor exertion."
|
||||
],
|
||||
// red
|
||||
'Unhealthy': [
|
||||
"#d03f3b", "#f1c5c4",
|
||||
"invert(39%) sepia(16%) saturate(2264%) hue-rotate(314deg) brightness(97%) contrast(110%)"],
|
||||
"invert(39%) sepia(16%) saturate(2264%) hue-rotate(314deg) brightness(97%) contrast(110%)",
|
||||
"AQI 151 - 200:",
|
||||
"Unhealthy: Everyone may begin to experience health effects: Active children and adults, and people with respiratory disease, such as asthma, should avoid prolonged outdoor exertion; everyone else, especially children, should limit prolonged outdoor exertion."
|
||||
],
|
||||
// pink
|
||||
'Very Unhealthy': [
|
||||
"#be4173", "#e9c9d6",
|
||||
"invert(45%) sepia(32%) saturate(3238%) hue-rotate(308deg) brightness(77%) contrast(90%)"],
|
||||
"invert(45%) sepia(32%) saturate(3238%) hue-rotate(308deg) brightness(77%) contrast(90%)",
|
||||
"AQI 201 - 300:",
|
||||
"Very Unhealthy: Active children and adults, and people with respiratory disease, such as asthma, should avoid all outdoor exertion; everyone else, especially children, should limit outdoor exertion."
|
||||
],
|
||||
// violet
|
||||
'Hazardous': [
|
||||
"#714261", "#d7c6d0",
|
||||
"invert(31%) sepia(8%) saturate(2659%) hue-rotate(268deg) brightness(91%) contrast(88%)"]
|
||||
"invert(31%) sepia(8%) saturate(2659%) hue-rotate(268deg) brightness(91%) contrast(88%)",
|
||||
"AQI 301 - 500:",
|
||||
"Hazardous: Everyone should avoid all outdoor exertion."
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -50,6 +68,7 @@ function refreshAqiValues() {
|
|||
setAqiValues(timestamp,aqiValue,aqiCategory);
|
||||
setAqiColors(aqiCategory);
|
||||
setWeatherDetails(responseAqi);
|
||||
setDesc(responseAqi);
|
||||
};
|
||||
req.send();
|
||||
}
|
||||
|
|
@ -112,4 +131,30 @@ function setWeatherDetails(responseAqi) {
|
|||
document.getElementById('humidity').innerHTML = humidity;
|
||||
// pressure
|
||||
document.getElementById('pressure').innerHTML = pressure;
|
||||
}
|
||||
}
|
||||
|
||||
function setDesc(responseAqi) {
|
||||
// parse response
|
||||
var aqiCategory = responseAqi['aqi_category'];
|
||||
var aqiCatClean = aqiCategory.toLowerCase().replaceAll(' ', '');
|
||||
var iconSrc = '/img/icon/category-' + aqiCatClean + ".png";
|
||||
// parse config
|
||||
var aqiRange = colorConfig[aqiCategory][3];
|
||||
var aqiDesc = colorConfig[aqiCategory][4];
|
||||
// set values
|
||||
document.getElementById('categoryIcon').src = iconSrc;
|
||||
document.getElementById('aqiName').innerHTML = aqiCategory;
|
||||
document.getElementById('aqiRange').innerHTML = aqiRange;
|
||||
document.getElementById('aqiDesc').innerHTML = aqiDesc;
|
||||
// remove active if any
|
||||
var active = document.querySelector(".active");
|
||||
if (active) {
|
||||
active.classList.remove("active");
|
||||
};
|
||||
// figure out which to activate
|
||||
var allCategories = Object.keys(colorConfig);
|
||||
var indexMatch = allCategories.indexOf(aqiCategory);
|
||||
var activeCat = document.getElementsByClassName('desc_item')[indexMatch];
|
||||
// activate
|
||||
activeCat.classList.add("active");
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue