added new changes

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\">";
 }

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;
-  }}
+  }
+}

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>