diff --git a/partials/structure/app_config.php b/partials/structure/app_config.php new file mode 100644 index 0000000..94905b9 --- /dev/null +++ b/partials/structure/app_config.php @@ -0,0 +1,29 @@ + $lang ?? 'en', + 'assetsBase'=> '/assets', + 'env' => $GLOBALS['ENV'] ?? 'prod', + + 'domains' => [ + 'primaryDomain' => app_primary_domain(), + 'primaryUrl' => app_primary_url(), + 'fakecheckDomain' => app_fakecheck_domain(), + 'fakecheckUrl' => app_fakecheck_url(), + ], + + 'fakecheck' => [ + 'baseUrl' => $GLOBALS['usb_base_url'] ?? '', + 'apiBaseUrl'=> $GLOBALS['usb_api_base'] ?? 'https://api.usbcheck.it', + 'locale' => $lang ?? 'en', + ], +]; +?> + diff --git a/partials/structure/layout_start.php b/partials/structure/layout_start.php index 7b67f1c..198236f 100644 --- a/partials/structure/layout_start.php +++ b/partials/structure/layout_start.php @@ -6,6 +6,7 @@ // - $pageTitle (string) // - $pageDescription (string, optional) // - $userInitials (optional, kann null sein) +// - optional: $canonical (string) → überschreibt die automatisch berechnete Canonical-URL // Fallbacks: if (!isset($lang) || !in_array($lang, ['de', 'en', 'it', 'fr'], true)) { @@ -19,12 +20,26 @@ if (!isset($pageTitle) || !is_string($pageTitle) || $pageTitle === '') { if (!isset($pageDescription) || !is_string($pageDescription)) { $pageDescription = ''; } + +// Standard-Script für Header-Interaktionen if (function_exists('tpl_add_script')) { tpl_add_script('/assets/js/header.js', 'footer', true, false, '', null); } +// Scheme + Host + Request-URI für Canonical & sonstige Host-bezogene Dinge +$scheme = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'https' : 'http'; +$host = $_SERVER['HTTP_HOST'] ?? app_primary_domain(); +$requestUri = $_SERVER['REQUEST_URI'] ?? '/'; + +// Canonical bestimmen: +// - Wenn $canonical gesetzt ist (z. B. auf einer Landingpage explizit) +// → diese URL verwenden +// - Sonst: aktuelle URL ohne Query-Parameter (alles hinter '?') +$effectiveCanonical = isset($canonical) && is_string($canonical) && $canonical !== '' + ? $canonical + : ($scheme . '://' . $host . strtok($requestUri, '?')); + // Kann später genutzt werden, falls du host-spezifische Sachen brauchst -$host = $_SERVER['HTTP_HOST'] ?? ''; ?> @@ -37,18 +52,17 @@ $host = $_SERVER['HTTP_HOST'] ?? ''; + + + - - + - + + @@ -132,9 +138,7 @@ foreach ($GLOBALS['page_header_scripts'] as $script) {
- +
diff --git a/public/assets/css/fakecheck.css b/public/assets/css/fakecheck.css index ca8aff3..ed20d77 100644 --- a/public/assets/css/fakecheck.css +++ b/public/assets/css/fakecheck.css @@ -1,15 +1,16 @@ /* /public/assets/css/fakecheck.css */ :root { - --fc-brand-primary: #2563eb; - --fc-brand-secondary: #0f172a; - --fc-brand-bg: #020617; - --fc-brand-border: #1f2937; - --fc-success: #16a34a; - --fc-warning: #f59e0b; - --fc-danger: #dc2626; - --fc-text: #e5e7eb; - --fc-text-muted: #9ca3af; + --fc-brand-primary: var(--brand-blue, #3a6ff8); + --fc-brand-primary-soft: rgba(58, 111, 248, 0.12); + --fc-surface: #ffffff; + --fc-surface-muted: #f5f8ff; + --fc-border: rgba(58, 111, 248, 0.15); + --fc-text: #1f2a44; + --fc-text-muted: #5f6b85; + --fc-success: #1fce88; + --fc-warning: #ffb347; + --fc-danger: #f46666; } .fc-container { @@ -32,7 +33,8 @@ margin: 0 0 0.3rem; font-family: "Montserrat", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-weight: 700; - font-size: 1.7rem; + font-size: clamp(1.6rem, 2.3vw, 2rem); + color: var(--fc-text); } .fc-header-text p { @@ -45,23 +47,24 @@ display: inline-flex; align-items: center; gap: 0.4rem; - padding: 0.25rem 0.7rem; + padding: 0.35rem 0.85rem; border-radius: 999px; - background: rgba(37, 99, 235, 0.15); - color: var(--fc-text-muted); + background: var(--fc-brand-primary-soft); + color: var(--fc-text); font-size: 0.75rem; + border: 1px solid var(--fc-border); } .fc-header-badge .dot { width: 8px; height: 8px; border-radius: 999px; - background: #22c55e; + background: var(--fc-success); } .fc-layout { display: grid; - grid-template-columns: minmax(0, 2fr) minmax(0, 1.35fr); + grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr); gap: 1.5rem; } @@ -74,12 +77,11 @@ /* Karten */ .fc-card { - background: rgba(15, 23, 42, 0.96); - border-radius: 1rem; - border: 1px solid var(--fc-brand-border); - padding: 1.5rem 1.5rem 1.75rem; - backdrop-filter: blur(12px); - box-shadow: 0 18px 40px rgba(15, 23, 42, 0.8); + background: var(--fc-surface); + border-radius: 24px; + border: 1px solid var(--fc-border); + padding: 1.75rem 1.8rem 2rem; + box-shadow: 0 18px 40px rgba(15, 33, 66, 0.08); } .fc-card-title { @@ -87,6 +89,7 @@ font-size: 1.05rem; font-family: "Montserrat", system-ui, sans-serif; font-weight: 600; + color: var(--fc-text); } .fc-card-subtitle { @@ -113,16 +116,17 @@ align-items: center; justify-content: center; gap: 0.4rem; - padding: 0.55rem 1.1rem; + padding: 0.6rem 1.25rem; border-radius: 999px; - border: 1px solid rgba(148, 163, 184, 0.25); - background: linear-gradient(to right, #1d4ed8, #3b82f6); - color: #f9fafb; - font-size: 0.9rem; + border: 1px solid transparent; + background: linear-gradient(135deg, var(--fc-brand-primary), #2a73ff); + color: #fff; + font-size: 0.92rem; cursor: pointer; text-decoration: none; transition: transform 0.1s ease, box-shadow 0.1s ease, background 0.15s ease; white-space: nowrap; + box-shadow: 0 12px 28px rgba(58, 111, 248, 0.35); } .fc-btn[disabled] { @@ -134,18 +138,19 @@ .fc-btn:hover:not([disabled]) { transform: translateY(-1px); - box-shadow: 0 10px 25px rgba(37, 99, 235, 0.55); + box-shadow: 0 16px 32px rgba(58, 111, 248, 0.45); } .fc-btn-secondary { - background: transparent; - border-color: rgba(148, 163, 184, 0.4); + background: var(--fc-surface-muted); + border-color: var(--fc-border); color: var(--fc-text-muted); + box-shadow: none; } .fc-btn-secondary:hover:not([disabled]) { - background: rgba(15, 23, 42, 0.9); - box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.65); + background: #fff; + color: var(--fc-brand-primary); } /* Modus-Kacheln */ @@ -164,236 +169,276 @@ } .fc-mode-tile { - border-radius: 0.9rem; - padding: 0.9rem 0.95rem; - border: 1px solid rgba(31, 41, 55, 0.9); - background: radial-gradient(circle at top left, rgba(37, 99, 235, 0.14), rgba(15, 23, 42, 0.96)); + border-radius: 18px; + padding: 1rem 1.1rem; + border: 1px solid var(--fc-border); + background: linear-gradient(140deg, #ffffff 0%, #f3f7ff 100%); cursor: pointer; - transition: border 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, transform 0.1s ease; + transition: border 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; +} + +.fc-mode-tile.selected { + border-color: rgba(58, 111, 248, 0.45); + box-shadow: 0 15px 35px rgba(58, 111, 248, 0.18); } .fc-mode-tile h4 { margin: 0 0 0.35rem; - font-size: 0.95rem; + font-size: 1rem; font-weight: 600; + color: var(--fc-text); } .fc-mode-tile p { margin: 0; - font-size: 0.8rem; + font-size: 0.84rem; color: var(--fc-text-muted); } .fc-mode-tile small { display: block; margin-top: 0.3rem; - font-size: 0.7rem; + font-size: 0.72rem; color: var(--fc-text-muted); } .fc-mode-tile .pill { display: inline-flex; align-items: center; - padding: 0.1rem 0.45rem; + padding: 0.12rem 0.55rem; border-radius: 999px; - border: 1px solid rgba(148, 163, 184, 0.4); - font-size: 0.65rem; + border: 1px solid var(--fc-border); + font-size: 0.7rem; color: var(--fc-text-muted); - margin-bottom: 0.35rem; + background: var(--fc-surface); } -.fc-mode-tile.selected { - border-color: var(--fc-brand-primary); - box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.58), 0 12px 30px rgba(15, 23, 42, 0.9); - transform: translateY(-1px); -} - -.fc-mode-tile.disabled { - opacity: 0.4; - cursor: not-allowed; -} - -/* Divider, Status, Progress */ - -.fc-divider { - margin: 1.25rem 0 1rem; - height: 1px; - border: none; - background: radial-gradient(circle, rgba(148, 163, 184, 0.35), transparent); -} +/* Status & Log */ .fc-status-line { display: flex; + flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; - font-size: 0.8rem; + margin: 1.1rem 0; + font-size: 0.85rem; color: var(--fc-text-muted); - flex-wrap: wrap; } .fc-tag { display: inline-flex; align-items: center; - padding: 0.15rem 0.6rem; border-radius: 999px; - border: 1px solid rgba(75, 85, 99, 0.8); + padding: 0.15rem 0.75rem; + border: 1px dashed var(--fc-border); font-size: 0.75rem; - color: var(--fc-text-muted); - white-space: nowrap; + color: var(--fc-text); + background: var(--fc-surface-muted); } .fc-progress { - margin-top: 0.6rem; width: 100%; - height: 7px; + height: 8px; border-radius: 999px; - background: rgba(15, 23, 42, 0.9); + background: var(--fc-surface-muted); overflow: hidden; - border: 1px solid rgba(31, 41, 55, 0.9); } .fc-progress-inner { height: 100%; - width: 0; - border-radius: inherit; - background: linear-gradient(to right, #22c55e, #16a34a); - transition: width 0.15s ease; + width: 0%; + border-radius: 999px; + background: linear-gradient(90deg, var(--fc-brand-primary), #7facff); + transition: width 0.2s ease-out; } -/* Log */ - .fc-log { - margin-top: 0.75rem; - padding: 0.6rem 0.7rem; - border-radius: 0.6rem; - background: rgba(15, 23, 42, 0.98); - border: 1px dashed rgba(55, 65, 81, 0.9); - max-height: 220px; - overflow: auto; - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - font-size: 0.78rem; - color: #9ca3af; + margin-top: 1rem; + background: var(--fc-surface-muted); + border-radius: 16px; + padding: 1rem; + max-height: 240px; + overflow-y: auto; + border: 1px solid rgba(58, 111, 248, 0.08); + font-size: 0.8rem; + color: var(--fc-text); } .fc-log-line { - white-space: pre-wrap; + display: flex; + gap: 0.4rem; + margin-bottom: 0.35rem; } .fc-log-line strong { - color: #e5e7eb; -} - -/* Help-Text */ - -.fc-help { - font-size: 0.78rem; color: var(--fc-text-muted); - margin-top: 0.3rem; + font-size: 0.72rem; + text-transform: uppercase; + letter-spacing: 0.08em; } -/* Alerts */ +/* Result cards */ -.fc-alert { - margin-top: 0.75rem; - padding: 0.6rem 0.75rem; - border-radius: 0.6rem; - font-size: 0.78rem; +.fc-overall-status-wrap { + margin-bottom: 1rem; } -.fc-alert-info { - background: rgba(37, 99, 235, 0.08); - border: 1px solid rgba(37, 99, 235, 0.45); - color: #bfdbfe; +.fc-pill-status { + display: inline-flex; + align-items: center; + gap: 0.4rem; + padding: 0.4rem 0.9rem; + border-radius: 999px; + font-size: 0.8rem; + font-weight: 600; + border: 1px solid transparent; } -.fc-alert-warn { - background: rgba(245, 158, 11, 0.08); - border: 1px solid rgba(245, 158, 11, 0.45); - color: #fef3c7; +.fc-pill-status .fc-pill-dot { + width: 8px; + height: 8px; + border-radius: 999px; + background: currentColor; } -.fc-alert-error { - background: rgba(220, 38, 38, 0.1); - border: 1px solid rgba(220, 38, 38, 0.6); - color: #fee2e2; +.fc-pill-ok { + background: rgba(31, 206, 136, 0.15); + color: var(--fc-success); + border-color: rgba(31, 206, 136, 0.25); } -/* Dashboard / Key-Value-Liste */ +.fc-pill-warn { + background: rgba(255, 179, 71, 0.15); + color: var(--fc-warning); + border-color: rgba(255, 179, 71, 0.3); +} + +.fc-pill-bad { + background: rgba(244, 102, 102, 0.15); + color: var(--fc-danger); + border-color: rgba(244, 102, 102, 0.3); +} .fc-kv-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 0.75rem 1.2rem; - font-size: 0.8rem; - margin-top: 1rem; + gap: 0.5rem 0.75rem; + margin: 1rem 0; + font-size: 0.85rem; + color: var(--fc-text); } -@media (max-width: 600px) { +@media (max-width: 500px) { .fc-kv-list { grid-template-columns: minmax(0, 1fr); } } .fc-kv-item dt { - margin: 0 0 0.15rem; + font-size: 0.72rem; + text-transform: uppercase; + letter-spacing: 0.08em; color: var(--fc-text-muted); - font-weight: 400; + margin-bottom: 0.1rem; } -.fc-kv-item dd { - margin: 0; - font-weight: 600; +.fc-alert { + border-radius: 16px; + padding: 0.8rem 1rem; + font-size: 0.82rem; + margin: 0.4rem 0; } -/* Overall-Status */ - -.fc-overall-status-wrap { - margin-bottom: 0.7rem; +.fc-alert-warn { + background: rgba(255, 179, 71, 0.12); + border: 1px solid rgba(255, 179, 71, 0.4); + color: #ab680d; } -.fc-pill-status { - display: inline-flex; - align-items: center; - gap: 0.35rem; - padding: 0.2rem 0.6rem; - border-radius: 999px; - font-size: 0.75rem; - border: 1px solid transparent; +.fc-alert-info { + background: rgba(58, 111, 248, 0.08); + border: 1px solid rgba(58, 111, 248, 0.3); + color: var(--fc-text); } -.fc-pill-dot { +.fc-alert-error { + background: rgba(244, 102, 102, 0.12); + border: 1px solid rgba(244, 102, 102, 0.35); + color: #b73232; +} + +.fc-help { + font-size: 0.8rem; + color: var(--fc-text-muted); + margin: 0.55rem 0; +} + +.fc-log code, +.fc-log kbd { + font-family: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace; +} + +/* Serial check widget */ + +#serialcheck-root { + margin-top: 2.5rem; +} + +#serialcheck-form { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0.9rem; +} + +@media (max-width: 640px) { + #serialcheck-form { + grid-template-columns: minmax(0, 1fr); + } +} + +#serialcheck-form label { + display: block; + font-size: 0.72rem; + text-transform: uppercase; + letter-spacing: 0.08em; + color: var(--fc-text-muted); + margin-bottom: 0.2rem; +} + +#serialcheck-form input { + width: 100%; + border-radius: 12px; + border: 1px solid var(--fc-border); + padding: 0.5rem 0.75rem; + font-size: 0.9rem; + color: var(--fc-text); + background: var(--fc-surface); +} + +#serialcheck-result { + margin-top: 1.2rem; + border-radius: 20px; + border: 1px solid var(--fc-border); + background: var(--fc-surface); + padding: 1.2rem; +} + +#serialcheck-error { + margin-top: 1rem; + border-radius: 14px; + border: 1px solid rgba(244, 102, 102, 0.4); + background: rgba(244, 102, 102, 0.12); + color: #b73232; + padding: 0.8rem 1rem; + font-size: 0.85rem; +} + +.fc-log::-webkit-scrollbar { width: 6px; - height: 6px; +} + +.fc-log::-webkit-scrollbar-thumb { + background: rgba(58, 111, 248, 0.3); border-radius: 999px; } - -.fc-pill-ok { - background: rgba(22, 163, 74, 0.12); - color: #bbf7d0; - border-color: rgba(34, 197, 94, 0.5); -} - -.fc-pill-ok .fc-pill-dot { - background: #22c55e; -} - -.fc-pill-warn { - background: rgba(245, 158, 11, 0.12); - color: #fef3c7; - border-color: rgba(245, 158, 11, 0.6); -} - -.fc-pill-warn .fc-pill-dot { - background: #fbbf24; -} - -.fc-pill-bad { - background: rgba(220, 38, 38, 0.12); - color: #fee2e2; - border-color: rgba(220, 38, 38, 0.6); -} - -.fc-pill-bad .fc-pill-dot { - background: #ef4444; -} diff --git a/public/assets/js/fakecheck.js b/public/assets/js/fakecheck.js index 1b46580..e92addc 100644 --- a/public/assets/js/fakecheck.js +++ b/public/assets/js/fakecheck.js @@ -1,22 +1,23 @@ // /public/assets/js/fakecheck.js document.addEventListener("DOMContentLoaded", () => { - const baseUrl = window.fakecheckBaseUrl || ""; - const locale = window.fakecheckLocale || "en"; + // Zentrale Config aus PHP (app_config.php o.ä.) + const cfg = window.usbConfig || {}; + const baseUrl = cfg.baseUrl || ""; + const locale = (cfg.lang || "en").toLowerCase(); // Neu: API-Basis-URL (prod/staging) – über Config oder Fallback anhand Host - const apiBaseUrl = window.fakecheckApiBaseUrl || detectApiBaseUrl(); - function detectApiBaseUrl() { + // Fallback, falls in usbConfig nichts hinterlegt ist const host = window.location.hostname || ""; - // einfache Heuristik: staging-Domain → staging-API if (host === "staging.usbcheck.it" || host.endsWith(".staging.usbcheck.it")) { return "https://api.staging.usbcheck.it"; } - // default: production return "https://api.usbcheck.it"; } + const apiBaseUrl = cfg.apiBaseUrl || detectApiBaseUrl(); + const root = document.getElementById("fc-root"); if (!root) { // Auf anderen Seiten eingebunden? Dann einfach nichts tun. @@ -51,9 +52,8 @@ document.addEventListener("DOMContentLoaded", () => { const btnCancel = $("#fc-btn-cancel-tests"); const modeTiles = $$("#fc-mode-grid .fc-mode-tile"); - // Falls du einen Login-Indikator hast, kannst du ihn global setzen, - // z. B. window.fakecheckIsLoggedIn = true/false - if (window.fakecheckIsLoggedIn) { + // Login-Indikator aus usbConfig + if (cfg.isLoggedIn && saveHint) { saveHint.style.display = "block"; } @@ -661,7 +661,6 @@ document.addEventListener("DOMContentLoaded", () => { // --- Backend-Speicherung ------------------------------------------------ async function saveReportToBackend(report) { - // Absoluter Pfad – dein Script liegt oberhalb des public-Roots: const url = "/api/result/browser-quick-test.php"; try { const response = await fetch(url, { @@ -674,7 +673,6 @@ document.addEventListener("DOMContentLoaded", () => { }); if (!response.ok) { - // 401 => nicht eingeloggt; 500 => Fehler etc. const msg = "HTTP " + response.status; logLine("Backend: Konnte Ergebnis nicht speichern (" + msg + ").", "warn"); if (response.status >= 500 && saveError) { diff --git a/public/assets/js/header.js b/public/assets/js/header.js index fff6052..60b9e69 100644 --- a/public/assets/js/header.js +++ b/public/assets/js/header.js @@ -2,14 +2,17 @@ document.addEventListener('DOMContentLoaded', function () { const supportedLangs = ['de', 'en', 'it', 'fr']; + // Globale Config aus PHP-Partial (app_config.php) + const cfg = window.usbConfig || {}; + const cfgLang = (cfg.lang || '').toLowerCase(); + function resolveCurrentLang() { - const url = new URL(window.location.href); - const urlLang = (url.searchParams.get('lang') || '').toLowerCase(); - const docLang = (document.documentElement.getAttribute('lang') || '').toLowerCase(); - const globalLang = (window.currentLang || '').toLowerCase(); + const url = new URL(window.location.href); + const urlLang = (url.searchParams.get('lang') || '').toLowerCase(); + const docLang = (document.documentElement.getAttribute('lang') || '').toLowerCase(); if (supportedLangs.includes(urlLang)) return urlLang; - if (supportedLangs.includes(globalLang)) return globalLang; + if (supportedLangs.includes(cfgLang)) return cfgLang; if (supportedLangs.includes(docLang)) return docLang; return 'de'; } @@ -27,7 +30,6 @@ document.addEventListener('DOMContentLoaded', function () { const currentQuery = window.location.search || ''; const redirect = currentPath + currentQuery; - // Sprache aus URL / globalem State ableiten const lang = resolveCurrentLang(); // Wenn wir bereits auf /login sind → nur zum #auth scrollen