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."
 },

 {
   "card": {
     "index": 7
   },
   "title": "인터랙티브 컬러 팔레트",
   "description": "마우스 움직임에 따라 동적으로 변하는 컬러 팔레트를 만드세요. 색상 선택, 저장, 조합 기능과 함께 부드러운 그라데이션 효과를 구현하세요."
 },
 {
   "card": {
     "index": 8
   },
   "title": "날씨 위젯 애니메이션",
   "description": "현재 날씨 상태를 보여주는 애니메이션 위젯을 만드세요. 비, 눈, 구름, 번개 등의 날씨 효과를 Canvas로 구현하고 부드러운 전환 효과를 추가하세요."
 },
 {
   "card": {
     "index": 9
   },
   "title": "파티클 텍스트 이펙트",
   "description": "텍스트가 파티클로 변환되는 효과를 구현하세요. 마우스 호버시 글자가 흩어졌다가 다시 모이는 애니메이션을 Canvas로 만드세요."
 },
 {
   "card": {
     "index": 10
   },
   "title": "3D 책장 갤러리",
   "description": "CSS 3D 변환을 사용하여 회전하는 책장 형태의 갤러리를 만드세요. 각 책을 클릭하면 상세 정보가 나타나도록 구현하세요."
 },
 {
   "card": {
     "index": 11
   },
   "title": "리듬 게임",
   "description": "Web Audio API를 활용한 간단한 리듬 게임을 만드세요. 떨어지는 노트와 타이밍 판정, 점수 시스템을 구현하세요."
 },
 {
   "card": {
     "index": 12
   },
   "title": "SVG 패스 애니메이션",
   "description": "SVG 패스를 따라 움직이는 애니메이션을 구현하세요. 다양한 도형이 그려지는 과정을 보여주고 인터랙티브한 컨트롤을 추가하세요."
 },
 {
   "card": {
     "index": 13
   },
   "title": "드로잉 보드",
   "description": "Canvas를 사용한 그리기 도구를 만드세요. 브러시 크기, 색상 변경, 지우개 기능과 그리기 기록 저장 기능을 구현하세요."
 },
 {
   "card": {
     "index": 14
   },
   "title": "퍼즐 슬라이드 게임",
   "description": "숫자나 이미지를 사용한 슬라이드 퍼즐 게임을 만드세요. 이동 애니메이션과 완성 확인 기능을 추가하세요."
 },
 {
   "card": {
     "index": 15
   },
   "title": "파티클 커서 효과",
   "description": "마우스 커서를 따라다니는 파티클 효과를 만드세요. 다양한 파티클 패턴과 색상 변화를 구현하세요."
 },
 {
   "card": {
     "index": 16
   },
   "title": "인터랙티브 달력",
   "description": "드래그 앤 드롭으로 일정을 관리할 수 있는 달력을 만드세요. 애니메이션 효과와 일정 필터링 기능을 추가하세요."
 },
 {
   "card": {
     "index": 17
   },
   "title": "모션 갤러리",
   "description": "스크롤에 반응하는 이미지 갤러리를 만드세요. 패럴랙스 효과와 부드러운 전환 애니메이션을 구현하세요."
 },
 {
   "card": {
     "index": 18
   },
   "title": "타자 게임",
   "description": "떨어지는 단어를 타이핑하여 점수를 얻는 게임을 만드세요. 난이도 조절과 효과음을 추가하세요."
 },
 {
   "card": {
     "index": 19
   },
   "title": "데이터 시각화 애니메이션",
   "description": "D3.js를 사용하여 데이터 변화를 애니메이션으로 보여주는 차트를 만드세요. 다양한 전환 효과를 추가하세요."
 },
 {
   "card": {
     "index": 20
   },
   "title": "무드 보드 생성기",
   "description": "드래그 앤 드롭으로 이미지를 배치하고 필터를 적용할 수 있는 무드 보드 생성기를 만드세요. 레이아웃 저장 기능을 추가하세요."
 },
 {
   "card": {
     "index": 21
   },
   "title": "물리 시뮬레이션",
   "description": "Canvas를 사용하여 간단한 물리 시뮬레이션을 구현하세요. 중력, 충돌, 탄성 효과를 적용한 공 튀기기 시뮬레이션을 만드세요."
 },
 {
   "card": {
     "index": 22
   },
   "title": "사운드 믹서",
   "description": "Web Audio API를 사용하여 여러 음원을 믹싱할 수 있는 인터페이스를 만드세요. 볼륨, 패닝, 이펙트 조절 기능을 구현하세요."
 },
 {
   "card": {
     "index": 23
   },
   "title": "3D 카드 갤러리",
   "description": "Three.js를 사용하여 3D 공간에서 회전하는 카드 갤러리를 만드세요. 마우스 인터랙션과 애니메이션을 추가하세요."
 },
 {
   "card": {
     "index": 24
   },
   "title": "인터랙티브 맵",
   "description": "SVG를 사용하여 인터랙티브한 지도를 만드세요. 지역 선택, 데이터 시각화, 줌 기능을 구현하세요."
 },
 {
   "card": {
     "index": 25
   },
   "title": "포토 에디터",
   "description": "Canvas를 사용하여 기본적인 이미지 편집 도구를 만드세요. 필터 적용, 자르기, 회전 기능을 구현하세요."
 }
    
]