feat: 完成 4 个TabBar 页面初版样式修改
This commit is contained in:
R524809
@@ -0,0 +1,371 @@
|
||||
<!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"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"surface-container-highest": "#e5dcc9",
|
||||
"surface-bright": "#fef6e7",
|
||||
"secondary-container": "#ffc697",
|
||||
"on-secondary": "#fff0e6",
|
||||
"surface-variant": "#e5dcc9",
|
||||
"primary-fixed-dim": "#efc900",
|
||||
"primary-dim": "#5e4e00",
|
||||
"primary-container": "#ffd709",
|
||||
"inverse-surface": "#110e06",
|
||||
"on-background": "#322e25",
|
||||
"inverse-on-surface": "#a29c8f",
|
||||
"on-secondary-fixed": "#512a00",
|
||||
"on-tertiary-fixed": "#00480f",
|
||||
"surface-container": "#f0e7d6",
|
||||
"secondary-fixed": "#ffc697",
|
||||
"tertiary-fixed-dim": "#83e881",
|
||||
"secondary-dim": "#794200",
|
||||
"on-primary-fixed": "#453900",
|
||||
"surface-container-high": "#eae2d0",
|
||||
"on-tertiary-fixed-variant": "#00691a",
|
||||
"on-surface-variant": "#605b50",
|
||||
"on-surface": "#322e25",
|
||||
"on-tertiary-container": "#005e17",
|
||||
"surface": "#fef6e7",
|
||||
"tertiary-container": "#91f78e",
|
||||
"tertiary-dim": "#005d16",
|
||||
"outline-variant": "#b3ac9f",
|
||||
"error": "#b02500",
|
||||
"on-primary-fixed-variant": "#665500",
|
||||
"on-primary-container": "#5b4b00",
|
||||
"background": "#fef6e7",
|
||||
"on-secondary-fixed-variant": "#7a4300",
|
||||
"on-secondary-container": "#6d3b00",
|
||||
"on-primary": "#fff2cd",
|
||||
"inverse-primary": "#ffd709",
|
||||
"outline": "#7c766a",
|
||||
"error-dim": "#b92902",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-error": "#ffefec",
|
||||
"tertiary": "#006b1b",
|
||||
"secondary": "#8a4c00",
|
||||
"on-tertiary": "#d1ffc8",
|
||||
"primary": "#6c5a00",
|
||||
"surface-container-low": "#f8f0e0",
|
||||
"surface-dim": "#dcd4c0",
|
||||
"secondary-fixed-dim": "#ffb470",
|
||||
"surface-tint": "#6c5a00",
|
||||
"primary-fixed": "#ffd709",
|
||||
"on-error-container": "#520c00",
|
||||
"tertiary-fixed": "#91f78e",
|
||||
"error-container": "#f95630"
|
||||
},
|
||||
fontFamily: {
|
||||
"headline": ["Plus Jakarta Sans"],
|
||||
"body": ["Plus Jakarta Sans"],
|
||||
"label": ["Plus Jakarta Sans"]
|
||||
},
|
||||
borderRadius: {"DEFAULT": "0.75rem", "lg": "1rem", "xl": "1.5rem", "full": "9999px"},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
}
|
||||
.hide-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background font-body text-on-surface selection:bg-primary-container">
|
||||
<!-- TopAppBar -->
|
||||
<header class="fixed top-0 w-full z-50 bg-[#fef6e7]/80 dark:bg-stone-900/80 backdrop-blur-xl">
|
||||
<div class="flex justify-between items-center w-full px-6 py-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-[#6c5a00] dark:text-yellow-500 text-2xl hover:scale-95 transition-transform cursor-pointer">arrow_back</span>
|
||||
<div class="w-10 h-10 rounded-full bg-primary-container flex items-center justify-center overflow-hidden border-2 border-white shadow-sm">
|
||||
<img alt="Duck icon" data-alt="cute stylized duck head illustration in warm yellow and orange colors, playful nursery art style" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDvc8PWsCtmX47Is3M__zrkzx_wmWFN3lZV-S1KZ1eKQDxsP5GGmrNMyWi2IjqRDxRvFo2t1-HZrrlUuRBTXk0lOrZGY6nZfs3fS26fjQ2lK_dFTWf4i4pijmIlZw7clKCT4r7XrgxPrGm173B32CRtocnaLSgKmvDKlV695U-_J9fai85AAD2FXkoEbOeYQf4vo0EWuXCzUsuc7_93R4xWz_5NFcunMraCNELOvS3t9jv2vm44th_W6k5_KLR2F-LazXHyYEzhLq8"/>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="font-headline font-bold tracking-tight text-[#322e25] dark:text-stone-100 text-xl">按年龄学</h1>
|
||||
<span class="material-symbols-outlined text-[#6c5a00] dark:text-yellow-500 text-2xl hover:scale-95 transition-transform cursor-pointer">account_circle</span>
|
||||
</div>
|
||||
</header>
|
||||
<main class="pt-24 pb-32 px-6 max-w-2xl mx-auto space-y-10">
|
||||
<!-- Age Selector Section -->
|
||||
<section class="relative">
|
||||
<div class="flex gap-4 overflow-x-auto hide-scrollbar py-4 -mx-2 px-2 snap-x items-center"><!-- 3-4岁 -->
|
||||
<div class="snap-center shrink-0 w-32 h-24 rounded-xl bg-[#f5f5f5] flex flex-col items-center justify-center transition-all">
|
||||
<div class="font-bold text-xl text-[#322e25]">3-4 岁</div>
|
||||
<div class="text-xs text-[#322e25]/60 mt-1">启蒙认知</div>
|
||||
</div>
|
||||
<!-- 4-5岁 -->
|
||||
<div class="snap-center shrink-0 w-32 h-24 rounded-xl bg-[#f5f5f5] flex flex-col items-center justify-center transition-all">
|
||||
<div class="font-bold text-xl text-[#322e25]">4-5 岁</div>
|
||||
<div class="text-xs text-[#322e25]/60 mt-1">基础练习</div>
|
||||
</div>
|
||||
<!-- 5-6岁 (Active) -->
|
||||
<div class="snap-center shrink-0 w-32 h-24 rounded-xl bg-[#FFD700] border-2 border-white shadow-[0_8px_20px_rgba(255,215,0,0.3)] flex flex-col items-center justify-center scale-110 relative z-10 transition-all">
|
||||
<div class="font-black text-xl text-[#6c5a00]">5-6 岁</div>
|
||||
<div class="text-xs font-bold text-[#6c5a00]/80 mt-1">能力提升</div>
|
||||
<div class="absolute -top-2 -right-2 bg-on-tertiary-container text-white text-[10px] px-2 py-0.5 rounded-full">当前</div>
|
||||
</div>
|
||||
<!-- 6-7岁 -->
|
||||
<div class="snap-center shrink-0 w-32 h-24 rounded-xl bg-[#f5f5f5] flex flex-col items-center justify-center transition-all">
|
||||
<div class="font-bold text-xl text-[#322e25]">6-7 岁</div>
|
||||
<div class="text-xs text-[#322e25]/60 mt-1">幼小衔接</div>
|
||||
</div>
|
||||
<!-- 7-8岁 -->
|
||||
<div class="snap-center shrink-0 w-32 h-24 rounded-xl bg-[#f5f5f5] flex flex-col items-center justify-center transition-all">
|
||||
<div class="font-bold text-xl text-[#322e25]">7-8 岁</div>
|
||||
<div class="text-xs text-[#322e25]/60 mt-1">知识拓展</div>
|
||||
</div></div>
|
||||
</section>
|
||||
<!-- Ability Goals Card -->
|
||||
<section class="bg-surface-container-lowest rounded-xl p-6 shadow-sm border border-surface-container">
|
||||
<h2 class="text-xl font-extrabold text-on-secondary-container mb-6 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">stars</span>
|
||||
5-6 岁能力目标
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="p-4 rounded-lg bg-surface-container-low border border-surface-variant/30">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="text-xl">🔢</span>
|
||||
<span class="font-bold text-primary">数感</span>
|
||||
</div>
|
||||
<p class="text-sm text-on-surface-variant leading-relaxed">10以内加减法、凑十法</p>
|
||||
</div>
|
||||
<div class="p-4 rounded-lg bg-surface-container-low border border-surface-variant/30">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="text-xl">✏️</span>
|
||||
<span class="font-bold text-primary">书写</span>
|
||||
</div>
|
||||
<p class="text-sm text-on-surface-variant leading-relaxed">练字帖、拼音入门</p>
|
||||
</div>
|
||||
<div class="p-4 rounded-lg bg-surface-container-low border border-surface-variant/30">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="text-xl">🧩</span>
|
||||
<span class="font-bold text-primary">思维</span>
|
||||
</div>
|
||||
<p class="text-sm text-on-surface-variant leading-relaxed">方格推理、格子仿画 5x5</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Learning Path Section -->
|
||||
<section class="space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-2xl font-extrabold text-on-surface tracking-tight flex items-center gap-3">
|
||||
<span class="w-2 h-8 bg-primary rounded-full"></span>
|
||||
4 周推荐学习路线
|
||||
</h2>
|
||||
<div class="bg-surface-container px-3 py-1 rounded-full flex items-center gap-1">
|
||||
<span class="text-[10px] font-bold text-on-surface-variant">4 周 • 每周 3 练</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-8">
|
||||
<!-- Week 1 -->
|
||||
<div class="bg-white rounded-xl border border-stone-100 overflow-hidden shadow-sm">
|
||||
<div class="px-5 py-4 flex items-baseline gap-3 bg-stone-50">
|
||||
<span class="font-black text-xl text-[#333333]">第 1 周</span>
|
||||
<span class="font-bold text-sm text-stone-500">数感启蒙</span>
|
||||
</div>
|
||||
<div class="divide-y divide-stone-100">
|
||||
<div class="px-5 py-4 flex items-center justify-between group hover:bg-stone-50/50 transition-colors">
|
||||
<span class="font-bold text-[#333333]">找数字涂一涂</span>
|
||||
<button class="flex items-center gap-1 bg-[#FFD700] text-[#6c5a00] px-4 py-1.5 rounded-full text-sm font-bold shadow-sm active:scale-95 transition-all">
|
||||
去练习 <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="px-5 py-4 flex items-center justify-between group hover:bg-stone-50/50 transition-colors">
|
||||
<span class="font-bold text-[#333333]">5 以内加法</span>
|
||||
<button class="flex items-center gap-1 bg-[#FFD700] text-[#6c5a00] px-4 py-1.5 rounded-full text-sm font-bold shadow-sm active:scale-95 transition-all">
|
||||
去练习 <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="px-5 py-4 flex items-center justify-between group hover:bg-stone-50/50 transition-colors">
|
||||
<span class="font-bold text-[#333333]">数数连一连</span>
|
||||
<button class="flex items-center gap-1 bg-[#FFD700] text-[#6c5a00] px-4 py-1.5 rounded-full text-sm font-bold shadow-sm active:scale-95 transition-all">
|
||||
去练习 <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Week 2 -->
|
||||
<div class="bg-white rounded-xl border border-stone-100 overflow-hidden shadow-sm">
|
||||
<div class="px-5 py-4 flex items-baseline gap-3 bg-stone-50">
|
||||
<span class="font-black text-xl text-[#333333]">第 2 周</span>
|
||||
<span class="font-bold text-sm text-stone-500">形状与连线</span>
|
||||
</div>
|
||||
<div class="divide-y divide-stone-100">
|
||||
<div class="px-5 py-4 flex items-center justify-between group hover:bg-stone-50/50 transition-colors">
|
||||
<span class="font-bold text-[#333333]">识别形状</span>
|
||||
<button class="flex items-center gap-1 bg-[#FFD700] text-[#6c5a00] px-4 py-1.5 rounded-full text-sm font-bold shadow-sm active:scale-95 transition-all">
|
||||
去练习 <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="px-5 py-4 flex items-center justify-between group hover:bg-stone-50/50 transition-colors">
|
||||
<span class="font-bold text-[#333333]">线条识别</span>
|
||||
<button class="flex items-center gap-1 bg-[#FFD700] text-[#6c5a00] px-4 py-1.5 rounded-full text-sm font-bold shadow-sm active:scale-95 transition-all">
|
||||
去练习 <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="px-5 py-4 flex items-center justify-between group hover:bg-stone-50/50 transition-colors">
|
||||
<span class="font-bold text-[#333333]">数字点连线</span>
|
||||
<button class="flex items-center gap-1 bg-[#FFD700] text-[#6c5a00] px-4 py-1.5 rounded-full text-sm font-bold shadow-sm active:scale-95 transition-all">
|
||||
去练习 <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Week 3 -->
|
||||
<div class="bg-white rounded-xl border border-stone-100 overflow-hidden shadow-sm">
|
||||
<div class="px-5 py-4 flex items-baseline gap-3 bg-stone-50">
|
||||
<span class="font-black text-xl text-[#333333]">第 3 周</span>
|
||||
<span class="font-bold text-sm text-stone-500">趣味专注</span>
|
||||
</div>
|
||||
<div class="divide-y divide-stone-100">
|
||||
<div class="px-5 py-4 flex items-center justify-between group hover:bg-stone-50/50 transition-colors">
|
||||
<span class="font-bold text-[#333333]">颜色找规律</span>
|
||||
<button class="flex items-center gap-1 bg-[#FFD700] text-[#6c5a00] px-4 py-1.5 rounded-full text-sm font-bold shadow-sm active:scale-95 transition-all">
|
||||
去练习 <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="px-5 py-4 flex items-center justify-between group hover:bg-stone-50/50 transition-colors">
|
||||
<span class="font-bold text-[#333333]">方格推理</span>
|
||||
<button class="flex items-center gap-1 bg-[#FFD700] text-[#6c5a00] px-4 py-1.5 rounded-full text-sm font-bold shadow-sm active:scale-95 transition-all">
|
||||
去练习 <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="px-5 py-4 flex items-center justify-between group hover:bg-stone-50/50 transition-colors">
|
||||
<span class="font-bold text-[#333333]">格子仿画</span>
|
||||
<button class="flex items-center gap-1 bg-[#FFD700] text-[#6c5a00] px-4 py-1.5 rounded-full text-sm font-bold shadow-sm active:scale-95 transition-all">
|
||||
去练习 <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Week 4 -->
|
||||
<div class="bg-white rounded-xl border border-stone-100 overflow-hidden shadow-sm">
|
||||
<div class="px-5 py-4 flex items-baseline gap-3 bg-stone-50">
|
||||
<span class="font-black text-xl text-[#333333]">第 4 周</span>
|
||||
<span class="font-bold text-sm text-stone-500">综合练习</span>
|
||||
</div>
|
||||
<div class="divide-y divide-stone-100">
|
||||
<div class="px-5 py-4 flex items-center justify-between group hover:bg-stone-50/50 transition-colors">
|
||||
<span class="font-bold text-[#333333]">10以内加减法</span>
|
||||
<button class="flex items-center gap-1 bg-[#FFD700] text-[#6c5a00] px-4 py-1.5 rounded-full text-sm font-bold shadow-sm active:scale-95 transition-all">
|
||||
去练习 <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="px-5 py-4 flex items-center justify-between group hover:bg-stone-50/50 transition-colors">
|
||||
<span class="font-bold text-[#333333]">识字卡</span>
|
||||
<button class="flex items-center gap-1 bg-[#FFD700] text-[#6c5a00] px-4 py-1.5 rounded-full text-sm font-bold shadow-sm active:scale-95 transition-all">
|
||||
去练习 <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="px-5 py-4 flex items-center justify-between group hover:bg-stone-50/50 transition-colors">
|
||||
<span class="font-bold text-[#333333]">连连看</span>
|
||||
<button class="flex items-center gap-1 bg-[#FFD700] text-[#6c5a00] px-4 py-1.5 rounded-full text-sm font-bold shadow-sm active:scale-95 transition-all">
|
||||
去练习 <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Recommended Section -->
|
||||
<section class="space-y-4">
|
||||
<div class="flex justify-between items-end">
|
||||
<h2 class="text-xl font-extrabold text-on-surface">[为你推荐]</h2>
|
||||
<span class="text-sm font-bold text-primary cursor-pointer">更多</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<!-- Card 1 -->
|
||||
<div class="bg-white rounded-xl overflow-hidden border border-stone-100 shadow-sm flex flex-col">
|
||||
<div class="aspect-[4/3] w-full overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="vibrant educational math worksheet showing numbers and colorful apples for counting, soft sunny lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD-3lADhclTGODN9WtNh5v8bQPLysbllbKNkH40bAmVyE5d54PwfTBOiX9nER1hpE4rzHAfsmM_JhVnsE4EbdA914rYIb3S3e4r9QKFjUqYmj2XpE4MlYr_vLkG4oeMnvnHOqGC96nLGrPSOq-fpIddV7RSlYLDeNccBs0G2oUOy-6jIMujzTuEGk4nnxme5rpxs7rYjwcvVsqM5dlkpJthY42e4B3lSPH7ezx187WRSk--m4ZiWmAI52mMOiygzTSWoNormlvfvdM"/>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<h4 class="font-bold text-sm text-[#333333]">10以内加减法</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 2 -->
|
||||
<div class="bg-white rounded-xl overflow-hidden border border-stone-100 shadow-sm flex flex-col">
|
||||
<div class="aspect-[4/3] w-full overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="preschool addition flashcards with cute animal illustrations, warm morning light in a classroom" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBYS4O7PyflR5q8M6oXKwj_8QHzex3OL3YvdHBncutm7a_bjlZj83-8UBpGUQvJO20V0BnAdU3iKEoLlUqwpS60CiPhVyxYaHEAqv52P5YUhJdjf0hpLir1Li4rdI_-eqGkPTasYl-5kD2r8-RjUokKg_HiW5_TF72UbxFXHQh4BefYJZfl0Oc9-aTQvkbFL0C3tagi9Qv1jRsgQldMFU4M7cHt8KkxhO1QDF7-R85ZFORJM0RiqV2l-jn0c-UscKtuWtroiX6UUKk"/>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<h4 class="font-bold text-sm text-[#333333]">拼音描红</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 3 -->
|
||||
<div class="bg-white rounded-xl overflow-hidden border border-stone-100 shadow-sm flex flex-col">
|
||||
<div class="aspect-[4/3] w-full overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="logical pattern game for kids with colorful geometric shapes and grids, clean minimalist aesthetic" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBSafbTyucs8JLpTgibRWwAJsHukrklTAuEnaAzax_Kr1RNCwHjqpQjta0Q-h47ClufzEmaHPgCIOlm_a2lL4gNlgBDyraCwzRU7aWCf_Fj_dM1cLGzROJmtqrdHKjQzTbCp0_Da8BvXi4a4H2X4RAYVPnLbZVmbgPXrTvpKgEI605kIMmr3n0--WojJQRsF4B_xCho80gABbIaMTHJHrs9xdEY6fZKg8ArQx7lRbJ6_EsLLB_C5a5crZ_begwruXKr3pmdU6KneC8"/>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<h4 class="font-bold text-sm text-[#333333]">趣味找不同</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 4 -->
|
||||
<div class="bg-white rounded-xl overflow-hidden border border-stone-100 shadow-sm flex flex-col">
|
||||
<div class="aspect-[4/3] w-full overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="visual tracking exercise showing a winding maze path with a small mouse and cheese, soft pastel colors" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAOZHI1Dz6ax4iFUb3QYL-EWp2euA_3kyUeCcu6V57BBCzarMwKnFzcpJxJn4X4woklWFB08Ii1w6zsk0H5eDaPdgUYmsvY0NFqvAhKN_IbZGZjZnclZlBHkLRcX64Nl767L2pg01FQu9Tp6nq2p3lAuYeEQ2fiIdXh4j-QHyikbmx4_aDlx5X5fC0fqMMxWykhwLNkDzl2Rs3ucXj7zYnUP-dNNY-aj_JvqkY4pqoXQDt9ZJcfSeL0dWes7nvD5U2C_JFhrk1bVkw"/>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<h4 class="font-bold text-sm text-[#333333]">走迷宫大挑战</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 5 -->
|
||||
<div class="bg-white rounded-xl overflow-hidden border border-stone-100 shadow-sm flex flex-col">
|
||||
<div class="aspect-[4/3] w-full overflow-hidden bg-primary-container/20">
|
||||
<img class="w-full h-full object-cover" data-alt="creative dot-to-dot puzzle for kids forming a friendly dinosaur, soft natural lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD-3lADhclTGODN9WtNh5v8bQPLysbllbKNkH40bAmVyE5d54PwfTBOiX9nER1hpE4rzHAfsmM_JhVnsE4EbdA914rYIb3S3e4r9QKFjUqYmj2XpE4MlYr_vLkG4oeMnvnHOqGC96nLGrPSOq-fpIddV7RSlYLDeNccBs0G2oUOy-6jIMujzTuEGk4nnxme5rpxs7rYjwcvVsqM5dlkpJthY42e4B3lSPH7ezx187WRSk--m4ZiWmAI52mMOiygzTSWoNormlvfvdM"/>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<h4 class="font-bold text-sm text-[#333333]">数字点连线</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 6 -->
|
||||
<div class="bg-white rounded-xl overflow-hidden border border-stone-100 shadow-sm flex flex-col">
|
||||
<div class="aspect-[4/3] w-full overflow-hidden bg-secondary-container/20">
|
||||
<img class="w-full h-full object-cover" data-alt="kids handwriting practice sheet with chinese characters and stroke order guides, neat layout" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBYS4O7PyflR5q8M6oXKwj_8QHzex3OL3YvdHBncutm7a_bjlZj83-8UBpGUQvJO20V0BnAdU3iKEoLlUqwpS60CiPhVyxYaHEAqv52P5YUhJdjf0hpLir1Li4rdI_-eqGkPTasYl-5kD2r8-RjUokKg_HiW5_TF72UbxFXHQh4BefYJZfl0Oc9-aTQvkbFL0C3tagi9Qv1jRsgQldMFU4M7cHt8KkxhO1QDF7-R85ZFORJM0RiqV2l-jn0c-UscKtuWtroiX6UUKk"/>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<h4 class="font-bold text-sm text-[#333333]">方格推理高手</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- BottomNavBar -->
|
||||
<nav class="fixed bottom-0 left-0 w-full flex justify-around items-center px-4 pb-8 pt-3 bg-[#f8f0e0]/80 dark:bg-stone-800/80 backdrop-blur-xl rounded-t-[1.5rem] z-50 shadow-[0_-8px_32px_rgba(50,46,37,0.06)]">
|
||||
<div class="flex flex-col items-center justify-center text-[#322e25]/60 dark:text-stone-400 px-5 py-2 hover:bg-[#f0e7d6] dark:hover:bg-stone-700 rounded-full transition-all cursor-pointer">
|
||||
<span class="material-symbols-outlined text-2xl">map</span>
|
||||
<span class="font-headline text-xs font-semibold mt-1">学习地图</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center bg-[#ffd709] dark:bg-yellow-600 text-[#6c5a00] dark:text-yellow-950 rounded-full px-5 py-2 scale-105 shadow-md transition-all active:scale-90">
|
||||
<span class="material-symbols-outlined text-2xl" style="font-variation-settings: 'FILL' 1;">local_library</span>
|
||||
<span class="font-headline text-xs font-semibold mt-1">我的课程</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-[#322e25]/60 dark:text-stone-400 px-5 py-2 hover:bg-[#f0e7d6] dark:hover:bg-stone-700 rounded-full transition-all cursor-pointer">
|
||||
<span class="material-symbols-outlined text-2xl">explore</span>
|
||||
<span class="font-headline text-xs font-semibold mt-1">发现</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-[#322e25]/60 dark:text-stone-400 px-5 py-2 hover:bg-[#f0e7d6] dark:hover:bg-stone-700 rounded-full transition-all cursor-pointer">
|
||||
<span class="material-symbols-outlined text-2xl">family_restroom</span>
|
||||
<span class="font-headline text-xs font-semibold mt-1">家长中心</span>
|
||||
</div>
|
||||
</nav>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
@@ -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,371 @@
|
||||
<!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"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"surface-container-highest": "#e5dcc9",
|
||||
"surface-bright": "#fef6e7",
|
||||
"secondary-container": "#ffc697",
|
||||
"on-secondary": "#fff0e6",
|
||||
"surface-variant": "#e5dcc9",
|
||||
"primary-fixed-dim": "#efc900",
|
||||
"primary-dim": "#5e4e00",
|
||||
"primary-container": "#ffd709",
|
||||
"inverse-surface": "#110e06",
|
||||
"on-background": "#322e25",
|
||||
"inverse-on-surface": "#a29c8f",
|
||||
"on-secondary-fixed": "#512a00",
|
||||
"on-tertiary-fixed": "#00480f",
|
||||
"surface-container": "#f0e7d6",
|
||||
"secondary-fixed": "#ffc697",
|
||||
"tertiary-fixed-dim": "#83e881",
|
||||
"secondary-dim": "#794200",
|
||||
"on-primary-fixed": "#453900",
|
||||
"surface-container-high": "#eae2d0",
|
||||
"on-tertiary-fixed-variant": "#00691a",
|
||||
"on-surface-variant": "#605b50",
|
||||
"on-surface": "#322e25",
|
||||
"on-tertiary-container": "#005e17",
|
||||
"surface": "#fef6e7",
|
||||
"tertiary-container": "#91f78e",
|
||||
"tertiary-dim": "#005d16",
|
||||
"outline-variant": "#b3ac9f",
|
||||
"error": "#b02500",
|
||||
"on-primary-fixed-variant": "#665500",
|
||||
"on-primary-container": "#5b4b00",
|
||||
"background": "#fef6e7",
|
||||
"on-secondary-fixed-variant": "#7a4300",
|
||||
"on-secondary-container": "#6d3b00",
|
||||
"on-primary": "#fff2cd",
|
||||
"inverse-primary": "#ffd709",
|
||||
"outline": "#7c766a",
|
||||
"error-dim": "#b92902",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-error": "#ffefec",
|
||||
"tertiary": "#006b1b",
|
||||
"secondary": "#8a4c00",
|
||||
"on-tertiary": "#d1ffc8",
|
||||
"primary": "#6c5a00",
|
||||
"surface-container-low": "#f8f0e0",
|
||||
"surface-dim": "#dcd4c0",
|
||||
"secondary-fixed-dim": "#ffb470",
|
||||
"surface-tint": "#6c5a00",
|
||||
"primary-fixed": "#ffd709",
|
||||
"on-error-container": "#520c00",
|
||||
"tertiary-fixed": "#91f78e",
|
||||
"error-container": "#f95630"
|
||||
},
|
||||
fontFamily: {
|
||||
"headline": ["Plus Jakarta Sans"],
|
||||
"body": ["Plus Jakarta Sans"],
|
||||
"label": ["Plus Jakarta Sans"]
|
||||
},
|
||||
borderRadius: {"DEFAULT": "0.75rem", "lg": "1rem", "xl": "1.5rem", "full": "9999px"},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
}
|
||||
.hide-scrollbar::-webkit-scrollbar { display: none; }
|
||||
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background font-body text-on-surface selection:bg-primary-container">
|
||||
<!-- TopAppBar -->
|
||||
<header class="fixed top-0 w-full z-50 bg-[#fef6e7]/80 dark:bg-stone-900/80 backdrop-blur-xl">
|
||||
<div class="flex justify-between items-center w-full px-6 py-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-[#6c5a00] dark:text-yellow-500 text-2xl hover:scale-95 transition-transform cursor-pointer">arrow_back</span>
|
||||
<div class="w-10 h-10 rounded-full bg-primary-container flex items-center justify-center overflow-hidden border-2 border-white shadow-sm">
|
||||
<img alt="Duck icon" data-alt="cute stylized duck head illustration in warm yellow and orange colors, playful nursery art style" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDvc8PWsCtmX47Is3M__zrkzx_wmWFN3lZV-S1KZ1eKQDxsP5GGmrNMyWi2IjqRDxRvFo2t1-HZrrlUuRBTXk0lOrZGY6nZfs3fS26fjQ2lK_dFTWf4i4pijmIlZw7clKCT4r7XrgxPrGm173B32CRtocnaLSgKmvDKlV695U-_J9fai85AAD2FXkoEbOeYQf4vo0EWuXCzUsuc7_93R4xWz_5NFcunMraCNELOvS3t9jv2vm44th_W6k5_KLR2F-LazXHyYEzhLq8"/>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="font-headline font-bold tracking-tight text-[#322e25] dark:text-stone-100 text-xl">按年龄学</h1>
|
||||
<span class="material-symbols-outlined text-[#6c5a00] dark:text-yellow-500 text-2xl hover:scale-95 transition-transform cursor-pointer">account_circle</span>
|
||||
</div>
|
||||
</header>
|
||||
<main class="pt-24 pb-32 px-6 max-w-2xl mx-auto space-y-10">
|
||||
<!-- Age Selector Section -->
|
||||
<section class="relative">
|
||||
<div class="flex gap-4 overflow-x-auto hide-scrollbar py-4 -mx-2 px-2 snap-x items-center"><!-- 3-4岁 -->
|
||||
<div class="snap-center shrink-0 w-32 h-24 rounded-xl bg-[#f5f5f5] flex flex-col items-center justify-center transition-all">
|
||||
<div class="font-bold text-xl text-[#322e25]">3-4 岁</div>
|
||||
<div class="text-xs text-[#322e25]/60 mt-1">启蒙认知</div>
|
||||
</div>
|
||||
<!-- 4-5岁 -->
|
||||
<div class="snap-center shrink-0 w-32 h-24 rounded-xl bg-[#f5f5f5] flex flex-col items-center justify-center transition-all">
|
||||
<div class="font-bold text-xl text-[#322e25]">4-5 岁</div>
|
||||
<div class="text-xs text-[#322e25]/60 mt-1">基础练习</div>
|
||||
</div>
|
||||
<!-- 5-6岁 (Active) -->
|
||||
<div class="snap-center shrink-0 w-32 h-24 rounded-xl bg-[#FFD700] border-2 border-white shadow-[0_8px_20px_rgba(255,215,0,0.3)] flex flex-col items-center justify-center scale-110 relative z-10 transition-all">
|
||||
<div class="font-black text-xl text-[#6c5a00]">5-6 岁</div>
|
||||
<div class="text-xs font-bold text-[#6c5a00]/80 mt-1">能力提升</div>
|
||||
<div class="absolute -top-2 -right-2 bg-on-tertiary-container text-white text-[10px] px-2 py-0.5 rounded-full">当前</div>
|
||||
</div>
|
||||
<!-- 6-7岁 -->
|
||||
<div class="snap-center shrink-0 w-32 h-24 rounded-xl bg-[#f5f5f5] flex flex-col items-center justify-center transition-all">
|
||||
<div class="font-bold text-xl text-[#322e25]">6-7 岁</div>
|
||||
<div class="text-xs text-[#322e25]/60 mt-1">幼小衔接</div>
|
||||
</div>
|
||||
<!-- 7-8岁 -->
|
||||
<div class="snap-center shrink-0 w-32 h-24 rounded-xl bg-[#f5f5f5] flex flex-col items-center justify-center transition-all">
|
||||
<div class="font-bold text-xl text-[#322e25]">7-8 岁</div>
|
||||
<div class="text-xs text-[#322e25]/60 mt-1">知识拓展</div>
|
||||
</div></div>
|
||||
</section>
|
||||
<!-- Ability Goals Card -->
|
||||
<section class="bg-surface-container-lowest rounded-xl p-6 shadow-sm border border-surface-container">
|
||||
<h2 class="text-xl font-extrabold text-on-secondary-container mb-6 flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-primary" style="font-variation-settings: 'FILL' 1;">stars</span>
|
||||
5-6 岁能力目标
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="p-4 rounded-lg bg-surface-container-low border border-surface-variant/30">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="text-xl">🔢</span>
|
||||
<span class="font-bold text-primary">数感</span>
|
||||
</div>
|
||||
<p class="text-sm text-on-surface-variant leading-relaxed">10以内加减法、凑十法</p>
|
||||
</div>
|
||||
<div class="p-4 rounded-lg bg-surface-container-low border border-surface-variant/30">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="text-xl">✏️</span>
|
||||
<span class="font-bold text-primary">书写</span>
|
||||
</div>
|
||||
<p class="text-sm text-on-surface-variant leading-relaxed">练字帖、拼音入门</p>
|
||||
</div>
|
||||
<div class="p-4 rounded-lg bg-surface-container-low border border-surface-variant/30">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="text-xl">🧩</span>
|
||||
<span class="font-bold text-primary">思维</span>
|
||||
</div>
|
||||
<p class="text-sm text-on-surface-variant leading-relaxed">方格推理、格子仿画 5x5</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Learning Path Section -->
|
||||
<section class="space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-2xl font-extrabold text-on-surface tracking-tight flex items-center gap-3">
|
||||
<span class="w-2 h-8 bg-primary rounded-full"></span>
|
||||
4 周推荐学习路线
|
||||
</h2>
|
||||
<div class="bg-surface-container px-3 py-1 rounded-full flex items-center gap-1">
|
||||
<span class="text-[10px] font-bold text-on-surface-variant">4 周 • 每周 3 练</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-8">
|
||||
<!-- Week 1 -->
|
||||
<div class="bg-white rounded-xl border border-stone-100 overflow-hidden shadow-sm">
|
||||
<div class="px-5 py-4 flex items-baseline gap-3 bg-stone-50">
|
||||
<span class="font-black text-xl text-[#333333]">第 1 周</span>
|
||||
<span class="font-bold text-sm text-stone-500">数感启蒙</span>
|
||||
</div>
|
||||
<div class="divide-y divide-stone-100">
|
||||
<div class="px-5 py-4 flex items-center justify-between group hover:bg-stone-50/50 transition-colors">
|
||||
<span class="font-bold text-[#333333]">找数字涂一涂</span>
|
||||
<button class="flex items-center gap-1 bg-[#FFD700] text-[#6c5a00] px-4 py-1.5 rounded-full text-sm font-bold shadow-sm active:scale-95 transition-all">
|
||||
去练习 <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="px-5 py-4 flex items-center justify-between group hover:bg-stone-50/50 transition-colors">
|
||||
<span class="font-bold text-[#333333]">5 以内加法</span>
|
||||
<button class="flex items-center gap-1 bg-[#FFD700] text-[#6c5a00] px-4 py-1.5 rounded-full text-sm font-bold shadow-sm active:scale-95 transition-all">
|
||||
去练习 <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="px-5 py-4 flex items-center justify-between group hover:bg-stone-50/50 transition-colors">
|
||||
<span class="font-bold text-[#333333]">数数连一连</span>
|
||||
<button class="flex items-center gap-1 bg-[#FFD700] text-[#6c5a00] px-4 py-1.5 rounded-full text-sm font-bold shadow-sm active:scale-95 transition-all">
|
||||
去练习 <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Week 2 -->
|
||||
<div class="bg-white rounded-xl border border-stone-100 overflow-hidden shadow-sm">
|
||||
<div class="px-5 py-4 flex items-baseline gap-3 bg-stone-50">
|
||||
<span class="font-black text-xl text-[#333333]">第 2 周</span>
|
||||
<span class="font-bold text-sm text-stone-500">形状与连线</span>
|
||||
</div>
|
||||
<div class="divide-y divide-stone-100">
|
||||
<div class="px-5 py-4 flex items-center justify-between group hover:bg-stone-50/50 transition-colors">
|
||||
<span class="font-bold text-[#333333]">识别形状</span>
|
||||
<button class="flex items-center gap-1 bg-[#FFD700] text-[#6c5a00] px-4 py-1.5 rounded-full text-sm font-bold shadow-sm active:scale-95 transition-all">
|
||||
去练习 <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="px-5 py-4 flex items-center justify-between group hover:bg-stone-50/50 transition-colors">
|
||||
<span class="font-bold text-[#333333]">线条识别</span>
|
||||
<button class="flex items-center gap-1 bg-[#FFD700] text-[#6c5a00] px-4 py-1.5 rounded-full text-sm font-bold shadow-sm active:scale-95 transition-all">
|
||||
去练习 <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="px-5 py-4 flex items-center justify-between group hover:bg-stone-50/50 transition-colors">
|
||||
<span class="font-bold text-[#333333]">数字点连线</span>
|
||||
<button class="flex items-center gap-1 bg-[#FFD700] text-[#6c5a00] px-4 py-1.5 rounded-full text-sm font-bold shadow-sm active:scale-95 transition-all">
|
||||
去练习 <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Week 3 -->
|
||||
<div class="bg-white rounded-xl border border-stone-100 overflow-hidden shadow-sm">
|
||||
<div class="px-5 py-4 flex items-baseline gap-3 bg-stone-50">
|
||||
<span class="font-black text-xl text-[#333333]">第 3 周</span>
|
||||
<span class="font-bold text-sm text-stone-500">趣味专注</span>
|
||||
</div>
|
||||
<div class="divide-y divide-stone-100">
|
||||
<div class="px-5 py-4 flex items-center justify-between group hover:bg-stone-50/50 transition-colors">
|
||||
<span class="font-bold text-[#333333]">颜色找规律</span>
|
||||
<button class="flex items-center gap-1 bg-[#FFD700] text-[#6c5a00] px-4 py-1.5 rounded-full text-sm font-bold shadow-sm active:scale-95 transition-all">
|
||||
去练习 <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="px-5 py-4 flex items-center justify-between group hover:bg-stone-50/50 transition-colors">
|
||||
<span class="font-bold text-[#333333]">方格推理</span>
|
||||
<button class="flex items-center gap-1 bg-[#FFD700] text-[#6c5a00] px-4 py-1.5 rounded-full text-sm font-bold shadow-sm active:scale-95 transition-all">
|
||||
去练习 <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="px-5 py-4 flex items-center justify-between group hover:bg-stone-50/50 transition-colors">
|
||||
<span class="font-bold text-[#333333]">格子仿画</span>
|
||||
<button class="flex items-center gap-1 bg-[#FFD700] text-[#6c5a00] px-4 py-1.5 rounded-full text-sm font-bold shadow-sm active:scale-95 transition-all">
|
||||
去练习 <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Week 4 -->
|
||||
<div class="bg-white rounded-xl border border-stone-100 overflow-hidden shadow-sm">
|
||||
<div class="px-5 py-4 flex items-baseline gap-3 bg-stone-50">
|
||||
<span class="font-black text-xl text-[#333333]">第 4 周</span>
|
||||
<span class="font-bold text-sm text-stone-500">综合练习</span>
|
||||
</div>
|
||||
<div class="divide-y divide-stone-100">
|
||||
<div class="px-5 py-4 flex items-center justify-between group hover:bg-stone-50/50 transition-colors">
|
||||
<span class="font-bold text-[#333333]">10以内加减法</span>
|
||||
<button class="flex items-center gap-1 bg-[#FFD700] text-[#6c5a00] px-4 py-1.5 rounded-full text-sm font-bold shadow-sm active:scale-95 transition-all">
|
||||
去练习 <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="px-5 py-4 flex items-center justify-between group hover:bg-stone-50/50 transition-colors">
|
||||
<span class="font-bold text-[#333333]">识字卡</span>
|
||||
<button class="flex items-center gap-1 bg-[#FFD700] text-[#6c5a00] px-4 py-1.5 rounded-full text-sm font-bold shadow-sm active:scale-95 transition-all">
|
||||
去练习 <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="px-5 py-4 flex items-center justify-between group hover:bg-stone-50/50 transition-colors">
|
||||
<span class="font-bold text-[#333333]">连连看</span>
|
||||
<button class="flex items-center gap-1 bg-[#FFD700] text-[#6c5a00] px-4 py-1.5 rounded-full text-sm font-bold shadow-sm active:scale-95 transition-all">
|
||||
去练习 <span class="material-symbols-outlined text-sm">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Recommended Section -->
|
||||
<section class="space-y-4">
|
||||
<div class="flex justify-between items-end">
|
||||
<h2 class="text-xl font-extrabold text-on-surface">[为你推荐]</h2>
|
||||
<span class="text-sm font-bold text-primary cursor-pointer">更多</span>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<!-- Card 1 -->
|
||||
<div class="bg-white rounded-xl overflow-hidden border border-stone-100 shadow-sm flex flex-col">
|
||||
<div class="aspect-[4/3] w-full overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="vibrant educational math worksheet showing numbers and colorful apples for counting, soft sunny lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD-3lADhclTGODN9WtNh5v8bQPLysbllbKNkH40bAmVyE5d54PwfTBOiX9nER1hpE4rzHAfsmM_JhVnsE4EbdA914rYIb3S3e4r9QKFjUqYmj2XpE4MlYr_vLkG4oeMnvnHOqGC96nLGrPSOq-fpIddV7RSlYLDeNccBs0G2oUOy-6jIMujzTuEGk4nnxme5rpxs7rYjwcvVsqM5dlkpJthY42e4B3lSPH7ezx187WRSk--m4ZiWmAI52mMOiygzTSWoNormlvfvdM"/>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<h4 class="font-bold text-sm text-[#333333]">10以内加减法</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 2 -->
|
||||
<div class="bg-white rounded-xl overflow-hidden border border-stone-100 shadow-sm flex flex-col">
|
||||
<div class="aspect-[4/3] w-full overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="preschool addition flashcards with cute animal illustrations, warm morning light in a classroom" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBYS4O7PyflR5q8M6oXKwj_8QHzex3OL3YvdHBncutm7a_bjlZj83-8UBpGUQvJO20V0BnAdU3iKEoLlUqwpS60CiPhVyxYaHEAqv52P5YUhJdjf0hpLir1Li4rdI_-eqGkPTasYl-5kD2r8-RjUokKg_HiW5_TF72UbxFXHQh4BefYJZfl0Oc9-aTQvkbFL0C3tagi9Qv1jRsgQldMFU4M7cHt8KkxhO1QDF7-R85ZFORJM0RiqV2l-jn0c-UscKtuWtroiX6UUKk"/>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<h4 class="font-bold text-sm text-[#333333]">拼音描红</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 3 -->
|
||||
<div class="bg-white rounded-xl overflow-hidden border border-stone-100 shadow-sm flex flex-col">
|
||||
<div class="aspect-[4/3] w-full overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="logical pattern game for kids with colorful geometric shapes and grids, clean minimalist aesthetic" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBSafbTyucs8JLpTgibRWwAJsHukrklTAuEnaAzax_Kr1RNCwHjqpQjta0Q-h47ClufzEmaHPgCIOlm_a2lL4gNlgBDyraCwzRU7aWCf_Fj_dM1cLGzROJmtqrdHKjQzTbCp0_Da8BvXi4a4H2X4RAYVPnLbZVmbgPXrTvpKgEI605kIMmr3n0--WojJQRsF4B_xCho80gABbIaMTHJHrs9xdEY6fZKg8ArQx7lRbJ6_EsLLB_C5a5crZ_begwruXKr3pmdU6KneC8"/>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<h4 class="font-bold text-sm text-[#333333]">趣味找不同</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 4 -->
|
||||
<div class="bg-white rounded-xl overflow-hidden border border-stone-100 shadow-sm flex flex-col">
|
||||
<div class="aspect-[4/3] w-full overflow-hidden">
|
||||
<img class="w-full h-full object-cover" data-alt="visual tracking exercise showing a winding maze path with a small mouse and cheese, soft pastel colors" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAOZHI1Dz6ax4iFUb3QYL-EWp2euA_3kyUeCcu6V57BBCzarMwKnFzcpJxJn4X4woklWFB08Ii1w6zsk0H5eDaPdgUYmsvY0NFqvAhKN_IbZGZjZnclZlBHkLRcX64Nl767L2pg01FQu9Tp6nq2p3lAuYeEQ2fiIdXh4j-QHyikbmx4_aDlx5X5fC0fqMMxWykhwLNkDzl2Rs3ucXj7zYnUP-dNNY-aj_JvqkY4pqoXQDt9ZJcfSeL0dWes7nvD5U2C_JFhrk1bVkw"/>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<h4 class="font-bold text-sm text-[#333333]">走迷宫大挑战</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 5 -->
|
||||
<div class="bg-white rounded-xl overflow-hidden border border-stone-100 shadow-sm flex flex-col">
|
||||
<div class="aspect-[4/3] w-full overflow-hidden bg-primary-container/20">
|
||||
<img class="w-full h-full object-cover" data-alt="creative dot-to-dot puzzle for kids forming a friendly dinosaur, soft natural lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD-3lADhclTGODN9WtNh5v8bQPLysbllbKNkH40bAmVyE5d54PwfTBOiX9nER1hpE4rzHAfsmM_JhVnsE4EbdA914rYIb3S3e4r9QKFjUqYmj2XpE4MlYr_vLkG4oeMnvnHOqGC96nLGrPSOq-fpIddV7RSlYLDeNccBs0G2oUOy-6jIMujzTuEGk4nnxme5rpxs7rYjwcvVsqM5dlkpJthY42e4B3lSPH7ezx187WRSk--m4ZiWmAI52mMOiygzTSWoNormlvfvdM"/>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<h4 class="font-bold text-sm text-[#333333]">数字点连线</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Card 6 -->
|
||||
<div class="bg-white rounded-xl overflow-hidden border border-stone-100 shadow-sm flex flex-col">
|
||||
<div class="aspect-[4/3] w-full overflow-hidden bg-secondary-container/20">
|
||||
<img class="w-full h-full object-cover" data-alt="kids handwriting practice sheet with chinese characters and stroke order guides, neat layout" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBYS4O7PyflR5q8M6oXKwj_8QHzex3OL3YvdHBncutm7a_bjlZj83-8UBpGUQvJO20V0BnAdU3iKEoLlUqwpS60CiPhVyxYaHEAqv52P5YUhJdjf0hpLir1Li4rdI_-eqGkPTasYl-5kD2r8-RjUokKg_HiW5_TF72UbxFXHQh4BefYJZfl0Oc9-aTQvkbFL0C3tagi9Qv1jRsgQldMFU4M7cHt8KkxhO1QDF7-R85ZFORJM0RiqV2l-jn0c-UscKtuWtroiX6UUKk"/>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<h4 class="font-bold text-sm text-[#333333]">方格推理高手</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- BottomNavBar -->
|
||||
<nav class="fixed bottom-0 left-0 w-full flex justify-around items-center px-4 pb-8 pt-3 bg-[#f8f0e0]/80 dark:bg-stone-800/80 backdrop-blur-xl rounded-t-[1.5rem] z-50 shadow-[0_-8px_32px_rgba(50,46,37,0.06)]">
|
||||
<div class="flex flex-col items-center justify-center text-[#322e25]/60 dark:text-stone-400 px-5 py-2 hover:bg-[#f0e7d6] dark:hover:bg-stone-700 rounded-full transition-all cursor-pointer">
|
||||
<span class="material-symbols-outlined text-2xl">map</span>
|
||||
<span class="font-headline text-xs font-semibold mt-1">学习地图</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center bg-[#ffd709] dark:bg-yellow-600 text-[#6c5a00] dark:text-yellow-950 rounded-full px-5 py-2 scale-105 shadow-md transition-all active:scale-90">
|
||||
<span class="material-symbols-outlined text-2xl" style="font-variation-settings: 'FILL' 1;">local_library</span>
|
||||
<span class="font-headline text-xs font-semibold mt-1">我的课程</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-[#322e25]/60 dark:text-stone-400 px-5 py-2 hover:bg-[#f0e7d6] dark:hover:bg-stone-700 rounded-full transition-all cursor-pointer">
|
||||
<span class="material-symbols-outlined text-2xl">explore</span>
|
||||
<span class="font-headline text-xs font-semibold mt-1">发现</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-[#322e25]/60 dark:text-stone-400 px-5 py-2 hover:bg-[#f0e7d6] dark:hover:bg-stone-700 rounded-full transition-all cursor-pointer">
|
||||
<span class="material-symbols-outlined text-2xl">family_restroom</span>
|
||||
<span class="font-headline text-xs font-semibold mt-1">家长中心</span>
|
||||
</div>
|
||||
</nav>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 149 KiB |
@@ -0,0 +1,209 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="zh-CN"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>我的收藏 - 下载历史</title>
|
||||
<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@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: {
|
||||
"surface-variant": "#e5dcc9",
|
||||
"on-tertiary-fixed-variant": "#00691a",
|
||||
"secondary-container": "#ffc697",
|
||||
"error-container": "#f95630",
|
||||
"error-dim": "#b92902",
|
||||
"tertiary-fixed-dim": "#83e881",
|
||||
"primary-fixed-dim": "#efc900",
|
||||
"on-secondary-container": "#6d3b00",
|
||||
"on-error": "#ffefec",
|
||||
"on-background": "#322e25",
|
||||
"surface-container": "#f0e7d6",
|
||||
"secondary-fixed-dim": "#ffb470",
|
||||
"surface-tint": "#6c5a00",
|
||||
"on-primary-container": "#5b4b00",
|
||||
"inverse-primary": "#ffd709",
|
||||
"primary": "#6c5a00",
|
||||
"inverse-surface": "#110e06",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"primary-fixed": "#ffd709",
|
||||
"surface-bright": "#fef6e7",
|
||||
"surface-dim": "#dcd4c0",
|
||||
"outline": "#7c766a",
|
||||
"background": "#fef6e7",
|
||||
"surface-container-high": "#eae2d0",
|
||||
"on-primary-fixed-variant": "#665500",
|
||||
"primary-container": "#ffd709",
|
||||
"on-surface": "#322e25",
|
||||
"primary-dim": "#5e4e00",
|
||||
"surface-container-low": "#f8f0e0",
|
||||
"on-tertiary": "#d1ffc8",
|
||||
"on-secondary": "#fff0e6",
|
||||
"outline-variant": "#b3ac9f",
|
||||
"inverse-on-surface": "#a29c8f",
|
||||
"on-surface-variant": "#605b50",
|
||||
"on-tertiary-container": "#005e17",
|
||||
"tertiary-fixed": "#91f78e",
|
||||
"secondary": "#8a4c00",
|
||||
"on-secondary-fixed": "#512a00",
|
||||
"secondary-fixed": "#ffc697",
|
||||
"on-error-container": "#520c00",
|
||||
"secondary-dim": "#794200",
|
||||
"on-primary": "#fff2cd",
|
||||
"tertiary-dim": "#005d16",
|
||||
"surface": "#fef6e7",
|
||||
"tertiary": "#006b1b",
|
||||
"on-tertiary-fixed": "#00480f",
|
||||
"on-primary-fixed": "#453900",
|
||||
"on-secondary-fixed-variant": "#7a4300",
|
||||
"tertiary-container": "#91f78e",
|
||||
"surface-container-highest": "#e5dcc9",
|
||||
"error": "#b02500"
|
||||
},
|
||||
fontFamily: {
|
||||
"headline": ["Plus Jakarta Sans", "system-ui", "sans-serif"],
|
||||
"body": ["Plus Jakarta Sans", "system-ui", "sans-serif"],
|
||||
"label": ["Plus Jakarta Sans", "system-ui", "sans-serif"]
|
||||
},
|
||||
borderRadius: {"DEFAULT": "1rem", "lg": "2rem", "xl": "3rem", "full": "9999px"},
|
||||
},
|
||||
},
|
||||
}
|
||||
</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-background text-on-surface min-h-screen flex flex-col">
|
||||
<!-- TopAppBar from JSON -->
|
||||
<header class="bg-[#f8f0e0]/80 backdrop-blur-xl text-[#6c5a00] font-plus-jakarta docked full-width top-0 z-50 flex justify-between items-center w-full px-6 py-4 sticky">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="material-symbols-outlined cursor-pointer active:scale-95 transition-transform">arrow_back</span>
|
||||
<h1 class="text-2xl font-bold tracking-tight leading-[1.6]">我的收藏</h1>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<!-- Secondary action for clearing history as requested -->
|
||||
<button class="text-[#6c5a00] opacity-60 text-sm font-semibold hover:opacity-100 transition-opacity px-3 py-1 rounded-full hover:bg-[#f0e7d6]">清空历史</button>
|
||||
</div>
|
||||
</header>
|
||||
<main class="flex-1 px-4 pt-4 pb-32 max-w-2xl mx-auto w-full">
|
||||
<!-- Segmented Control -->
|
||||
<div class="bg-surface-container rounded-full p-1.5 flex mb-8">
|
||||
<button class="flex-1 py-3 text-sm font-bold text-on-surface-variant rounded-full transition-all">
|
||||
收藏的题型
|
||||
</button>
|
||||
<button class="flex-1 py-3 text-sm font-bold text-on-primary-container bg-primary-container rounded-full shadow-sm">
|
||||
下载历史
|
||||
</button>
|
||||
</div>
|
||||
<!-- Download History List -->
|
||||
<div class="space-y-4">
|
||||
<!-- History Section: Today -->
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xs font-bold text-outline uppercase tracking-widest px-4 mb-3">今天</h3>
|
||||
<div class="space-y-4"><!-- History Item 1 -->
|
||||
<div class="bg-surface-container-low rounded-2xl p-4 flex gap-4 items-center group active:scale-[0.98] transition-all">
|
||||
<div class="w-20 h-20 rounded-xl overflow-hidden flex-shrink-0 bg-surface-container-highest">
|
||||
<img class="w-full h-full object-cover" data-alt="a minimalist educational worksheet preview with handwriting guides for chinese pinyin and soft warm studio lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBCm6X4rhibw2_WxP-U0dDyOsiYol3y12OnEXHRkPONZYMQBUcr3Grqo1IbwH3sdWPg5jIUeIbr_AEwv_hFwUOMMz9jTIIMc6Pke1bzSvlQcgdDq-zMEIU4A--IQFX59ac-8BscCajXZcd4v8rE6JEZFf1-aztKclPTkE_Rrgj-nbVCy5V6bOE6yDOB67VdTbcqiOdaFN18ju_MgWVo3FQZLwIUZOBahkPl0vDIKA0mkiaGK9eiFpfnERYxkYG3eWJZ40umTYp46Jo"/>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h4 class="text-lg font-bold text-on-surface mb-1 leading-tight">拼音描红 · 声母表</h4>
|
||||
<div class="flex items-center gap-2 text-on-surface-variant/70 text-sm">
|
||||
<span class="material-symbols-outlined text-sm" style="font-variation-settings: 'opsz' 18;">schedule</span>
|
||||
<span>14:32</span>
|
||||
<span class="w-1 h-1 bg-outline-variant rounded-full"></span>
|
||||
<span class="text-tertiary font-medium">已保存相册</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-10 h-10 rounded-full flex items-center justify-center hover:bg-surface-container transition-colors">
|
||||
<span class="material-symbols-outlined text-outline">more_vert</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- History Item 2 -->
|
||||
<div class="bg-surface-container-low rounded-2xl p-4 flex gap-4 items-center active:scale-[0.98] transition-all">
|
||||
<div class="w-20 h-20 rounded-xl overflow-hidden flex-shrink-0 bg-surface-container-highest">
|
||||
<img class="w-full h-full object-cover" data-alt="a colorful math worksheet for young kids featuring simple addition problems and hand-drawn star shapes in sunny colors" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBxNORxN_vftYMLaMjZVscL-o9bZnBrfUi7IAqOrFATIztGV12_0ggwgae-fmk0cORWtysZWJJDcAzj0NEyniFxbREoGDuq9U4kytprJkA70_k0MCzPgStmq0bRwu1Gx1j4peglFam8PH6IlPvOMbiHQ7-fMFfYTSBtA1p7Dp06NDOzS2VrMlF8VxjEgihVmhHUrHePVvXlktUkXBKNzrXEXrogO3iOyouTUKyvJh0TeChKUv3KohMoD5ol7C3fjBhdHf7QD4StOQ4"/>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h4 class="text-lg font-bold text-on-surface mb-1 leading-tight">趣味口算题卡</h4>
|
||||
<div class="flex items-center gap-2 text-on-surface-variant/70 text-sm">
|
||||
<span class="material-symbols-outlined text-sm" style="font-variation-settings: 'opsz' 18;">schedule</span>
|
||||
<span>09:15</span>
|
||||
<span class="w-1 h-1 bg-outline-variant rounded-full"></span>
|
||||
<span class="text-on-surface-variant/50">已下载 PDF</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-10 h-10 rounded-full flex items-center justify-center hover:bg-surface-container transition-colors">
|
||||
<span class="material-symbols-outlined text-outline">more_vert</span>
|
||||
</button>
|
||||
</div></div>
|
||||
</div>
|
||||
<!-- History Section: Yesterday -->
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xs font-bold text-outline uppercase tracking-widest px-4 mb-3">昨天</h3>
|
||||
<div class="space-y-4"><!-- History Item 3 -->
|
||||
<div class="bg-surface-container-low rounded-2xl p-4 flex gap-4 items-center active:scale-[0.98] transition-all opacity-90">
|
||||
<div class="w-20 h-20 rounded-xl overflow-hidden flex-shrink-0 bg-surface-container-highest">
|
||||
<div class="w-full h-full bg-gradient-to-br from-secondary-container to-primary-container/20 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-on-secondary-container text-3xl">draw</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h4 class="text-lg font-bold text-on-surface mb-1 leading-tight">汉字笔画基础训练</h4>
|
||||
<div class="flex items-center gap-2 text-on-surface-variant/70 text-sm">
|
||||
<span class="material-symbols-outlined text-sm" style="font-variation-settings: 'opsz' 18;">schedule</span>
|
||||
<span>16:40</span>
|
||||
<span class="w-1 h-1 bg-outline-variant rounded-full"></span>
|
||||
<span class="text-on-surface-variant/50">已发送邮件</span>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-10 h-10 rounded-full flex items-center justify-center hover:bg-surface-container transition-colors">
|
||||
<span class="material-symbols-outlined text-outline">more_vert</span>
|
||||
</button>
|
||||
</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Empty State Logic (Visualized if no content) -->
|
||||
<!-- <div class="hidden flex-col items-center justify-center py-20 text-center">
|
||||
<span class="material-symbols-outlined text-6xl text-outline-variant mb-4">history_toggle_off</span>
|
||||
<p class="text-on-surface-variant font-medium">暂无下载记录</p>
|
||||
</div> -->
|
||||
</main>
|
||||
<!-- BottomNavBar from JSON -->
|
||||
<nav class="fixed bottom-0 left-0 w-full flex justify-around items-center px-4 pb-6 pt-2 bg-[#f8f0e0]/80 backdrop-blur-xl z-50 rounded-t-[3rem] shadow-[0_-8px_32px_0_rgba(50,46,37,0.06)]">
|
||||
<div class="flex flex-col items-center justify-center text-[#322e25] dark:text-[#fef6e7] opacity-70 px-4 py-2 hover:opacity-100 transition-opacity active:scale-90 duration-200 cursor-pointer">
|
||||
<span class="material-symbols-outlined">explore</span>
|
||||
<span class="font-plus-jakarta text-[12px] font-semibold leading-[1.6]">发现</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-[#322e25] dark:text-[#fef6e7] opacity-70 px-4 py-2 hover:opacity-100 transition-opacity active:scale-90 duration-200 cursor-pointer">
|
||||
<span class="material-symbols-outlined">child_care</span>
|
||||
<span class="font-plus-jakarta text-[12px] font-semibold leading-[1.6]">分龄</span>
|
||||
</div>
|
||||
<!-- Active Tab: 收藏 -->
|
||||
<div class="flex flex-col items-center justify-center bg-[#ffd709] text-[#6d3b00] rounded-full px-6 py-2 scale-105 active:scale-90 transition-all duration-200 cursor-pointer">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">favorite</span>
|
||||
<span class="font-plus-jakarta text-[12px] font-semibold leading-[1.6]">收藏</span>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center text-[#322e25] dark:text-[#fef6e7] opacity-70 px-4 py-2 hover:opacity-100 transition-opacity active:scale-90 duration-200 cursor-pointer">
|
||||
<span class="material-symbols-outlined">person</span>
|
||||
<span class="font-plus-jakarta text-[12px] font-semibold leading-[1.6]">我的</span>
|
||||
</div>
|
||||
</nav>
|
||||
</body></html>
|
||||
@@ -0,0 +1,231 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" 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"/>
|
||||
<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: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.glass-nav {
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
}
|
||||
</style>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"surface-variant": "#e5dcc9",
|
||||
"on-tertiary-fixed-variant": "#00691a",
|
||||
"secondary-container": "#ffc697",
|
||||
"error-container": "#f95630",
|
||||
"error-dim": "#b92902",
|
||||
"tertiary-fixed-dim": "#83e881",
|
||||
"primary-fixed-dim": "#efc900",
|
||||
"on-secondary-container": "#6d3b00",
|
||||
"on-error": "#ffefec",
|
||||
"on-background": "#322e25",
|
||||
"surface-container": "#f0e7d6",
|
||||
"secondary-fixed-dim": "#ffb470",
|
||||
"surface-tint": "#6c5a00",
|
||||
"on-primary-container": "#5b4b00",
|
||||
"inverse-primary": "#ffd709",
|
||||
"primary": "#6c5a00",
|
||||
"inverse-surface": "#110e06",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"primary-fixed": "#ffd709",
|
||||
"surface-bright": "#fef6e7",
|
||||
"surface-dim": "#dcd4c0",
|
||||
"outline": "#7c766a",
|
||||
"background": "#fef6e7",
|
||||
"surface-container-high": "#eae2d0",
|
||||
"on-primary-fixed-variant": "#665500",
|
||||
"primary-container": "#ffd709",
|
||||
"on-surface": "#322e25",
|
||||
"primary-dim": "#5e4e00",
|
||||
"surface-container-low": "#f8f0e0",
|
||||
"on-tertiary": "#d1ffc8",
|
||||
"on-secondary": "#fff0e6",
|
||||
"outline-variant": "#b3ac9f",
|
||||
"inverse-on-surface": "#a29c8f",
|
||||
"on-surface-variant": "#605b50",
|
||||
"on-tertiary-container": "#005e17",
|
||||
"tertiary-fixed": "#91f78e",
|
||||
"secondary": "#8a4c00",
|
||||
"on-secondary-fixed": "#512a00",
|
||||
"secondary-fixed": "#ffc697",
|
||||
"on-error-container": "#520c00",
|
||||
"secondary-dim": "#794200",
|
||||
"on-primary": "#fff2cd",
|
||||
"tertiary-dim": "#005d16",
|
||||
"surface": "#fef6e7",
|
||||
"tertiary": "#006b1b",
|
||||
"on-tertiary-fixed": "#00480f",
|
||||
"on-primary-fixed": "#453900",
|
||||
"on-secondary-fixed-variant": "#7a4300",
|
||||
"tertiary-container": "#91f78e",
|
||||
"surface-container-highest": "#e5dcc9",
|
||||
"error": "#b02500"
|
||||
},
|
||||
fontFamily: {
|
||||
"headline": ["Plus Jakarta Sans"],
|
||||
"body": ["Plus Jakarta Sans"],
|
||||
"label": ["Plus Jakarta Sans"]
|
||||
},
|
||||
borderRadius: {"DEFAULT": "1rem", "lg": "2rem", "xl": "3rem", "full": "9999px"},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface min-h-screen pb-32">
|
||||
<!-- Top App Bar -->
|
||||
<header class="bg-[#f8f0e0]/80 dark:bg-[#322e25]/80 backdrop-blur-xl docked full-width top-0 z-50 flex justify-between items-center w-full px-6 py-4 sticky">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-[#f0e7d6] active:scale-95 transition-all text-[#6c5a00]">
|
||||
<span class="material-symbols-outlined" data-icon="arrow_back">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="font-plus-jakarta text-2xl font-bold tracking-tight leading-[1.6] text-[#6c5a00]">我的收藏</h1>
|
||||
</div>
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-[#f0e7d6] active:scale-95 transition-all text-[#6c5a00]">
|
||||
<span class="material-symbols-outlined" data-icon="search">search</span>
|
||||
</button>
|
||||
</header>
|
||||
<main class="max-w-2xl mx-auto px-6 pt-6">
|
||||
<!-- Segmented Control -->
|
||||
<div class="bg-surface-container p-1.5 rounded-full flex items-center mb-8 shadow-sm">
|
||||
<button class="flex-1 py-3 px-4 rounded-full bg-primary-container text-on-primary-container font-bold text-sm transition-all shadow-sm">
|
||||
收藏的题型
|
||||
</button>
|
||||
<button class="flex-1 py-3 px-4 rounded-full text-on-surface-variant font-medium text-sm hover:bg-surface-container-high transition-all">
|
||||
下载历史
|
||||
</button>
|
||||
</div>
|
||||
<!-- Favorites List -->
|
||||
<div class="space-y-4">
|
||||
<!-- Card 1 -->
|
||||
<div class="bg-surface-container-low p-4 flex items-center gap-4 active:scale-[0.98] transition-transform duration-200 rounded-2xl">
|
||||
<div class="w-20 h-20 overflow-hidden flex-shrink-0 bg-surface-container-highest rounded-xl">
|
||||
<img alt="Worksheet Thumbnail" class="w-full h-full object-cover" data-alt="Close-up of a colorful children's math worksheet with simple addition problems and cute illustrated animals on creamy paper." src="https://lh3.googleusercontent.com/aida-public/AB6AXuD7khp0rJABfa9yFrMt9ZgIhAPyN44XmJ2pXNBgCzbgBvwA5ptFZVty013JedVzbE9_VvCQnToN7QETLDKjtiX22igzK-a5h4E8wjKrembFW4eVuk1RsJIbHjx3_cCz0hJ7_t76hF8t-Qdod_5R9sNMor1ZEjf6dGNp6UI_eIBjsN9b22iCTJ2VB-IEh0Rmil6_iC4Og-4I03IcQDV2rTHYIXcZxjiay1IiYGXw3wJ3bfo2SF2N7ZFT00akTgYU-9JyF7xJ6n15Yzc"/>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-bold text-lg text-on-surface leading-tight mb-1">10以内加法</h3>
|
||||
<p class="text-on-surface-variant text-xs mb-2 flex items-center gap-1">
|
||||
数学启蒙 · 4-6岁 ·
|
||||
<span class="flex text-primary-fixed-dim">
|
||||
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1;">star</span>
|
||||
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1;">star</span>
|
||||
</span>
|
||||
</p>
|
||||
<span class="text-[10px] text-outline px-2 py-0.5 bg-surface-container rounded-full uppercase tracking-wider">收藏于 3 天前</span>
|
||||
</div>
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-full text-error transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="favorite" style="font-variation-settings: 'FILL' 1;">favorite</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Card 2 -->
|
||||
<div class="bg-surface-container-low p-4 flex items-center gap-4 active:scale-[0.98] transition-transform duration-200 rounded-2xl">
|
||||
<div class="w-20 h-20 overflow-hidden flex-shrink-0 bg-surface-container-highest rounded-xl">
|
||||
<img alt="Worksheet Thumbnail" class="w-full h-full object-cover" data-alt="Children's logic puzzle worksheet featuring colorful patterns and shape matching exercises in a playful studio setting." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBY_0Rr153ZBT4IHcMyFtrcgl-y2ZRyVnOuGecnn7f4PZKoAx2lOuCorsMmfRa72s0JmbXrt4XT3QU1x7cIbZUyhv_EXwCfMaNxtkHc-ymIBIQ5jqm5oiQebrEWH4kjv14JdkCiziT4xzac4TdVN5yqpk7Wlg80QBl_ldDmAQqIgcUeN2PvlVvhmpOYmFeWE2HS3I_e4vV1J8s_cfV9_4g7y8SbxlSfnTmgQNeXrVbcdwaNEAGQWp92Iif0d2pVIqdfuUHO1pTw8oQ"/>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-bold text-lg text-on-surface leading-tight mb-1">图形连连看</h3>
|
||||
<p class="text-on-surface-variant text-xs mb-2 flex items-center gap-1">
|
||||
逻辑思维 · 3-5岁 ·
|
||||
<span class="flex text-primary-fixed-dim">
|
||||
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1;">star</span>
|
||||
</span>
|
||||
</p>
|
||||
<span class="text-[10px] text-outline px-2 py-0.5 bg-surface-container rounded-full uppercase tracking-wider">收藏于 5 天前</span>
|
||||
</div>
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-full text-error transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="favorite" style="font-variation-settings: 'FILL' 1;">favorite</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Card 3 -->
|
||||
<div class="bg-surface-container-low p-4 flex items-center gap-4 active:scale-[0.98] transition-transform duration-200 rounded-2xl">
|
||||
<div class="w-20 h-20 overflow-hidden flex-shrink-0 bg-surface-container-highest rounded-xl">
|
||||
<img alt="Worksheet Thumbnail" class="w-full h-full object-cover" data-alt="Handwritten-style pinyin writing worksheet for kids with large guides and soft yellow accents on textured white paper." src="https://lh3.googleusercontent.com/aida-public/AB6AXuC54mXQ8620XwIsWmUHBHJGdmpF8uE4cSYxwR2NLJTsa6gYdTCHz2tqrKbGOye-y0CGgCPPWwJXzEuB2ZYrQ3CWWPlamvbjhTUDYf8yoA9Lyapll1t2w17AqzSHrbBPNFrq931IUCis64b51kslQZoq3c0KslZsBQiky-YSnuE7xUuNsgiF4hOak_ReFFufWE53h1sPkjHFeRM-H34b-e1MCNxGObGPhI0mNlJ_qz0c8aCuS-jdnDocSvIYda-iVcJLWcIT-mO6klw"/>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-bold text-lg text-on-surface leading-tight mb-1">拼音字母认读</h3>
|
||||
<p class="text-on-surface-variant text-xs mb-2 flex items-center gap-1">
|
||||
语文基础 · 5-7岁 ·
|
||||
<span class="flex text-primary-fixed-dim">
|
||||
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1;">star</span>
|
||||
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1;">star</span>
|
||||
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1;">star</span>
|
||||
</span>
|
||||
</p>
|
||||
<span class="text-[10px] text-outline px-2 py-0.5 bg-surface-container rounded-full uppercase tracking-wider">收藏于 1 周前</span>
|
||||
</div>
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-full text-error transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="favorite" style="font-variation-settings: 'FILL' 1;">favorite</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Card 4 (Bento Variation) -->
|
||||
<div class="bg-surface-container p-6 relative overflow-hidden active:scale-[0.98] transition-transform duration-200 rounded-2xl">
|
||||
<div class="relative z-10 pr-16">
|
||||
<h3 class="font-bold text-xl text-on-surface leading-tight mb-1">趣味英语单词卡</h3>
|
||||
<p class="text-on-surface-variant text-sm mb-4">语言学习 · 4-8岁 · ⭐⭐⭐</p>
|
||||
<div class="flex gap-2">
|
||||
<span class="px-3 py-1 bg-white/50 backdrop-blur rounded-full text-[10px] font-bold text-on-secondary-container"># 畅销经典</span>
|
||||
<span class="px-3 py-1 bg-white/50 backdrop-blur rounded-full text-[10px] font-bold text-on-secondary-container"># 全彩打印</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute -right-4 -bottom-4 w-32 h-32 opacity-20">
|
||||
<span class="material-symbols-outlined text-[120px] text-primary" data-icon="abc">abc</span>
|
||||
</div>
|
||||
<button class="absolute top-6 right-6 w-10 h-10 flex items-center justify-center rounded-full text-error transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="favorite" style="font-variation-settings: 'FILL' 1;">favorite</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Empty State Suggestion (Subtle) -->
|
||||
<div class="mt-12 py-8 text-center">
|
||||
<p class="text-outline text-sm font-medium">发现更多有趣的内容？</p>
|
||||
<button class="mt-4 px-8 py-3 bg-secondary-container text-on-secondary-container rounded-full font-bold text-sm shadow-sm active:scale-95 transition-all">
|
||||
去发现页看看
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Bottom Navigation Bar -->
|
||||
<nav class="fixed bottom-0 left-0 w-full flex justify-around items-center px-4 pb-6 pt-2 bg-[#f8f0e0]/80 dark:bg-[#322e25]/80 backdrop-blur-xl z-50 rounded-t-[3rem] shadow-[0_-8px_32px_0_rgba(50,46,37,0.06)]">
|
||||
<!-- Tab 发现 -->
|
||||
<a class="flex flex-col items-center justify-center text-[#322e25] dark:text-[#fef6e7] opacity-70 px-4 py-2 hover:opacity-100 transition-opacity active:scale-90 transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined mb-1" data-icon="explore">explore</span>
|
||||
<span class="font-plus-jakarta text-[12px] font-semibold leading-[1.6]">发现</span>
|
||||
</a>
|
||||
<!-- Tab 分龄 -->
|
||||
<a class="flex flex-col items-center justify-center text-[#322e25] dark:text-[#fef6e7] opacity-70 px-4 py-2 hover:opacity-100 transition-opacity active:scale-90 transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined mb-1" data-icon="child_care">child_care</span>
|
||||
<span class="font-plus-jakarta text-[12px] font-semibold leading-[1.6]">分龄</span>
|
||||
</a>
|
||||
<!-- Tab 收藏 (Active) -->
|
||||
<a class="flex flex-col items-center justify-center bg-[#ffd709] dark:bg-[#6c5a00] text-[#6d3b00] dark:text-[#ffd709] rounded-full px-6 py-2 scale-105 active:scale-90 transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined mb-0.5" data-icon="favorite" style="font-variation-settings: 'FILL' 1;">favorite</span>
|
||||
<span class="font-plus-jakarta text-[12px] font-bold leading-[1.6]">收藏</span>
|
||||
</a>
|
||||
<!-- Tab 我的 -->
|
||||
<a class="flex flex-col items-center justify-center text-[#322e25] dark:text-[#fef6e7] opacity-70 px-4 py-2 hover:opacity-100 transition-opacity active:scale-90 transition-all duration-200" href="#">
|
||||
<span class="material-symbols-outlined mb-1" data-icon="person">person</span>
|
||||
<span class="font-plus-jakarta text-[12px] font-semibold leading-[1.6]">我的</span>
|
||||
</a>
|
||||
</nav>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
@@ -0,0 +1,176 @@
|
||||
<!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&family=Be_Vietnam_Pro:wght@400;500;600&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 id="tailwind-config"> tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"primary": "#FFD700",
|
||||
"on-primary": "#2D2A00",
|
||||
"background-light": "#f8f0e0",
|
||||
"background-dark": "#23200f",
|
||||
"surface": "#f8f0e0",
|
||||
"on-surface": "#322e25",
|
||||
"on-surface-variant": "#605b50",
|
||||
"outline": "#7c766a",
|
||||
"surface-container": "#f0e7d6",
|
||||
"surface-container-low": "#f8f0e0",
|
||||
"surface-container-lowest": "#ffffff"
|
||||
},
|
||||
fontFamily: {
|
||||
"headline": ["-apple-system", "BlinkMacSystemFont", "San Francisco", "Helvetica Neue", "sans-serif"],
|
||||
"body": ["-apple-system", "BlinkMacSystemFont", "San Francisco", "Helvetica Neue", "sans-serif"],
|
||||
"label": ["-apple-system", "BlinkMacSystemFont", "San Francisco", "Helvetica Neue", "sans-serif"]
|
||||
},
|
||||
borderRadius: {
|
||||
"DEFAULT": "1rem",
|
||||
"lg": "2rem",
|
||||
"xl": "3rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
},
|
||||
},
|
||||
}</script>
|
||||
<style>
|
||||
body { background-color: #f8f0e0; font-family: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Helvetica Neue', sans-serif; color: #322e25; }
|
||||
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
|
||||
.pb-safe { padding-bottom: env(safe-area-inset-bottom); }
|
||||
.glass-nav { background: rgba(248, 240, 224, 0.8); backdrop-filter: blur(20px); }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface min-h-screen pb-32" style="background-color: #f8f0e0; font-family: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Helvetica Neue', sans-serif;">
|
||||
<!-- TopAppBar -->
|
||||
<header class="fixed top-0 w-full z-50 backdrop-blur-xl h-16 flex items-center justify-between px-6 shadow-sm shadow-stone-900/5 transition-all glass-nav">
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="text-on-surface hover:scale-95 transition-transform duration-200">
|
||||
<span class="material-symbols-outlined" data-icon="arrow_back">arrow_back</span>
|
||||
</button>
|
||||
<h1 class="font-headline font-bold text-xl tracking-tight text-on-surface">个人中心</h1>
|
||||
</div>
|
||||
<div class="font-headline font-extrabold text-2xl tracking-tighter text-[#FFD700]">涂鸦丫</div>
|
||||
</header>
|
||||
<main class="pt-24 px-6 max-w-2xl mx-auto space-y-10">
|
||||
<!-- User Profile Header -->
|
||||
<section class="relative flex flex-col items-center py-10 bg-surface-container-lowest rounded-[1.5rem] shadow-sm border border-outline/10 overflow-hidden">
|
||||
<div class="absolute top-0 left-0 w-full h-24 bg-primary opacity-10"></div>
|
||||
<div class="relative mt-4">
|
||||
<div class="w-32 h-32 rounded-full border-4 border-surface-container-lowest overflow-hidden shadow-md">
|
||||
<img class="w-full h-full object-cover" data-alt="close-up portrait of a smiling young woman" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAAGKPxq5QCFibqBWRNKE2x6_7teoAJCy4pSdGtBO-U6rPl6LleUVVoMS-3ldq9k91D_1Lu7ln183WaEYvRnXoXEbS4JNiuvED2Lp48-pf4bJNFvYIutp0WfDa4wE3fqeet7zItd6VsbAB9DmvRA_iIKiPtcdHOi9JPXaDddJ_1LfSKd5BhWLcc1LCs0-KzSPknReZBpNzVOoEeOeveNhOwAV8UbpMuw7FgZMTIhsft64QSr6mAQVuOTQrvIBjXwnT9O10R3BMeCig"/>
|
||||
</div>
|
||||
<div class="absolute bottom-1 right-1 bg-primary text-on-primary p-2 rounded-full border-4 border-surface-container-lowest flex items-center justify-center shadow-sm">
|
||||
<span class="material-symbols-outlined text-sm" style="font-variation-settings: 'FILL' 1;">edit</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 text-center">
|
||||
<h2 class="font-headline font-bold text-2xl text-on-surface">Alex Rivera</h2>
|
||||
</div>
|
||||
<div class="flex gap-4 mt-8 w-full px-6">
|
||||
<div class="flex-1 bg-surface-container-low p-4 rounded-xl text-center border border-outline/10">
|
||||
<span class="block font-headline font-extrabold text-xl text-on-surface">24</span>
|
||||
<span class="block font-label text-[10px] text-on-surface-variant uppercase tracking-wider">打印</span>
|
||||
</div>
|
||||
<div class="flex-1 bg-surface-container-low p-4 rounded-xl text-center border border-outline/10">
|
||||
<span class="block font-headline font-extrabold text-xl text-on-surface">12</span>
|
||||
<span class="block font-label text-[10px] text-on-surface-variant uppercase tracking-wider">收藏</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Menu Grid -->
|
||||
<section class="grid grid-cols-1 gap-4">
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<!-- My Favorites -->
|
||||
<button class="group flex flex-col p-6 bg-surface-container-lowest rounded-[1.5rem] border border-outline/10 hover:bg-surface-container-low transition-all duration-200 active:scale-95 items-center">
|
||||
<div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center text-on-primary mb-4 shadow-sm">
|
||||
<span class="material-symbols-outlined" data-icon="favorite" style="font-variation-settings: 'FILL' 1;">favorite</span>
|
||||
</div>
|
||||
<span class="font-headline font-bold text-on-surface">我的收藏</span>
|
||||
<span class="font-body text-xs text-on-surface-variant mt-1 text-center">已保存的练习题</span>
|
||||
</button>
|
||||
<!-- Download History -->
|
||||
<button class="group flex flex-col p-6 bg-surface-container-lowest rounded-[1.5rem] border border-outline/10 hover:bg-surface-container-low transition-all duration-200 active:scale-95 items-center">
|
||||
<div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center text-on-primary mb-4 shadow-sm">
|
||||
<span class="material-symbols-outlined" data-icon="download">download</span>
|
||||
</div>
|
||||
<span class="font-headline font-bold text-on-surface">下载历史</span>
|
||||
<span class="font-body text-xs text-on-surface-variant mt-1 text-center">查看历史文件</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- List Style for other items -->
|
||||
<div class="space-y-4">
|
||||
<button class="w-full flex items-center justify-between p-5 bg-surface-container-lowest rounded-full border border-outline/10 hover:bg-surface-container-low transition-colors group active:scale-[0.98]">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-on-surface">
|
||||
<span class="material-symbols-outlined" data-icon="print">print</span>
|
||||
</div>
|
||||
<span class="font-headline font-semibold text-on-surface">打印指南</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-on-surface-variant group-hover:translate-x-1 transition-transform" data-icon="chevron_right">chevron_right</span>
|
||||
</button>
|
||||
<button class="w-full flex items-center justify-between p-5 bg-surface-container-lowest rounded-full border border-outline/10 hover:bg-surface-container-low transition-colors group active:scale-[0.98]">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-on-surface">
|
||||
<span class="material-symbols-outlined" data-icon="chat_bubble">chat_bubble</span>
|
||||
</div>
|
||||
<span class="font-headline font-semibold text-on-surface">提交反馈</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-on-surface-variant group-hover:translate-x-1 transition-transform" data-icon="chevron_right">chevron_right</span>
|
||||
</button><button class="w-full flex items-center justify-between p-5 bg-surface-container-lowest rounded-full border border-outline/10 hover:bg-surface-container-low transition-colors group active:scale-[0.98]">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-on-surface">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
</div>
|
||||
<span class="font-headline font-semibold text-on-surface">设置</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-on-surface-variant group-hover:translate-x-1 transition-transform" data-icon="chevron_right">chevron_right</span>
|
||||
</button><button class="w-full flex items-center justify-between p-5 bg-surface-container-lowest rounded-full border border-outline/10 hover:bg-surface-container-low transition-colors group active:scale-[0.98]">
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-on-surface">
|
||||
<span class="material-symbols-outlined" data-icon="info">info</span>
|
||||
</div>
|
||||
<span class="font-headline font-semibold text-on-surface">关于涂鸦丫</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-on-surface-variant group-hover:translate-x-1 transition-transform" data-icon="chevron_right">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Premium Upsell -->
|
||||
<section class="bg-[#2D2A26] p-8 rounded-[1.5rem] relative overflow-hidden shadow-xl">
|
||||
<div class="absolute top-0 right-0 p-4 opacity-10 transform translate-x-4 -translate-y-4">
|
||||
<span class="material-symbols-outlined text-8xl text-white" data-icon="auto_awesome">auto_awesome</span>
|
||||
</div>
|
||||
<div class="relative z-10">
|
||||
<h3 class="font-headline font-extrabold text-xl text-white">升级专业版</h3>
|
||||
<p class="font-body text-white/70 text-sm mt-2 max-w-[200px]">解锁 500+ 精选教育模板并获得优先体验。</p>
|
||||
<button class="mt-6 bg-primary text-on-primary font-headline font-bold py-3 px-8 rounded-full hover:scale-105 active:scale-95 transition-all shadow-lg">立即升级</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Bottom Settings Link -->
|
||||
</main>
|
||||
<!-- BottomNavBar -->
|
||||
<div class="text-center py-6 pb-32">
|
||||
<p class="font-label text-[10px] text-on-surface-variant uppercase tracking-[0.2em]">Doodle Mini v2.4.0</p>
|
||||
</div><nav class="fixed bottom-0 left-0 w-full flex justify-around items-center px-4 py-3 backdrop-blur-xl rounded-t-[3rem] z-50 shadow-[0_-8px_32px_rgba(50,46,37,0.06)] pb-safe glass-nav">
|
||||
<a class="flex flex-col items-center justify-center text-[#322e25]/70 px-4 py-2 hover:bg-[#f0e7d6] rounded-full transition-all duration-200 active:scale-90" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="explore">explore</span>
|
||||
<span class="text-[10px] font-bold tracking-wide uppercase mt-1">发现</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center justify-center text-[#322e25]/70 px-4 py-2 hover:bg-[#f0e7d6] rounded-full transition-all duration-200 active:scale-90" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="category">category</span>
|
||||
<span class="text-[10px] font-bold tracking-wide uppercase mt-1">分龄</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center justify-center text-[#322e25]/70 px-4 py-2 hover:bg-[#f0e7d6] rounded-full transition-all duration-200 active:scale-90" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="favorite">favorite</span>
|
||||
<span class="text-[10px] font-bold tracking-wide uppercase mt-1">收藏</span>
|
||||
</a>
|
||||
<a class="flex flex-col items-center justify-center bg-[#FFD700] text-[#453900] rounded-full px-6 py-2 shadow-inner active:scale-90 transition-all duration-200 ease-out" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="person" style='font-variation-settings: "FILL" 1;'>person</span>
|
||||
<span class="text-[10px] font-bold tracking-wide uppercase mt-1">我的</span>
|
||||
</a>
|
||||
</nav>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Reference in New Issue
Block a user