I love this version!!!

homepage/index.php

@@ -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\">&#127808;</h1<>
+  <h1><a href=\"\">BirdNET-Pi</a><img src=\"images/version.svg\"></h1>
 </div>";
 }
 if(isset($_GET['log'])) {

homepage/style.css

@@ -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 {
+.topnav, .topnav form {
-  display: block;
-  width: auto;
-  margin-left: 10%;
-  margin-right: 10%;
-}
-
-.topnav {
   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;
+  }
 }

homepage/views.php

@@ -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="Overview" form="views">Overview</button>
-  <button type="submit" name="view" value="Today's Detections" id="views">Today's Detections</button>
+  <button type="submit" name="view" value="Today's Detections" form="views">Today's Detections</button>
-  <button type="submit" name="view" value="Species Stats" id="views">Species Stats</button>
+  <button type="submit" name="view" value="Species Stats" form="views">Species Stats</button>
-  <button type="submit" name="view" value="Daily Charts" id="views">Daily Charts</button>
+  <button type="submit" name="view" value="Daily Charts" form="views">Daily Charts</button>
-  <button type="submit" name="view" value="Tools" id="views">Tools</button>
+  <button type="submit" name="view" value="Tools" form="views">Tools</button>
-  <button type="submit" name="view" value="Recordings" id="views">Recordings</button>
+  <button type="submit" name="view" value="Recordings" form="views">Recordings</button>
 </form>
-<form action="index.php" method="GET" id="log">
+<form action="index.php" method="GET" id="Log">
-  <button type="submit" name="log" value="log" id="Log">View Log</button>
+  <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');}

scripts/stats.php

@@ -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>
+  <b>Occurrences: </b>$count<br>
-  Max Confidence: $maxconf<br>
+  <b>Max Confidence: </b>$maxconf<br>
-  Best Recording: $date $time<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>
+        <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>
-      Max Confidence: <?php echo $results['MAX(Confidence)'];?><br>
+      <b>Max Confidence:</b> <?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>
+      <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>