Layout Admin Mandanten
This commit is contained in:
parent
bd17573096
commit
d6a8406c08
@ -1,116 +1,112 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ page_title }}</title>
|
||||
<link rel="stylesheet" href="/styles/site.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="site-header">
|
||||
<div class="header-inner">
|
||||
<div class="logo-area">
|
||||
<a href="/home">
|
||||
<img src="/images/Logo-Compliance-Verification-bg-1.png" alt="Logo" class="site-logo">
|
||||
</a>
|
||||
</div>
|
||||
{% extends "base.html" %}
|
||||
|
||||
<nav class="top-nav">
|
||||
<a href="/home">Home</a>
|
||||
<a href="/preise">Preise</a>
|
||||
<a href="/allgemein">Allgemein</a>
|
||||
{% block content %}
|
||||
|
||||
{% if is_logged_in %}
|
||||
<div class="user-menu">
|
||||
<button class="user-menu-toggle" type="button">{{ user_name }} ▾</button>
|
||||
<div class="user-menu-dropdown">
|
||||
<a href="/profil">Profil</a>
|
||||
{% if is_admin %}
|
||||
<a href="/admin/mandanten">Admin</a>
|
||||
{% endif %}
|
||||
<a href="/logout">Logout</a>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<a href="/login">Login</a>
|
||||
{% endif %}
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="content-area">
|
||||
<section class="content-box">
|
||||
<div class="page-header">
|
||||
<h1>Mandantenverwaltung</h1>
|
||||
<p class="intro-text">Übersicht und Pflege aller Mandanten.</p>
|
||||
</div>
|
||||
|
||||
<section class="admin-section">
|
||||
<div class="admin-panel">
|
||||
<div class="admin-panel-header">
|
||||
<h2>Neuen Mandanten anlegen</h2>
|
||||
<form method="post" class="admin-form">
|
||||
</div>
|
||||
|
||||
<form method="post" class="admin-grid-form">
|
||||
<input type="hidden" name="action" value="create">
|
||||
|
||||
<div class="form-row">
|
||||
<label>Kürzel</label>
|
||||
<input type="text" name="kuerzel" required>
|
||||
<label for="kuerzel">Kürzel</label>
|
||||
<input type="text" id="kuerzel" name="kuerzel" required>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<label>Name</label>
|
||||
<input type="text" name="name" required>
|
||||
<label for="name">Name</label>
|
||||
<input type="text" id="name" name="name" required>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<label>Kontakt E-Mail</label>
|
||||
<input type="email" name="kontakt_email">
|
||||
<label for="kontakt_email">Kontakt E-Mail</label>
|
||||
<input type="email" id="kontakt_email" name="kontakt_email">
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<label>Level</label>
|
||||
<input type="number" name="level" value="0">
|
||||
<label for="level">Level</label>
|
||||
<input type="number" id="level" name="level" value="0" min="0">
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-row form-row-full">
|
||||
<button type="submit" class="btn-primary">Mandant anlegen</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<h2>Mandanten</h2>
|
||||
<section class="admin-section">
|
||||
<div class="admin-panel">
|
||||
<div class="admin-panel-header">
|
||||
<h2>Bestehende Mandanten</h2>
|
||||
</div>
|
||||
|
||||
<div class="table-wrap">
|
||||
<table class="mandanten-table">
|
||||
<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 %}
|
||||
<form method="post" class="admin-card-form">
|
||||
<tr>
|
||||
<form method="post">
|
||||
<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>
|
||||
<td class="col-id">{{ mandant.id }}</td>
|
||||
|
||||
<div class="form-row">
|
||||
<label>Kürzel</label>
|
||||
<td>
|
||||
<input type="text" name="kuerzel" value="{{ mandant.kuerzel }}" required>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<div class="form-row">
|
||||
<label>Name</label>
|
||||
<td>
|
||||
<input type="text" name="name" value="{{ mandant.name }}" required>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<div class="form-row">
|
||||
<label>Kontakt E-Mail</label>
|
||||
<td>
|
||||
<input type="email" name="kontakt_email" value="{{ mandant.kontakt_email or '' }}">
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<div class="form-row">
|
||||
<label>Level</label>
|
||||
<input type="number" name="level" value="{{ mandant.level }}">
|
||||
</div>
|
||||
<td class="col-level">
|
||||
<input type="number" name="level" value="{{ mandant.level }}" min="0">
|
||||
</td>
|
||||
|
||||
<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>
|
||||
<td class="col-actions">
|
||||
<div class="table-actions">
|
||||
<button type="submit" name="action" value="update" class="btn-primary btn-small">
|
||||
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 %}
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% endblock %}
|
||||
@ -1,5 +1,5 @@
|
||||
/* =========================
|
||||
RESET & BASE
|
||||
1. RESET & BASE
|
||||
========================= */
|
||||
|
||||
* {
|
||||
@ -19,7 +19,7 @@ body {
|
||||
}
|
||||
|
||||
/* =========================
|
||||
HEADER
|
||||
2. LAYOUT (HEADER / CONTENT)
|
||||
========================= */
|
||||
|
||||
.site-header {
|
||||
@ -39,55 +39,6 @@ body {
|
||||
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 {
|
||||
padding: 40px 20px;
|
||||
}
|
||||
@ -95,18 +46,15 @@ body {
|
||||
.content-box {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
||||
background: #ffffff;
|
||||
color: #1b2430;
|
||||
|
||||
border-radius: 16px;
|
||||
padding: 32px;
|
||||
|
||||
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* =========================
|
||||
HEADINGS
|
||||
3. TYPOGRAPHY
|
||||
========================= */
|
||||
|
||||
h1, h2, h3 {
|
||||
@ -119,140 +67,124 @@ p {
|
||||
}
|
||||
|
||||
/* =========================
|
||||
HERO
|
||||
4. NAVIGATION
|
||||
========================= */
|
||||
|
||||
.hero-box {
|
||||
margin-bottom: 30px;
|
||||
.site-logo {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
PRICING
|
||||
========================= */
|
||||
|
||||
.pricing-section {
|
||||
margin-bottom: 30px;
|
||||
.top-nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.pricing-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
.top-nav a {
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
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;
|
||||
border: 1px solid #dce3ea;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
|
||||
overflow: hidden;
|
||||
z-index: 200;
|
||||
}
|
||||
|
||||
.price-card.featured {
|
||||
border: 2px solid #1d66b2;
|
||||
background: #f5f9ff;
|
||||
.user-menu-dropdown a {
|
||||
display: block;
|
||||
padding: 12px 16px;
|
||||
color: #1b2430;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.price-card h3 {
|
||||
.user-menu-dropdown a:hover {
|
||||
background: #eef4fb;
|
||||
color: #0d2f57;
|
||||
}
|
||||
|
||||
.price-subline {
|
||||
color: #526172;
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
.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;
|
||||
.user-menu:hover .user-menu-dropdown,
|
||||
.user-menu:focus-within .user-menu-dropdown {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
BUTTONS
|
||||
5. BUTTONS
|
||||
========================= */
|
||||
|
||||
|
||||
|
||||
/* =========================
|
||||
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;
|
||||
.btn-primary,
|
||||
.btn-secondary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 48px;
|
||||
padding: 0 20px;
|
||||
border-radius: 12px;
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
MODULES
|
||||
========================= */
|
||||
|
||||
.module-blocks {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 24px;
|
||||
.btn-primary {
|
||||
background: #1f5ea8;
|
||||
color: #fff;
|
||||
border: 1px solid #1f5ea8;
|
||||
}
|
||||
|
||||
.module-block {
|
||||
background: #f8fbff;
|
||||
.btn-secondary {
|
||||
background: #eef4fb;
|
||||
color: #0d2f57;
|
||||
border: 1px solid #dce3ea;
|
||||
border-radius: 16px;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.module-block h3 {
|
||||
color: #7f9cc0;
|
||||
.btn-danger {
|
||||
background: #b62323;
|
||||
color: #fff;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.module-result {
|
||||
font-weight: 800;
|
||||
color: #125eb0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.module-block li {
|
||||
color: #2f3b4a;
|
||||
.btn-small {
|
||||
height: 40px;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
LOGIN
|
||||
6. FORMS
|
||||
========================= */
|
||||
|
||||
.login-box {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
color: #526172;
|
||||
}
|
||||
|
||||
.login-form .form-row {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
@ -271,6 +203,10 @@ p {
|
||||
border: 1px solid #c9d2db;
|
||||
}
|
||||
|
||||
/* =========================
|
||||
7. FEEDBACK
|
||||
========================= */
|
||||
|
||||
.error-box {
|
||||
background: #ffe7e7;
|
||||
color: #8d1d1d;
|
||||
@ -279,167 +215,94 @@ p {
|
||||
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) {
|
||||
|
||||
.pricing-grid,
|
||||
.module-blocks,
|
||||
.two-col {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.top-nav a {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.header-inner {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.info-section {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.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;
|
||||
.top-nav a {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user