summaryrefslogtreecommitdiff
path: root/webGUI
diff options
context:
space:
mode:
Diffstat (limited to 'webGUI')
-rw-r--r--webGUI/index.html28
-rw-r--r--webGUI/main.mjs14
-rw-r--r--webGUI/pages/cpuinfo.html30
-rw-r--r--webGUI/pages/general.html30
-rw-r--r--webGUI/pages/main.js0
-rw-r--r--webGUI/pages/notes.html25
-rw-r--r--webGUI/pages/recourses.html30
-rw-r--r--webGUI/pages/speech.html30
-rw-r--r--webGUI/pages/stats.html14
-rw-r--r--webGUI/styles.css90
10 files changed, 248 insertions, 43 deletions
diff --git a/webGUI/index.html b/webGUI/index.html
index eb12eca..28665f8 100644
--- a/webGUI/index.html
+++ b/webGUI/index.html
@@ -6,26 +6,28 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CONSOLE</title>
<link rel="stylesheet" href="styles.css">
- <script src="main.js"></script>
+ <script src="main.js" defer></script>
</head>
<body>
-
<nav class="navigation">
- <p>I2C MODES</p>
- <a href="" class="CPU_INFO">CPU Information</a>
- <a href="" class="recources">Recources</a>
- <a href="" class="speech_trans">Speech Transcriber</a>
- <a href="" class="notes">Display a message</a>
- <a href="" class="general">General Tools</a>
-
+ <a href="index.html" class="home">HOME</a>
+ <h2>I2C MODES</h2>
+ <a href="https://www.github.com/nasrlol" target="_blank">GITHUB</a>
</nav>
+ <section class="controls">
+ <a href="pages/cpuinfo.html" class="CPU_INFO">CPU Information</a>
+ <a href="pages/general.html" class="resources">Resources</a>
+ <a href="pages/notes.html" class="speech_trans">Speech Transcriber</a>
+ <a href="pages/recourses.html" class="notes">Display a Message</a>
+ <a href="pages/speech.html" class="general">General Tools</a>
+ </section>
+ <footer>
+ <p>Created by <a href="https://www.github.com/nasrlol" target="_blank">nsrddyn</a>. All rights reserved &copy;
+ 2024.</p>
+ </footer>
</body>
-<footer>
-
-</footer>
-
</html> \ No newline at end of file
diff --git a/webGUI/main.mjs b/webGUI/main.mjs
index c7464e5..7e48f65 100644
--- a/webGUI/main.mjs
+++ b/webGUI/main.mjs
@@ -1 +1,13 @@
-let modes = ["STATS", ""] \ No newline at end of file
+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/webGUI/pages/cpuinfo.html b/webGUI/pages/cpuinfo.html
new file mode 100644
index 0000000..99579cb
--- /dev/null
+++ b/webGUI/pages/cpuinfo.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>CPU Information</title>
+ <link rel="stylesheet" href="../styles.css">
+ <script src="main.js" defer></script>
+
+</head>
+
+<body>
+ <nav class="navigation">
+ <a href="../index.html" class="home">HOME</a>
+ <h2>CPU Information</h2>
+ <a href="https://www.github.com/nasrlol" target="_blank">GITHUB</a>
+ </nav>
+
+ <section class="content">
+ <h1>CPU Information</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/webGUI/pages/general.html b/webGUI/pages/general.html
new file mode 100644
index 0000000..087afbc
--- /dev/null
+++ b/webGUI/pages/general.html
@@ -0,0 +1,30 @@
+<!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="../styles.css">
+ <script src="main.js" 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/webGUI/pages/main.js b/webGUI/pages/main.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/webGUI/pages/main.js
diff --git a/webGUI/pages/notes.html b/webGUI/pages/notes.html
new file mode 100644
index 0000000..ea870d7
--- /dev/null
+++ b/webGUI/pages/notes.html
@@ -0,0 +1,25 @@
+<!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="../styles.css">
+ <script src="main.js" 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/webGUI/pages/recourses.html b/webGUI/pages/recourses.html
new file mode 100644
index 0000000..890ab73
--- /dev/null
+++ b/webGUI/pages/recourses.html
@@ -0,0 +1,30 @@
+<!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="../styles.css">
+ <script src="main.js" 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/webGUI/pages/speech.html b/webGUI/pages/speech.html
new file mode 100644
index 0000000..2c1a848
--- /dev/null
+++ b/webGUI/pages/speech.html
@@ -0,0 +1,30 @@
+<!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="../styles.css">
+ <script src="main.js" 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/webGUI/pages/stats.html b/webGUI/pages/stats.html
deleted file mode 100644
index 8fdbb74..0000000
--- a/webGUI/pages/stats.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>STATS - CONSOLE</title>
-</head>
-
-<body>
-
-</body>
-
-</html> \ No newline at end of file
diff --git a/webGUI/styles.css b/webGUI/styles.css
index eefc162..03b0256 100644
--- a/webGUI/styles.css
+++ b/webGUI/styles.css
@@ -1,32 +1,92 @@
+@import url("https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,300..800;1,300..800&display=swap");
+
body {
- background-color: rgba(0, 10, 30, 1);
- text-decoration: none;
+ background-color: rgb(40, 44, 52);
color: white;
- font: sans-serif;
-}
-
-body button a {
- border-radius: 10px;
- text-decoration: none;
+ font-family: "Host Grotesk", sans-serif;
+ font-weight: 500;
+ margin: 0;
+ padding: 0;
}
a {
text-decoration: none;
color: wheat;
+ transition: color 0.3s ease;
+}
+
+a:hover {
+ color: rgb(255, 215, 128);
}
.navigation {
- max-width: fit-content;
- margin-left: auto;
- margin-right: auto;
+ 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 {
- display: block;
+ font-size: 1.2em;
+ font-weight: 600;
+ transition: transform 0.3s ease;
+}
- background-color: rgba(0, 0, 0, 1);
+.navigation a:hover {
+ transform: scale(1.1);
+}
+
+.controls {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 20px;
+ padding: 50px 10%;
+}
+
+.controls a {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ background-color: rgba(255, 255, 255, 0.1);
border-radius: 10px;
- border: none;
+ 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;
- min-width: 100px;
+ 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);
}