R524809
245 lines
20 KiB
HTML
245 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="zh"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>英文字母描红配置</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&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": {
|
|
"secondary-container": "#ffc697",
|
|
"on-background": "#322e25",
|
|
"background": "#fef6e7",
|
|
"inverse-surface": "#110e06",
|
|
"on-surface": "#322e25",
|
|
"secondary-dim": "#794200",
|
|
"error-container": "#f95630",
|
|
"tertiary-fixed": "#91f78e",
|
|
"on-primary-fixed": "#453900",
|
|
"on-surface-variant": "#605b50",
|
|
"on-tertiary-fixed-variant": "#00691a",
|
|
"secondary-fixed": "#ffc697",
|
|
"surface": "#fef6e7",
|
|
"on-primary": "#fff2cd",
|
|
"tertiary": "#006b1b",
|
|
"inverse-primary": "#ffd709",
|
|
"secondary": "#8a4c00",
|
|
"tertiary-container": "#91f78e",
|
|
"surface-bright": "#fef6e7",
|
|
"on-tertiary": "#d1ffc8",
|
|
"on-secondary-fixed-variant": "#7a4300",
|
|
"on-primary-fixed-variant": "#665500",
|
|
"outline": "#7c766a",
|
|
"on-primary-container": "#5b4b00",
|
|
"on-secondary-container": "#6d3b00",
|
|
"on-secondary": "#fff0e6",
|
|
"surface-container-highest": "#e5dcc9",
|
|
"tertiary-dim": "#005d16",
|
|
"primary-dim": "#5e4e00",
|
|
"surface-dim": "#dcd4c0",
|
|
"primary-fixed": "#ffd709",
|
|
"on-secondary-fixed": "#512a00",
|
|
"surface-container-lowest": "#ffffff",
|
|
"primary": "#6c5a00",
|
|
"surface-container-high": "#eae2d0",
|
|
"error-dim": "#b92902",
|
|
"surface-variant": "#e5dcc9",
|
|
"primary-container": "#ffd709",
|
|
"primary-fixed-dim": "#efc900",
|
|
"surface-container": "#f0e7d6",
|
|
"tertiary-fixed-dim": "#83e881",
|
|
"secondary-fixed-dim": "#ffb470",
|
|
"surface-tint": "#6c5a00",
|
|
"surface-container-low": "#f8f0e0",
|
|
"on-error-container": "#520c00",
|
|
"on-error": "#ffefec",
|
|
"inverse-on-surface": "#a29c8f",
|
|
"error": "#b02500",
|
|
"outline-variant": "#b3ac9f",
|
|
"on-tertiary-fixed": "#00480f",
|
|
"on-tertiary-container": "#005e17"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "1rem",
|
|
"lg": "2rem",
|
|
"xl": "3rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {},
|
|
"fontFamily": {
|
|
"headline": [
|
|
"Plus Jakarta Sans"
|
|
],
|
|
"body": [
|
|
"Plus Jakarta Sans"
|
|
],
|
|
"label": [
|
|
"Plus Jakarta Sans"
|
|
],
|
|
"sans": [
|
|
"system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", "sans-serif"
|
|
]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
body { font-family: 'Plus Jakarta Sans', sans-serif; }
|
|
/* Ambient shadow for floating elements */
|
|
.ambient-shadow {
|
|
box-shadow: 0 8px 32px rgba(50, 46, 37, 0.06);
|
|
}
|
|
/* Gradient texture for primary buttons/active states */
|
|
.btn-texture {
|
|
background: linear-gradient(145deg, var(--tw-gradient-from) 0%, var(--tw-gradient-to) 100%);
|
|
}
|
|
/* Custom scrollbar for horizontal lists */
|
|
.hide-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.hide-scrollbar {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
</style>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-surface min-h-screen pb-32">
|
|
<!-- TopAppBar -->
|
|
<header class="bg-[#f8f0e0]/80 dark:bg-[#322e25]/80 backdrop-blur-[20px] docked full-width top-0 no-border shadow-none flat no-shadows fixed top-0 left-0 w-full z-50 flex items-center justify-between px-6 h-16">
|
|
<button class="text-[#6c5a00] dark:text-[#ffd709] hover:opacity-80 transition-opacity active:scale-95 transition-transform duration-200">
|
|
<span class="material-symbols-outlined text-2xl">arrow_back</span>
|
|
</button>
|
|
<h1 class="font-['Plus_Jakarta_Sans'] font-bold text-headline-md tracking-tight text-[#6c5a00] dark:text-[#ffd709]">字母描红配置</h1>
|
|
<button class="text-[#6c5a00] dark:text-[#ffd709] hover:opacity-80 transition-opacity active:scale-95 transition-transform duration-200">
|
|
<span class="material-symbols-outlined text-2xl">help</span>
|
|
</button>
|
|
</header>
|
|
<!-- Main Content Canvas -->
|
|
<main class="pt-24 px-6 space-y-12">
|
|
<!-- A4 Preview Area -->
|
|
<section class="flex flex-col items-center">
|
|
<div class="relative w-full max-w-[280px] aspect-[1/1.414] bg-surface-container-lowest rounded-xl ambient-shadow p-6 flex flex-col items-center justify-center ring-1 ring-outline-variant/15">
|
|
<!-- Floating Favorite Button -->
|
|
<button class="absolute top-4 right-4 w-10 h-10 bg-surface-container-low rounded-full flex items-center justify-center text-on-surface hover:bg-surface-container transition-colors active:scale-95">
|
|
<span class="material-symbols-outlined text-xl">favorite_border</span>
|
|
</button>
|
|
<!-- Simulated Worksheet Content -->
|
|
<div class="w-full h-full flex flex-col gap-6 opacity-60">
|
|
<!-- Four-line grid simulation -->
|
|
<div class="flex flex-col gap-1 w-full mt-10">
|
|
<div class="w-full h-px bg-surface-dim"></div>
|
|
<div class="w-full h-px border-t border-dashed border-surface-dim"></div>
|
|
<div class="w-full h-px bg-surface-dim"></div>
|
|
<div class="w-full h-px bg-surface-dim mt-1"></div>
|
|
</div>
|
|
<div class="flex flex-col gap-1 w-full">
|
|
<div class="w-full h-px bg-surface-dim"></div>
|
|
<div class="w-full h-px border-t border-dashed border-surface-dim"></div>
|
|
<div class="w-full h-px bg-surface-dim"></div>
|
|
<div class="w-full h-px bg-surface-dim mt-1"></div>
|
|
</div>
|
|
<div class="flex flex-col gap-1 w-full">
|
|
<div class="w-full h-px bg-surface-dim"></div>
|
|
<div class="w-full h-px border-t border-dashed border-surface-dim"></div>
|
|
<div class="w-full h-px bg-surface-dim"></div>
|
|
<div class="w-full h-px bg-surface-dim mt-1"></div>
|
|
</div>
|
|
</div>
|
|
<!-- Central Focus Letter (Placeholder) -->
|
|
<div class="absolute inset-0 flex items-center justify-center pointer-events-none">
|
|
<span class="font-headline font-bold text-8xl text-primary opacity-20">Aa</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Letter Selection Grid -->
|
|
<section class="space-y-4">
|
|
<h2 class="font-headline font-bold text-xl text-on-secondary-container px-2">选择字母</h2>
|
|
<div class="space-y-3" id="letters-container">
|
|
<!-- Initial Row -->
|
|
<div class="flex gap-3 overflow-x-auto hide-scrollbar pb-2 px-2 justify-between px-2" id="letters-preview"><button class="flex-shrink-0 w-[calc((100%-60px)/6)] aspect-square rounded-[12px] bg-[#FFD700] text-[#453900] font-sans font-bold text-lg flex items-center justify-center transition-transform active:scale-95">Aa</button><button class="flex-shrink-0 w-[calc((100%-60px)/6)] aspect-square rounded-[12px] bg-surface-container text-on-surface-variant font-sans font-bold text-lg flex items-center justify-center hover:bg-surface-container-high transition-all active:scale-95">Bb</button><button class="flex-shrink-0 w-[calc((100%-60px)/6)] aspect-square rounded-[12px] bg-surface-container text-on-surface-variant font-sans font-bold text-lg flex items-center justify-center hover:bg-surface-container-high transition-all active:scale-95">Cc</button><button class="flex-shrink-0 w-[calc((100%-60px)/6)] aspect-square rounded-[12px] bg-surface-container text-on-surface-variant font-sans font-bold text-lg flex items-center justify-center hover:bg-surface-container-high transition-all active:scale-95">Dd</button><button class="flex-shrink-0 w-[calc((100%-60px)/6)] aspect-square rounded-[12px] bg-surface-container text-on-surface-variant font-sans font-bold text-lg flex items-center justify-center hover:bg-surface-container-high transition-all active:scale-95">Ee</button><button class="flex-shrink-0 w-[calc((100%-60px)/6)] aspect-square rounded-[12px] bg-surface-container text-on-surface-variant font-sans font-bold text-lg flex items-center justify-center hover:bg-surface-container-high transition-all active:scale-95">Ff</button></div>
|
|
<!-- Full Grid (hidden by default) -->
|
|
<div class="hidden grid gap-3 px-2 grid-cols-6" id="letters-full"><button class="aspect-square rounded-[12px] bg-[#FFD700] text-[#453900] font-sans font-bold text-lg flex items-center justify-center transition-all active:scale-95">Aa</button><button class="aspect-square rounded-[12px] bg-surface-container text-on-surface-variant font-sans font-bold text-lg flex items-center justify-center hover:bg-surface-container-high transition-all active:scale-95">Bb</button><button class="aspect-square rounded-[12px] bg-surface-container text-on-surface-variant font-sans font-bold text-lg flex items-center justify-center hover:bg-surface-container-high transition-all active:scale-95">Cc</button><button class="aspect-square rounded-[12px] bg-surface-container text-on-surface-variant font-sans font-bold text-lg flex items-center justify-center hover:bg-surface-container-high transition-all active:scale-95">Dd</button><button class="aspect-square rounded-[12px] bg-surface-container text-on-surface-variant font-sans font-bold text-lg flex items-center justify-center hover:bg-surface-container-high transition-all active:scale-95">Ee</button><button class="aspect-square rounded-[12px] bg-surface-container text-on-surface-variant font-sans font-bold text-lg flex items-center justify-center hover:bg-surface-container-high transition-all active:scale-95">Ff</button><button class="aspect-square rounded-[12px] bg-surface-container text-on-surface-variant font-sans font-bold text-lg flex items-center justify-center hover:bg-surface-container-high transition-all active:scale-95">Gg</button><button class="aspect-square rounded-[12px] bg-surface-container text-on-surface-variant font-sans font-bold text-lg flex items-center justify-center hover:bg-surface-container-high transition-all active:scale-95">Hh</button><button class="aspect-square rounded-[12px] bg-surface-container text-on-surface-variant font-sans font-bold text-lg flex items-center justify-center hover:bg-surface-container-high transition-all active:scale-95">Ii</button><button class="aspect-square rounded-[12px] bg-surface-container text-on-surface-variant font-sans font-bold text-lg flex items-center justify-center hover:bg-surface-container-high transition-all active:scale-95">Jj</button><button class="aspect-square rounded-[12px] bg-surface-container text-on-surface-variant font-sans font-bold text-lg flex items-center justify-center hover:bg-surface-container-high transition-all active:scale-95">Kk</button><button class="aspect-square rounded-[12px] bg-surface-container text-on-surface-variant font-sans font-bold text-lg flex items-center justify-center hover:bg-surface-container-high transition-all active:scale-95">Ll</button><button class="aspect-square rounded-[12px] bg-surface-container text-on-surface-variant font-sans font-bold text-lg flex items-center justify-center hover:bg-surface-container-high transition-all active:scale-95">Mm</button><button class="aspect-square rounded-[12px] bg-surface-container text-on-surface-variant font-sans font-bold text-lg flex items-center justify-center hover:bg-surface-container-high transition-all active:scale-95">Nn</button><button class="aspect-square rounded-[12px] bg-surface-container text-on-surface-variant font-sans font-bold text-lg flex items-center justify-center hover:bg-surface-container-high transition-all active:scale-95">Oo</button><button class="aspect-square rounded-[12px] bg-surface-container text-on-surface-variant font-sans font-bold text-lg flex items-center justify-center hover:bg-surface-container-high transition-all active:scale-95">Pp</button><button class="aspect-square rounded-[12px] bg-surface-container text-on-surface-variant font-sans font-bold text-lg flex items-center justify-center hover:bg-surface-container-high transition-all active:scale-95">Qq</button><button class="aspect-square rounded-[12px] bg-surface-container text-on-surface-variant font-sans font-bold text-lg flex items-center justify-center hover:bg-surface-container-high transition-all active:scale-95">Rr</button><button class="aspect-square rounded-[12px] bg-surface-container text-on-surface-variant font-sans font-bold text-lg flex items-center justify-center hover:bg-surface-container-high transition-all active:scale-95">Ss</button><button class="aspect-square rounded-[12px] bg-surface-container text-on-surface-variant font-sans font-bold text-lg flex items-center justify-center hover:bg-surface-container-high transition-all active:scale-95">Tt</button><button class="aspect-square rounded-[12px] bg-surface-container text-on-surface-variant font-sans font-bold text-lg flex items-center justify-center hover:bg-surface-container-high transition-all active:scale-95">Uu</button><button class="aspect-square rounded-[12px] bg-surface-container text-on-surface-variant font-sans font-bold text-lg flex items-center justify-center hover:bg-surface-container-high transition-all active:scale-95">Vv</button><button class="aspect-square rounded-[12px] bg-surface-container text-on-surface-variant font-sans font-bold text-lg flex items-center justify-center hover:bg-surface-container-high transition-all active:scale-95">Ww</button><button class="aspect-square rounded-[12px] bg-surface-container text-on-surface-variant font-sans font-bold text-lg flex items-center justify-center hover:bg-surface-container-high transition-all active:scale-95">Xx</button><button class="aspect-square rounded-[12px] bg-surface-container text-on-surface-variant font-sans font-bold text-lg flex items-center justify-center hover:bg-surface-container-high transition-all active:scale-95">Yy</button><button class="aspect-square rounded-[12px] bg-surface-container text-on-surface-variant font-sans font-bold text-lg flex items-center justify-center hover:bg-surface-container-high transition-all active:scale-95">Zz</button></div>
|
|
<!-- Toggle Button -->
|
|
<div class="flex justify-center mt-2">
|
|
<button class="flex items-center gap-1 py-1.5 px-4 rounded-full bg-surface-container-low text-on-surface-variant hover:bg-surface-container transition-colors text-sm font-medium" onclick="document.getElementById('letters-preview').classList.toggle('hidden'); document.getElementById('letters-full').classList.toggle('hidden'); this.querySelector('.text').textContent = this.querySelector('.text').textContent === '展开全部' ? '收起' : '展开全部'; this.querySelector('.icon').textContent = this.querySelector('.icon').textContent === 'expand_more' ? 'expand_less' : 'expand_more';">
|
|
<span class="text">展开全部</span>
|
|
<span class="material-symbols-outlined text-[20px] icon">expand_more</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Practice Types (8 Options, 2 Columns) -->
|
|
<section class="space-y-4">
|
|
<h2 class="font-headline font-bold text-xl text-on-secondary-container px-2">练习类型</h2>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<!-- Option 1: 默认字帖 (Active) -->
|
|
<button class="flex flex-col items-center justify-center px-4 rounded-[12px] btn-texture from-primary-fixed to-primary-fixed-dim text-on-primary-fixed ambient-shadow transition-transform active:scale-95 gap-2 py-4">
|
|
<span class="material-symbols-outlined text-3xl mb-1" style="font-variation-settings: 'FILL' 1;">format_size</span>
|
|
<span class="font-headline font-bold text-[15px]">默认字帖</span>
|
|
</button>
|
|
<!-- Option 2: 基础描红 -->
|
|
<button class="flex flex-col items-center justify-center px-4 rounded-[12px] bg-surface-container-low text-on-surface-variant hover:bg-surface-container transition-all active:scale-95 gap-2 py-4">
|
|
<span class="material-symbols-outlined text-3xl mb-1">draw</span>
|
|
<span class="font-headline font-bold text-[15px]">基础描红</span>
|
|
</button>
|
|
<!-- Option 3: 空白格 -->
|
|
<button class="flex flex-col items-center justify-center px-4 rounded-[12px] bg-surface-container-low text-on-surface-variant hover:bg-surface-container transition-all active:scale-95 gap-2 py-4">
|
|
<span class="material-symbols-outlined text-3xl mb-1">crop_square</span>
|
|
<span class="font-headline font-bold text-[15px]">空白格</span>
|
|
</button>
|
|
<!-- Option 4: 虚线格 -->
|
|
<button class="flex flex-col items-center justify-center px-4 rounded-[12px] bg-surface-container-low text-on-surface-variant hover:bg-surface-container transition-all active:scale-95 gap-2 py-4">
|
|
<span class="material-symbols-outlined text-3xl mb-1">grid_on</span>
|
|
<span class="font-headline font-bold text-[15px]">虚线格</span>
|
|
</button>
|
|
<!-- Option 5: 四线三格 -->
|
|
<button class="flex flex-col items-center justify-center px-4 rounded-[12px] bg-surface-container-low text-on-surface-variant hover:bg-surface-container transition-all active:scale-95 gap-2 py-4">
|
|
<span class="material-symbols-outlined text-3xl mb-1">view_headline</span>
|
|
<span class="font-headline font-bold text-[15px]">四线三格</span>
|
|
</button>
|
|
<!-- Option 6: 单词临摹 -->
|
|
<button class="flex flex-col items-center justify-center px-4 rounded-[12px] bg-surface-container-low text-on-surface-variant hover:bg-surface-container transition-all active:scale-95 gap-2 py-4">
|
|
<span class="material-symbols-outlined text-3xl mb-1">text_fields</span>
|
|
<span class="font-headline font-bold text-[15px]">单词临摹</span>
|
|
</button>
|
|
<!-- Option 7: 13字母半表 (New) -->
|
|
<button class="flex flex-col items-center justify-center px-4 rounded-[12px] bg-surface-container-low text-on-surface-variant hover:bg-surface-container transition-all active:scale-95 gap-2 py-4">
|
|
<span class="material-symbols-outlined text-3xl mb-1">explicit</span>
|
|
<span class="font-headline font-bold text-[15px]">13字母半表</span>
|
|
</button>
|
|
<!-- Option 8: 四字母深度练 (New) -->
|
|
<button class="flex flex-col items-center justify-center px-4 rounded-[12px] bg-surface-container-low text-on-surface-variant hover:bg-surface-container transition-all active:scale-95 gap-2 py-4">
|
|
<span class="material-symbols-outlined text-3xl mb-1">font_download</span>
|
|
<span class="font-headline font-bold text-[15px]">四字母深度练</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<!-- Bottom Fixed Action Bar -->
|
|
<!-- Suppressed the default BottomNavBar as this is a task-focused configuration screen with a back button.
|
|
Replaced with the contextually required fixed action bar. -->
|
|
<div class="fixed bottom-0 left-0 w-full z-50 px-6 pb-8 pt-4 bg-surface-container-low/80 backdrop-blur-[20px] flex gap-4">
|
|
<!-- Share Button -->
|
|
<button class="flex-1 py-4 px-6 rounded-full bg-surface-container text-on-surface font-headline font-bold text-lg flex items-center justify-center gap-2 hover:bg-surface-container-high transition-colors active:scale-[0.96]">
|
|
<span class="material-symbols-outlined">ios_share</span>
|
|
分享
|
|
</button>
|
|
<!-- Save to Album Button -->
|
|
<button class="flex-[1.5] py-4 px-6 rounded-full btn-texture from-primary-fixed to-primary-fixed-dim text-on-primary-fixed font-headline font-bold text-lg flex items-center justify-center gap-2 ambient-shadow active:scale-[0.96] transition-transform">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">download</span>
|
|
保存到相册
|
|
</button>
|
|
</div>
|
|
</body></html> |