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/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>