Spaces:
Running
Running
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." | |
} | |
] | |