邱宇

“Item Storage Log” tool.
Home page: Displays all containers.
Container details page: Displays the items contained within this container.
Add/Edit Container Page
Add/Edit Item Page
At the top of the interface, there’s also a search bar and a categorization entry point. The overall design features a gradient background, rounded boxes, and simulated light and shadow effects.

The “Animal Match” WeChat mini-game.
10×10 grid layout, randomly generated animal-themed icons (monkey/panda/rabbit/elephant/hippopotamus/dolphin/kitten/puppy/zebra, etc.).

Conditions to be met: Select two identical animals and connect them with ≤2 straight lines (loops are allowed).

Path verification: The path must be entirely empty and cannot pass through walls. Connections are highlighted automatically.

Process flow.
Click to select the animal → Auto-pathfinding → Successful elimination (special effects + sound effects).

Scene Construction:
2D horizontal layout: Deep Forest layout.

Time constraints.
No time limit.

Economic system
The currency system consists of gold coins: 10 gold coins are awarded for completing an activity.

Tasks and Achievements: Earn 100 gold coins by completing the level.

Build a website for an intelligent sleep assistant.
Core functionalities: assessment of sleep quality, personalized recommendations for improving sleep, guided relaxation before sleep, science popularization of sleep-related knowledge, and consultation on sleep-related issues, among others.

Workflow: This includes greeting the user and gaining insight into their current state, assessing the type of sleep disturbances they experience, providing targeted advice, tracking improvements in sleep quality, and regularly adjusting the approach as needed.

Tool preferences: Sleep Cycle Calculator, White Noise Generator, Breathing Guidance Timer, Sleep Recording Analysis.

Interaction Rules: Avoid using provocative language. The interface will automatically dim in the night mode, and immediate assistance will be provided in emergency situations.

– Emotional Bubble Interaction: Users can choose different emotions, and by clicking on the bubbles, they will receive animated and sound effects feedback.

- AI-powered Conversations: Incorporates the CloudBase AI ToolKit, enabling emotional support and intelligent responses.

The “AI Emotional Bandage Mini-App” focuses on emotional expression and healing, incorporating features such as emotional bubble interactions, AI-driven conversations, diary posting, and image/text generation.
– Diary editing and publishing: Supports selection of cover art, titles, content, and mood templates, with publishing to a cloud database.

– Integrated text and image generation: Create stylized images of diary entries for easy storage and sharing.

– Customization and personalization: Support for customizing emoticons, backgrounds, bubbles, and more.

Develop a website for an MBTI personality test.
Top: Large display of personality types +
Mid section: Dimension analysis + detailed interpretation.
Bottom: Share button + entry point for “View more personality interpretations”.

A lightweight puzzle game – TapBlocker: Digital Block Breaker.
The background features a bright-colored pixel grid.
There’s a banner that reads, “Challenge Your Brain Speed!”
The game area is depicted using canvas, showing digital blocks falling from the top.
Each square contains a random number between 1 and 20.
The player must click on two or three blocks to make the sum of their numbers equal to the target value.
One life lost for each mistake (maximum of three lives).
There are scores at the bottom.❤️Life and leaderboard access.
Effects include falling animations, zooming-in explosions upon clicking, and color transitions based on numerical values…

Develop a single-page application – TeaType: a milk tea personality prediction machine.
The UI should feature a gradient background transitioning from pink-orange to creamy white, with a teacup and heart logo at the top. Complement this with a title in a caramel brown font style. The entire page should include card-style steps for selection, culminating in the generation of a result image card that can be saved with a single click. The overall style aims to evoke the feeling of “ordering at a milk tea shop + fortune-telling.”

The background features a gradual transition from pure black to deep blue, with a slight sense of stars floating at the top.
A gradient light sphere that “breathes” will be placed in the center of the page.
Touching the energy ball will play white noise, and the color scheme will change based on the type of sound.
There are three buttons at the bottom: mute sound, adjust volume, and switch to full screen.
All animations follow a gentle approach, aiming to make the user feel focused rather than distracted.

MoodPalette Mood Color Palette
Background container featuring dynamic gradients and floating bubbles.
Gradient-tinted border text, centered display.
A drag-and-drop color strip selector to represent different moods.
A preview card to display and copy CSS gradient code.
A bottom section for placing a short mood quote and functional buttons.

Develop a classic sliding puzzle game. A 3x3 grid with nine squares, numbered blocks from 1 to 8, with one empty space. Players complete the arrangement from left to right and top to bottom by clicking or sliding the blocks.
To access the main page, click “Start Mini game” to enter the main interface. The puzzle can be interacted with, and there are victory indicators and a restart button. The overall style is inspired by early mobile games, featuring simple cartoon-style colors and subtle animations.

Develop a creative dice generator called “IdeaDice”.
Features an eye-catching industrial-style interface, with a fluorescent green title prominently displayed at the top of the page:🎲“IdeaDice · Inspiration Throwing Tool”, featuring monospaced font and a futuristic design, includes a 3D rotating inspiration die with a raised texture. Each side of the die features a different keyword. Clicking the “Roll” button initiates the rotation of the die. Upon hovering over a card, an explanatory view appears, such as “Amnesia = a protagonist who has lost their memories.” The tool also supports exporting and generating posters.

Develop a single-page inventory tool called “ListLab” – it should not only support functions like adding, editing, dragging, and exporting, but also provide visual themes of glass mimicry, paper wind, and minimalist dark mode.
The top features the app name and an input box for adding entries. In the middle lies the task list area, while at the bottom are buttons for theme switching, exporting, and clearing.

I want to create a small page called “MoodSpark.” When you click a button, it will display a happy task with emojis. I plan to develop this using UniApp. The design doesn’t need to be complex, but the atmosphere should be engaging.
The interface looks something like this:
Use an overall aurora gradient background (e.g., from #B721FF to #21D4FD); it’s best if it’s interactive.
A circular button in the center.✨ Tap to restore the sense of ceremony,” soft light + breathing effects.
After selecting an option, a task card appears, featuring a mimetic design, emojis, and a brief instruction line.
Below, you’ll find two buttons: “Change” and “Export Image.” Export in PNG format.

I want to create a drag-and-drop experience using UniApp, where cards can be dropped into a washing machine for cleaning. It should include drag-and-drop feedback, background bubble animations, gurgling sound effects, and a washing machine animation.
1. Play the “gulp-gulp” sound.
2. The card gradually fades away. 12.
3. A pop-up message reads, “Clean!”.
4. Bottom update: “Cleaned X items today” statistics.

I need to build a photo compression tool called ImgShrink, using Vue 3 and the browser-image-compression library. 
1. Functional requirements:
Drag and drop an image to upload it.
Set the compression ratio and output format to display a comparison of the original image size and the compressed image size.
Batch processing and exporting Zip packages.
2. Your Requirements:
“Darkroom Photography” theme.
Gray-black background + spotlight preview.

Personal reading notes.
Functional explaination.
Note management.
Add New Notes: Users can add reading notes that include book titles, authors, headings, content, and tags.
Note Display: All notes are presented in the form of cards, with highlighted key content.
Note Search: Real-time search functionality that allows you to filter notes based on keywords.
Book management.
Add new books: Users can add new books, including title, author, category, and reading status.
Reading status tracking: distinguishing between the three states of “completed reading”, “currently reading”, and “want to read”.
Reading statistics: Automatically counts the number of books in each state.
Reading objectives.
Annual Reading Goal: Displays the progress made towards completing annual reading goals.
Progress Visualization: Completion status is clearly displayed through a progress bar.
Categorization and Labeling
Book categorization: Organize books into thematic categories (psychology, literary fiction, technology, etc.).
Tagging System: Add tags to notes for easy categorization and retrieval.
Interface design.
Minimalist style: Simple design featuring a predominance of light blue hues.
Responsive layout: Adapts to different device screen sizes.
Interactive effects: hover effect for cards, enhancing user experience.

Simple Ledger is a lightweight personal financial management tool designed to help users easily record their daily income and expenses, and provide clear financial analysis through intuitive data visualization features. The app features a modern interface design, making it easy to use and suitable for users of all types.
Core functions
1. Management of income and expenditure records
Quick bookkeeping: Quickly add a record of income or expenses with the "Book a Bill" button
Two-way accounting: supports two types of accounting for income and expenditure
Classification Management: Pre-set multiple income and expenditure classifications to facilitate financial analysis
Date Recording: Accounts can be made on any date and supports recording historical transactions
Note Feature: Add detailed descriptions to each transaction for later inquiry
2. Transaction records view
Transaction List: Show all transaction records in reverse order of time
Type Filter: You can filter to see all, income only, or expenditure only transaction records
Time Filtering: Support time-range filtering by this month, this week, today
Deletion feature: You can delete any historical transaction record
3. Financial Statistical Analysis
Monthly summary: showing total income, total expenditure and balance for the month
Disaggregated statistics: a pie chart shows intuitively the percentage of income and expenditure classified
Trend Analysis: Showing trends in balance of payments change over the past 6 months through a line chart
Real-time Updates: All statistical charts are automatically updated when data changes
4. Data visualization
Income classification chart: visually showing the proportion of income in all categories
Spending classification chart: clearly showing the proportional distribution of various types of expenditure
Monthly trend chart: showing trends in revenue and expenditure over the past six months
Interactive charts: Support chart hovering to view detailed data
5. Local data storage
Automatic storage: All transaction records are automatically saved to local browser storage
Data Persistence: Data won't be lost after closing the browser

The Weight Tracking System is a web application designed specifically for users to manage their weight and monitor their health. Through an intuitive interface and extensive data visualization features, it helps users scientifically record, analyze, and manage their weight changes, thus achieving their goals of healthy weight management.
Core functions
1. Weight Record Management
Add weight records: Users can enter weight data, dates, notes, etc.
View History: Displays recent weight records in a list, including date, weight value, and trends
Editing and Deleting: Supports the modification or deletion of existing weight records
Optional body data: In addition to body weight, body data such as height and body fat percentage can be recorded
2. Data visualization
Weight Trend Chart: Show trends in weight change visually with a line or column chart
Time-range screening: Support to see weight changes this month, nearly three months, nearly six months, and nearly a year
Chart type switching: You can switch between line charts and column charts to meet different data viewing needs
3. Target Setting and Tracking
Set target weight: Users can set a target weight and a target date
Progress Tracking: Through the progress bar, you can visualize the difference between your current weight and your target weight
Estimated number of days to reach the target: Based on the current weight loss / weight gain rate, estimate the number of days required to reach your target
4. Analysis of health indicators
BMI calculation: automatic calculation of BMI based on weight and height
BMI classification display: visual display of BMI category (lean, normal, overweight, obese)
Weight change statistics: shows key indicators such as total weight loss, average weekly change, etc.
5. Data Statistics and Analysis
Total Weight Loss / Increase: Shows the total weight changes from the initial record to the present
Average Weekly Change: Calculate the average weekly weight change
Statistics on number of days recorded: Shows the total number of days that have been recorded
Trend forecasting: predicting future weight change trends based on historical data

Core functions
1. Photo Upload & Preview
Multiple Upload Modes: Supports both click selection and drag uploads
Format restrictions: support jpg, png, webp format pictures
Size limit: File size does not exceed 5 MB
Real-time preview: Image preview is automatically displayed after uploading, images over 300 x 300 px will be scaled
2. ASCII conversion function
Real-time conversion: automatic ASCII conversion after uploading images
Grayscale processing: Calculate pixel grayscale using the method of adding weights (0.299 × R + 0.587 × G + 0.114 × B)
Character mapping: mapping to different ASCII characters based on grayscale values
Performance optimization: Use separated sampling techniques for large images to avoid processing kartons
3. Parameter adjustment
Character density: The output width (50-200 characters) is adjusted by a slider, with height calculated automatically on a scale
Characterset Selection: Two character sets are available in the Lite version (10 characters) and the full version (32 characters)
Anti-color effect: Supports switching between two display modes: black-and-white text and black-and white text
Font size: Adjustable display size of ASCII text (6-16px)
4. Results processing
Copy function: Copy ASCII text to clipboard with one click
Download Feature: Save ASCII results as txt text file
Reset function: Clear the current processing results and start again
5. Interface Design
Dark / Light Mode: Supports switching between dark and light display themes
Responsive layout: adaptive screen sizes for PC and mobile
Operational feedback: All operations have clear visual feedback and status hints
How to use it
Upload Pictures
Click on the upload area or drag the picture to the upload area
A preview of the image will be displayed after successful upload and ASCII conversion will be performed automatically
Adjust the parameters
Character Density: Drag the slider to adjust the width of the ASCII image, the larger the value, the more detailed
Font Sets: Selecting different font sets can change the presentation of ASCII images
Reduced version: Using 10 characters, better contrast
Full Version: Use 32 characters, richer gray level
Anti-color effect: The switch can be switched between white on black and black on white
Font Size: Resize the display of ASCII text for easy viewing details
Results of processing
Copy: Click the "Copy ASCII" button to copy the results to the clipboard
Download: Click the "Download Results" button to save the ASCII text as a txt file
Reset: Click the "Reset" button to clear the current result and start a new conversion
Technology Implementation
Image processing: Processing image pixel data using the HTML5 Canvas API
File processing: Read uploaded picture files using the FileReader API
Interface interaction: Use native JavaScript for all interactive functions
Style Design: Responsive Layout and Theme Switching with CSS3
Optimize the direction
Color ASCII support: Add color ASCII mode to retain the color information of the picture
Edge Detection Enhancement: Add an edge detection algorithm to enhance the contour representation of ASCII images
Mobile Touch Optimization: Optimizing the Touch Interaction Experience on Mobile Devices
Performance Dxplaination
When processing large images (≥ 1000px), there may be a brief stutter due to the large increase in pixel computation.The current solution is:

Use separated sampling of large images to reduce the number of pixels processed
Use asynchronous processing to avoid blocking UI threads
Add loading prompts in processing to enhance user experience

Functional Dxplaination
Basic functions
Add tasks: Users can enter task content, set priorities and deadlines, then click the "Add" button or press the back button to add a new task.
View tasks: All added tasks are displayed in the task list, including task content, priority markers, and deadlines.
Completing a task: The circular check box before clicking on a task can mark a task as completed. A completed task will be marked with a deleted line.
Delete tasks: Click the trash can icon to the right of the task to delete the task.
Clear completed tasks: Click the "Clear completed" button at the bottom to delete all completed tasks at once.
Advanced Features
Mission priorities:

High priority: red marking
Medium priority: orange mark
Low priority: green marking
Task filtering:

All: Show all tasks
Unfinished: Only unfinished tasks are shown
Completed: Only tasks that have been completed show
Order of tasks:

Ordered by priority: High priority tasks are ahead
Sort by deadline: The tasks nearest the deadline are ahead
Ordered by when added: The most recently added task comes first
Deadline shows:

Those that expire today are shown as "today"
Those that expire tomorrow are shown as "tomorrow"
Other dates are shown as "month + date"
Outdated mission dates are displayed in red with a warning icon
Data Persistence:

Use the localStorage of Liudian to save task data, close the page and open it again to see the previous task

Create a loading animation generator.
A text input field: Allow users to freely enter style-related keywords.

A preview area: displays animation effects in real-time.

A “Copy CSS” button: allows for direct extraction and generation of code.

A download button: Export the HTML + CSS file as a snippet for use.

Multiple style templates: everything from “minimalist animations” to “dark tech.”

Create a 3D card flip gallery, with the following key features:
1. 3D card flip effect (triggered upon hovering)
2. Infinite scrolling feature.
3. Parallax effect
4. Non-pure white background.
5. Try to avoid scrolling through the page (it might be set to a fixed viewport size).
Technical solution considerations:
Using pure HTML/CSS/JavaScript to achieve 3D effects can be done by utilizing CSS transform and perspective properties.
Infinite scrolling can be achieved through the dynamic loading of cards.
The parallax effect can be achieved by listening to mouse movements and adjusting the movement speeds of different layers.
The background can be made using gradients or patterns.
Implementation steps plan:
1. Create a project folder structure.
2. Design the HTML structure.
3. Implement basic CSS styles and 3D flip effects.
4. Add JavaScript to enable infinite scrolling and parallax effects.
5. Enhance visual aesthetics and interactive experiences.

Develop an electronic signature design tool
✏️ Multiple signature styles
You can choose to generate a different style of signature template, or you can write your own handwriting. We support the following styles:

Writing Naturally: Restore the flow and feel of a real handwritten signature;

Elegant calligraphy: suitable for formal occasions, such as contracts or job resumes;

Art floral objects: suitable for English signatures, electronic invitations;

Minimal signature style: the lines are simple and very modern;

Street graffiti: irregular but highly personal, with a preference for creative use.

🖌️Handwriting and Paint Board Adjusting
Calibration of brush thickness, color, and transparency

Background selection (pure white, transparent, imitation paper print)

Model writing tools such as pens / pens / ballpoint pens

Bring your own handwriting optimization algorithm to correct shivering lines

Preview curve smoothing in real time

💼Compatible with multiple export formats
Support for PNG / SVG / JPG export

Support background transparency / With a signature diagram / Add date time

Can be dragged directly into contract documents, resumes or PowerPoint

Create a 3D rotating photo album.
1. Functional Requirements:
3D rotating photo album effect.
There is a page layout.
Non-pure white background.
Try not to scroll through the content.
2. Design flexibility: Users are granted complete freedom in their design choices, as long as the final result looks appealing.
3. Technical Options:
Implemented using HTML/CSS/JavaScript.
Consider using CSS3D transformations and animations.
Some image resources may be required as part of the photo album content. The task execution plan is as follows:
1. Create a project folder structure.
2. Design the structure of the HTML page.
3. Implement CSS styles (including 3D effects and non-pure white backgrounds).
4. Add WavaScript to enable interactive rotations.