Alle Frontend-Assets lokal ausliefern statt über CDNs
Inter, Font Awesome, Chart.js, qrcodejs und TinyMCE liegen jetzt unter assets/vendor/ und werden vom eigenen Server ausgeliefert. Warum: - Datenschutz: bisher ging bei jedem Seitenaufruf die IP der Nutzer an Google Fonts, cdnjs, jsDelivr und Tiny Cloud - Funktion: UniFi-Installationen stehen oft in abgeschotteten Netzen – dort fehlten bisher Schrift, Icons, Diagramme und Editor Neu: includes/Ui.php - Ui::head()/Ui::script() binden die Assets ein und hängen einen Versionsstempel an (?v=filemtime), damit Browser nach einem Update nicht das alte CSS aus dem Cache nehmen - Ui::themeScript() setzt das Theme aus der gespeicherten Auswahl oder – wenn keine vorliegt – aus prefers-color-scheme; global.js folgt Systemwechseln live, solange nichts manuell gewählt wurde - <meta name="color-scheme"> ergänzt, damit Formularelemente passen Der TinyMCE-API-Key entfällt: der Editor läuft immer lokal (GPL-Variante), inklusive deutscher Oberfläche, wenn die App auf Deutsch steht. Neu: tools/demo/build.py – baut aus dem Projekt eine Demo-Instanz ohne Datenbank (Stubs für Database/Auth, feste Beispieldaten). Damit lassen sich Screenshots reproduzierbar erzeugen und alle Seiten einmal rendern (Smoke-Test), ohne eine MySQL-Instanz aufzusetzen. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
parent
ba90ffef03
commit
6da46f040a
57 changed files with 1479 additions and 267 deletions
145
includes/Ui.php
Normal file
145
includes/Ui.php
Normal file
|
|
@ -0,0 +1,145 @@
|
|||
<?php
|
||||
/**
|
||||
* Gemeinsame Bausteine fuer den Seitenkopf.
|
||||
*
|
||||
* - liefert versionierte Asset-URLs (Cache-Busting nach Updates)
|
||||
* - bindet die lokal ausgelieferten Assets ein (keine externen CDNs)
|
||||
* - erzeugt die Branding-Overrides aus den Einstellungen
|
||||
*
|
||||
* Alle Methoden funktionieren auch ohne Datenbank ($db = null), damit der
|
||||
* Installer dieselbe Optik nutzen kann.
|
||||
*/
|
||||
class Ui
|
||||
{
|
||||
/** Standardwerte des Design-Systems (siehe assets/global.css). */
|
||||
public const DEFAULT_ACCENT = '#5b5bd6';
|
||||
public const DEFAULT_ACCENT_DARK = '#8b8bf5';
|
||||
public const DEFAULT_GRADIENT_FROM = '#5b5bd6';
|
||||
public const DEFAULT_GRADIENT_TO = '#8b5cf6';
|
||||
public const DEFAULT_RADIUS = 14;
|
||||
|
||||
/** Projektwurzel im Dateisystem. */
|
||||
private static function root(): string
|
||||
{
|
||||
return dirname(__DIR__);
|
||||
}
|
||||
|
||||
/**
|
||||
* URL eines Projekt-Assets inkl. Versionsstempel.
|
||||
* $base ist der Pfad zur Projektwurzel ('' im Root, '../' in /admin).
|
||||
*/
|
||||
public static function asset(string $path, string $base = ''): string
|
||||
{
|
||||
$file = self::root() . '/' . ltrim($path, '/');
|
||||
$version = is_file($file) ? (string)filemtime($file) : '0';
|
||||
|
||||
return $base . $path . '?v=' . $version;
|
||||
}
|
||||
|
||||
/** <script src> mit Versionsstempel. */
|
||||
public static function script(string $path, string $base = '', bool $defer = false): string
|
||||
{
|
||||
return '<script src="' . htmlspecialchars(self::asset($path, $base)) . '"'
|
||||
. ($defer ? ' defer' : '') . '></script>';
|
||||
}
|
||||
|
||||
/**
|
||||
* Theme-Bootstrap: gespeicherte Auswahl, sonst Systemeinstellung.
|
||||
* Muss im <head> stehen, damit nichts hell aufblitzt.
|
||||
*/
|
||||
public static function themeScript(): string
|
||||
{
|
||||
return '<script>(function(){'
|
||||
. 'var s=localStorage.getItem("theme");'
|
||||
. 'var t=s||(window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light");'
|
||||
. 'document.documentElement.setAttribute("data-theme",t);'
|
||||
. '})();</script>';
|
||||
}
|
||||
|
||||
/** Gueltige Hex-Farbe oder Fallback. */
|
||||
private static function color(?string $value, string $fallback): string
|
||||
{
|
||||
$value = trim((string)$value);
|
||||
|
||||
return preg_match('/^#[0-9a-fA-F]{6}$/', $value) ? strtolower($value) : $fallback;
|
||||
}
|
||||
|
||||
/**
|
||||
* CSS-Overrides fuer die Markenfarben. Gibt einen leeren String zurueck,
|
||||
* wenn nichts vom Standard abweicht.
|
||||
*/
|
||||
public static function brandingStyle($db = null): string
|
||||
{
|
||||
if (!$db) {
|
||||
return '';
|
||||
}
|
||||
|
||||
$accent = self::color($db->getSetting('brand_accent', ''), self::DEFAULT_ACCENT);
|
||||
$accentDark = self::color($db->getSetting('brand_accent_dark', ''), self::DEFAULT_ACCENT_DARK);
|
||||
$from = self::color($db->getSetting('brand_gradient_from', ''), self::DEFAULT_GRADIENT_FROM);
|
||||
$to = self::color($db->getSetting('brand_gradient_to', ''), self::DEFAULT_GRADIENT_TO);
|
||||
$radius = (int)$db->getSetting('brand_radius', (string)self::DEFAULT_RADIUS);
|
||||
$radius = max(0, min(28, $radius));
|
||||
|
||||
$isDefault = $accent === self::DEFAULT_ACCENT
|
||||
&& $accentDark === self::DEFAULT_ACCENT_DARK
|
||||
&& $from === self::DEFAULT_GRADIENT_FROM
|
||||
&& $to === self::DEFAULT_GRADIENT_TO
|
||||
&& $radius === self::DEFAULT_RADIUS;
|
||||
|
||||
if ($isDefault) {
|
||||
return '';
|
||||
}
|
||||
|
||||
// Abgeleitete Töne über color-mix – so genügt eine einzige Grundfarbe.
|
||||
return '<style>'
|
||||
. ':root{'
|
||||
. "--accent:{$accent};"
|
||||
. "--accent-hover:color-mix(in srgb, {$accent} 84%, #000);"
|
||||
. "--accent-soft:color-mix(in srgb, {$accent} 12%, #fff);"
|
||||
. "--accent-border:color-mix(in srgb, {$accent} 32%, #fff);"
|
||||
. "--accent-2:{$to};"
|
||||
. "--input-focus:{$accent};"
|
||||
. "--ring:0 0 0 4px color-mix(in srgb, {$accent} 22%, transparent);"
|
||||
. "--brand-gradient:linear-gradient(135deg, {$from} 0%, {$to} 100%);"
|
||||
. "--r-lg:{$radius}px;"
|
||||
. "--r-xl:" . ($radius + 6) . 'px;'
|
||||
. '}'
|
||||
. '[data-theme="dark"]{'
|
||||
. "--accent:{$accentDark};"
|
||||
. "--accent-hover:color-mix(in srgb, {$accentDark} 80%, #fff);"
|
||||
. "--accent-soft:color-mix(in srgb, {$accentDark} 20%, #0a0c11);"
|
||||
. "--accent-border:color-mix(in srgb, {$accentDark} 42%, #0a0c11);"
|
||||
. "--input-focus:{$accentDark};"
|
||||
. "--ring:0 0 0 4px color-mix(in srgb, {$accentDark} 26%, transparent);"
|
||||
. '}'
|
||||
. '</style>';
|
||||
}
|
||||
|
||||
/**
|
||||
* Kompletter Standard-Kopf: Favicon, Schrift, Icons, Design-System,
|
||||
* Theme-Bootstrap und Branding.
|
||||
*/
|
||||
public static function head($db = null, string $base = ''): string
|
||||
{
|
||||
$out = [];
|
||||
|
||||
$favicon = $db ? trim((string)$db->getSetting('favicon_url', '')) : '';
|
||||
if ($favicon !== '') {
|
||||
$out[] = '<link rel="icon" href="' . htmlspecialchars($favicon) . '">';
|
||||
}
|
||||
|
||||
$out[] = '<meta name="color-scheme" content="light dark">';
|
||||
$out[] = '<link rel="stylesheet" href="' . htmlspecialchars(self::asset('assets/vendor/inter/inter.css', $base)) . '">';
|
||||
$out[] = '<link rel="stylesheet" href="' . htmlspecialchars(self::asset('assets/vendor/fontawesome/fontawesome.css', $base)) . '">';
|
||||
$out[] = '<link rel="stylesheet" href="' . htmlspecialchars(self::asset('assets/global.css', $base)) . '">';
|
||||
$out[] = self::themeScript();
|
||||
|
||||
$branding = self::brandingStyle($db);
|
||||
if ($branding !== '') {
|
||||
$out[] = $branding;
|
||||
}
|
||||
|
||||
return implode("\n ", $out);
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue