Act as a Principal UI/UX Designer and Senior Frontend Engine...
Prompt
Act as a Principal UI/UX Designer and Senior Frontend Engineer. Create an interactive, high-end, ultra-clean, and minimalistic Shopping Budget & Allocation Visualizer component using HTML, CSS (Tailwind CSS preferred), and modern JavaScript/React. ### Key Features & Functional Requirements: 1. Dynamic Allocation & Customization: - Total Monthly Income Input: A sleek input field allowing users to define total earnings/budget. - Interactive Sliders/Visual Controls: Allow smooth adjustment of percentages/amounts across custom budget categories (e.g., Savings, Investments, Shopping Essentials, Shopping Wants, Groceries, Housing). - Auto-Rebalancing: Unlocked category percentages should automatically adjust proportionally when one category slider is modified to ensure total allocation always equals 100%. 2. PIN-Based Locking Mechanism: - Lock/Unlock Toggle: Each category card must feature a lock icon button. - Security PIN Modal: Clicking to lock or unlock a category triggers a minimalistic PIN entry modal. - Locked State Visuals: Locked categories are visually distinct (subtle glassmorphic blur or dimmed state) and prevented from auto-adjusting when other unlocked sliders move. 3. Visual Design & Aesthetic Direction: - Theme: Ultra-minimalistic, high-end "fintech" aesthetic (dark or dark-slate theme, soft neon/pastel glowing accents, subtle glassmorphism, crisp typography, micro-borders). - Dynamic Data Visualization: Include a smooth visual breakdown chart (e.g., interactive donut chart, multi-colored progress bar, or animated SVG ring) showing real-time allocation ratios. - Visual Hierarchy: Distinct visual prioritization showing high-spend categories vs. low-spend categories at a glance. 4. Micro-Animations & Fluidity: - Silky-smooth CSS/Framer Motion transitions for slider drags, number updates, modal pop-ins, and chart updates. - Subtle glow or scale effects on hover and active slider interactions. 5. Code Structure & Implementation Details: - Provide clean, self-contained, and fully functional code. - Make it modular so categories, initial percentages, and icons can easily be customized via a simple state object or JSON configuration.
A system prompt was added to support web rendering
