Complete Prompt for Sports Car Showcase Website + flux2.c skill

webcarsflux2.md

Web Sports Car

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

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
• 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
• Ken Burns zoom animation, vignette overlay, gradient overlay for text readability
• Floating particle effect, parallax on scroll (disable if prefers-reduced-motion)
• Pulsing glow effect on CTA button hover

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 10 cars) with web images
• Each card: name, short tagline, 0-100 km/h, horsepower, top speed, price "from"
• Clicking a card opens a modal with more photos (carousel), details

4. Highlights section

• 4 feature blocks with inline SVG icons
• Hover effect with tilt and glow

5. Comparison section

• Interactive comparison table for 3 selected cars
• Dropdowns populated from fleet data
• Visual bars for horsepower and 0-100 time
• "Share comparison" button that generates URL with query params

6. Gallery section

• Masonry-like responsive gallery using CSS columns
• Lightbox overlay with keyboard navigation (left/right/esc)
• Include interior shots and environment shots (city, snow, seaside, track)

7. Specs section

• Animated counters (horsepower, top speed range, average price, model count)
• Interactive canvas chart: "Power vs Weight" with 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 email validation
• Social links (placeholders)

DATA MODEL

Create a JS array of car objects (at least 10) with realistic specs: { id, name, brand, imageUrls:[...], zeroToHundred, hp, torqueNm, drivetrain, topSpeed, weightKg, priceEur, description }

Example cars: Ferrari SF90, Porsche 911 GT3 RS, McLaren 720S, Lamborghini Huracan STO, Aston Martin DB12, Nissan GT-R, BMW M4 Competition, Mercedes-AMG GT Black Series, Toyota Supra, Audi R8 V10

DESIGN SYSTEM

• Dark luxurious theme (near-black background #0a0a0a)
• Accent color: #ff3c00 (vibrant orange-red)
• Glassmorphism panels
• Grain overlay (CSS noise texture)
• System fonts with good fallbacks
• Big headings, letter-spacing

ENGINEERING NOTES

• Implement smooth-scroll with JS
• Highlight current nav section using IntersectionObserver
• Lazy load images (loading="lazy")
• Robust event handling for modals/lightbox
• prefers-reduced-motion support

OUTPUT

Provide only one HTML document. Include clear comments explaining key parts.

Generate 10 car images (512x512, steps 4) for the website using flux2 image skill:

• Hero: cinematic dark moody supercar (1792x1792)
• 10 cars: Ferrari SF90, Porsche 911 GT3 RS, McLaren 720S, Lamborghini Huracan STO, Aston Martin DB12, Nissan GT-R, BMW M4, Mercedes-AMG GT Black Series, Toyota Supra, Audi R8
• 4 interiors: cockpit views
• 4 environments: city at night, snowy mountains, coastal sunset, racetrack