邱宇

I need to develop a tool for processing nine-grid images. This tool should have two modes: image slicing and image compositing, along with a user-friendly interface and convenient download functionality.

I want you to act as the founder of a startup and create a landing page for the launch of my product.
Utilize a dark mode or glassmorphism design style.
Utilize a responsive grid layout (CSS Grid/Flexbox).
Use large font sizes (Big Typography) to emphasize headings and create a striking effect.
There should be ample white space between elements to prevent overcrowding.

I want you to act as a web developer and please write some code for me that will allow users to upload images to the website.
Visual style: Features a modern, minimalist Material Design aesthetic, with a soft light gray background and rounded corners and shadows on the cards.
Upload area:
A rectangular area with a dotted border is displayed, with a prominent upload icon (such as a cloud upload icon) placed in the center.
Include clear title text (e.g., “Click to upload or drag an image here”).
Include a small note explaining it (e.g., “Supports JPG, PNG, GIF formats with a maximum size of 5MB.”)

I want you to act as a web developer and please write some code for me to create a tooltip feature for a website.
Aesthetic Design: Features the “bubble card” style, with a dark background, white text, and a subtle, blurred frosted glass effect.
Rounded Corners and Shadows: Use larger rounded corners and add gentle shadows to make them float above the page.
Arrow Indicator: There should be a small triangular arrow at the corner of the tooltip box, accurately pointing towards the element that triggered it.
Show/hide delay:
Mouse hover: When the mouse cursor hovers over the triggering element, a prompt will be displayed with a 200ms delay (to prevent accidental interactions).
Hidden logic: disappears immediately after the mouse pointer moves away.

I want you to act as a web developer and please write some code for me to create a pagination feature for my website.
Design Style: Adopts a modern Material Design style. Buttons should have rounded corners, simple background colors, and a distinct color highlight when selected.
Layout Method: Utilize CSS Flexbox or Grid layouts to ensure that the pagination components are horizontally centered within the container.
Responsive design: On mobile device screens, hide the middle-section page number buttons (e.g., display as 1 … 5 6 7 … 10) to ensure that the layout does not become distorted.

I would like you to assume the role of a web developer. Please write some code for me that will allow users to submit a contact form and send the form data to an email address.
Design Style: Adopt a modern minimalist style, with a dark mode or a clean white background. Use CSS Grid or Flexbox for layout.
Form field:
Name: Text input field.
E-mail: Email input field.
Topic: Dropdown selection box (containing options: partnership inquiries, technical support, feedback, other).
Message Content: Multi-line text field.
Submit button: Eye-catching color with hover effect.
Responsive: On mobile device screens, form fields should automatically transition to a single-column, full-width layout.

I want you to act as a web developer and please write some code for me that will allow users to filter search results on the website.
Overall Structure: Utilizes a layout pattern featuring a “sidebar + main content area.”
Left side (filtering area): occupies 25% of the width and includes various filtering controls.
Right side (Results section): Occupies 75% of the width and displays data in the form of a card grid.
Keyword search box: Located at the top, featuring a “magnifying glass” icon. It supports fuzzy searches based on titles or descriptions.

I want you to act as a web developer and please write some code for me to create a delayed-loading feature for the website.
Once the actual images have been loaded, they should not be abruptly “popped” out.
The fade-in effect must be achieved using CSS opacity and transform properties, with a duration of 0.3 seconds for the animation.

I want you to act as a web developer and please write some code for me to create a responsive grid layout for a website.
Each grid item is a card with a rounded border (border-radius: 12px) and a subtle shadow (box-shadow), creating a sense of “floating.”
The card’s interior features: a full-width image, a title, a brief description, and a functional button.

I want you to act as a web developer and please write some code for me to create a countdown timer for the website.
Design Style: Utilize the “digital card flip” or “neon light” style. The background should be dark (e.g., #121212), while the digits should be bright (e.g., white or the brand’s primary color).
Layout structure:
The countdown timer is divided into four main sections: days, hours, minutes, and seconds.
Each block consists of a large display area for numbers and a small label text (such as “Days,” “Hours”).
Use colons (:) or slashes (/) as separators between blocks, and add a subtle pulse animation effect.
Numeric style: Numerals are displayed using monospaced font (Monospace) to ensure consistent width and greater visual stability.

Act as a Web Developer. Your task is to write HTML, CSS, and JavaScript code to create a modal window for a website.

You will:
- Implement a masking layer that covers the entire viewport with a semi-transparent dark gray color (rgba(0,0,0,0.5)).
- Ensure clicking on the mask will close the modal window.
- Include a fade-in effect for the mask when it appears.
- Design a content container with a card-style appearance, rounded corners, and subtle shadows.
- Center the content container vertically and horizontally within the viewport, maintaining its position upon window resizing.

Rules:
- Use 80vw for the modal width and 60vh for the modal height.

I want you to act as a web developer and please write some code for me to create breadcrumb navigation for a website.
Design Style:
The design features a simple, understated style, with a background that can be light gray or transparent, featuring subtle internal shadows or rounded edges, giving it the appearance of a label.
The font size is moderate, and the colors are dark gray. The link color changes to the main color when hovered over.

I want you to act as a web developer and please write some code for me to create a real-time search feature for the website.
Search bar:
An input field with a “Magnifying Glass” icon, featuring a simple design.
There is a distinct visual feedback when gaining focus (e.g., the border changes color).
Result dropdown panel:
Located below the search bar, with a white background and some shadowing. The z-index should be higher than that of any other content on the page.
If results are found, display a list of matching items; if no results are found, display a message indicating “No relevant results found.”
The panel needs to support a maximum height restriction. If it exceeds this limit, internal scrolling should be implemented to prevent obscuring page content.

I want you to act as a web developer and please write some code for me to create a lightbox effect for the images on the website.
Enable/disable animation:
When opened: The image should “inflate” from its thumbnail position to its final location (with a zoom animation), accompanied by a fade-in effect for the mask layer. This requires obtaining the position of the thumbnail using the `getBoundingClientRect()` method.
When closed: The animation plays in reverse, and the image shrinks back to its thumbnail size.
Animations require the use of transform and transition to achieve a smooth 60fps.
Navigation features:
If a page contains multiple lightbox images, support for “Previous” and “Next” buttons should be provided.
Use the keyboard arrow keys (left/right arrows) to switch between images.

I want you to act as a web developer and please write some code for me to create a “Go to top” button for the website.
Design Style: Features a circular floating button design with a background in the theme color (such as blue or the brand’s color) and a white arrow icon.
Position: Fixedly positioned in the lower-right corner of the viewport, 20px from the bottom and the right edge.
Shading: Features gentle shading, giving the impression that it is floating above the page.
Icons: Use SVG icons or font-based icons, with the arrow pointing upwards.

I want you to act as a web developer and please write some code for me to create a hover effect for images on a website.
Image transformation:
When the mouse cursor hovers over the image, it should be slightly zoomed in to create a sense of “closeness.”
The saturation of the images should be appropriately increased to make them appear more vibrant and striking.

I want you to act as a web developer and please write some code for me to create a push notification feature for a website.
Do not immediately display the authorization pop-up when the page loads. This can scare users away. Implement a “soft prompt” mechanism: first, display a friendly, custom banner explaining why notifications are necessary, and then, after the user clicks “Agree,” trigger the browser’s native authorization request.

I want you to act as a web developer and please write some code for me that will allow users to zoom in and out of images on a website.
When a user moves the mouse cursor into the image container, the image should be enlarged around the current mouse position (similar to a simplified version of the “zoom” effect, where the entire image is scaled up).
The mouse cursor smoothly returns to its original state when it is moved out of the area.
Key Points: When zooming in, the image should not extend beyond the boundaries of the container, and the mouse pointer should always remain in the corresponding position within the zoomed-in area (i.e., the zoom center point follows the mouse).

I want you to act as a web developer and please write some code for me to create a fixed header for the website.
The initial state background is semi-transparent or solid color.
When a user scrolls down the page (not just when the mouse cursor hovers), a subtle bottom shadow (box-shadow) should be added to the header to enhance visual hierarchy and distinguish it from the content area.

I want you to act as a web developer and please write some code for me to create an accordion menu for a website.
Design Style:
The design features a card-style layout, with subtle shadows or borders on each panel.
The currently displayed panel should have visual emphasis (such as a highlighted border on the left/top side or a subtle adjustment to the background color).
Icon indications:
There is a small icon next to the title (usually a downward/upward arrow or a plus/minus sign).
Icons must rotate 180 degrees along with the state of the panel (e.g., an arrow pointing downward indicates that it is expanded, while an arrow pointing right indicates that it is collapsed).

I want you to act as a web developer and please write some code for me to create a sliding navigation menu for my website.
Gesture support:
On touchscreen devices, it is possible to swipe from the edge of the screen to open a menu.
Support for sliding within the menu area to close the menu (slide follows the finger).
Edge detection: If it’s on a desktop, clicking outside of the menu (or the mask layer) should close the menu.

I want you to act as a web developer and please write some code for me to create a form validation feature for a website.
Format validation:
Email address: Must conform to the standard email format (including @ and a domain name).
Phone number: Perform regular expression matching based on the target region (e.g., Chinese phone number).
Password: Strength check (e.g., at least 8 characters, including both uppercase and lowercase letters, as well as numbers).
Confirm password: Must be exactly the same as the “Password” field.

I want you to act as a web developer and please write some code for me to create a picture carousel for the website.
Automatic playback:
The carousel will automatically start after the components have been loaded, with an interval of 3 seconds.
When a user hovers their mouse over the carousel image, automatic playback is paused; playback resumes once the mouse is moved away.
If a user manually clicks the navigation button, the automatic playback timer should be reset.

I want you to act as a web developer and please write some code for me to create a responsive video player for a website.
Play/Pause: The button icon must switch dynamically based on the state (display “Pause” icon while playing, “Play” icon while paused).
Progress bar:
Displays the current playback time / total duration.
The progress bar supports clicking to navigate (Seek).
Displays the progress of buffering (the percentage of loading, usually shown in a lighter color against the progress bar background).
Volume control:
Tap the mute button. The icon will change to indicate that it is muted, and the volume slider will be set to zero.
Display the volume slider when hovering over or focusing on the screen.