R524809
305 lines
16 KiB
HTML
305 lines
16 KiB
HTML
<!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> |