R524809
308 lines
19 KiB
HTML
308 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="light" lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
|
<title>分类 - Doodle Mini</title>
|
|
<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;900&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": "#6c5a00",
|
|
"on-secondary": "#fff0e6",
|
|
"secondary-fixed-dim": "#ffb470",
|
|
"primary-container": "#ffd709",
|
|
"inverse-primary": "#ffd709",
|
|
"outline-variant": "#b3ac9f",
|
|
"surface-variant": "#e5dcc9",
|
|
"on-primary": "#fff2cd",
|
|
"surface-dim": "#dcd4c0",
|
|
"on-tertiary": "#d1ffc8",
|
|
"primary-fixed": "#ffd709",
|
|
"outline": "#7c766a",
|
|
"on-secondary-container": "#6d3b00",
|
|
"secondary-container": "#ffc697",
|
|
"on-surface": "#322e25",
|
|
"primary-fixed-dim": "#efc900",
|
|
"tertiary-fixed-dim": "#83e881",
|
|
"background": "#fef6e7",
|
|
"surface-bright": "#fef6e7",
|
|
"error-container": "#f95630",
|
|
"tertiary-fixed": "#91f78e",
|
|
"tertiary-container": "#91f78e",
|
|
"secondary-fixed": "#ffc697",
|
|
"on-primary-fixed-variant": "#665500",
|
|
"surface-container-high": "#eae2d0",
|
|
"on-surface-variant": "#605b50",
|
|
"tertiary-dim": "#005d16",
|
|
"surface": "#fef6e7",
|
|
"on-primary-container": "#5b4b00",
|
|
"inverse-on-surface": "#a29c8f",
|
|
"secondary-dim": "#794200",
|
|
"on-tertiary-container": "#005e17",
|
|
"on-tertiary-fixed": "#00480f",
|
|
"on-error": "#ffefec",
|
|
"inverse-surface": "#110e06",
|
|
"surface-container-highest": "#e5dcc9",
|
|
"primary-dim": "#5e4e00",
|
|
"surface-container": "#f0e7d6",
|
|
"error": "#b02500",
|
|
"secondary": "#8a4c00",
|
|
"surface-tint": "#6c5a00",
|
|
"on-background": "#322e25",
|
|
"on-primary-fixed": "#453900",
|
|
"on-secondary-fixed": "#512a00",
|
|
"on-tertiary-fixed-variant": "#00691a",
|
|
"surface-container-lowest": "#ffffff",
|
|
"on-secondary-fixed-variant": "#7a4300",
|
|
"error-dim": "#b92902",
|
|
"surface-container-low": "#f8f0e0",
|
|
"tertiary": "#006b1b",
|
|
"on-error-container": "#520c00"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "1rem",
|
|
"lg": "2rem",
|
|
"xl": "3rem",
|
|
"full": "9999px"
|
|
},
|
|
"fontFamily": {
|
|
"headline": ["Plus Jakarta Sans"],
|
|
"display": ["Plus Jakarta Sans"],
|
|
"body": ["Plus Jakarta Sans"],
|
|
"label": ["Plus Jakarta Sans"]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
font-family: 'Plus Jakarta Sans', sans-serif;
|
|
}
|
|
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
|
|
.icon-fill {
|
|
font-variation-settings: 'FILL' 1;
|
|
}
|
|
</style>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="bg-background text-on-surface h-screen flex flex-col overflow-hidden">
|
|
<!-- TopAppBar equivalent for search -->
|
|
<header class="bg-surface-container-low/80 backdrop-blur-xl z-50 px-4 py-3 flex-none sticky top-0">
|
|
<div class="flex items-center gap-3">
|
|
<div class="flex-1 bg-surface-container-highest rounded-full flex items-center px-4 py-2">
|
|
<span class="material-symbols-outlined text-outline mr-2">search</span>
|
|
<input
|
|
class="bg-transparent border-none focus:ring-0 text-body-lg text-on-surface placeholder-on-surface-variant w-full p-0"
|
|
placeholder="搜索练习纸..." type="text" />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Main Content Area -->
|
|
<main class="flex-1 flex overflow-hidden">
|
|
<!-- Left Sidebar (Categories) -->
|
|
<aside
|
|
class="w-20 md:w-40 bg-surface-container-low flex flex-col overflow-y-auto hide-scrollbar py-2 px-2 gap-1 flex-none rounded-r-[2rem]">
|
|
<button
|
|
class="flex flex-col md:flex-row items-center gap-1 md:gap-3 px-2 md:px-4 py-2 rounded-full text-on-surface-variant hover:bg-surface-container transition-colors">
|
|
<span class="text-xs md:text-sm font-medium">全部</span>
|
|
</button>
|
|
<button
|
|
class="flex flex-col md:flex-row items-center gap-1 md:gap-3 px-2 md:px-4 py-2 rounded-full bg-primary-container text-on-primary-container font-bold shadow-sm scale-105 transition-all">
|
|
<span class="text-xs md:text-sm">数感启蒙</span>
|
|
</button>
|
|
<button
|
|
class="flex flex-col md:flex-row items-center gap-1 md:gap-3 px-2 md:px-4 py-2 rounded-full text-on-surface-variant hover:bg-surface-container transition-colors">
|
|
<span class="text-xs md:text-sm font-medium">汉语拼音</span>
|
|
</button>
|
|
<button
|
|
class="flex flex-col md:flex-row items-center gap-1 md:gap-3 px-2 md:px-4 py-2 rounded-full text-on-surface-variant hover:bg-surface-container transition-colors">
|
|
<span class="text-xs md:text-sm font-medium">专注力游戏</span>
|
|
</button>
|
|
<button
|
|
class="flex flex-col md:flex-row items-center gap-1 md:gap-3 px-2 md:px-4 py-2 rounded-full text-on-surface-variant hover:bg-surface-container transition-colors">
|
|
<span class="text-xs md:text-sm font-medium">趣味识字</span>
|
|
</button>
|
|
<button
|
|
class="flex flex-col md:flex-row items-center gap-1 md:gap-3 px-2 md:px-4 py-2 rounded-full text-on-surface-variant hover:bg-surface-container transition-colors">
|
|
<span class="text-xs md:text-sm font-medium">英语启蒙</span>
|
|
</button>
|
|
<button
|
|
class="flex flex-col md:flex-row items-center gap-1 md:gap-3 px-2 md:px-4 py-2 rounded-full text-on-surface-variant hover:bg-surface-container transition-colors">
|
|
<span class="text-xs md:text-sm font-medium">创意手工</span>
|
|
</button>
|
|
</aside>
|
|
<!-- Right Content List -->
|
|
<section class="flex-1 overflow-y-auto p-2 md:p-4 bg-background">
|
|
<div class="flex flex-col gap-2 pb-24">
|
|
<!-- Card 1 -->
|
|
<article
|
|
class="bg-surface-container-lowest rounded-[20px] p-2 flex gap-3 shadow-sm border border-surface-container-high hover:shadow-md transition-shadow">
|
|
<div class="w-24 shrink-0 rounded-[20px] overflow-hidden bg-surface-container relative">
|
|
<img alt="Colorful counting beads on a wooden frame, bright sunny lighting, educational"
|
|
class="w-full h-full object-cover"
|
|
data-alt="Colorful counting beads on a wooden frame, bright sunny lighting, educational"
|
|
src="https://lh3.googleusercontent.com/aida-public/AB6AXuC9YDdXdSqQute8UWn7lNaZDuRi4z_BD5HYyM2GKRikRpUs7G-CuwDgAhVqH_6tqN7icRuAhrtmrxbGtrv4T65CdT9ItF68N-9SgNeU1mFQiliih1bt7Cc-nKeyJW2_bgZCg-FOZsl_1S_sD25qt7qBhPsmXT8X3ahauX3VpI3-84vfatabv2wk_TUNOeSt3SdbIpmCHvZR1RqKkyrvaAxPxKIO4uY5v0BhccLxE5L-L96DyM5JAcxxQKRXtnFY2qfvBWMqPT3LC_E" />
|
|
</div>
|
|
<div class="flex flex-col justify-between flex-1 overflow-hidden py-1">
|
|
<div>
|
|
<h3 class="text-base font-bold text-on-surface tracking-tight mb-1 truncate">认识基础图形</h3>
|
|
<p class="text-on-surface-variant text-xs mb-2 truncate">通过趣味拼贴，让孩子初步感知圆形、方形与三角形的美妙世界。</p>
|
|
<div class="flex gap-2 mb-1">
|
|
<span
|
|
class="px-2 py-0.5 bg-primary-container text-on-primary-container rounded-full text-[10px] font-medium whitespace-nowrap">3-6岁</span>
|
|
<span
|
|
class="px-2 py-0.5 bg-surface-container-high rounded-full text-[10px] font-medium text-on-surface-variant whitespace-nowrap">入门</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between text-[10px] text-outline mt-1">
|
|
<div class="flex items-center gap-2">
|
|
<span class="flex items-center gap-0.5"><span
|
|
class="material-symbols-outlined text-[14px]">favorite</span> 456</span>
|
|
<span class="flex items-center gap-0.5"><span
|
|
class="material-symbols-outlined text-[14px]">download</span> 89</span>
|
|
</div>
|
|
<span>2024-05-20</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<!-- Card 2 -->
|
|
<article
|
|
class="bg-surface-container-lowest rounded-[20px] p-2 flex gap-3 shadow-sm border border-surface-container-high hover:shadow-md transition-shadow">
|
|
<div class="w-24 shrink-0 rounded-[20px] overflow-hidden bg-surface-container relative">
|
|
<img alt="Hand drawn numbers on colorful paper cutouts, messy desk, creative warm light"
|
|
class="w-full h-full object-cover"
|
|
data-alt="Hand drawn numbers on colorful paper cutouts, messy desk, creative warm light"
|
|
src="https://lh3.googleusercontent.com/aida-public/AB6AXuCyTKBE2-6CRjamB6TIUQBymqI1pU6sGFiSLL3meuf0rC8-B-37beMuXbFxJN4bhoA7mZqqYM9QzUAiu-iQmDBLhaayZkJGc0QfTTAAte3Mp7gNwGMy9UDJah-oiJcuY6UUTp0tOTeT-A1Nley0IwNVpeQ2ED1p-NwFwYPojmDcdsfbYRcj5GmnGzR_au03NR8AqFe4o1MtgjRrw4s3_U89bYBmBcpzBTo9BEMsltkwgKbcboX7j6nh2iyyGbCqwtJxSjgzoqbquhA" />
|
|
</div>
|
|
<div class="flex flex-col justify-between flex-1 overflow-hidden py-1">
|
|
<div>
|
|
<h3 class="text-base font-bold text-on-surface tracking-tight mb-1 truncate">数字连连看</h3>
|
|
<p class="text-on-surface-variant text-xs mb-2 truncate">跟随小兔子走迷宫，在游戏中掌握1-10的数字顺序。</p>
|
|
<div class="flex gap-2 mb-1">
|
|
<span
|
|
class="px-2 py-0.5 bg-tertiary-container text-on-tertiary-container rounded-full text-[10px] font-medium whitespace-nowrap">4-5岁</span>
|
|
<span
|
|
class="px-2 py-0.5 bg-surface-container-high rounded-full text-[10px] font-medium text-on-surface-variant whitespace-nowrap">进阶</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between text-[10px] text-outline mt-1">
|
|
<div class="flex items-center gap-2">
|
|
<span class="flex items-center gap-0.5"><span
|
|
class="material-symbols-outlined text-[14px]">favorite</span> 230</span>
|
|
<span class="flex items-center gap-0.5"><span
|
|
class="material-symbols-outlined text-[14px]">download</span> 45</span>
|
|
</div>
|
|
<span>2024-05-18</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<!-- Card 3 -->
|
|
<article
|
|
class="bg-surface-container-lowest rounded-[20px] p-2 flex gap-3 shadow-sm border border-surface-container-high hover:shadow-md transition-shadow">
|
|
<div class="w-24 shrink-0 rounded-[20px] overflow-hidden bg-surface-container relative">
|
|
<img alt="Wooden abacus with colorful beads on a bright yellow desk, soft shadows"
|
|
class="w-full h-full object-cover"
|
|
data-alt="Wooden abacus with colorful beads on a bright yellow desk, soft shadows"
|
|
src="https://lh3.googleusercontent.com/aida-public/AB6AXuCZTJ8e802cJ_5FfgED6WRGmFayr9x84nGvf4F-Prhl0jI8Cl0jJAMVtNM2ccSAgCM3XTBTSrMUPL1Ez2W40lJGQsopbLz0Lkm6cNMbPpI0xluIUX5iWqB-BsMCoiOAFN0Zrn5_7wwT1Y14CqEt7gjjPdk9HgHWM5fNu2Fxn-vSvbAZdFGGAsanZQkQ_pjfjQX0vgLSwT13Zo0uCy50CskhRd-NB9bCG4NEby-b7lht5gHvBco21O8_IRh1Mal3jWmubIen-2KxGb4" />
|
|
</div>
|
|
<div class="flex flex-col justify-between flex-1 overflow-hidden py-1">
|
|
<div>
|
|
<h3 class="text-base font-bold text-on-surface tracking-tight mb-1 truncate">加法启蒙</h3>
|
|
<p class="text-on-surface-variant text-xs mb-2 truncate">结合生动插画，帮助孩子轻松记忆基础加法运算。</p>
|
|
<div class="flex gap-2 mb-1">
|
|
<span
|
|
class="px-2 py-0.5 bg-secondary-container text-on-secondary-container rounded-full text-[10px] font-medium whitespace-nowrap">5-7岁</span>
|
|
<span
|
|
class="px-2 py-0.5 bg-surface-container-high rounded-full text-[10px] font-medium text-on-surface-variant whitespace-nowrap">挑战</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between text-[10px] text-outline mt-1">
|
|
<div class="flex items-center gap-2">
|
|
<span class="flex items-center gap-0.5"><span
|
|
class="material-symbols-outlined text-[14px]">favorite</span> 890</span>
|
|
<span class="flex items-center gap-0.5"><span
|
|
class="material-symbols-outlined text-[14px]">download</span> 156</span>
|
|
</div>
|
|
<span>2024-05-15</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<!-- Card 4 -->
|
|
<article
|
|
class="bg-surface-container-lowest rounded-[20px] p-2 flex gap-3 shadow-sm border border-surface-container-high hover:shadow-md transition-shadow">
|
|
<div class="w-24 shrink-0 rounded-[20px] overflow-hidden bg-surface-container relative">
|
|
<img alt="Comic style colorful abstract shapes on white paper, playful child drawing"
|
|
class="w-full h-full object-cover"
|
|
data-alt="Comic style colorful abstract shapes on white paper, playful child drawing"
|
|
src="https://lh3.googleusercontent.com/aida-public/AB6AXuDNI9UXLOiyKRJscHCtr4bBERSio7GZGyntl-0IkJW-OHd-3hdwx2bL00mpzqAHVVu-O2944uDbQ8Zy1la27ucH2vIFOz01EEe5lCsV4aWSr7KUIQVqvMP8kSq0kPBiJV2EJCgZJp-YY3q4A9PPNRlq5i9qbj01ZJipPmG71aVYjRrz4JBt7J8V8Zl5OQH7kU7HgaT-NNVDCTXnZcmVQXCQtJwiEExpJkrAb7jPi4V1QpMDFIIpqdtD1cHVDOvO7418cr24yRaGPK8" />
|
|
</div>
|
|
<div class="flex flex-col justify-between flex-1 overflow-hidden py-1">
|
|
<div>
|
|
<h3 class="text-base font-bold text-on-surface tracking-tight mb-1 truncate">找规律</h3>
|
|
<p class="text-on-surface-variant text-xs mb-2 truncate">简单的剪贴纸工艺，培养孩子的动手能力与色彩感知。</p>
|
|
<div class="flex gap-2 mb-1">
|
|
<span
|
|
class="px-2 py-0.5 bg-primary-container text-on-primary-container rounded-full text-[10px] font-medium whitespace-nowrap">4-6岁</span>
|
|
<span
|
|
class="px-2 py-0.5 bg-surface-container-high rounded-full text-[10px] font-medium text-on-surface-variant whitespace-nowrap">逻辑</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between text-[10px] text-outline mt-1">
|
|
<div class="flex items-center gap-2">
|
|
<span class="flex items-center gap-0.5"><span
|
|
class="material-symbols-outlined text-[14px]">favorite</span> 512</span>
|
|
<span class="flex items-center gap-0.5"><span
|
|
class="material-symbols-outlined text-[14px]">download</span> 110</span>
|
|
</div>
|
|
<span>2024-05-10</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<!-- BottomNavBar -->
|
|
<nav
|
|
class="bg-surface-container-low/90 backdrop-blur-xl pb-safe pt-2 px-6 flex justify-between items-center fixed bottom-0 w-full z-50 md:hidden">
|
|
<button class="flex flex-col items-center p-2 text-primary">
|
|
<span class="material-symbols-outlined icon-fill">explore</span>
|
|
<span class="text-xs font-bold mt-1">发现</span>
|
|
</button>
|
|
<button class="flex flex-col items-center p-2 text-on-surface-variant">
|
|
<span class="material-symbols-outlined">filter_list</span>
|
|
<span class="text-xs font-medium mt-1">分龄</span>
|
|
</button>
|
|
<button class="flex flex-col items-center p-2 text-on-surface-variant">
|
|
<span class="material-symbols-outlined">favorite</span>
|
|
<span class="text-xs font-medium mt-1">收藏</span>
|
|
</button>
|
|
<button class="flex flex-col items-center p-2 text-on-surface-variant">
|
|
<span class="material-symbols-outlined">person</span>
|
|
<span class="text-xs font-medium mt-1">我的</span>
|
|
</button>
|
|
</nav>
|
|
</body>
|
|
|
|
</html> |