Nimm dieses hochgeladene PDF und wandle es vollständig in eine einzige, fertige und eigenständige HTML-Webseite um. Es darf kein relevanter Inhalt aus dem PDF verloren gehen. Beachte dabei folgende verbindliche Vorgaben: 1. INHALT & STRUKTUR Übernimm sämtliche relevanten Inhalte aus dem PDF vollständig. Dazu gehören insbesondere Überschriften, Unterüberschriften, Absätze, Aufzählungen, Hinweise, Tabellen, Links, Bilder und Code. Behalte die logische Reihenfolge und Gliederung des PDFs bei. Texte müssen als normaler, gut lesbarer HTML-Text umgesetzt werden und dürfen nicht lediglich als Bild dargestellt werden. Tabellen sollen als echte HTML-Tabellen umgesetzt werden, soweit dies inhaltlich sinnvoll möglich ist. Bilder und Grafiken sollen an der entsprechenden Stelle der Anleitung erscheinen. Die fertige Webseite soll möglichst vollständig in nur einer einzigen HTML-Datei funktionieren. Benötigte Bilder oder andere Ressourcen sollen nach Möglichkeit direkt in die HTML-Datei eingebettet werden. 2. SICHTBARER CODE Wenn im PDF Programmcode, Terminalbefehle, Konfigurationswerte oder ähnliche technische Inhalte vorkommen: Übernimm sie vollständig und exakt. Verändere, korrigiere, kürze oder interpretiere vorhandenen Code nicht eigenmächtig. Zeige den Code vollständig sichtbar auf der Webseite. Verwende dafür deutlich abgesetzte Codebereiche mit Monospace-Schrift. Zeilenumbrüche und Einrückungen müssen erhalten bleiben. 3. CLICK-TO-COPY Jeder kopierbare Codebereich soll eine deutlich erkennbare Kopierfunktion besitzen. Der vollständige sichtbare Code muss kopiert werden. Verwende bevorzugt navigator.clipboard.writeText(). Baue zusätzlich einen funktionierenden Fallback ein, falls die Clipboard-API beim lokalen Öffnen der HTML-Datei nicht verfügbar ist. Nach erfolgreichem Kopieren soll die Schaltfläche beziehungsweise der Kopierbereich für etwa 2 Sekunden grün dargestellt werden. Währenddessen soll deutlich „✓ Kopiert!“ angezeigt werden. Danach soll automatisch wieder die normale Darstellung erscheinen. Der sichtbare Code darf durch diese Statusanzeige nicht dauerhaft ersetzt oder verloren gehen. 4. DESIGN Erstelle ein sauberes, modernes, zurückhaltendes Design im Apple-Stil. Verwende: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif hellen, neutralen Hintergrund weiße Inhaltskarten dezente Schatten abgerundete Ecken großzügige, aber nicht übertriebene Abstände klare Überschriftenhierarchie sehr gute Lesbarkeit auf Mac, Windows, Tablet und Smartphone Codebereiche sollen: sich deutlich vom normalen Text unterscheiden, eine gut lesbare Monospace-Schrift verwenden, einen dezenten Rahmen besitzen, beim Darüberfahren mit der Maus leicht reagieren, optisch klar als kopierbarer technischer Inhalt erkennbar sein. 5. INTEGRIERTE ECHTZEITSUCHE Baue oben auf der Webseite eine gut sichtbare Suchleiste ein. Beim Tippen soll die Seite unmittelbar nach dem Suchbegriff gefiltert werden. Die Suche muss mindestens erfassen: Überschriften Fließtext Hinweise Tabelleninhalte sichtbaren Code Bereiche ohne Treffer sollen ausgeblendet werden. Die Suche muss vollständig lokal und ohne Internetverbindung funktionieren. 6. NAVIGATION Wenn das PDF mehrere größere Kapitel oder Abschnitte besitzt, erstelle zusätzlich automatisch eine übersichtliche Navigation beziehungsweise ein Inhaltsverzeichnis mit Sprungmarken. Beim Anklicken eines Eintrags soll direkt zum entsprechenden Abschnitt gesprungen werden. 7. LINKS Vorhandene Weblinks aus dem PDF sollen als anklickbare Links übernommen werden. Externe Links sollen sich sinnvollerweise in einem neuen Browser-Tab öffnen. 8. RESPONSIVE DARSTELLUNG Die HTML-Seite muss sich automatisch an unterschiedliche Bildschirmgrößen anpassen. Insbesondere: keine horizontal abgeschnittenen Texte, Codebereiche müssen bei Bedarf horizontal scrollbar sein, Tabellen müssen auf kleinen Bildschirmen sinnvoll dargestellt werden, Suchfeld und Navigation müssen auch auf dem Smartphone benutzbar bleiben. 9. BACKUP-HINWEIS Baue ganz unten auf der Webseite einen kleinen, dezenten Hinweis ein: „Gesichert im lokalen Backup-Ordner / Dokumente / Meine Code-Zentrale“ Der Hinweis soll optisch zurückhaltend sein und den eigentlichen Inhalt nicht dominieren. 10. TECHNISCHE VORGABEN Verwende ausschließlich HTML, CSS und JavaScript. CSS und JavaScript müssen direkt innerhalb derselben HTML-Datei enthalten sein. Verwende keine externen Frameworks, JavaScript-Bibliotheken oder CDN-Abhängigkeiten. Die fertige Datei muss nach Möglichkeit vollständig offline funktionieren. Verwende sauberes, valides und gut strukturiertes HTML. Die Webseite muss sich direkt durch Doppelklick auf die .html-Datei in einem normalen Browser öffnen lassen. 11. VOLLSTÄNDIGKEITSPRÜFUNG Prüfe vor der Ausgabe nochmals systematisch, ob sämtliche relevanten Inhalte des PDFs übernommen wurden. Insbesondere dürfen nicht fehlen: Überschriften Absätze Aufzählungen Tabellen Bilder Links Hinweise Code Terminalbefehle wichtige Formatierungen und Hervorhebungen 12. AUSGABE Gib ausschließlich den vollständigen fertigen HTML-, CSS- und JavaScript-Code in einem einzigen zusammenhängenden Codeblock aus. Keine zusätzlichen Erklärungen vor oder nach dem Code. Der Code muss direkt als vollständige .html-Datei gespeichert und anschließend geöffnet werden können.