aesthetic changes
This commit is contained in:
Patrick McGuire
+50
-56
@@ -5,21 +5,26 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.column1 {
|
||||
flex: 70%;
|
||||
}
|
||||
|
||||
/* Create two equal columns that floats next to each other */
|
||||
.column2 {
|
||||
flex: 30%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 75%;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* Create two equal columns that floats next to each other */
|
||||
.column {
|
||||
flex: 50%;
|
||||
padding-right: 5px;
|
||||
float: left;
|
||||
width: 50%;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
/* Clear floats after the columns */
|
||||
.row:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
table {
|
||||
@@ -39,64 +44,53 @@ h1 {
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-left: -150px;
|
||||
text-align: center;
|
||||
color: black;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
background-color: rgb(219, 255, 235);
|
||||
font-weight: bold;
|
||||
border: 1px solid black;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
.column {
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
table {
|
||||
background-color: rgb(219, 255, 235);
|
||||
margin: 0 auto;
|
||||
font-size: medium;
|
||||
border-collapse: collapse;
|
||||
border-spacing: 1;
|
||||
width: 100%;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
h1 {
|
||||
h3 {
|
||||
text-align: center;
|
||||
color: black;
|
||||
font-size: large;
|
||||
font-family: 'Gill Sans', 'Gill Sans MT',
|
||||
' Calibri', 'Trebuchet MS', 'sans-serif';
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
color: black;
|
||||
font-size: large;
|
||||
font-family: 'Gill Sans', 'Gill Sans MT',
|
||||
' Calibri', 'Trebuchet MS', 'sans-serif';
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
background-color: rgb(219, 255, 235);
|
||||
font-weight: bold;
|
||||
border: 1px solid black;
|
||||
padding: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
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;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
h2 {
|
||||
margin-left: 0;
|
||||
text-align: center;
|
||||
color: black;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.column {
|
||||
width: 100%;
|
||||
}
|
||||
/* Create two equal columns that floats next to each other */
|
||||
.column2 {
|
||||
float: center;
|
||||
width: 100%;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
body::-webkit-scrollbar {
|
||||
display:none
|
||||
}
|
||||
|
||||
+11
-14
@@ -50,36 +50,33 @@ $mysqli->close();
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Overview</title>
|
||||
<!-- CSS FOR STYLING THE PAGE -->
|
||||
<link rel="stylesheet" href="style.css">
|
||||
|
||||
|
||||
<style>
|
||||
table,td,th {
|
||||
background-color: rgb(219, 255, 235);
|
||||
}
|
||||
.center {
|
||||
display: block;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
width: 90%;
|
||||
padding-top: 10px;
|
||||
padding: 5px;
|
||||
}
|
||||
.center2 {
|
||||
display: block;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
width: 100%;
|
||||
padding-top: 10px;
|
||||
padding: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body style="background-color: rgb(119, 196, 135);">
|
||||
<h2 style="margin-left: -150px;">Overview</h2>
|
||||
<h2>Overview</h2>
|
||||
<div class="row">
|
||||
<div class="column" style="padding-right: 5px;">
|
||||
<div class="column2">
|
||||
<?php // LOOP TILL END OF DATA
|
||||
while($rows=$mostrecent ->fetch_assoc())
|
||||
{
|
||||
@@ -98,8 +95,8 @@ while($rows=$mostrecent ->fetch_assoc())
|
||||
}
|
||||
?>
|
||||
|
||||
<div class="row" style="padding-top: 10px;">
|
||||
<div class="column" style="flex: 70%;padding-right: auto;">
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<table>
|
||||
<tr>
|
||||
<th></th>
|
||||
@@ -115,7 +112,7 @@ while($rows=$mostrecent ->fetch_assoc())
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="column" style="flex: 30%;padding-right: 5px;padding-left: auto;">
|
||||
<div class="column">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Species Detected Today</th>
|
||||
@@ -124,8 +121,8 @@ while($rows=$mostrecent ->fetch_assoc())
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<h2 style="margin-left: -150px;">Today's Top 10 Species</h2>
|
||||
<img src='/Charts/Combo-<?php echo $myDate;?>.png?nocache=<?php echo time();?>' style="width: 100%;padding: 5px;">
|
||||
<h2 style="margin-left: -150px;">Currently Analyzing</h2>
|
||||
<h2>Today's Top 10 Species</h2>
|
||||
<img src='/Charts/Combo-<?php echo $myDate;?>.png?nocache=<?php echo time();?>' style="width: 100%;padding: 5px;margin-left: auto;margin-right: auto;display: block;">
|
||||
<h2>Currently Analyzing</h2>
|
||||
<img src='/spectrogram.png?nocache=<?php echo time();?>' style="width: 100%;padding: 5px;">
|
||||
</html>
|
||||
|
||||
+6
-5
@@ -66,21 +66,23 @@ table,th,td {
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body style="background-color: rgb(119, 196, 135);background-image: linear-gradient(to top, rgb(119, 196, 135),black;">
|
||||
|
||||
<img src='/Charts/Combo-<?php echo $myDate;?>.png?nocache=<?php echo time();?>' class="center">
|
||||
<body style="background-color: rgb(119, 196, 135);">
|
||||
|
||||
<section>
|
||||
<div class="row">
|
||||
<div cladd="column" style="width: 100%;padding-left: 15%;padding-right: 15%;padding-bottom: 10px;">
|
||||
<h2>Number of Detections</h2>
|
||||
<div class="column2">
|
||||
<table>
|
||||
<tr>
|
||||
|
||||
<th></th>
|
||||
<th>Today</th>
|
||||
<th>Last Hour</th>
|
||||
<th>Number of Unique Species Today</th>
|
||||
</tr>
|
||||
<tr>
|
||||
|
||||
<th>Number of Detections</th>
|
||||
<td><?php echo $todayscount;?></td>
|
||||
<td><?php echo $lasthourcount;?></td>
|
||||
<td><?php echo $speciescount;?></td>
|
||||
@@ -93,5 +95,4 @@ table,th,td {
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<img src='/Charts/Combo-<?php echo $myDate;?>.png?nocache=<?php echo time();?>' class="center">
|
||||
</html>
|
||||
|
||||
+9
-14
@@ -59,19 +59,16 @@ $mysqli->close();
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>BirdNET-Pi DB</title>
|
||||
<!-- CSS FOR STYLING THE PAGE -->
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<style>
|
||||
</style>
|
||||
</head>
|
||||
<body style="background-color: rgb(119, 196, 135);background-image: linear-gradient(to top, rgb(119, 196, 135),black;">
|
||||
<body style="background-color: rgb(119, 196, 135);">
|
||||
|
||||
<section>
|
||||
<div class="row">
|
||||
<div cladd="column" style="width: 75%;padding-left: 15%;">
|
||||
<h2>Number of Detections</h2>
|
||||
<div class="row">
|
||||
<div class="column2">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Total</th>
|
||||
@@ -87,9 +84,6 @@ $mysqli->close();
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<h2>Today's Detections</h2>
|
||||
<!-- TABLE CONSTRUCTION-->
|
||||
@@ -128,9 +122,10 @@ while($rows=$mosttable ->fetch_assoc())
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
</table><div class="row">
|
||||
</table>
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<h2>Detected Species</h2>
|
||||
<h3>Detected Species</h3>
|
||||
<table>
|
||||
<tr>
|
||||
<th>Species</th>
|
||||
@@ -155,7 +150,7 @@ while($rows=$specieslist ->fetch_assoc())
|
||||
</table>
|
||||
</div>
|
||||
<div class="column">
|
||||
<h2>Species Statistics</h2>
|
||||
<h3>Species Statistics</h3>
|
||||
<table>
|
||||
<tr>
|
||||
<th>Species</th>
|
||||
@@ -173,7 +168,7 @@ while($rows=$speciestally ->fetch_assoc())
|
||||
}
|
||||
?>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</html>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user