Learn & Master Design

Futuristic city street at night...

Prompt 1 — Warm Vintage Parchment + Interactive Order System You are an expert web developer and UI/UX designer. Convert this restaurant menu image into a fully functional HTML webpage with an interactive ordering system. DESIGN: - Warm vintage parchment theme (cream, sepia, burnt sienna) - Aged paper texture background with decorative borders - Typography: Playfair Display + Lora from Google Fonts - Hand-drawn style dividers and ornamental flourishes - Watercolor food illustration placeholders per section - Veg items in forest green, non-veg in deep burgundy - Prices in old-style numeral font ANIMATIONS: - Ink-bleed reveal animation on page load - Menu items unfurl like a scroll on scroll - Candle flicker glow effect on section headers - Floating dust motes in background - Quill-pen underline hover effect on each item INTERACTIVE ORDERING SYSTEM: - Each menu item has a vintage-styled "+  Add to Order" button (aged brass/copper color) - Once added, the button transforms into a [-] [qty] [+] stepper with inked numerals - A fixed "Your Order" parchment scroll unfurls from the bottom of the screen - The order scroll lists each added item with name, quantity, and line total - Shows subtotal, estimated taxes (5%), and a bold TOTAL in old-style numerals - A "Clear Order" option styled as a quill scratching out the bill - Order scroll can be toggled open/closed by clicking a wax seal button (bottom-right) - The wax seal shows item count as an embossed number badge - All price calculations update in real-time with no page reload - "Place Order" button at the bottom styled as a stamped/sealed envelope CONTENT: - Extract every item and price accurately - Add "House Specialty" ribbon on premium items - Add "Serves 4+" tag on family portions - Decorative initial caps on each section title - "All prices exclusive of taxes" in italic script at bottom OUTPUT: - Single HTML file, all CSS/JS inline - No external dependencies except Google Fonts - Mobile responsive, GitHub Pages ready - All order logic in vanilla JS (no frameworks) Prompt 2 — Cyberpunk Neon + Interactive Order System You are an expert web developer and UI/UX designer. Convert this restaurant menu image into a fully functional HTML webpage with an interactive ordering system. DESIGN: - Dark charcoal background (#0d0d0d) with electric neon accents - Neon pink, cyan, and yellow-green color palette - Typography: Bebas Neue for headers + Rajdhani for body - Glowing neon sign aesthetic for restaurant name - CRT scanline overlay texture on background - Veg items in neon green, non-veg in hot pink - Prices styled like LED price tags ANIMATIONS: - Neon flicker effect on restaurant name (random stutter) - Items slide in from left like a ticker board - Electric spark hover effect on each menu card - Animated neon border pulse on section headers - Rain of emoji food particles in background INTERACTIVE ORDERING SYSTEM: - Each menu item has a neon-glowing "ADD +" button (cyan glow, Bebas Neue font) - Once added, becomes a [-] [qty] [+] LED-style digit counter - A fixed "ORDER TERMINAL" panel slides up from the bottom of the screen - The terminal looks like a hacking/POS screen: monospace font, scan-line effect - Lists each item as: > ITEM_NAME x QTY .............. ₹PRICE - Shows subtotal line, tax line (5%), and a blinking "> TOTAL: ₹XXXX" line - "CLEAR ALL" styled as a red DELETE key on a keyboard - Terminal panel is toggled by a neon pulsing 🖥 icon button (bottom-right corner) - A cyan badge on the toggle shows current item count - All calculations update live via JS - "SUBMIT ORDER" button styled as a glowing neon "EXECUTE" key - Optional: play a short beep sound on item add (HTML5 Audio API, toggleable) CONTENT: - Extract every item and price accurately - Add flaming 🔥 emoji badge on spicy/premium items - Add 👨‍👩‍👧 tag on family size items - Neon sign style "EST. [year]" subtitle - "All prices exclusive of taxes" in blinking neon footer OUTPUT: - Single HTML file, all CSS/JS inline - No external dependencies except Google Fonts - Mobile responsive, GitHub Pages ready - All order logic in vanilla JS (no frameworks) Prompt 3 — Minimal Fine Dining + Interactive Order System You are an expert web developer and UI/UX designer. Convert this restaurant menu image into a fully functional HTML webpage with an interactive ordering system. DESIGN: - Stark white background with matte black typography - Single accent color: deep forest green or wine red - Typography: Cormorant Garamond (display) + DM Sans (body) - Extreme whitespace and refined grid layout - Hairline rule dividers, no decorative borders - Subtle veg/non-veg dots only, no loud color coding - Prices right-aligned in small caps with dot leaders ANIMATIONS: - Fade-in with 0 transform — pure opacity, no movement - Items appear sequentially with 80ms stagger, no bounce - Hover: only a thin underline slides in from left - No particles — just elegant stillness - Smooth color inversion on dark mode toggle button INTERACTIVE ORDERING SYSTEM: - Each item row has a minimal "+" icon (hairline circle) on the far right that appears on hover - Once added, the "+" becomes an inline [-] [n] [+] control in the same hairline style - A slim, fixed bottom bar (white, 1px top border) slides up when the first item is added - The bar shows: "3 items" on the left, "₹1,240" subtotal in the center, "View Order →" on the right - Clicking "View Order" opens a clean right-side drawer panel (white, no shadows — just borders) - Drawer lists items in a table: Name | Qty stepper | Line price - Below the table: a hairline separator, then Subtotal / Tax (5%) / Total in small caps - "Clear" is a muted text link, never a button - "Confirm Order" is a single full-width accent-colored button at the drawer bottom - All transitions are opacity/transform only, 200ms ease — no bounce, no spring - Dark mode toggle in top-right inverts the entire page including the drawer CONTENT: - Extract every item and price accurately - Add small "Signature" text label (no badge) on premium items - Add "For the Table" label on family items - Thoughtful section descriptions in italics - "All prices exclusive of taxes" in 9px uppercase footer OUTPUT: - Single HTML file, all CSS/JS inline - No external dependencies except Google Fonts - Mobile responsive, GitHub Pages ready - All order logic in vanilla JS (no frameworks) Prompt 4 — Royal Mughal Heritage + Interactive Order System You are an expert web developer and UI/UX designer. Convert this restaurant menu image into a fully functional HTML webpage with an interactive ordering system. DESIGN: - Deep jewel tones: midnight navy, ruby red, emerald, saffron gold - Intricate Mughal-inspired geometric SVG patterns as background - Typography: Yatra One or Tiro Devanagari (display) + Hind for body - Mandala motif behind restaurant name - Rich gradient cards with silk-fabric texture effect - Veg items with lotus icon in green, non-veg with flame icon in red - Ornate gold-leaf price badges ANIMATIONS: - Curtain-reveal opening animation (two panels slide apart) - Items rise from bottom with elastic spring easing - Rotating mandala on scroll behind hero section - Diya lamp flame flicker particles floating upward - Hover: card lifts with deep colored drop shadow INTERACTIVE ORDERING SYSTEM: - Each item card has a gold "Add to Dastarkhwan" button (داسترخوان = royal spread) - Once added, becomes an ornate [-] [qty] [+] stepper with gold borders and jewel-tone numbers - A grand "Royal Order Summary" panel fixed at the bottom, styled like a royal farman (decree scroll) - The panel header has a small crown/tughra symbol and reads "Your Royal Selection" - Lists items with lotus/flame icons, name, qty, and price in gold numerals - Shows: Subtotal / Royal Tax (5%) / Grand Total — all in gold on deep navy - "Remove from Order" styled as a small red cross in a jewel frame - The panel is collapsed by default; a gold coin-style FAB (bottom-right) toggles it open - FAB shows item count in ruby red on a gold background - Animated gold shimmer effect on the Total line when it updates - "Confirm Royal Order" button has a curtain-wipe animation on click CONTENT: - Extract every item and price accurately - Add "Nawabi Special" banner on premium items - Add "Royal Feast" badge on family size items - Urdu/Hindi inspired calligraphy for section headers - "All prices exclusive of taxes" in gold italic footer OUTPUT: - Single HTML file, all CSS/JS inline - No external dependencies except Google Fonts - Mobile responsive, GitHub Pages ready - All order logic in vanilla JS (no frameworks)