R524809
176 lines
11 KiB
HTML
176 lines
11 KiB
HTML
<!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> |