html-slideshow

Was macht html-slideshow?

Eine responsive Slideshow, gebündelt in einer einzigen, selbstständigen, minifizierten .html. Autor erstellen Folien in HTML; die Engine (assets/base.css + base.js) plus ein Bun-Build produzieren die finale Datei. Erfordert Bun.

Arbeitsablauf

1. Laufzeit prüfen — bun --version (bei Bedarf von bun.sh installieren; getestet mit Version 1.4.0).
2. Vorlage kopieren — assets/base.html, assets/base.css und assets/base.js in einen Deck-Ordner im Arbeitsbereich des Benutzers kopieren (nebeneinander). Die .html kann frei umbenannt werden (z.B. my-deck.html); base.css und base.js werden relativ von der .html referenziert, daher erfordert eine Umbenennung die Aktualisierung dieser Referenzen.
3. Titel setzen — in der .html <title> bearbeiten. Der Deck wird standardmäßig dunkel dargestellt; beim Drucken wird automatisch auf eine erzwungene helle Farbpalette umgeschaltet.
4. Folien hinzufügen — in <main id="deck"> eine <section class="slide"> pro Folie:

   <section class="slide">
     <h2>Quartalsergebnisse</h2>
     <ul><li>Umsatz um 24 % gestiegen</li></ul>
   </section>
   

5. Eigenes CSS/JS — nur verlinkte Dateien, niemals inline. Fügen Sie keine <style>- oder <script>-Blöcke in die .html ein – sie enthält nur das Seiten- Gerüst und den Folieninhalt; der Build fügt die verlinkten Dateien in die endgültige selbstständige Datei ein – so bleibt die Quelle bearbeitbar und die Engine eine Einzelquelle. Zwei zulässige Orte für eigenen Code: base.css / base.js direkt bearbeiten oder – für deck-spezifische Gestaltung/Logik getrennt von der Engine – <link rel="stylesheet" href="extra.css"> / <script src="extra.js" defer></script> hinzufügen (der Build fügt sie inline ein; lassen Sie base.* möglichst unverändert – siehe references/bundling-assets.md). (Rezepte in references/slide-patterns.md folgen diesem Prinzip.)
6. Größe mit Container-Einheiten – niemals px. Jede Folie ist ein CSS-Query-Container, verwenden Sie daher cqw/cqh/cqmin und clamp() – der Inhalt skaliert auf jeden Bildschirm. px/pt zerstören die Responsivität – verwenden Sie sie nicht (der äußere Rahmen nutzt svh). Dies ist die Regel, die Agenten am häufigsten falsch umsetzen; eine vollständige Anleitung finden Sie in references/responsive-units.md. Hochformat-Viewports werden automatisch behandelt: Folien werden auf ihrer Querformat- Leinwand gerendert und passend skaliert, sodass breite Tabellen/Gitter nie auf einem Telefonbildschirm überlaufen (--slide-w/--slide-h auf :root, Standard 16/9).
7. Build — Build-Skript des Skills ausführen: bun scripts/build.js my-deck.html (ruft intern bun build --compile --target=browser --minify my-deck.html --outdir dist auf; läuft auf jedem Betriebssystem, das Bun unterstützt) → dist/my-deck.html: eine einzelne, minifizierte, selbstständige Datei mit inline eingefügtem CSS, JS und allen referenzierten Assets. Dies ist die Datei, die Sie verteilen.
8. Erstellte Datei prüfen in einem Browser-Tool (eine file://-URL zu dist/my-deck.html). Bestanden: Steuerelemente werden gerendert; Pfeil-rechts erhöht den Zähler auf „2 / N“ und setzt location.hash auf #2; ein ~400×800-Viewport zeigt immer noch eine vollständig sichtbare, letterbox-gestaltete Folie; O schaltet die Übersicht um; die Druckmedienemulation ergibt eine Folie pro Seite. Signale sind in references/using-the-deck.md dokumentiert. Wenn kein Browser-Tool verfügbar ist, geben Sie an, dass die visuelle Prüfung übersprungen wurde.
9. Aufräumen — es wird nichts außer der Build-Ausgabe erstellt; behalten Sie my-deck.html, base.css und base.js (die bearbeitbare Quelle) neben dist/my-deck.html (die Datei, die Sie verteilen). Wenn der Benutzer nur die eine Datei möchte, verschieben Sie dist/my-deck.html dorthin, wo der Deck erwartet wird, und behalten Sie den Deck-Ordner als Quelle.

Referenzindex

Auf Abruf laden – nicht alles auf einmal:

• references/using-the-deck.md — Einrichtung, der Folienvertrag, vollständige Navigation, Deep-Links (#5 öffnet Folie 5; #some-id öffnet die Folie mit dieser ID; für Zitate → Quellen), der Build und Druck.
• references/slide-patterns.md — fertige Folienrezepte + Erstellungshinweise.
• references/responsive-units.md — die Anleitung zur flüssigen Größenanpassung ohne px.
• references/bundling-assets.md — Inline-SVG-/Daten-URI-Assets (der Build fügt auch relative Referenzen inline ein).
• references/engine-anatomy.md — Aufbau der Engine (base.html/base.css/ base.js) für Änderungen daran.
• examples/quickstart.html — ein ausgefüllter Deck (Quelle; bauen Sie ihn für eine selbstständige Datei).
• examples/README.md — die beiden Formen des Beispiel-Decks (lesbare Quelle vs. erstellte Standalone-Datei) und wie die Standalone nach Bearbeitungen neu erstellt wird.

Wann verwenden

Wenn die Ausgabe einen ganzen Bildschirm auf einmal zeigen soll: ein Vortrag, eine Lektion, eine Demo, ein Statusupdate oder ein Pitch. Nicht für fortlaufenden Text oder Dokumente.