joey5628/doodle-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 字母描红页样式开发基本完成

Browse Source
This commit is contained in:
R524809
2026-04-09 17:43:22 +08:00
parent 653737c481
commit a911da6181
59 changed files with 1043 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files
stitch-ui/printA4/DESIGN.md
+54
View File
@@ -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.
stitch-ui/printA4/code.html
+239
View File
@@ -0,0 +1,239 @@
<!DOCTYPE html>
<html 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&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;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": {
"outline-variant": "#b3ac9f",
"tertiary-container": "#91f78e",
"on-tertiary": "#d1ffc8",
"on-error": "#ffefec",
"surface-container-high": "#eae2d0",
"inverse-surface": "#110e06",
"surface-container-lowest": "#ffffff",
"on-surface": "#322e25",
"surface-variant": "#e5dcc9",
"secondary-fixed": "#ffc697",
"tertiary-fixed": "#91f78e",
"secondary-dim": "#794200",
"tertiary-fixed-dim": "#83e881",
"surface-dim": "#dcd4c0",
"on-primary": "#fff2cd",
"primary-dim": "#5e4e00",
"surface": "#fef6e7",
"secondary-fixed-dim": "#ffb470",
"surface-container-low": "#f8f0e0",
"error-container": "#f95630",
"inverse-on-surface": "#a29c8f",
"error": "#b02500",
"outline": "#7c766a",
"on-primary-fixed": "#453900",
"background": "#fef6e7",
"on-secondary-fixed-variant": "#7a4300",
"tertiary-dim": "#005d16",
"secondary-container": "#ffc697",
"on-tertiary-fixed": "#00480f",
"primary": "#6c5a00",
"on-secondary-fixed": "#512a00",
"on-error-container": "#520c00",
"surface-container": "#f0e7d6",
"on-primary-fixed-variant": "#665500",
"on-secondary-container": "#6d3b00",
"on-secondary": "#fff0e6",
"inverse-primary": "#ffd709",
"primary-container": "#ffd709",
"surface-bright": "#fef6e7",
"primary-fixed": "#ffd709",
"tertiary": "#006b1b",
"on-tertiary-container": "#005e17",
"primary-fixed-dim": "#efc900",
"error-dim": "#b92902",
"surface-tint": "#6c5a00",
"on-surface-variant": "#605b50",
"on-tertiary-fixed-variant": "#00691a",
"secondary": "#8a4c00",
"on-background": "#322e25",
"surface-container-highest": "#e5dcc9",
"on-primary-container": "#5b4b00"
},
"borderRadius": {
"DEFAULT": "1rem",
"lg": "2rem",
"xl": "3rem",
"full": "9999px"
},
"fontFamily": {
"headline": ["Plus Jakarta Sans"],
"body": ["Plus Jakarta Sans"],
"label": ["Plus Jakarta Sans"]
}
},
},
}
</script>
<style>
@media print {
.no-print { display: none; }
body { background: white; }
.a4-page {
box-shadow: none !important;
margin: 0 !important;
border: none !important;
}
}
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
</style>
<style>
body {
min-height: max(884px, 100dvh);
}
</style>
</head>
<body class="bg-surface-container-low font-body text-on-surface antialiased min-h-screen flex flex-col items-center py-10">
<!-- TopAppBar Shell (Shared Component) -->
<header class="w-full pt-8 pb-4 bg-[#fef6e7] dark:bg-stone-950 border-b-4 border-[#e5dcc9] dark:border-stone-800 rounded-b-none no-print">
<div class="max-w-[210mm] mx-auto px-12 flex flex-row items-center justify-between">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-[#6c5a00] text-3xl" data-icon="draw">draw</span>
<h1 class="text-2xl font-bold text-[#6c5a00] dark:text-yellow-500 font-['Plus_Jakarta_Sans'] tracking-tight leading-[1.6]">Doodle Mini</h1>
</div>
<div class="flex items-center gap-6">
<nav class="hidden md:flex items-center gap-8">
<a class="text-[#6c5a00] dark:text-yellow-400 font-bold font-['Plus_Jakarta_Sans']" href="#">Studio</a>
<a class="text-[#322e25] dark:text-stone-400 hover:bg-[#f0e7d6] dark:hover:bg-stone-800 transition-transform duration-200 p-2 rounded-lg font-['Plus_Jakarta_Sans']" href="#">Templates</a>
<a class="text-[#322e25] dark:text-stone-400 hover:bg-[#f0e7d6] dark:hover:bg-stone-800 transition-transform duration-200 p-2 rounded-lg font-['Plus_Jakarta_Sans']" href="#">Gallery</a>
</nav>
<div class="bg-primary-container text-on-primary-container px-4 py-1.5 rounded-full text-sm font-bold active:scale-95 transition-all cursor-pointer">
ID: #8821
</div>
</div>
</div>
</header>
<!-- Main Canvas (A4 Paper) -->
<main class="a4-page bg-surface-container-lowest w-[210mm] min-h-[297mm] shadow-[0_20px_50px_rgba(0,0,0,0.05)] mt-12 p-12 relative overflow-hidden flex flex-col">
<!-- Worksheet Header Section -->
<div class="border-b-4 border-on-surface/5 pb-8 mb-12">
<!-- Top Section -->
<div class="flex justify-between items-start mb-10">
<div class="flex items-center gap-4">
<div class="w-16 h-16 bg-primary-container rounded-xl flex items-center justify-center rotate-3">
<img alt="Doodle Mini Logo" class="w-12 h-12" data-alt="minimalist playful kid drawing logo with brush stroke yellow and brown colors on a clean white background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBdSOaW7wfndomKJ5FM9GgaqBCTAJXenyZWLXZDNDtt2PjtkDd-Ndlw5qes3qbkNfmDVVb4ovEYTvOG9U7Y5oA4HzAk0diN9fMxamhc5RV-TzkkbM1QmmC4qJ3xFn4GhxY6mwChzKp3o8i3BGpINikxJpcO5ZznuhL4ZuyrrlkzEBR2teL-Cke62jO1E7BTm4W9lB0JoH2kMePNVobUQYzgcqE_SEvgXbcn5yZmoevDnMgC37cdjm5aAIyVW11dNEaBM7j0Isek1y4"/>
</div>
<div>
<div class="text-xl font-black text-primary tracking-tighter">Doodle Mini</div>
<div class="text-[10px] text-outline font-bold tracking-widest uppercase">Educational Studio</div>
</div>
</div>
<div class="text-right">
<div class="bg-surface-container px-3 py-1 rounded-lg text-[11px] font-mono font-bold text-on-surface-variant">MATH-ADD-10-01</div>
</div>
</div>
<!-- Middle Section (Title) -->
<div class="text-center mb-10">
<h2 class="text-5xl font-black text-on-surface tracking-tight mb-2">10以内加法</h2>
<div class="h-1.5 w-24 bg-primary-container mx-auto rounded-full"></div>
</div>
<!-- Bottom Section (Fields) -->
<div class="flex justify-between items-end px-4">
<div class="flex items-end gap-2 flex-1">
<span class="text-lg font-bold text-on-surface-variant whitespace-nowrap">姓名:</span>
<div class="border-b-2 border-surface-container-highest flex-1 h-8 mb-1"></div>
</div>
<div class="flex items-end gap-2 flex-1 mx-8">
<span class="text-lg font-bold text-on-surface-variant whitespace-nowrap">日期:</span>
<div class="border-b-2 border-surface-container-highest flex-1 h-8 mb-1"></div>
</div>
<div class="flex items-end gap-2 w-32">
<span class="text-lg font-bold text-on-surface-variant whitespace-nowrap">得分:</span>
<div class="border-b-2 border-surface-container-highest flex-1 h-8 mb-1"></div>
</div>
</div>
</div>
<!-- Math Problems Content Area (Bento Preview) -->
<div class="grid grid-cols-2 gap-x-16 gap-y-10 flex-1">
<!-- Left Column Problems -->
<div class="space-y-12">
<div class="flex items-center justify-between text-3xl font-bold tracking-widest text-on-surface/80">
<span>3 + 4 =</span>
<div class="w-24 h-16 border-2 border-surface-container-highest rounded-2xl bg-surface-container-low/30"></div>
</div>
<div class="flex items-center justify-between text-3xl font-bold tracking-widest text-on-surface/80">
<span>5 + 2 =</span>
<div class="w-24 h-16 border-2 border-surface-container-highest rounded-2xl bg-surface-container-low/30"></div>
</div>
<div class="flex items-center justify-between text-3xl font-bold tracking-widest text-on-surface/80">
<span>1 + 8 =</span>
<div class="w-24 h-16 border-2 border-surface-container-highest rounded-2xl bg-surface-container-low/30"></div>
</div>
<div class="flex items-center justify-between text-3xl font-bold tracking-widest text-on-surface/80">
<span>6 + 3 =</span>
<div class="w-24 h-16 border-2 border-surface-container-highest rounded-2xl bg-surface-container-low/30"></div>
</div>
<div class="flex items-center justify-between text-3xl font-bold tracking-widest text-on-surface/80">
<span>2 + 7 =</span>
<div class="w-24 h-16 border-2 border-surface-container-highest rounded-2xl bg-surface-container-low/30"></div>
</div>
</div>
<!-- Right Column Problems -->
<div class="space-y-12">
<div class="flex items-center justify-between text-3xl font-bold tracking-widest text-on-surface/80">
<span>4 + 4 =</span>
<div class="w-24 h-16 border-2 border-surface-container-highest rounded-2xl bg-surface-container-low/30"></div>
</div>
<div class="flex items-center justify-between text-3xl font-bold tracking-widest text-on-surface/80">
<span>0 + 9 =</span>
<div class="w-24 h-16 border-2 border-surface-container-highest rounded-2xl bg-surface-container-low/30"></div>
</div>
<div class="flex items-center justify-between text-3xl font-bold tracking-widest text-on-surface/80">
<span>7 + 1 =</span>
<div class="w-24 h-16 border-2 border-surface-container-highest rounded-2xl bg-surface-container-low/30"></div>
</div>
<div class="flex items-center justify-between text-3xl font-bold tracking-widest text-on-surface/80">
<span>3 + 5 =</span>
<div class="w-24 h-16 border-2 border-surface-container-highest rounded-2xl bg-surface-container-low/30"></div>
</div>
<div class="flex items-center justify-between text-3xl font-bold tracking-widest text-on-surface/80">
<span>5 + 5 =</span>
<div class="w-24 h-16 border-2 border-surface-container-highest rounded-2xl bg-surface-container-low/30"></div>
</div>
</div>
</div>
<!-- Visual Decoration for Kids (Not visible in printing ideally but adds to UI) -->
<div class="absolute bottom-8 right-12 opacity-10 grayscale no-print">
<span class="material-symbols-outlined text-8xl" data-icon="rocket_launch">rocket_launch</span>
</div>
<div class="absolute bottom-8 left-12 opacity-10 grayscale no-print">
<span class="material-symbols-outlined text-8xl" data-icon="auto_awesome">auto_awesome</span>
</div>
</main>
<!-- BottomNavBar Shell (Shared Component) -->
<footer class="fixed bottom-0 left-0 w-full z-50 flex justify-around items-center px-6 pb-6 pt-2 print:hidden bg-[#f8f0e0]/80 backdrop-blur-xl shadow-[0_-8px_32px_rgba(50,46,37,0.06)] rounded-t-[3rem]">
<button class="flex flex-col items-center justify-center bg-[#ffd709] text-[#6c5a00] rounded-full p-3 transition-transform active:scale-96">
<span class="material-symbols-outlined" data-icon="brush">brush</span>
<span class="font-['Plus_Jakarta_Sans'] text-xs font-bold">Studio</span>
</button>
<button class="flex flex-col items-center justify-center text-[#322e25] p-3 hover:opacity-80 transition-opacity active:scale-96">
<span class="material-symbols-outlined" data-icon="description">description</span>
<span class="font-['Plus_Jakarta_Sans'] text-xs font-bold">Templates</span>
</button>
<button class="flex flex-col items-center justify-center text-[#322e25] p-3 hover:opacity-80 transition-opacity active:scale-96">
<span class="material-symbols-outlined" data-icon="auto_awesome_motion">auto_awesome_motion</span>
<span class="font-['Plus_Jakarta_Sans'] text-xs font-bold">Gallery</span>
</button>
</footer>
<!-- FAB for Print Action -->
<button class="no-print fixed right-8 bottom-28 w-16 h-16 bg-primary-container text-on-primary-container rounded-full shadow-lg flex items-center justify-center active:scale-95 transition-all hover:brightness-105 z-[60]" onclick="window.print()">
<span class="material-symbols-outlined text-3xl" data-icon="print">print</span>
</button>
</body></html>
stitch-ui/printA4/screen.png
+1
View File
@@ -0,0 +1 @@
<FIFE Image failed to fetch>