feat: 涂色识字
This commit is contained in:
R524809
@@ -0,0 +1,54 @@
|
||||
# Design System Strategy: Doodle Mini
|
||||
|
||||
## 1. Overview & Creative North Star: "The Sun-Drenched Studio"
|
||||
The creative direction for this design system is **"The Sun-Drenched Studio."** We are moving away from the cold, clinical "educational app" look and toward a space that feels like a physical, tactile craft room bathed in morning light.
|
||||
|
||||
Instead of a rigid, boxed-in grid, we embrace **Organic Asymmetry**. Elements should feel like they were placed on a table by hand, not snapped to a pixel-perfect wireframe. We break the "template" look by using exaggerated corner radii, overlapping "paper" layers, and a hierarchy that prioritizes warmth and play over traditional data density.
|
||||
|
||||
## 2. Colors: Tonal Radiance
|
||||
The palette is anchored by `primary` (#6c5a00) and `primary_container` (#ffd709), creating a "Yaya Yellow" experience that is vibrant yet sophisticated.
|
||||
|
||||
* **The "No-Line" Rule:** Under no circumstances should 1px solid borders be used to separate content. We define boundaries exclusively through background shifts. Use `surface_container_low` (#f8f0e0) for main content areas and `surface` (#fef6e7) for the global backdrop.
|
||||
* **Surface Hierarchy & Nesting:** Treat the UI as stacked sheets of heavy-weight construction paper.
|
||||
* **Level 0:** `background` (#fef6e7) – The desk surface.
|
||||
* **Level 1:** `surface_container` (#f0e7d6) – The worksheet base.
|
||||
* **Level 2:** `surface_container_lowest` (#ffffff) – Active drawing cards or "Paper" modals.
|
||||
* **The Glass & Gradient Rule:** For navigation bars or floating tool palettes, use Glassmorphism. Apply `surface_container_low` at 80% opacity with a `20px` backdrop blur. This ensures the "sunny" background bleeds through, maintaining the "Sun-Drenched" atmosphere.
|
||||
* **Signature Textures:** Main CTAs should not be flat. Apply a subtle linear gradient from `primary_fixed` (#ffd709) to `primary_fixed_dim` (#efc900) at a 145-degree angle to give buttons a "pillowy" 3D volume.
|
||||
|
||||
## 3. Typography: The Friendly Guide
|
||||
We use **Plus Jakarta Sans** exclusively. Its geometric yet soft terminals provide a modern, legible, and approachable voice.
|
||||
|
||||
* **Display & Headlines:** Use `display-lg` (3.5rem) for "Doodle Mini" brand moments. Headlines (`headline-md`) should use a tighter letter-spacing (-0.02em) to feel "hugged" and friendly.
|
||||
* **Body & Labels:** Use `body-lg` for all instructional text. In a children's context, readability is paramount; ensure a line height of at least 1.6x the font size.
|
||||
* **Hierarchy as Personality:** Use `on_secondary_container` (#6d3b00) for sub-headers to provide a warm, "chocolatey" contrast against the yellow, moving away from harsh blacks.
|
||||
|
||||
## 4. Elevation & Depth: Tonal Layering
|
||||
Depth in this system is a result of light and shadow, not lines and strokes.
|
||||
|
||||
* **The Layering Principle:** To lift a component, place a `surface_container_highest` (#e5dcc9) element inside a `surface_container_low` (#f8f0e0) environment. This creates a "recessed" or "elevated" feel through color value alone.
|
||||
* **Ambient Shadows:** Use shadows sparingly. When an object "floats" (like a floating action button), use a shadow color derived from `on_surface` (#322e25) at 6% opacity, with a blur of `32px` and a Y-offset of `8px`. It should look like a soft glow, not a drop shadow.
|
||||
* **The "Ghost Border" Fallback:** If a separator is required for accessibility in input fields, use `outline_variant` (#b3ac9f) at **15% opacity**. It should be felt, not seen.
|
||||
|
||||
## 5. Components: Tactile & Safe
|
||||
Every component must feel "squishy" and safe to touch.
|
||||
|
||||
* **Buttons:**
|
||||
* **Primary:** Uses `primary_container` (#ffd709) with a `full` (9999px) radius.
|
||||
* **States:** On press, scale the button down to 96% size to simulate a physical "click" into the screen.
|
||||
* **Cards & Lists:** Forbid divider lines. Separate list items using a `spacing-3` (1rem) gap and alternating background colors between `surface_container_low` and `surface_container`.
|
||||
* **Input Fields:** Use `surface_container_highest` for the input track. Corners must be `xl` (3rem). Labels sit *above* the field in `title-sm` to ensure children can always see the context.
|
||||
* **Selection Chips:** Use `secondary_container` (#ffc697) for selected states. The roundedness must be `full` to mimic smooth river stones.
|
||||
* **The "Joy" Progress Bar:** A custom component for Doodle Mini. Use a thick track (`1.5rem` height) in `surface_container_highest` with the progress indicator using a gradient of `tertiary` (#006b1b) to `tertiary_fixed` (#91f78e).
|
||||
|
||||
## 6. Do’s and Don’ts
|
||||
|
||||
### Do:
|
||||
* **Do** use `xl` and `full` corner radii for almost everything. Sharp corners are "scary."
|
||||
* **Do** lean into white space. Use `spacing-12` (4rem) between major sections to let the design breathe.
|
||||
* **Do** use `on_tertiary_container` (dark green) for success states; it feels organic and "earthy" against the yellow.
|
||||
|
||||
### Don’t:
|
||||
* **Don’t** use pure black (#000000). Use `on_surface` (#322e25) for all dark text to maintain the warm, sunny tone.
|
||||
* **Don’t** use 1px dividers. If you feel you need one, use a `surface_variant` (#e5dcc9) color block that is `4px` thick with `full` rounded caps.
|
||||
* **Don’t** crowd the interface. If a screen feels busy, increase the background "paper" size and use a scrollable layout instead of shrinking elements.
|
||||
@@ -0,0 +1,305 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap"
|
||||
rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
|
||||
rel="stylesheet" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
|
||||
rel="stylesheet" />
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"primary": "#6c5a00",
|
||||
"on-tertiary-fixed-variant": "#00691a",
|
||||
"on-secondary-fixed": "#512a00",
|
||||
"on-error": "#ffefec",
|
||||
"surface-dim": "#dcd4c0",
|
||||
"primary-fixed": "#ffd709",
|
||||
"on-tertiary-fixed": "#00480f",
|
||||
"outline": "#7c766a",
|
||||
"on-secondary": "#fff0e6",
|
||||
"on-tertiary": "#d1ffc8",
|
||||
"inverse-surface": "#110e06",
|
||||
"on-secondary-fixed-variant": "#7a4300",
|
||||
"on-tertiary-container": "#005e17",
|
||||
"background": "#fef6e7",
|
||||
"primary-dim": "#5e4e00",
|
||||
"surface-container-low": "#f8f0e0",
|
||||
"primary-fixed-dim": "#efc900",
|
||||
"tertiary-container": "#91f78e",
|
||||
"inverse-primary": "#ffd709",
|
||||
"surface": "#fef6e7",
|
||||
"error": "#b02500",
|
||||
"on-error-container": "#520c00",
|
||||
"on-surface-variant": "#605b50",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"secondary": "#8a4c00",
|
||||
"surface-variant": "#e5dcc9",
|
||||
"secondary-fixed-dim": "#ffb470",
|
||||
"on-primary-fixed": "#453900",
|
||||
"on-secondary-container": "#6d3b00",
|
||||
"tertiary": "#006b1b",
|
||||
"surface-tint": "#6c5a00",
|
||||
"surface-container": "#f0e7d6",
|
||||
"on-background": "#322e25",
|
||||
"surface-bright": "#fef6e7",
|
||||
"on-primary-container": "#5b4b00",
|
||||
"error-container": "#f95630",
|
||||
"outline-variant": "#b3ac9f",
|
||||
"surface-container-highest": "#e5dcc9",
|
||||
"secondary-fixed": "#ffc697",
|
||||
"secondary-dim": "#794200",
|
||||
"on-surface": "#322e25",
|
||||
"on-primary": "#fff2cd",
|
||||
"tertiary-fixed": "#91f78e",
|
||||
"inverse-on-surface": "#a29c8f",
|
||||
"error-dim": "#b92902",
|
||||
"primary-container": "#ffd709",
|
||||
"surface-container-high": "#eae2d0",
|
||||
"on-primary-fixed-variant": "#665500",
|
||||
"tertiary-fixed-dim": "#83e881",
|
||||
"tertiary-dim": "#005d16",
|
||||
"secondary-container": "#ffc697"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "1rem",
|
||||
"lg": "2rem",
|
||||
"xl": "3rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Plus Jakarta Sans", "sans-serif"],
|
||||
"display": ["Plus Jakarta Sans", "sans-serif"],
|
||||
"body": ["Plus Jakarta Sans", "sans-serif"],
|
||||
"label": ["Plus Jakarta Sans", "sans-serif"]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="bg-surface text-on-surface min-h-screen pb-32 bg-[#f8f0e0]">
|
||||
<!-- TopAppBar -->
|
||||
<header
|
||||
class="fixed top-0 left-0 w-full z-50 flex items-center justify-between px-6 h-16 bg-[#f8f0e0]/80 backdrop-blur-[20px]">
|
||||
<button class="active:scale-95 transition-transform duration-200 text-[#6c5a00]">
|
||||
<span class="material-symbols-outlined text-2xl">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="font-['Plus_Jakarta_Sans'] font-bold text-lg tracking-tight text-[#6c5a00]">涂色识字配置</h1>
|
||||
<button class="active:scale-95 transition-transform duration-200 text-[#6c5a00]">
|
||||
<span class="material-symbols-outlined text-2xl">help</span>
|
||||
</button>
|
||||
</header>
|
||||
<main class="pt-20 px-6 max-w-2xl mx-auto">
|
||||
<!-- Print Preview Section -->
|
||||
<section class="mb-10">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-on-secondary-container font-bold text-lg">打印预览</h2>
|
||||
<span class="text-on-surface-variant text-sm font-medium">A4 垂直布局</span>
|
||||
</div>
|
||||
<div
|
||||
class="relative bg-surface-container-lowest rounded-xl shadow-sm aspect-[1/1.414] overflow-hidden p-6 border-4 border-surface-container-highest">
|
||||
<div
|
||||
class="h-full w-full border border-dashed border-outline-variant flex flex-col items-center justify-center space-y-8 bg-white/50">
|
||||
<!-- Preview Content Simulation -->
|
||||
<div class="grid grid-cols-4 gap-4 w-full px-4">
|
||||
<div class="aspect-square flex flex-col items-center justify-center space-y-2">
|
||||
<span class="text-4xl font-bold text-on-surface/20">山</span>
|
||||
<div class="w-4 h-4 rounded-full bg-primary-container shadow-sm"></div>
|
||||
</div>
|
||||
<div class="aspect-square flex flex-col items-center justify-center space-y-2">
|
||||
<span class="text-4xl font-bold text-on-surface/20">水</span>
|
||||
<div class="w-4 h-4 rounded-full bg-tertiary-container shadow-sm"></div>
|
||||
</div>
|
||||
<div class="aspect-square flex flex-col items-center justify-center space-y-2">
|
||||
<span class="text-4xl font-bold text-on-surface/20">日</span>
|
||||
<div class="w-4 h-4 rounded-full bg-secondary-container shadow-sm"></div>
|
||||
</div>
|
||||
<div class="aspect-square flex flex-col items-center justify-center space-y-2">
|
||||
<span class="text-4xl font-bold text-on-surface/20">月</span>
|
||||
<div class="w-4 h-4 rounded-full bg-blue-200 shadow-sm"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-4/5 h-px bg-surface-container-highest"></div>
|
||||
<div class="grid grid-cols-5 gap-3 w-full px-4">
|
||||
<div class="w-full aspect-square border border-surface-container-highest rounded-full"></div>
|
||||
<div class="w-full aspect-square border border-surface-container-highest rounded-full"></div>
|
||||
<div class="w-full aspect-square border border-surface-container-highest rounded-full"></div>
|
||||
<div class="w-full aspect-square border border-surface-container-highest rounded-full"></div>
|
||||
<div class="w-full aspect-square border border-surface-container-highest rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Floating Action Buttons -->
|
||||
<button
|
||||
class="absolute bottom-4 left-4 w-12 h-12 bg-surface-container-lowest/90 backdrop-blur shadow-lg rounded-full flex items-center justify-center text-primary active:scale-90 transition-all">
|
||||
<span class="material-symbols-outlined">refresh</span>
|
||||
</button>
|
||||
<button
|
||||
class="absolute bottom-4 right-4 w-12 h-12 bg-surface-container-lowest/90 backdrop-blur shadow-lg rounded-full flex items-center justify-center text-primary active:scale-90 transition-all">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">favorite</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Custom Content Section -->
|
||||
<section class="mb-10">
|
||||
<h2 class="text-on-secondary-container font-bold text-lg mb-4">内容设置</h2>
|
||||
<div class="bg-surface-container/50 rounded-2xl p-5 space-y-5 h-auto">
|
||||
<div class="flex flex-col space-y-3">
|
||||
<div class="flex justify-between items-center px-1">
|
||||
<label class="text-on-surface-variant text-sm font-semibold">自定义文字</label>
|
||||
<span class="text-on-surface-variant/60 text-xs font-medium">最多输入6个字</span>
|
||||
</div>
|
||||
<div class="relative flex items-center">
|
||||
<input
|
||||
class="w-full h-14 bg-white border border-outline-variant/30 rounded-2xl pl-4 pr-12 text-on-surface text-base focus:ring-2 focus:ring-primary-container focus:border-transparent font-medium shadow-sm"
|
||||
maxlength="6" placeholder="输入想要练习的汉字" type="text" value="山水日月" />
|
||||
<button
|
||||
class="absolute right-3 p-1 rounded-full text-on-surface-variant hover:bg-surface-container-low active:scale-90 transition-all">
|
||||
<span class="material-symbols-outlined text-xl">close</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-6 space-y-3">
|
||||
<div class="flex justify-between items-center px-1">
|
||||
<label class="text-on-surface-variant text-sm font-semibold">颜色自定义</label>
|
||||
<span class="text-on-surface-variant/60 text-xs font-medium">点击圆点修改颜色</span>
|
||||
</div>
|
||||
<div class="flex gap-4 overflow-x-auto no-scrollbar pb-2">
|
||||
<div class="flex-shrink-0 flex flex-col items-center gap-2">
|
||||
<div
|
||||
class="w-10 h-10 bg-white rounded-xl flex items-center justify-center font-bold text-lg text-on-surface shadow-sm border border-outline-variant/10">
|
||||
山</div>
|
||||
<button
|
||||
class="w-6 h-6 rounded-full bg-primary-container ring-2 ring-offset-2 ring-transparent active:ring-primary shadow-sm"></button>
|
||||
</div>
|
||||
<div class="flex-shrink-0 flex flex-col items-center gap-2">
|
||||
<div
|
||||
class="w-10 h-10 bg-white rounded-xl flex items-center justify-center font-bold text-lg text-on-surface shadow-sm border border-outline-variant/10">
|
||||
水</div>
|
||||
<button
|
||||
class="w-6 h-6 rounded-full bg-tertiary-container ring-2 ring-offset-2 ring-transparent active:ring-primary shadow-sm"></button>
|
||||
</div>
|
||||
<div class="flex-shrink-0 flex flex-col items-center gap-2">
|
||||
<div
|
||||
class="w-10 h-10 bg-white rounded-xl flex items-center justify-center font-bold text-lg text-on-surface shadow-sm border border-outline-variant/10">
|
||||
日</div>
|
||||
<button
|
||||
class="w-6 h-6 rounded-full bg-secondary-container ring-2 ring-offset-2 ring-transparent active:ring-primary shadow-sm"></button>
|
||||
</div>
|
||||
<div class="flex-shrink-0 flex flex-col items-center gap-2">
|
||||
<div
|
||||
class="w-10 h-10 bg-white rounded-xl flex items-center justify-center font-bold text-lg text-on-surface shadow-sm border border-outline-variant/10">
|
||||
月</div>
|
||||
<button
|
||||
class="w-6 h-6 rounded-full bg-blue-200 ring-2 ring-offset-2 ring-transparent active:ring-primary shadow-sm"></button>
|
||||
</div>
|
||||
<div class="flex-shrink-0 flex items-center justify-center">
|
||||
<button
|
||||
class="w-10 h-10 rounded-xl border border-dashed border-outline-variant/30 flex items-center justify-center text-on-surface-variant/40">
|
||||
<span class="material-symbols-outlined">add</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="-mx-1 px-1 overflow-x-auto no-scrollbar">
|
||||
<div class="flex gap-3 pb-1">
|
||||
<button
|
||||
class="flex-shrink-0 px-5 py-2.5 bg-white border border-outline-variant/20 rounded-xl text-[13px] font-bold text-primary shadow-sm active:scale-95 transition-all flex items-center gap-2 hover:bg-primary-container">
|
||||
<span class="material-symbols-outlined text-lg">draw</span>
|
||||
<span>基础笔画</span>
|
||||
</button>
|
||||
<button
|
||||
class="flex-shrink-0 px-5 py-2.5 bg-white border border-outline-variant/20 rounded-xl text-[13px] font-bold text-primary shadow-sm active:scale-95 transition-all flex items-center gap-2 hover:bg-primary-container">
|
||||
<span class="material-symbols-outlined text-lg">pin</span>
|
||||
<span>数字拼音</span>
|
||||
</button>
|
||||
<button
|
||||
class="flex-shrink-0 px-5 py-2.5 bg-white border border-outline-variant/20 rounded-xl text-[13px] font-bold text-primary shadow-sm active:scale-95 transition-all flex items-center gap-2 hover:bg-primary-container">
|
||||
<span class="material-symbols-outlined text-lg">nature_people</span>
|
||||
<span>动物植物</span>
|
||||
</button>
|
||||
<button
|
||||
class="flex-shrink-0 px-5 py-2.5 bg-white border border-outline-variant/20 rounded-xl text-[13px] font-bold text-primary shadow-sm active:scale-95 transition-all flex items-center gap-2 hover:bg-primary-container">
|
||||
<span class="material-symbols-outlined text-lg">more_horiz</span>
|
||||
<span>更多分类</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Template Selection Grid -->
|
||||
<section class="mb-10">
|
||||
<h2 class="text-on-secondary-container font-bold text-lg mb-4">模板选择</h2>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<!-- Grid Template Card -->
|
||||
<div
|
||||
class="relative bg-white p-6 rounded-2xl border-2 border-[#FFD700] shadow-sm flex flex-col items-center justify-center space-y-3">
|
||||
<div class="w-14 h-14 bg-primary-container rounded-full flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined text-3xl">grid_on</span>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="font-bold text-on-surface text-base">网格模板</p>
|
||||
<p class="text-xs text-on-surface-variant/70 mt-0.5">规范田字格练习</p>
|
||||
</div>
|
||||
<div class="absolute top-2 right-2">
|
||||
<span class="material-symbols-outlined text-primary text-xl"
|
||||
style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Search Template Card -->
|
||||
<div
|
||||
class="bg-white/60 p-6 rounded-2xl border border-outline-variant/10 shadow-sm flex flex-col items-center justify-center space-y-3 active:scale-95 transition-all">
|
||||
<div class="w-14 h-14 bg-secondary-container/30 rounded-full flex items-center justify-center text-secondary">
|
||||
<span class="material-symbols-outlined text-3xl">search</span>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<p class="font-bold text-on-surface text-base">找字模板</p>
|
||||
<p class="text-xs text-on-surface-variant/70 mt-0.5">趣味视觉辨识练习</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- Bottom Action Bar -->
|
||||
<div class="fixed bottom-0 left-0 w-full bg-[#f8f0e0]/90 backdrop-blur-[20px] px-6 py-6 flex gap-4 items-center z-50">
|
||||
<button
|
||||
class="w-[40%] h-14 bg-tertiary-container text-on-tertiary-container rounded-full font-bold flex items-center justify-center gap-2 active:scale-95 transition-all shadow-[0_4px_12px_rgba(0,107,27,0.1)]">
|
||||
<span class="material-symbols-outlined">share</span>
|
||||
<span>分享</span>
|
||||
</button>
|
||||
<button
|
||||
class="w-[60%] h-14 bg-gradient-to-br from-primary-fixed to-primary-fixed-dim text-on-primary-container rounded-full font-bold flex items-center justify-center gap-2 active:scale-95 transition-all shadow-[0_4px_12px_rgba(108,90,0,0.15)]">
|
||||
<span class="material-symbols-outlined">download</span>
|
||||
<span>保存到相册</span>
|
||||
</button>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 123 KiB |
Reference in New Issue
Block a user