From 0c90aa0b88ec39ea26aa6ae1c35fc95a07816664 Mon Sep 17 00:00:00 2001 From: Lars Gebhardt-Kusche Date: Thu, 23 Apr 2026 00:40:05 +0200 Subject: [PATCH] sfdsf --- .../boersenchecker/assets/boersenchecker.css | 56 ++-- modules/boersenchecker/partials/dashboard.php | 5 - modules/boersenchecker/partials/home.php | 264 ++++++++++-------- .../boersenchecker/partials/instruments.php | 5 - modules/pihole/pages/index.php | 6 - modules/pihole/pages/instances.php | 6 - modules/pihole/pages/lists.php | 9 +- modules/pihole/pages/queries.php | 9 +- public/assets/css/app.css | 56 +++- src/App/functions.php | 28 +- 10 files changed, 240 insertions(+), 204 deletions(-) diff --git a/modules/boersenchecker/assets/boersenchecker.css b/modules/boersenchecker/assets/boersenchecker.css index ef6996b..2067c41 100644 --- a/modules/boersenchecker/assets/boersenchecker.css +++ b/modules/boersenchecker/assets/boersenchecker.css @@ -1,20 +1,20 @@ .bc-app { - --bc-accent: #5eead4; - --bc-accent-strong: #79d7ff; - --bc-ink: #09111f; - --bc-text: rgba(236, 245, 255, 0.96); - --bc-muted: rgba(203, 218, 234, 0.78); - --bc-line: rgba(148, 163, 184, 0.22); - --bc-panel: rgba(15, 23, 42, 0.68); - --bc-panel-soft: rgba(15, 23, 42, 0.52); - --bc-positive: #86efac; - --bc-negative: #fca5a5; + --bc-accent: var(--brand-accent); + --bc-accent-strong: var(--brand-accent-2); + --bc-ink: var(--text); + --bc-text: var(--text); + --bc-muted: var(--muted); + --bc-line: var(--line); + --bc-panel: rgba(255, 255, 255, 0.78); + --bc-panel-soft: rgba(248, 252, 252, 0.92); + --bc-positive: #137333; + --bc-negative: #c62828; color: var(--bc-text); } .bc-grid-bg { position: relative; - padding: 8px 0 32px; + padding: 0 0 8px; } .bc-grid-bg::before { @@ -23,8 +23,8 @@ inset: 0; pointer-events: none; background: - radial-gradient(circle at top right, rgba(94, 234, 212, 0.16), transparent 28%), - radial-gradient(circle at bottom left, rgba(121, 215, 255, 0.14), transparent 30%), + radial-gradient(circle at top right, color-mix(in srgb, var(--brand-accent-2) 10%, transparent), transparent 28%), + radial-gradient(circle at bottom left, color-mix(in srgb, var(--brand-accent-3) 10%, transparent), transparent 30%), linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)); } @@ -102,7 +102,7 @@ border: 1px solid var(--bc-line); border-radius: 22px; background: var(--bc-panel); - box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); + box-shadow: 0 10px 24px rgba(1, 22, 32, 0.06); } .bc-form-card, @@ -154,25 +154,25 @@ } .bc-button--tab { - background: rgba(255, 255, 255, 0.92); + background: rgba(255, 255, 255, 0.94); color: var(--bc-ink); font-weight: 700; } .bc-button--tab-active { - background: linear-gradient(135deg, var(--bc-accent-strong), var(--bc-accent)); - color: var(--bc-ink); + background: linear-gradient(135deg, var(--bc-accent), var(--brand-accent-3)); + color: #fff7fb; font-weight: 700; } .bc-button--primary { - background: linear-gradient(135deg, var(--bc-accent), var(--bc-accent-strong)); - color: var(--bc-ink); + background: linear-gradient(135deg, var(--bc-accent), var(--brand-accent-3)); + color: #fff7fb; font-weight: 700; } .bc-button--secondary { - background: rgba(255, 255, 255, 0.92); + background: rgba(255, 255, 255, 0.94); color: var(--bc-ink); font-weight: 700; } @@ -180,7 +180,7 @@ .bc-button--ghost { background: color-mix(in srgb, var(--bc-accent) 14%, transparent); border-color: color-mix(in srgb, var(--bc-accent) 34%, transparent); - color: var(--bc-accent-strong); + color: var(--bc-accent); font-weight: 700; } @@ -251,7 +251,7 @@ stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; - filter: drop-shadow(0 12px 24px rgba(94, 234, 212, 0.22)); + filter: drop-shadow(0 12px 24px color-mix(in srgb, var(--bc-accent) 18%, transparent)); } .bc-chart-area { @@ -259,7 +259,7 @@ } .bc-chart-grid line { - stroke: rgba(255,255,255,0.08); + stroke: rgba(16, 33, 43, 0.08); stroke-dasharray: 4 6; } @@ -271,7 +271,7 @@ .bc-range-button { border: 1px solid color-mix(in srgb, var(--bc-accent) 26%, transparent); - background: color-mix(in srgb, var(--bc-accent) 8%, transparent); + background: rgba(255, 255, 255, 0.76); color: var(--bc-text); padding: 8px 12px; border-radius: 999px; @@ -326,8 +326,8 @@ width: fit-content; padding: 6px 10px; border-radius: 999px; - background: rgba(255,255,255,0.06); - color: var(--bc-muted); + background: color-mix(in srgb, var(--bc-accent) 10%, transparent); + color: var(--bc-text); font-size: .85rem; } @@ -366,13 +366,13 @@ border: 1px solid var(--bc-line); border-radius: 14px; padding: 10px 12px; - background: rgba(2, 6, 23, 0.42); + background: var(--surface-strong); color: var(--bc-text); } .bc-app input::placeholder, .bc-app textarea::placeholder { - color: rgba(203, 218, 234, 0.48); + color: color-mix(in srgb, var(--bc-muted) 70%, transparent); } .bc-app a { diff --git a/modules/boersenchecker/partials/dashboard.php b/modules/boersenchecker/partials/dashboard.php index eb84e68..5a0e15f 100644 --- a/modules/boersenchecker/partials/dashboard.php +++ b/modules/boersenchecker/partials/dashboard.php @@ -2,11 +2,6 @@ 'Depotverwaltung', 'description' => 'Depots, Positionen und Kurs-Historien verwalten.', - 'tabs' => [ - ['label' => 'Ueberblick', 'href' => '/module/boersenchecker'], - ['label' => 'Depotverwaltung', 'href' => '/module/boersenchecker/depotverwaltung', 'active' => true], - ['label' => 'Aktienverwaltung', 'href' => '/module/boersenchecker/aktienverwaltung'], - ], ]) ?>
diff --git a/modules/boersenchecker/partials/home.php b/modules/boersenchecker/partials/home.php index f236cb7..109d53c 100644 --- a/modules/boersenchecker/partials/home.php +++ b/modules/boersenchecker/partials/home.php @@ -1,11 +1,6 @@ 'Depot-Ueberblick', 'description' => 'Depots, Aktien und Kursverlaeufe in einer Oberflaeche.', - 'tabs' => [ - ['label' => 'Ueberblick', 'href' => '/module/boersenchecker', 'active' => true], - ['label' => 'Depotverwaltung', 'href' => '/module/boersenchecker/depotverwaltung'], - ['label' => 'Aktienverwaltung', 'href' => '/module/boersenchecker/aktienverwaltung'], - ], ]) ?>
@@ -25,80 +20,88 @@
-
-
-
Depotauswahl
- -
Keine Depots vorhanden.
- - - -
- -
- -
Aktienauswahl
- -
Keine Aktien im ausgewaehlten Depot.
- - - -
- -
- - -
Marktdaten
-

Aktuelle Kurse fuer das gewaehlte Depot ueber Alpha Vantage abrufen.

-
- +
+
+
+

Marktueberblick

+

Depotauswahl, Aktienfokus und aktueller Kursabruf in einem Bereich.

- -
+
+
+
+
Depotauswahl
+ +
Keine Depots vorhanden.
+ + + +
-
-
+
+ +
Aktienauswahl
+ +
Keine Aktien im ausgewaehlten Depot.
+ + + +
+ +
+ + +
Marktdaten
+

Aktuelle Kurse fuer das gewaehlte Depot ueber Alpha Vantage abrufen.

+
+ +
+
+
+ + +
+
Positionen
Aktien im aktuell gewaehlten Depot
-
-
+ +
Investiert
In Berichtswahrung bewertet
-
-
+ +
Aktueller Wert
Basierend auf dem letzten gespeicherten Kurs
-
-
+ +
Performance
-
+
-
-
+
+
Bester Wert
@@ -106,9 +109,9 @@
Noch keine Performance verfuegbar.
-
+ -
+
Schwaechster Wert
@@ -116,79 +119,94 @@
Noch keine Performance verfuegbar.
-
+ -
+
-
+
-
-
+
+
-
Kursverlauf
-
- -
·
- -
-
- - - - - - - +

Kursverlauf

+

Schlusskurse ueber mehrere Zeitfenster fuer das aktuell gewaehlte Instrument.

-
Chartdaten werden geladen...
-
-
-
+
+
+
+
Aktie
+
+ +
·
+ +
+
+ + + + + + + +
+
+
Chartdaten werden geladen...
+
-
+
+
-
-
Aktien im Depot
- -
Keine Aktien im ausgewaehlten Depot.
- -
- - = 0) ? 'is-positive' : 'is-negative'; ?> -
-
- -
·
- -
- -
-
-
Stueckzahl
-
-
-
-
Kaufpreis
-
-
-
-
Letzter Kurs
-
-
-
-
Performance
-
- +
+
+
+

Aktien im Depot

+

Stueckzahl, Kaufdaten, letzter Kurs und Performance auf einen Blick.

+
+
+
+ +
Keine Aktien im ausgewaehlten Depot.
+ +
+ + = 0) ? 'is-positive' : 'is-negative'; ?> +
+
+ +
·
+ +
+ +
+
+
Stueckzahl
+
+
+
+
Kaufpreis
+
+
+
+
Letzter Kurs
+
+
+
+
Performance
+
+ +
-
- -
- + +
+ +
diff --git a/modules/boersenchecker/partials/instruments.php b/modules/boersenchecker/partials/instruments.php index 10070f9..e072936 100644 --- a/modules/boersenchecker/partials/instruments.php +++ b/modules/boersenchecker/partials/instruments.php @@ -1,11 +1,6 @@ 'Aktienverwaltung', 'description' => 'Stammdaten der Aktien pflegen, Symbole suchen und manuelle Kurse verwalten.', - 'tabs' => [ - ['label' => 'Ueberblick', 'href' => '/module/boersenchecker'], - ['label' => 'Depotverwaltung', 'href' => '/module/boersenchecker/depotverwaltung'], - ['label' => 'Aktienverwaltung', 'href' => '/module/boersenchecker/aktienverwaltung', 'active' => true], - ], ]) ?>
diff --git a/modules/pihole/pages/index.php b/modules/pihole/pages/index.php index 0292e7d..7b305e1 100644 --- a/modules/pihole/pages/index.php +++ b/modules/pihole/pages/index.php @@ -9,12 +9,6 @@ $hasConfig = !empty($instances); 'Pi-hole Dashboard', 'description' => 'Status, Blockings, Usage und Steuerung fuer beide Instanzen.', - 'tabs' => [ - ['label' => 'Dashboard', 'href' => '/module/pihole', 'active' => true], - ['label' => 'Instanzen', 'href' => '/module/pihole/instances'], - ['label' => 'Listen', 'href' => '/module/pihole/lists'], - ['label' => 'Queries', 'href' => '/module/pihole/queries'], - ], ]) ?>
diff --git a/modules/pihole/pages/instances.php b/modules/pihole/pages/instances.php index 1ed3290..0ba667a 100644 --- a/modules/pihole/pages/instances.php +++ b/modules/pihole/pages/instances.php @@ -135,12 +135,6 @@ if ($primaryId === '') { 'Pi-hole Instanzen', 'description' => 'Pi-hole Instanzen hinzufuegen, bearbeiten und loeschen.', - 'tabs' => [ - ['label' => 'Dashboard', 'href' => '/module/pihole'], - ['label' => 'Instanzen', 'href' => '/module/pihole/instances', 'active' => true], - ['label' => 'Listen', 'href' => '/module/pihole/lists'], - ['label' => 'Queries', 'href' => '/module/pihole/queries'], - ], ]) ?>
diff --git a/modules/pihole/pages/lists.php b/modules/pihole/pages/lists.php index 68b8396..a23bb19 100644 --- a/modules/pihole/pages/lists.php +++ b/modules/pihole/pages/lists.php @@ -6,11 +6,11 @@ $assets->addScript('/module/pihole/asset?file=pihole.js', 'footer', true); $instances = module_fn('pihole', 'instances'); $hasConfig = !empty($instances); ?> + 'Listen & Domains', + 'description' => 'Top-Domains, Listen-Updates und neue Eintraege auf der Primaer-Instanz.', +]) ?>
-
Pi-hole
-

Listen & Domains

-

Top-Domains, Listen-Updates und neue Eintraege (Primaer-Instanz).

-
Keine Instanzen konfiguriert @@ -84,3 +84,4 @@ $hasConfig = !empty($instances);
+ diff --git a/modules/pihole/pages/queries.php b/modules/pihole/pages/queries.php index 0368f36..f874d04 100644 --- a/modules/pihole/pages/queries.php +++ b/modules/pihole/pages/queries.php @@ -6,11 +6,11 @@ $assets->addScript('/module/pihole/asset?file=pihole.js', 'footer', true); $instances = module_fn('pihole', 'instances'); $hasConfig = !empty($instances); ?> + 'Zugriffe & Blockings', + 'description' => 'Aktuelle Blockings, Top Clients und Status pro Instanz.', +]) ?>
-
Pi-hole
-

Zugriffe & Blockings

-

Aktuelle Blockings, Top Clients und Status pro Instanz.

-
Keine Instanzen konfiguriert @@ -36,3 +36,4 @@ $hasConfig = !empty($instances);
+ diff --git a/public/assets/css/app.css b/public/assets/css/app.css index b9cca60..3625f8a 100644 --- a/public/assets/css/app.css +++ b/public/assets/css/app.css @@ -920,15 +920,15 @@ a { .module-page-stack { position: relative; display: grid; - gap: 18px; + gap: 16px; } .module-hero { display: grid; - gap: 18px; - padding: 28px; + gap: 14px; + padding: 20px 22px; border: 1px solid var(--line); - border-radius: 28px; + border-radius: 24px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(245, 252, 251, 0.88)), linear-gradient(90deg, color-mix(in srgb, var(--brand-accent) 14%, transparent), color-mix(in srgb, var(--brand-accent-2) 14%, transparent)); @@ -942,37 +942,45 @@ a { } .module-hero-top { - display: grid; - gap: 16px; - grid-template-columns: minmax(0, 1.6fr) minmax(220px, 0.8fr); + display: flex; + gap: 14px; + justify-content: space-between; align-items: start; } .module-hero-copy, .module-hero-actions { display: grid; - gap: 12px; + gap: 8px; +} + +.module-hero-copy { + min-width: 0; +} + +.module-hero-copy--compact { + min-height: 1px; } .module-title { margin: 0; - font-size: clamp(1.75rem, 4vw, 2.9rem); - line-height: 1; + font-size: clamp(1.45rem, 3vw, 2.2rem); + line-height: 1.04; font-weight: 700; - letter-spacing: -0.03em; + letter-spacing: -0.04em; } .module-lead { margin: 0; color: var(--muted); - font-size: 1rem; + font-size: 0.95rem; line-height: 1.5; } .module-tabs { display: flex; flex-wrap: wrap; - gap: 10px; + gap: 8px; } .module-button { @@ -981,7 +989,8 @@ a { justify-content: center; border: 1px solid transparent; border-radius: 16px; - padding: 12px 16px; + min-height: 40px; + padding: 9px 15px; cursor: pointer; text-decoration: none; transition: 160ms ease; @@ -1014,6 +1023,19 @@ a { font-weight: 700; } +.module-button--small { + min-height: 34px; + padding: 7px 12px; + border-radius: 14px; + font-size: 0.92rem; +} + +.module-hero-actions { + justify-items: start; + align-content: start; + width: min(240px, 100%); +} + .module-box, .module-box-soft, .module-box-table, @@ -1083,6 +1105,10 @@ a { @media (max-width: 980px) { .module-hero-top { - grid-template-columns: 1fr; + flex-direction: column; + } + + .module-hero-actions { + width: 100%; } } diff --git a/src/App/functions.php b/src/App/functions.php index 147c2c4..cd93ce7 100644 --- a/src/App/functions.php +++ b/src/App/functions.php @@ -280,8 +280,8 @@ function module_shell_header(string $module, array $options = []): string { $design = module_design($module); $requestPath = app()->request()->path(); - $title = trim((string) ($options['title'] ?? $design['title'] ?? ucfirst($module))); - $description = trim((string) ($options['description'] ?? $design['description'] ?? '')); + $title = trim((string) ($options['title'] ?? '')); + $description = trim((string) ($options['description'] ?? '')); $eyebrow = trim((string) ($options['eyebrow'] ?? $design['eyebrow'] ?? 'Modul')); $actions = is_array($options['actions'] ?? null) ? $options['actions'] : (is_array($design['actions'] ?? null) ? $design['actions'] : []); $tabs = is_array($options['tabs'] ?? null) ? $options['tabs'] : (is_array($design['tabs'] ?? null) ? $design['tabs'] : []); @@ -289,13 +289,21 @@ function module_shell_header(string $module, array $options = []): string $html = '
'; $html .= '
'; $html .= '
'; - $html .= '
'; - $html .= '
' . e($eyebrow) . '
'; - $html .= '

' . e($title) . '

'; - if ($description !== '') { - $html .= '

' . e($description) . '

'; + if ($title !== '' || $description !== '' || !empty($options['show_eyebrow'])) { + $html .= '
'; + if (!empty($options['show_eyebrow'])) { + $html .= '
' . e($eyebrow) . '
'; + } + if ($title !== '') { + $html .= '

' . e($title) . '

'; + } + if ($description !== '') { + $html .= '

' . e($description) . '

'; + } + $html .= '
'; + } else { + $html .= ''; } - $html .= '
'; if ($actions !== []) { $html .= '
'; @@ -309,7 +317,11 @@ function module_shell_header(string $module, array $options = []): string continue; } $variant = trim((string) ($action['variant'] ?? 'secondary')); + $size = trim((string) ($action['size'] ?? 'sm')); $class = $variant === 'ghost' ? 'module-button module-button--ghost' : 'module-button module-button--secondary'; + if ($size === 'sm') { + $class .= ' module-button--small'; + } $html .= '' . e($label) . ''; } $html .= '
';