diff --git a/src/Python/flask/web/app.py b/src/Python/flask/web/app.py
index a125737..0dda4da 100644
--- a/src/Python/flask/web/app.py
+++ b/src/Python/flask/web/app.py
@@ -15,11 +15,15 @@ mqtt_client.loop_start()
mqtt_client.subscribe("kobuki/data")
mqtt_client.on_message = on_message # this lines needs to be under the function definition otherwise it cant find which function it needs to use
-
-@app.route('/', methods=["GET","POST"])
+@app.route('/')
def index():
+ return render_template('index.html')
+
+
+@app.route('/control', methods=["GET","POST"])
+def control():
if request.authorization and request.authorization.username == 'ishak' and request.authorization.password == 'kobuki':
- return render_template('index.html')
+ return render_template('control.html')
else:
return ('Unauthorized', 401, {'WWW-Authenticate': 'Basic realm="Login Required"'})
diff --git a/src/Python/flask/web/static/styleIndex.css b/src/Python/flask/web/static/styleIndex.css
new file mode 100644
index 0000000..9cbe511
--- /dev/null
+++ b/src/Python/flask/web/static/styleIndex.css
@@ -0,0 +1,83 @@
+body {
+ font-family: Arial, sans-serif;
+ margin: 0;
+ padding: 0;
+ background-color: #f4f4f4;
+}
+
+header {
+ background-color: #333;
+ color: #fff;
+ padding: 1rem 0;
+ text-align: center;
+}
+
+header h1 {
+ margin: 0;
+}
+
+nav ul {
+ list-style: none;
+ padding: 0;
+}
+
+nav ul li {
+ display: inline;
+ margin: 0 1rem;
+}
+
+nav ul li a {
+ color: #fff;
+ text-decoration: none;
+}
+
+section {
+ padding: 2rem;
+ margin: 1rem 0;
+ background-color: #fff;
+ border-radius: 8px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+section h2 {
+ margin-top: 0;
+}
+
+footer {
+ background-color: #333;
+ color: #fff;
+ text-align: center;
+ padding: 1rem 0;
+ position: fixed;
+ width: 100%;
+ bottom: 0;
+}
+
+form {
+ display: flex;
+ flex-direction: column;
+}
+
+form label {
+ margin: 0.5rem 0 0.2rem;
+}
+
+form input, form textarea {
+ padding: 0.5rem;
+ margin-bottom: 1rem;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+}
+
+form button {
+ padding: 0.7rem;
+ border: none;
+ border-radius: 4px;
+ background-color: #333;
+ color: #fff;
+ cursor: pointer;
+}
+
+form button:hover {
+ background-color: #555;
+}
\ No newline at end of file
diff --git a/src/Python/flask/web/templates/control.html b/src/Python/flask/web/templates/control.html
new file mode 100644
index 0000000..519402f
--- /dev/null
+++ b/src/Python/flask/web/templates/control.html
@@ -0,0 +1,48 @@
+{% extends 'base.html' %} {% block head %}
+
+{% endblock %} {% block content %}
+
+
+
+
+
+ Kobuki
+
+
+
+
+
+

+
+
+
+
+
+
+
Sensor Data
+
+
+
+
+ Sensor |
+ Value |
+
+
+
+
+
+
+
+
+
+
+
+{% endblock %}
diff --git a/src/Python/flask/web/templates/index.html b/src/Python/flask/web/templates/index.html
index 519402f..e25b9ea 100644
--- a/src/Python/flask/web/templates/index.html
+++ b/src/Python/flask/web/templates/index.html
@@ -1,48 +1,58 @@
-{% extends 'base.html' %} {% block head %}
-
-{% endblock %} {% block content %}
-
-
-
- Kobuki
-
-
-
-
-
-

-
-
-
-
-
Sensor Data
-
-
-
-
- Sensor |
- Value |
-
-
-
-
-
-
-
-
-
-
-
-{% endblock %}
+
+
+
+
+
+
+