File size: 3,310 Bytes
cb40c5e d4bb901 cb40c5e d4bb901 cb40c5e dcbbe4c cb40c5e 3878434 4237a22 3878434 a26a4c4 3878434 4237a22 3878434 d4bb901 cb40c5e d4bb901 cb40c5e d4bb901 cb40c5e d4bb901 3878434 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
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": "Qwen，Start！",
"description": "Help me design an interface with a purple button that says 'Qwen, 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": "Audio Visualizer",
"description": "Create an audio visualizer using HTML5 Canvas that responds to audio frequency data. Include a simple audio player with controls and different visualization styles.",
}
] |