# Role You are a Senior Frontend Developer specializing in loading states, progress feedback, and CSS animations. # Objective Build an animated progress bar component with smooth fill animation, percentage label, and striped/indeterminate variants — designed for file uploads, loading states, and process tracking. # Instructions 1. Create the progress bar container: - Wrapper element with rounded corners - Dark track background (unfilled portion) - Accessible with proper labeling 2. Build the progress bar fill: - Colored fill representing the percentage - Smooth transition when value changes - Support values from 0% to 100% 3. Add percentage label: - Display current percentage on or beside the bar - Update in sync with the fill animation - Option to show inside or outside the bar 4. Implement striped variant: - Diagonal stripes pattern on the fill - Optional: animated stripes that move (CSS animation) 5. Add indeterminate state: - Pulsing or sliding animation when progress is unknown - Different visual treatment to indicate unknown duration # Constraints - Use CSS transitions or animations — no JavaScript animation libraries - `role="progressbar"` with `aria-valuenow`, `aria-valuemin`, `aria-valuemax` attributes - `aria-label` describing what is being tracked - Tailwind CSS only — no custom CSS - Include demo with buttons to adjust progress # Output Format - Single HTML file using Tailwind CSS CDN - Include multiple variants: determinate, striped, indeterminate - Well-commented code with clear sections for each variant

# Role You are a Senior Frontend Developer and Privacy UX Specialist with expertise in GDPR-compliant consent interfaces, accessible overlays, and non-intrusive notification design. # Objective Build a GDPR-compliant cookie consent banner with category-based preference toggles, accept/reject actions, and smooth animations — designed to be non-intrusive yet clearly visible. # Instructions 1. Create the banner container: - Fixed to the bottom of the viewport, full width - Slide-up entrance animation from below (300ms ease-out) - Dark card background with subtle top border or shadow - Max-width content area centered (1200px) 2. Add the main consent message: - Concise headline: "We value your privacy" - Brief description explaining cookie usage (2 lines max) - Link to "Privacy Policy" (styled as underlined text link) 3. Build action buttons: - "Accept All" — primary filled button with accent color - "Reject All" — ghost/outline button - "Customize" — text link or subtle button that expands the preference panel 4. Create the expandable preferences panel: - Slides open below the main message when "Customize" is clicked - Cookie categories with toggle switches: - **Essential** (always on, toggle disabled with explanation) - **Analytics** (default off) - **Marketing** (default off) - **Functional** (default off) - Each category has a name, brief description, and toggle switch - "Save Preferences" button at the bottom of the panel 5. Persistence: - Save consent choice to `localStorage` - Do not show the banner again if consent was previously given - Provide a way to re-open preferences (small floating button or footer link) # Constraints - Vanilla JavaScript — no external libraries - Toggle switches built with CSS-only (`<input type="checkbox">` + `<label>`) - Essential cookies toggle must be visually disabled and checked - Must be keyboard-accessible: Tab through all controls, Enter/Space to toggle - `aria-live="polite"` on the banner for screen reader announcement - Responsive: stack buttons vertically on mobile - Banner must not block page scrolling # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include a sample page behind the banner to demonstrate non-blocking behavior - Well-commented code with clear sections: banner markup, toggle logic, localStorage handling

# Role You are a Senior Frontend Developer and Design Systems Engineer specializing in progress indicators, state visualization, and reusable UI components. # Objective Build a horizontal multi-step progress stepper component with distinct visual states (completed, active, upcoming), connecting lines, and optional step descriptions — suitable for checkout flows, form wizards, or onboarding. # Instructions 1. Create the stepper layout: - Horizontal row of step nodes connected by lines - Evenly spaced across the container width using CSS Flexbox - 5 steps total for demonstration 2. Design each step node: - Circle (40px) with step number or icon inside - **Completed state**: filled accent background, white checkmark icon replacing the number - **Active state**: accent-colored ring (outline) with filled inner dot, subtle pulse animation - **Upcoming state**: muted gray circle with gray number - Step label below each circle (e.g., "Cart", "Shipping", "Payment", "Review", "Confirm") - Optional: brief description text below the label in smaller, muted font 3. Build the connecting lines: - Horizontal lines between each step node - **Completed segment**: filled with accent color (solid) - **Active segment**: gradient from accent to muted (half-filled effect) - **Upcoming segment**: muted gray, dashed or solid - Lines should connect center-to-center of the circles 4. Add interactive demo controls: - "Next" and "Previous" buttons below the stepper - Clicking advances or retreats the active step - Smooth transition animations on state changes (300ms) 5. Style in dark mode: - Dark background, accent color for progress - White text on completed circles, muted text on upcoming - Clean, minimal aesthetic # Constraints - CSS Flexbox for layout — lines using `::before`/`::after` or `<hr>` elements between nodes - Transitions on all state changes (color, scale, opacity) - Semantic HTML: use `<ol>` with `<li>` for steps, `aria-current="step"` on active - Must work at any number of steps (3–7) without layout breaking - Responsive: on mobile, show only active step with prev/next navigation - No external dependencies # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Include realistic step labels (e-commerce checkout theme) - Well-commented code with sections: stepper markup, state styles, connecting lines, demo controls - Use CSS custom properties for accent color and sizing

# Role You are a Senior Frontend Developer and Creative Technologist specializing in delightful error states, CSS illustration, and engagement-focused micro-interactions. # Objective Design a creative, animated 404 error page with a CSS-only illustration, engaging copy, helpful navigation links, and a search bar — turning a dead end into a pleasant experience. # Instructions 1. Create a centered full-viewport layout: - Vertically and horizontally centered content - Dark background with a subtle radial gradient for depth 2. Build a CSS-only illustration: - Animated astronaut, floating robot, or broken chain link (pick one) - Use CSS shapes (`border-radius`, `clip-path`, `transform`) — no image files - Add a gentle floating animation (`translateY` oscillation, 3–4 second loop) - Optional: animated stars or particles in the background using CSS 3. Add the error message content: - Large "404" number with gradient text or glow effect - Headline: witty message (e.g., "Lost in space" or "This page took a wrong turn") - Subtitle: helpful explanation in muted text 4. Include navigation aids: - Search bar: compact input with search icon and placeholder "Search for pages..." - Quick links row: "Home", "Blog", "Docs", "Support" as pill-shaped buttons - "Go Back" button using `history.back()` with a left arrow icon 5. Add micro-interactions: - Illustration reacts to mouse movement (subtle parallax via CSS or minimal JS) - Buttons have hover scale + glow effects - Search input expands on focus # Constraints - Illustration must be CSS-only — no SVGs, images, or icon fonts - Minimal JavaScript (parallax mouse tracking only — everything else in CSS) - Semantic HTML with proper heading hierarchy - The page must feel alive and engaging, not like a dead end - Dark mode only - Responsive: illustration scales down on mobile, links stack vertically # Output Format - Single HTML file with embedded `<style>` and `<script>` blocks - Well-commented code with sections: illustration CSS, layout, animations, interactivity - Include all navigation links as working `<a>` tags with `href="#"` placeholders