Fun Facts LIVE - Retro Punk Dashboard

# Fun Facts LIVE - Retro Punk Dashboard

{
  "summary": "A bold, tactile mobile dashboard featuring 70s-style punk aesthetics, heavy editorial borders, hard block shadows, and vibrant primary accents. The design uses a fixed navigation structure with an interactive graffiti-style map and immersive cards that transition from grayscale to color on interaction.",
  "style": {
    "description": "The style is 'Retro Brutalist'—combining 70s color pops with raw, heavy-duty UI elements. It uses a base of Beige (#F5F1E3) and Charcoal (#2C2C2C). Typography pairs the ultra-bold, high-character Montserrat for headers with the legible Open Sans for body text. Animations are snappy and 'pop-out', utilizing cubic-bezier curves for bouncy, tactile interactions.",
    "prompt": "Apply a 70s Retro Punk aesthetic. Color Palette: Retro Red (#BC2C2C) for highlights/FAB, Retro Blue (#5DA4C9) for accent buttons, Sun Yellow (#FCD758) for tags/tooltips, Beige (#F5F1E3) for main backgrounds, and Charcoal (#2C2C2C) for all borders and text. Typography: Headers use Montserrat (900 weight, uppercase, letter-spacing: -0.05em); Body uses Open Sans (400-600 weight). UI Elements: All containers must have a minimum 6px solid Charcoal border. Shadows must be hard block-style: `box-shadow: 12px 12px 0px 0px #2C2C2C`. Micro-interactions: Cards should rotate (-1deg) and shift position slightly on hover/active. Images: Default state is 100% grayscale, transitioning to full color on interaction."
  },
  "layout_and_structure": {
    "description": "A vertical-scrolling mobile layout composed of a sticky header, a condensed map overview, and a series of high-impact content cards.",
    "prompts": [
      {
        "part": "Sticky Header",
        "prompt": "Create a 64px height header. Background: #BC2C2C. Bottom border: 6px solid #2C2C2C. Left side: Logo in Montserrat Bold, white text, 24px size. Right side: Two icon buttons (calendar, grid) in white. The header must remain fixed at the top of the viewport."
      },
      {
        "part": "Graffiti Map Section",
        "prompt": "Occupies 20% of the viewport height. Background: #5DA4C9 with a subtle noise texture. Encased in an 8px #2C2C2C border. Content: An abstract, hand-drawn style world map using irregular SVG shapes filled with vibrant, mismatched colors (Red, Orange, Yellow, Purple). Feature interactive 'hotspots' as 16px circles with a 2px Charcoal border and a pulsing scale animation. Include small labels (8px font, bold) on white rectangular backgrounds with 2px hard shadows."
      },
      {
        "part": "Immersive Feed Area",
        "prompt": "Occupies the remaining 80% of the height. Include a vertical progress indicator on the far right: 128px tall, 8px wide, rounded, white background with a 2px Charcoal border and a red filling indicating scroll depth. Cards should have a 16px bottom margin and 16px horizontal padding from the screen edge."
      },
      {
        "part": "Content Card",
        "prompt": "Background: #FFFFFF. Border: 6px solid #2C2C2C. Shadow: 12px 12px 0px 0px #2C2C2C. Elements: 1) Full-width image (224px height) with a 4px bottom border, default grayscale. 2) Floating tag in top-left: #FCD758 background, black text, 2px shadow. 3) Content: 32px Montserrat header, 14px Open Sans body. 4) Action row: A 3-button layout featuring a heart icon button (white), a wide 'AI讲解' button (#5DA4C9 background, white text, bold), and a share icon button (white). All buttons must have 4px solid borders and 4px block shadows."
      },
      {
        "part": "Bottom Navigation Bar",
        "prompt": "Height: 80px. Background: #2C2C2C. Top border: 4px solid #2C2C2C. Icons: Yellow (#FCD758) for active, White with 60% opacity for inactive. Centered FAB: A 64px diameter circle in #BC2C2C with a 4px Charcoal border and a 4px block shadow, positioned to overlap the top of the nav bar by 50%."
      }
    ]
  },
  "special_ui_components": [
    {
      "component": "Tactile Action Button",
      "description": "High-contrast primary color button with physical-press feedback.",
      "prompt": "Design a button with #5DA4C9 background and #2C2C2C 4px border. Shadow is `4px 4px 0px 0px #2C2C2C`. On active state, the button should `translate(2px, 2px)` and the shadow should reduce to `0px 0px`, simulating a physical press. Font: Montserrat 16px, white."
    },
    {
      "component": "Pulsing Map Hotspot",
      "description": "Hand-drawn style interactive point on the map.",
      "prompt": "A circular element with `animation: pulse-dot 2s infinite`. At 0% scale is 1.0, at 50% scale is 1.5 with 0.6 opacity, returning to 1.0 at 100%. Fill color varies (Red/Yellow/White) with a 2px solid #2C2C2C stroke."
    }
  ]
}