R524809
228 lines
16 KiB
HTML
228 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="zh-CN"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<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"/>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, 'Plus Jakarta Sans';
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
vertical-align: middle;
|
|
}
|
|
/* Four-line grid simulation */
|
|
.tracing-grid {
|
|
background-image: linear-gradient(#b3ac9f 1px, transparent 1px),
|
|
linear-gradient(rgba(108, 90, 0, 0.2) 1px, transparent 1px),
|
|
linear-gradient(rgba(108, 90, 0, 0.2) 1px, transparent 1px),
|
|
linear-gradient(#b3ac9f 1px, transparent 1px);
|
|
background-size: 100% 40px;
|
|
background-position: 0 0, 0 10px, 0 20px, 0 30px;
|
|
height: 31px;
|
|
width: 100%;
|
|
}
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.no-scrollbar {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
</style>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"surface-container-high": "#eae2d0",
|
|
"tertiary-fixed": "#91f78e",
|
|
"error": "#b02500",
|
|
"inverse-surface": "#110e06",
|
|
"surface-dim": "#dcd4c0",
|
|
"on-background": "#322e25",
|
|
"inverse-on-surface": "#a29c8f",
|
|
"secondary-fixed": "#ffc697",
|
|
"on-primary-fixed": "#453900",
|
|
"tertiary-fixed-dim": "#83e881",
|
|
"surface-tint": "#6c5a00",
|
|
"surface-bright": "#fef6e7",
|
|
"tertiary-container": "#91f78e",
|
|
"on-primary-fixed-variant": "#665500",
|
|
"background": "#fef6e7",
|
|
"on-tertiary": "#d1ffc8",
|
|
"surface-variant": "#e5dcc9",
|
|
"on-surface-variant": "#605b50",
|
|
"surface-container": "#f0e7d6",
|
|
"primary-fixed-dim": "#efc900",
|
|
"primary-dim": "#5e4e00",
|
|
"on-error": "#ffefec",
|
|
"inverse-primary": "#ffd709",
|
|
"error-container": "#f95630",
|
|
"primary-container": "#ffd709",
|
|
"tertiary": "#006b1b",
|
|
"secondary": "#8a4c00",
|
|
"on-error-container": "#520c00",
|
|
"on-surface": "#322e25",
|
|
"surface-container-low": "#f8f0e0",
|
|
"on-primary-container": "#5b4b00",
|
|
"primary": "#6c5a00",
|
|
"on-secondary-container": "#6d3b00",
|
|
"on-primary": "#fff2cd",
|
|
"secondary-dim": "#794200",
|
|
"surface-container-highest": "#e5dcc9",
|
|
"outline-variant": "#b3ac9f",
|
|
"on-tertiary-fixed-variant": "#00691a",
|
|
"primary-fixed": "#ffd709",
|
|
"outline": "#7c766a",
|
|
"on-secondary": "#fff0e6",
|
|
"on-tertiary-container": "#005e17",
|
|
"on-secondary-fixed-variant": "#7a4300",
|
|
"secondary-container": "#ffc697",
|
|
"on-secondary-fixed": "#512a00",
|
|
"surface-container-lowest": "#ffffff",
|
|
"surface": "#fef6e7",
|
|
"error-dim": "#b92902",
|
|
"tertiary-dim": "#005d16",
|
|
"secondary-fixed-dim": "#ffb470",
|
|
"on-tertiary-fixed": "#00480f"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.75rem",
|
|
"lg": "1rem",
|
|
"xl": "1.5rem",
|
|
"full": "9999px"
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-surface min-h-screen pb-32">
|
|
<!-- TopAppBar -->
|
|
<header class="fixed top-0 w-full z-50 bg-[#fef6e7]/80 dark:bg-[#322e25]/80 backdrop-blur-xl flex items-center justify-between px-6 h-16 w-full">
|
|
<div class="flex items-center gap-4">
|
|
<button class="text-[#6c5a00] dark:text-[#ffd709] hover:bg-[#f0e7d6] dark:hover:bg-[#4a453a] rounded-full p-2 transition-colors active:scale-95">
|
|
<span class="material-symbols-outlined">arrow_back</span>
|
|
</button>
|
|
<h1 class="font-bold tracking-tight text-[#6c5a00] dark:text-[#ffd709] text-xl">英语字母描红</h1>
|
|
</div>
|
|
</header>
|
|
<main class="pt-24 px-6 max-w-2xl mx-auto space-y-8">
|
|
<!-- A4 Preview Area -->
|
|
<section class="relative group">
|
|
<div class="bg-surface-container-lowest rounded-xl shadow-sm p-8 aspect-[1/1.41] flex flex-col items-center border border-outline-variant/10 overflow-hidden">
|
|
<div class="w-full text-center mb-6">
|
|
<span class="text-on-surface-variant font-bold text-xs tracking-widest uppercase">Tracing Worksheet</span>
|
|
</div>
|
|
<!-- Letter Illustration Section -->
|
|
<div class="flex items-center justify-between w-full mb-10 gap-8">
|
|
<div class="flex-1 flex flex-col items-center">
|
|
<span class="text-[120px] font-extrabold text-primary leading-none select-none">A</span>
|
|
<p class="text-on-surface-variant font-medium text-lg mt-2">A is for Apple</p>
|
|
</div>
|
|
<div class="flex-1 aspect-square bg-surface-container rounded-lg p-4 flex items-center justify-center">
|
|
<img alt="stylized vector illustration of a bright red apple with a single green leaf" class="w-full h-full object-contain rounded-lg" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB3aAl9MLfHA1OCuWhSU8lGzyGRsUY_a5J8YBJTz-5K4LMHGHXBKUSX3g01G_DZ3NVN-NgcxwVUE8R3eZI6eZflKFgS7rH3ccozjtDL39HT8h_sc6Tyvm1ajJibM7dSr86_z5xNJzRjvapmOoHJ7U6Ni2AuNgbrNXJ8GaFdq_p_zT7JEaObUB6mndE4fbnD3ude5ilpsfYc-MZsG23dkS01tAlzUYozze28qkbOxw6l8vgiSagKE8dvS7h0E_hcFjZWusYd8D5mVuU"/>
|
|
</div>
|
|
</div>
|
|
<!-- Tracing Lines Section -->
|
|
<div class="w-full space-y-8">
|
|
<div class="space-y-4">
|
|
<div class="tracing-grid relative flex items-center px-2">
|
|
<span class="text-2xl text-on-surface-variant/40 font-bold ml-1 opacity-50 select-none">A A A A A</span>
|
|
</div>
|
|
<div class="tracing-grid"></div>
|
|
<div class="tracing-grid"></div>
|
|
<div class="tracing-grid"></div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-auto text-[10px] text-outline-variant font-medium">DOODLE MINI • ALPHABET SERIES</div>
|
|
</div>
|
|
<!-- Magnify Icon Decorative -->
|
|
<div class="absolute bottom-4 right-4 bg-primary-container text-on-primary-container p-3 rounded-full shadow-md">
|
|
<span class="material-symbols-outlined">zoom_in</span>
|
|
</div>
|
|
<button class="absolute top-4 right-4 bg-white/90 backdrop-blur-sm text-red-500 p-2 rounded-full shadow-lg flex items-center justify-center transition-transform active:scale-95 z-10">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">favorite</span>
|
|
</button></section>
|
|
<!-- Parameters Setting Panel -->
|
|
<section class="bg-surface-container rounded-xl p-6 space-y-6">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xl">⚙️</span>
|
|
<h2 class="text-lg font-bold text-on-surface">参数设置</h2>
|
|
</div>
|
|
<!-- Practice Type -->
|
|
<div class="space-y-3">
|
|
<label class="text-sm font-bold text-on-surface-variant ml-1">练习类型</label>
|
|
<div class="grid grid-cols-2 gap-2 bg-surface-container-high p-1.5 rounded-lg">
|
|
<button class="py-2.5 px-3 text-sm font-bold rounded-lg bg-primary-container text-on-primary-container shadow-sm transition-all">单字母学习页</button>
|
|
<button class="py-2.5 px-3 text-sm font-medium rounded-lg text-on-surface-variant hover:bg-surface-container-highest transition-all">整页描红</button>
|
|
<button class="py-2.5 px-3 text-sm font-medium rounded-lg text-on-surface-variant hover:bg-surface-container-highest transition-all">大小写对照</button>
|
|
<button class="py-2.5 px-3 text-sm font-medium rounded-lg text-on-surface-variant hover:bg-surface-container-highest transition-all">两列描红</button>
|
|
</div>
|
|
</div>
|
|
<!-- Letter Selection Grid -->
|
|
<div class="space-y-3">
|
|
<label class="text-sm font-bold text-on-surface-variant ml-1">选择字母</label>
|
|
<div class="grid grid-cols-6 gap-2">
|
|
<!-- Letter A (Selected) -->
|
|
<button class="aspect-square flex items-center justify-center rounded-lg bg-[#FFD700] text-[#6c5a00] font-bold text-lg shadow-sm active:scale-95 transition-all">A</button>
|
|
<!-- Other Letters -->
|
|
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">B</button>
|
|
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">C</button>
|
|
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">D</button>
|
|
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">E</button>
|
|
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">F</button>
|
|
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">G</button>
|
|
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">H</button>
|
|
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">I</button>
|
|
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">J</button>
|
|
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">K</button>
|
|
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">L</button>
|
|
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">M</button>
|
|
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">N</button>
|
|
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">O</button>
|
|
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">P</button>
|
|
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">Q</button>
|
|
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">R</button>
|
|
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">S</button>
|
|
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">T</button>
|
|
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">U</button>
|
|
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">V</button>
|
|
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">W</button>
|
|
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">X</button>
|
|
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">Y</button>
|
|
<button class="aspect-square flex items-center justify-center rounded-lg bg-surface-container-lowest text-on-surface-variant font-bold text-lg hover:bg-surface-container-highest active:scale-95 transition-all">Z</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Shuffle Button (Secondary Action) -->
|
|
<button class="w-full py-4 rounded-xl border-4 border-surface-container text-on-surface-variant font-bold text-lg flex items-center justify-center gap-2 hover:bg-surface-container transition-colors active:scale-[0.98]">
|
|
<span class="material-symbols-outlined">shuffle</span>
|
|
🔄 换一批
|
|
</button>
|
|
</main>
|
|
<!-- Fixed Bottom Action Bar -->
|
|
<footer class="fixed bottom-0 left-0 w-full bg-white/90 dark:bg-[#322e25]/90 backdrop-blur-xl px-6 py-4 flex items-center gap-3 z-[100] border-t border-surface-container shadow-[0_-8px_32px_rgba(50,46,37,0.06)]">
|
|
<!-- Share Button -->
|
|
<button class="flex-none w-[35%] h-12 rounded-lg bg-[#9CD343] text-white font-bold text-base flex items-center justify-center gap-2 active:scale-95 transition-all shadow-sm">
|
|
<span class="material-symbols-outlined text-xl">share</span>
|
|
分享
|
|
</button>
|
|
<!-- Save Button -->
|
|
<button class="flex-none w-[60%] h-12 rounded-lg bg-[#FFD700] text-[#6c5a00] font-black text-base flex items-center justify-center gap-2 active:scale-95 transition-all shadow-md">
|
|
<span class="material-symbols-outlined text-xl">download</span>
|
|
保存到相册
|
|
</button>
|
|
</footer>
|
|
</body></html> |