Nimm dieses hochgeladene Textdokument und erstelle daraus eine einzige, fertige HTML-Datei.
Beachte dabei folgende verbindliche Vorgaben:
1. Übernimm den vollständigen Text des Dokuments in der vorhandenen Reihenfolge.
2. Die erste Überschrift des Dokuments soll oben auf der HTML-Seite sichtbar dargestellt werden.
3. Diese Überschrift darf NICHT Bestandteil des kopierbaren Textbereichs sein und darf beim Betätigen des Copy-Buttons nicht mitkopiert werden.
4. Unterhalb der Überschrift soll ein deutlich sichtbarer Button mit der Beschriftung:
„Text kopieren“
angezeigt werden.
5. Der Copy-Button soll ausschließlich den gesamten Text unterhalb der ersten Überschrift kopieren.
6. Der kopierte Text muss exakt beim ersten Absatz nach der Überschrift beginnen und vollständig bis zum Ende des Dokuments reichen.
7. Nach erfolgreichem Kopieren soll der Button für etwa 2 Sekunden grün dargestellt werden und den Text:
„✓ Kopiert!“
anzeigen. Danach soll automatisch wieder „Text kopieren“ erscheinen.
8. Verwende bevorzugt navigator.clipboard.writeText() und zusätzlich einen funktionierenden Fallback für das lokale Öffnen der HTML-Datei.
9. Der Text soll als ein durchgehender, gut lesbarer Textbereich dargestellt werden.
10. Erstelle keine einzelnen Karten, Boxen oder separaten Inhaltsblöcke.
11. Absätze, Leerzeilen und Aufzählungen aus dem Ausgangsdokument sollen erhalten bleiben. Es dürfen jedoch keine zusätzlichen Leerzeilen oder künstlich vergrößerten Abstände zwischen den Absätzen erzeugt werden. Jeder Absatzwechsel des Ausgangsdokuments darf in der HTML-Datei nur einmal übernommen werden. Vorhandene Leerzeilen bleiben erhalten, werden aber nicht vervielfacht.
12. Verwende ein sauberes, schlichtes Design mit:
- weißem Hintergrund,
- gut lesbarer Systemschrift,
- angemessener Schriftgröße,
- großzügigen Abständen,
- responsiver Darstellung für Mac, Windows, Tablet und Smartphone.
Der normale Textbereich soll kompakt dargestellt werden. Verwende für Fließtext eine Zeilenhöhe von ungefähr 1,5 und füge zwischen normalen Textzeilen beziehungsweise Absätzen keine zusätzlichen CSS-Abstände ein.
13. Verwende ausschließlich HTML, CSS und JavaScript.
14. CSS und JavaScript müssen vollständig in derselben HTML-Datei enthalten sein.
15. Es dürfen keine externen Frameworks, Bibliotheken oder CDN-Abhängigkeiten verwendet werden.
16. Die HTML-Datei muss vollständig offline funktionieren und sich durch Doppelklick direkt im Browser öffnen lassen.
17. Prüfe vor der Ausgabe ausdrücklich:
- Die Überschrift ist sichtbar.
- Die Überschrift liegt außerhalb des kopierbaren Bereichs.
- Der Copy-Button kopiert die Überschrift nicht.
- Der gesamte restliche Text wird vollständig kopiert.
- Der Button zeigt nach erfolgreichem Kopieren „✓ Kopiert!“ an.
Erstelle anschließend direkt die fertige .html-Datei.
ZUSATZ – FAVICON
Das einmalig in diesem Chat hochgeladene „icon.png“ ist bei jeder zukünftigen PDF→HTML-Erstellung als Browser-Favicon zu verwenden.
Bette ausschließlich dieses Icon direkt als Base64/Data-URL im <head> der erzeugten HTML-Datei ein:
<link rel="icon" type="image/png" href="data:image/png;base64,...">
Die tatsächlichen Bilddaten von „icon.png“ müssen anstelle von „...“ vollständig eingebettet werden.
Die fertige HTML-Datei darf für das Favicon keine separate Datei benötigen.
WICHTIG:
Durch diese Ergänzung darf an KEINER anderen Vorgabe des bestehenden Master-Prompts etwas verändert werden. Inhalt, Aufbau, Design, Farben, Abstände, Suche, Navigation, Codebereiche, Copy-Funktionen und sämtliche bisherige HTML-Darstellung bleiben exakt so, wie sie durch den ursprünglichen Master-Prompt festgelegt sind.