Files
perinco-CRM/index.html
T
Sascha WolfandClaude Opus 5 8403f1c39d feat(ui): vierte Farbwelt "Cyberpunk" in hell und dunkel
Neon in der Nacht: fast schwarze Flaechen mit blauem Stich, violettes
Leuchten, Blaustahl statt Neutralgrau und Kanten von 2 px - scharf genug
fuer HUD-Elemente, aber nicht eckig, das ist schon Pixel Art. Schatten
sind hier kein Schatten, sondern ein Schein: farbige Kontur plus weicher
Halo in der Markenfarbe. Schrift ist Chakra Petch, die Feldbeschriftungen
laufen gesperrt.

Der Akzent ist bewusst Violett und nicht Neon-Cyan: auf brand-500 und
brand-600 steht 69 Mal weisse Schrift, und auf Cyan waere die nicht zu
lesen. Cyan sitzt deshalb nur in --color-brand-accent und in den
Statusfarben, wo dunkler Text darauf steht.

Der helle Modus ist der Konzern bei Tageslicht: kuehles Blaugrau, dasselbe
Violett nur dunkler, und aus dem Leuchten wird ein knapper kalter Schatten -
ein Halo auf hellem Grund sieht nach Fehler aus, nicht nach Neon.

Es waren vier Zeilen ausserhalb von index.css: die Whitelist in
userFields.js, die Liste in src/types.ts mit ihrer Beschriftung, die
Whitelist im Inline-Skript und die Schrift im Google-Fonts-Aufruf. Keine
Komponente wurde angefasst.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-09-09 13:47:08 +02:00

55 lines
2.6 KiB
HTML

<!doctype html>
<html lang="de" class="h-full">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="robots" content="noindex, nofollow" />
<title>perinco CRM</title>
<script>
// Setzt Design und Modus vor dem ersten Frame - ohne das blitzt beim Laden
// die helle perinco-Variante auf, weil das Bundle erst danach laeuft.
//
// Die verbindliche Wahl steht am Benutzer in der Datenbank; hier liegt nur
// die zuletzt benutzte als Zwischenspeicher, denn vor dem ersten Frame ist
// noch niemand angemeldet. Melden sich zwei Benutzer an demselben Rechner
// an, sieht der zweite fuer einen Moment das Design des ersten und dann
// sein eigenes - das ist der Preis dafuer, dass es gar nicht blitzt.
(function () {
try {
var mode = localStorage.getItem('perinco_crm_theme');
var dark =
mode === 'dark' ||
(mode !== 'light' && window.matchMedia('(prefers-color-scheme: dark)').matches);
if (dark) document.documentElement.classList.add('dark');
document.documentElement.style.colorScheme = dark ? 'dark' : 'light';
var palette = localStorage.getItem('perinco_crm_palette');
// Whitelist, damit ein manipulierter Eintrag keine Klasse setzt.
if (palette === 'pixel' || palette === 'outdoor' || palette === 'cyberpunk') {
document.documentElement.classList.add('theme-' + palette);
}
} catch (e) {
/* localStorage gesperrt - dann eben im hellen perinco-Design starten */
}
})();
</script>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<!--
Nunito Sans traegt perinco und Pixel Art (Fliesstext), Cabin das Outdoor-
Design, Silkscreen die Ueberschriften von Pixel Art, Chakra Petch das
Cyberpunk-Design. Alle in einer Anfrage: ein Nachladen beim Umschalten
wuerde die Schrift sichtbar springen lassen.
-->
<link
href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,300;0,6..12,400;0,6..12,600;0,6..12,700;0,6..12,800&family=Cabin:wght@400;500;600;700&family=Silkscreen:wght@400;700&family=Chakra+Petch:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
</head>
<body class="h-full">
<div id="root" class="h-full"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>