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
+60 -66
View File
@@ -1,25 +1,30 @@
/* style sheet */ /* style sheet */
* { * {
font-family: 'Arial', 'Gill Sans', 'Gill Sans MT', font-family: 'Arial', 'Gill Sans', 'Gill Sans MT',
' Calibri', 'Trebuchet MS', 'sans-serif'; ' Calibri', 'Trebuchet MS', 'sans-serif';
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 {
@@ -33,70 +38,59 @@ table {
} }
h1 { h1 {
text-align: center; text-align: center;
color: black; color: black;
font-size: xx-large; font-size: xx-large;
} }
h2 { h2 {
text-align: center; margin-left: -150px;
color: black; text-align: center;
font-size: large; color: black;
font-size: large;
}
h3 {
text-align: center;
color: black;
font-size: large;
} }
th,
td { td {
background-color: rgb(219, 255, 235); background-color: rgb(219, 255, 235);
font-weight: bold; font-weight: lighter;
border: 1px solid black; border: 1px solid black;
padding: 10px; padding: 10px;
text-align: center; text-align: center;
} }
@media screen and (max-width: 800px) { th {
.column { background-color: rgb(219, 255, 235);
float: none; font-weight: bold;
width: 100%; border: 1px solid black;
} padding: 10px;
table { text-align: center;
background-color: rgb(219, 255, 235); }
margin: 0 auto;
font-size: medium; @media screen and (max-width: 600px) {
border-collapse: collapse;
border-spacing: 1;
width: 100%;
border: 1px solid black;
}
h1 {
text-align: center;
color: black;
font-size: large;
font-family: 'Gill Sans', 'Gill Sans MT',
' Calibri', 'Trebuchet MS', 'sans-serif';
}
h2 { h2 {
text-align: center; margin-left: 0;
color: black; text-align: center;
font-size: large; color: black;
font-family: 'Gill Sans', 'Gill Sans MT', font-size: large;
' Calibri', 'Trebuchet MS', 'sans-serif';
} }
th,
td {
background-color: rgb(219, 255, 235);
font-weight: bold;
border: 1px solid black;
padding: 10px;
text-align: center;
}
}
td { .column {
font-weight: lighter; 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
+96 -101
View File
@@ -10,45 +10,45 @@ $servername='localhost';
$mysqli = new mysqli($servername, $user, $password, $database); $mysqli = new mysqli($servername, $user, $password, $database);
if ($mysqli->connect_error) { if ($mysqli->connect_error) {
die('Connect Error (' . die('Connect Error (' .
$mysqli->connect_errno . ') '. $mysqli->connect_errno . ') '.
$mysqli->connect_error); $mysqli->connect_error);
} }
// SQL query to select data from database // SQL query to select data from database
$sql = "SELECT * FROM detections $sql = "SELECT * FROM detections
ORDER BY Date DESC, Time DESC"; ORDER BY Date DESC, Time DESC";
$fulltable = $mysqli->query($sql); $fulltable = $mysqli->query($sql);
$totalcount=mysqli_num_rows($fulltable); $totalcount=mysqli_num_rows($fulltable);
$sql1 = "SELECT * FROM detections $sql1 = "SELECT * FROM detections
WHERE Date = CURDATE() WHERE Date = CURDATE()
ORDER BY Date DESC, Time DESC"; ORDER BY Date DESC, Time DESC";
$mosttable = $mysqli->query($sql1); $mosttable = $mysqli->query($sql1);
$sql2 = "SELECT * FROM detections $sql2 = "SELECT * FROM detections
WHERE Date = CURDATE()"; WHERE Date = CURDATE()";
$todaystable = $mysqli->query($sql2); $todaystable = $mysqli->query($sql2);
$todayscount=mysqli_num_rows($todaystable); $todayscount=mysqli_num_rows($todaystable);
$sql3 = "SELECT * FROM detections $sql3 = "SELECT * FROM detections
WHERE Date = CURDATE() WHERE Date = CURDATE()
AND Time >= DATE_SUB(NOW(),INTERVAL 1 HOUR)"; AND Time >= DATE_SUB(NOW(),INTERVAL 1 HOUR)";
$lasthourtable = $mysqli->query($sql3); $lasthourtable = $mysqli->query($sql3);
$lasthourcount=mysqli_num_rows($lasthourtable); $lasthourcount=mysqli_num_rows($lasthourtable);
$sql4 = "SELECT Com_Name, Date, Time, MAX(Confidence) $sql4 = "SELECT Com_Name, Date, Time, MAX(Confidence)
FROM detections FROM detections
GROUP BY Com_Name GROUP BY Com_Name
ORDER BY MAX(Confidence) DESC"; ORDER BY MAX(Confidence) DESC";
$specieslist = $mysqli->query($sql4); $specieslist = $mysqli->query($sql4);
$speciescount=mysqli_num_rows($specieslist); $speciescount=mysqli_num_rows($specieslist);
$sql5 = "SELECT Com_Name,COUNT(*) $sql5 = "SELECT Com_Name,COUNT(*)
AS Total AS Total
FROM detections FROM detections
GROUP BY Com_Name GROUP BY Com_Name
ORDER BY Total DESC"; ORDER BY Total DESC";
$speciestally = $mysqli->query($sql5); $speciestally = $mysqli->query($sql5);
$mysqli->close(); $mysqli->close();
@@ -58,122 +58,117 @@ $mysqli->close();
<html lang="en"> <html lang="en">
<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>
<h2>Number of Detections</h2>
<div class="row"> <div class="row">
<div cladd="column" style="width: 75%;padding-left: 15%;"> <div class="column2">
<h2>Number of Detections</h2> <table>
<table> <tr>
<tr> <th>Total</th>
<th>Total</th> <th>Today</th>
<th>Today</th> <th>Last Hour</th>
<th>Last Hour</th> <th>Number of Unique Species</th>
<th>Number of Unique Species</th> </tr>
</tr> <tr>
<tr> <td><?php echo $totalcount;?></td>
<td><?php echo $totalcount;?></td> <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> </tr>
</tr> </table>
</table>
</div> </div>
</div> </div>
</table> <h2>Today's Detections</h2>
</div> <!-- TABLE CONSTRUCTION-->
</div> <table>
<h2>Today's Detections</h2> <tr>
<!-- TABLE CONSTRUCTION--> <th>Time</th>
<table> <th>Scientific Name</th>
<tr> <th>Common Name</th>
<th>Time</th> <th>Confidence</th>
<th>Scientific Name</th> <th>Lat</th>
<th>Common Name</th> <th>Lon</th>
<th>Confidence</th> <th>Cutoff</th>
<th>Lat</th> <th>Week</th>
<th>Lon</th> <th>Sens</th>
<th>Cutoff</th> <th>Overlap</th>
<th>Week</th> </tr>
<th>Sens</th> <!-- PHP CODE TO FETCH DATA FROM ROWS-->
<th>Overlap</th>
</tr>
<!-- PHP CODE TO FETCH DATA FROM ROWS-->
<?php // LOOP TILL END OF DATA <?php // LOOP TILL END OF DATA
while($rows=$mosttable ->fetch_assoc()) while($rows=$mosttable ->fetch_assoc())
{ {
?> ?>
<tr> <tr>
<!--FETCHING DATA FROM EACH <!--FETCHING DATA FROM EACH
ROW OF EVERY COLUMN--> ROW OF EVERY COLUMN-->
<td><?php echo $rows['Time'];?></td> <td><?php echo $rows['Time'];?></td>
<td><?php echo $rows['Sci_Name'];?></td> <td><?php echo $rows['Sci_Name'];?></td>
<td><?php echo $rows['Com_Name'];?></td> <td><?php echo $rows['Com_Name'];?></td>
<td><?php echo $rows['Confidence'];?></td> <td><?php echo $rows['Confidence'];?></td>
<td><?php echo $rows['Lat'];?></td> <td><?php echo $rows['Lat'];?></td>
<td><?php echo $rows['Lon'];?></td> <td><?php echo $rows['Lon'];?></td>
<td><?php echo $rows['Cutoff'];?></td> <td><?php echo $rows['Cutoff'];?></td>
<td><?php echo $rows['Week'];?></td> <td><?php echo $rows['Week'];?></td>
<td><?php echo $rows['Sens'];?></td> <td><?php echo $rows['Sens'];?></td>
<td><?php echo $rows['Overlap'];?></td> <td><?php echo $rows['Overlap'];?></td>
</tr> </tr>
<?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>
<th>Date</th> <th>Date</th>
<th>Time</th> <th>Time</th>
<th>Max Confidence Score</th> <th>Max Confidence Score</th>
</tr> </tr>
<?php // LOOP TILL END OF DATA <?php // LOOP TILL END OF DATA
while($rows=$specieslist ->fetch_assoc()) while($rows=$specieslist ->fetch_assoc())
{ {
?> ?>
<tr> <tr>
<td><?php echo $rows['Com_Name'];?></td> <td><?php echo $rows['Com_Name'];?></td>
<td><?php echo $rows['Date'];?></td> <td><?php echo $rows['Date'];?></td>
<td><?php echo $rows['Time'];?></td> <td><?php echo $rows['Time'];?></td>
<td><?php echo $rows['MAX(Confidence)'];?></td> <td><?php echo $rows['MAX(Confidence)'];?></td>
</tr> </tr>
<?php <?php
} }
?> ?>
</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>
<th>Detections</th> <th>Detections</th>
</tr> </tr>
<?php // LOOP TILL END OF DATA <?php // LOOP TILL END OF DATA
while($rows=$speciestally ->fetch_assoc()) while($rows=$speciestally ->fetch_assoc())
{ {
?> ?>
<tr> <tr>
<td><?php echo $rows['Com_Name'];?></td> <td><?php echo $rows['Com_Name'];?></td>
<td><?php echo $rows['Total'];?></td> <td><?php echo $rows['Total'];?></td>
</tr> </tr>
<?php <?php
} }
?> ?>
</section>
</div> </div>
</section>
</html> </html>