Base64 解码站

制作一个单文件 HTML Base64 编解码工具

制作一个单文件 HTML Base64 编解码工具，核心用途是**最快速地完成 Base64 文本的解码**——打开网页、粘贴、看到结果，零摩擦。 功能要求： 1. 双向转换：支持 Base64 编码（明文 → Base64）和解码（Base64 → 明文），以解码为默认/主要模式 2. 实时转换：输入区内容变化时，输出区即时显示转换结果，无需手动点击按钮 3. 输入方式：提供一个大面积的文本输入区域，支持粘贴和手动输入 4. 一键复制：点击按钮可将转换结果复制到剪贴板，复制后按钮有短暂的视觉反馈（如变色、打勾动画） 5. 一键清空：提供清空按钮快速重置输入输出 6. 错误处理：当输入的 Base64 字符串无效时，给出清晰友好的错误提示（如高亮输入框边框、显示行内错误信息），而非静默失败或弹窗 7. 字符编码：正确处理 UTF-8 编码的中文、emoji 等多字节字符 8. 文件支持：支持将文件拖入或通过文件选择器导入，自动将文件内容编码为 Base64；反向支持将 Base64 解码为文件并下载 9. URL 安全模式：提供选项切换标准 Base64 和 URL-safe Base64（将 `+/` 替换为 `-_`） 10. 统计信息：显示输入/输出的字符数、字节数 11. 自动检测：智能判断输入内容是明文还是 Base64 编码文本，自动选择对应的转换方向（编码/解码），并在界面上显示检测结果（如"检测为 Base64，已切换到解码模式"），同时允许用户手动覆盖 12. 转换历史：在页面底部或侧边展示最近的转换记录列表（输入摘要 → 输出摘要 + 时间戳），使用 localStorage 持久化，支持点击历史条目回填输入区，支持清空历史 13. 批量处理：支持多行批量模式——当输入包含多行文本时，可选择"逐行转换"模式，每行独立进行 Base64 编码/解码，输出保持对应的行序，单行失败不影响其他行（失败行标红并显示错误原因） 设计要求： - 整体采用现代简约风格，浅色/深色主题切换 - 桌面端使用上下分栏布局（上方输入、下方输出），中间有方向箭头和模式切换控件 - 移动端保持上下堆叠布局，触控友好 - 工具栏紧凑但不拥挤，按钮有明确的图标和文字标签 - 输入输出区域使用等宽字体，便于阅读编码文本 - 转换过程应有微妙的过渡动画（如结果淡入），但不影响性能 - 整体给人「开发者工具」的专业感，而非花哨的在线工具

制作一个单文件 HTML Base64 编解码工具，核心用途是**最快速地完成 Base64 文本的解码**——打开网页、粘贴、看到结果，零摩擦。 功能要求： 1. 双向转换：支持 Base64 编码（明文 → Base64）和解码（Base64 → 明文），以解码为默认/主要模式 2. 实时转换：输入区内容变化时，输出区即时显示转换结果，无需手动点击按钮 3. 输入方式：提供一个大面积的文本输入区域，支持粘贴和手动输入 4. 一键复制：点击按钮可将转换结果复制到剪贴板，复制后按钮有短暂的视觉反馈（如变色、打勾动画） 5. 一键清空：提供清空按钮快速重置输入输出 6. 错误处理：当输入的 Base64 字符串无效时，给出清晰友好的错误提示（如高亮输入框边框、显示行内错误信息），而非静默失败或弹窗 7. 字符编码：正确处理 UTF-8 编码的中文、emoji 等多字节字符 8. 文件支持：支持将文件拖入或通过文件选择器导入，自动将文件内容编码为 Base64；反向支持将 Base64 解码为文件并下载 9. URL 安全模式：提供选项切换标准 Base64 和 URL-safe Base64（将 `+/` 替换为 `-_`） 10. 统计信息：显示输入/输出的字符数、字节数 11. 自动检测：智能判断输入内容是明文还是 Base64 编码文本，自动选择对应的转换方向（编码/解码），并在界面上显示检测结果（如"检测为 Base64，已切换到解码模式"），同时允许用户手动覆盖 12. 转换历史：在页面底部或侧边展示最近的转换记录列表（输入摘要 → 输出摘要 + 时间戳），使用 localStorage 持久化，支持点击历史条目回填输入区，支持清空历史 13. 批量处理：支持多行批量模式——当输入包含多行文本时，可选择"逐行转换"模式，每行独立进行 Base64 编码/解码，输出保持对应的行序，单行失败不影响其他行（失败行标红并显示错误原因） 请严格按照下方提供的 Neumorphism Design System 实现所有 UI 设计。 ```` <role> You are an expert frontend engineer, UI/UX designer, visual design specialist, and typography expert. Your task is to build a single-file HTML application that strictly follows the provided design system. Before writing code, build a clear mental model of the requirements: - Understand the design tokens (colors, spacing, typography, radii, shadows), and utility patterns defined in the design system. - Plan the component architecture and naming conventions. - Note any constraints (single-file HTML, no build tools, performance considerations). When implementing: - Centralize design tokens as CSS custom properties for maintainability. - Prioritize reusability and composability of components. - Minimize duplication and one-off styles. - Use clear, consistent naming conventions. Always aim to: - Preserve or improve accessibility. - Maintain visual consistency with the provided design system. - Leave the codebase in a cleaner, more coherent state than you found it. - Ensure layouts are responsive and usable across devices. - Make deliberate, creative design choices (layout, motion, interaction details, and typography) that express the design system’s personality instead of producing a generic or boilerplate UI. </role> <design-system> # Neumorphism (Soft UI) Design System ## Design Philosophy **Core Principles**: Neumorphism creates the illusion of physical depth through carefully balanced dual shadows—one light source from the top-left, one dark shadow falling bottom-right—on monochromatic backgrounds. Elements appear to either extrude from the surface (convex/raised) or be pressed into it (concave/inset). The effect mimics soft, pillowed physical objects with realistic lighting, creating a "molded from the same material" aesthetic. Every element feels like it's part of the same continuous surface, either raised or pressed, never flat. **Vibe**: Tactile, calm, modern, and physically grounded. This is UI that feels like cooler matte plastic or soft ceramic. It is satisfying and tangible. The aesthetic is deliberately restrained, utilizing a cooler grey palette to feel fresh and distinct from "warm" legacy neumorphism. The design prioritizes accessibility with WCAG AA compliant contrast ratios while maintaining the soft aesthetic. **Unique Visual Signatures**: - **Dual opposing RGB shadows** (top-left light, bottom-right dark) using alpha transparency for smoother, more realistic blending than solid hex shadows. - **Monochromatic "Cool Grey" discipline** (`#E0E5EC`) where shadows and highlights do all the visual heavy lifting. No flat backgrounds. - **Same-surface illusion**: Elements appear to be part of the same material as the background—molded, not placed. - **Deep Inset States**: Wells for icons and inputs that feel significantly deeper (`insetDeep`) than standard pressed states, creating true 3D depth. - **Soft, Hyper-Rounded Corners**: `32px` for containers and `16px` for smaller elements, reinforcing the pillowed, organic aesthetic. - **Complex Nested Depth**: Visuals formed by nesting elements (Extruded → Inset → Extruded) to showcase the physics of the system. - **Smooth Micro-interactions**: 300ms transitions with scale, rotation, and shadow depth changes. Floating animations for ambient motion. - **Mobile-First Responsive**: Fully responsive with touch-friendly targets (44px minimum), hamburger menu, and maintained neumorphic aesthetic on all screen sizes. --- ## Design Token System (The DNA) ### Colors (Light Mode - Cool Monochromatic) The entire palette is built around a single base cool grey. **All visual interest comes from shadow play, not color variety.** - **Background**: `#E0E5EC` — The base "cool clay" surface. Everything is molded from this. - **Foreground**: `#3D4852` — Dark blue-grey for primary text. Excellent contrast (7.5:1 ratio) for optimal readability. - **Muted**: `#6B7280` — Cool grey for secondary text with WCAG AA compliant contrast (4.6:1 ratio on the background). - **Accent**: `#6C63FF` — Soft violet for interactive highlights. Used sparingly for CTAs and focus states. - **Accent Light**: `#8B84FF` — Lighter violet for gradients and hover states. - **Accent Secondary**: `#38B2AC` — Teal for success states, checkmarks, and positive indicators. - **Border**: `transparent` — Neumorphism **never** uses borders; shadows define all edges. **Shadow Colors** (CRITICAL - RGBA for Smoothness): - **Shadow Light**: `rgba(255, 255, 255, 0.5-0.6)` — Pure white with transparency for the light-source shadow (top-left). - **Shadow Dark**: `rgb(163, 177, 198, 0.6-0.7)` — A specific cool blue-grey shadow color that matches the background tone perfectly (bottom-right). ### Typography - **Display Font**: **"Plus Jakarta Sans"** (500, 600, 700, 800) — Modern geometric sans for headlines. Applied via `.font-display` class. - **Body Font**: **"DM Sans"** (400, 500, 700) — Clean, highly legible sans-serif for all body text and UI elements. - **Weights**: - Display Headings: `font-extrabold` (800) with `tracking-tight` - Headings: `font-bold` (700) with `tracking-tight` - Body: `font-normal` (400) to `font-medium` (500) - **Colors**: - Primary: `#3D4852` (excellent contrast) - Secondary/Muted: `#6B7280` (WCAG AA compliant) - **Scale**: Responsive scale from `text-sm` (14px) to `text-7xl` (72px) for hero headlines ### Radius - **Container / Card**: `32px` (`rounded-[32px]`) — Very soft, friendly corners. - **Base / Button**: `16px` (`rounded-2xl`). - **Inner Elements**: `12px` (`rounded-xl`) or `9999px` (`rounded-full`). ### Shadows & Effects (The Physics) Shadows are defined using `rgba` for a premium, smooth finish. **Extruded (Standard)** — The default resting state: ```css box-shadow: 9px 9px 16px rgb(163,177,198,0.6), -9px -9px 16px rgba(255,255,255,0.5); ``` - **Tailwind**: `shadow-[9px_9px_16px_rgb(163,177,198,0.6),-9px_-9px_16px_rgba(255,255,255,0.5)]` **Extruded Hover (Lifted)** — For hover states: ```css box-shadow: 12px 12px 20px rgb(163,177,198,0.7), -12px -12px 20px rgba(255,255,255,0.6); ``` - **Tailwind**: `shadow-[12px_12px_20px_rgb(163,177,198,0.7),-12px_-12px_20px_rgba(255,255,255,0.6)]` **Extruded Small** — For smaller elements: ```css box-shadow: 5px 5px 10px rgb(163,177,198,0.6), -5px -5px 10px rgba(255,255,255,0.5); ``` **Inset (Pressed)** — For standard pressed states or shallow wells: ```css box-shadow: inset 6px 6px 10px rgb(163,177,198,0.6), inset -6px -6px 10px rgba(255,255,255,0.5); ``` **Inset Deep** — For inputs, active wells, and deep "carved" elements: ```css box-shadow: inset 10px 10px 20px rgb(163,177,198,0.7), inset -10px -10px 20px rgba(255,255,255,0.6); ``` - **Tailwind**: `shadow-[inset_10px_10px_20px_rgb(163,177,198,0.7),inset_-10px_-10px_20px_rgba(255,255,255,0.6)]` **Inset Small** — For subtle tracks or pills: ```css box-shadow: inset 3px 3px 6px rgb(163,177,198,0.6), inset -3px -3px 6px rgba(255,255,255,0.5); ``` --- ## Component Styling ### Buttons - **Shape**: `rounded-2xl` - **Transition**: `duration-300 ease-out` - **Default State**: Extruded shadow. - **Hover State**: `translate-y-[-1px]` (slight lift) + `Extruded Hover` shadow. - **Active/Pressed State**: `translate-y-[0.5px]` (physical press) + `Inset Small` shadow (or standard inset depending on size). - **Primary**: Accent background `#6C63FF`. Active state uses specific rgba inset shadows to work on color. - **Secondary**: Background `#E0E5EC` (match page). ### Cards - **Shape**: `rounded-[32px]` (Significant rounding). - **Background**: `#E0E5EC`. - **Padding**: `p-8` to `p-20` depending on prominence. - **Hover**: `translate-y-[-2px]` + `Extruded Hover` shadow. - **Feature**: Use nested depth. Card is Extruded -> Icon well inside is Inset Deep -> Icon inside is distinct. ### Inputs - **Shape**: `rounded-2xl`. - **Background**: `#E0E5EC`. - **Default**: `Inset` shadow. - **Focus**: `Inset Deep` shadow + Accent color Ring (offset by 2px with background color). - **Placeholder**: `#A0AEC0`. ### Visual Decorations - **Icon Wells**: Always use `Inset Deep` or `Inset` shadows for icon containers. This makes them look "drilled" into the card. - **Decorations**: Use concentric circles of alternating Extruded and Inset shadows to create abstract, tactile background art. --- ## Layout Principles - **Spacing**: Open and airy. Use `py-32` for hero sections to let the shadows breathe. `gap-12` for grids. - **Container**: `max-w-7xl` for a wide, modern feel. - **Background**: The page background must be `#E0E5EC` globally. No gradients on the root background. ## Animation & Micro-interactions - **Duration**: `300ms` for UI elements, `500ms` for nested depth circles (weightier, physics-based feel). - **Easing**: `ease-out` for natural deceleration. - **Properties**: `transform` (scale, translateY, rotate), `box-shadow` (depth changes). - **Hover Effects**: - Cards: `-translate-y-1` (1px lift) + enhanced shadow depth - Buttons: `-translate-y-1` on hover, `translate-y-0.5` on active (press down) - Nested circles: `scale-105` (5% scale up) + `rotate-180` on inner element - **Floating Animation**: Custom `@keyframes float` with 3s ease-in-out infinite loop for ambient motion on decorative elements. - **Smooth Scrolling**: `scroll-behavior: smooth` for anchor navigation. ## Accessibility - **Contrast**: - Primary text `#3D4852` on `#E0E5EC`: 7.5:1 (WCAG AAA) - Muted text `#6B7280` on `#E0E5EC`: 4.6:1 (WCAG AA) - **Focus States**: Visible 2px accent rings (`ring-2 ring-[#6C63FF]`) with 2px offset on `#E0E5EC` background. Mandatory on all interactive elements. - **Touch Targets**: Minimum 44x44px for mobile (buttons use `h-12 w-12` = 48px minimum). - **Mobile Navigation**: Hamburger menu with clear open/close states (Menu/X icons). - **Keyboard Navigation**: Full keyboard support with visible focus indicators on all links and buttons. ## Responsive Design - **Mobile First**: Design starts with mobile view and enhances upward. - **Breakpoints**: `md:` (768px) for tablet, `lg:` (1024px) for desktop. - **Mobile Adaptations**: - Hero visual shows on all screens with `max-w-md` constraint on mobile - Hamburger menu replaces desktop navigation below `md:` breakpoint - Grid layouts collapse: 3-column → 1-column, 2-column → 1-column - Font sizes scale down: `text-7xl` → `text-5xl` on mobile - Padding reduces: `p-16` → `p-8` on cards - **Navigation**: Sticky header with backdrop blur. Mobile menu slides down from header with extruded shadow. --- ## Anti-Patterns (Do Not Do) - **Hard Hex Shadows**: Do not use opaque hex codes for shadows (e.g., `#A3B1C6`). Use `rgb(... 0.6)` for transparency and blending. - **White Backgrounds**: Never use `bg-white` for cards. They must match the body background `#E0E5EC`. - **Flat Buttons**: Buttons must have depth (shadows). No flat designs. - **Sharp Corners**: `rounded-lg` is too sharp. Use `rounded-2xl` (16px) or `rounded-3xl` (24px) minimum. - **Poor Contrast**: Never use `#8B95A5` or `#A0AEC0` for body text. Use `#6B7280` or darker for WCAG compliance. - **Missing Focus States**: All interactive elements must have visible focus indicators. - **Block Display for Fonts**: Use `display=swap` in Google Fonts URL, not `display=block`. </design-system> ````