updates to the web gui

2 files changed, 114 insertions, 0 deletions

diff --git a/templates/static/main.mjs b/templates/static/main.mjs
new file mode 100644
index 0000000..7e48f65
--- /dev/null
+++ b/templates/static/main.mjs
@@ -0,0 +1,13 @@
+document.addEventListener("DOMContentLoaded", () => {
+	const buttons = document.querySelectorAll(".controls a");
+
+	buttons.forEach((button) => {
+		button.addEventListener("mouseover", () => {
+			button.style.boxShadow = "0px 6px 12px rgba(255, 255, 255, 0.5)";
+		});
+
+		button.addEventListener("mouseout", () => {
+			button.style.boxShadow = "0px 4px 8px rgba(0, 0, 0, 0.4)";
+		});
+	});
+});
diff --git a/templates/static/styles.css b/templates/static/styles.css
new file mode 100644
index 0000000..d43f592
--- /dev/null
+++ b/templates/static/styles.css
@@ -0,0 +1,101 @@
+@import url("https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&display=swap");
+
+body {
+	background-color: rgb(40, 44, 52);
+	color: white;
+	font-family: "Host Grotesk", sans-serif;
+	font-weight: 500;
+	margin: 0;
+	padding: 0;
+}
+
+p {
+   text-align: center;
+
+}
+
+h1 {
+    text-align: center;
+} 
+
+a {
+	text-decoration: none;
+	color: wheat;
+	transition: color 0.3s ease;
+}
+
+a:hover {
+	color: rgb(255, 215, 128);
+}
+
+.navigation {
+	display: flex;
+	justify-content: space-between;
+    align-items: center;
+	padding: 20px 10%;
+	background-color: rgba(0, 0, 0, 0.8);
+	border-bottom: 2px solid white;
+	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3);
+	position: sticky;
+	top: 0;
+	z-index: 10;
+}
+
+.navigation a {
+	font-size: 1.2em;
+	font-weight: 600;
+	transition: transform 0.3s ease;
+}
+
+.navigation a:hover {
+	transform: scale(1.1);
+}
+
+.controls {
+	display: flex;
+    flex-direction: row;
+    justify-content: center;
+	gap: 20px;
+	padding: 20px 10%;
+}
+
+.controls a {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-color: rgba(255, 255, 255, 0.1);
+	border-radius: 10px;
+	padding: 15px;
+	min-width: 150px;
+	width: 200px;
+	text-align: center;
+	font-size: 1.2em;
+	font-weight: 600;
+	color: white;
+	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4);
+	transition: background-color 0.3s ease, transform 0.3s ease;
+}
+
+.controls a:hover {
+	background-color: rgba(255, 255, 255, 0.2);
+	transform: translateY(-5px);
+}
+
+footer {
+	background-color: rgba(0, 0, 0, 0.8);
+	text-align: center;
+	padding: 10px;
+	font-size: 0.9em;
+	border-top: 1px solid rgba(255, 255, 255, 0.2);
+	margin-top: 20px;
+}
+
+footer a {
+	color: wheat;
+	font-weight: 600;
+	text-decoration: underline;
+}
+
+footer a:hover {
+	color: rgb(255, 215, 128);
+}