Bkolb/AICertification
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Layout Admin Mandanten

Browse Source
This commit is contained in:
Bkolb 2026-04-02 17:03:09 +02:00
parent bd17573096
commit d6a8406c08
2 changed files with 266 additions and 407 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

204
app/flask-postgres/app/templates/admin_mandanten.html
View File

@ -1,116 +1,112 @@
<!DOCTYPE html> {% extends "base.html" %}
<html lang="de">
<head> {% block content %}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <div class="page-header">
<title>{{ page_title }}</title> <h1>Mandantenverwaltung</h1>
<link rel="stylesheet" href="/styles/site.css"> <p class="intro-text">Übersicht und Pflege aller Mandanten.</p>
</head> </div>
<body>
<header class="site-header"> <section class="admin-section">
<div class="header-inner"> <div class="admin-panel">
<div class="logo-area"> <div class="admin-panel-header">
<a href="/home"> <h2>Neuen Mandanten anlegen</h2>
<img src="/images/Logo-Compliance-Verification-bg-1.png" alt="Logo" class="site-logo"> </div>
</a>
<form method="post" class="admin-grid-form">
<input type="hidden" name="action" value="create">
<div class="form-row">
<label for="kuerzel">Kürzel</label>
<input type="text" id="kuerzel" name="kuerzel" required>
</div> </div>
<nav class="top-nav"> <div class="form-row">
<a href="/home">Home</a> <label for="name">Name</label>
<a href="/preise">Preise</a> <input type="text" id="name" name="name" required>
<a href="/allgemein">Allgemein</a> </div>
{% if is_logged_in %} <div class="form-row">
<div class="user-menu"> <label for="kontakt_email">Kontakt E-Mail</label>
<button class="user-menu-toggle" type="button">{{ user_name }} ▾</button> <input type="email" id="kontakt_email" name="kontakt_email">
<div class="user-menu-dropdown"> </div>
<a href="/profil">Profil</a>
{% if is_admin %} <div class="form-row">
<a href="/admin/mandanten">Admin</a> <label for="level">Level</label>
{% endif %} <input type="number" id="level" name="level" value="0" min="0">
<a href="/logout">Logout</a> </div>
</div>
</div> <div class="form-row form-row-full">
{% else %} <button type="submit" class="btn-primary">Mandant anlegen</button>
<a href="/login">Login</a> </div>
{% endif %} </form>
</nav> </div>
</section>
<section class="admin-section">
<div class="admin-panel">
<div class="admin-panel-header">
<h2>Bestehende Mandanten</h2>
</div> </div>
</header>
<main class="content-area"> <div class="table-wrap">
<section class="content-box"> <table class="mandanten-table">
<h1>Mandantenverwaltung</h1> <thead>
<tr>
<th>ID</th>
<th>Kürzel</th>
<th>Name</th>
<th>Kontakt E-Mail</th>
<th>Level</th>
<th>Aktionen</th>
</tr>
</thead>
<tbody>
{% for mandant in mandanten %}
<tr>
<form method="post">
<input type="hidden" name="id" value="{{ mandant.id }}">
<h2>Neuen Mandanten anlegen</h2> <td class="col-id">{{ mandant.id }}</td>
<form method="post" class="admin-form">
<input type="hidden" name="action" value="create">
<div class="form-row"> <td>
<label>Kürzel</label> <input type="text" name="kuerzel" value="{{ mandant.kuerzel }}" required>
<input type="text" name="kuerzel" required> </td>
</div>
<div class="form-row"> <td>
<label>Name</label> <input type="text" name="name" value="{{ mandant.name }}" required>
<input type="text" name="name" required> </td>
</div>
<div class="form-row"> <td>
<label>Kontakt E-Mail</label> <input type="email" name="kontakt_email" value="{{ mandant.kontakt_email or '' }}">
<input type="email" name="kontakt_email"> </td>
</div>
<div class="form-row"> <td class="col-level">
<label>Level</label> <input type="number" name="level" value="{{ mandant.level }}" min="0">
<input type="number" name="level" value="0"> </td>
</div>
<div class="form-row"> <td class="col-actions">
<button type="submit" class="btn-primary">Mandant anlegen</button> <div class="table-actions">
</div> <button type="submit" name="action" value="update" class="btn-primary btn-small">
</form> Speichern
</button>
<button
type="submit"
name="action"
value="delete"
class="btn-danger btn-small"
onclick="return confirm('Mandant wirklich löschen?')">
Löschen
</button>
</div>
</td>
</form>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</section>
<h2>Mandanten</h2> {% endblock %}
{% for mandant in mandanten %}
<form method="post" class="admin-card-form">
<input type="hidden" name="id" value="{{ mandant.id }}">
<div class="admin-card">
<div class="form-row">
<label>ID</label>
<input type="text" value="{{ mandant.id }}" readonly>
</div>
<div class="form-row">
<label>Kürzel</label>
<input type="text" name="kuerzel" value="{{ mandant.kuerzel }}" required>
</div>
<div class="form-row">
<label>Name</label>
<input type="text" name="name" value="{{ mandant.name }}" required>
</div>
<div class="form-row">
<label>Kontakt E-Mail</label>
<input type="email" name="kontakt_email" value="{{ mandant.kontakt_email or '' }}">
</div>
<div class="form-row">
<label>Level</label>
<input type="number" name="level" value="{{ mandant.level }}">
</div>
<div class="admin-actions">
<button type="submit" name="action" value="update" class="btn-primary">Speichern</button>
<button type="submit" name="action" value="delete" class="btn-danger" onclick="return confirm('Mandant wirklich löschen?')">Löschen</button>
</div>
</div>
</form>
{% endfor %}
</section>
</main>
</body>
</html>

469
app/flask-postgres/styles/site.css
View File

@ -1,5 +1,5 @@
/* ========================= /* =========================
RESET & BASE 1. RESET & BASE
========================= */ ========================= */
* { * {
@ -19,7 +19,7 @@ body {
} }
/* ========================= /* =========================
HEADER 2. LAYOUT (HEADER / CONTENT)
========================= */ ========================= */
.site-header { .site-header {
@ -39,55 +39,6 @@ body {
justify-content: space-between; justify-content: space-between;
} }
/* =========================
LOGO
========================= */
.site-logo {
height: 60px;
width: auto;
display: block;
}
/* =========================
NAVIGATION
========================= */
.top-nav {
display: flex;
align-items: center;
gap: 8px;
}
.top-nav a {
color: #ffffff;
text-decoration: none;
font-weight: 600;
padding: 10px 18px;
border-radius: 999px;
display: inline-block;
min-width: 110px; /* verhindert Springen */
text-align: center;
transition: background 0.2s ease;
}
.top-nav a:hover,
.top-nav a.active {
background: #376da6;
}
.user-box {
font-weight: 700;
padding: 10px 12px;
}
/* =========================
MAIN CONTENT
========================= */
.content-area { .content-area {
padding: 40px 20px; padding: 40px 20px;
} }
@ -95,18 +46,15 @@ body {
.content-box { .content-box {
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
background: #ffffff; background: #ffffff;
color: #1b2430; color: #1b2430;
border-radius: 16px; border-radius: 16px;
padding: 32px; padding: 32px;
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.2); box-shadow: 0 18px 48px rgba(0, 0, 0, 0.2);
} }
/* ========================= /* =========================
HEADINGS 3. TYPOGRAPHY
========================= */ ========================= */
h1, h2, h3 { h1, h2, h3 {
@ -119,140 +67,124 @@ p {
} }
/* ========================= /* =========================
HERO 4. NAVIGATION
========================= */ ========================= */
.hero-box { .site-logo {
margin-bottom: 30px; height: 60px;
} }
/* ========================= .top-nav {
PRICING display: flex;
========================= */ align-items: center;
gap: 8px;
.pricing-section {
margin-bottom: 30px;
} }
.pricing-grid { .top-nav a {
display: grid; color: #ffffff;
grid-template-columns: repeat(3, 1fr); text-decoration: none;
gap: 24px; font-weight: 600;
padding: 10px 18px;
border-radius: 999px;
min-width: 110px;
text-align: center;
transition: background 0.2s ease;
} }
.price-card { .top-nav a:hover,
.top-nav a.active {
background: #376da6;
}
/* USER MENU */
.user-menu {
position: relative;
}
.user-menu-toggle {
background: #376da6;
color: #fff;
border: 0;
border-radius: 999px;
padding: 10px 18px;
font-weight: 600;
cursor: pointer;
}
.user-menu-dropdown {
display: none;
position: absolute;
right: 0;
top: 100%;
min-width: 180px;
background: #ffffff; background: #ffffff;
border: 1px solid #dce3ea; border-radius: 12px;
border-radius: 16px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
padding: 24px; overflow: hidden;
z-index: 200;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
} }
.price-card.featured { .user-menu-dropdown a {
border: 2px solid #1d66b2; display: block;
background: #f5f9ff; padding: 12px 16px;
color: #1b2430;
text-decoration: none;
} }
.price-card h3 { .user-menu-dropdown a:hover {
background: #eef4fb;
color: #0d2f57; color: #0d2f57;
} }
.price-subline { .user-menu:hover .user-menu-dropdown,
color: #526172; .user-menu:focus-within .user-menu-dropdown {
min-height: 48px; display: block;
}
.price-value {
font-size: 30px;
font-weight: 800;
color: #125eb0;
margin: 18px 0;
}
.price-value span {
font-size: 14px;
color: #526172;
}
.price-card ul {
padding-left: 20px;
}
.price-card li {
margin-bottom: 8px;
color: #2f3b4a;
} }
/* ========================= /* =========================
BUTTONS 5. BUTTONS
========================= */ ========================= */
.btn-primary,
.btn-secondary {
/* ========================= display: inline-flex;
IMAGE PANEL
========================= */
.image-panel img {
width: 100%;
border-radius: 12px;
}
/* =========================
TWO COLUMN LAYOUT
========================= */
.two-col {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 24px;
align-items: center; align-items: center;
justify-content: center;
height: 48px;
padding: 0 20px;
border-radius: 12px;
font-weight: 700;
text-decoration: none;
} }
/* ========================= .btn-primary {
MODULES background: #1f5ea8;
========================= */ color: #fff;
border: 1px solid #1f5ea8;
.module-blocks {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
} }
.module-block { .btn-secondary {
background: #f8fbff; background: #eef4fb;
color: #0d2f57;
border: 1px solid #dce3ea; border: 1px solid #dce3ea;
border-radius: 16px;
padding: 24px;
} }
.module-block h3 { .btn-danger {
color: #7f9cc0; background: #b62323;
color: #fff;
border: none;
} }
.module-result { .btn-small {
font-weight: 800; height: 40px;
color: #125eb0; min-width: 100px;
margin-bottom: 10px;
}
.module-block li {
color: #2f3b4a;
} }
/* ========================= /* =========================
LOGIN 6. FORMS
========================= */ ========================= */
.login-box {
max-width: 600px;
}
.intro-text {
color: #526172;
}
.login-form .form-row { .login-form .form-row {
margin-bottom: 16px; margin-bottom: 16px;
} }
@ -271,6 +203,10 @@ p {
border: 1px solid #c9d2db; border: 1px solid #c9d2db;
} }
/* =========================
7. FEEDBACK
========================= */
.error-box { .error-box {
background: #ffe7e7; background: #ffe7e7;
color: #8d1d1d; color: #8d1d1d;
@ -279,167 +215,94 @@ p {
margin-bottom: 16px; margin-bottom: 16px;
} }
.success-box {
background: #e8f7e8;
color: #1f6b1f;
padding: 12px;
border-radius: 8px;
margin-bottom: 16px;
}
/* ========================= /* =========================
RESPONSIVE 8. COMPONENTS
========================= */
.hero-box,
.pricing-section,
.info-section {
margin-bottom: 30px;
}
.two-col {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 24px;
}
.image-panel img {
width: 100%;
border-radius: 12px;
}
/* =========================
9. ADMIN PANEL
========================= */
.admin-panel {
background: #f8fbff;
border: 1px solid #dce3ea;
border-radius: 18px;
padding: 24px;
margin-bottom: 24px;
}
.admin-actions {
display: flex;
gap: 16px;
margin-top: 16px;
}
/* =========================
10. TABLES
========================= */
.mandanten-table {
width: 100%;
border-collapse: collapse;
}
.mandanten-table th {
background: #eef4fb;
color: #0d2f57;
text-align: left;
padding: 14px;
}
.mandanten-table td {
padding: 14px;
border-bottom: 1px solid #e7edf3;
}
.mandanten-table tr:hover td {
background: #fbfdff;
}
/* =========================
11. RESPONSIVE
========================= */ ========================= */
@media (max-width: 900px) { @media (max-width: 900px) {
.pricing-grid,
.module-blocks,
.two-col { .two-col {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.top-nav a {
min-width: auto;
}
.header-inner { .header-inner {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
} }
}
.info-section { .top-nav a {
margin-bottom: 30px; min-width: auto;
} }
}
.check-list {
padding-left: 20px;
}
.check-list li {
margin-bottom: 8px;
}
.user-menu {
position: relative;
display: inline-block;
}
.user-menu-toggle {
background: #376da6;
color: #fff;
border: 0;
border-radius: 999px;
padding: 10px 18px;
font-weight: 600;
cursor: pointer;
min-width: 140px;
}
.user-menu-dropdown {
display: none;
position: absolute;
right: 0;
top: 100%;
margin-top: 0;
min-width: 180px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
overflow: hidden;
z-index: 200;
}
.user-menu-dropdown a {
display: block;
padding: 12px 16px;
color: #1b2430;
text-decoration: none;
text-align: left;
}
.user-menu-dropdown a:hover {
background: #eef4fb;
color: #0d2f57;
}
.user-menu:hover .user-menu-dropdown,
.user-menu:focus-within .user-menu-dropdown {
display: block;
}
.admin-form,
.admin-card-form {
margin-bottom: 24px;
}
.admin-card {
background: #f8fbff;
border: 1px solid #dce3ea;
border-radius: 16px;
padding: 20px;
margin-bottom: 20px;
}
.admin-actions {
display: flex;
margin-top: 16px;
gap: 16px;
align-items: center; /* 🔥 wichtig */
}
.btn-danger {
display: inline-block;
padding: 12px 18px;
border: 0;
border-radius: 10px;
background: #b62323;
color: #ffffff;
font-weight: 700;
cursor: pointer;
}
.admin-table {
width: 100%;
border-collapse: collapse;
}
.admin-table th,
.admin-table td {
padding: 12px 14px;
border-bottom: 1px solid #dce3ea;
text-align: left;
}
.admin-table th {
width: 220px;
color: #0d2f57;
}
.success-box {
margin-bottom: 18px;
padding: 14px 16px;
background: #e8f7e8;
color: #1f6b1f;
border: 1px solid #b9e0b9;
border-radius: 10px;
}
.btn-primary,
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
height: 48px; /* 🔥 gleiche Höhe */
padding: 0 20px; /* 🔥 vertikal rausnehmen */
border-radius: 12px;
font-weight: 700;
text-decoration: none;
box-sizing: border-box;
}
.btn-primary {
background: #1f5ea8;
color: #fff;
border: 1px solid #1f5ea8;
}
.btn-secondary {
background: #eef4fb;
color: #0d2f57;
border: 1px solid #dce3ea;
}