R524809
231 lines
14 KiB
HTML
231 lines
14 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"/>
|
|
<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> |