simon
/
aqi_monitor
mirror of https://github.com/bbilly1/aqi_monitor.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

added graph as a dedicated page

This commit is contained in:
simon 2021-02-24 16:33:43 +07:00
parent de4d2a36e4
commit d9c3f65cfe
5 changed files with 83 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/nginx/about/index.php
View File

@ -81,6 +81,7 @@
<div class="credits content">
<h2>Credits</h2>
<p>Partial Weather data, namely weather icon, weather description and windspeed are provided from <a href="https://openweathermap.org/ " target="_blank">openweather.org</a> API distributed under the <a href="https://openweathermap.org/full-price" target="_blank">Creative Commons Attribution-ShareAlike 4.0 Generic License</a>.</p>
<p><a target="_blank" href="https://github.com/lokesh/lightbox2">Lightbox</a> made by Lokesh Dhakar, released under the <a target="_blank" href="https://raw.githubusercontent.com/lokesh/lightbox2/master/LICENSE">MIT license</a>.</p>
</div>
</div>
<?php include($_SERVER['DOCUMENT_ROOT'] . '/incl/footer.html'); ?>

25
frontend/nginx/css/style.css
View File

@ -276,6 +276,23 @@ a {
display: flex;
}
/* graphs */
.graph2 {
display: grid;
grid-template-columns: 50% 50%;
grid-column-gap: 10px;
}
.graph3 {
display: grid;
grid-template-columns: 33% 33% 33%;
grid-column-gap: 10px;
}
.graph_item img {
width: 100%;
}
/* footer */
.footer_wrap {
height: 50px;
@ -310,7 +327,7 @@ a {
}
.nav li {
display: inline-flex;
padding: 5px 40px;
padding: 5px 25px;
}
.nav ul {
margin: 10px auto 10px auto;
@ -358,4 +375,10 @@ a {
.category_icon {
padding: 0 20%;
}
.graph2 {
display: block;
}
.graph3 {
grid-template-columns: 100%;
}
}

48
frontend/nginx/graphs/index.php Normal file
View File

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/lightbox.css">
<script src="/js/aqi.js"></script>
<script src="/js/lightbox.js"></script>
<title>Graphs</title>
</head>
<body>
<div class="block_wrap light_background">
<?php include($_SERVER['DOCUMENT_ROOT'] . '/incl/topnav.html'); ?>
</div>
<div class="block_wrap">
<div class="content">
<h1>Graphs</h1>
</div>
<div class="graph3 content">
<div class="graph_item">
<p>Three days ago</p>
<a href="/dyn/day-3.png" data-lightbox="graph">
<img src="/dyn/day-3.png" alt="day-3">
</a>
</div>
<div class="graph_item">
<p>Two days ago</p>
<a href="/dyn/day-2.png" data-lightbox="graph">
<img src="/dyn/day-2.png" alt="day-2">
</a>
</div>
<div class="graph_item">
<p>Yesterday</p>
<a href="/dyn/day-1.png" data-lightbox="graph">
<img src="/dyn/day-1.png" alt="day-1">
</a>
</div>
</div>
</div>
<div class="block_wrap">
<div class="tagline_content content">
<h2>Some more graphs are coming soon here!</h2>
</div>
</div>
</body>
</html>

1
frontend/nginx/incl/topnav.html
View File

@ -9,6 +9,7 @@
<ul>
<a href="/"><li class="col_border">Home</li></a>
<a href="/about"><li class="col_border">About</li></a>
<a href="/graphs"><li class="col_border">Graphs</li></a>
</ul>
</div>
</div>

11
frontend/nginx/index.php
View File

@ -5,6 +5,8 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/lightbox.css">
<script src="/js/lightbox.js"></script>
<script src="/js/aqi.js"></script>
<title>AQI</title>
</head>
@ -98,8 +100,13 @@
</div>
</div>
<div class="block_wrap">
<div class="tagline_content content">
<h2>Some cool graphs are coming soon here!</h2>
<div class="graph2 content">
<div class="graph_item">
<h3>Last three hours</h3>
<a href="/dyn/current.png" data-lightbox="graph">
<img src="/dyn/current.png" alt="current">
</a>
</div>
</div>
</div>
<?php include($_SERVER['DOCUMENT_ROOT'] . '/incl/footer.html'); ?>