R524809
209 lines
11 KiB
HTML
209 lines
11 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>我的收藏 - 下载历史</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> |