WebApp Design modern
This commit is contained in:
parent
49c9e36a0c
commit
b5931509af
5 changed files with 580 additions and 157 deletions
2
app.py
2
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/<category>",
|
||||
|
|
|
|||
186
static/style.css
Normal file
186
static/style.css
Normal 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;
|
||||
}
|
||||
|
|
@ -1,81 +1,155 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Kategorien</title>
|
||||
|
||||
```
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title>
|
||||
Kategorien
|
||||
</title>
|
||||
|
||||
<link rel="stylesheet"
|
||||
href="{{ url_for('static', filename='style.css') }}">
|
||||
```
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Kategorien</h1>
|
||||
|
||||
<a href="/">Zurück</a>
|
||||
|
||||
<hr>
|
||||
|
||||
<h2>Neue Kategorie</h2>
|
||||
|
||||
<form action="/categories/add" method="post">
|
||||
<div class="header">
|
||||
|
||||
```
|
||||
<input
|
||||
type="text"
|
||||
name="category"
|
||||
placeholder="Neue Kategorie"
|
||||
required>
|
||||
<div class="header-left">
|
||||
|
||||
<button type="submit">
|
||||
Anlegen
|
||||
</button>
|
||||
<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') }}">
|
||||
```
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<table border="1" cellpadding="5">
|
||||
|
||||
<tr>
|
||||
<th>Kategorie</th>
|
||||
<th>Schlüsselwörter</th>
|
||||
<th>Aktion</th>
|
||||
</tr>
|
||||
|
||||
{% for category, words in categories.items() %}
|
||||
|
||||
<tr>
|
||||
<div class="navbar">
|
||||
|
||||
```
|
||||
<td>
|
||||
{{ category }}
|
||||
</td>
|
||||
|
||||
<td>
|
||||
{{ words|join(", ") }}
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
<a href="/categories/edit/{{ category }}">
|
||||
Bearbeiten
|
||||
</a>
|
||||
|
||||
|
|
||||
|
||||
<a
|
||||
href="/categories/delete/{{ category }}"
|
||||
onclick="return confirm('Kategorie wirklich löschen?')">
|
||||
Löschen
|
||||
</a>
|
||||
|
||||
</td>
|
||||
<a href="/">Dashboard</a>
|
||||
<a href="/categories">Kategorien</a>
|
||||
```
|
||||
|
||||
</tr>
|
||||
</div>
|
||||
|
||||
{% endfor %}
|
||||
<div class="container">
|
||||
|
||||
</table>
|
||||
```
|
||||
<div class="card">
|
||||
|
||||
<h2>Neue Kategorie</h2>
|
||||
|
||||
<form action="/categories/add"
|
||||
method="post">
|
||||
|
||||
<input
|
||||
type="text"
|
||||
name="category"
|
||||
placeholder="Neue Kategorie"
|
||||
required>
|
||||
|
||||
<button type="submit">
|
||||
Anlegen
|
||||
</button>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
<br>
|
||||
|
||||
<div class="card">
|
||||
|
||||
<h2>Vorhandene Kategorien</h2>
|
||||
|
||||
<table class="category-table">
|
||||
|
||||
<thead>
|
||||
|
||||
<tr>
|
||||
<th>Kategorie</th>
|
||||
<th>Schlüsselwörter</th>
|
||||
<th>Aktionen</th>
|
||||
</tr>
|
||||
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
|
||||
{% for category, words in categories.items() %}
|
||||
|
||||
<tr>
|
||||
|
||||
<td>
|
||||
{{ category }}
|
||||
</td>
|
||||
|
||||
<td>
|
||||
{{ words|join(", ") }}
|
||||
</td>
|
||||
|
||||
<td>
|
||||
|
||||
<a class="action-link"
|
||||
href="/categories/edit/{{ category }}">
|
||||
Bearbeiten
|
||||
</a>
|
||||
|
||||
|
|
||||
|
||||
<a class="delete-link"
|
||||
href="/categories/delete/{{ category }}"
|
||||
onclick="return confirm('Kategorie wirklich löschen?')">
|
||||
Löschen
|
||||
</a>
|
||||
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
{% endfor %}
|
||||
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
|
||||
</div>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
|
||||
```
|
||||
Hintergasse © 2026
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,77 +1,134 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html lang="de">
|
||||
|
||||
<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>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>{{ category }}</h1>
|
||||
|
||||
<a href="/categories">
|
||||
Zurück
|
||||
</a>
|
||||
|
||||
<hr>
|
||||
|
||||
<h2>Neues Schlüsselwort</h2>
|
||||
|
||||
<form
|
||||
action="/categories/add_word/{{ category }}"
|
||||
method="post">
|
||||
<div class="header">
|
||||
|
||||
```
|
||||
<input
|
||||
type="text"
|
||||
name="word"
|
||||
required>
|
||||
<div class="header-left">
|
||||
|
||||
<button type="submit">
|
||||
Hinzufügen
|
||||
</button>
|
||||
<img class="logo-ing"
|
||||
src="{{ url_for('static', filename='logo_ing.png') }}">
|
||||
|
||||
<div>
|
||||
|
||||
<div class="title">
|
||||
ING Finanzen
|
||||
</div>
|
||||
|
||||
<div class="subtitle">
|
||||
Kategorie bearbeiten
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<img class="logo-hintergasse"
|
||||
src="{{ url_for('static', filename='logo_hintergasse.png') }}">
|
||||
```
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<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?')">
|
||||
<div class="navbar">
|
||||
|
||||
```
|
||||
Löschen
|
||||
<a href="/">Dashboard</a>
|
||||
<a href="/categories">Kategorien</a>
|
||||
```
|
||||
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</td>
|
||||
<div class="container">
|
||||
|
||||
</tr>
|
||||
```
|
||||
<div class="card">
|
||||
|
||||
{% endfor %}
|
||||
<h1>{{ category }}</h1>
|
||||
|
||||
</table>
|
||||
<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">
|
||||
|
||||
<input
|
||||
type="text"
|
||||
name="word"
|
||||
placeholder="Schlüsselwort"
|
||||
required>
|
||||
|
||||
<button type="submit">
|
||||
Hinzufügen
|
||||
</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>
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
|
||||
```
|
||||
Hintergasse © 2026
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,68 +1,174 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html lang="de">
|
||||
|
||||
<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>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>ING Auswertung</h1>
|
||||
<p>
|
||||
<a href="/categories">Kategorien</a>
|
||||
</p>
|
||||
<hr>
|
||||
<div class="header">
|
||||
|
||||
<h2>Kontostand</h2>
|
||||
```
|
||||
<div class="header-left">
|
||||
|
||||
<form action="/run/balance" method="post">
|
||||
<button type="submit">
|
||||
balance.py starten
|
||||
</button>
|
||||
</form>
|
||||
<img class="logo-ing"
|
||||
src="{{ url_for('static', filename='logo_ing.png') }}">
|
||||
|
||||
<hr>
|
||||
<div>
|
||||
|
||||
<h2>Transaktionen</h2>
|
||||
<div class="title">
|
||||
ING Finanzen
|
||||
</div>
|
||||
|
||||
<form action="/run/transactions" method="post">
|
||||
<div class="subtitle">
|
||||
Kontobewegungen und Auswertungen
|
||||
</div>
|
||||
|
||||
Jahr:
|
||||
<input type="text"
|
||||
name="year"
|
||||
placeholder="2026">
|
||||
</div>
|
||||
|
||||
KW:
|
||||
<input type="text"
|
||||
name="week"
|
||||
placeholder="25">
|
||||
</div>
|
||||
|
||||
<button type="submit">
|
||||
transactions.py starten
|
||||
</button>
|
||||
<img class="logo-hintergasse"
|
||||
src="{{ url_for('static', filename='logo_hintergasse.png') }}">
|
||||
```
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<div class="navbar">
|
||||
|
||||
<h2>Kategorisierung</h2>
|
||||
```
|
||||
<a href="/">Dashboard</a>
|
||||
<a href="/categories">Kategorien</a>
|
||||
```
|
||||
|
||||
<form action="/run/categorize" method="post">
|
||||
</div>
|
||||
|
||||
Jahr:
|
||||
<input type="text"
|
||||
name="year"
|
||||
placeholder="2026">
|
||||
<div class="container">
|
||||
|
||||
KW:
|
||||
<input type="text"
|
||||
name="week"
|
||||
placeholder="25">
|
||||
```
|
||||
<div class="cards">
|
||||
|
||||
<button type="submit">
|
||||
categorize_transactions.py starten
|
||||
</button>
|
||||
<div class="card">
|
||||
|
||||
</form>
|
||||
<h2>Kontostand</h2>
|
||||
|
||||
<form action="/run/balance"
|
||||
method="post">
|
||||
|
||||
<button type="submit">
|
||||
Kontostand abrufen
|
||||
</button>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
|
||||
<h2>Transaktionen</h2>
|
||||
|
||||
<form action="/run/transactions"
|
||||
method="post">
|
||||
|
||||
Jahr:
|
||||
|
||||
<input
|
||||
type="text"
|
||||
name="year"
|
||||
placeholder="2026">
|
||||
|
||||
KW:
|
||||
|
||||
<input
|
||||
type="text"
|
||||
name="week"
|
||||
placeholder="25">
|
||||
|
||||
<br><br>
|
||||
|
||||
<button type="submit">
|
||||
Transaktionen laden
|
||||
</button>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
|
||||
<h2>Kategorisierung</h2>
|
||||
|
||||
<form action="/run/categorize"
|
||||
method="post">
|
||||
|
||||
Jahr:
|
||||
|
||||
<input
|
||||
type="text"
|
||||
name="year"
|
||||
placeholder="2026">
|
||||
|
||||
KW:
|
||||
|
||||
<input
|
||||
type="text"
|
||||
name="week"
|
||||
placeholder="25">
|
||||
|
||||
<br><br>
|
||||
|
||||
<button type="submit">
|
||||
Kategorisieren
|
||||
</button>
|
||||
|
||||
</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>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue