7 files changed, 239 insertions, 0 deletions
diff --git a/public/templates/live_preview.py b/public/templates/live_preview.py
new file mode 100644
index 0000000..e753fc6
--- /dev/null
+++ b/public/templates/live_preview.py
@@ -0,0 +1,14 @@
+from livereload import Server
+
+server = Server()
+# Watch HTML file
+server.watch('index.html')
+# Watch CSS files
+server.watch('static/styles.css')
+# Watch JavaScript files
+server.watch('static/main.mjs')
+# Watch other files if needed
+server.watch('page/*')  # Watch everything in the page folder
+
+# Serve the current directory
+server.serve(root='.')
diff --git a/public/templates/page/notes.html b/public/templates/page/notes.html
new file mode 100644
index 0000000..3f24816
--- /dev/null
+++ b/public/templates/page/notes.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+     <meta charset="UTF-8">
+     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+     <title>Display a Message</title>
+     <link rel="stylesheet" href="../static/styles.css">
+     <script src="../static/main.mjs" defer></script>
+</head>
+
+<body>
+     <nav class="navigation">
+          <a href="../index.html" class="home">HOME</a>
+          <h2>Display a Message</h2>
+          <a href="https://www.github.com/nasrlol" target="_blank">GITHUB</a>
+     </nav>
+
+     <section class="content">
+          <h1>Display a Message</h1>
+     </section>
+
+     <footer>
+          <p>Created by <a href="https://www.github.com/nasrlol" target="_blank">nsrddyn</a>. All
+\ No newline at end of file
diff --git a/public/templates/page/overview.html b/public/templates/page/overview.html
new file mode 100644
index 0000000..123bf39
--- /dev/null
+++ b/public/templates/page/overview.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+     <meta charset="UTF-8">
+     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+     <title>General Tools</title>
+     <link rel="stylesheet" href="../static/styles.css">
+     <script src="../static/main.mjs" defer></script>
+</head>
+
+<body>
+     <nav class="navigation">
+          <a href="../index.html" class="home">HOME</a>
+          <h2>General Tools</h2>
+          <a href="https://www.github.com/nasrlol" target="_blank">GITHUB</a>
+     </nav>
+
+     <section class="content">
+          <h1>General Tools</h1>
+     </section>
+
+     <footer>
+          <p>Created by <a href="https://www.github.com/nasrlol" target="_blank">nsrddyn</a>. All rights reserved &copy;
+               2024.</p>
+     </footer>
+</body>
+
+</html>
+\ No newline at end of file
diff --git a/public/templates/page/recourses.html b/public/templates/page/recourses.html
new file mode 100644
index 0000000..992e44e
--- /dev/null
+++ b/public/templates/page/recourses.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Resources</title>
+    <link rel="stylesheet" href="../static/styles.css">
+    <script src="../static/main.mjs" defer></script>
+</head>
+
+<body>
+    <nav class="navigation">
+        <a href="../index.html" class="home">HOME</a>
+        <h2>Resources</h2>
+        <a href="https://www.github.com/nasrlol" target="_blank">GITHUB</a>
+    </nav>
+
+    <section class="content">
+        <h1>Resources</h1>
+    </section>
+
+    <footer>
+        <p>Created by <a href="https://www.github.com/nasrlol" target="_blank">nsrddyn</a>. All rights reserved &copy;
+            2024.</p>
+    </footer>
+</body>
+
+</html>
+\ No newline at end of file
diff --git a/public/templates/page/speech.html b/public/templates/page/speech.html
new file mode 100644
index 0000000..1b345ba
--- /dev/null
+++ b/public/templates/page/speech.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+     <meta charset="UTF-8">
+     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+     <title>Speech Transcriber</title>
+     <link rel="stylesheet" href="../static/styles.css">
+     <script src="../static/main.mjs" defer></script>
+</head>
+
+<body>
+     <nav class="navigation">
+          <a href="../index.html" class="home">HOME</a>
+          <h2>Speech Transcriber</h2>
+          <a href="https://www.github.com/nasrlol" target="_blank">GITHUB</a>
+     </nav>
+
+     <section class="content">
+          <h1>Speech Transcriber</h1>
+     </section>
+
+     <footer>
+          <p>Created by <a href="https://www.github.com/nasrlol" target="_blank">nsrddyn</a>. All rights reserved &copy;
+               2024.</p>
+     </footer>
+</body>
+
+</html>
+\ No newline at end of file
diff --git a/public/templates/static/main.mjs b/public/templates/static/main.mjs
new file mode 100644
index 0000000..7e48f65
--- /dev/null
+++ b/public/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/public/templates/static/styles.css b/public/templates/static/styles.css
new file mode 100644
index 0000000..d43f592
--- /dev/null
+++ b/public/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);
+}