newest updates notification via php incl into colorbox on top

This commit is contained in:
simon 2021-03-07 22:03:35 +07:00
parent 524cd8379c
commit 054a544ee6
6 changed files with 26 additions and 12 deletions

1
.gitignore vendored
View File

@ -14,3 +14,4 @@ postgres.env
# dynamic files
**/dyn/*.json
**/dyn/
update.html

View File

@ -10,7 +10,7 @@
</head>
<body>
<div class="block_wrap light_background">
<?php include($_SERVER['DOCUMENT_ROOT'] . '/incl/topnav.html'); ?>
<?php include($_SERVER['DOCUMENT_ROOT'] . '/incl/topnav.php'); ?>
</div>
<div class="block_wrap">
<div class="content">

View File

@ -32,7 +32,7 @@ h3 {
font-size: 1.3em;
}
p {
p, li {
font-family: Rubik-Regular;
font-size: 1.1em;
}
@ -50,7 +50,8 @@ a {
}
.colorbox {
height: 40px;
color: #fff;
min-height: 40px;
margin: 0;
padding: 0;
position: sticky;
@ -59,6 +60,16 @@ a {
z-index: 1;
}
.colorbox p {
margin: 0;
padding: 10px 0;
}
.colorbox ul {
margin: 0;
padding-bottom: 10px;
}
.top_content {
display: flex;
flex-wrap: nowrap;
@ -86,7 +97,7 @@ a {
}
.title {
padding: 30px 0;
padding: 10px 0 30px 0;
flex: 80%;
}
@ -349,7 +360,7 @@ a {
}
.nav li {
display: inline-flex;
padding: 5px 20px;
padding: 5px 15px;
}
.nav ul {
margin: 10px auto;

View File

@ -12,14 +12,14 @@
</head>
<body>
<div class="block_wrap light_background">
<?php include($_SERVER['DOCUMENT_ROOT'] . '/incl/topnav.html'); ?>
<?php include($_SERVER['DOCUMENT_ROOT'] . '/incl/topnav.php'); ?>
</div>
<div class="block_wrap">
<div class="content">
<h1>Graphs</h1>
</div>
<div class="content">
<h2>Last three days</h2>
<h2 id="last3">Last three days</h2>
</div>
<div class="graph3 content">
<div class="graph_item">
@ -45,7 +45,7 @@
<hr class="col_border">
</div>
<div class="content">
<h2>Particle Matter sizes</h2>
<h2 id="pm">Particle Matter sizes</h2>
<p><b>There is no healthy level of pollution.</b> Particle matter (PM) are defined in two different sizes: PM 2.5 which represents particle sizes smaller than 2.5 &#xB5;m or less than 1/20th of the diameter of a human hair and PM 10 which represents particle sizer smaller than 10 &#xB5;m or 1/5th of the diameter of a human hair.</p>
<p>The <a href="https://www.who.int/news-room/fact-sheets/detail/ambient-(outdoor)-air-quality-and-health" target="_blank">WHO</a> is providing more details on their website regarding particle matter and their health implications. On <a href="https://en.wikipedia.org/wiki/Particulates" target="blank">Wikipedia</a> there are some interesting links to studies for further reading.</p>
</div>

View File

@ -1,4 +1,6 @@
<div class="colorbox" id="colorbox"></div>
<div class="colorbox" id="colorbox">
<?php include($_SERVER['DOCUMENT_ROOT'] . '/incl/update.html'); ?>
</div>
<div class="top_content content">
<div class="title">
<h1>Live Air Quality</h1>

View File

@ -17,7 +17,7 @@
</head>
<body>
<div class="block_wrap light_background">
<?php include($_SERVER['DOCUMENT_ROOT'] . '/incl/topnav.html'); ?>
<?php include($_SERVER['DOCUMENT_ROOT'] . '/incl/topnav.php'); ?>
<div class="top_content content">
<div class="cloud">
<img src="/img/cloud.png" alt="cloud" class="col_filter">
@ -107,13 +107,13 @@
<div class="block_wrap">
<div class="graph2 content">
<div class="graph_item">
<h3>Last three hours</h3>
<h3 id="last3">Last three hours</h3>
<a href="/dyn/current.png" data-lightbox="graph">
<img src="/dyn/current.png" alt="current">
</a>
</div>
<div class="graph_item">
<h3>Last 7 days</h3>
<h3 id=last7>Last 7 days</h3>
<a href="/dyn/last-7.png" data-lightbox="graph">
<img src="/dyn/last-7.png" alt="last-7 days">
</a>