hubobel/ING
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

WebApp Design modern

Browse source
This commit is contained in:
hubobel 2026-06-20 17:09:32 +02:00
parent 49c9e36a0c
commit b5931509af
5 changed files with 580 additions and 157 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app.py
View file

@ -178,7 +178,7 @@ def edit_category(category):
return render_template( return render_template(
"edit_category.html", "edit_category.html",
category=category, category=category,
words=categories[category] words=sorted(categories[category])
) )
@app.route( @app.route(
"/categories/add_word/<category>", "/categories/add_word/<category>",

186
static/style.css Normal file
View file

@ -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;
}

152
templates/categories.html
View file

@ -1,81 +1,155 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="utf-8">
<title>Kategorien</title>
</head>
<body>
<h1>Kategorien</h1>
<a href="/">Zurück</a>
<hr>
<h2>Neue Kategorie</h2>
<form action="/categories/add" method="post">
``` ```
<input <meta charset="utf-8">
<title>
Kategorien
</title>
<link rel="stylesheet"
href="{{ url_for('static', filename='style.css') }}">
```
</head>
<body>
<div class="header">
```
<div class="header-left">
<img class="logo-ing"
src="{{ url_for('static', filename='logo_ing.png') }}">
<div>
<div class="title">
ING Finanzen
</div>
<div class="subtitle">
Kategorien verwalten
</div>
</div>
</div>
<img class="logo-hintergasse"
src="{{ url_for('static', filename='logo_hintergasse.png') }}">
```
</div>
<div class="navbar">
```
<a href="/">Dashboard</a>
<a href="/categories">Kategorien</a>
```
</div>
<div class="container">
```
<div class="card">
<h2>Neue Kategorie</h2>
<form action="/categories/add"
method="post">
<input
type="text" type="text"
name="category" name="category"
placeholder="Neue Kategorie" placeholder="Neue Kategorie"
required> required>
<button type="submit"> <button type="submit">
Anlegen Anlegen
</button> </button>
```
</form> </form>
<hr> </div>
<table border="1" cellpadding="5"> <br>
<tr> <div class="card">
<h2>Vorhandene Kategorien</h2>
<table class="category-table">
<thead>
<tr>
<th>Kategorie</th> <th>Kategorie</th>
<th>Schlüsselwörter</th> <th>Schlüsselwörter</th>
<th>Aktion</th> <th>Aktionen</th>
</tr> </tr>
{% for category, words in categories.items() %} </thead>
<tr> <tbody>
``` {% for category, words in categories.items() %}
<td>
<tr>
<td>
{{ category }} {{ category }}
</td> </td>
<td> <td>
{{ words|join(", ") }} {{ words|join(", ") }}
</td> </td>
<td> <td>
<a href="/categories/edit/{{ category }}"> <a class="action-link"
href="/categories/edit/{{ category }}">
Bearbeiten Bearbeiten
</a> </a>
| &nbsp;|&nbsp;
<a <a class="delete-link"
href="/categories/delete/{{ category }}" href="/categories/delete/{{ category }}"
onclick="return confirm('Kategorie wirklich löschen?')"> onclick="return confirm('Kategorie wirklich löschen?')">
Löschen Löschen
</a> </a>
</td> </td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
``` ```
</tr> </div>
{% endfor %} <div class="footer">
</table> ```
Hintergasse © 2026
```
</div>
</body> </body>
</html> </html>

155
templates/edit_category.html
View file

@ -1,77 +1,134 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="utf-8">
<title>{{ category }}</title> ```
<meta charset="utf-8">
<title>
{{ category }}
</title>
<link rel="stylesheet"
href="{{ url_for('static', filename='style.css') }}">
```
</head> </head>
<body> <body>
<h1>{{ category }}</h1> <div class="header">
<a href="/categories"> ```
Zurück <div class="header-left">
</a>
<hr> <img class="logo-ing"
src="{{ url_for('static', filename='logo_ing.png') }}">
<h2>Neues Schlüsselwort</h2> <div>
<form <div class="title">
action="/categories/add_word/{{ category }}" ING Finanzen
</div>
<div class="subtitle">
Kategorie bearbeiten
</div>
</div>
</div>
<img class="logo-hintergasse"
src="{{ url_for('static', filename='logo_hintergasse.png') }}">
```
</div>
<div class="navbar">
```
<a href="/">Dashboard</a>
<a href="/categories">Kategorien</a>
```
</div>
<div class="container">
```
<div class="card">
<h1>{{ category }}</h1>
<p>
Schlüsselwörter dieser Kategorie verwalten.
</p>
</div>
<div class="card">
<h2>Neues Schlüsselwort</h2>
<form action="/categories/add_word/{{ category }}"
method="post"> method="post">
``` <input
<input
type="text" type="text"
name="word" name="word"
placeholder="Schlüsselwort"
required> required>
<button type="submit"> <button type="submit">
Hinzufügen Hinzufügen
</button> </button>
</form>
</div>
<div class="card">
<h2>Vorhandene Schlüsselwörter</h2>
<div class="tags">
{% for word in words %}
<div class="tag">
{{ word }}
<a
href="/categories/delete_word/{{ category }}/{{ word }}"
onclick="return confirm('Schlüsselwort wirklich löschen?')">
×
</a>
</div>
{% endfor %}
</div>
</div>
``` ```
</form> </div>
<hr> <div class="footer">
<h2>Schlüsselwörter</h2>
<table border="1" cellpadding="5">
<tr>
<th>Wort</th>
<th>Aktion</th>
</tr>
{% for word in words %}
<tr>
<td>
{{ word }}
</td>
<td>
<a
href="/categories/delete_word/{{ category }}/{{ word }}"
onclick="return confirm('Wort wirklich löschen?')">
``` ```
Löschen Hintergasse © 2026
``` ```
</a> </div>
</td>
</tr>
{% endfor %}
</table>
</body> </body>
</html> </html>

156
templates/index.html
View file

@ -1,68 +1,174 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="utf-8">
<title>ING Auswertung</title> ```
<meta charset="utf-8">
<title>
ING Finanzen
</title>
<link rel="stylesheet"
href="{{ url_for('static', filename='style.css') }}">
```
</head> </head>
<body> <body>
<h1>ING Auswertung</h1> <div class="header">
<p>
<a href="/categories">Kategorien</a>
</p>
<hr>
<h2>Kontostand</h2> ```
<div class="header-left">
<img class="logo-ing"
src="{{ url_for('static', filename='logo_ing.png') }}">
<div>
<div class="title">
ING Finanzen
</div>
<div class="subtitle">
Kontobewegungen und Auswertungen
</div>
</div>
</div>
<img class="logo-hintergasse"
src="{{ url_for('static', filename='logo_hintergasse.png') }}">
```
</div>
<div class="navbar">
```
<a href="/">Dashboard</a>
<a href="/categories">Kategorien</a>
```
</div>
<div class="container">
```
<div class="cards">
<div class="card">
<h2>Kontostand</h2>
<form action="/run/balance"
method="post">
<form action="/run/balance" method="post">
<button type="submit"> <button type="submit">
balance.py starten Kontostand abrufen
</button> </button>
</form>
<hr> </form>
<h2>Transaktionen</h2> </div>
<form action="/run/transactions" method="post"> <div class="card">
<h2>Transaktionen</h2>
<form action="/run/transactions"
method="post">
Jahr: Jahr:
<input type="text"
<input
type="text"
name="year" name="year"
placeholder="2026"> placeholder="2026">
KW: KW:
<input type="text"
<input
type="text"
name="week" name="week"
placeholder="25"> placeholder="25">
<br><br>
<button type="submit"> <button type="submit">
transactions.py starten Transaktionen laden
</button> </button>
</form> </form>
<hr> </div>
<h2>Kategorisierung</h2> <div class="card">
<form action="/run/categorize" method="post"> <h2>Kategorisierung</h2>
<form action="/run/categorize"
method="post">
Jahr: Jahr:
<input type="text"
<input
type="text"
name="year" name="year"
placeholder="2026"> placeholder="2026">
KW: KW:
<input type="text"
<input
type="text"
name="week" name="week"
placeholder="25"> placeholder="25">
<br><br>
<button type="submit"> <button type="submit">
categorize_transactions.py starten Kategorisieren
</button> </button>
</form> </form>
</div>
<div class="card">
<h2>Kategorien</h2>
<p>
Kategorien und Schlüsselwörter
verwalten.
</p>
<a href="/categories">
<button type="button">
Kategorien öffnen
</button>
</a>
</div>
</div>
```
</div>
<div class="footer">
```
Hintergasse © 2026
```
</div>
</body> </body>
</html> </html>