I love this version!!!
This commit is contained in:
+1
-1
@@ -36,7 +36,7 @@ if (!isset($_SERVER['PHP_AUTH_USER'])) {
|
||||
<form action=\"\" method=\"GET\">
|
||||
<button type=\"submit\" name=\"stream\" value=\"play\">Live Audio</button>
|
||||
</form>
|
||||
<h1><a href=\"\">BirdNET-Pi</a><img src=\"images/version.svg\">🍀</h1<>
|
||||
<h1><a href=\"\">BirdNET-Pi</a><img src=\"images/version.svg\"></h1>
|
||||
</div>";
|
||||
}
|
||||
if(isset($_GET['log'])) {
|
||||
|
||||
+123
-67
@@ -2,22 +2,79 @@
|
||||
font-family: 'Arial', 'Gill Sans', 'Gill Sans MT',
|
||||
' Calibri', 'Trebuchet MS', 'sans-serif';
|
||||
box-sizing: border-box;
|
||||
font-size: large;
|
||||
font-size: medium;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.banner {
|
||||
h3 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
iframe {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
height: 95%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background-color: rgb(119, 196, 135);
|
||||
}
|
||||
|
||||
table {
|
||||
background-color: transparent;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 10px;
|
||||
vertical-align: top;
|
||||
background-color: rgb(219, 255, 235);
|
||||
font-weight: lighter;
|
||||
border: 2px solid black;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
audio, video{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.banner {
|
||||
height: 5%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.banner h1 {
|
||||
/*float: top;*/
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
.banner audio,.banner form {
|
||||
float:right;
|
||||
float: right;
|
||||
width: 120px;
|
||||
margin-left: -120px;
|
||||
margin-right: auto;
|
||||
@@ -36,16 +93,17 @@
|
||||
font-size: x-large;
|
||||
}
|
||||
|
||||
.topbar {
|
||||
display: block;
|
||||
width: auto;
|
||||
margin-left: 10%;
|
||||
margin-right: 10%;
|
||||
}
|
||||
|
||||
.topnav {
|
||||
.topnav, .topnav form {
|
||||
background-color: rgb( 159, 226, 155);
|
||||
display: block;
|
||||
width: 85%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.topnav form {
|
||||
margin-left: auto;
|
||||
margin-rigth: auto;
|
||||
}
|
||||
|
||||
.topnav button {
|
||||
@@ -90,7 +148,25 @@
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.stats table {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.column table {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.stats button:hover {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.center button{
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.history table,.history img {
|
||||
width: auto;
|
||||
@@ -98,50 +174,6 @@
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h3 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
iframe {
|
||||
border: none;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: rgb(119, 196, 135);
|
||||
}
|
||||
|
||||
table {
|
||||
background-color: transparent;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 10px;
|
||||
vertical-align: top;
|
||||
background-color: rgb(219, 255, 235);
|
||||
font-weight: lighter;
|
||||
border: 2px solid black;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
height: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
audio, video{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.spectrogram {
|
||||
width:50%
|
||||
@@ -159,16 +191,6 @@ audio, video{
|
||||
width:100%;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: black;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.logbutton, .navbuttons {
|
||||
float: left;
|
||||
@@ -182,10 +204,16 @@ body::-webkit-scrollbar {
|
||||
display:none
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
@media screen and (max-width: 700px) {
|
||||
.topnav {
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
}
|
||||
.topnav button {display: none;}
|
||||
/*.topnav button:not(:first-child) {display: none;}*/
|
||||
.topnav button.icon {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
@@ -194,15 +222,28 @@ body::-webkit-scrollbar {
|
||||
.overview img {
|
||||
width: 100%;
|
||||
}
|
||||
.banner {
|
||||
height: auto;
|
||||
}
|
||||
.banner img {
|
||||
display: none;
|
||||
}
|
||||
.logo img {
|
||||
display: block;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
.version {
|
||||
display: none;
|
||||
}
|
||||
.topnav.responsive {position: relative;}
|
||||
.topnav.responsive button {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
.left {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
@@ -214,18 +255,30 @@ body::-webkit-scrollbar {
|
||||
.viewdb table,.overview img {
|
||||
width: 100%
|
||||
}
|
||||
.banner {
|
||||
height: auto;
|
||||
}
|
||||
.banner img {
|
||||
display: none;
|
||||
}
|
||||
.logo img {
|
||||
display: block;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
.play table,.overview table,.stats table {
|
||||
width: 100%;
|
||||
}
|
||||
.topnav {
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
}
|
||||
.topnav button {
|
||||
font-size: large;
|
||||
}
|
||||
.topnav button {display: none;}
|
||||
.topnav button.icon {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
@@ -236,4 +289,7 @@ body::-webkit-scrollbar {
|
||||
.topnav.responsive button {
|
||||
display: block;
|
||||
}
|
||||
.left {
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
|
||||
+9
-12
@@ -1,25 +1,22 @@
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<div class="topbar">
|
||||
<div class="topnav" id="myTopnav">
|
||||
<form action="" method="POST" id="views">
|
||||
<button type="submit" name="view" value="Overview" id="views">Overview</button>
|
||||
<button type="submit" name="view" value="Today's Detections" id="views">Today's Detections</button>
|
||||
<button type="submit" name="view" value="Species Stats" id="views">Species Stats</button>
|
||||
<button type="submit" name="view" value="Daily Charts" id="views">Daily Charts</button>
|
||||
<button type="submit" name="view" value="Tools" id="views">Tools</button>
|
||||
<button type="submit" name="view" value="Recordings" id="views">Recordings</button>
|
||||
<button type="submit" name="view" value="Overview" form="views">Overview</button>
|
||||
<button type="submit" name="view" value="Today's Detections" form="views">Today's Detections</button>
|
||||
<button type="submit" name="view" value="Species Stats" form="views">Species Stats</button>
|
||||
<button type="submit" name="view" value="Daily Charts" form="views">Daily Charts</button>
|
||||
<button type="submit" name="view" value="Tools" form="views">Tools</button>
|
||||
<button type="submit" name="view" value="Recordings" form="views">Recordings</button>
|
||||
</form>
|
||||
<form action="index.php" method="GET" id="log">
|
||||
<button type="submit" name="log" value="log" id="Log">View Log</button>
|
||||
<form action="index.php" method="GET" id="Log">
|
||||
<button type="submit" name="log" value="log" form="Log">View Log</button>
|
||||
</form>
|
||||
<form action="index.php" method="GET" id="spectrogram">
|
||||
<button style="float:none;" type="submit" name="spectrogram" value="view" id="spectrogram">Spectrogram</button>
|
||||
<button style="float:none;" type="submit" name="spectrogram" value="view" id="spectrogram" form="spectrogram">Spectrogram</button>
|
||||
</form>
|
||||
<button href="javascript:void(0);" class="icon" onclick="myFunction()"><img src="images/menu.png"></button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<?php
|
||||
if(isset($_POST['view'])){
|
||||
if($_POST['view'] == "System"){header('location:phpsysinfo/index.php');}
|
||||
|
||||
+39
-7
@@ -15,6 +15,15 @@ if($statement == False) {
|
||||
}
|
||||
$result = $statement->execute();
|
||||
|
||||
$statement2 = $db->prepare('SELECT Date, Time, File_Name, Com_Name, COUNT(*), MAX(Confidence) FROM detections GROUP BY Com_Name ORDER BY Com_Name');
|
||||
if($statement == False) {
|
||||
echo "Database busy";
|
||||
header("refresh: 0;");
|
||||
}
|
||||
$result2 = $statement2->execute();
|
||||
|
||||
|
||||
|
||||
if(isset($_POST['species'])){
|
||||
$selection = $_POST['species'];
|
||||
$statement3 = $db->prepare("SELECT Com_Name, Sci_Name, COUNT(*), MAX(Confidence), File_Name, Date, Time from detections WHERE Com_Name = \"$selection\"");
|
||||
@@ -40,8 +49,30 @@ if(isset($_POST['species'])){
|
||||
</head>
|
||||
<body>
|
||||
<div class="stats">
|
||||
<div class="column left">
|
||||
<table>
|
||||
<?php
|
||||
while($results=$result2->fetchArray(SQLITE3_ASSOC))
|
||||
{
|
||||
$comname = preg_replace('/ /', '_', $results['Com_Name']);
|
||||
$comname = preg_replace('/\'/', '', $comname);
|
||||
$filename = "/By_Date/".$results['Date']."/".$comname."/".$results['File_Name'];
|
||||
?>
|
||||
<tr>
|
||||
<form action="" method="POST">
|
||||
<td><input type="hidden" name="view" value="Species Stats">
|
||||
<button type="submit" name="species" value="<?php echo $results['Com_Name'];?>"><?php echo $results['Com_Name'];?></button>
|
||||
</td>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
</form>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="column center">
|
||||
<?php if(!isset($_POST['species'])){
|
||||
?><p class="centered">Choose a species below to load images from Wikimedia Commons.</p>
|
||||
?><p class="centered">Choose a species to load images from Wikimedia Commons.</p>
|
||||
<?php
|
||||
};?>
|
||||
<?php if(isset($_POST['species'])){
|
||||
@@ -62,9 +93,9 @@ while($results=$result3->fetchArray(SQLITE3_ASSOC)){
|
||||
echo str_pad("<h3>$species</h3>
|
||||
<table><tr>
|
||||
<td><a href=\"https://wikipedia.org/wiki/$dbsciname\" target=\"top\"/><i>$sciname</i></a><br>
|
||||
Occurrences: $count<br>
|
||||
Max Confidence: $maxconf<br>
|
||||
Best Recording: $date $time<br>
|
||||
<b>Occurrences: </b>$count<br>
|
||||
<b>Max Confidence: </b>$maxconf<br>
|
||||
<b>Best Recording: </b>$date $time<br>
|
||||
<a href=\"https://allaboutbirds.org/guide/$comname\" target=\"top\"/>All About Birds</a><br>
|
||||
<video controls poster=\"$filename.png\"><source src=\"$filename\"></video></td>
|
||||
</tr>
|
||||
@@ -96,9 +127,9 @@ $filename = "/By_Date/".$results['Date']."/".$comname."/".$results['File_Name'];
|
||||
<tr>
|
||||
<form action="" method="POST">
|
||||
<td><input type="hidden" name="view" value="Species Stats">
|
||||
<button type="submit" name="species" value="<?php echo $results['Com_Name'];?>"><?php echo $results['Com_Name'];?></button><br>Occurrences: <?php echo $results['COUNT(*)'];?><br>
|
||||
Max Confidence: <?php echo $results['MAX(Confidence)'];?><br>
|
||||
Best Recording: <?php echo $results['Date']." ".$results['Time'];?><br><video controls poster="<?php echo $filename.".png";?>"><source src="<?php echo $filename;?>" type="audio/mp3"></video></td>
|
||||
<button type="submit" name="species" value="<?php echo $results['Com_Name'];?>"><?php echo $results['Com_Name'];?></button><br><b>Occurrences:</b> <?php echo $results['COUNT(*)'];?><br>
|
||||
<b>Max Confidence:</b> <?php echo $results['MAX(Confidence)'];?><br>
|
||||
<b>Best Recording:</b> <?php echo $results['Date']." ".$results['Time'];?><br><video controls poster="<?php echo $filename.".png";?>"><source src="<?php echo $filename;?>" type="audio/mp3"></video></td>
|
||||
</tr>
|
||||
<?php
|
||||
}
|
||||
@@ -106,6 +137,7 @@ $filename = "/By_Date/".$results['Date']."/".$comname."/".$results['File_Name'];
|
||||
</table>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user