From b5931509af98ee314f41b7c0ffef0dc38f1e9646 Mon Sep 17 00:00:00 2001 From: hubobel Date: Sat, 20 Jun 2026 17:09:32 +0200 Subject: [PATCH] WebApp Design modern --- app.py | 2 +- static/style.css | 186 +++++++++++++++++++++++++++++++++ templates/categories.html | 192 +++++++++++++++++++++++----------- templates/edit_category.html | 163 +++++++++++++++++++---------- templates/index.html | 194 +++++++++++++++++++++++++++-------- 5 files changed, 580 insertions(+), 157 deletions(-) create mode 100644 static/style.css diff --git a/app.py b/app.py index 89ba2a2..3d761e2 100644 --- a/app.py +++ b/app.py @@ -178,7 +178,7 @@ def edit_category(category): return render_template( "edit_category.html", category=category, - words=categories[category] + words=sorted(categories[category]) ) @app.route( "/categories/add_word/", diff --git a/static/style.css b/static/style.css new file mode 100644 index 0000000..16c72a4 --- /dev/null +++ b/static/style.css @@ -0,0 +1,186 @@ +body { +margin: 0; +font-family: Segoe UI, Arial, sans-serif; +background: #f4f6f8; +color: #333; +} + +.header { + background: #ff6200; + color: white; + padding: 15px 30px; + display: flex; + justify-content: space-between; + align-items: center; + position: relative; + overflow: visible; +} + +.header-left { + display: flex; + align-items: center; + gap: 20px; +} + +.logo-ing { + height: 60px; +} + +.logo-hintergasse { + height: 80px; + transform: scale(3); + transform-origin: right center; +} + +.title { + font-size: 28px; + font-weight: bold; +} + +.subtitle { + font-size: 14px; +} + +.navbar { +background: #202020; +padding: 12px 30px; +} + +.navbar a { +color: white; +text-decoration: none; +margin-right: 25px; +font-weight: bold; +} + +.navbar a:hover { +color: #ff6200; +} + +.container { +max-width: 1400px; +margin: 25px auto; +padding: 0 20px; +} + +.cards { +display: grid; +grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); +gap: 20px; +} + +.card { +background: white; +border-radius: 12px; +padding: 20px; +box-shadow: 0 3px 10px rgba(0,0,0,.1); +} + +.card h2 { +margin-top: 0; +} + +.card form { +margin-top: 15px; +} + +input[type=text] { +padding: 8px; +width: 80px; +} + +button { +background: #ff6200; +color: white; +border: none; +padding: 10px 18px; +border-radius: 6px; +cursor: pointer; +} + +button:hover { +background: #e35700; +} + +.footer { +margin-top: 30px; +text-align: center; +color: #888; +font-size: 12px; +} + +.category-table { +width: 100%; +border-collapse: collapse; +} + +.category-table th { +background: #ff6200; +color: white; +text-align: left; +padding: 12px; +} + +.category-table td { +padding: 12px; +border-bottom: 1px solid #ddd; +} + +.category-table tr:hover { +background: #f8f8f8; +} + +.action-link { +color: #0066cc; +text-decoration: none; +font-weight: bold; +} + +.action-link:hover { +text-decoration: underline; +} + +.delete-link { +color: #cc0000; +text-decoration: none; +font-weight: bold; +} + +.delete-link:hover { +text-decoration: underline; +} + +.tags { + display: flex; + flex-wrap: wrap; + gap: 10px; +} + +.tag { + display: inline-flex; + align-items: center; + + background: #ff6200; + color: white; + + border-radius: 20px; + + padding: 8px 14px; + + font-size: 14px; + font-weight: bold; +} + +.tag a { + color: white; + text-decoration: none; + + margin-left: 10px; + + font-size: 18px; + font-weight: bold; +} + +.tag a:hover { + color: #202020; +} \ No newline at end of file diff --git a/templates/categories.html b/templates/categories.html index 80b824e..015427a 100644 --- a/templates/categories.html +++ b/templates/categories.html @@ -1,81 +1,155 @@ + - - Kategorien + +``` + + + + Kategorien + + + +``` + + -

Kategorien

- -Zurück - -
- -

Neue Kategorie

- -
+
``` - +
- + + +
+ +
+ ING Finanzen +
+ +
+ Kategorien verwalten +
+ +
+ +
+ + ``` - +
-
- - - - - - - - - -{% for category, words in categories.items() %} - - +
``` -
- - - - +Dashboard +Kategorien ``` - + -{% endfor %} +
-
KategorieSchlüsselwörterAktion
- {{ category }} - - {{ words|join(", ") }} - - - - Bearbeiten - - - | - - - Löschen - - -
+``` +
+ +

Neue Kategorie

+ +
+ + + + + +
+ +
+ +
+ +
+ +

Vorhandene Kategorien

+ + + + + + + + + + + + + + + + {% for category, words in categories.items() %} + + + + + + + + + + + + {% endfor %} + + + +
KategorieSchlüsselwörterAktionen
+ {{ category }} + + {{ words|join(", ") }} + + + + Bearbeiten + + +  |  + + + Löschen + + +
+ +
+``` + + + +
+ +``` +Hintergasse © 2026 +``` + +
+ diff --git a/templates/edit_category.html b/templates/edit_category.html index ab16f63..650842f 100644 --- a/templates/edit_category.html +++ b/templates/edit_category.html @@ -1,77 +1,134 @@ + - - {{ category }} + +``` + + + + {{ category }} + + + +``` + + -

{{ category }}

- - - Zurück - - -
- -

Neues Schlüsselwort

- -
+
``` - +
- + + +
+ +
+ ING Finanzen +
+ +
+ Kategorie bearbeiten +
+ +
+ +
+ + ``` - +
-
- -

Schlüsselwörter

- - - - - - - - -{% for word in words %} - - - - - - +
-
+``` +
-{% endfor %} +

{{ category }}

-
WortAktion
-{{ word }} - - - +
``` -Löschen +Dashboard +Kategorien ``` - +
-
+

+ Schlüsselwörter dieser Kategorie verwalten. +

+ + + +
+ +

Neues Schlüsselwort

+ +
+ + + + + +
+ +
+ +
+ +

Vorhandene Schlüsselwörter

+ +
+ + {% for word in words %} + +
+ + {{ word }} + + + + × + + + +
+ + {% endfor %} + +
+ +
+``` + + + +
+ +``` +Hintergasse © 2026 +``` + +
+ diff --git a/templates/index.html b/templates/index.html index dfac7ba..09d7ed0 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,68 +1,174 @@ + + - - ING Auswertung + +``` + + + + ING Finanzen + + + +``` + + -

ING Auswertung

-

- Kategorien -

-
+
-

Kontostand

+``` +
-
- -
+ -
+
-

Transaktionen

+
+ ING Finanzen +
-
+
+ Kontobewegungen und Auswertungen +
- Jahr: - +
- KW: - +
- + +``` - +
-
+
-

Kategorisierung

+``` +Dashboard +Kategorien +``` -
+
- Jahr: - +
- KW: - +``` +
- +
- +

Kontostand

+ +
+ + + +
+ +
+ +
+ +

Transaktionen

+ +
+ + Jahr: + + + + KW: + + + +

+ + + +
+ +
+ +
+ +

Kategorisierung

+ +
+ + Jahr: + + + + KW: + + + +

+ + + +
+ +
+ +
+ +

Kategorien

+ +

+ Kategorien und Schlüsselwörter + verwalten. +

+ + + + + + + +
+ +
+``` + +
+ +
+ +``` +Hintergasse © 2026 +``` + +
- \ No newline at end of file +