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

added preloader so css can be applied properly even after dom loaded

This commit is contained in:
simon 2021-03-13 19:10:26 +07:00
parent 3c7ce744f9
commit db700d07bb
5 changed files with 38 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,10 +5,13 @@
<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">
<script src="/js/aqi.js"></script>
<title>About</title>
<script src="/js/aqi.js"></script>
</head>
<body>
<div class="preload">
<img src="/img/cloud_colors.gif" alt="cloud_animation">
</div>
<div class="block_wrap light_background">
<?php include($_SERVER['DOCUMENT_ROOT'] . '/incl/topnav.php'); ?>
</div>

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

@ -16,6 +16,7 @@
body {
margin: 0;
padding: 0;
overflow: hidden;
}
h1 {
@ -37,6 +38,27 @@ p, li {
font-size: 1.1em;
}
.preload {
position: fixed;
top: 0;
width: 100%;
height: 100vh;
background: #e6e6e6;
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
}
.preload img {
width: 100px;
}
.preload-finish {
opacity: 0;
pointer-events: none;
}
a {
color: inherit;
font-family: Rubik-Regular;
@ -51,7 +73,7 @@ a {
.content-date {
display: inline-block;
width: 90px;
min-width: 90px;
}
.colorbox {
@ -59,8 +81,6 @@ a {
min-height: 40px;
margin: 0;
padding: 0;
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 1;
}
@ -111,7 +131,7 @@ a {
}
.divider hr {
border: 2px solid;
border: 1px solid;
}
.cloud {

7
frontend/nginx/graphs/index.php
View File

@ -6,11 +6,14 @@
<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">
<title>Graphs</title>
<script src="/js/aqi.js"></script>
<script src="/js/lightbox.js"></script>
<title>Graphs</title>
</head>
<body>
<div class="preload">
<img src="/img/cloud_colors.gif" alt="cloud_animation">
</div>
<div class="block_wrap light_background">
<?php include($_SERVER['DOCUMENT_ROOT'] . '/incl/topnav.php'); ?>
</div>
@ -92,7 +95,7 @@
<div>
<h3>Hourly AQI average</h3>
<p>The AQI value can change a lot during the day. This can depend on the wind, cooking on fire or just another additional source of pollution nearby.</p>
<p>In this chart you can see the average AQI for each hour. This data is based on the last three days. This data can help to visualize which hours in the past three hours have been better or worse on average.</p>
<p>In this chart you can see the average AQI for each hour. This data is based on the last three days. This data can help to visualize which hours in the past three days have been better or worse on average.</p>
</div>
</div>
<div class="content divider">

BIN
frontend/nginx/img/cloud_colors.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.0 KiB

7
frontend/nginx/index.php
View File

@ -6,9 +6,9 @@
<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>
<script src="/js/aqi.js"></script>
<script src="/js/lightbox.js"></script>
<meta property="og:title" content="Live Air Quality in Luang Prabang Laos PDR" />
<meta property="og:url" content="https://www.lpb-air.com/" />
<meta property="og:image" content="https://www.lpb-air.com/img/social_preview.jpg" />
@ -16,6 +16,9 @@
<meta property="og:description" content="Real-time and on site air quality measurment and changes over time." />
</head>
<body>
<div class="preload">
<img src="/img/cloud_colors.gif" alt="cloud_animation">
</div>
<div class="block_wrap light_background">
<?php include($_SERVER['DOCUMENT_ROOT'] . '/incl/topnav.php'); ?>
<div class="top_content content">