From 0222c4c81351cd5b89f4a9afa575a2626d88b958 Mon Sep 17 00:00:00 2001
From: Patrick McGuire <mcguirepr89@gmail.com>
Date: Wed, 3 Nov 2021 09:54:49 -0400
Subject: [PATCH] adding scripts page changes

---
 homepage/images/version.svg |   1 +
 homepage/top.html           |   8 +++
 scripts/index.html          | 124 ++++++++++++++++++++++++------------
 scripts/style.css           | 103 ++++++++++++++++++++++++++++++
 scripts/viewdb.php          | 105 +-----------------------------
 5 files changed, 198 insertions(+), 143 deletions(-)
 create mode 100644 homepage/images/version.svg
 create mode 100644 scripts/style.css

diff --git a/homepage/images/version.svg b/homepage/images/version.svg
new file mode 100644
index 0000000..87ef705
--- /dev/null
+++ b/homepage/images/version.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="78" height="20" role="img" aria-label="version: 0.4"><title>version: 0.4</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="78" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="51" height="20" fill="#555"/><rect x="51" width="27" height="20" fill="#007ec6"/><rect width="78" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="265" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="410">version</text><text x="265" y="140" transform="scale(.1)" fill="#fff" textLength="410">version</text><text aria-hidden="true" x="635" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="170">0.4</text><text x="635" y="140" transform="scale(.1)" fill="#fff" textLength="170">0.4</text></g></svg>
\ No newline at end of file
diff --git a/homepage/top.html b/homepage/top.html
index f56035e..36b2379 100644
--- a/homepage/top.html
+++ b/homepage/top.html
@@ -22,6 +22,11 @@ body {
     position: absolute;
     top: 0px;
     left: 0px;
+  }
+  #content2 img {
+    position: absolute;
+    top: 0px;
+    right: 0px;
   }
     </style>
   </head>
@@ -38,5 +43,8 @@ body {
     <a href="http://birdnetpi.local/phpsysinfo" target="content">System Info</a> | 
     <a href="http://birdnetpi.local/scripts/" target="content">Tools</a>
     </p>
+    <div id="content2">
+      <img src="images/version.svg" class="ribbon"/>
+    </div>
   </body>
 </html>
diff --git a/scripts/index.html b/scripts/index.html
index be41683..1acf438 100644
--- a/scripts/index.html
+++ b/scripts/index.html
@@ -1,48 +1,94 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<form action="/scripts/edit_birdnet.conf.php">
-    <input type="submit" value="Edit the birdnet.conf file">
-</form>
+<style>
+* {
+	box-sizing: border-box;
+}
 
-<form action="/scripts/stop_core_services.php" onclick="return confirm('Stop core services?')">
-    <input type="submit" value="Stop Core BirdNET-Pi Services">
-</form>
+/* Create two unequal columns that floats next to each other */
+.column {
+	float: left;
+	padding: 10px;
+}
 
-<form action="/scripts/restart_services.php" onclick="return confirm('Restart ALL services?')">
-    <input type="submit" value="Restart ALL BirdNET-Pi Services">
-</form>
+.first {
+	width: calc(50% - 70px);
+}
 
-<form action="/scripts/restart_birdnet_analysis.php">
-    <input type="submit" value="Restart BirdNET Analysis Service">
-</form>
+.second {
+	width: calc(50% - 30px);
+}
 
-<form action="/scripts/restart_birdnet_recording.php">
-    <input type="submit" value="Restart Recording Service">
-</form>
+/* Clear floats after the columns */
+.row:after {
+	content: "";
+	display: table;
+	clear: both;
+}
+body {
+	background-color: rgb(119, 196, 135);
+}
 
-<form action="/scripts/restart_extraction.php">
-    <input type="submit" value="Restart Extraction Service">
-</form>
+a {
+	text-decoration: none;
+	color: white;
+}
 
-<form action="/scripts/restart_caddy.php" onclick="return confirm('Restart Caddy? You will be disconnected for about 20 seconds.')">
-    <input type="submit" value="Restart Caddy">
-</form>
+.block {
+	display: block;
+	font-weight: bold;
+	width:100%;
+	border: none;
+	background-color: #04AA6D;
+	padding: 20px 20px;
+	color: white;
+	font-size: medium;
+	cursor: pointer;
+	text-align: center;
+}
+</style>
+<body style="background-color: rgb(119, 196, 135);">
+	<div class="row">
+		<div class="column first">
 
-<form action="/scripts/backup_data.php" onclick="return confirm('Backup ALL Data? Warning: This could take a long time.')">
-    <input type="submit" value="Backup ALL data">
-</form>
+			<form action="/scripts/stop_core_services.php" onclick="return confirm('Stop core services?')">
+				<button type="submit" class="block">Stop Core BirdNET-Pi Services</button>
+			</form>
+			<form action="/scripts/restart_services.php" onclick="return confirm('Restart ALL services?')">
+				<button type="submit" class="block">Restart ALL BirdNET-Pi Services</button>
+			</form>
+			<form action="/scripts/restart_birdnet_analysis.php">
+				<button type="submit" class="block">Restart BirdNET Analysis Service</button>
+			</form>
+			<form action="/scripts/restart_birdnet_recording.php">
+				<button type="submit" class="block">Restart Recording Service</button>
+			</form>
+			<form action="/scripts/restart_extraction.php">
+				<button type="submit" class="block">Restart Extraction Service</button>
+			</form>
+			<form action="/scripts/restart_caddy.php" onclick="return confirm('Restart Caddy? You will be disconnected for about 20 seconds.')">
+				<button type="submit" class="block">Restart Caddy</button>
+			</form>
+		</div>
+		<div class="column second">
+			<form >
+				<button type="submit" class="block"><a target="_content" href="/scripts/adminer.php">Database Maintenance</a></button>
+			</form>
 
-<form action="/scripts/clear_all_data.php" onclick="return confirm('Clear ALL Data? This cannot be undone.')">
-    <input type="submit" value="Clear ALL data">
-</form>
-
-<form action="/scripts/update_birdnet.php" onclick="return confirm('BE SURE TO STASH ANY LOCAL CHANGES YOU HAVE MADE TO THE SYSTEM BEFORE UPDATING!!!')">
-    <input type="submit" value="Update BirdNET-Pi">
-</form>
-
-<form action="/scripts/reboot_system.php" onclick="return confirm('Are you sure you want to reboot?')">
-    <input type="submit" value="Reboot BirdNET-Pi">
-</form>
-
-<form action="/scripts/shutdown_system.php" onclick="return confirm('Are you sure you want to shutdown?')">
-    <input type="submit" value="Shutdown BirdNET-Pi">
-</form>
+			<form action="/scripts/backup_data.php" onclick="return confirm('Backup ALL Data? Warning: This could take a long time.')">
+				<button type="submit" class="block">Backup ALL data</button>
+			</form>
+			<form action="/scripts/reboot_system.php" onclick="return confirm('Are you sure you want to reboot?')">
+				<button type="submit" class="block">Reboot BirdNET-Pi</button>
+			</form>
+			<form action="/scripts/update_birdnet.php" onclick="return confirm('BE SURE TO STASH ANY LOCAL CHANGES YOU HAVE MADE TO THE SYSTEM BEFORE UPDATING!!!')">
+				<button style="color:blue;" type="submit" class="block">Update BirdNET-Pi</button>
+			</form>
+			<form action="/scripts/shutdown_system.php" onclick="return confirm('Are you sure you want to shutdown?')">
+				<button style="color: red;" type="submit" class="block">Shutdown BirdNET-Pi</button>
+			</form>
+			<form action="/scripts/clear_all_data.php" onclick="return confirm('Clear ALL Data? This cannot be undone.')">
+				<button style="color: red;" type="submit" class="block">Clear ALL data</button>
+			</form>
+		</div>
+	</div>
+</body>
diff --git a/scripts/style.css b/scripts/style.css
new file mode 100644
index 0000000..5ef8516
--- /dev/null
+++ b/scripts/style.css
@@ -0,0 +1,103 @@
+/* style sheet */
+* {
+  box-sizing: border-box;
+}
+
+.row {
+  display: flex;
+}
+
+.column {
+  flex: 50%;
+  padding-right: 5px;
+}
+
+table {
+  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;
+	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';
+}
+
+td {
+	background-color: rgb(119, 196, 135);
+	border: 1px solid black;
+}
+
+th,
+td {
+	font-weight: bold;
+	border: 1px solid black;
+	padding: 10px;
+	text-align: center;
+  	background-color: rgb(219, 296, 235);
+}
+
+@media screen and (max-width: 800px) {
+  .column {
+    float: none;
+    width: 100%;
+  }
+  table {
+    margin: 0 auto;
+    font-size: medium;
+    border-collapse: collapse;
+    border-spacing: 1;
+    width: 100%;
+    border: 1px solid black;
+  }
+  
+  h1 {
+  	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';
+  }
+  
+  td {
+  	background-color: rgb(119, 196, 135);
+  	border: 1px solid black;
+  }
+  
+  th,
+  td {
+  	font-weight: bold;
+  	border: 1px solid black;
+  	padding: 10px;
+  	text-align: center;
+  }
+}
+
+td {
+	font-weight: lighter;
+}
+body::-webkit-scrollbar {
+	display:none
+}
diff --git a/scripts/viewdb.php b/scripts/viewdb.php
index 4f85d38..2a1ab97 100644
--- a/scripts/viewdb.php
+++ b/scripts/viewdb.php
@@ -62,110 +62,7 @@ $mysqli->close();
 	<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
 	<title>BirdNET-Pi DB</title>
 	<!-- CSS FOR STYLING THE PAGE -->
-	<style>
-		* {
-		  box-sizing: border-box;
-		}
-
-		.row {
-		  display: flex;
-		}
-
-		.column {
-		  flex: 50%;
-		  padding-right: 5px;
-		}
-
-		table {
-                  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;
-			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';
-		}
-
-		td {
-			background-color: rgb(119, 196, 135);
-			border: 1px solid black;
-		}
-
-		th,
-		td {
-			font-weight: bold;
-			border: 1px solid black;
-			padding: 10px;
-			text-align: center;
-		  	background-color: rgb(219, 296, 235);
-		}
-
-		@media screen and (max-width: 800px) {
-		  .column {
-		    float: none;
-		    width: 100%;
-		  }
-		  table {
-		    margin: 0 auto;
-		    font-size: medium;
-		    border-collapse: collapse;
-		    border-spacing: 1;
-		    width: 100%;
-		    border: 1px solid black;
-		  }
-		  
-		  h1 {
-		  	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';
-		  }
-		  
-		  td {
-		  	background-color: rgb(119, 196, 135);
-		  	border: 1px solid black;
-		  }
-		  
-		  th,
-		  td {
-		  	font-weight: bold;
-		  	border: 1px solid black;
-		  	padding: 10px;
-		  	text-align: center;
-		  }
-		}
-
-		td {
-			font-weight: lighter;
-		}
-body::-webkit-scrollbar {
-	display:none
-}
-	</style>
+<link rel="stylesheet" href="style.css">
 </head>
 <body style="background-color: rgb(119, 196, 135);background-image: linear-gradient(to top, rgb(119, 196, 135),black;">