updates to the web gui

15 files changed, 157 insertions, 85 deletions

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 66f540e..dd10108 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,5 +1,22 @@
 {
-        "python.testing.pytestArgs": ["I2C"],
-        "python.testing.unittestEnabled": false,
-        "python.testing.pytestEnabled": true
-}
+     "workbench.colorCustomizations": {
+          "activityBar.activeBackground": "#1a1a1a",
+          "activityBar.background": "#1a1a1a",
+          "activityBar.foreground": "#e7e7e7",
+          "activityBar.inactiveForeground": "#e7e7e799",
+          "activityBarBadge.background": "#606020",
+          "activityBarBadge.foreground": "#e7e7e7",
+          "commandCenter.border": "#e7e7e799",
+          "sash.hoverBorder": "#1a1a1a",
+          "statusBar.background": "#000000",
+          "statusBar.foreground": "#e7e7e7",
+          "statusBarItem.hoverBackground": "#1a1a1a",
+          "statusBarItem.remoteBackground": "#000000",
+          "statusBarItem.remoteForeground": "#e7e7e7",
+          "titleBar.activeBackground": "#000000",
+          "titleBar.activeForeground": "#e7e7e7",
+          "titleBar.inactiveBackground": "#00000099",
+          "titleBar.inactiveForeground": "#e7e7e799"
+     },
+     "peacock.color": "black"
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index 46c8b77..5bc547a 100644
--- a/README.md
+++ b/README.md
@@ -8,3 +8,23 @@ This is a starter project with the goal of expanded everything later on to let's
 18/11/2024 migrating to C for the main code
 
 The program is Multi-platform and even supports a web-console
+
+MAIN USE OF THE PROGRAM : 
+
+the main feature of the program is the ability to control and I2C display really extensivly and be abel to do alot of things with it
+
+CURRENT FEATURES -> 
+
+* weather display
+* random generated greeting quote ( still dont know what to really do about that, could add a joke of the day system or something like that)
+* a button powered button pomodore timer 
+* some sort of clock mechanisme that adds an alarm clock, timer and stopwatch
+* system monitor dashbord ( cpu , ram , disk , temp , ... ) 
+* speech command center
+* generative AI model that uses meta's llama 
+* current playing audio
+* voice based notes
+* to do list integration based on the personal calender
+
+
+A nice idea is to make it somehting easily installabled and configurable in the future without to much tinkering need
diff --git a/api_server.service b/api_server.service
new file mode 100644
index 0000000..b69c5e4
--- /dev/null
+++ b/api_server.service
@@ -0,0 +1,15 @@
+[Unit]
+Description=REST API Server for RPI
+After=network.target
+
+[Service]
+ExecStart=/usr/bin/python3 /home/pi/I2C/bin/main.py
+WorkingDirectory=/home/pi/I2C
+User=nasr
+Group=pi
+Restart=always
+Environment="PYTHONUNBUFFERED=1"
+
+[Install]
+WantedBy=multi-user.target
+
diff --git a/templates/api.py b/templates/api.py
new file mode 100644
index 0000000..b04ef77
--- /dev/null
+++ b/templates/api.py
@@ -0,0 +1,27 @@
+from flask import Flask, request, jsonify, render_template
+
+app = Flask(__name__)
+
+
+@app.route("/")
+def index():
+    return render_template("index.html")
+
+
+@app.route("/api/run-script", methods=["POST"])
+def run_script():
+    data = request.json
+    if not data:
+        return jsonify({"error": "No data provided"}), 400
+
+    script_result = my_script_logic(data.get("input"))
+
+    return jsonify({"result": script_result})
+
+
+def my_script_logic(input_value):
+    return f"Processed input: {input_value}"
+
+
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=5000, debug=True)
diff --git a/webGUI/index.html b/templates/index.html
index 28665f8..5436dbd 100644
--- a/webGUI/index.html
+++ b/templates/index.html
@@ -5,8 +5,8 @@
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>CONSOLE</title>
-     <link rel="stylesheet" href="styles.css">
-     <script src="main.js" defer></script>
+     <link rel="stylesheet" href="static/styles.css">
+     <script src="static/main.mjs" defer></script>
 </head>
 
 <body>
@@ -17,11 +17,15 @@
      </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>
+          <a href="page/overview.html" class="resources">Resources</a>
+          <a href="page/notes.html" class="speech_trans">Speech Transcriber</a>
+          <a href="page/recourses.html" class="notes">Display a Message</a>
+          <a href="page/speech.html" class="general">General Tools</a>
+     </section>
+     <section>
+        <p>This is the main control center for the I2C deivce. You can find
+        the main code and information about the project under my <a href="https://github.com/nasrlol">GITHUB</a></p>
+
      </section>
 
      <footer>
@@ -30,4 +34,4 @@
      </footer>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/templates/live_preview.py b/templates/live_preview.py
new file mode 100644
index 0000000..e753fc6
--- /dev/null
+++ b/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/webGUI/pages/notes.html b/templates/page/notes.html
index ea870d7..3f24816 100644
--- a/webGUI/pages/notes.html
+++ b/templates/page/notes.html
@@ -5,9 +5,8 @@
      <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>
-
+     <link rel="stylesheet" href="../static/styles.css">
+     <script src="../static/main.mjs" defer></script>
 </head>
 
 <body>
diff --git a/webGUI/pages/general.html b/templates/page/overview.html
index 087afbc..123bf39 100644
--- a/webGUI/pages/general.html
+++ b/templates/page/overview.html
@@ -5,9 +5,8 @@
      <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>
-
+     <link rel="stylesheet" href="../static/styles.css">
+     <script src="../static/main.mjs" defer></script>
 </head>
 
 <body>
diff --git a/templates/page/recourses.html b/templates/page/recourses.html
new file mode 100644
index 0000000..992e44e
--- /dev/null
+++ b/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/webGUI/pages/speech.html b/templates/page/speech.html
index 2c1a848..1b345ba 100644
--- a/webGUI/pages/speech.html
+++ b/templates/page/speech.html
@@ -5,9 +5,8 @@
      <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>
-
+     <link rel="stylesheet" href="../static/styles.css">
+     <script src="../static/main.mjs" defer></script>
 </head>
 
 <body>
diff --git a/webGUI/main.mjs b/templates/static/main.mjs
index 7e48f65..7e48f65 100644
--- a/webGUI/main.mjs
+++ b/templates/static/main.mjs
diff --git a/webGUI/styles.css b/templates/static/styles.css
index 03b0256..d43f592 100644
--- a/webGUI/styles.css
+++ b/templates/static/styles.css
@@ -9,6 +9,15 @@ body {
         padding: 0;
 }
 
+p {
+   text-align: center;
+
+}
+
+h1 {
+    text-align: center;
+} 
+
 a {
         text-decoration: none;
         color: wheat;
@@ -22,7 +31,7 @@ a:hover {
 .navigation {
         display: flex;
         justify-content: space-between;
-        align-items: center;
+    align-items: center;
         padding: 20px 10%;
         background-color: rgba(0, 0, 0, 0.8);
         border-bottom: 2px solid white;
@@ -44,10 +53,10 @@ a:hover {
 
 .controls {
         display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
+    flex-direction: row;
+    justify-content: center;
         gap: 20px;
-        padding: 50px 10%;
+        padding: 20px 10%;
 }
 
 .controls a {
diff --git a/webGUI/pages/cpuinfo.html b/webGUI/pages/cpuinfo.html
deleted file mode 100644
index 99579cb..0000000
--- a/webGUI/pages/cpuinfo.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!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/main.js b/webGUI/pages/main.js
deleted file mode 100644
index e69de29..0000000
--- a/webGUI/pages/main.js
+++ /dev/null
diff --git a/webGUI/pages/recourses.html b/webGUI/pages/recourses.html
deleted file mode 100644
index 890ab73..0000000
--- a/webGUI/pages/recourses.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<!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