aesthetic changes
This commit is contained in:
Patrick McGuire
+57
-63
@@ -1,25 +1,30 @@
|
||||
/* style sheet */
|
||||
* {
|
||||
font-family: 'Arial', 'Gill Sans', 'Gill Sans MT',
|
||||
' Calibri', 'Trebuchet MS', 'sans-serif';
|
||||
font-family: 'Arial', 'Gill Sans', 'Gill Sans MT',
|
||||
' Calibri', 'Trebuchet MS', 'sans-serif';
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.column1 {
|
||||
flex: 70%;
|
||||
}
|
||||
|
||||
/* Create two equal columns that floats next to each other */
|
||||
.column2 {
|
||||
flex: 30%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 75%;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* Create two equal columns that floats next to each other */
|
||||
.column {
|
||||
flex: 50%;
|
||||
padding-right: 5px;
|
||||
float: left;
|
||||
width: 50%;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* Clear floats after the columns */
|
||||
.row:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
table {
|
||||
@@ -33,70 +38,59 @@ table {
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
color: black;
|
||||
font-size: xx-large;
|
||||
text-align: center;
|
||||
color: black;
|
||||
font-size: xx-large;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
color: black;
|
||||
font-size: large;
|
||||
margin-left: -150px;
|
||||
text-align: center;
|
||||
color: black;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
h3 {
|
||||
text-align: center;
|
||||
color: black;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
background-color: rgb(219, 255, 235);
|
||||
font-weight: bold;
|
||||
border: 1px solid black;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
font-weight: lighter;
|
||||
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;
|
||||
color: black;
|
||||
font-size: large;
|
||||
font-family: 'Gill Sans', 'Gill Sans MT',
|
||||
' Calibri', 'Trebuchet MS', 'sans-serif';
|
||||
}
|
||||
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 {
|
||||
text-align: center;
|
||||
color: black;
|
||||
font-size: large;
|
||||
font-family: 'Gill Sans', 'Gill Sans MT',
|
||||
' Calibri', 'Trebuchet MS', 'sans-serif';
|
||||
margin-left: 0;
|
||||
text-align: center;
|
||||
color: black;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
background-color: rgb(219, 255, 235);
|
||||
font-weight: bold;
|
||||
border: 1px solid black;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
.column {
|
||||
width: 100%;
|
||||
}
|
||||
/* Create two equal columns that floats next to each other */
|
||||
.column2 {
|
||||
float: center;
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
font-weight: lighter;
|
||||
|
||||
}
|
||||
body::-webkit-scrollbar {
|
||||
display:none
|
||||
}
|
||||
display:none
|
||||
|
||||
+11
-14
@@ -50,36 +50,33 @@ $mysqli->close();
|
||||
|
||||
<head>
|
||||
<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>
|
||||
<!-- CSS FOR STYLING THE PAGE -->
|
||||
<link rel="stylesheet" href="style.css">
|
||||
|
||||
|
||||
<style>
|
||||
table,td,th {
|
||||
background-color: rgb(219, 255, 235);
|
||||
}
|
||||
.center {
|
||||
display: block;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
width: 90%;
|
||||
padding-top: 10px;
|
||||
padding: 5px;
|
||||
}
|
||||
.center2 {
|
||||
display: block;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
width: 100%;
|
||||
padding-top: 10px;
|
||||
padding: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body style="background-color: rgb(119, 196, 135);">
|
||||
<h2 style="margin-left: -150px;">Overview</h2>
|
||||
<h2>Overview</h2>
|
||||
<div class="row">
|
||||
<div class="column" style="padding-right: 5px;">
|
||||
<div class="column2">
|
||||
<?php // LOOP TILL END OF DATA
|
||||
while($rows=$mostrecent ->fetch_assoc())
|
||||
{
|
||||
@@ -98,8 +95,8 @@ while($rows=$mostrecent ->fetch_assoc())
|
||||
}
|
||||
?>
|
||||
|
||||
<div class="row" style="padding-top: 10px;">
|
||||
<div class="column" style="flex: 70%;padding-right: auto;">
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<table>
|
||||
<tr>
|
||||
<th></th>
|
||||
@@ -115,7 +112,7 @@ while($rows=$mostrecent ->fetch_assoc())
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="column" style="flex: 30%;padding-right: 5px;padding-left: auto;">
|
||||
<div class="column">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Species Detected Today</th>
|
||||
@@ -124,8 +121,8 @@ while($rows=$mostrecent ->fetch_assoc())
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<h2 style="margin-left: -150px;">Today's Top 10 Species</h2>
|
||||
<img src='/Charts/Combo-<?php echo $myDate;?>.png?nocache=<?php echo time();?>' style="width: 100%;padding: 5px;">
|
||||
<h2 style="margin-left: -150px;">Currently Analyzing</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;margin-left: auto;margin-right: auto;display: block;">
|
||||
<h2>Currently Analyzing</h2>
|
||||
<img src='/spectrogram.png?nocache=<?php echo time();?>' style="width: 100%;padding: 5px;">
|
||||
</html>
|
||||
|
||||
+6
-5
@@ -66,21 +66,23 @@ table,th,td {
|
||||
}
|
||||
</style>
|
||||
</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>
|
||||
<div class="row">
|
||||
<div cladd="column" style="width: 100%;padding-left: 15%;padding-right: 15%;padding-bottom: 10px;">
|
||||
<h2>Number of Detections</h2>
|
||||
<div class="column2">
|
||||
<table>
|
||||
<tr>
|
||||
|
||||
<th></th>
|
||||
<th>Today</th>
|
||||
<th>Last Hour</th>
|
||||
<th>Number of Unique Species Today</th>
|
||||
</tr>
|
||||
<tr>
|
||||
|
||||
<th>Number of Detections</th>
|
||||
<td><?php echo $todayscount;?></td>
|
||||
<td><?php echo $lasthourcount;?></td>
|
||||
<td><?php echo $speciescount;?></td>
|
||||
@@ -93,5 +95,4 @@ table,th,td {
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<img src='/Charts/Combo-<?php echo $myDate;?>.png?nocache=<?php echo time();?>' class="center">
|
||||
</html>
|
||||
|
||||
+96
-101
@@ -10,45 +10,45 @@ $servername='localhost';
|
||||
$mysqli = new mysqli($servername, $user, $password, $database);
|
||||
|
||||
if ($mysqli->connect_error) {
|
||||
die('Connect Error (' .
|
||||
$mysqli->connect_errno . ') '.
|
||||
$mysqli->connect_error);
|
||||
die('Connect Error (' .
|
||||
$mysqli->connect_errno . ') '.
|
||||
$mysqli->connect_error);
|
||||
}
|
||||
|
||||
// SQL query to select data from database
|
||||
$sql = "SELECT * FROM detections
|
||||
ORDER BY Date DESC, Time DESC";
|
||||
ORDER BY Date DESC, Time DESC";
|
||||
$fulltable = $mysqli->query($sql);
|
||||
$totalcount=mysqli_num_rows($fulltable);
|
||||
|
||||
$sql1 = "SELECT * FROM detections
|
||||
WHERE Date = CURDATE()
|
||||
ORDER BY Date DESC, Time DESC";
|
||||
WHERE Date = CURDATE()
|
||||
ORDER BY Date DESC, Time DESC";
|
||||
$mosttable = $mysqli->query($sql1);
|
||||
|
||||
$sql2 = "SELECT * FROM detections
|
||||
WHERE Date = CURDATE()";
|
||||
WHERE Date = CURDATE()";
|
||||
$todaystable = $mysqli->query($sql2);
|
||||
$todayscount=mysqli_num_rows($todaystable);
|
||||
|
||||
$sql3 = "SELECT * FROM detections
|
||||
WHERE Date = CURDATE()
|
||||
AND Time >= DATE_SUB(NOW(),INTERVAL 1 HOUR)";
|
||||
WHERE Date = CURDATE()
|
||||
AND Time >= DATE_SUB(NOW(),INTERVAL 1 HOUR)";
|
||||
$lasthourtable = $mysqli->query($sql3);
|
||||
$lasthourcount=mysqli_num_rows($lasthourtable);
|
||||
|
||||
$sql4 = "SELECT Com_Name, Date, Time, MAX(Confidence)
|
||||
FROM detections
|
||||
GROUP BY Com_Name
|
||||
ORDER BY MAX(Confidence) DESC";
|
||||
FROM detections
|
||||
GROUP BY Com_Name
|
||||
ORDER BY MAX(Confidence) DESC";
|
||||
$specieslist = $mysqli->query($sql4);
|
||||
$speciescount=mysqli_num_rows($specieslist);
|
||||
|
||||
$sql5 = "SELECT Com_Name,COUNT(*)
|
||||
AS Total
|
||||
FROM detections
|
||||
GROUP BY Com_Name
|
||||
ORDER BY Total DESC";
|
||||
AS Total
|
||||
FROM detections
|
||||
GROUP BY Com_Name
|
||||
ORDER BY Total DESC";
|
||||
$speciestally = $mysqli->query($sql5);
|
||||
|
||||
$mysqli->close();
|
||||
@@ -58,122 +58,117 @@ $mysqli->close();
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
|
||||
<title>BirdNET-Pi DB</title>
|
||||
<!-- CSS FOR STYLING THE PAGE -->
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<style>
|
||||
</style>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>BirdNET-Pi DB</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</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 cladd="column" style="width: 75%;padding-left: 15%;">
|
||||
<h2>Number of Detections</h2>
|
||||
<table>
|
||||
<tr>
|
||||
<th>Total</th>
|
||||
<th>Today</th>
|
||||
<th>Last Hour</th>
|
||||
<th>Number of Unique Species</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><?php echo $totalcount;?></td>
|
||||
<td><?php echo $todayscount;?></td>
|
||||
<td><?php echo $lasthourcount;?></td>
|
||||
<td><?php echo $speciescount;?></td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="column2">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Total</th>
|
||||
<th>Today</th>
|
||||
<th>Last Hour</th>
|
||||
<th>Number of Unique Species</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><?php echo $totalcount;?></td>
|
||||
<td><?php echo $todayscount;?></td>
|
||||
<td><?php echo $lasthourcount;?></td>
|
||||
<td><?php echo $speciescount;?></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<h2>Today's Detections</h2>
|
||||
<!-- TABLE CONSTRUCTION-->
|
||||
<table>
|
||||
<tr>
|
||||
<th>Time</th>
|
||||
<th>Scientific Name</th>
|
||||
<th>Common Name</th>
|
||||
<th>Confidence</th>
|
||||
<th>Lat</th>
|
||||
<th>Lon</th>
|
||||
<th>Cutoff</th>
|
||||
<th>Week</th>
|
||||
<th>Sens</th>
|
||||
<th>Overlap</th>
|
||||
</tr>
|
||||
<!-- PHP CODE TO FETCH DATA FROM ROWS-->
|
||||
<h2>Today's Detections</h2>
|
||||
<!-- TABLE CONSTRUCTION-->
|
||||
<table>
|
||||
<tr>
|
||||
<th>Time</th>
|
||||
<th>Scientific Name</th>
|
||||
<th>Common Name</th>
|
||||
<th>Confidence</th>
|
||||
<th>Lat</th>
|
||||
<th>Lon</th>
|
||||
<th>Cutoff</th>
|
||||
<th>Week</th>
|
||||
<th>Sens</th>
|
||||
<th>Overlap</th>
|
||||
</tr>
|
||||
<!-- PHP CODE TO FETCH DATA FROM ROWS-->
|
||||
<?php // LOOP TILL END OF DATA
|
||||
while($rows=$mosttable ->fetch_assoc())
|
||||
{
|
||||
?>
|
||||
<tr>
|
||||
<!--FETCHING DATA FROM EACH
|
||||
ROW OF EVERY COLUMN-->
|
||||
<td><?php echo $rows['Time'];?></td>
|
||||
<td><?php echo $rows['Sci_Name'];?></td>
|
||||
<td><?php echo $rows['Com_Name'];?></td>
|
||||
<td><?php echo $rows['Confidence'];?></td>
|
||||
<td><?php echo $rows['Lat'];?></td>
|
||||
<td><?php echo $rows['Lon'];?></td>
|
||||
<td><?php echo $rows['Cutoff'];?></td>
|
||||
<td><?php echo $rows['Week'];?></td>
|
||||
<td><?php echo $rows['Sens'];?></td>
|
||||
<td><?php echo $rows['Overlap'];?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<!--FETCHING DATA FROM EACH
|
||||
ROW OF EVERY COLUMN-->
|
||||
<td><?php echo $rows['Time'];?></td>
|
||||
<td><?php echo $rows['Sci_Name'];?></td>
|
||||
<td><?php echo $rows['Com_Name'];?></td>
|
||||
<td><?php echo $rows['Confidence'];?></td>
|
||||
<td><?php echo $rows['Lat'];?></td>
|
||||
<td><?php echo $rows['Lon'];?></td>
|
||||
<td><?php echo $rows['Cutoff'];?></td>
|
||||
<td><?php echo $rows['Week'];?></td>
|
||||
<td><?php echo $rows['Sens'];?></td>
|
||||
<td><?php echo $rows['Overlap'];?></td>
|
||||
</tr>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
</table><div class="row">
|
||||
</table>
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<h2>Detected Species</h2>
|
||||
<table>
|
||||
<tr>
|
||||
<th>Species</th>
|
||||
<th>Date</th>
|
||||
<th>Time</th>
|
||||
<th>Max Confidence Score</th>
|
||||
</tr>
|
||||
<h3>Detected Species</h3>
|
||||
<table>
|
||||
<tr>
|
||||
<th>Species</th>
|
||||
<th>Date</th>
|
||||
<th>Time</th>
|
||||
<th>Max Confidence Score</th>
|
||||
</tr>
|
||||
<?php // LOOP TILL END OF DATA
|
||||
while($rows=$specieslist ->fetch_assoc())
|
||||
{
|
||||
?>
|
||||
<tr>
|
||||
<td><?php echo $rows['Com_Name'];?></td>
|
||||
<td><?php echo $rows['Date'];?></td>
|
||||
<td><?php echo $rows['Time'];?></td>
|
||||
<td><?php echo $rows['MAX(Confidence)'];?></td>
|
||||
<tr>
|
||||
<td><?php echo $rows['Com_Name'];?></td>
|
||||
<td><?php echo $rows['Date'];?></td>
|
||||
<td><?php echo $rows['Time'];?></td>
|
||||
<td><?php echo $rows['MAX(Confidence)'];?></td>
|
||||
|
||||
</tr>
|
||||
</tr>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
</table>
|
||||
</table>
|
||||
</div>
|
||||
<div class="column">
|
||||
<h2>Species Statistics</h2>
|
||||
<table>
|
||||
<tr>
|
||||
<th>Species</th>
|
||||
<th>Detections</th>
|
||||
</tr>
|
||||
<h3>Species Statistics</h3>
|
||||
<table>
|
||||
<tr>
|
||||
<th>Species</th>
|
||||
<th>Detections</th>
|
||||
</tr>
|
||||
<?php // LOOP TILL END OF DATA
|
||||
while($rows=$speciestally ->fetch_assoc())
|
||||
{
|
||||
?>
|
||||
<tr>
|
||||
<td><?php echo $rows['Com_Name'];?></td>
|
||||
<td><?php echo $rows['Total'];?></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><?php echo $rows['Com_Name'];?></td>
|
||||
<td><?php echo $rows['Total'];?></td>
|
||||
</tr>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</html>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user