Vibecoding提示词

4 个提示词

文本

扮演 GitHub 仓库分析师。你是软件开发与仓库管理专家，在代码分析、文档与 GitHub 社区互动方面经验丰富。

扮演 GitHub 仓库分析师。你是软件开发与仓库管理专家，在代码分析、文档与 GitHub 社区互动方面经验丰富。目标是协助非开发者/非程序员的初级自由职业者，理解并利用 GitHub 开源仓库开展专业自由职业工作。

### 任务概览
对给定 GitHub 仓库做全面分析。提供清晰详细说明与面向非技术受众的分步指引。分析应聚焦仓库目的、代码结构与安装流程，并给出改进建议。

### 职责
1. **仓库分析**
   - **结构审阅**：检查并描述代码结构，用简单非技术语言突出关键函数及其作用。
   - **目的说明**：清晰解释仓库目的与功能，适合普通用户。

2. **安装说明**
   - 提供详细、新手友好的个人电脑安装指引。

3. **文档审阅**
   - 评估 README 完整性与清晰度。
   - 建议改进或替代方案以增强理解。

4. **代码评估**
   - 评估一致性、质量与 GitHub 最佳实践符合度。

5. **社区参与**
   - 分析提交历史中的重要信息与频率。
   - 评估议题管理与 PR 以衡量社区参与。

6. **建议**
   - 提供 GitHub 上可替代付费开源软件的选项。
   - 确保建议可执行且详细，用例子澄清复杂概念。

### 指南
- 保持清晰结构化分析。
- 使用适合初学者的语言。
- 尽可能用例子说明复杂概念。

### 变量
- **GitHub Repository URL**：要分析的仓库 URL。
- **User's Skill Level**：Beginner

你的分析应赋能用户有效理解并利用该仓库开展自由职业，同时提供改进与替代洞见。

Vibecoding GitHub GitHub Actions+1

Y@ysamsonovich83

用 ygo agent 项目构建能与职业玩家对战 Master Duel 的 AI

文本

围绕「用 ygo agent 项目构建能与职业玩家对战 Master Duel 的 AI」的任务说明。

【中文任务：用 ygo agent 项目构建能与职业玩家对战 Master Duel 的 AI】

I wanna build an AI that can learning a deck in Master duel called Kewl Tune that can win against pro players with differents decks , This AI can build combos and evo his level with a tool called ygo agent on git hub and with Kaggle Notebook , Im vibe coder have a little bit of info about python and linux commands , This project is only for fun

Advanced AI Tools Vibecoding+1

B@bherahibherahi56

URL 缩短服务 — 全栈应用

文本

围绕「URL 缩短服务 — 全栈应用」的提示词任务说明。

# URL 缩短服务 — 全栈应用

你是「URL 缩短服务 — 全栈应用」相关专家代理。先明确目标与约束，再给出可执行、可验证的产出；区分必须项与可选项。

以下保留原提示词正文供结构与占位符对齐：

## 🚀 URL Shortening Service — Full-Stack Application

### 📋 Project Overview
Build a production-ready, full-stack URL shortening service with a modern, accessible frontend and a robust RESTful backend API. The application must handle the complete lifecycle of shortened links: creation, redirection, tracking, management, and expiration. Prioritize performance, security, and an exceptional user experience across all devices.

---

### 🛠️ Tech Stack

**Frontend:**
- Semantic HTML5 with ARIA attributes for accessibility (WCAG 2.1 AA compliance)
- CSS3 with CSS Custom Properties (variables), Flexbox, and CSS Grid
- Vanilla JavaScript (ES2022+) using modular architecture (ES Modules)
- No heavy frameworks — keep the bundle lightweight and fast

**Backend API:**
- RESTful API design following OpenAPI 3.0 specification
- JSON request/response format with proper HTTP status codes
- CORS configuration for cross-origin requests
- Rate limiting per IP and per API key

**Libraries (CDN or bundled):**
- QR Code generation (e.g., `qrcode.js` or `qr-creator`)
- Charting library for analytics (e.g., Chart.js or lightweight alternative)
- Date picker for expiration (e.g., `flatpickr`)
- Toast notification system (custom-built, no dependency)

---

### 🎨 Frontend — UI/UX Requirements

**Layout & Design:**
- Clean, minimalist design with a hero section featuring a **large, prominent URL input field** centered on the page
- Implement a **dark/light mode toggle** with system preference detection (`prefers-color-scheme`) and `localStorage` persistence
- Use a consistent design system: typography scale, spacing tokens, color palette
- Smooth micro-animations and transitions (fade-ins, slide-ups, button ripples) for all interactive elements
- Skeleton loading states for async content (analytics, history table)

**Responsive Design:**
- Mobile-first approach with breakpoints at 480px, 768px, 1024px, and 1440px
- Touch-friendly tap targets (minimum 44×44px)
- Collapsible navigation menu on mobile (hamburger menu with animation)
- Fluid typography using `clamp()`

**Accessibility:**
- Full keyboard navigation support (tab order, focus trapping in modals)
- Screen reader announcements for dynamic content (`aria-live` regions)
- Visible focus indicators on all interactive elements
- Sufficient color contrast ratios (minimum 4.5:1 for text)
- Reduced motion support (`prefers-reduced-motion`)

---

### ⚙️ Core Features

#### 1. URL Shortening Engine
- Prominent input field with placeholder text and real-time validation feedback
- **URL validation**: Check for valid protocol (`http://`, `https://`), proper domain structure, and reject malformed URLs using both regex and the `URL` constructor API
- **URL sanitization**: Strip tracking parameters (UTM, fbclid, gclid), remove redundant slashes, normalize protocol and case
- Auto-prepend `https://` if no protocol is provided
- Display the shortened URL immediately after creation with a success animation
- **Bulk URL shortening**: Allow users to paste multiple URLs (one per line) and shorten them all at once

#### 2. Custom Alias Support
- Optional custom alias field (e.g., `short.ly/my-brand`)
- Real-time availability check as the user types (debounced API call, 300ms)
- Alias validation rules: alphanumeric, hyphens, underscores only; 3–30 characters; reserved word blacklist (e.g., `admin`, `api`, `login`, `static`)
- Clear error messaging if the alias is taken or invalid

#### 3. QR Code Generation
- Auto-generate a QR code for every shortened URL upon creation
- QR code modal/panel with options to:
  - Download as PNG (high resolution, 1024×1024)
  - Download as SVG (vector, scalable)
  - Customize foreground/background colors
  - Add a small logo overlay in the center (optional)
- Ensure QR codes encode the full shortened URL and are scannable at small sizes

#### 4. Click Tracking & Analytics Dashboard
- Track every redirect with the following data points:
  - Timestamp (UTC)
  - Country and city (via IP geolocation API)
  - Device type (mobile, tablet, desktop)
  - Operating system and browser (via User-Agent parsing)
  - Referrer URL
  - Unique vs. returning visitor (via cookie/fingerprint)
- **Analytics Dashboard** per link including:
  - Total clicks and unique clicks counters
  - Clicks over time line chart (filterable: last 24h, 7d, 30d, 90d, all time)
  - Geographic distribution map or bar chart (top 10 countries)
  - Device/OS/Browser breakdown (donut or pie charts)
  - Top referrers table
  - Click heatmap by day of week and hour of day
- Aggregate analytics overview on the main dashboard (total links, total clicks, most popular link)

#### 5. Link Expiration
- Optional expiration date/time picker when creating a link
- Support presets: 1 hour, 24 hours, 7 days, 30 days, custom date
- Display a countdown or "expires in X" badge on active links
- Automatically deactivate expired links and show a friendly "This link has expired" page on redirect attempts
- Allow users to extend or remove expiration on existing links

#### 6. Password Protection
- Optional password toggle when creating a link
- If enabled, show a password input gate page before redirecting to the target URL
- Hash passwords server-side using bcrypt or Argon2 (never store plaintext)
- Rate-limit password attempts (max 5 per minute per IP) with lockout messaging
- Visual indicator (lock icon 🔒) on password-protected links in the history view

#### 7. Copy-to-Clipboard
- One-click copy button next to every shortened URL
- Use the Clipboard API (`navigator.clipboard.writeText()`) with fallback to `document.execCommand('copy')`
- Visual confirmation: button icon changes to a checkmark ✅ with a "Copied!" tooltip/toast that auto-dismisses after 2 seconds
- Keyboard shortcut support (e.g., `Ctrl+Shift+C` to copy the most recently created link)

#### 8. URL History & Management
- Persistent history table/grid of all shortened URLs (stored in `localStorage` for guests, database for authenticated users)
- Each entry displays: original URL (truncated with tooltip), short URL, creation date, click count, status (active/expired/password-protected), and action buttons
- **Search**: Full-text search across original URLs, aliases, and tags
- **Filtering**: By status (active, expired, protected), date range, click count range, and tags
- **Sorting**: By creation date, click count, alphabetically (ascending/descending)
- **Pagination or infinite scroll** for large histories (25 items per page)
- **Bulk actions**: Select multiple links to delete, disable, or export as CSV/JSON
- **Tags/Labels**: Allow users to add custom tags to organize links (e.g., "marketing", "social", "campaign-q4")

---

### 🔒 Security Requirements
- Input sanitization on both client and server to prevent XSS attacks
- CSRF protection on all state-changing API endpoints
- Validate and sanitize redirect targets to prevent open redirect vulnerabilities (whitelist allowed protocols, block `javascript:`, `data:`, `file:` schemes)
- Implement Content Security Policy (CSP) headers
- Rate limiting: max 20 link creations per minute per IP; max 100 API requests per minute
- Secure HTTP headers: `X-Content-Type-Options`, `X-Frame-Options`, `Strict-Transport-Security`
- Never expose internal IDs; use nanoid or UUID for public link identifiers

---

### ⚡ Performance Requirements
- Target Lighthouse scores: Performance >90, Accessibility >95, Best Practices >95, SEO >90
- Lazy-load analytics charts and non-critical assets
- Debounce all search and validation inputs
- Use `IntersectionObserver` for scroll-based animations and lazy loading
- Minimize reflows and repaints; use CSS `transform` and `opacity` for animations
- Cache API responses where appropriate (e.g., analytics data with 60s TTL)
- Redirects should resolve in under 100ms server-side

---

### 🧪 Error Handling & Edge Cases
- Graceful error messages for: network failures, API timeouts, invalid URLs, duplicate aliases, server errors (500), rate limit exceeded (429)
- Offline detection: show a banner when the user loses connectivity and queue actions for retry
- Handle extremely long URLs (up to 2048 characters) without breaking the layout
- Handle Unicode/internationalized domain names (IDN) correctly
- Empty state illustrations for when the user has no links or no analytics data

---

### 📁 Deliverables
1. Complete, well-commented source code with a clear folder structure
2. `README.md` with setup instructions, API documentation, and feature list
3. API endpoint reference table (method, path, parameters, response format)
4. A `demo` mode with sample data pre-loaded for immediate preview
5. Responsive across Chrome, Firefox, Safari, and Edge (latest 2 versions)

---

> **Note:** Build this incrementally — start with the core shortening flow (input → validate → shorten → display → copy), then layer on QR codes, analytics, custom aliases, expiration, password protection, and the full history dashboard. Ensure each feature is fully functional and tested before moving to the next.

Security JavaScript Vibecoding+5

A@alejandrogarciagaray

赛博朋克像素风 Lo-Fi 立体景：单 HTML 无限循环动画

文本

在一个 HTML 文件里做出可无限循环的像素风赛博朋克微缩场景动画。

你是「赛博朋克像素风 Lo-Fi 立体景：单 HTML 无限循环动画」。请按下列中文说明执行；完整原提示词正文保留于后，供结构、占位符与技术细节对齐。

## 中文任务说明
在一个 HTML 文件里做出可无限循环的像素风赛博朋克微缩场景动画。

以下保留原提示词正文供结构与占位符对齐：

# Build an Immersive, Animated Cyberpunk Pixel-Art Diorama

Create a breathtaking, richly detailed, fully animated cyberpunk pixel-art diorama designed to serve as the endlessly looping visual backdrop for a 10-hour lo-fi music video on YouTube.

I want something genuinely mesmerizing. A tiny, self-contained world that feels alive. The kind of scene viewers can stare at for hours and continually discover little details they hadn't noticed before.

## Creative Direction

Imagine a forgotten corner of a sprawling futuristic megacity, sometime around 2089. It's 2:37 AM. Rain has been falling for days. The streets are soaked, the buildings are ancient and overcrowded, and the city glows with a thousand little signs of life.

The atmosphere should feel simultaneously melancholic, cozy, mysterious, and strangely comforting. This is a world where technology has taken over everything, but human warmth still survives in little pockets.

Think cinematic cyberpunk meets the intimate charm of meticulously crafted pixel-art environments.

Don't settle for a generic neon skyline. Create a place with personality, history, visual storytelling, and a strong sense of depth.

## Visual Composition

Design a beautiful, layered environment with a compelling focal point and plenty of environmental storytelling.

Consider elements such as:

- A tiny apartment or rooftop hideaway overlooking a vast, rain-drenched futuristic city.
- Glowing windows revealing glimpses of other people's lives.
- Holographic advertisements, animated signage, and distant traffic.
- Clusters of air-conditioning units, ventilation ducts, exposed wiring, satellite dishes, and improvised technology.
- Warmly illuminated vending machines, computer terminals, and mysterious electronic equipment.
- Rainwater collecting in puddles and cascading from rooftops.
- Distant elevated trains or flying vehicles silently moving through the mist.
- Tiny human silhouettes occasionally visible behind windows.
- Overgrown plants reclaiming corners of this technological world.

These are creative possibilities, not a mandatory checklist. Make deliberate artistic choices. Prioritize a coherent, memorable composition over cramming everything into the frame.

The scene should feel handcrafted, with exquisite attention to small details.

## Color and Lighting

Build the entire visual identity around dramatic warm/cold contrast.

The outside world is dominated by deep midnight blues, desaturated teals, indigo shadows, and cold cyan rain.

Against this darkness, create beautiful pockets of warmth:

- Rich amber light spilling from apartment windows.
- Soft orange and golden illumination from lamps and electronics.
- Occasional saturated magenta, electric violet, and crimson neon.
- Warm reflections shimmering across cold, wet surfaces.

Use lighting to tell a story. Every illuminated window should feel like a little sanctuary against the enormous, indifferent city.

The overall image should be dark and atmospheric without becoming muddy or losing detail.

## Animation: Make the World Feel Alive

This is absolutely critical.

I don't want a static illustration with a generic rain effect. I want a living pixel-art environment with dozens of subtle, independently animated details.

Build a sophisticated system of layered ambient animations:

### Weather and atmosphere
- Beautiful multi-depth rainfall with varying speeds and intensities.
- Occasional heavier gusts that push rain diagonally.
- Thin layers of drifting fog and atmospheric haze.
- Smoke rising from vents and chimneys, curling into the night.
- Water dripping from ledges and splashing into puddles.
- Ripples spreading across reflective surfaces.

### Lighting and electronics
- Neon signs flickering irregularly, with convincing electrical behavior.
- Screens cycling through mysterious data and advertisements.
- Small indicator lights blinking asynchronously.
- Warm interior lights gently fluctuating.
- Occasional sparks from damaged electrical equipment.
- Animated reflections responding to nearby light sources.

### Environmental life
- Slowly rotating ventilation fans.
- Distant vehicles passing behind buildings.
- Tiny silhouettes moving behind illuminated windows.
- Steam escaping from pipes.
- Hanging cables or signs subtly swaying in the wind.
- Occasional small, unexpected details that reward prolonged viewing.

Every effect should have its own rhythm. Avoid synchronized, repetitive animation that makes the world feel artificial.

## Seamless Infinite Looping

This scene must run beautifully for 10 hours or longer without a visible reset, jump, or discontinuity.

Design every animation to be mathematically seamless or continuously procedural.

Use independent animation cycles, staggered timing, seeded randomness, and layered motion to create the impression of endless organic variation.

No sudden resets. No obvious looping rain textures. No visible animation seams.

The scene should remain interesting over time without becoming distracting.

This is lo-fi music, so the animation should be hypnotic and relaxing rather than chaotic. Reserve dramatic events for rare, carefully controlled moments.

## Pixel-Art Rendering: Non-Negotiable

The visual style must be authentic, razor-sharp pixel art, not a high-resolution illustration with a pixelation filter.

Technical requirements:

- Internal rendering resolution: 640 × 360
- Final presentation resolution: 1920 × 1080
- Exact integer upscale: 3×
- Scaling: nearest-neighbor only
- Every source pixel must become a perfectly sharp 3×3 block.
- Absolutely no bilinear filtering, blurry edges, antialiasing, or subpixel rendering.
- No smooth vector graphics mixed into the pixel-art scene.
- All effects, including particles, rain, fog, reflections, and lighting, must respect the pixel grid.
- Maintain consistent pixel density across every visual layer.

The result should look spectacular on a full-screen 1080p YouTube video, with beautiful, deliberately placed hard pixels.

## Technical Implementation

Build this as a complete, self-contained, real-time animated experience.

Use whatever rendering architecture delivers the best combination of visual quality, performance, and pixel-perfect consistency. HTML5 Canvas, WebGL, or a hybrid approach are all acceptable.

Prioritize:

- Smooth, efficient rendering at 1080p.
- Deterministic, seamless animation.
- Rich visual depth through layered parallax and atmospheric perspective.
- Procedural particle systems for weather and environmental effects.
- Carefully controlled lighting, blending, and reflections.
- Stable performance over extremely long runtimes.
- A fixed camera with no unintended movement or jitter.
- Correct resizing while preserving the 16:9 composition and pixel-perfect scaling.

If useful, implement the world as multiple independently animated layers, all composited at the internal resolution before the final upscale.

Include a way to run the scene full-screen and hide any interface elements so it can be captured cleanly for YouTube.

## Artistic Quality Bar

This should feel like an exceptional piece of animated pixel art, not a programming demonstration.

Composition, atmosphere, color harmony, and environmental storytelling matter just as much as technical sophistication.

Avoid generic procedural rectangles masquerading as buildings. Give the architecture intentional shapes, recognizable structures, believable construction details, and visual variety.

Use foreground silhouettes, middle-ground architecture, and distant city layers to create a strong sense of scale.

Every element should contribute to a cohesive world.

The ultimate goal: A mesmerizing cyberpunk night scene that makes someone wish they could climb through their monitor, sit beside a warm window with a cup of coffee, and listen to the rain falling on a futuristic city that never sleeps.

Make it beautiful. Make it atmospheric. Make it technically excellent. And above all, make it feel alive.

Don't just describe how you would build it. Actually implement the complete working experience.

Deliver the finished piece as a single standalone HTML file (all code inline, no external assets or build step) that runs by opening it in a browser.

Creative Trending JavaScript+7

F@f

扮演 GitHub 仓库分析师。你是软件开发与仓库管理专家，在代码分析、文档与 GitHub 社区互动方面经验丰富。目标是协助非开发者/非程序员的初级自由职业者，理解并利用 GitHub 开源仓库开展专业自由职业工作。 ### 任务概览对给定 GitHub 仓库做全面分析。提供清晰详细说明与面向非技术受众的分步指引。分析应聚焦仓库目的、代码结构与安装流程，并给出改进建议。 ### 职责 1. **仓库分析** - **结构审阅**：检查并描述代码结构，用简单非技术语言突出关键函数及其作用。 - **目的说明**：清晰解释仓库目的与功能，适合普通用户。 2. **安装说明** - 提供详细、新手友好的个人电脑安装指引。 3. **文档审阅** - 评估 README 完整性与清晰度。 - 建议改进或替代方案以增强理解。 4. **代码评估** - 评估一致性、质量与 GitHub 最佳实践符合度。 5. **社区参与** - 分析提交历史中的重要信息与频率。 - 评估议题管理与 PR 以衡量社区参与。 6. **建议** - 提供 GitHub 上可替代付费开源软件的选项。 - 确保建议可执行且详细，用例子澄清复杂概念。 ### 指南 - 保持清晰结构化分析。 - 使用适合初学者的语言。 - 尽可能用例子说明复杂概念。 ### 变量 - **GitHub Repository URL**：要分析的仓库 URL。 - **User's Skill Level**：Beginner 你的分析应赋能用户有效理解并利用该仓库开展自由职业，同时提供改进与替代洞见。

【中文任务：用 ygo agent 项目构建能与职业玩家对战 Master Duel 的 AI】 I wanna build an AI that can learning a deck in Master duel called Kewl Tune that can win against pro players with differents decks , This AI can build combos and evo his level with a tool called ygo agent on git hub and with Kaggle Notebook , Im vibe coder have a little bit of info about python and linux commands , This project is only for fun

# URL 缩短服务 — 全栈应用你是「URL 缩短服务 — 全栈应用」相关专家代理。先明确目标与约束，再给出可执行、可验证的产出；区分必须项与可选项。以下保留原提示词正文供结构与占位符对齐： ## 🚀 URL Shortening Service — Full-Stack Application ### 📋 Project Overview Build a production-ready, full-stack URL shortening service with a modern, accessible frontend and a robust RESTful backend API. The application must handle the complete lifecycle of shortened links: creation, redirection, tracking, management, and expiration. Prioritize performance, security, and an exceptional user experience across all devices. --- ### 🛠️ Tech Stack **Frontend:** - Semantic HTML5 with ARIA attributes for accessibility (WCAG 2.1 AA compliance) - CSS3 with CSS Custom Properties (variables), Flexbox, and CSS Grid - Vanilla JavaScript (ES2022+) using modular architecture (ES Modules) - No heavy frameworks — keep the bundle lightweight and fast **Backend API:** - RESTful API design following OpenAPI 3.0 specification - JSON request/response format with proper HTTP status codes - CORS configuration for cross-origin requests - Rate limiting per IP and per API key **Libraries (CDN or bundled):** - QR Code generation (e.g., `qrcode.js` or `qr-creator`) - Charting library for analytics (e.g., Chart.js or lightweight alternative) - Date picker for expiration (e.g., `flatpickr`) - Toast notification system (custom-built, no dependency) --- ### 🎨 Frontend — UI/UX Requirements **Layout & Design:** - Clean, minimalist design with a hero section featuring a **large, prominent URL input field** centered on the page - Implement a **dark/light mode toggle** with system preference detection (`prefers-color-scheme`) and `localStorage` persistence - Use a consistent design system: typography scale, spacing tokens, color palette - Smooth micro-animations and transitions (fade-ins, slide-ups, button ripples) for all interactive elements - Skeleton loading states for async content (analytics, history table) **Responsive Design:** - Mobile-first approach with breakpoints at 480px, 768px, 1024px, and 1440px - Touch-friendly tap targets (minimum 44×44px) - Collapsible navigation menu on mobile (hamburger menu with animation) - Fluid typography using `clamp()` **Accessibility:** - Full keyboard navigation support (tab order, focus trapping in modals) - Screen reader announcements for dynamic content (`aria-live` regions) - Visible focus indicators on all interactive elements - Sufficient color contrast ratios (minimum 4.5:1 for text) - Reduced motion support (`prefers-reduced-motion`) --- ### ⚙️ Core Features #### 1. URL Shortening Engine - Prominent input field with placeholder text and real-time validation feedback - **URL validation**: Check for valid protocol (`http://`, `https://`), proper domain structure, and reject malformed URLs using both regex and the `URL` constructor API - **URL sanitization**: Strip tracking parameters (UTM, fbclid, gclid), remove redundant slashes, normalize protocol and case - Auto-prepend `https://` if no protocol is provided - Display the shortened URL immediately after creation with a success animation - **Bulk URL shortening**: Allow users to paste multiple URLs (one per line) and shorten them all at once #### 2. Custom Alias Support - Optional custom alias field (e.g., `short.ly/my-brand`) - Real-time availability check as the user types (debounced API call, 300ms) - Alias validation rules: alphanumeric, hyphens, underscores only; 3–30 characters; reserved word blacklist (e.g., `admin`, `api`, `login`, `static`) - Clear error messaging if the alias is taken or invalid #### 3. QR Code Generation - Auto-generate a QR code for every shortened URL upon creation - QR code modal/panel with options to: - Download as PNG (high resolution, 1024×1024) - Download as SVG (vector, scalable) - Customize foreground/background colors - Add a small logo overlay in the center (optional) - Ensure QR codes encode the full shortened URL and are scannable at small sizes #### 4. Click Tracking & Analytics Dashboard - Track every redirect with the following data points: - Timestamp (UTC) - Country and city (via IP geolocation API) - Device type (mobile, tablet, desktop) - Operating system and browser (via User-Agent parsing) - Referrer URL - Unique vs. returning visitor (via cookie/fingerprint) - **Analytics Dashboard** per link including: - Total clicks and unique clicks counters - Clicks over time line chart (filterable: last 24h, 7d, 30d, 90d, all time) - Geographic distribution map or bar chart (top 10 countries) - Device/OS/Browser breakdown (donut or pie charts) - Top referrers table - Click heatmap by day of week and hour of day - Aggregate analytics overview on the main dashboard (total links, total clicks, most popular link) #### 5. Link Expiration - Optional expiration date/time picker when creating a link - Support presets: 1 hour, 24 hours, 7 days, 30 days, custom date - Display a countdown or "expires in X" badge on active links - Automatically deactivate expired links and show a friendly "This link has expired" page on redirect attempts - Allow users to extend or remove expiration on existing links #### 6. Password Protection - Optional password toggle when creating a link - If enabled, show a password input gate page before redirecting to the target URL - Hash passwords server-side using bcrypt or Argon2 (never store plaintext) - Rate-limit password attempts (max 5 per minute per IP) with lockout messaging - Visual indicator (lock icon 🔒) on password-protected links in the history view #### 7. Copy-to-Clipboard - One-click copy button next to every shortened URL - Use the Clipboard API (`navigator.clipboard.writeText()`) with fallback to `document.execCommand('copy')` - Visual confirmation: button icon changes to a checkmark ✅ with a "Copied!" tooltip/toast that auto-dismisses after 2 seconds - Keyboard shortcut support (e.g., `Ctrl+Shift+C` to copy the most recently created link) #### 8. URL History & Management - Persistent history table/grid of all shortened URLs (stored in `localStorage` for guests, database for authenticated users) - Each entry displays: original URL (truncated with tooltip), short URL, creation date, click count, status (active/expired/password-protected), and action buttons - **Search**: Full-text search across original URLs, aliases, and tags - **Filtering**: By status (active, expired, protected), date range, click count range, and tags - **Sorting**: By creation date, click count, alphabetically (ascending/descending) - **Pagination or infinite scroll** for large histories (25 items per page) - **Bulk actions**: Select multiple links to delete, disable, or export as CSV/JSON - **Tags/Labels**: Allow users to add custom tags to organize links (e.g., "marketing", "social", "campaign-q4") --- ### 🔒 Security Requirements - Input sanitization on both client and server to prevent XSS attacks - CSRF protection on all state-changing API endpoints - Validate and sanitize redirect targets to prevent open redirect vulnerabilities (whitelist allowed protocols, block `javascript:`, `data:`, `file:` schemes) - Implement Content Security Policy (CSP) headers - Rate limiting: max 20 link creations per minute per IP; max 100 API requests per minute - Secure HTTP headers: `X-Content-Type-Options`, `X-Frame-Options`, `Strict-Transport-Security` - Never expose internal IDs; use nanoid or UUID for public link identifiers --- ### ⚡ Performance Requirements - Target Lighthouse scores: Performance >90, Accessibility >95, Best Practices >95, SEO >90 - Lazy-load analytics charts and non-critical assets - Debounce all search and validation inputs - Use `IntersectionObserver` for scroll-based animations and lazy loading - Minimize reflows and repaints; use CSS `transform` and `opacity` for animations - Cache API responses where appropriate (e.g., analytics data with 60s TTL) - Redirects should resolve in under 100ms server-side --- ### 🧪 Error Handling & Edge Cases - Graceful error messages for: network failures, API timeouts, invalid URLs, duplicate aliases, server errors (500), rate limit exceeded (429) - Offline detection: show a banner when the user loses connectivity and queue actions for retry - Handle extremely long URLs (up to 2048 characters) without breaking the layout - Handle Unicode/internationalized domain names (IDN) correctly - Empty state illustrations for when the user has no links or no analytics data --- ### 📁 Deliverables 1. Complete, well-commented source code with a clear folder structure 2. `README.md` with setup instructions, API documentation, and feature list 3. API endpoint reference table (method, path, parameters, response format) 4. A `demo` mode with sample data pre-loaded for immediate preview 5. Responsive across Chrome, Firefox, Safari, and Edge (latest 2 versions) --- > **Note:** Build this incrementally — start with the core shortening flow (input → validate → shorten → display → copy), then layer on QR codes, analytics, custom aliases, expiration, password protection, and the full history dashboard. Ensure each feature is fully functional and tested before moving to the next.

你是「赛博朋克像素风 Lo-Fi 立体景：单 HTML 无限循环动画」。请按下列中文说明执行；完整原提示词正文保留于后，供结构、占位符与技术细节对齐。 ## 中文任务说明在一个 HTML 文件里做出可无限循环的像素风赛博朋克微缩场景动画。以下保留原提示词正文供结构与占位符对齐： # Build an Immersive, Animated Cyberpunk Pixel-Art Diorama Create a breathtaking, richly detailed, fully animated cyberpunk pixel-art diorama designed to serve as the endlessly looping visual backdrop for a 10-hour lo-fi music video on YouTube. I want something genuinely mesmerizing. A tiny, self-contained world that feels alive. The kind of scene viewers can stare at for hours and continually discover little details they hadn't noticed before. ## Creative Direction Imagine a forgotten corner of a sprawling futuristic megacity, sometime around 2089. It's 2:37 AM. Rain has been falling for days. The streets are soaked, the buildings are ancient and overcrowded, and the city glows with a thousand little signs of life. The atmosphere should feel simultaneously melancholic, cozy, mysterious, and strangely comforting. This is a world where technology has taken over everything, but human warmth still survives in little pockets. Think cinematic cyberpunk meets the intimate charm of meticulously crafted pixel-art environments. Don't settle for a generic neon skyline. Create a place with personality, history, visual storytelling, and a strong sense of depth. ## Visual Composition Design a beautiful, layered environment with a compelling focal point and plenty of environmental storytelling. Consider elements such as: - A tiny apartment or rooftop hideaway overlooking a vast, rain-drenched futuristic city. - Glowing windows revealing glimpses of other people's lives. - Holographic advertisements, animated signage, and distant traffic. - Clusters of air-conditioning units, ventilation ducts, exposed wiring, satellite dishes, and improvised technology. - Warmly illuminated vending machines, computer terminals, and mysterious electronic equipment. - Rainwater collecting in puddles and cascading from rooftops. - Distant elevated trains or flying vehicles silently moving through the mist. - Tiny human silhouettes occasionally visible behind windows. - Overgrown plants reclaiming corners of this technological world. These are creative possibilities, not a mandatory checklist. Make deliberate artistic choices. Prioritize a coherent, memorable composition over cramming everything into the frame. The scene should feel handcrafted, with exquisite attention to small details. ## Color and Lighting Build the entire visual identity around dramatic warm/cold contrast. The outside world is dominated by deep midnight blues, desaturated teals, indigo shadows, and cold cyan rain. Against this darkness, create beautiful pockets of warmth: - Rich amber light spilling from apartment windows. - Soft orange and golden illumination from lamps and electronics. - Occasional saturated magenta, electric violet, and crimson neon. - Warm reflections shimmering across cold, wet surfaces. Use lighting to tell a story. Every illuminated window should feel like a little sanctuary against the enormous, indifferent city. The overall image should be dark and atmospheric without becoming muddy or losing detail. ## Animation: Make the World Feel Alive This is absolutely critical. I don't want a static illustration with a generic rain effect. I want a living pixel-art environment with dozens of subtle, independently animated details. Build a sophisticated system of layered ambient animations: ### Weather and atmosphere - Beautiful multi-depth rainfall with varying speeds and intensities. - Occasional heavier gusts that push rain diagonally. - Thin layers of drifting fog and atmospheric haze. - Smoke rising from vents and chimneys, curling into the night. - Water dripping from ledges and splashing into puddles. - Ripples spreading across reflective surfaces. ### Lighting and electronics - Neon signs flickering irregularly, with convincing electrical behavior. - Screens cycling through mysterious data and advertisements. - Small indicator lights blinking asynchronously. - Warm interior lights gently fluctuating. - Occasional sparks from damaged electrical equipment. - Animated reflections responding to nearby light sources. ### Environmental life - Slowly rotating ventilation fans. - Distant vehicles passing behind buildings. - Tiny silhouettes moving behind illuminated windows. - Steam escaping from pipes. - Hanging cables or signs subtly swaying in the wind. - Occasional small, unexpected details that reward prolonged viewing. Every effect should have its own rhythm. Avoid synchronized, repetitive animation that makes the world feel artificial. ## Seamless Infinite Looping This scene must run beautifully for 10 hours or longer without a visible reset, jump, or discontinuity. Design every animation to be mathematically seamless or continuously procedural. Use independent animation cycles, staggered timing, seeded randomness, and layered motion to create the impression of endless organic variation. No sudden resets. No obvious looping rain textures. No visible animation seams. The scene should remain interesting over time without becoming distracting. This is lo-fi music, so the animation should be hypnotic and relaxing rather than chaotic. Reserve dramatic events for rare, carefully controlled moments. ## Pixel-Art Rendering: Non-Negotiable The visual style must be authentic, razor-sharp pixel art, not a high-resolution illustration with a pixelation filter. Technical requirements: - Internal rendering resolution: 640 × 360 - Final presentation resolution: 1920 × 1080 - Exact integer upscale: 3× - Scaling: nearest-neighbor only - Every source pixel must become a perfectly sharp 3×3 block. - Absolutely no bilinear filtering, blurry edges, antialiasing, or subpixel rendering. - No smooth vector graphics mixed into the pixel-art scene. - All effects, including particles, rain, fog, reflections, and lighting, must respect the pixel grid. - Maintain consistent pixel density across every visual layer. The result should look spectacular on a full-screen 1080p YouTube video, with beautiful, deliberately placed hard pixels. ## Technical Implementation Build this as a complete, self-contained, real-time animated experience. Use whatever rendering architecture delivers the best combination of visual quality, performance, and pixel-perfect consistency. HTML5 Canvas, WebGL, or a hybrid approach are all acceptable. Prioritize: - Smooth, efficient rendering at 1080p. - Deterministic, seamless animation. - Rich visual depth through layered parallax and atmospheric perspective. - Procedural particle systems for weather and environmental effects. - Carefully controlled lighting, blending, and reflections. - Stable performance over extremely long runtimes. - A fixed camera with no unintended movement or jitter. - Correct resizing while preserving the 16:9 composition and pixel-perfect scaling. If useful, implement the world as multiple independently animated layers, all composited at the internal resolution before the final upscale. Include a way to run the scene full-screen and hide any interface elements so it can be captured cleanly for YouTube. ## Artistic Quality Bar This should feel like an exceptional piece of animated pixel art, not a programming demonstration. Composition, atmosphere, color harmony, and environmental storytelling matter just as much as technical sophistication. Avoid generic procedural rectangles masquerading as buildings. Give the architecture intentional shapes, recognizable structures, believable construction details, and visual variety. Use foreground silhouettes, middle-ground architecture, and distant city layers to create a strong sense of scale. Every element should contribute to a cohesive world. The ultimate goal: A mesmerizing cyberpunk night scene that makes someone wish they could climb through their monitor, sit beside a warm window with a cup of coffee, and listen to the rain falling on a futuristic city that never sleeps. Make it beautiful. Make it atmospheric. Make it technically excellent. And above all, make it feel alive. Don't just describe how you would build it. Actually implement the complete working experience. Deliver the finished piece as a single standalone HTML file (all code inline, no external assets or build step) that runs by opening it in a browser.