diff --git a/modules/mining-checker/assets/css/app.css b/modules/mining-checker/assets/css/app.css index 2b590d3..926aa2a 100644 --- a/modules/mining-checker/assets/css/app.css +++ b/modules/mining-checker/assets/css/app.css @@ -1,117 +1,46 @@ #mining-checker-app { - --mc-bg: #09111f; - --mc-surface: rgba(8, 15, 29, 0.74); - --mc-surface-strong: rgba(15, 23, 42, 0.92); - --mc-line: rgba(148, 163, 184, 0.18); - --mc-line-strong: rgba(255, 255, 255, 0.12); - --mc-text: #e5eef8; - --mc-text-muted: #a7b5c8; - --mc-accent: #3dd9c4; - --mc-accent-strong: #7dd3fc; - --mc-danger: #fb7185; - --mc-success: #34d399; - --mc-warning: #fbbf24; - min-height: 70vh; - background: - radial-gradient(circle at top left, rgba(13, 148, 136, 0.16), transparent 26%), - radial-gradient(circle at top right, rgba(59, 130, 246, 0.18), transparent 22%), - linear-gradient(180deg, #04111d 0%, #0f172a 42%, #111827 100%); + --mc-surface: var(--surface); + --mc-surface-strong: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(248,252,252,0.92)); + --mc-line: var(--line); + --mc-line-strong: color-mix(in srgb, var(--brand-accent) 28%, transparent); + --mc-text: var(--text); + --mc-text-muted: var(--muted); + --mc-accent: var(--brand-accent); + --mc-accent-strong: var(--brand-accent-3); + --mc-danger: #d92d20; + --mc-success: #14804a; + --mc-warning: #b54708; + min-height: 0; + background: none; color: var(--mc-text); - font-family: "Space Grotesk", "Segoe UI", sans-serif; + font-family: inherit; max-width: 100%; overflow-x: clip; } -:root[data-theme="day"] #mining-checker-app { - --mc-bg: #f7fbfb; - --mc-surface: rgba(255, 255, 255, 0.84); - --mc-surface-strong: rgba(255, 255, 255, 0.96); - --mc-line: rgba(16, 33, 43, 0.13); - --mc-line-strong: color-mix(in srgb, var(--brand-accent, #ed1671) 32%, transparent); - --mc-text: #10212b; - --mc-text-muted: #66737b; - --mc-accent: var(--brand-accent, #ed1671); - --mc-accent-strong: var(--brand-accent-2, #06a9c8); - background: - radial-gradient(circle at top left, color-mix(in srgb, var(--brand-accent-2, #06a9c8) 16%, transparent), transparent 26%), - radial-gradient(circle at top right, color-mix(in srgb, var(--brand-accent, #ed1671) 16%, transparent), transparent 22%), - linear-gradient(180deg, #f7fbfb 0%, #eef7f5 48%, #fff8e9 100%); -} - -:root[data-theme="night"] #mining-checker-app { - --mc-accent: var(--brand-accent, #ed1671); - --mc-accent-strong: var(--brand-accent-2, #06a9c8); - background: - radial-gradient(circle at top left, color-mix(in srgb, var(--brand-accent-2, #06a9c8) 18%, transparent), transparent 26%), - radial-gradient(circle at top right, color-mix(in srgb, var(--brand-accent, #ed1671) 20%, transparent), transparent 22%), - linear-gradient(180deg, #050b12 0%, #0c1721 48%, #111827 100%); -} - -:root[data-theme="day"] #mining-checker-app .mc-stat-value { - color: var(--mc-text); -} - -:root[data-theme="day"] #mining-checker-app .mc-badge, -:root[data-theme="day"] #mining-checker-app .mc-badge--info, -:root[data-theme="day"] #mining-checker-app .mc-button--ghost { - color: var(--mc-text); -} - -:root[data-theme="day"] #mining-checker-app .mc-button--tab { - background: rgba(255, 255, 255, 0.72); - color: var(--mc-text); -} - -:root[data-theme="day"] #mining-checker-app .mc-button--tab-active, -:root[data-theme="day"] #mining-checker-app .mc-button--secondary { - background: var(--mc-text); - color: #ffffff; -} - -:root[data-theme="day"] #mining-checker-app .mc-input, -:root[data-theme="day"] #mining-checker-app .mc-select, -:root[data-theme="day"] #mining-checker-app .mc-textarea, -:root[data-theme="day"] #mining-checker-app .mc-file, -:root[data-theme="day"] #mining-checker-app .mc-display-field { - background: rgba(255, 255, 255, 0.72); -} - -:root[data-theme="day"] #mining-checker-app .mc-debug-entry, -:root[data-theme="day"] #mining-checker-app .mc-debug-text-console { - background: rgba(255, 255, 255, 0.7); -} - -:root[data-theme="day"] #mining-checker-app .mc-suggestion strong { - color: var(--mc-text); -} - #mining-checker-app, #mining-checker-app * { box-sizing: border-box; } #mining-checker-app .mc-grid-bg { - background-image: - linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), - linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); - background-size: 24px 24px; + background: none; max-width: 100%; overflow-x: clip; } #mining-checker-app .mc-shell { - width: min(1360px, calc(100% - 24px)); + width: 100%; max-width: 100%; - margin: 0 auto; - padding: 24px 0 40px; + margin: 0; + padding: 0; } #mining-checker-app .mc-stack { display: grid; - gap: 24px; + gap: 16px; } -#mining-checker-app .mc-hero, #mining-checker-app .mc-panel, #mining-checker-app .mc-stat-card, #mining-checker-app .mc-dashboard-card, @@ -121,19 +50,18 @@ #mining-checker-app .mc-table-shell, #mining-checker-app .mc-display-field { border: 1px solid var(--mc-line); - border-radius: 28px; + border-radius: 22px; background: var(--mc-surface); - box-shadow: 0 28px 60px rgba(0, 0, 0, 0.24); - backdrop-filter: blur(14px); + box-shadow: 0 12px 30px rgba(1, 22, 32, 0.08); + backdrop-filter: blur(8px); } -#mining-checker-app .mc-hero, #mining-checker-app .mc-panel, #mining-checker-app .mc-dashboard-card, #mining-checker-app .mc-alert, #mining-checker-app .mc-empty, #mining-checker-app .mc-table-shell { - padding: 24px; + padding: 18px 20px; } #mining-checker-app .mc-hero-top, @@ -166,17 +94,6 @@ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } -#mining-checker-app .mc-hero-copy { - max-width: 860px; -} - -#mining-checker-app .mc-title { - margin: 0; - font-size: clamp(2rem, 4vw, 3.4rem); - line-height: 1.05; - letter-spacing: -0.04em; -} - #mining-checker-app .mc-text, #mining-checker-app p, #mining-checker-app td, @@ -228,6 +145,10 @@ padding: 20px; } +#mining-checker-app .mc-stat-card { + background: var(--mc-surface-strong); +} + #mining-checker-app .mc-kicker { font-size: 0.76rem; text-transform: uppercase; @@ -239,7 +160,7 @@ font-size: 2rem; font-weight: 700; line-height: 1.1; - color: #fff; + color: var(--mc-text); } #mining-checker-app .mc-badge { @@ -257,8 +178,8 @@ } #mining-checker-app .mc-badge--warn { - background: rgba(251, 191, 36, 0.14); - color: #fde68a; + background: color-mix(in srgb, var(--mc-warning) 12%, transparent); + color: var(--mc-warning); } #mining-checker-app .mc-badge--info { @@ -267,20 +188,13 @@ } #mining-checker-app .mc-badge--danger { - background: rgba(251, 113, 133, 0.14); - color: #fecdd3; + background: color-mix(in srgb, var(--mc-danger) 12%, transparent); + color: var(--mc-danger); } #mining-checker-app .mc-badge--success { - background: rgba(52, 211, 153, 0.14); - color: #a7f3d0; -} - -#mining-checker-app .mc-tabs { - display: flex; - flex-wrap: wrap; - gap: 10px; - margin-top: 18px; + background: color-mix(in srgb, var(--mc-success) 12%, transparent); + color: var(--mc-success); } #mining-checker-app .mc-button, @@ -318,7 +232,7 @@ #mining-checker-app .mc-button--secondary { background: rgba(255, 255, 255, 0.92); - color: #09111f; + color: var(--mc-text); font-weight: 700; } @@ -334,10 +248,6 @@ color: var(--mc-accent-strong); } -#mining-checker-app .mc-home-link { - justify-self: end; -} - #mining-checker-app .mc-debug-tools { display: flex; flex-wrap: wrap; @@ -374,18 +284,7 @@ border: 1px solid var(--mc-line); border-radius: 18px; padding: 14px 16px; - background: rgba(2, 6, 23, 0.7); -} - -#mining-checker-app .mc-button--tab { - background: rgba(255, 255, 255, 0.06); - color: var(--mc-text); -} - -#mining-checker-app .mc-button--tab-active { - background: rgba(255, 255, 255, 0.94); - color: #09111f; - font-weight: 700; + background: color-mix(in srgb, var(--brand-accent-2) 8%, var(--mc-surface)); } #mining-checker-app .mc-field { @@ -408,7 +307,7 @@ border-radius: 16px; padding: 13px 15px; color: var(--mc-text); - background: rgba(255, 255, 255, 0.05); + background: rgba(255, 255, 255, 0.72); outline: none; } diff --git a/modules/mining-checker/assets/js/app.js b/modules/mining-checker/assets/js/app.js index 1cea471..7f1897e 100644 --- a/modules/mining-checker/assets/js/app.js +++ b/modules/mining-checker/assets/js/app.js @@ -12,6 +12,7 @@ const fxBaseUrl = root.dataset.fxUrl || 'https://currencyapi.net'; const fxCurrenciesUrl = root.dataset.fxCurrenciesUrl || fxBaseUrl; const fxApiKeyMask = root.dataset.fxApiKeyMask || ''; + const initialActiveTab = String(root.dataset.activeView || 'overview').trim() || 'overview'; const configuredSections = (() => { try { const parsed = JSON.parse(root.dataset.sectionsJson || '[]'); @@ -551,7 +552,7 @@ function App() { const [projectKey, setProjectKey] = useState(initialProjectKey); - const [activeTab, setActiveTab] = useState('overview'); + const [activeTab] = useState(initialActiveTab); const [payload, setPayload] = useState(() => normalizeBootstrap(null, initialProjectKey)); const [dashboardData, setDashboardData] = useState({}); const [loading, setLoading] = useState(true); @@ -1815,14 +1816,6 @@ setCookie('mining_checker_report_currency', '', 0); } - const tabs = configuredSections.length ? configuredSections : [ - ['overview', 'Ueberblick'], - ['measurements', 'Messpunkte'], - ['currencies', 'Waehrungen'], - ['mining', 'Mining'], - ['dashboards', 'Dashboards'], - ['settings', 'Settings'], - ]; const selectedFxCodes = fxSelection.length ? fxSelection.map((code) => String(code || '').toUpperCase()) : ['DOGE', 'USD', 'EUR']; const fxDisplayBaseNormalized = String(fxDisplayBase || 'USD').toUpperCase(); const groupedFxHistoryMap = new Map(); @@ -1884,40 +1877,6 @@ className: 'mc-grid-bg', }, [ h('div', { key: 'shell', className: 'mc-shell mc-stack' }, [ - h('header', { key: 'header', className: 'mc-hero' }, [ - h('div', { key: 'top', className: 'mc-hero-top' }, [ - h('div', { key: 'copy', className: 'mc-hero-copy' }, [ - h(Badge, { key: 'eyebrow' }, 'Mining-Checker Modul'), - h('h1', { key: 'title', className: 'mc-title' }, 'DOGE Mining-Checker'), - h('p', { key: 'lead', className: 'mc-text' }, - 'Messpunkte, Miner, Ziele, Waehrungen und Auswertungen in einer Oberflaeche.'), - ]), - h('div', { key: 'controls', className: 'mc-hero-controls' }, [ - h('a', { - key: 'home', - href: '/', - className: 'mc-button mc-button--ghost mc-home-link', - }, 'Zur Startseite'), - h('div', { key: 'project', className: 'mc-form-card' }, [ - h('div', { key: 'label', className: 'mc-field-label' }, 'Project Key'), - h('div', { key: 'value', className: 'mc-text' }, projectKey), - ]), - ]), - ]), - h('div', { key: 'tabs', className: 'mc-tabs' }, - tabs.map((tab) => h('button', { - key: tab[0], - type: 'button', - className: cx( - 'mc-button', - activeTab === tab[0] - ? 'mc-button--tab-active' - : 'mc-button--tab' - ), - onClick: () => setActiveTab(tab[0]), - }, tab[1])) - ), - ]), error ? h('div', { key: 'error', className: 'mc-alert mc-alert--error' }, error) : null, message ? h('div', { key: 'message', className: 'mc-alert mc-alert--success' }, message) : null, loading ? h('div', { key: 'loading', className: 'mc-empty' }, 'Lade Mining-Checker Daten …') : null, diff --git a/modules/mining-checker/pages/index.php b/modules/mining-checker/pages/index.php index 9ac1128..cc6286e 100644 --- a/modules/mining-checker/pages/index.php +++ b/modules/mining-checker/pages/index.php @@ -14,25 +14,55 @@ $fxApiKey = (string) ($fxConfig['api_key'] ?? ''); $fxApiKeyMasked = $fxApiKey === '' ? '' : (strlen($fxApiKey) <= 10 ? $fxApiKey : substr($fxApiKey, 0, 6) . '...' . substr($fxApiKey, -4)); -$sectionsJson = json_encode(is_array($design['sections'] ?? null) ? $design['sections'] : [], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES); +$sections = is_array($design['sections'] ?? null) ? $design['sections'] : []; +$activeView = trim((string) ($_GET['view'] ?? 'overview')); +$allowedViews = []; +$tabs = []; +foreach ($sections as $section) { + if (!is_array($section)) { + continue; + } + $key = trim((string) ($section['key'] ?? '')); + $label = trim((string) ($section['label'] ?? '')); + if ($key === '' || $label === '') { + continue; + } + $allowedViews[] = $key; + $tabs[] = [ + 'label' => $label, + 'href' => '/module/mining-checker?view=' . rawurlencode($key), + 'active' => $activeView === $key, + ]; +} +if ($allowedViews === []) { + $allowedViews = ['overview']; +} +if (!in_array($activeView, $allowedViews, true)) { + $activeView = $allowedViews[0]; + foreach ($tabs as &$tab) { + $tab['active'] = str_ends_with((string) ($tab['href'] ?? ''), 'view=' . $activeView); + } + unset($tab); +} +$sectionsJson = json_encode($sections, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES); $moduleCss = file_get_contents(dirname(__DIR__) . '/assets/css/app.css') ?: ''; $moduleJs = file_get_contents(dirname(__DIR__) . '/assets/js/app.js') ?: ''; $moduleJs = str_replace('', '<\/script>', $moduleJs); ?> = module_shell_header('mining-checker', [ 'title' => 'DOGE Mining-Checker', + 'tabs' => $tabs, ]) ?>