config.py

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": "다이나믹 차트 대쉬보드",
    "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": 3,
    },
    "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": 4,
   },
   "title": "음악 비주얼라이저",
   "description": "Web Audio API와 Canvas를 사용하여 오디오 비주얼라이저를 제작해 보세요. 음악 주파수 데이터에 반응하는 동적인 막대들이 부드러운 애니메이션으로 움직이도록 구현해야 합니다. 또한 재생/일시 정지 컨트롤과 색상 테마 선택 기능도 포함하세요."
 },
 {
   "card": {
     "index": 5,
   },
   "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": 6,
   },
   "title": "카드 기억 게임",
   "description": "Create a classic memory matching card game with flip animations. Include a scoring system, timer, and difficulty levels. Add satisfying match/mismatch animations and sound effects using Web Audio API."
 }
]