大小写转换器

制作一个单文件 HTML 的**文本大小写与命名风格转换工具**。请使用 **High-Fidelity Claymorphism** 设计风格。 以下是详细的功能需求： ```` ### 核心转换功能 **输入区域：** 1. 一个大面积文本输入框，用户粘贴或输入待转换的文本 2. 输入时实时检测当前文本的命名风格，并在输入框上方以标签形式显示检测结果（如"检测到：camelCase"） 3. 支持多行输入——每行独立转换，结果也按行展示 **输出格式（至少支持以下 10 种）：** 4. `camelCase` — 小驼峰（如 `helloWorld`） 5. `PascalCase` — 大驼峰（如 `HelloWorld`） 6. `snake_case` — 下划线小写（如 `hello_world`） 7. `SCREAMING_SNAKE_CASE` — 下划线全大写（如 `HELLO_WORLD`） 8. `kebab-case` — 短横线小写（如 `hello-world`） 9. `SCREAMING-KEBAB-CASE` — 短横线全大写（如 `HELLO-WORLD`） 10. `dot.case` — 点分隔小写（如 `hello.world`） 11. `path/case` — 斜杠分隔小写（如 `hello/world`） 12. `Title Case` — 标题大写（如 `Hello World`） 13. `Sentence case` — 句首大写（如 `Hello world`） 14. `flatcase` — 全小写无分隔（如 `helloworld`） 15. `UPPERFLATCASE` — 全大写无分隔（如 `HELLOWORLD`） **结果展示：** 16. 所有格式的转换结果同时展示，以卡片网格或列表形式排列 17. 每个结果卡片包含：格式名称、转换结果文本、一键复制按钮 18. 复制成功后有明确的视觉反馈（如按钮变色、显示 ✓、或短暂的动画提示） 19. 提供"全部复制"按钮，将所有格式的结果以 `格式名: 结果` 的形式复制到剪贴板 ### 智能检测 20. 自动检测输入文本的当前命名风格，检测逻辑： - 包含 `_` 且全小写 → `snake_case` - 包含 `_` 且全大写 → `SCREAMING_SNAKE_CASE` - 包含 `-` 且全小写 → `kebab-case` - 首字母小写且包含大写字母（无分隔符）→ `camelCase` - 首字母大写且包含小写字母（无分隔符）→ `PascalCase` - 包含空格 → `Title Case` 或 `Sentence case` - 无法确定时显示"未知格式" 21. 检测结果以高亮标签展示在输入框附近 ### 辅助功能 22. 提供几个快捷示例按钮（如"hello world"、"getUserName"、"MAX_RETRY_COUNT"、"my-component-name"），点击后自动填入输入框 23. 一键清空输入和所有结果 24. 支持键盘快捷键：`Ctrl/Cmd + V` 粘贴后自动触发转换（这是默认行为，但确保无延迟） ### 技术约束 - 单文件 HTML，所有 CSS 和 JS 内联 - 不使用任何外部 CDN 或库——所有转换逻辑用原生 JS 实现 - 转换的核心是**词语拆分**：先将输入拆分为单词数组，再按目标格式重新组合 ````

制作一个单文件 HTML 的**文本大小写与命名风格转换工具**。 以下是详细的功能需求： ```` ### 核心转换功能 **输入区域：** 1. 一个大面积文本输入框，用户粘贴或输入待转换的文本 2. 输入时实时检测当前文本的命名风格，并在输入框上方以标签形式显示检测结果（如"检测到：camelCase"） 3. 支持多行输入——每行独立转换，结果也按行展示 **输出格式（至少支持以下 10 种）：** 4. `camelCase` — 小驼峰（如 `helloWorld`） 5. `PascalCase` — 大驼峰（如 `HelloWorld`） 6. `snake_case` — 下划线小写（如 `hello_world`） 7. `SCREAMING_SNAKE_CASE` — 下划线全大写（如 `HELLO_WORLD`） 8. `kebab-case` — 短横线小写（如 `hello-world`） 9. `SCREAMING-KEBAB-CASE` — 短横线全大写（如 `HELLO-WORLD`） 10. `dot.case` — 点分隔小写（如 `hello.world`） 11. `path/case` — 斜杠分隔小写（如 `hello/world`） 12. `Title Case` — 标题大写（如 `Hello World`） 13. `Sentence case` — 句首大写（如 `Hello world`） 14. `flatcase` — 全小写无分隔（如 `helloworld`） 15. `UPPERFLATCASE` — 全大写无分隔（如 `HELLOWORLD`） **结果展示：** 16. 所有格式的转换结果同时展示，以卡片网格或列表形式排列 17. 每个结果卡片包含：格式名称、转换结果文本、一键复制按钮 18. 复制成功后有明确的视觉反馈（如按钮变色、显示 ✓、或短暂的动画提示） 19. 提供"全部复制"按钮，将所有格式的结果以 `格式名: 结果` 的形式复制到剪贴板 ### 智能检测 20. 自动检测输入文本的当前命名风格，检测逻辑： - 包含 `_` 且全小写 → `snake_case` - 包含 `_` 且全大写 → `SCREAMING_SNAKE_CASE` - 包含 `-` 且全小写 → `kebab-case` - 首字母小写且包含大写字母（无分隔符）→ `camelCase` - 首字母大写且包含小写字母（无分隔符）→ `PascalCase` - 包含空格 → `Title Case` 或 `Sentence case` - 无法确定时显示"未知格式" 21. 检测结果以高亮标签展示在输入框附近 ### 辅助功能 22. 提供几个快捷示例按钮（如"hello world"、"getUserName"、"MAX_RETRY_COUNT"、"my-component-name"），点击后自动填入输入框 23. 一键清空输入和所有结果 24. 支持键盘快捷键：`Ctrl/Cmd + V` 粘贴后自动触发转换（这是默认行为，但确保无延迟） ### 技术约束 - 单文件 HTML，所有 CSS 和 JS 内联 - 不使用任何外部 CDN 或库——所有转换逻辑用原生 JS 实现 - 转换的核心是**词语拆分**：先将输入拆分为单词数组，再按目标格式重新组合 请严格按照下方提供的 High-Fidelity Claymorphism Design System 实现所有 UI 设计。 ```` ```` <design-system> # High-Fidelity Claymorphism Design System ## Design Philosophy **Core Concept: Digital Clay** This design system is not merely a "soft UI"—it is a high-fidelity simulation of a tangible, physical world constructed from **premium digital clay**. Every element on the screen should evoke the sensation of holding a high-end, matte-finish vinyl toy or a soft, air-filled silicone object. It rejects the flatness of modern minimalism in favor of volume, weight, and tactility. **The "High-Fidelity" Difference**: Unlike early 2020s "Neumorphism" (which felt like extruded plastic) or basic "Claymorphism" (which often feels like flat vector art), **High-Fidelity Claymorphism** relies on complex, multi-layered lighting simulation using 4-layer shadow stacks. It renders objects that feel dense, substantial, and interactive—not hollow decorations. * **Materiality**: Think of soft-touch matte silicone, marshmallow-like foam, or high-quality injection-molded plastic with a premium finish. Surfaces absorb light rather than reflecting it sharply, creating a warm, inviting aesthetic. * **Lighting**: The "world" is lit by a soft, diffused overhead light source positioned top-left, creating deep ambient occlusion shadows below objects and gentle specular highlights on their upper ridges. This creates the illusion of physical depth. * **Shadow Architecture**: Every element uses carefully crafted multi-layer shadows: - **Outer shadows**: Soft, colored drop shadows that define distance from the surface - **Highlight shadows**: Top-left highlights that simulate light reflection - **Inner shadows**: Subtle colored reflections and rim lights that add dimensionality - **Active states**: Pressed elements use inset shadows to simulate physical depression **The Sensory Vibe**: * **Playful & Optimistic**: The interface radiates joy through "candy store" colors (vivid violets, hot pinks, sky blues, emerald greens, amber oranges) and bouncy, organic motion. It feels safe, welcoming, and unpretentious—like a premium toy store display. * **Tactile & Responsive**: Elements don't just change color when interacted with—they physically react with exaggerated realism. Buttons actively "squish" (scale-[0.92] + shadow-clayPressed) and compress under the cursor. Cards lift and float towards the user (-translate-y-2 with enhanced shadows). Every interaction provides satisfying visual feedback. * **Friendly & Safe**: There are **zero sharp corners** in this universe. Every edge is aggressively rounded (`rounded-[20px]` minimum, up to `rounded-[60px]` for large containers), subconsciously signaling safety and approachability to the user. The design language speaks "friendly" and "accessible" without words. * **Premium Craft**: Despite the playfulness, this aesthetic maintains a sense of quality through careful attention to detail: consistent border radii, precise shadow layering, harmonious color relationships, and smooth micro-interactions. **The "Clay" Physics Engine**: 1. **Convexity (The Bulge)**: Primary interactive elements (Buttons, Stat orbs, Feature cards) bulge OUT towards the user with `shadow-clayButton` or `shadow-clayCard`. They capture light on their top-left edge and cast soft colored shadows below, creating the illusion of floating above the surface. 2. **Concavity (The Press)**: Secondary surfaces (Input fields, Active button states, FAQ panels when open) are pressed INTO the clay surface with `shadow-clayPressed`. They cast internal shadows on their top edge and catch light on their bottom lip, making them feel recessed. 3. **Buoyancy (The Float)**: The interface exists in a zero-gravity environment with high air resistance. Background blobs drift slowly (8-12s animations with translateY and rotate). Cards hover effortlessly with hover states that amplify the float effect. Nothing feels statically "stuck" to the grid—everything breathes and moves subtly. 4. **Micro-Physics**: Hover states consistently lift elements upward (`hover:-translate-y-1` to `-translate-y-2`) while enhancing their shadows, simulating the element floating closer to the viewer. Active/pressed states do the opposite—compressing downward with reduced shadows. --- ## Design Token System ### Colors (The "Candy Shop" Palette) **Background**: * **Canvas**: `#F4F1FA` (Very pale, cool lavender-white). This provides a cleaner, more modern base than warm beige. Never use pure white—the slight tint creates warmth. **Foreground**: * **Text (Primary)**: `#332F3A` (Soft Charcoal). High contrast (passing WCAG AA) but softer than black for a friendlier feel. * **Muted (Secondary)**: `#635F69` (Dark Lavender-Gray). Crucial for readability against light backgrounds. Use for body text, labels, and secondary information. Never go lighter than this value. **Accents (Vibrant & Saturated)**: * **Primary Accent**: `#7C3AED` (Vivid Violet). The hero color used for primary CTAs, links, and brand emphasis. * **Secondary Accent**: `#DB2777` (Hot Pink). Used in gradients and for secondary emphasis. * **Tertiary**: `#0EA5E9` (Sky Blue). For informational elements and background blobs. * **Success/Benefits**: `#10B981` (Emerald Green). For checkmarks and positive indicators. * **Warning**: `#F59E0B` (Amber). For alerts and star ratings. **Gradient Strategy**: * **Primary Buttons**: `bg-gradient-to-br from-[#A78BFA] to-[#7C3AED]` (lighter violet to primary violet). This creates depth and prevents overly dark buttons. * **Icon Orbs**: `bg-gradient-to-br` from light pastel (400) to saturated hue (600) with varied colors for visual interest (e.g., `from-blue-400 to-blue-600`, `from-purple-400 to-purple-600`, `from-pink-400 to-pink-600`). * **Text Highlights**: Use multi-stop gradients for hero text (`clay-text-gradient`): `from-clay-foreground 20%, to-clay-accent 60%, to-clay-accent-alt`. Keep gradient text large (text-5xl+) for readability. * **Background Blobs**: Semi-transparent accent colors with 10% opacity and blur-3xl for soft ambient lighting. ### Typography **Font Selection**: * **Headings**: **Nunito** (Google Fonts, Weights: 700/800/900). The rounded terminals perfectly complement the soft clay aesthetic. Apply via inline styles: `style={{ fontFamily: "Nunito, sans-serif" }}` for all headings, stat numbers, and emphasis text. * **Body**: **DM Sans** (Google Fonts, Weights: 400/500/700). Geometric, clean, and highly readable. Applied globally via body font-family. **Hierarchy (Mobile-First with Progressive Enhancement)**: * **Hero Headline**: `text-5xl sm:text-6xl md:text-7xl lg:text-8xl`, Black weight (font-black), tight tracking (tracking-tight), line-height 1.1. Always use Nunito. * **Section Titles**: `text-3xl sm:text-4xl md:text-5xl`, Extrabold (font-extrabold) or Black. Always use Nunito. * **Card Titles**: `text-xl` to `text-2xl` (larger for hero cards: `text-3xl`), Bold (font-bold) to Extrabold. Use Nunito. * **Body Text**: `text-base` to `text-lg`, Medium weight (font-medium), relaxed leading (leading-relaxed). Use DM Sans. * **Small Text**: `text-sm` to `text-xs`, Medium to Bold weight. Use for labels, metadata, uppercase tracking-wide treatments. ### Shapes & Radii **The "Super-Rounded" Rule** (Absolute Values Only): * **Large Containers/Hero Sections**: `rounded-[48px]` to `rounded-[60px]` * **Standard Cards**: `rounded-[32px]` (the default for most cards) * **Medium Elements** (Benefits pills, Blog cards): `rounded-[24px]` * **Buttons & Inputs**: `rounded-[20px]` or `rounded-2xl` * **Icon Containers**: `rounded-2xl` (16px) for square icons, `rounded-full` for circular * **Small Badges**: `rounded-lg` (8px) minimum, `rounded-full` preferred * **Stat Orbs**: `rounded-full` (perfect circles) **Critical Rules**: * Never use `rounded-md` (4px) or `rounded-sm`. They appear too sharp and generic for this aesthetic. * Maintain consistency: if a card uses `rounded-[32px]`, its nested image should use `rounded-[24px]` (8px less) to create visual hierarchy. * On mobile, you may reduce radii slightly (e.g., `rounded-[32px] sm:rounded-[40px]`) to maximize screen real estate while maintaining the soft aesthetic. ### Shadows (The Engine of Clay) This system uses a **High-Fidelity Shadow Stack** to simulate complex lighting. **1. Deep Clay (Surface)**: For the main background elements or large containers. ```css box-shadow: 30px 30px 60px #cdc6d9, -30px -30px 60px #ffffff, inset 10px 10px 20px rgba(139, 92, 246, 0.05), inset -10px -10px 20px rgba(255, 255, 255, 0.8); ``` **2. Clay Card (Floating)**: For standard content cards. ```css box-shadow: 16px 16px 32px rgba(160, 150, 180, 0.2), -10px -10px 24px rgba(255, 255, 255, 0.9), inset 6px 6px 12px rgba(139, 92, 246, 0.03), inset -6px -6px 12px rgba(255, 255, 255, 1); ``` **3. Clay Button (High Convexity)**: For clickable elements. ```css box-shadow: 12px 12px 24px rgba(139, 92, 246, 0.3), -8px -8px 16px rgba(255, 255, 255, 0.4), inset 4px 4px 8px rgba(255, 255, 255, 0.4), inset -4px -4px 8px rgba(0, 0, 0, 0.1); ``` **4. Clay Pressed (Recessed)**: For inputs and active states. ```css box-shadow: inset 10px 10px 20px #d9d4e3, inset -10px -10px 20px #ffffff; ``` --- ## Component Architecture ### 1. The Universal Card (`Card`) * **Base Styles**: `relative overflow-hidden rounded-[32px] bg-white/60 p-8 text-clay-foreground shadow-clayCard backdrop-blur-xl` * **Interactive States**: * Default: `shadow-clayCard` (4-layer shadow with soft depth) * Hover: `hover:-translate-y-2 hover:shadow-[enhanced]` (lifted with stronger shadow) * Transition: `transition-all duration-500` (smooth, premium feel) ### 2. The Clay Button (`Button`) * **Base Shape**: `rounded-[20px]` with chunky height (`h-14` default, `h-16` for lg) * **Primary**: `bg-gradient-to-br from-[#A78BFA] to-[#7C3AED] text-white shadow-clayButton` * **Interactive States**: * Hover: `hover:-translate-y-1` (lift up 4px) + Enhanced shadow * Active: `active:scale-[0.92] active:shadow-clayPressed` (pronounced squish effect) * Focus: `focus-visible:ring-4 focus-visible:ring-clay-accent/30 focus-visible:ring-offset-2` ### 3. The Recessed Input (`Input`) * **Base Shape**: `rounded-2xl` with generous height `h-16` * **Base Styles**: `flex w-full border-0 bg-[#EFEBF5] px-6 py-4 text-lg shadow-clayPressed` * **States**: * Default: Recessed with `shadow-clayPressed` (inset shadows) * Focus: `focus:bg-white focus:ring-4 focus:ring-clay-accent/20` ### 4. Floating 3D Blobs (Background) **Never use a flat background.** Always include 3-4 large, animated blobs. * **Container**: `pointer-events-none fixed inset-0 overflow-hidden -z-10` * **Individual Blobs**: `absolute h-[60vh] w-[60vh] rounded-full blur-3xl` with accent colors at `/10` opacity * **Animation**: 8-12s float animations with translateY and rotate --- ## Animation System **1. Clay Float**: 8s duration, `translateY(-20px) rotate(2deg)` at 50%. **2. Clay Breathe**: 6s duration, `scale(1.02)` at 50%. Used on stat orbs. **3. Hover Lift**: Cards `hover:-translate-y-2`, Buttons `hover:-translate-y-1`. **4. Active Press**: `active:scale-[0.92]` + `active:shadow-clayPressed`. **5. Reduced Motion**: Always include `@media (prefers-reduced-motion: reduce)` to disable all animations. --- ## Dos and Don'ts * **DO** use pronounced "Squish" animations on click (`active:scale-[0.92]`). * **DO** use varying border radii within components (outer `rounded-[48px]`, card `rounded-[32px]`, inner `rounded-[24px]`). * **DO** use "Glass-Clay" hybrid (`bg-white/60` + `backdrop-blur-xl`) for cards. * **DO** use multi-layer shadow stacks (4 shadows minimum). * **DO** apply Nunito font family to all headings. * **DON'T** use gray text lighter than `#635F69`. * **DON'T** use sharp corners anywhere. Minimum radius is `rounded-[20px]`. * **DON'T** use flat colors for backgrounds. Always include animated blobs. * **DON'T** make buttons too small. Minimum height is `h-11` (44px). * **DON'T** skip the hover lift effect on interactive elements. </design-system> ````