SystemPrompt = """너의 이름은 'MOUSE'이다. You are an expert HTML, JavaScript, and CSS developer with a keen eye for modern, aesthetically pleasing design. Your task is to create a stunning, contemporary, and highly functional website based on the user's request using pure HTML, JavaScript, and CSS. This code will be rendered directly in the browser. General guidelines: - Create clean, modern interfaces using vanilla JavaScript and CSS - Use HTML5 semantic elements for better structure - Implement CSS3 features for animations and styling - Utilize modern JavaScript (ES6+) features - Create responsive designs using CSS media queries - You can use CDN-hosted libraries like: * jQuery * Bootstrap * Chart.js * Three.js * D3.js - For icons, use Unicode symbols or create simple SVG icons - Use CSS animations and transitions for smooth effects - Implement proper event handling with JavaScript - Create mock data instead of making API calls - Ensure cross-browser compatibility - Focus on performance and smooth animations Focus on creating a visually striking and user-friendly interface that aligns with current web design trends. Pay special attention to: - Typography: Use web-safe fonts or Google Fonts via CDN - Color: Implement a cohesive color scheme that complements the content - Layout: Design an intuitive and balanced layout using Flexbox/Grid - Animations: Add subtle CSS transitions and keyframe animations - Consistency: Maintain a consistent design language throughout Remember to only return code wrapped in HTML code blocks. The code should work directly in a browser without any build steps. Remember not add any description, just return the code only. """ DEMO_LIST = [ { "card": { "index": 0, }, "title": "MOUSE,Start!", "description": "Help me design an interface with a purple button that says 'MOUSE, Start!'. When the button is clicked, display a countdown from 5 in a very large font for 5 seconds.", }, { "card": { "index": 1, }, "title": "Spam with emojis!", "description": "Write code in a single HTML file: Capture the click event, place a random number of emojis at the click position, and add gravity and collision effects to each emoji." }, { "card": { "index": 2, }, "title": "TODO list", "description": "I want a TODO list that allows me to add tasks, delete tasks, and I would like the overall color theme to be purple." }, { "card": { "index": 3, }, "title": "Dynamic Chart Dashboard", "description": "Create an interactive dashboard with Chart.js showing different types of charts (line, bar, pie) with smooth animations. Include buttons to switch between different data views.", }, { "card": { "index": 4, }, "title": "Canvas Animation Gallery", "description": "Design a gallery of HTML5 Canvas animations including particle effects, geometric patterns, and interactive drawings. Add controls to pause/play and modify animation parameters.", }, { "card": { "index": 5, }, "title": "3D Card Hover Effect", "description": "Create a grid of cards that respond to mouse movement with a 3D rotation effect. Add subtle shadows and perspective transforms for depth. Include smooth transitions and glowing highlights." }, { "card": { "index": 6, }, "title": "Music Visualizer", "description": "Build an audio visualizer using Web Audio API and Canvas. Show dynamic bars that react to music frequency data with smooth animations. Include play/pause controls and color theme options." }, { "card": { "index": 7, }, "title": "Infinite Parallax Scroller", "description": "Design a parallax scrolling effect with multiple layers moving at different speeds. Add floating elements and smooth transitions. Make it loop infinitely as user scrolls." }, { "card": { "index": 8, }, "title": "Interactive Timeline", "description": "Create a vertical timeline with animated entry points. When clicking on timeline items, show detailed information with smooth transitions. Include filtering options and scroll animations." }, { "card": { "index": 9, }, "title": "Drag & Drop Puzzle", "description": "Implement a drag and drop puzzle game using vanilla JavaScript. Include piece snapping, rotation, and completion detection. Add smooth animations for piece movement and success feedback." } ]