From 661fdb9d263a53a694c7b6e98b42fb0bae674187 Mon Sep 17 00:00:00 2001 From: Sam Hos Date: Tue, 12 Nov 2024 14:30:45 +0100 Subject: [PATCH] Added placeholder webite for main website --- src/Python/flask/web/app.py | 10 +- src/Python/flask/web/static/styleIndex.css | 83 ++++++++++++++++ src/Python/flask/web/templates/control.html | 48 ++++++++++ src/Python/flask/web/templates/index.html | 100 +++++++++++--------- 4 files changed, 193 insertions(+), 48 deletions(-) create mode 100644 src/Python/flask/web/static/styleIndex.css create mode 100644 src/Python/flask/web/templates/control.html 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 + + + +
+
+ Kobuki Robot +
+
+
+ + + + + +
+
+
+
+

Sensor Data

+
+ + + + + + + + + + +
SensorValue
+
+
+ + + +{% 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 - - - -
-
- Kobuki Robot -
-
-
- - - - - + + + + Kobuki Robot Project + + + +
+

Welcome to the Kobuki Robot Project

+ +
+ +
+

Introduction

+

The Kobuki Robot Project is an innovative initiative aimed at developing a versatile and intelligent robot platform. Our goal is to create a robot that can navigate autonomously, interact with its environment, and perform various tasks.

+ Kobuki Robot +
+ +
+

About the Project

+

This project is a collaborative effort involving engineers, researchers, and enthusiasts. The Kobuki robot is equipped with various sensors, including bumpers, cliff sensors, and gyroscopes, to help it navigate and interact with its surroundings.

+

Key features of the Kobuki Robot:

+
    +
  • Autonomous navigation
    • +
  • Obstacle detection and avoidance
    • +
  • Real-time data processing
    • +
  • Remote control and monitoring
    • +
+
+ +
+

Contact Us

+ + + + + + + + -
-
-
-

Sensor Data

-
- - - - - - - - - - -
SensorValue
-
-
- - - -{% endblock %} + + + + + + + \ No newline at end of file