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);
+}