Things have been made better

- All buttons and bird images now have nice transitions on hover
- Bird images have an added drop shadow for the aesthetics. 😎
- When hovering over sort icons, a tooltip describing the button is now displayed
- Best Recordings has been cleaned up and made a little clearer

homepage/style.css

@@ -70,11 +70,16 @@ label {
   font-weight: bold;
 }
 
+hr { 
+  border-color:black;
+}
+
 button {
   background-color: transparent;
   border: none;
   color: black;
   cursor: pointer;
+  transition:background-color 0.2s;
 }
 
 button:hover {
@@ -546,7 +551,7 @@ button:hover {
   font-size:x-large;
   background:#dbffeb;
   padding:5px;
-  
+  box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.10);
 }
 button.legacyview {
   color:gray;
@@ -605,6 +610,7 @@ dialog::backdrop {
   margin-bottom:3px;
 }
 .centered_image_container img.img1 {
+  box-shadow:0px 2px 3px 0px rgb(0 0 0 / 29%);
   cursor:pointer;
   height:95%;
   position:absolute;
@@ -613,9 +619,18 @@ dialog::backdrop {
   border-radius: 5px;
   width:unset;
 }
+.centered_image_container img.img1:hover{
+  opacity:0.8;
+}
 .centered_image_container * {
   font-size:19px !important;
 }
 .centered_image_container form {
   margin-bottom:0px;
+}
+.brbanner {
+  padding:15px;
+  background-color:rgb(159, 226, 155);
+  text-align:center;
+  font-size:large;
 }

scripts/play.php

@@ -168,10 +168,10 @@ if(!isset($_GET['species']) && !isset($_GET['filename'])){
       <input type="hidden" name="view" value="Recordings">
       <input type="hidden" name="<?php echo $view; ?>" value="<?php echo $_GET['date']; ?>">
       <button <?php if(!isset($_GET['sort']) || $_GET['sort'] == "alphabetical"){ echo "style='background:#9fe29b !important;'"; }?> class="sortbutton" type="submit" name="sort" value="alphabetical">
-         <img src="images/sort_abc.svg" alt="Sort by alphabetical">
+         <img src="images/sort_abc.svg" title="Sort by alphabetical" alt="Sort by alphabetical">
       </button>
       <button <?php if(isset($_GET['sort']) && $_GET['sort'] == "occurrences"){ echo "style='background:#9fe29b !important;'"; }?> class="sortbutton" type="submit" name="sort" value="occurrences">
-         <img src="images/sort_occ.svg" alt="Sort by occurrences">
+         <img src="images/sort_occ.svg" title="Sort by occurrences" alt="Sort by occurrences">
       </button>
    </form>
 </div>
@@ -228,10 +228,10 @@ if(isset($_GET['species'])){ ?>
       <input type="hidden" name="view" value="Recordings">
       <input type="hidden" name="species" value="<?php echo $_GET['species']; ?>">
       <button <?php if(!isset($_GET['sort']) || $_GET['sort'] == "date"){ echo "style='background:#9fe29b !important;'"; }?> class="sortbutton" type="submit" name="sort" value="date">
-         <img width=35px src="images/sort_date.svg" alt="Sort by date">
+         <img width=35px src="images/sort_date.svg" title="Sort by date" alt="Sort by date">
       </button>
       <button <?php if(isset($_GET['sort']) && $_GET['sort'] == "confidence"){ echo "style='background:#9fe29b !important;'"; }?> class="sortbutton" type="submit" name="sort" value="confidence">
-         <img src="images/sort_occ.svg" alt="Sort by confidence">
+         <img src="images/sort_occ.svg" title="Sort by confidence" alt="Sort by confidence">
       </button>
    </form>
 </div>

scripts/stats.php

@@ -81,10 +81,10 @@ if(!file_exists($home."/BirdNET-Pi/scripts/disk_check_exclude.txt") || strpos(fi
     <input type="hidden" name="sort" value="<?php if(isset($_GET['sort'])){echo $_GET['sort'];}?>">
       <input type="hidden" name="view" value="Species Stats">
       <button <?php if(!isset($_GET['sort']) || $_GET['sort'] == "alphabetical"){ echo "style='background:#9fe29b !important;'"; }?> class="sortbutton" type="submit" name="sort" value="alphabetical">
-         <img src="images/sort_abc.svg" alt="Sort by alphabetical">
+         <img src="images/sort_abc.svg" title="Sort by alphabetical" alt="Sort by alphabetical">
       </button>
       <button <?php if(isset($_GET['sort']) && $_GET['sort'] == "occurrences"){ echo "style='background:#9fe29b !important;'"; }?> class="sortbutton" type="submit" name="sort" value="occurrences">
-         <img src="images/sort_occ.svg" alt="Sort by occurrences">
+         <img src="images/sort_occ.svg" title="Sort by occurrences" alt="Sort by occurrences">
       </button>
    </form>
 </div>
@@ -187,7 +187,12 @@ while($results=$result3->fetchArray(SQLITE3_ASSOC)){
 }
 }
 ?>
-<br><br><br>
+<?php if(isset($_GET['species'])){?>
+<br><br>
+<div class="brbanner">Best Recordings for Other Species:</div><br>
+<?php } else {?>
+<hr><br>
+<?php } ?>
 
     <table>
 <?php