joey5628/doodle-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
41082f59efe030f2800a61ec6664fd173da0d654
doodle-mini/stitch-ui/age-recommend/code.html
T

371 lines
22 KiB
HTML
Raw Blame History

<!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&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script 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>
Reference in New Issue View Git Blame Copy Permalink