Prompt: Sports Car Website

sportscarweb.md

Here the full prompt used:

Create a stunning, modern sports-car showcase website as a SINGLE self-contained HTML file (one page) with embedded CSS and JavaScript. Output ONLY the final HTML.

HARD REQUIREMENTS

• Single file: index.html only. No external files.

• Use ONLY vanilla HTML/CSS/JS (no frameworks).

• The design must look premium and modern (like a top-tier automotive brand).

• MUST load high-quality car images FROM THE WEB (hotlink). Use stable sources and include at least 10 images.

Prefer Unsplash “source” URLs with specific queries so it works without API keys:

Examples:

https://source.unsplash.com/1600x900/?sports-car

https://source.unsplash.com/1600x900/?supercar

https://source.unsplash.com/1600x900/?porsche

https://source.unsplash.com/1600x900/?ferrari

https://source.unsplash.com/1600x900/?lamborghini

https://source.unsplash.com/1600x900/?mclaren

https://source.unsplash.com/1600x900/?aston-martin

https://source.unsplash.com/1600x900/?bugatti

https://source.unsplash.com/1600x900/?track-car

Also include a fallback strategy: if an image fails to load, swap to a different query URL and show a subtle placeholder shimmer while loading.

• Must be responsive: great on mobile and desktop.

• Accessibility: semantic sections, aria labels for controls, focus states, reduced-motion support.

• Performance: lazy-load images, avoid layout shifts, requestAnimationFrame for animations.

SITE CONTENT + SECTIONS (one page)

1. Hero section

• Full-bleed cinematic hero with a background car image (web URL).

• Bold headline: “Modern Sports Car Showcase”

• Subheadline and a primary CTA button (“Explore the Fleet”) that smooth-scrolls.

• A subtle animated “speed line” or parallax effect (disable if prefers-reduced-motion).

2. Sticky navigation

• Transparent-to-solid on scroll.

• Links: Fleet, Highlights, Comparison, Gallery, Specs, Reviews, FAQ

• Mobile hamburger menu with slide-in drawer.

3. “Fleet” section

• Card grid (at least 6 cars) with web images.

• Each card: name, short tagline, 0–100 km/h, horsepower, drivetrain, top speed, price “from”.

• Clicking a card opens a modal with more photos (carousel), details, and a “Compare” toggle.

4. Highlights section

• 3–5 feature blocks with icons drawn as inline SVG (no external icon libs).

• Include a micro-interaction on hover (tilt, glow, or animated underline).

5. Comparison section

• Interactive comparison table for 3 selected cars.

• Ability to pick cars from dropdowns (populated from the fleet data).

• Visual bars for horsepower and 0–100 time.

• A “Share comparison” button that generates a URL hash or query string with selected cars and updates state on load.

6. Gallery section

• Masonry-like responsive gallery (no library). Use CSS columns or grid tricks.

• Lightbox overlay with keyboard navigation (left/right/esc).

7. Specs section

• Animated counters (e.g., horsepower range, top speed range) and a small interactive chart built with pure canvas (no libs):

• Simple line chart: “Power vs Weight (illustrative)” using the fleet dataset.

• Tooltips on hover.

8. Reviews section

• Carousel of testimonial cards (fake but realistic), auto-advancing, pausable.

• Star ratings as SVG.

9. FAQ section

• Accessible accordion components.

10. Footer

• Newsletter form with validation (no backend; just UX).

• Social links (placeholders).

DATA MODEL

• Create a JS array of car objects (at least 8) with realistic-ish specs:

{ id, name, brand, imageUrls:[...], zeroToHundred, hp, torqueNm, drivetrain, topSpeed, weightKg, priceEur, description }

• Use the data to populate fleet cards, comparison, chart, and gallery.

DESIGN SYSTEM

• Use a dark, luxurious theme (near-black background) with one accent color.

• Typography: system fonts with good fallbacks; use letter-spacing, big headings.

• Use glassmorphism / blurred panels sparingly.

• Add subtle grain overlay (CSS) for texture.

• Use smooth scrolling and tasteful animations.

ENGINEERING NOTES

• Implement smooth-scroll with JS; highlight current nav section using IntersectionObserver.

• Add image preloading for hero and modal carousel; lazy load others.

• Add robust event handling and cleanup for modals/lightbox.

• Don’t use external JS/CSS libraries.

OUTPUT

• Provide only one HTML document in the answer.

• Include clear comments inside the HTML explaining key parts.