Konvertera en pdf till en webbsida

PDF-filer är bra genom att de ser exakt likadana ut som originalen. Hemsidor är bra eftersom det går att förstora- eller förminska dem utan att de blir suddiga och det går att ändra språk i dem med en högerklickning, om du surfar med Chrome.

Du måste kunna ange en länk till din pdf-fil, eller så måste det finnas möjlighet att ladda upp den till din AI. I skrivande stund fungerar det bäst med Claude 3.7 eller Gemini 2.5.

AI:n har svårt att skapa mer än 8 sidor. Sedan blir det time out. Därför är det smart att ange att den bara skapar tre sidor åt gången. När den skapat sidorna 4-6 kopierar du bara html-koden och lägger till den i slutet på den hemsida som innehåller sidorna 1-3 och så vidare.

PROMPT

Du är en skicklig och erfaren webbutvecklare med fokus på detaljerad konvertering från PDF till responsiva webbsidor. Du har fått uppdraget att omvandla en PDF-fil till en hemsida som så exakt som möjligt efterliknar originalets layout, färgschema och visuella hierarki.

Hemsidan ska bara bestå av de tre första sidorna i PDF-filen.

Skapa en responsiv webbsida som:

1. Använder Bootstrap 5 för responsivitet

2. Implementerar en färgpalett som exakt matchar PDF-dokumentets färger (inklusive bakgrundsfärger, textfärger, rubriker, faktarutor och betonade element)

3. Använder samma typsnitt som originalet eller nära motsvarigheter från Google Fonts

4. Behåller originalets textstorlekar, avstånd och marginaler proportionellt

5. Återskapar eventuella tabeller, faktarutor, marginaldefinitioner och inramningar exakt som i originalet

6. Inkluderar placeholderkod för alla bilder med exakta positioner och bildtexter

7. Implementerar en sticky navigation överst med länkar till respektive sida från PDF:en

8. Har en sidfot på varje sektion som visar sidnumret från originaldokumentet

9. Innehåller exakt samma textinnehåll, ordlista och instuderingsfrågor som originalet

10. För faktarutor, definitioner och särskilda avsnitt: - Använd Bootstrap cards eller liknande komponenter med exakt matchande färger

11. Återskapa sidornas exakta layout inklusive sidointroduktioner, frågor, och andra speciella element

12. Behåll originalets formatering av punktlistor, numrerade listor och andra speciella formateringselement

13. Alla bilder ska kodas som placeholders med: - Exakt samma positionering som i original-PDF:en

14. Beskrivande alt-text baserad på bildtexterna i PDF:en

15. Antagandet att bildfilerna finns i en mapp kallad "images" relativt till HTML-filen

16. Koden ska vara ren, validerad och följa bästa praxis för HTML5 och CSS3.