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