qciganoandClaude Sonnet 5
4aee6c7b98
Die Icons/Manifeste waren schon vorbereitet, aber es gab keinen echten Weg, die Installation auch zu STARTEN, ohne das kleine, leicht zu übersehende Icon im Browser selbst zu suchen. Jetzt: - Ein Service Worker (public/sw.js) ist Voraussetzung dafür, dass Browser die Seite überhaupt als "installierbare App" erkennen. Bewusst minimal gehalten: strikt "network-first" — bei bestehender Verbindung wird IMMER zuerst das echte Netzwerk gefragt, der Cache dient nur als Rückfalllösung, wenn wirklich keine Verbindung besteht. Dadurch besteht KEIN Risiko, dass der Adminbereich veraltete Inhalte zeigt, während man online ist — als Bonus funktionieren bereits besuchte Seiten aber auch kurz offline (mit echtem Offline-Test geprüft). - Neuer "Installieren"-Button direkt in der Kopfzeile (Hauptseite) bzw. unten rechts (Adminbereich) — erscheint automatisch, sobald der Browser eine Installation wirklich anbietet, verschwindet danach wieder bzw. bleibt komplett versteckt, wenn schon als App installiert. Ein Klick reicht, kein Suchen im Browser-Menü mehr nötig. - Beide Bereiche (Hauptseite + Admin) nutzen dieselben, bereits vorhandenen Logo-Icons/Manifeste — landet also mit dem echten VanVan-Logo auf dem Startbildschirm/Desktop. Co-Authored-By: Claude Sonnet 5 <[email protected]>
133 lines
6.5 KiB
HTML
133 lines
6.5 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<meta name="robots" content="noindex" />
|
||
<title>Van's DIY & Bastelbedarf – Admin</title>
|
||
<link rel="icon" type="image/x-icon" href="/favicon.ico" sizes="any" />
|
||
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
|
||
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
|
||
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
|
||
<link rel="manifest" href="/admin/manifest.webmanifest" />
|
||
<meta name="theme-color" content="#0a0910" />
|
||
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fraunces:opsz,[email protected],500;9..144,600;9..144,700&display=swap" rel="stylesheet" />
|
||
<style>
|
||
/* Sveltia CMS optisch an die eigentliche Website angepasst — nutzt Sveltias eigenes
|
||
CSS-Variablen-Theming-System (--sui-*, "Sveltia UI"), keine geratenen internen
|
||
Klassennamen. Das ist zwar nirgends offiziell als öffentliche Theming-API dokumentiert,
|
||
aber es sind echte, durchgängig im ganzen Sveltia-Interface verwendete Design-Tokens —
|
||
deutlich robuster als CSS gegen zufällige Klassennamen zu schreiben. Falls ein
|
||
künftiges Sveltia-Update diese Variablennamen ändert, fällt die Oberfläche einfach
|
||
wieder auf ihr Standard-Blau zurück statt kaputtzugehen.
|
||
*/
|
||
/* !important nötig: Sveltia hängt sein eigenes Stylesheet erst NACH dieser Seite ein,
|
||
gewinnt also bei gleicher Spezifität normalerweise die Kaskade. Mit !important setzt
|
||
sich unsere Optik trotzdem zuverlässig durch, unabhängig von der Ladereihenfolge. */
|
||
:root {
|
||
/* Schiebt alle neutralen Grautöne/Ränder der Oberfläche Richtung Lila — wie der
|
||
Rest der Seite (statt Sveltias Standard-Blaugrau). */
|
||
--sui-base-hue: 248 !important;
|
||
|
||
/* Mischung aus Lila und Babyblau statt einer einzelnen Akzentfarbe: der normale Zustand
|
||
(Buttons, aktive Felder, Links) ist babyblau, Hover-/Fokus-/Auswahl-Zustände (die den
|
||
"-dark"-Ton nutzen) kippen ins Lila (der gleiche Violett-Ton wie die Verlaufsränder auf
|
||
der eigentlichen Website) — dadurch entsteht überall im Interface ein echter Farbmix,
|
||
nicht nur eine Einzelfarbe. */
|
||
--sui-primary-accent-color: #8ec9f0 !important;
|
||
--sui-primary-accent-color-light: #b9e0fa !important;
|
||
--sui-primary-accent-color-dark: #9b7fd6 !important;
|
||
--sui-primary-accent-color-text: #8ec9f0 !important;
|
||
--sui-primary-accent-color-inverted: #0a0910 !important;
|
||
--sui-primary-accent-color-translucent: rgba(155, 127, 214, 0.45) !important;
|
||
--sui-primary-accent-color-translucent-light: rgba(142, 201, 240, 0.3) !important;
|
||
|
||
/* Gleiche Schriftart wie der Rest der Seite statt Sveltias Standardschrift. */
|
||
--sui-font-family-default: "Inter", system-ui, sans-serif !important;
|
||
}
|
||
|
||
/* Zahlenfelder ohne die klobigen Auf/Ab-Pfeile — dezenter, aufgeräumter. */
|
||
input[type="number"]::-webkit-outer-spin-button,
|
||
input[type="number"]::-webkit-inner-spin-button {
|
||
-webkit-appearance: none;
|
||
margin: 0;
|
||
}
|
||
input[type="number"] {
|
||
-moz-appearance: textfield;
|
||
}
|
||
|
||
/* Überschriften mit derselben edlen Serifenschrift wie auf der eigentlichen Website
|
||
(dort --font-head: Fraunces) statt der Standard-Sans-Serif — Sveltia selbst bietet dafür
|
||
kein eigenes CSS-Token, deshalb hier über die stabilen, semantischen HTML-Tags gesetzt
|
||
statt über interne Klassennamen (bleibt robust, auch wenn sich Sveltias Aufbau ändert). */
|
||
h1, h2, h3 {
|
||
font-family: "Fraunces", "Playfair Display", Georgia, serif !important;
|
||
}
|
||
|
||
/* Schwebender "Installieren"-Button — nur sichtbar, wenn der Browser eine Installation
|
||
wirklich anbietet (siehe Script unten). position:fixed statt normaler Dokumentfluss,
|
||
damit er unabhängig davon funktioniert, wie Sveltia sein eigenes UI in <body> aufbaut. */
|
||
#install-btn {
|
||
display: none;
|
||
position: fixed;
|
||
bottom: 1.2rem;
|
||
right: 1.2rem;
|
||
z-index: 9999;
|
||
align-items: center;
|
||
gap: 0.5em;
|
||
padding: 0.7em 1.1em;
|
||
border-radius: 999px;
|
||
background: linear-gradient(135deg, #9b7fd6, #2e1b47);
|
||
border: 1px solid rgba(155, 127, 214, 0.6);
|
||
color: #f4f1f7;
|
||
font-family: "Inter", system-ui, sans-serif;
|
||
font-size: 0.88rem;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.55);
|
||
}
|
||
#install-btn:hover { filter: brightness(1.1); }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- Sveltia CMS: quelloffen (MIT), läuft komplett im Browser, bearbeitet die Inhalte
|
||
direkt im GitHub-Repo. Kein eigener Server nötig — siehe config.yml für die
|
||
Feld-Definitionen (Produkte, Kategorien). -->
|
||
<script src="https://unpkg.com/@sveltia/cms/dist/sveltia-cms.js"></script>
|
||
|
||
<button type="button" id="install-btn" title="Admin als App installieren">⬇️ Installieren</button>
|
||
<script>
|
||
// Gleiches Prinzip wie auf der Hauptseite: Button nur zeigen, wenn der Browser die
|
||
// Installation wirklich anbietet, und nicht mehr, sobald bereits als App installiert.
|
||
(function () {
|
||
var btn = document.getElementById("install-btn");
|
||
var laeuftBereitsAlsApp = window.matchMedia("(display-mode: standalone)").matches;
|
||
var promptEvent = null;
|
||
if (!laeuftBereitsAlsApp) {
|
||
window.addEventListener("beforeinstallprompt", function (e) {
|
||
e.preventDefault();
|
||
promptEvent = e;
|
||
btn.style.display = "flex";
|
||
});
|
||
}
|
||
btn.addEventListener("click", function () {
|
||
if (!promptEvent) return;
|
||
btn.style.display = "none";
|
||
promptEvent.prompt();
|
||
promptEvent.userChoice.then(function () { promptEvent = null; });
|
||
});
|
||
window.addEventListener("appinstalled", function () {
|
||
btn.style.display = "none";
|
||
});
|
||
if ("serviceWorker" in navigator) {
|
||
window.addEventListener("load", function () {
|
||
navigator.serviceWorker.register("/sw.js").catch(function () {});
|
||
});
|
||
}
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|