邱宇

Act as an expert web developer specializing in creating fully standalone, single-file web applications with zero external dependencies or setup (beyond CDN libraries).

Your task is to create the complete HTML, CSS3 (inline `<style>`), and modern ES6 JavaScript (inline `<script>`) code for the following application, delivered as a single, self-contained HTML file:

**App Title:** Cellular Automata Simulator (e.g., Game of Life)

**Main Purpose:** Simulate 1D/2D cellular automata.

**Key Features to Implement:**
* Grid display
* Configurable grid/rules
* Step/continuous simulation
* Draw initial state
* Save/load patterns

Act as an expert web developer specializing in creating fully standalone, single-file web applications with zero external dependencies or setup (beyond CDN libraries).

Your task is to create the complete HTML, CSS3 (inline `<style>`), and modern ES6 JavaScript (inline `<script>`) code for the following application, delivered as a single, self-contained HTML file:

**App Title:** Fourier Series Explorer

**Main Purpose:** Visualize waveform decomposition/synthesis.

**Key Features to Implement:**
* Select/draw waveform
* Harmonic controls
* Animation of components/sum
* Frequency spectrum chart
* Ability to handle user input via interactive controls (sliders, forms, buttons, drag-drop, etc., as appropriate).

Act as an expert web developer specializing in creating fully standalone, single-file web applications with zero external dependencies or setup (beyond CDN libraries).

Your task is to create the complete HTML, CSS3 (inline `<style>`), and modern ES6 JavaScript (inline `<script>`) code for the following application, delivered as a single, self-contained HTML file:

**App Title:** Logic Gate Playground

**Main Purpose:** Connect basic logic gates, observe behavior.

**Key Features to Implement:**
* Drag-and-drop gates
* Wiring tool
* Input switches
* Output LEDs
* Real-time signal propagation
* Truth table generation

Act as an expert web developer specializing in creating fully standalone, single-file web applications with zero external dependencies or setup (beyond CDN libraries).

Your task is to create the complete HTML, CSS3 (inline `<style>`), and modern ES6 JavaScript (inline `<script>`) code for the following application, delivered as a single, self-contained HTML file:

**App Title:** Wave Interference Simulator (2D)

**Main Purpose:** Visualize interference patterns from multiple wave sources.

**Key Features to Implement:**
* Place wave sources
* Adjustable parameters
* Real-time visualization
* Sliders
* Ability to handle user input via interactive controls (sliders, forms, buttons, drag-drop, etc., as appropriate).
* Dynamic updates to the UI based on user actions or internal state changes.
* Client-side data processing and logic as required by the features.
* Data persistence using LocalStorage where appropriate (e.g., saving user settings, data, or state).

Act as an expert web developer specializing in creating fully standalone, single-file web applications with zero external dependencies or setup (beyond CDN libraries).

Your task is to create the complete HTML, CSS3 (inline `<style>`), and modern ES6 JavaScript (inline `<script>`) code for the following application, delivered as a single, self-contained HTML file:

**App Title:** Basic Circuit Simulator (DC)

**Main Purpose:** Build simple DC circuits, visualize voltage/current.

**Key Features to Implement:**
* Drag-and-drop components
* Set values
* Calculate/display voltage/current
* Visual current flow

“Develop a web-based application that can calculate the total recruitment cost by considering factors such as salaries, recruitment expenses, and onboarding costs.”
It incorporates a professional business style combined with data visualization elements, with dark gray, blue, and white as the primary colors, highlighting the rigorous and precise nature of the calculations.
Enter job information (job title, number of vacancies, salary range), and the system will automatically calculate the basic human resource costs.
The calculation of onboarding costs includes expenses for pre-employment training, the purchase of office equipment (computers, desks and chairs), the cost of an initial medical examination, and the need to make up for missed contributions to social security and housing provident funds.”

“Develop a career exploration and question-and-answer web application that matches users with ideal career roles based on their interests and skills.”
It features a modern, dynamic style combined with a futuristic, minimalist aesthetic, with primary colors of light blue, purple, and white, conveying a positive atmosphere of exploration and growth. The question-and-answer interface employs an immersive, step-by-step design, with each step’s background featuring subtle gradient textures (corresponding to different shades within the interest dimension). The text of the questions is centered, and the options are presented as rounded cards. When selected, they display the corresponding shade of background and white text, accompanied by a slight zooming animation. The question-and-answering guidance covers various dimensions, including interest areas (art/technology/business/philanthropy), skill strengths (logical thinking/communication/manual dexterity), and work preferences (stability/challenge/freedom/teamwork).

“Develop a web application for résumé review, where users can upload their resumes and receive AI-driven feedback on the structure and content of their resumes.”
It incorporates a professional business style combined with minimalist and efficient design. The primary colors are white, dark blue, and light gray, which emphasize the formal and professional atmosphere of the workplace. The interface is divided into three core modules: the upload area, the analysis results area, and the optimization suggestions area. The layout is symmetrical and organized, with clear information hierarchies.”

“Create a recipe recommendation question-and-answer system where users answer questions about their dietary preferences, and they will receive personalized recipe recommendations.”
The design incorporates a warm, comforting style combined with a fresh, natural feel. The primary colors are cream white, light green, and warm orange, which evoke a sense of warmth suitable for food-related scenarios. The question-and-answer interface features a step-by-step guidance design, with only one question displayed per step, accompanied by simple icons (such as ingredients icons and flavor icons).
The system guides users to input their dietary preferences through a series of questions. The core questions include: type of diet (vegetarian/meat-based/omnivorous), prohibited ingredients, and flavor preferences (sweet/salty/spicy/fresh).
Additional filtering questions: cooking time (within 15 minutes/30 minutes/more than 1 hour), cooking difficulty (beginner/intermediate/advanced), and dining context (breakfast/lunch/dinner/snack).
Customization options are supported (e.g., “low-calorie weight loss,” “high-protein muscle gain,” “family gatherings”), ensuring precise alignment with specific dietary goals.

“Develop a solar roof pricing generator that can calculate costs based on dimensions, materials, and additional customization options.”
It incorporates modern industrial style combined with professional and minimalist design. The primary colors are light gray, dark gray, and metallic silver, which align with the characteristics of the building materials industry.
1. Support for input of sunroom dimensions (length, width, height); automatically calculate the area and volume occupied, which serves as a basis for pricing.
2. Offer a variety of roofing material options (tempered glass, PC impact-resistant board, insulated glass, laminated glass). Each material is listed with its unit price, characteristics, and applicable scenarios.
3. Selection of wall materials (aluminum alloy frame, steel frame, and bridge-type aluminum frame). Customizable frame thickness is supported, with corresponding prices for each type.

Create a concise, stylish, multi-step fitness assessment questionnaire that asks users about their weight, diet, activity level, preferred activities, and goals.

The app should rate users based on the combination of their answers. It should include three fitness programs that you have designed, each with its own unique title and description.

The first page should be an introductory page that welcomes the user and congratulates them on taking the first step toward achieving their fitness goals.

The questionnaire fields should be easy to fill out, such as using drop-down menus or radio buttons (if applicable), or text boxes (e.g., for entering weight).

The questionnaire should be divided into multiple pages, with one field per page. After completing one page, the next page should display some positive encouragement tailored to the user’s answers. For example, if the user’s activity level is low, the next page might read, “We’re glad you’ve decided to start increasing your activity!”; if the activity level is high, it could say, “You’ve taken a great step! Let’s find a fitness plan that’s perfect for you.”

Finally, the app will generate a “customized” report that includes charts illustrating projected weight loss progress, recommended workout plans, and calls-to-action to encourage users to sign up for a virtual fitness app called Max Muscles.

Please provide this content in HTML format.

Create a concise, stylish, and modern investment calculator.

It should allow users to input:

1. Initial investment amount
2. Investment term in years
3. Additional investment amount, with the option to switch between monthly or annual frequency
4. Assumed annual return rate (8% is recommended)

Assume the additional investment amount remains constant.
Interest is calculated based on the balance.
The calculation should take into account whether the additional investment frequency is monthly or annual.

It should include some explanations on how to use the calculator and key concepts such as compound interest.

The results should dynamically display "In {duration} years, by investing {contributions} monthly/annually, your investment could be worth $XX,XXX", along with a chart showing the comparison between the potential value of the investment and the total amount invested after the specified period, and a table detailing the annual initial balance, total investment amount, earnings, and ending balance.

Please provide this content in HTML format.

Create a concise, stylish, and modern web application named "T-shirt Mockup Generator". This application should be fully developed based on HTML without requiring any additional programming knowledge. It should focus on the T-shirt mockup generation function and include intuitive design elements, making it easy to use and aesthetically pleasing.

Create a concise, modern, and user-friendly fake Instagram profile generator web application using simple HTML elements. Ensure the interface is intuitive and easy to use without requiring any additional programming knowledge.

Adopt a style that replicates the original Instagram look with a modern minimalist upgrade, using a color palette dominated by white, light gray, and pale pink.

Support the filling of basic profile information (username, real name, bio, location, website link) with real-time preview of the effect.

Allow uploading of a profile picture (automatically cropped into a circle) and a cover image (adapted to the ratio of an Instagram profile page), with support for replacement and deletion.

Simulate a post-publishing function, enabling the upload of 3-9 images as homepage posts, with automatic generation of a grid layout preview.

Create a simple HTML application that allows users to upload photos and simulate them as Instagram stories. Users can also upload profile photos.
The overall design adopts a minimalist Instagram style, with white and light gray as the background colors; it supports uploading local photos/images;
Users can upload profile photos, which are automatically generated into circular avatars and added to the corner of the story, with support for adjusting the size and position of the avatar.
It supports adding hand-drawn doodles, providing brushes and erasers of different thicknesses, with colors consistent with the story style.
A preview function is available, and after generation, a full-screen preview can be performed to simulate the display effect of real Instagram stories.
An export function supports saving the created story as an image format (PNG/JPG), adapted to mobile phone album storage.
A history function saves the last 3 created stories, facilitating secondary editing or re-exporting.

Act as an expert web developer specializing in creating fully standalone, single-file web applications with zero external dependencies or setup (beyond CDN libraries).

Your task is to create the complete HTML, CSS3 (inline `<style>`), and modern ES6 JavaScript (inline `<script>`) code for the following application, delivered as a single, self-contained HTML file:

**App Title:** CSS Gradient & Pattern Generator

**Main Purpose:** Visually design complex CSS gradients and background patterns.

**Key Features to Implement:**
* Interactive gradient editor
* Pattern selection
* Real-time preview
* Generate CSS code
* Save favorites (LocalStorage)

Act as an expert web developer specializing in creating fully standalone, single-file web applications with zero external dependencies or setup (beyond CDN libraries).

Your task is to create the complete HTML, CSS3 (inline `<style>`), and modern ES6 JavaScript (inline `<script>`) code for the following application, delivered as a single, self-contained HTML file:

**App Title:** Mandala Generator

**Main Purpose:** Create intricate mandala patterns with radial symmetry.

**Key Features to Implement:**
* Canvas drawing
* Customizable symmetry sectors
* Brush types/colors
* Real-time mirroring
* Undo/redo
* Export PNG/SVG

Act as an expert web developer specializing in creating fully standalone, single-file web applications with zero external dependencies or setup (beyond CDN libraries).

Your task is to create the complete HTML, CSS3 (inline `<style>`), and modern ES6 JavaScript (inline `<script>`) code for the following application, delivered as a single, self-contained HTML file:

**App Title:** Pixel Art Studio

**Main Purpose:** Grid-based editor for creating pixel art.

**Key Features to Implement:**
* Configurable grid size
* Color palette tool
* Drawing tools
* Layer support (basic)
* Live preview
* Zoom
* Export PNG
* Save/load project (LocalStorage)

ct as an expert web developer specializing in creating fully standalone, single-file web applications with zero external dependencies or setup (beyond CDN libraries).

Your task is to create the complete HTML, CSS3 (inline `<style>`), and modern ES6 JavaScript (inline `<script>`) code for the following application, delivered as a single, self-contained HTML file:

**App Title:** Interactive SVG Icon Editor

**Main Purpose:** Load/edit simple SVG icons (paths, colors, strokes) and export.

**Key Features to Implement:**
* SVG upload/presets
* Path point manipulation (basic)
* Color palette application
* Stroke controls
* Live preview
* Export SVG code/file

Act as an expert web developer specializing in creating fully standalone, single-file web applications with zero external dependencies or setup (beyond CDN libraries).

Your task is to create the complete HTML, CSS3 (inline `<style>`), and modern ES6 JavaScript (inline `<script>`) code for the following application, delivered as a single, self-contained HTML file:

**App Title:** Simple Sprite Sheet Animator

**Main Purpose:** Upload sprite sheet, define animations, preview/export as GIF.

**Key Features to Implement:**
* Image upload
* Grid overlay
* Animation definition UI
* Live preview
* GIF export (needs JS GIF library)
* Save/load definitions (LocalStorage)
* Ability to handle user input via interactive controls (sliders, forms, buttons, drag-drop, etc., as appropriate).
* Dynamic updates to the UI based on user actions or internal state changes.
* Client-side data processing and logic as required by the features.
* Data persistence using LocalStorage where appropriate (e.g., saving user settings, data, or state).
* File input using FileReader API if data import (like CSV) is explicitly mentioned or implied.
* File output/download using Blobs if data/image/file export is explicitly mentioned or implied.

Act as an expert web developer specializing in creating fully standalone, single-file web applications with zero external dependencies or setup (beyond CDN libraries).

Your task is to create the complete HTML, CSS3 (inline `<style>`), and modern ES6 JavaScript (inline `<script>`) code for the following application, delivered as a single, self-contained HTML file:

**App Title:** Generative Art Playground (p5.js)

**Main Purpose:** Create abstract generative art using sliders and controls manipulating p5.js algorithms.

**Key Features to Implement:**
* Multiple generative algorithms
* Parameter controls (sliders, color pickers)
* Real-time canvas updates
* Pause/play
* Save artwork as PNG
* Preset configurations
* Ability to handle user input via interactive controls (sliders, forms, buttons, drag-drop, etc., as appropriate).
* Dynamic updates to the UI based on user actions or internal state changes.
* Client-side data processing and logic as required by the features.
* Data persistence using LocalStorage where appropriate (e.g., saving user settings, data, or state).

Act as an expert web developer specializing in creating fully standalone, single-file web applications with zero external dependencies or setup (beyond CDN libraries).

Your task is to create the complete HTML, CSS3 (inline `<style>`), and modern ES6 JavaScript (inline `<script>`) code for the following application, delivered as a single, self-contained HTML file:

**App Title:** A/B Test Result Visualizer

**Main Purpose:** Input A/B test data and visualize performance differences.

**Key Features to Implement:**
* Input visitors/conversions
* Calculate conversion rates
* Bar chart comparison
* Confidence interval visualization (simplified)
* Significance indicator
* Ability to handle user input via interactive controls (sliders, forms, buttons, drag-drop, etc., as appropriate).
* Dynamic updates to the UI based on user actions or internal state changes.
* Client-side data processing and logic as required by the features.
* Data persistence using LocalStorage where appropriate (e.g., saving user settings, data, or state).

Act as an expert web developer specializing in creating fully standalone, single-file web applications with zero external dependencies or setup (beyond CDN libraries).

Your task is to create the complete HTML, CSS3 (inline `<style>`), and modern ES6 JavaScript (inline `<script>`) code for the following application, delivered as a single, self-contained HTML file:

**App Title:** Personal Health Data Dashboard

**Main Purpose:** Input or upload personal health metrics and visualize trends.

**Key Features to Implement:**
* Data entry forms
* CSV import/export
* Customizable metrics
* Line/bar charts
* Goal setting visualization
* LocalStorage persistence
* Ability to handle user input via interactive controls (sliders, forms, buttons, drag-drop, etc., as appropriate).
* Dynamic updates to the UI based on user actions or internal state changes.
* Client-side data processing and logic as required by the features.
* Data persistence using LocalStorage where appropriate (e.g., saving user settings, data, or state).

Act as an expert web developer specializing in creating fully standalone, single-file web applications with zero external dependencies or setup (beyond CDN libraries).

Your task is to create the complete HTML, CSS3 (inline `<style>`), and modern ES6 JavaScript (inline `<script>`) code for the following application, delivered as a single, self-contained HTML file:

**App Title:** Web Analytics Dashboard Mockup

**Main Purpose:** Mimic web analytics dashboard using simulated or uploaded data.

**Key Features to Implement:**
* Simulated data / CSV upload
* KPI cards (Glassmorphism)
* Trend charts
* Source bar charts
* Simple geo map
* Date range selection
* Ability to handle user input via interactive controls (sliders, forms, buttons, drag-drop, etc., as appropriate).
* Dynamic updates to the UI based on user actions or internal state changes.
* Client-side data processing and logic as required by the features.
* Data persistence using LocalStorage where appropriate (e.g., saving user settings, data, or state).