Roman_Schenk
/
Bewaesserungsanlage
1
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

Created Navigation Bar and Header

This commit is contained in:
schrom01 2022-07-30 00:19:30 +02:00
parent 8057922f2c
commit a74ae43fb6
11 changed files with 359 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -1,4 +1,4 @@
# ---> Python
# ---> Webserver
# Byte-compiled / optimized / DLL files
__pycache__/
*.py[cod]

53
Webserver/Templates/dashboard.html Normal file
View File

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="de">
<head>
<link rel="stylesheet" href="../static/Styles/main.css">
<meta charset="UTF-8">
<title>Bewässerungssystem</title>
</head>
<body>
{% include "header.html" %}
<main>
<h2>Dashboard</h2>
<div>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Sed excepturi quod dicta temporibus eveniet corporis incidunt molestiae, laborum deleniti.
Molestiae architecto quod veritatis laudantium aliquid aperiam earum quia voluptates saepe!
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Sed excepturi quod dicta temporibus eveniet corporis incidunt molestiae, laborum deleniti.
Molestiae architecto quod veritatis laudantium aliquid aperiam earum quia voluptates saepe!
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Sed excepturi quod dicta temporibus eveniet corporis incidunt molestiae, laborum deleniti.
Molestiae architecto quod veritatis laudantium aliquid aperiam earum quia voluptates saepe!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Sed excepturi quod dicta temporibus eveniet corporis incidunt molestiae, laborum deleniti.
Molestiae architecto quod veritatis laudantium aliquid aperiam earum quia voluptates saepe!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Sed excepturi quod dicta temporibus eveniet corporis incidunt molestiae, laborum deleniti.
Molestiae architecto quod veritatis laudantium aliquid aperiam earum quia voluptates saepe!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Sed excepturi quod dicta temporibus eveniet corporis incidunt molestiae, laborum deleniti.
Molestiae architecto quod veritatis laudantium aliquid aperiam earum quia voluptates saepe!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Sed excepturi quod dicta temporibus eveniet corporis incidunt molestiae, laborum deleniti.
Molestiae architecto quod veritatis laudantium aliquid aperiam earum quia voluptates saepe!
</p>
</div>
</main>
</body>
</html>

32
Webserver/Templates/header.html Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="de">
<head>
<link rel="stylesheet" href="../static/Styles/header.css">
<meta charset="UTF-8">
<title>Bewässerungssystem</title>
</head>
<body>
<header>
<nav>
<ul>
{% for item in nav.top %}
<li {{ 'class=active' if item.is_active else '' }}>
<a href="{{ item.url }}">
{{ item.label }}
</a>
</li>
{% endfor %}
</ul>
</nav>
<div class="heading">
<img src="../static/img/header/wassertropfen.png" alt="Tropfen" class="title-img">
<h1>Bewässerungs-<br>system</h1>
</div>
<img src="../static/img/header/blumenbeet.jpg" alt="Blumenbeet" class="header-img">
</header>
</body>
</html>

53
Webserver/Templates/system.html Normal file
View File

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="de">
<head>
<link rel="stylesheet" href="../static/Styles/main.css">
<meta charset="UTF-8">
<title>Bewässerungssystem</title>
</head>
<body>
{% include "header.html" %}
<main>
<h2>Systemeinstellungen</h2>
<div>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Sed excepturi quod dicta temporibus eveniet corporis incidunt molestiae, laborum deleniti.
Molestiae architecto quod veritatis laudantium aliquid aperiam earum quia voluptates saepe!
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Sed excepturi quod dicta temporibus eveniet corporis incidunt molestiae, laborum deleniti.
Molestiae architecto quod veritatis laudantium aliquid aperiam earum quia voluptates saepe!
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Sed excepturi quod dicta temporibus eveniet corporis incidunt molestiae, laborum deleniti.
Molestiae architecto quod veritatis laudantium aliquid aperiam earum quia voluptates saepe!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Sed excepturi quod dicta temporibus eveniet corporis incidunt molestiae, laborum deleniti.
Molestiae architecto quod veritatis laudantium aliquid aperiam earum quia voluptates saepe!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Sed excepturi quod dicta temporibus eveniet corporis incidunt molestiae, laborum deleniti.
Molestiae architecto quod veritatis laudantium aliquid aperiam earum quia voluptates saepe!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Sed excepturi quod dicta temporibus eveniet corporis incidunt molestiae, laborum deleniti.
Molestiae architecto quod veritatis laudantium aliquid aperiam earum quia voluptates saepe!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Sed excepturi quod dicta temporibus eveniet corporis incidunt molestiae, laborum deleniti.
Molestiae architecto quod veritatis laudantium aliquid aperiam earum quia voluptates saepe!
</p>
</div>
</main>
</body>
</html>

53
Webserver/Templates/times.html Normal file
View File

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="de">
<head>
<link rel="stylesheet" href="../static/Styles/main.css">
<meta charset="UTF-8">
<title>Bewässerungssystem</title>
</head>
<body>
{% include "header.html" %}
<main>
<h2>Sperrzeiteneinstellung</h2>
<div>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Sed excepturi quod dicta temporibus eveniet corporis incidunt molestiae, laborum deleniti.
Molestiae architecto quod veritatis laudantium aliquid aperiam earum quia voluptates saepe!
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Sed excepturi quod dicta temporibus eveniet corporis incidunt molestiae, laborum deleniti.
Molestiae architecto quod veritatis laudantium aliquid aperiam earum quia voluptates saepe!
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Sed excepturi quod dicta temporibus eveniet corporis incidunt molestiae, laborum deleniti.
Molestiae architecto quod veritatis laudantium aliquid aperiam earum quia voluptates saepe!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Sed excepturi quod dicta temporibus eveniet corporis incidunt molestiae, laborum deleniti.
Molestiae architecto quod veritatis laudantium aliquid aperiam earum quia voluptates saepe!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Sed excepturi quod dicta temporibus eveniet corporis incidunt molestiae, laborum deleniti.
Molestiae architecto quod veritatis laudantium aliquid aperiam earum quia voluptates saepe!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Sed excepturi quod dicta temporibus eveniet corporis incidunt molestiae, laborum deleniti.
Molestiae architecto quod veritatis laudantium aliquid aperiam earum quia voluptates saepe!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Sed excepturi quod dicta temporibus eveniet corporis incidunt molestiae, laborum deleniti.
Molestiae architecto quod veritatis laudantium aliquid aperiam earum quia voluptates saepe!
</p>
</div>
</main>
</body>
</html>

52
Webserver/Templates/zones.html Normal file
View File

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="de">
<head>
<link rel="stylesheet" href="../static/Styles/main.css">
<meta charset="UTF-8">
<title>Bewässerungssystem</title>
</head>
<body>
{% include "header.html" %}
<main>
<h2>Zonen</h2>
<div>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Sed excepturi quod dicta temporibus eveniet corporis incidunt molestiae, laborum deleniti.
Molestiae architecto quod veritatis laudantium aliquid aperiam earum quia voluptates saepe!
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Sed excepturi quod dicta temporibus eveniet corporis incidunt molestiae, laborum deleniti.
Molestiae architecto quod veritatis laudantium aliquid aperiam earum quia voluptates saepe!
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Sed excepturi quod dicta temporibus eveniet corporis incidunt molestiae, laborum deleniti.
Molestiae architecto quod veritatis laudantium aliquid aperiam earum quia voluptates saepe!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Sed excepturi quod dicta temporibus eveniet corporis incidunt molestiae, laborum deleniti.
Molestiae architecto quod veritatis laudantium aliquid aperiam earum quia voluptates saepe!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Sed excepturi quod dicta temporibus eveniet corporis incidunt molestiae, laborum deleniti.
Molestiae architecto quod veritatis laudantium aliquid aperiam earum quia voluptates saepe!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Sed excepturi quod dicta temporibus eveniet corporis incidunt molestiae, laborum deleniti.
Molestiae architecto quod veritatis laudantium aliquid aperiam earum quia voluptates saepe!
</p>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit.
Sed excepturi quod dicta temporibus eveniet corporis incidunt molestiae, laborum deleniti.
Molestiae architecto quod veritatis laudantium aliquid aperiam earum quia voluptates saepe!
</p>
</div>
</main>
</body>
</html>

41
Webserver/__init__.py Normal file
View File

@ -0,0 +1,41 @@
from flask import Flask, render_template, request, redirect, url_for
from flask_navigation import Navigation
app = Flask("Bewässerungssystem")
nav = Navigation(app)
nav.Bar('top', [
nav.Item('Dashboard', 'showDashboard'),
nav.Item('Bewässerungszonen', 'showZones'),
nav.Item('Sperrzeiteneinstellung', 'showTimes'),
nav.Item('Systemeinestellungen', 'showSystem')
#nav.Item('Gfg', 'gfg', {'page': 5}), #(example with pages)
])
#Example Route with pages:
#@app.route('/gfg/<int:page>')
#def gfg(page):
# return render_template('gfg.html', page=page)
@app.route('/')
def startPage():
return redirect(url_for('showDashboard'))
@app.route('/dashboard')
def showDashboard():
return render_template('dashboard.html')
@app.route('/zonen')
def showZones():
return render_template('zones.html')
@app.route('/times')
def showTimes():
return render_template('times.html')
@app.route('/system')
def showSystem():
return render_template('system.html')
if __name__ == "__main__":
app.run(debug=True, port=80)

68
Webserver/static/Styles/header.css Normal file
View File

@ -0,0 +1,68 @@
header{
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
padding: 2px;
position: sticky;
left: 0px;
top: 0px;
}
nav{
z-index: 1;
position: absolute;
top: 0px;
right: 20px;
}
nav ul li{
display: inline;
}
nav ul li a{
white-space: nowrap;
text-decoration: none;
color: white;
background-color: green;
padding: 5px;
margin: 10px;
}
nav ul li a:hover{
background-color: darkgreen;
}
.active{
font-size : 1.2em;
font-weight : bold;
}
.heading{
text-align: center;
color: white;
position: absolute;
left: 10%;
top: 2px;
background-color: darkblue;
padding-top: 0px;
padding-bottom: 0px;
margin: 0px;
}
.heading h1{
font-size: 32;
line-height: 2em;
text-transform: uppercase;
margin-top: 0px;
}
.title-img{
width: 186px;
margin-top: 10px;
}
.header-img{
width: 100%;
height: 300px;
object-fit: cover;
object-position: 100%;
}

6
Webserver/static/Styles/main.css Normal file
View File

@ -0,0 +1,6 @@
main{
max-width: 90%;
width: 1800px;
margin-left: auto;
margin-right: auto;
}

BIN
Webserver/static/img/header/Blumenbeet.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 858 KiB

BIN
Webserver/static/img/header/wassertropfen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 572 KiB