From 147358a9c5cde9c5212d7fe2dbeef8442b72689c Mon Sep 17 00:00:00 2001
From: mcguirepr89 <mcguirepr89@gmail.com>
Date: Thu, 3 Mar 2022 09:18:21 -0500
Subject: [PATCH] added new changes

---
 homepage/index.php   |  13 ++++--
 homepage/style.css   | 106 +++++++++++++++++++++----------------------
 homepage/views.php   |   2 +-
 scripts/overview.php |  29 +++++-------
 scripts/play.php     |  30 +++++-------
 scripts/stats.php    |  43 ++++++------------
 scripts/viewdb.php   |  26 ++++-------
 7 files changed, 109 insertions(+), 140 deletions(-)

diff --git a/homepage/index.php b/homepage/index.php
index 00e03ba..8b8b87d 100644
--- a/homepage/index.php
+++ b/homepage/index.php
@@ -1,5 +1,8 @@
 <link rel="stylesheet" href="style.css">
 <div class="banner">
+<div class="logo">
+<a href="https://github.com/mcguirepr89/BirdNET-Pi.git" target="_blank"><img src="images/bird.png"></a>
+</div>
 <?php
 echo "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">";
 if(isset($_GET['stream'])){
@@ -18,7 +21,8 @@ if (!isset($_SERVER['PHP_AUTH_USER'])) {
   $submittedpwd = $_SERVER['PHP_AUTH_PW'];
   $submitteduser = $_SERVER['PHP_AUTH_USER'];
   if($submittedpwd == $caddypwd && $submitteduser == 'birdnet'){
-    echo "<h1>BirdNET-Pi</h1><audio controls autoplay><source src=\"/stream\"></audio>";
+    echo "<audio controls autoplay><source src=\"/stream\"></audio>
+          <h1><a href=\"\">BirdNET-Pi</a></h1>";
   } else {
     header('WWW-Authenticate: Basic realm="My Realm"');
     header('HTTP/1.0 401 Unauthorized');
@@ -27,7 +31,10 @@ if (!isset($_SERVER['PHP_AUTH_USER'])) {
   }
 }
 } else {
-  echo "<h1>BirdNET-Pi</h1><form action=\"\" method=\"GET\"><button type=\"submit\" name=\"stream\" value=\"play\">Live Audio</button></form>";
+  echo "<form action=\"\" method=\"GET\">
+          <button type=\"submit\" name=\"stream\" value=\"play\">Live Audio</button>
+        </form>";
+  echo "<h1><a href=\"\">BirdNET-Pi</a></h1>";
 }
 echo "</div>";
 if(isset($_GET['log'])) {
@@ -54,5 +61,5 @@ if(isset($_GET['log'])) {
 } elseif(isset($_GET['spectrogram'])){
   header("Location: /spectrogram.php");
 } else {
-  echo "<iframe src=\"/views.php\" width=\"100%\" height=\"85%\">";
+  echo "<iframe src=\"/views.php\">";
 }
diff --git a/homepage/style.css b/homepage/style.css
index 6fdacef..8cc0ede 100644
--- a/homepage/style.css
+++ b/homepage/style.css
@@ -5,19 +5,45 @@
   font-size: large;
 }
 
+/*table {
+  background-color: transparent;
+  border-collapse: collapse;
+  border-spacing: 0;
+  width: 100%;
+}*/
+
+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%;
+}
 .banner {
   height: auto;
   text-align: center;
 }
 
 .banner h1 {
-  float: top;
+  /*float: top;*/
   font-size: x-large;
 }
 
-.banner audio {
+.banner audio,.banner form {
+  float:right;
   width: 120px;
-  margin-left: auto;
+  margin-left: -120px;
   margin-right: auto;
 }
 
@@ -70,10 +96,9 @@
 }
 
 .play table {
-  display: block;
-  width:50%;
-  margin-right: auto;
+  margin:0;
   margin-left: auto;
+  margin-right: auto;
 }
 
 .overview td {
@@ -81,11 +106,7 @@
   width:20%;
 }
 
-.overview table {
-  width: 75%;
-}
-
-.stats table {
+.overview table,.stats table,.viewdb table {
   width: 75%;
 }
 
@@ -109,7 +130,7 @@ h3 {
 
 iframe {
   border: none;
-  height: 85%;
+  height: 100%;
   width: 100%;
 }
 
@@ -117,35 +138,10 @@ body {
   background-color: rgb(119, 196, 135);
 }
 
-table {
-  background-color: transparent;
-  margin: 0 auto;
-  border-collapse: collapse;
-  border-spacing: 0;
-  width: 100%;
-}
 
-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:33%
+  width:50%
 }
 
 .centered {
@@ -192,9 +188,13 @@ body::-webkit-scrollbar {
     margin-left: auto;
     margin-right: auto;
   }
-}
-
-@media screen and (max-width: 1000px) {
+  .overview img {
+    width: 100%;
+  }
+  .banner img {
+    width: 60px;
+    height: 60px;
+  }
   .topnav.responsive {position: relative;}
   .topnav.responsive button {
     display: block;
@@ -203,31 +203,29 @@ body::-webkit-scrollbar {
 }
 
 @media screen and (max-width: 600px) {
+  .viewdb table,.overview img {
+    width: 100%
+  }
+  .banner img {
+    width: 60px;
+    height: 60px;
+  }
   .play table,.overview table,.stats table {
     width: 100%;
   }
   .topnav button { 
-    font-size: xx-large;
+    font-size: large;
   }
   .topnav button {display: none;}
-  /*.topnav button:not(:first-child) {display: none;}*/
   .topnav button.icon {
+    padding: 0;
     display: block;
     width: 100%;
     margin-left: auto;
     margin-right: auto;
   }
-}
-
-@media screen and (max-width: 600px) {
-  .play table,.overview table,.stats table {
-    width: 100%;
-  }
-  .topnav button {
-    font-size: x-large;
-  }
   .topnav.responsive {position: relative;}
   .topnav.responsive button {
     display: block;
-    text-align: center;
-  }}
+  }
+}
diff --git a/homepage/views.php b/homepage/views.php
index 05b3481..38f6b22 100644
--- a/homepage/views.php
+++ b/homepage/views.php
@@ -14,7 +14,7 @@
   <button type="submit" name="log" value="log" id="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">Spectrogram</button>
 </form>
 <button href="javascript:void(0);" class="icon" onclick="myFunction()"><img src="images/menu.png"></button>
 </div>
diff --git a/scripts/overview.php b/scripts/overview.php
index b6b71b4..60f140c 100644
--- a/scripts/overview.php
+++ b/scripts/overview.php
@@ -65,6 +65,9 @@ $speciestally = $result5->fetchArray(SQLITE3_ASSOC);
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Overview</title>
 <style>
+button, a, form {
+padding: 0;
+}
 </style>
 </head>
 <body>
@@ -88,27 +91,18 @@ $speciestally = $result5->fetchArray(SQLITE3_ASSOC);
       </tr>
     </table>
     <table>
+      <h3>Most Recent Detection</h3>
       <tr>
-        <th>Most Recent Detection</th>
-        <th>Scientific Name</th>
-        <th>Common Name</th>
-        <th>Listen</th>
-        <th>Confidence</th>
-      </tr>
-      <tr>
-        <td><?php echo $mostrecent['Date']."<br>".$mostrecent['Time'];?></td>
-        <td><a href="https://wikipedia.org/wiki/<?php echo $sciname;?>" target="_blank"/><?php echo $mostrecent['Sci_Name'];?></a></td>
+        <td>
         <form action="" method="POST">
-          <td>
             <input type="hidden" name="view" value="Species Stats">
-            <button type="submit" name="species" value="<?php echo $mostrecent['Com_Name'];?>"><?php echo $mostrecent['Com_Name'];?></button>
-          </td>
-        </form>
-        <td class="spectrogram" ><video controls poster="<?php echo $filename.".png";?>"><source src="<?php echo $filename;?>"></video></td>
-        <td><?php echo $mostrecent['Confidence'];?></td>
+            <button type="submit" name="species" value="<?php echo $mostrecent['Com_Name'];?>"><?php echo $mostrecent['Com_Name'];?>: </button>
+        <a href="https://wikipedia.org/wiki/<?php echo $sciname;?>" target="_blank"/><i><?php echo $mostrecent['Sci_Name'];?></i></a><br>Confidence: <?php echo $mostrecent['Confidence'];?><br>
+        <?php echo $mostrecent['Date']." ".$mostrecent['Time'];?><br><video controls poster="<?php echo $filename.".png";?>"><source src="<?php echo $filename;?>"></video></td>
+        
       </tr>
     </table>
-</div>
+        </form>
 <?php
 if (file_exists('/home/pi/BirdSongs/Extracted/Charts/'.$chart)) {
   echo "<img class=\"centered\" src=\"/Charts/$chart?nocache=time()\">";
@@ -117,5 +111,6 @@ if (file_exists('/home/pi/BirdSongs/Extracted/Charts/'.$chart)) {
 }
 ?>
     <h3 class="centered">Currently Analyzing</h3>
-<img class="full" src='/spectrogram.png?nocache=<?php echo time();?>' >
+<img class="centered" src='/spectrogram.png?nocache=<?php echo time();?>' >
+</div>
 </html>
diff --git a/scripts/play.php b/scripts/play.php
index d0f4299..70cc162 100644
--- a/scripts/play.php
+++ b/scripts/play.php
@@ -60,40 +60,36 @@ if(isset($_POST['bydate'])){
     <style>
     </style>
   </head>
-<body>
-<div class="play">
-<table>
 <?php
 if(!isset($_POST['species'])){
 ?>
+<div class="play">
+<table>
   <tr>
     <form action="" method="POST">
+    <input type="hidden" name="view" value="Recordings">
 <?php
   if($view == "bydate") {
     while($results=$result->fetchArray(SQLITE3_ASSOC)){
     $date = $results['Date'];
     echo "<td>
-    <input type=\"hidden\" name=\"view\" value=\"Recordings\">
     <button action=\"submit\" name=\"date\" value=\"$date\">$date</button></td></tr>";}
   } elseif($view == "byspecies") {
     while($results=$result->fetchArray(SQLITE3_ASSOC)){
     $name = $results['Com_Name'];
     echo "<td>
-    <input type=\"hidden\" name=\"view\" value=\"Recordings\">
     <button action=\"submit\" name=\"species\" value=\"$name\">$name</button></td></tr>";}
   } elseif($view == "date") {
     while($results=$result->fetchArray(SQLITE3_ASSOC)){
     $name = $results['Com_Name'];
     echo "<td>
-    <input type=\"hidden\" name=\"view\" value=\"Recordings\">
     <button action=\"submit\" name=\"species\" value=\"$name\">$name</button></td></tr>";}
   } elseif($view == "choose") {
     $date = "By Date";
     $species = "By Species";
     echo "<td>
-    <input type=\"hidden\" name=\"view\" value=\"Recordings\">
     <button action=\"submit\" name=\"byspecies\" value=\"byspecies\">$species</button></td></tr>
-    <td><button action=\"submit\" name=\"bydate\" value=\"bydate\">$date</button></td></tr>";
+    <tr><td><button action=\"submit\" name=\"bydate\" value=\"bydate\">$date</button></td>";
   } else {
     while($results=$result->fetchArray(SQLITE3_ASSOC)){
     $maxconf = $results['MAX(Confidence)'];
@@ -106,17 +102,15 @@ if(!isset($_POST['species'])){
     $comname = preg_replace('/\'/', '', $comname);
     $file = $results['File_Name'];
     $filename = "/By_Date/".$date."/".$comname."/".$results['File_Name'];
-    echo "<tr>
-      <th>$species</th>
+    echo "<th>$species</th>
       <td style=\"vertical-align:middle;\"><a href=\"https://wikipedia.org/wiki/$sci_name\" target=\"top\"><i>$sciname</i></a></td>
       <td class=\"spectrogram\">Best Recording<br>$date $time<br>$maxconf<br><video controls poster=\"$filename.png\"><source src=\"$filename\"></video></td>
       </tr></table>";
-    }}}?>
-    </form>
+    }}
+     echo "</form>
   </tr>
-</table>
-</div>
-<?php
+</table>";
+}
   if(isset($_POST['species'])){
     $name = $_POST['species'];
     $statement2 = $db->prepare("SELECT * FROM detections where Com_Name == \"$name\" ORDER BY Date DESC, Time DESC");
@@ -125,9 +119,9 @@ if(!isset($_POST['species'])){
       header("refresh: 0;");
     }
     $result2 = $statement2->execute();
-    echo "<table style=\"width:75%\" >
+    echo "<table>
       <tr>
-      <th>Listen</th>
+        <th>Listen</th>
       </tr>";
       while($results=$result2->fetchArray(SQLITE3_ASSOC))
       {
@@ -145,5 +139,5 @@ if(!isset($_POST['species'])){
           </tr>";
 
       }echo "</table>";}?>
-</body>
+</div>
 </html>
diff --git a/scripts/stats.php b/scripts/stats.php
index 72d0bd8..64d2f71 100644
--- a/scripts/stats.php
+++ b/scripts/stats.php
@@ -46,18 +46,6 @@ if(isset($_POST['species'])){
 };?>
 <?php if(isset($_POST['species'])){
   $species = $_POST['species'];
-  $str = "<h3>$species</h3>
-    <table>
-      <tr>
-	<th>Scientific Name</th>
-  <th>Occurrences</th>
-	<th>Highest Confidence Score</th>
-	<th>Best Recording</th>
-	<th>Links</th>
-      </tr>";
-  echo str_pad($str, 4096);
-  ob_flush();
-  flush();
    
 while($results=$result3->fetchArray(SQLITE3_ASSOC)){
   $count = $results['COUNT(*)'];
@@ -71,12 +59,14 @@ while($results=$result3->fetchArray(SQLITE3_ASSOC)){
   $comname = preg_replace('/\'/', '', $comname);
   $linkname = preg_replace('/_/', '+', $dbsciname);
   $filename = "/By_Date/".$date."/".$comname."/".$results['File_Name'];
-  echo str_pad("<tr>
-  <td><a href=\"https://wikipedia.org/wiki/$dbsciname\" target=\"top\"/>$sciname</a></td>
-  <td>$count</td>
-  <td>$maxconf</td>
-  <td class=\"spectrogram\">$date $time<br><video controls poster=\"$filename.png\"><source src=\"$filename\"></video></td>
-  <td><a href=\"https://allaboutbirds.org/guide/$comname\" target=\"top\"/>All About Birds</a></td>
+  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>
+  <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>
     </table>
   <p>Loading Images from <a href=\"https://commons.wikimedia.org/w/index.php?search=$linkname&title=Special:MediaSearch&go=Go&type=image\" target=\"_blank\">Wikimedia Commons</a></p>", '6096');
@@ -96,12 +86,6 @@ while($results=$result3->fetchArray(SQLITE3_ASSOC)){
 ?>
 <br><br><br>
     <table>
-      <tr>
-      	<th>Common Name</th>
-      	<th>Occurrences</th>
-      	<th>Max Confidence Score</th>
-      	<th>Best Recording</th>
-      </tr>
 <?php
 while($results=$result->fetchArray(SQLITE3_ASSOC))
 {
@@ -112,17 +96,16 @@ $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>
-      </form>
-      <td><?php echo $results['COUNT(*)'];?></td>
-      <td><?php echo $results['MAX(Confidence)'];?></td>
-      <td style="width:50%"><?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>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>
       </tr>
 <?php
 }
 ?>
     </table>
+      </form>
+</div>
 </div>
 </body>
 </html>
diff --git a/scripts/viewdb.php b/scripts/viewdb.php
index eedec69..ec925e3 100644
--- a/scripts/viewdb.php
+++ b/scripts/viewdb.php
@@ -68,10 +68,8 @@ $speciestally = $result5->fetchArray(SQLITE3_ASSOC);
   <style>
 </style>
 </head>
-<body>
-
-  <section>
-    <h2>Number of Detections</h2>
+<div class="viewdb">
+    <h3>Number of Detections</h3>
     <table>
       <tr>
 	<th>Total</th>
@@ -90,15 +88,8 @@ $speciestally = $result5->fetchArray(SQLITE3_ASSOC);
       </form>
       </tr>
     </table>
-    <h2>Today's Detections</h2>
+    <h3>Today's Detections</h3>
     <table>
-      <tr>
-	<th>Time</th>
-	<th>Listen</th>
-	<th>Scientific Name</th>
-	<th>Common Name</th>
-	<th>Confidence</th>
-      </tr>
 <?php
 while($todaytable=$result0->fetchArray(SQLITE3_ASSOC))
 {
@@ -108,11 +99,12 @@ $filename = "/By_Date/".date('Y-m-d')."/".$comname."/".$todaytable['File_Name'];
 $sciname = preg_replace('/ /', '_', $todaytable['Sci_Name']);
 ?>
       <tr>
-      <td><?php echo $todaytable['Time'];?></td>
-      <td class="spectrogram"><video controls poster="<?php echo $filename.".png";?>"><source src="<?php echo $filename;?>"></video></td>
-      <td><a class="a2" href="https://wikipedia.org/wiki/<?php echo $sciname;?>" target="top"><?php echo $todaytable['Sci_Name'];?></a></td>
-      <td><a class="a2" href="https://allaboutbirds.org/guide/<?php echo $comname;?>" target="top"><?php echo $todaytable['Com_Name'];?></a></td>
-      <td><?php echo $todaytable['Confidence'];?></td>
+      <td><?php echo $todaytable['Time'];?><br>
+      <b><a class="a2" href="https://allaboutbirds.org/guide/<?php echo $comname;?>" target="top"><?php echo $todaytable['Com_Name'];?></a></b><br>
+      <a class="a2" href="https://wikipedia.org/wiki/<?php echo $sciname;?>" target="top"><i><?php echo $todaytable['Sci_Name'];?></i></a><br>
+      <?php echo $todaytable['Confidence'];?><br>
+      <video controls poster="<?php echo $filename.".png";?>"><source src="<?php echo $filename;?>"></video></td>
 <?php }?>
       </tr>
     </table>
+</div>