R524809
306 lines
18 KiB
HTML
306 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
|
<title>按钮组件库 (Button Library) - 优化版</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": {
|
|
"surface-container-lowest": "#ffffff",
|
|
"tertiary-container": "#9cd343", // Updated to #9cd343
|
|
"secondary": "#8a4c00",
|
|
"surface-dim": "#dcd4c0",
|
|
"error-container": "#f95630",
|
|
"background": "#fef6e7",
|
|
"surface-container-high": "#eae2d0",
|
|
"on-surface": "#322e25",
|
|
"surface-tint": "#6c5a00",
|
|
"inverse-surface": "#110e06",
|
|
"tertiary": "#006b1b",
|
|
"on-tertiary-fixed-variant": "#00691a",
|
|
"on-tertiary-container": "#005e17",
|
|
"inverse-on-surface": "#a29c8f",
|
|
"on-secondary-container": "#6d3b00",
|
|
"secondary-container": "#ffc697",
|
|
"on-error-container": "#520c00",
|
|
"surface-container-low": "#f8f0e0",
|
|
"on-background": "#322e25",
|
|
"surface": "#fef6e7",
|
|
"primary-container": "#ffd709",
|
|
"secondary-fixed-dim": "#ffb470",
|
|
"primary-fixed": "#ffd709",
|
|
"tertiary-fixed": "#9cd343", // Updated
|
|
"on-primary": "#fff2cd",
|
|
"error": "#b02500",
|
|
"surface-bright": "#fef6e7",
|
|
"tertiary-dim": "#005d16",
|
|
"surface-variant": "#e5dcc9",
|
|
"outline-variant": "#b3ac9f",
|
|
"primary-dim": "#5e4e00",
|
|
"on-secondary": "#fff0e6",
|
|
"on-error": "#ffefec",
|
|
"on-secondary-fixed": "#512a00",
|
|
"on-secondary-fixed-variant": "#7a4300",
|
|
"primary": "#6c5a00",
|
|
"surface-container-highest": "#e5dcc9",
|
|
"on-primary-fixed": "#453900",
|
|
"tertiary-fixed-dim": "#83e881",
|
|
"on-primary-container": "#5b4b00",
|
|
"inverse-primary": "#ffd709",
|
|
"secondary-fixed": "#ffc697",
|
|
"on-surface-variant": "#605b50",
|
|
"on-tertiary": "#d1ffc8",
|
|
"on-tertiary-fixed": "#00480f",
|
|
"error-dim": "#b92902",
|
|
"on-primary-fixed-variant": "#665500",
|
|
"secondary-dim": "#794200",
|
|
"primary-fixed-dim": "#efc900",
|
|
"outline": "#7c766a",
|
|
"surface-container": "#f0e7d6"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "1rem",
|
|
"lg": "1.5rem", // Changed from 2rem to reflect moderate rounding request
|
|
"xl": "2rem",
|
|
"2xl": "1.5rem", // Standard 24px-ish for buttons
|
|
"full": "9999px"
|
|
},
|
|
"fontFamily": {
|
|
"headline": ["Plus Jakarta Sans", "Noto Sans SC"],
|
|
"body": ["Plus Jakarta Sans", "Noto Sans SC"],
|
|
"label": ["Plus Jakarta Sans", "Noto Sans SC"]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
font-family: 'Plus Jakarta Sans', 'Noto Sans SC', sans-serif;
|
|
}
|
|
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
|
|
.btn-press-simulate {
|
|
transform: scale(0.96);
|
|
}
|
|
</style>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="bg-background text-on-surface min-h-screen pb-48"> <!-- Increased padding for the double bottom bar -->
|
|
<!-- TopAppBar Navigation Shell -->
|
|
<header
|
|
class="sticky top-0 z-50 bg-[#f8f0e0]/80 backdrop-blur-xl shadow-[0_8px_32px_rgba(50,46,37,0.06)] rounded-b-2xl">
|
|
<div class="flex justify-between items-center w-full px-6 py-4 max-w-5xl mx-auto">
|
|
<div class="flex items-center gap-4">
|
|
<button
|
|
class="material-symbols-outlined text-[#6c5a00] active:scale-95 transition-transform duration-200">menu</button>
|
|
<h1 class="text-xl font-black text-[#6d3b00] tracking-[-0.02em]">按钮组件库 - 优化版</h1>
|
|
</div>
|
|
<button
|
|
class="material-symbols-outlined text-[#6c5a00] active:scale-95 transition-transform duration-200">print</button>
|
|
</div>
|
|
</header>
|
|
<main class="max-w-5xl mx-auto px-6 py-8">
|
|
<!-- Intro Hero Section -->
|
|
<section class="mb-12">
|
|
<div
|
|
class="bg-surface-container-low rounded-2xl p-8 flex flex-col md:flex-row items-center gap-8 border-4 border-white/50">
|
|
<div class="flex-1 text-center md:text-left">
|
|
<h2 class="text-3xl font-bold text-on-secondary-container mb-4 tracking-tight">阳光色彩调色盘</h2>
|
|
<p class="text-on-surface-variant text-base leading-relaxed">
|
|
触感舒适、灵动活泼，专为儿童和家长设计的按钮系统。抛弃尖锐棱角，拥抱温暖与游戏感。</p>
|
|
</div>
|
|
<div class="w-full md:w-64 h-40 bg-primary-container rounded-2xl shadow-inner overflow-hidden relative">
|
|
<div class="absolute inset-0 bg-gradient-to-br from-primary-fixed to-primary-fixed-dim opacity-50">
|
|
</div>
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-on-primary-container text-6xl"
|
|
style="font-variation-settings: 'FILL' 1;">smart_toy</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- Bento Grid for Categories -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<!-- Primary Buttons -->
|
|
<div class="bg-surface-container rounded-2xl p-8 flex flex-col gap-6">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-primary"
|
|
style="font-variation-settings: 'FILL' 1;">star</span>
|
|
<h3 class="text-xl font-bold text-on-surface">主要按钮 (Primary)</h3>
|
|
</div>
|
|
<div class="space-y-6">
|
|
<div>
|
|
<p class="text-xs font-bold text-outline uppercase tracking-widest mb-3">大号 / 全宽</p>
|
|
<button
|
|
class="w-full bg-gradient-to-br from-primary-fixed to-primary-fixed-dim text-on-primary-container font-bold py-5 px-8 rounded-2xl shadow-[0_8px_24px_rgba(108,90,0,0.15)] active:scale-95 transition-all duration-200 text-lg">开始创作</button>
|
|
</div>
|
|
<div class="flex items-end gap-4">
|
|
<div class="flex-1">
|
|
<p class="text-xs font-bold text-outline uppercase tracking-widest mb-3">中号</p>
|
|
<button
|
|
class="w-full bg-primary-container text-on-primary-container font-bold py-3 px-8 rounded-2xl active:scale-95 transition-all duration-200">继续</button>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-bold text-outline uppercase tracking-widest mb-3">小号</p>
|
|
<button
|
|
class="bg-primary-container text-on-primary-container font-bold py-2 px-6 rounded-2xl text-sm active:scale-95 transition-all duration-200">下一步</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Interaction States -->
|
|
<div class="bg-surface-container-highest rounded-2xl p-8 flex flex-col gap-6">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-secondary"
|
|
style="font-variation-settings: 'FILL' 1;">ads_click</span>
|
|
<h3 class="text-xl font-bold text-on-surface">交互状态 (States)</h3>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4 h-full items-center">
|
|
<div class="flex flex-col items-center gap-4">
|
|
<button
|
|
class="bg-primary-container text-on-primary-container font-bold py-3 px-8 rounded-2xl shadow-sm w-full">常规状态</button>
|
|
<span class="text-xs font-medium text-outline">静止态</span>
|
|
</div>
|
|
<div class="flex flex-col items-center gap-4">
|
|
<button
|
|
class="bg-primary-dim text-on-primary font-bold py-3 px-8 rounded-2xl scale-95 shadow-none ring-4 ring-primary/10 w-full">点击状态</button>
|
|
<span class="text-xs font-medium text-outline">激活态</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Functional & Secondary -->
|
|
<div class="bg-surface-container rounded-2xl p-8 flex flex-col gap-6">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-tertiary"
|
|
style="font-variation-settings: 'FILL' 1;">category</span>
|
|
<h3 class="text-xl font-bold text-on-surface">功能与次要按钮</h3>
|
|
</div>
|
|
<div class="space-y-6">
|
|
<div class="flex gap-4">
|
|
<button
|
|
class="flex-1 bg-[#9cd343] text-white font-bold py-3 px-6 rounded-2xl flex items-center justify-center gap-2 active:scale-95 transition-all">
|
|
<span class="material-symbols-outlined text-xl">share</span> 分享
|
|
</button>
|
|
<button
|
|
class="flex-1 bg-error-container text-on-error-container font-bold py-3 px-6 rounded-2xl flex items-center justify-center gap-2 active:scale-95 transition-all">
|
|
<span class="material-symbols-outlined text-xl">delete</span> 删除
|
|
</button>
|
|
</div>
|
|
<div class="flex gap-4">
|
|
<button
|
|
class="flex-1 border-4 border-surface-variant text-on-surface-variant font-bold py-3 px-6 rounded-2xl active:scale-95 transition-all">描边样式</button>
|
|
<button
|
|
class="flex-1 text-primary font-bold py-3 px-6 rounded-2xl active:bg-surface-container-high transition-all">幽灵按钮</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Icon Buttons -->
|
|
<div class="bg-surface-container-low rounded-2xl p-8 flex flex-col gap-6 border-4 border-white/30">
|
|
<div class="flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-on-secondary-container"
|
|
style="font-variation-settings: 'FILL' 1;">grid_view</span>
|
|
<h3 class="text-xl font-bold text-on-surface">图标变体</h3>
|
|
</div>
|
|
<div class="flex flex-wrap gap-6 items-center justify-center py-4">
|
|
<button
|
|
class="w-16 h-16 rounded-2xl bg-secondary-container text-on-secondary-container flex items-center justify-center shadow-lg active:scale-90 transition-all">
|
|
<span class="material-symbols-outlined text-3xl"
|
|
style="font-variation-settings: 'FILL' 1;">brush</span>
|
|
</button>
|
|
<button
|
|
class="w-14 h-14 rounded-2xl bg-surface-container-highest text-on-surface-variant flex items-center justify-center active:scale-90 transition-all">
|
|
<span class="material-symbols-outlined text-2xl">undo</span>
|
|
</button>
|
|
<button
|
|
class="w-14 h-14 rounded-2xl bg-primary-container text-on-primary-container flex items-center justify-center shadow-sm active:scale-90 transition-all">
|
|
<span class="material-symbols-outlined text-2xl"
|
|
style="font-variation-settings: 'FILL' 1;">palette</span>
|
|
</button>
|
|
<button
|
|
class="w-12 h-12 rounded-xl border-4 border-outline-variant/20 text-on-surface flex items-center justify-center active:scale-90 transition-all">
|
|
<span class="material-symbols-outlined text-xl">close</span>
|
|
</button>
|
|
</div>
|
|
<p class="text-center text-sm text-outline px-4 italic">所有图标按钮均采用温润的方圆形状，强调触控感。</p>
|
|
</div>
|
|
</div>
|
|
<!-- Full Layout Example Section -->
|
|
<section
|
|
class="mt-12 mb-8 bg-surface-container-lowest rounded-2xl p-12 shadow-[0_8px_32px_rgba(50,46,37,0.06)] border-4 border-surface-container">
|
|
<div class="max-w-md mx-auto text-center space-y-8">
|
|
<div
|
|
class="bg-surface-container-low w-24 h-24 rounded-2xl mx-auto flex items-center justify-center mb-4">
|
|
<span class="material-symbols-outlined text-5xl text-primary"
|
|
style="font-variation-settings: 'FILL' 1;">draw</span>
|
|
</div>
|
|
<h3 class="text-3xl font-extrabold text-on-surface">准备好开始了吗？</h3>
|
|
<p class="text-on-surface-variant">使用我们的“暖阳画室”工具包创造你的第一件杰作。</p>
|
|
<div class="flex flex-col gap-4">
|
|
<button
|
|
class="w-full bg-gradient-to-br from-primary-fixed to-primary-fixed-dim text-on-primary-container font-bold py-5 px-8 rounded-2xl shadow-lg active:scale-95 transition-all text-xl">立即出发！</button>
|
|
<button
|
|
class="w-full text-secondary font-bold py-3 px-8 rounded-2xl active:bg-surface-container-low transition-all">稍后再说</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<!-- Floating Action Bar (Requested Component) -->
|
|
<div class="fixed bottom-24 left-0 w-full px-4 z-[60]">
|
|
<div
|
|
class="max-w-md mx-auto bg-white rounded-3xl p-4 shadow-[0_12px_40px_rgba(0,0,0,0.12)] border border-surface-container flex gap-3">
|
|
<button
|
|
class="flex-[4] bg-[#9cd343] text-white font-bold py-4 rounded-2xl flex items-center justify-center gap-2 active:scale-95 transition-all">
|
|
<span class="material-symbols-outlined text-xl"
|
|
style="font-variation-settings: 'FILL' 1;">bubble_chart</span>
|
|
<span class="text-lg">分享</span>
|
|
</button>
|
|
<button
|
|
class="flex-[6] bg-[#FFD700] text-on-primary-container font-bold py-4 rounded-2xl flex items-center justify-center gap-2 shadow-[0_4px_12px_rgba(255,215,0,0.3)] active:scale-95 transition-all">
|
|
<span class="material-symbols-outlined text-xl">download</span>
|
|
<span class="text-lg">保存到作品库</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- BottomNavBar -->
|
|
<nav
|
|
class="fixed bottom-0 left-0 w-full flex justify-around items-center px-4 pb-8 pt-4 bg-[#f8f0e0]/90 backdrop-blur-2xl z-50 rounded-t-3xl shadow-[0_-8px_32px_rgba(50,46,37,0.06)] border-t border-white/20">
|
|
<a class="flex flex-col items-center justify-center bg-[#ffd709] text-[#6d3b00] rounded-2xl px-6 py-2 transition-all duration-200"
|
|
href="#">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">edit_note</span>
|
|
<span class="text-xs font-bold mt-1">画室</span>
|
|
</a>
|
|
<a class="flex flex-col items-center justify-center text-[#b3ac9f] px-6 py-2 hover:opacity-80 transition-opacity"
|
|
href="#">
|
|
<span class="material-symbols-outlined">folder_open</span>
|
|
<span class="text-xs font-medium mt-1">作品集</span>
|
|
</a>
|
|
<a class="flex flex-col items-center justify-center text-[#b3ac9f] px-6 py-2 hover:opacity-80 transition-opacity"
|
|
href="#">
|
|
<span class="material-symbols-outlined">settings</span>
|
|
<span class="text-xs font-medium mt-1">设置</span>
|
|
</a>
|
|
</nav>
|
|
</body>
|
|
|
|
</html> |