updates

2022-02-27 15:27:57 -05:00
parent 79caccafb3
commit 7fa41cdc28
7 changed files with 71 additions and 139 deletions
@@ -2,6 +2,7 @@
  font-family: 'Arial', 'Gill Sans', 'Gill Sans MT',
  ' Calibri', 'Trebuchet MS', 'sans-serif';
  box-sizing: border-box;
+  font-size: large;
 }

 .banner {
@@ -11,6 +12,7 @@

 .banner h1 {
  float: top;
+  font-size: x-large;
 }

 .banner audio {
@@ -27,7 +29,7 @@
 }

 .topnav {
-  background-color: rgb(119, 196, 135);
+  background-color: rgb( 159, 226, 155);
  display: block;
 }

@@ -54,6 +56,28 @@
  display: none;
 }

+.play table {
+  width:50%;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.overview td {
+  width:20%;
+}
+
+.overview table {
+  width: 75%;
+}
+
+.stats table {
+  width: 100%;
+}
+
+a {
+  text-decoration: none;
+}
+
 h3 {
  text-align: center;
 }
@@ -71,7 +95,6 @@ body {
 table {
  background-color: transparent;
  margin: 0 auto;
-  font-size: large;
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
@@ -79,6 +102,8 @@ table {
 }

 td {
+  padding: 10px;
+  vertical-align: top;
  background-color: rgb(219, 255, 235);
  font-weight: lighter;
  border: 2px solid black;
@@ -100,20 +125,28 @@ audio, video{
 }

 .centered {
+  text-align: center;
  display: block;
  width: auto;
  margin-left: auto;
  margin-right: auto;
 }

+.full {
+  width:100%;
+}
+
 button {
-  font-size: large;
  background-color: transparent;
  border: none;
  color: black;
  cursor: pointer;
 }

+button:hover {
+  color: blue;
+}
+
 .logbutton, .navbuttons {
  float: left;
 }
@@ -140,15 +173,17 @@ body::-webkit-scrollbar {
@media screen and (max-width: 1000px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive button {
-    float: left;
    display: block;
    text-align: center;
  }
 }

@media screen and (max-width: 600px) {
-  .top.nav button {
-  font-size: 16px;
+  .play table,.overview table {
+    width: 100%;
+  }
+  .topnav button { 
+    font-size: xx-large;
  }
  .topnav button {display: none;}
  /*.topnav button:not(:first-child) {display: none;}*/
@@ -161,13 +196,14 @@ body::-webkit-scrollbar {
 }

@media screen and (max-width: 600px) {
+  .play table,.overview table {
+    width: 100%;
+  }
  .topnav button {
-  font-size: 16px;
+    font-size: x-large;
  }
  .topnav.responsive {position: relative;}
  .topnav.responsive button {
-    float: left;
    display: block;
    text-align: center;
-  }
-}
+  }}
@@ -26,7 +26,7 @@ if(isset($_POST['view'])){
  if($_POST['view'] == "Spectrogram"){include('spectrogram.php');}
  if($_POST['view'] == "Overview"){include('overview.php');}
  if($_POST['view'] == "Today's Detections"){include('viewdb.php');}
-  if($_POST['view'] == "Species Stats"){include('stats.php');}
+  if($_POST['view'] == "Species Stats"){echo "<br><br>";include('stats.php');}
  if($_POST['view'] == "Daily Charts"){include('history.php');}
  if($_POST['view'] == "Tools"){
    if (file_exists('/home/pi/BirdNET-Pi/thisrun.txt')) {
@@ -68,8 +68,7 @@ $speciestally = $result5->fetchArray(SQLITE3_ASSOC);
 </style>
 </head>
 <body>
- <div>
-  </div>
+<div class="overview">
    <table>
      <tr>
        <th>Total</th>
@@ -88,9 +87,6 @@ $speciestally = $result5->fetchArray(SQLITE3_ASSOC);
        </form>
      </tr>
    </table>
-</div>
- <div>
-
    <table>
      <tr>
        <th>Most Recent Detection</th>
@@ -120,6 +116,6 @@ if (file_exists('/home/pi/BirdSongs/Extracted/Charts/'.$chart)) {
  echo "<p>No Detections For Today</p>";
 }
 ?>
-    <h3>Currently Analyzing</h3>
-<img class="centered" style="width:100%;" src='/spectrogram.png?nocache=<?php echo time();?>' >
+    <h3 class="centered">Currently Analyzing</h3>
+<img class="full" src='/spectrogram.png?nocache=<?php echo time();?>' >
 </html>
@@ -1,99 +0,0 @@
-/* style sheet */
-* {
-  font-family: 'Arial', 'Gill Sans', 'Gill Sans MT',
-  ' Calibri', 'Trebuchet MS', 'sans-serif';
-  box-sizing: border-box;
-}
-
-a {
-  text-decoration:none;
-}
-
-body {
-  background-color: rgb(119, 196, 135);
-}
-
-.column {
-  display:block;
-  width:33%;
-  margin-left:auto;
-  margin-right:auto;
-}
-
-.left {
-  float:left;
-}
-
-.right {
-  float:right;
-  width:66%;
-}
-  
-table {
-  background-color: rgb(219, 255, 235);
-  margin: 0 auto;
-  font-size: large;
-  border-collapse: collapse;
-  border-spacing: 0;
-  width: 100%;
-  border: 1px solid black;
-}
-
-h1 {
-  text-align: center;
-  color: black;
-  font-size: xx-large;
-}
-
-h2 {
-  margin-left: -150px;
-  text-align: center;
-  color: black;
-  font-size: large;
-}
-
-h3 {
-  text-align: center;
-  color: black;
-  font-size: large;
-}
-
-td {
-  background-color: rgb(219, 255, 235);
-  font-weight: lighter;
-  border: 1px solid black;
-  padding: 10px;
-  text-align: center;
-}
-
-th {
-  background-color: rgb(219, 255, 235);
-  font-weight: bold;
-  border: 1px solid black;
-  padding: 10px;
-  text-align: center;
-}
-
-button {
-  background-color: transparent;
-  font-size: large;
-  border:none;
-  cursor:pointer;
-}
-
-@media screen and (max-width: 1000px) {
-  h2 {
-    margin-left: 0;
-    text-align: center;
-    color: black;
-    font-size: large;
-  }
-
-  .column {
-    width: 80%;
-  }
-
-}
-body::-webkit-scrollbar {
-  display:none
-}
@@ -56,6 +56,7 @@ if(isset($_POST['bydate'])){
    </style>
  </head>
 <body>
+<div class="play">
 <table>
 <?php
 if(!isset($_POST['species'])){
@@ -88,18 +89,18 @@ while($results=$result->fetchArray(SQLITE3_ASSOC))
    $filename = "/By_Date/".$date."/".$comname."/".$results['File_Name'];
    echo "<table >
      <tr>
-      <th>$name</th>
-      <th>Max Confidence: $maxconf</th>
+      <th colspan=\"2\">$name</th>
+      <th></th>
      </tr>
      <tr>
-      <th>Most confident recording: </th>
-      <td class=\"spectrogram\"><video controls poster=\"$filename.png\"><source src=\"$filename\"></video></td>
+      <td class=\"spectrogram\">Best Recording<br>$maxconf<br><video controls poster=\"$filename.png\"><source src=\"$filename\"></video></td>
      </tr></table>";
    };};?>
    </td>
    </form>
  </tr>
 </table>
+</div>
 <?php
  if(isset($_POST['species'])){
    $name = $_POST['species'];
@@ -32,16 +32,17 @@ if(isset($_POST['species'])){
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>BirdNET-Pi DB</title>
+  <link rel="stylesheet" href="../style.css">
+
 <style>
 </style>
+
 </head>
 <body>

-  <section>
-<div class="row">
- <div class="column first">
 <?php if(!isset($_POST['species'])){
-    echo "<p style=\"text-align:center\">Choose a species below to load images from Wikimedia Commons.</p>";
+?><p class="centered">Choose a species below to load images from Wikimedia Commons.</p>
+<?php
 };?>
    <table>
      <tr>
@@ -65,17 +66,15 @@ $filename = "/By_Date/".$results['Date']."/".$comname."/".$results['File_Name'];
      </form>
      <td><?php echo $results['COUNT(*)'];?></td>
      <td><?php echo $results['MAX(Confidence)'];?></td>
-      <td class="spectrogram"><video controls poster="<?php echo $filename.".png";?>"><source src="<?php echo $filename;?>" type="audio/mp3"></video></td>
+      <td style="width:50%"><video controls poster="<?php echo $filename.".png";?>"><source src="<?php echo $filename;?>" type="audio/mp3"></video></td>
      </tr>
 <?php
 }
 ?>
    </table>
-  </div>  
 <?php if(isset($_POST['species'])){
  $species = $_POST['species'];
-  $str = "<div class=\"column second\">
-   <h3>$species</h3>
+  $str = "<h3>$species</h3>
    <table>
      <tr>
 	<th>Scientific Name</th>
@@ -123,7 +122,6 @@ while($results=$result3->fetchArray(SQLITE3_ASSOC)){
  }
 }}
 ?>
-
-  </section>
+</body>
 </html>