mining

2026-04-25 00:08:59 +02:00
parent d6f09326f4
commit 5bfb37f926
3 changed files with 80 additions and 192 deletions
--- 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;
 }

--- 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,
--- a/modules/mining-checker/pages/index.php
+++ b/modules/mining-checker/pages/index.php
@@ -14,16 +14,46 @@ $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>', '<\/script>', $moduleJs);
 ?>
 <?= module_shell_header('mining-checker', [
    'title' => 'DOGE Mining-Checker',
+    'tabs' => $tabs,
 ]) ?>
 <div class="module-flow">
-  <div class="module-box mining-checker-host">
  <div id="mining-checker-app"
       data-default-project-key="<?= e($defaultProjectKey) ?>"
       data-api-base="/api/mining-checker/v1"
@@ -31,8 +61,8 @@ $moduleJs = str_replace('</script>', '<\/script>', $moduleJs);
       data-fx-url="<?= e($fxBaseUrl) ?>"
       data-fx-currencies-url="<?= e($fxCurrenciesUrl) ?>"
       data-fx-api-key-mask="<?= e($fxApiKeyMasked) ?>"
+       data-active-view="<?= e($activeView) ?>"
       data-sections-json="<?= e(is_string($sectionsJson) ? $sectionsJson : '[]') ?>"></div>
-  </div>
 </div>
 <style><?= $moduleCss ?></style>
 <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>