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

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