diff --git a/homepage/index.php b/homepage/index.php index 221e6a1..e498aa7 100644 --- a/homepage/index.php +++ b/homepage/index.php @@ -36,7 +36,7 @@ if (!isset($_SERVER['PHP_AUTH_USER'])) {
-

BirdNET-Pi🍀 +

BirdNET-Pi

"; } if(isset($_GET['log'])) { diff --git a/homepage/style.css b/homepage/style.css index 2723879..a006676 100644 --- a/homepage/style.css +++ b/homepage/style.css @@ -2,22 +2,79 @@ font-family: 'Arial', 'Gill Sans', 'Gill Sans MT', ' Calibri', 'Trebuchet MS', 'sans-serif'; box-sizing: border-box; - font-size: large; + font-size: medium; } +a { + text-decoration: none; +} -.banner { +h3 { + text-align: center; +} + +iframe { + padding: 0; + margin: 0; + border: none; + height: 95%; + width: 100%; +} + +body { + margin: 0; + background-color: rgb(119, 196, 135); +} + +table { + background-color: transparent; + border-collapse: collapse; + border-spacing: 0; + margin-left: auto; + margin-right: auto; +} + +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%; +} + +button { + background-color: transparent; + border: none; + color: black; + cursor: pointer; +} + +button:hover { + color: blue; +} + +.banner { + height: 5%; + text-align: center; +} + .banner h1 { - /*float: top;*/ font-size: x-large; } .banner audio,.banner form { - float:right; + float: right; width: 120px; margin-left: -120px; margin-right: auto; @@ -36,16 +93,17 @@ font-size: x-large; } -.topbar { - display: block; - width: auto; - margin-left: 10%; - margin-right: 10%; -} - -.topnav { +.topnav, .topnav form { background-color: rgb( 159, 226, 155); display: block; + width: 85%; + margin-left: auto; + margin-right: auto; +} + +.topnav form { + margin-left: auto; + margin-rigth: auto; } .topnav button { @@ -90,7 +148,25 @@ vertical-align: middle; } +.stats table { + height: auto; +} +.column table { + width: auto; +} + +.stats button:hover { + color: blue; +} + +.center button{ + color: blue; +} + +.left { + float: left; +} .history table,.history img { width: auto; @@ -98,50 +174,6 @@ margin-right: auto; } -a { - text-decoration: none; -} - -h3 { - text-align: center; -} - -iframe { - border: none; - height: 100%; - width: 100%; -} - -body { - background-color: rgb(119, 196, 135); -} - -table { - background-color: transparent; - border-collapse: collapse; - border-spacing: 0; - margin-left: auto; - margin-right: auto; -} - -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:50% @@ -159,16 +191,6 @@ audio, video{ width:100%; } -button { - background-color: transparent; - border: none; - color: black; - cursor: pointer; -} - -button:hover { - color: blue; -} .logbutton, .navbuttons { float: left; @@ -182,10 +204,16 @@ body::-webkit-scrollbar { display:none } -@media screen and (max-width: 1000px) { +@media screen and (max-width: 700px) { + .topnav { + margin-left:auto; + margin-right:auto; + } .topnav button {display: none;} /*.topnav button:not(:first-child) {display: none;}*/ .topnav button.icon { + padding: 0; + margin: 0; display: block; width: 100%; margin-left: auto; @@ -194,15 +222,28 @@ body::-webkit-scrollbar { .overview img { width: 100%; } + .banner { + height: auto; + } .banner img { + display: none; + } + .logo img { + display: block; width: 60px; height: 60px; } + .version { + display: none; + } .topnav.responsive {position: relative;} .topnav.responsive button { display: block; text-align: center; } + .left { + display: none; + } } @media screen and (max-width: 600px) { @@ -214,18 +255,30 @@ body::-webkit-scrollbar { .viewdb table,.overview img { width: 100% } + .banner { + height: auto; + } .banner img { + display: none; + } + .logo img { + display: block; width: 60px; height: 60px; } .play table,.overview table,.stats table { width: 100%; } + .topnav { + margin-left:auto; + margin-right:auto; + } .topnav button { font-size: large; } .topnav button {display: none;} .topnav button.icon { + margin: 0; padding: 0; display: block; width: 100%; @@ -236,4 +289,7 @@ body::-webkit-scrollbar { .topnav.responsive button { display: block; } + .left { + display:none; + } } diff --git a/homepage/views.php b/homepage/views.php index ac6469f..0d62908 100644 --- a/homepage/views.php +++ b/homepage/views.php @@ -1,25 +1,22 @@ -
- - - - - - + + + + + +
-
- + +
- +
-
- execute(); +$statement2 = $db->prepare('SELECT Date, Time, File_Name, Com_Name, COUNT(*), MAX(Confidence) FROM detections GROUP BY Com_Name ORDER BY Com_Name'); +if($statement == False) { + echo "Database busy"; + header("refresh: 0;"); +} +$result2 = $statement2->execute(); + + + if(isset($_POST['species'])){ $selection = $_POST['species']; $statement3 = $db->prepare("SELECT Com_Name, Sci_Name, COUNT(*), MAX(Confidence), File_Name, Date, Time from detections WHERE Com_Name = \"$selection\""); @@ -40,8 +49,30 @@ if(isset($_POST['species'])){
+
+ +fetchArray(SQLITE3_ASSOC)) +{ +$comname = preg_replace('/ /', '_', $results['Com_Name']); +$comname = preg_replace('/\'/', '', $comname); +$filename = "/By_Date/".$results['Date']."/".$comname."/".$results['File_Name']; +?> + + + + + + +
+ +
+
+

Choose a species below to load images from Wikimedia Commons.

+?>

Choose a species to load images from Wikimedia Commons.

fetchArray(SQLITE3_ASSOC)){ echo str_pad("

$species

@@ -96,9 +127,9 @@ $filename = "/By_Date/".$results['Date']."/".$comname."/".$results['File_Name']; +
Occurrences:
+ Max Confidence:
+ Best Recording:
+
$sciname
- Occurrences: $count
- Max Confidence: $maxconf
- Best Recording: $date $time
+ Occurrences: $count
+ Max Confidence: $maxconf
+ Best Recording: $date $time
All About Birds
-
Occurrences:
- Max Confidence:
- Best Recording: