I like this so far

homepage/index.php

@@ -3,9 +3,31 @@
 <?php
 echo "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">";
 if(isset($_GET['stream'])){
-  echo "<h1>BirdNET-Pi</h1><br><audio controls autoplay><source src=\"/stream\"></audio>";
+  if (file_exists('/home/pi/BirdNET-Pi/thisrun.txt')) {
+  $config = parse_ini_file('/home/pi/BirdNET-Pi/thisrun.txt');
+} elseif (file_exists('/home/pi/BirdNET-Pi/firstrun.ini')) {
+  $config = parse_ini_file('/home/pi/BirdNET-Pi/firstrun.ini');
+}
+$caddypwd = $config['CADDY_PWD'];
+if (!isset($_SERVER['PHP_AUTH_USER'])) {
+  header('WWW-Authenticate: Basic realm="My Realm"');
+  header('HTTP/1.0 401 Unauthorized');
+  echo 'You cannot listen to the live audio stream';
+  exit;
 } else {
-  echo "<h1>BirdNET-Pi</h1><br><form action=\"\" method=\"GET\"><button type=\"submit\" name=\"stream\" value=\"play\">Live Audio</button></form>";
+  $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>";
+  } else {
+    header('WWW-Authenticate: Basic realm="My Realm"');
+    header('HTTP/1.0 401 Unauthorized');
+    echo 'You cannot listen to the live audio stream';
+    exit;
+  }
+}
+} else {
+  echo "<h1>BirdNET-Pi</h1><form action=\"\" method=\"GET\"><button type=\"submit\" name=\"stream\" value=\"play\">Live Audio</button></form>";
 }
 echo "</div>";
 if(isset($_GET['log'])){

homepage/style.css

@@ -19,31 +19,31 @@
   margin-right: auto;
 }
 
-/* Add a black background color to the top navigation */
+.topbar {
-.topnav {
+  display: block;
-  overflow: hidden;
+  width: auto;
-  background-color: rgb(119, 196, 135);
+  margin-left: 10%;
-  width:100%;
+  margin-right: 10%;
+}
+
+.topnav {
+  background-color: rgb(119, 196, 135);
   display: block;
-  margin-left: auto;
-  margin-right: auto;
 }
 
-/* Style the links inside the navigation bar */
 .topnav button {
-  float: left;
+  background-color: transparent;
   display: block;
   text-align: center;
   padding: 14px 16px;
+  float:left;
 }
 
-/* Change the color of links on hover */
 .topnav button:hover {
   background-color: #ddd;
   color: black;
 }
 
-/* Add an active class to highlight the current page */
 .topnav button.active {
   background-color: #04AA6D;
   color: white;
@@ -54,8 +54,8 @@
   display: none;
 }
 
-.topnav form {
+h3 {
-  float:left;
+  text-align: center;
 }
 
 iframe {
@@ -91,10 +91,21 @@ th {
   text-align: center;
 }
 
-audio {
+audio, video{
   width: 100%;
 }
 
+.spectrogram {
+  width:33%
+}
+
+.centered {
+  display: block;
+  width: auto;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 button {
   font-size: large;
   background-color: transparent;
@@ -103,17 +114,20 @@ button {
   cursor: pointer;
 }
 
-.spectrogrambutton, .logbutton, .navbuttons {
+.logbutton, .navbuttons {
   float: left;
 }
 
+.spectrogrambutton {
+  float:top;
+}
+
 body::-webkit-scrollbar {
   display:none
 }
 
 @media screen and (max-width: 1000px) {
   .topnav button {display: none;}
-  .topnav form {float: none;}
   /*.topnav button:not(:first-child) {display: none;}*/
   .topnav button.icon {
     display: block;
@@ -131,3 +145,29 @@ body::-webkit-scrollbar {
     text-align: center;
   }
 }
+
+@media screen and (max-width: 600px) {
+  .top.nav button {
+  font-size: 16px;
+  }
+  .topnav button {display: none;}
+  /*.topnav button:not(:first-child) {display: none;}*/
+  .topnav button.icon {
+    display: block;
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .topnav button {
+  font-size: 16px;
+  }
+  .topnav.responsive {position: relative;}
+  .topnav.responsive button {
+    float: left;
+    display: block;
+    text-align: center;
+  }
+}

homepage/views.php

@@ -1,5 +1,6 @@
 <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>
@@ -13,11 +14,12 @@
   <button type="submit" name="log" value="log" id="log">View Log</button>
 </form>
 <form action="index.php" method="GET" id="spectrogram">
-  <button 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>
-
+</div>
+</body>
 <?php
 if(isset($_POST['view'])){
   if($_POST['view'] == "System"){header('location:phpsysinfo/index.php');}
@@ -27,12 +29,34 @@ if(isset($_POST['view'])){
   if($_POST['view'] == "Species Stats"){include('stats.php');}
   if($_POST['view'] == "Daily Charts"){include('history.php');}
   if($_POST['view'] == "Tools"){
-    echo "<form action=\"\" method=\"POST\">
+    if (file_exists('/home/pi/BirdNET-Pi/thisrun.txt')) {
-      <button type=\"submit\" name=\"view\" value=\"Settings\">Settings</button>
+      $config = parse_ini_file('/home/pi/BirdNET-Pi/thisrun.txt');
-      <button type=\"submit\" name=\"view\" value=\"System\">System Info</button>
+    } elseif (file_exists('/home/pi/BirdNET-Pi/firstrun.ini')) {
-      <button type=\"submit\" name=\"view\" value=\"Included\">Custom Species List</button>
+      $config = parse_ini_file('/home/pi/BirdNET-Pi/firstrun.ini');
-      <button type=\"submit\" name=\"view\" value=\"Excluded\">Excluded Species List</button>
+    }
-      </form>";
+    $caddypwd = $config['CADDY_PWD'];
+    if (!isset($_SERVER['PHP_AUTH_USER'])) {
+      header('WWW-Authenticate: Basic realm="My Realm"');
+      header('HTTP/1.0 401 Unauthorized');
+      echo 'You cannot edit the settings for this installation';
+      exit;
+    } else {
+      $submittedpwd = $_SERVER['PHP_AUTH_PW'];
+      $submitteduser = $_SERVER['PHP_AUTH_USER'];
+      if($submittedpwd == $caddypwd && $submitteduser == 'birdnet'){
+        echo "<form action=\"\" method=\"POST\">
+        <button type=\"submit\" name=\"view\" value=\"Settings\">Settings</button>
+        <button type=\"submit\" name=\"view\" value=\"System\">System Info</button>
+        <button type=\"submit\" name=\"view\" value=\"Included\">Custom Species List</button>
+        <button type=\"submit\" name=\"view\" value=\"Excluded\">Excluded Species List</button>
+        </form>";
+      } else {
+        header('WWW-Authenticate: Basic realm="My Realm"');
+        header('HTTP/1.0 401 Unauthorized');
+        echo 'You cannot edit the settings for this installation';
+        exit;
+      }
+    }
   }
   if($_POST['view'] == "Recordings"){include('play.php');}
   if($_POST['view'] == "Settings"){include('scripts/config.php');} 
@@ -106,4 +130,4 @@ function myFunction() {
   }
 }
 </script>
-
+</body>

scripts/advanced.php

@@ -199,12 +199,9 @@ foreach($formats as $format){
 }
 ?>
       </select>
-      <h3>Passwords</h3>
+      <h3>BirdNET-Pi Password</h3>
       <label for="caddy_pwd">Webpage: </label>
       <input name="caddy_pwd" type="text" value="<?php print($newconfig['CADDY_PWD']);?>" /><br>
-      <p>This password protects the Live Audio Stream, the Processed extractions, phpSysInfo, your Tools, and WebTerminal. When you update this value, the web server will reload, so wait about 30 seconds and then reload the page.</p>
-      <label for="ice_pwd">Live Audio Stream: </label>
-      <input name="ice_pwd" type="text" value="<?php print($newconfig['ICE_PWD']);?>" required/><br>
       <h3>Custom URLs</h3>
       <p>When you update any of the URL settings below, the web server will reload, so be sure to wait at least 30 seconds and then reload the page.</p>
       <label for="birdnetpi_url">BirdNET-Pi URL: </label>

scripts/extract_new_birdsounds.sh

@@ -64,7 +64,7 @@ for h in "${SCAN_DIRS[@]}";do
 	    | awk -F\; '{print $5}')""
 	    
     #CONFIDENCE_SCORE="${CONFIDENCE:0:2}%"
-    CONFIDENCE_SCORE="$(printf %.0f $(echo "scale=2; ${CONFIDENCE} * 100" | bc))"
+    CONFIDENCE_SCORE="$(printf %.0f "$(echo "scale=2; ${CONFIDENCE} * 100" | bc)")"
     NEWFILE="${COMMON_NAME// /_}-${CONFIDENCE_SCORE}-${OLDFILE//.wav/.${AUDIOFMT}}"
     echo "NEWFILE=$NEWFILE"
     NEWSPECIES_BYDATE="${EXTRACTED}/By_Date/${DATE}/${COMMON_NAME// /_}"

scripts/history.php

@@ -28,7 +28,7 @@ $totalcount = $result1->fetchArray(SQLITE3_ASSOC);
 <body>
 <form action="" method="POST">
   <input type="date" name="date" value="<?php echo $theDate;?>">
-  <button type="submit" name="view" value="History">Submit Date</button>
+  <button type="submit" name="view" value="Daily Charts">Submit Date</button>
 </form>
 <div>
 		<table>

scripts/overview.php

@@ -108,18 +108,18 @@ $speciestally = $result5->fetchArray(SQLITE3_ASSOC);
             <button type="submit" name="species" value="<?php echo $mostrecent['Com_Name'];?>"><?php echo $mostrecent['Com_Name'];?></button>
           </td>
         </form>
-        <td><audio controls><source src="<?php echo $filename;?>"></audio></td>
+        <td class="spectrogram" ><video controls poster="<?php echo $filename.".png";?>"><source src="<?php echo $filename;?>"></video></td>
         <td><?php echo $mostrecent['Confidence'];?></td>
       </tr>
     </table>
   </div>
 <?php
 if (file_exists('/home/pi/BirdSongs/Extracted/Charts/'.$chart)) {
-  echo "<img src=\"/Charts/$chart?nocache=time()\">";
+  echo "<img class=\"centered\" src=\"/Charts/$chart?nocache=time()\">";
 } else {
   echo "<p>No Detections For Today</p>";
 }
 ?>
-    <h2>Currently Analyzing</h2>
+    <h3>Currently Analyzing</h3>
-<img src='/spectrogram.png?nocache=<?php echo time();?>' >
+<img class="centered" style="width:100%;" src='/spectrogram.png?nocache=<?php echo time();?>' >
 </html>

scripts/play.php

@@ -93,7 +93,7 @@ while($results=$result->fetchArray(SQLITE3_ASSOC))
       </tr>
       <tr>
       <th>Most confident recording: </th>
-      <td><audio controls><source src=\"$filename\"></audio></td>
+      <td class=\"spectrogram\"><video controls poster=\"$filename.png\"><source src=\"$filename\"></video></td>
       </tr></table>";
     };};?>
     </td>
@@ -129,7 +129,7 @@ while($results=$result->fetchArray(SQLITE3_ASSOC))
         $confidence = $results['Confidence'];
         echo "<tr>
           <td>$date $time</td>
-          <td><audio controls><source src=\"$filename\"></audio></td>
+          <td class=\"spectrogram\"><video controls poster=\"$filename.png\"><source src=\"$filename\"></video></td>
           <td><a href=\"https://wikipedia.org/wiki/$sciname\" target=\"top\">$sci_name</a></td>
           <form action=\"\" method=\"POST\"> 
           <td><input type=\"hidden\" name=\"view\" value=\"Species Stats\"><button type=\"submit\" name=\"species\" value=\"$name\">$name</button>

scripts/spectrogram.php

@@ -6,6 +6,6 @@ if (file_exists('/home/pi/BirdNET-Pi/thisrun.txt')) {
 }
 $refresh = $config['RECORDING_LENGTH'];
 $time = time();
-echo "<img src=\"/spectrogram.png?nocache=$time\">";
+echo "<img style=\"width:100%;height:100%\" src=\"/spectrogram.png?nocache=$time\">";
 header("Refresh: $refresh;");
 ?>

scripts/stats.php

@@ -41,7 +41,7 @@ if(isset($_POST['species'])){
 <div class="row">
  <div class="column first">
 <?php if(!isset($_POST['species'])){
-    echo "<p>Choose a species below to show statistics.</p>";
+    echo "<p style=\"text-align:center\">Choose a species below to load images from Wikimedia Commons.</p>";
 };?>
     <table>
       <tr>
@@ -65,7 +65,7 @@ $filename = "/By_Date/".$results['Date']."/".$comname."/".$results['File_Name'];
       </form>
       <td><?php echo $results['COUNT(*)'];?></td>
       <td><?php echo $results['MAX(Confidence)'];?></td>
-      <td><audio controls><source src="<?php echo $filename;?>"></audio></td>
+      <td class="spectrogram"><video controls poster="<?php echo $filename.".png";?>"><source src="<?php echo $filename;?>" type="audio/mp3"></video></td>
       </tr>
 <?php
 }
@@ -104,11 +104,11 @@ while($results=$result3->fetchArray(SQLITE3_ASSOC)){
   <td><a href=\"https://wikipedia.org/wiki/$dbsciname\" target=\"top\"/>$sciname</a></td>
   <td>$count</td>
   <td>$maxconf</td>
-  <td>$date $time<br><audio controls><source src=\"$filename\"></audio></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>
   </tr>
     </table>
-  <p>Loading Images from https://commons.wikimedia.org/w/index.php?search=$linkname&title=Special:MediaSearch&go=Go&type=image</p>", '6096');
+  <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');
   
   ob_flush();
   flush();
@@ -118,9 +118,7 @@ while($results=$result3->fetchArray(SQLITE3_ASSOC)){
   foreach ($matches as $val) {
       $pos = strpos($val[2],"/");
       $link = substr($val[2],1,-1);
-      if($pos == 1)
+      if($pos !== 1 && strpos($link, "upload") == true && strpos($link, "CentralAutoLogin") == false)
-          echo "http://domain.com" . $link;
-      elseif(strpos($link, "upload") == true)
           echo "<img src=\"$link\">";
   }
 }}

scripts/viewdb.php

@@ -109,7 +109,7 @@ $sciname = preg_replace('/ /', '_', $todaytable['Sci_Name']);
 ?>
       <tr>
       <td><?php echo $todaytable['Time'];?></td>
-      <td><audio controls><source src="<?php echo $filename;?>"></audio></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>