This commit is contained in:
2025-11-25 00:53:25 +01:00
parent 804b7da7f0
commit f0153dda4a
5 changed files with 284 additions and 206 deletions

View File

@@ -0,0 +1,29 @@
<?php
// partials/structure/app_config.php
$scheme = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'https' : 'http';
$host = $_SERVER['HTTP_HOST'] ?? app_primary_domain();
$requestUri = $_SERVER['REQUEST_URI'] ?? '/';
$usbConfig = [
'lang' => $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',
],
];
?>
<script>
window.usbConfig = <?= json_encode($usbConfig, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) ?>;
</script>

View File

@@ -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'] ?? '';
?>
<!DOCTYPE html>
<html lang="<?= htmlspecialchars($lang) ?>">
@@ -37,18 +52,17 @@ $host = $_SERVER['HTTP_HOST'] ?? '';
<meta name="description" content="<?= htmlspecialchars($pageDescription) ?>">
<?php endif; ?>
<!-- Canonical URL -->
<link rel="canonical" href="<?= htmlspecialchars($effectiveCanonical) ?>">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Montserrat:wght@600;700;800&display=swap" rel="stylesheet">
<script>
window.fakecheckBaseUrl = <?= json_encode($GLOBALS['usb_base_url'] ?? '') ?>;
window.fakecheckLocale = <?= json_encode($lang ?? 'en') ?>;
window.fakecheckApiBaseUrl = <?= json_encode($GLOBALS['usb_api_base'] ?? 'https://api.usbcheck.it') ?>;
</script>
<?php tpl('app_config', 'structure'); ?>
<?php
// CSS im Header
foreach ($GLOBALS['page_styles'] as $style) {
if ($style['pos'] !== 'header') {
@@ -114,16 +128,8 @@ foreach ($GLOBALS['page_header_scripts'] as $script) {
</script>
<!-- Tailwind (Dev) -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
window.currentLang = "<?= htmlspecialchars($lang) ?>";
window.assetsBase = "/assets"; // falls du das noch nicht hast
window.appDomains = <?= json_encode([
'primaryDomain' => app_primary_domain(),
'primaryUrl' => app_primary_url(),
'fakecheckDomain' => app_fakecheck_domain(),
'fakecheckUrl' => app_fakecheck_url(),
], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) ?>;
</script>
<!-- Eigenes CSS -->
<link rel="stylesheet" href="/assets/css/main.css">
</head>
@@ -132,9 +138,7 @@ foreach ($GLOBALS['page_header_scripts'] as $script) {
<div class="min-h-screen flex flex-col">
<!-- HEADER -->
<?php
tpl('header'); // structure/header.php
?>
<?php tpl('header'); ?>
<!-- MAIN CONTENT -->
<main class="flex-1">

View File

@@ -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;
}

View File

@@ -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) {

View File

@@ -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