claudecode/AvianVisitors
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

aesthetic changes

Browse Source
This commit is contained in:
Patrick McGuire
2021-12-03 14:47:15 -05:00
parent 631b048fb8
commit e6d64c7819
4 changed files with 173 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files
homepage/style.css
+50 -56
View File
@@ -5,21 +5,26 @@
box-sizing: border-box; box-sizing: border-box;
} }
.row { /* Create two equal columns that floats next to each other */
display: flex;
}
.column1 {
flex: 70%;
}
.column2 { .column2 {
flex: 30%; margin-left: auto;
margin-right: auto;
width: 75%;
padding: 5px;
} }
/* Create two equal columns that floats next to each other */
.column { .column {
flex: 50%; float: left;
padding-right: 5px; width: 50%;
padding: 5px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
} }
table { table {
@@ -39,64 +44,53 @@ h1 {
} }
h2 { h2 {
margin-left: -150px;
text-align: center; text-align: center;
color: black; color: black;
font-size: large; font-size: large;
} }
th, h3 {
td {
background-color: rgb(219, 255, 235);
font-weight: bold;
border: 1px solid black;
padding: 10px;
text-align: center;
}
@media screen and (max-width: 800px) {
.column {
float: none;
width: 100%;
}
table {
background-color: rgb(219, 255, 235);
margin: 0 auto;
font-size: medium;
border-collapse: collapse;
border-spacing: 1;
width: 100%;
border: 1px solid black;
}
h1 {
text-align: center; text-align: center;
color: black; color: black;
font-size: large; font-size: large;
font-family: 'Gill Sans', 'Gill Sans MT',
' Calibri', 'Trebuchet MS', 'sans-serif';
} }
h2 {
text-align: center;
color: black;
font-size: large;
font-family: 'Gill Sans', 'Gill Sans MT',
' Calibri', 'Trebuchet MS', 'sans-serif';
}
th,
td { td {
background-color: rgb(219, 255, 235); background-color: rgb(219, 255, 235);
font-weight: bold;
border: 1px solid black;
padding: 10px;
text-align: center;
}
}
td {
font-weight: lighter; font-weight: lighter;
border: 1px solid black;
padding: 10px;
text-align: center;
}
th {
background-color: rgb(219, 255, 235);
font-weight: bold;
border: 1px solid black;
padding: 10px;
text-align: center;
}
@media screen and (max-width: 600px) {
h2 {
margin-left: 0;
text-align: center;
color: black;
font-size: large;
}
.column {
width: 100%;
}
/* Create two equal columns that floats next to each other */
.column2 {
float: center;
width: 100%;
padding: 0px;
}
} }
body::-webkit-scrollbar { body::-webkit-scrollbar {
display:none display:none
}
scripts/overview.php
+11 -14
View File
@@ -50,36 +50,33 @@ $mysqli->close();
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> --> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Overview</title> <title>Overview</title>
<!-- CSS FOR STYLING THE PAGE --> <!-- CSS FOR STYLING THE PAGE -->
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<style> <style>
table,td,th {
background-color: rgb(219, 255, 235);
}
.center { .center {
display: block; display: block;
margin-left: 5px; margin-left: 5px;
margin-right: 5px; margin-right: 5px;
width: 90%; width: 90%;
padding-top: 10px; padding: 5px;
} }
.center2 { .center2 {
display: block; display: block;
margin-left: 5px; margin-left: 5px;
margin-right: 5px; margin-right: 5px;
width: 100%; width: 100%;
padding-top: 10px; padding: 5px;
} }
</style> </style>
</head> </head>
<body style="background-color: rgb(119, 196, 135);"> <body style="background-color: rgb(119, 196, 135);">
<h2 style="margin-left: -150px;">Overview</h2> <h2>Overview</h2>
<div class="row"> <div class="row">
<div class="column" style="padding-right: 5px;"> <div class="column2">
<?php // LOOP TILL END OF DATA <?php // LOOP TILL END OF DATA
while($rows=$mostrecent ->fetch_assoc()) while($rows=$mostrecent ->fetch_assoc())
{ {
@@ -98,8 +95,8 @@ while($rows=$mostrecent ->fetch_assoc())
} }
?> ?>
<div class="row" style="padding-top: 10px;"> <div class="row">
<div class="column" style="flex: 70%;padding-right: auto;"> <div class="column">
<table> <table>
<tr> <tr>
<th></th> <th></th>
@@ -115,7 +112,7 @@ while($rows=$mostrecent ->fetch_assoc())
</tr> </tr>
</table> </table>
</div> </div>
<div class="column" style="flex: 30%;padding-right: 5px;padding-left: auto;"> <div class="column">
<table> <table>
<tr> <tr>
<th>Species Detected Today</th> <th>Species Detected Today</th>
@@ -124,8 +121,8 @@ while($rows=$mostrecent ->fetch_assoc())
</table> </table>
</div> </div>
</div> </div>
<h2 style="margin-left: -150px;">Today's Top 10 Species</h2> <h2>Today's Top 10 Species</h2>
<img src='/Charts/Combo-<?php echo $myDate;?>.png?nocache=<?php echo time();?>' style="width: 100%;padding: 5px;"> <img src='/Charts/Combo-<?php echo $myDate;?>.png?nocache=<?php echo time();?>' style="width: 100%;padding: 5px;margin-left: auto;margin-right: auto;display: block;">
<h2 style="margin-left: -150px;">Currently Analyzing</h2> <h2>Currently Analyzing</h2>
<img src='/spectrogram.png?nocache=<?php echo time();?>' style="width: 100%;padding: 5px;"> <img src='/spectrogram.png?nocache=<?php echo time();?>' style="width: 100%;padding: 5px;">
</html> </html>
scripts/viewday.php
+6 -5
View File
@@ -66,21 +66,23 @@ table,th,td {
} }
</style> </style>
</head> </head>
<body style="background-color: rgb(119, 196, 135);background-image: linear-gradient(to top, rgb(119, 196, 135),black;">
<img src='/Charts/Combo-<?php echo $myDate;?>.png?nocache=<?php echo time();?>' class="center">
<body style="background-color: rgb(119, 196, 135);">
<section> <section>
<div class="row"> <div class="row">
<div cladd="column" style="width: 100%;padding-left: 15%;padding-right: 15%;padding-bottom: 10px;"> <div class="column2">
<h2>Number of Detections</h2>
<table> <table>
<tr> <tr>
<th></th>
<th>Today</th> <th>Today</th>
<th>Last Hour</th> <th>Last Hour</th>
<th>Number of Unique Species Today</th> <th>Number of Unique Species Today</th>
</tr> </tr>
<tr> <tr>
<th>Number of Detections</th>
<td><?php echo $todayscount;?></td> <td><?php echo $todayscount;?></td>
<td><?php echo $lasthourcount;?></td> <td><?php echo $lasthourcount;?></td>
<td><?php echo $speciescount;?></td> <td><?php echo $speciescount;?></td>
@@ -93,5 +95,4 @@ table,th,td {
</section> </section>
</div> </div>
<img src='/Charts/Combo-<?php echo $myDate;?>.png?nocache=<?php echo time();?>' class="center">
</html> </html>
scripts/viewdb.php
+9 -14
View File
@@ -59,19 +59,16 @@ $mysqli->close();
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> --> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>BirdNET-Pi DB</title> <title>BirdNET-Pi DB</title>
<!-- CSS FOR STYLING THE PAGE -->
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<style>
</style>
</head> </head>
<body style="background-color: rgb(119, 196, 135);background-image: linear-gradient(to top, rgb(119, 196, 135),black;"> <body style="background-color: rgb(119, 196, 135);">
<section> <section>
<div class="row">
<div cladd="column" style="width: 75%;padding-left: 15%;">
<h2>Number of Detections</h2> <h2>Number of Detections</h2>
<div class="row">
<div class="column2">
<table> <table>
<tr> <tr>
<th>Total</th> <th>Total</th>
@@ -87,9 +84,6 @@ $mysqli->close();
</tr> </tr>
</table> </table>
</div> </div>
</div>
</table>
</div>
</div> </div>
<h2>Today's Detections</h2> <h2>Today's Detections</h2>
<!-- TABLE CONSTRUCTION--> <!-- TABLE CONSTRUCTION-->
@@ -128,9 +122,10 @@ while($rows=$mosttable ->fetch_assoc())
<?php <?php
} }
?> ?>
</table><div class="row"> </table>
<div class="row">
<div class="column"> <div class="column">
<h2>Detected Species</h2> <h3>Detected Species</h3>
<table> <table>
<tr> <tr>
<th>Species</th> <th>Species</th>
@@ -155,7 +150,7 @@ while($rows=$specieslist ->fetch_assoc())
</table> </table>
</div> </div>
<div class="column"> <div class="column">
<h2>Species Statistics</h2> <h3>Species Statistics</h3>
<table> <table>
<tr> <tr>
<th>Species</th> <th>Species</th>
@@ -173,7 +168,7 @@ while($rows=$speciestally ->fetch_assoc())
} }
?> ?>
</section>
</div> </div>
</section>
</html> </html>