Dieser Prompt gilt ab jetzt verbindlich für alle HTML-Dateien, die in diesem Chat aus meinen hochgeladenen PDFs erstellt werden.
Nimm jedes von mir hochgeladene PDF und erstelle daraus eine einzige, vollständige und fertige HTML-Datei.
Die HTML-Datei muss den Inhalt des jeweiligen PDFs vollständig, inhaltlich korrekt und in derselben logischen Reihenfolge wiedergeben.
Es darf kein relevanter Inhalt des PDFs verloren gehen.
Zusätzlich habe ich in diesem Chat einmalig die Datei „icon.png“ hochgeladen. Dieses Icon ist das verbindliche Favicon für alle künftig in diesem Chat erzeugten HTML-Dateien und muss direkt in jede HTML-Datei eingebettet werden.
## 1. INHALT & STRUKTUR
- Übernimm den vollständigen relevanten Inhalt des PDFs.
- Behalte die vorhandene Reihenfolge und inhaltliche Gliederung bei.
- Übernimm insbesondere:
- Überschriften
- Unterüberschriften
- Fließtext
- nummerierte Schritte
- Aufzählungen
- Hinweise
- Warnungen
- Tabellen
- Links
- Code
- Terminalbefehle
- wichtige Hervorhebungen
- Bilder und Grafiken, soweit sie zum Verständnis des Inhalts gehören
- Erfinde keine zusätzlichen Inhalte.
- Kürze keine relevanten Inhalte.
- Verändere keine fachlichen Aussagen.
- Die HTML-Datei soll inhaltlich dieselbe Anleitung darstellen wie das zugrunde liegende PDF.
- Die erste beziehungsweise zentrale Überschrift des PDFs soll als Hauptüberschrift der HTML-Seite verwendet werden.
- Die Gliederung des PDFs soll auf der HTML-Seite klar erkennbar bleiben.
## 2. SICHTBARER CODE
Wenn im PDF Programmcode, Terminalbefehle, Befehlszeilen, Konfigurationen oder andere kopierbare technische Inhalte vorkommen:
- Übernimm sie vollständig und exakt.
- Verändere den Inhalt nicht.
- Korrigiere den Inhalt nicht eigenmächtig.
- Kürze ihn nicht.
- Bewahre Zeilenumbrüche und Einrückungen.
- Stelle den Code deutlich sichtbar in einem eigenen Codebereich dar.
- Verwende eine gut lesbare Monospace-Schrift.
- Lange Codezeilen dürfen nicht abgeschnitten werden.
- Bei Bedarf muss der Codebereich horizontal scrollbar sein.
## 3. CLICK-TO-COPY
Jeder sinnvolle Codebereich beziehungsweise Terminalbefehl soll eine integrierte Kopierfunktion erhalten.
- Verwende einen deutlich sichtbaren Button mit der Beschriftung:
„Kopieren“
- Der Button muss ausschließlich den jeweiligen Code beziehungsweise Befehl kopieren.
- Verwende bevorzugt:
navigator.clipboard.writeText()
- Baue zusätzlich einen funktionierenden Fallback ein, damit das Kopieren möglichst auch beim lokalen Öffnen der HTML-Datei funktioniert.
- Nach erfolgreichem Kopieren soll der Button für etwa 2 Sekunden grün dargestellt werden.
- Während dieser Zeit soll die Beschriftung lauten:
„✓ Kopiert!“
- Danach soll automatisch wieder:
„Kopieren“
angezeigt werden.
- Der sichtbare Code darf durch die Kopierfunktion nicht verändert werden.
## 4. DESIGN
Erstelle eine moderne, klare und hochwertige HTML-Seite im zurückhaltenden Apple-Stil.
Verwende grundsätzlich:
- `-apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif`
- hellen neutralen Hintergrund
- weiße Inhaltsbereiche beziehungsweise Karten
- dezente Schatten
- abgerundete Ecken
- klare Überschriften
- harmonische Abstände
- sehr gute Lesbarkeit
- saubere optische Trennung zwischen einzelnen Themenbereichen
Die Seite soll übersichtlich und ruhig wirken.
Wichtige Informationen dürfen optisch hervorgehoben werden.
Hinweise, Warnungen und besondere Informationen sollen als passende Hinweisboxen dargestellt werden, sofern dies dem Inhalt des PDFs entspricht.
Die Gestaltung darf den Inhalt nicht verändern oder dominieren.
## 5. INTEGRIERTE ECHTZEITSUCHE
Baue oben auf der HTML-Seite eine gut sichtbare Suchfunktion ein.
Beim Eingeben eines Suchbegriffs soll die Seite sofort gefiltert werden.
Die Suche muss mindestens folgende Inhalte berücksichtigen:
- Überschriften
- Unterüberschriften
- Fließtext
- Aufzählungen
- Hinweise
- Tabelleninhalte
- Code
- Terminalbefehle
Bereiche ohne Treffer sollen ausgeblendet werden.
Die Suche muss vollständig lokal innerhalb der HTML-Datei funktionieren.
Es dürfen dafür keine externen Bibliotheken benötigt werden.
## 6. NAVIGATION
Wenn das PDF mehrere größere Kapitel oder Abschnitte enthält:
- Erstelle automatisch ein übersichtliches Inhaltsverzeichnis.
- Verwende anklickbare Sprungmarken.
- Ein Klick auf einen Eintrag soll direkt zum entsprechenden Abschnitt führen.
- Die Navigation soll übersichtlich und kompakt bleiben.
- Die Navigation muss auch auf kleinen Bildschirmen funktionieren.
## 7. LINKS
Vorhandene Weblinks aus dem PDF sollen übernommen werden.
- Links müssen anklickbar sein.
- Externe Links sollen in einem neuen Browser-Tab geöffnet werden.
- Verwende dafür:
`target="_blank" rel="noopener"`
- Verändere vorhandene Linkziele nicht eigenmächtig.
## 8. RESPONSIVE DARSTELLUNG
Die fertige HTML-Seite muss auf unterschiedlichen Bildschirmgrößen sauber funktionieren.
Insbesondere auf:
- Mac
- Windows
- Tablet
- Smartphone
Dabei gilt:
- normale Texte dürfen nicht horizontal abgeschnitten werden,
- Bilder müssen sich an die verfügbare Breite anpassen,
- Codebereiche dürfen bei Bedarf horizontal scrollbar sein,
- Tabellen müssen auf kleinen Bildschirmen sinnvoll dargestellt beziehungsweise scrollbar sein,
- Suchfeld und Navigation müssen auch auf kleinen Displays benutzbar bleiben.
## 9. BACKUP-HINWEIS
Baue ganz unten auf der HTML-Seite einen kleinen und dezenten Hinweis ein:
„Gesichert im lokalen Backup-Ordner / Dokumente / Meine Code-Zentrale“
Dieser Hinweis soll optisch zurückhaltend sein und den eigentlichen Inhalt nicht dominieren.
## 10. FAVICON – FEST IN DIE HTML-DATEI EINBETTEN
In diesem Chat wurde einmalig die Datei:
`icon.png`
hochgeladen.
Diese Datei ist das verbindliche Favicon für ALLE künftig in diesem Chat erzeugten HTML-Dateien.
Bei jeder HTML-Erstellung gilt zwingend:
- Verwende genau dieses hochgeladene `icon.png`.
- Verwende kein anderes Symbol.
- Erzeuge kein neues Ersatz-Icon.
- Verwende keine separate externe `icon.png` in der fertigen Ausgabe.
- Bette das hochgeladene Icon direkt als Base64/Data-URL in den `<head>` der HTML-Datei ein.
- Verwende dafür sinngemäß:
`<link rel="icon" type="image/png" href="data:image/png;base64,...">`
- Anstelle von `...` müssen die tatsächlichen Bilddaten des hochgeladenen `icon.png` enthalten sein.
- Das Favicon muss vollständig Bestandteil der HTML-Datei selbst sein.
- Die fertige HTML-Datei darf für das Favicon keine zusätzliche Datei benötigen.
- Wenn die HTML-Datei alleine verschoben, gespeichert oder zu Cloudflare hochgeladen wird, muss das Favicon weiterhin enthalten sein.
- Das Favicon darf nicht sichtbar innerhalb des eigentlichen Seiteninhalts erscheinen.
- Es darf nur einen maßgeblichen Favicon-Eintrag geben.
- Keine zusätzlichen PWA-, Manifest-, Apple-Touch- oder App-Regeln hinzufügen, sofern diese nicht ausdrücklich verlangt werden.
Falls das einmalig hochgeladene `icon.png` in diesem Chat nicht mehr verfügbar sein sollte, darf kein anderes Icon verwendet werden. In diesem Fall muss ich aufgefordert werden, `icon.png` erneut hochzuladen.
## 11. TECHNISCHE VORGABEN
- Verwende ausschließlich HTML, CSS und JavaScript.
- CSS muss direkt innerhalb derselben HTML-Datei enthalten sein.
- JavaScript muss direkt innerhalb derselben HTML-Datei enthalten sein.
- Verwende keine externen Frameworks.
- Verwende keine externen JavaScript-Bibliotheken.
- Verwende keine CDN-Abhängigkeiten.
- Die HTML-Datei soll möglichst vollständig offline funktionieren.
- Die HTML-Datei muss sich lokal durch Doppelklick öffnen lassen.
- Sie muss ebenfalls nach dem Hochladen auf einen normalen Webserver beziehungsweise Cloudflare funktionieren.
- Verwende sauberes und valides HTML.
- Bilder aus dem PDF sollen nach Möglichkeit direkt in die HTML-Datei eingebettet werden, wenn sie für die Anleitung benötigt werden.
- Das eingebettete Favicon muss ebenfalls vollständig innerhalb der HTML-Datei enthalten sein.
## 12. VOLLSTÄNDIGKEITSPRÜFUNG
Prüfe vor der Ausgabe sorgfältig, ob der Inhalt des zugrunde liegenden PDFs vollständig übernommen wurde.
Kontrolliere insbesondere:
- Überschriften
- Unterüberschriften
- Absätze
- Schritte
- Aufzählungen
- Tabellen
- Hinweise
- Warnungen
- Links
- Bilder
- Grafiken
- Code
- Terminalbefehle
- wichtige Hervorhebungen
Prüfe außerdem:
- Funktion der Suche
- Funktion der Navigation
- Funktion aller Kopierbuttons
- Funktion der Links
- responsive Darstellung
- lokale Nutzbarkeit
- vollständige inhaltliche Übereinstimmung mit dem PDF
- eingebettetes Favicon
- keine externe Abhängigkeit von `icon.png`
- keine doppelten Favicon-Einträge
Wenn etwas fehlt oder fehlerhaft ist, korrigiere es vor der Ausgabe.
## 13. AUSGABE
Erstelle unmittelbar aus dem hochgeladenen PDF die vollständige fertige HTML-Datei.
Die HTML-Datei muss enthalten:
- den vollständigen relevanten Inhalt des PDFs,
- HTML,
- CSS,
- JavaScript,
- Suchfunktion,
- Navigation, sofern sinnvoll,
- Kopierfunktionen für technische Inhalte,
- eingebettete Bilder, soweit erforderlich,
- das fest eingebettete Favicon aus dem einmalig hochgeladenen `icon.png`.
Keine Rückfrage, sofern keine zwingend notwendige Information fehlt.
Keine Ankündigung.
Keine Zwischenantwort.
Keine Zusammenfassung.
Die Ausgabe muss direkt als fertige HTML-Datei verwendbar sein.
## VERBINDLICHE SCHLUSSREGEL
Das jeweils hochgeladene PDF bestimmt vollständig den INHALT der erzeugten HTML-Datei.
Der Inhalt des PDFs muss vollständig und inhaltlich gleichwertig in die HTML-Datei übernommen werden.
Dieser Master-Prompt bestimmt ausschließlich die Art der technischen und optischen Umsetzung.
Das einmalig in diesem Chat hochgeladene `icon.png` wird zusätzlich bei jeder HTML-Erstellung automatisch direkt in die jeweilige HTML-Datei eingebettet.
Die fertige HTML-Datei benötigt deshalb für das Browser-Favicon keine separate Icon-Datei.