Publicado en produccióna3f9c2e
HTML + CSSToasts

Toast mit Deploy-Terminal

Ein Terminalfenster schreibt das Release-Log Zeile für Zeile und endet mit Zusammenfassung, Commit-Hash und einem Button zum Öffnen.

Einstellungen

16px
1x

Code

<div class="uvq09-dpl"><button type="button" class="fire">Erneut deployen</button><div class="tt" role="status"><div class="bar" aria-hidden="true"><i></i><i></i><i></i><span>deploy · zsh</span></div><ol class="lg" aria-hidden="true"><li style="--i:0"><em>$</em> git push origin main</li><li style="--i:1">48 Seiten werden gebaut</li><li style="--i:2">Upload in 12 Regionen</li><li class="ok" style="--i:3">Fertig in 8,4 s</li></ol><div class="ft"><span class="ck" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></span><b>In Produktion veröffentlicht</b><code>a3f9c2e</code><button type="button" class="op">Öffnen</button></div></div></div>

Prompt für KI

Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.

Markdown-Version mit dem ganzen Code, für KI-Assistenten

Mehr aus Toasts

Alle ansehen: Toasts

Wofür du ihn nutzen kannst

Entwicklertools sprechen Terminal, also liest sich ein Deploy-Hinweis gut als eins. Ein dunkles Fenster mit den drei Ampelpunkten zeigt Push, Build und Upload Zeile für Zeile mit gestaffelten CSS-Verzögerungen, danach blinkt ein Cursor hinter dem letzten Häkchen und eine Fußzeile mit dem Ergebnis gleitet herein. Passend für CI-Dashboards, Hosting-Panels und interne Release-Tools.

Die Hauptfarbe ist das Erfolgsgrün, die zweite gilt für Prompt und Commit-Badge. Passe die Logzeilen an deine Pipeline an, halte sie kurz genug für eine Reihe und verlinke den Button Öffnen mit der Live-Adresse.