323 lines
22 KiB
HTML
323 lines
22 KiB
HTML
<!DOCTYPE html><html lang="zh-CN" style=""><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=Inter:wght@400;500;600;700&family=Manrope:wght@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">
|
|
<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-highest": "#e3e2e0",
|
|
"success-green": "#2D6A4F",
|
|
"inverse-primary": "#ffb3ae",
|
|
"on-secondary": "#ffffff",
|
|
"surface-bright": "#faf9f7",
|
|
"tertiary-fixed": "#dae5dd",
|
|
"on-tertiary-container": "#c2cdc6",
|
|
"on-primary-fixed-variant": "#910817",
|
|
"tertiary-container": "#4e5852",
|
|
"heritage-red": "#A61D24",
|
|
"inverse-on-surface": "#f1f1ef",
|
|
"surface-variant": "#e3e2e0",
|
|
"inverse-surface": "#2f3130",
|
|
"secondary-fixed": "#ffe088",
|
|
"on-tertiary-fixed-variant": "#3f4943",
|
|
"background": "#faf9f7",
|
|
"secondary": "#735c00",
|
|
"surface-container-low": "#f4f3f1",
|
|
"primary-container": "#a61d24",
|
|
"on-error-container": "#93000a",
|
|
"surface-dim": "#dadad8",
|
|
"on-error": "#ffffff",
|
|
"error": "#ba1a1a",
|
|
"tertiary-fixed-dim": "#bec9c2",
|
|
"primary": "#820012",
|
|
"surface": "#faf9f7",
|
|
"on-surface-variant": "#5a413f",
|
|
"on-primary-fixed": "#410004",
|
|
"on-tertiary": "#ffffff",
|
|
"surface-container": "#efeeec",
|
|
"primary-fixed-dim": "#ffb3ae",
|
|
"aged-amber": "#FFBF00",
|
|
"on-secondary-container": "#745c00",
|
|
"subtle-gray": "#999999",
|
|
"outline": "#8d706e",
|
|
"on-tertiary-fixed": "#141e19",
|
|
"outline-variant": "#e2bebc",
|
|
"surface-container-high": "#e9e8e6",
|
|
"secondary-fixed-dim": "#e9c349",
|
|
"status-blue": "#2A6EBB",
|
|
"on-background": "#1a1c1b",
|
|
"secondary-container": "#fed65b",
|
|
"error-container": "#ffdad6",
|
|
"on-secondary-fixed-variant": "#574500",
|
|
"on-surface": "#1a1c1b",
|
|
"on-secondary-fixed": "#241a00",
|
|
"primary-fixed": "#ffdad7",
|
|
"surface-container-lowest": "#ffffff",
|
|
"on-primary": "#ffffff",
|
|
"on-primary-container": "#ffb9b4",
|
|
"tertiary": "#37413b",
|
|
"ink-black": "#1A1A1A",
|
|
"surface-tint": "#b3272c"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"stack-md": "16px",
|
|
"stack-sm": "4px",
|
|
"stack-lg": "32px",
|
|
"base": "8px",
|
|
"margin-page": "20px",
|
|
"gutter-card": "12px"
|
|
},
|
|
"fontFamily": {
|
|
"label-md": ["Inter"],
|
|
"coupon-amount": ["Manrope"],
|
|
"headline-lg-mobile": ["Manrope"],
|
|
"body-md": ["Be Vietnam Pro"],
|
|
"headline-lg": ["Manrope"],
|
|
"headline-md": ["Manrope"],
|
|
"headline-xl": ["Manrope"],
|
|
"body-lg": ["Be Vietnam Pro"]
|
|
},
|
|
"fontSize": {
|
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
|
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
|
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
|
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
|
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
|
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
|
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
|
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
background-color: #faf9f7;
|
|
color: #1a1c1b;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.card-shadow {
|
|
box-shadow: 0px 4px 20px rgba(166, 29, 36, 0.05);
|
|
}
|
|
.switch-checkbox:checked + .switch-label {
|
|
background-color: #A61D24;
|
|
}
|
|
.switch-checkbox:checked + .switch-label::after {
|
|
transform: translateX(1.25rem);
|
|
}
|
|
</style>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="font-body-md text-body-md antialiased overflow-x-hidden">
|
|
<!-- Top App Bar -->
|
|
<header class="fixed top-0 w-full flex justify-between items-center px-margin-page h-14 bg-surface dark:bg-surface-dim z-50 shadow-sm">
|
|
<div class="flex items-center">
|
|
<span class="material-symbols-outlined text-primary cursor-pointer active:opacity-80 transition-opacity" data-icon="arrow_back" style="opacity: 0;">arrow_back</span>
|
|
</div>
|
|
<h1 class="font-headline-lg-mobile text-headline-lg-mobile font-bold text-heritage-red">商品管理</h1>
|
|
<div class="flex items-center">
|
|
<span class="material-symbols-outlined text-primary cursor-pointer active:opacity-80 transition-opacity" data-icon="add">add</span>
|
|
</div>
|
|
</header>
|
|
<main class="pt-14 pb-24">
|
|
<!-- Category Filter -->
|
|
<section class="sticky top-14 bg-surface/80 backdrop-blur-md z-40 px-margin-page py-4">
|
|
<div class="flex space-x-3 overflow-x-auto custom-scrollbar">
|
|
<button class="flex-shrink-0 px-5 py-2 rounded-full bg-heritage-red text-white font-label-md text-label-md shadow-md transition-all active:scale-95">全部</button>
|
|
<button class="flex-shrink-0 px-5 py-2 rounded-full bg-surface-container-high text-on-surface-variant font-label-md text-label-md hover:bg-surface-container-highest transition-all active:scale-95">清香型</button>
|
|
<button class="flex-shrink-0 px-5 py-2 rounded-full bg-surface-container-high text-on-surface-variant font-label-md text-label-md hover:bg-surface-container-highest transition-all active:scale-95">酱香型</button>
|
|
<button class="flex-shrink-0 px-5 py-2 rounded-full bg-surface-container-high text-on-surface-variant font-label-md text-label-md hover:bg-surface-container-highest transition-all active:scale-95">浓香型</button>
|
|
</div>
|
|
</section>
|
|
<!-- Product List -->
|
|
<div class="px-margin-page space-y-4 mt-2">
|
|
<!-- Product Item 1 -->
|
|
<div class="card-shadow bg-surface-container-lowest rounded-xl p-3 flex items-center space-x-4 border border-heritage-red/5 transition-all active:bg-surface-container">
|
|
<div class="w-24 h-24 flex-shrink-0 rounded-lg overflow-hidden bg-surface-container-low">
|
|
<img class="w-full h-full object-cover" data-alt="A professional studio product shot of a premium Chinese Baijiu bottle with elegant red and gold labels. The bottle is placed on a minimalist white platform against a soft, warm off-white background with subtle amber lighting accents. The style is high-end commercial photography, focusing on texture and material detail of the glass and embossed paper label." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAq7d_Zaerq436TC3rIz5h-imza_gIdPXGmxNR3u4U0mtWUNf19qzORjMKaxxeY1s1VY4oAfbsJVGc4RE_XdUSx_SqKbXnBpMO5m6El5u0XjB3HPpgIfp046rL-Ve9AWYqooynfEBOPyZ0P7lLPRl2p5v6DxdN5uJ1tB_4KThXjGDftvcSM5ipKm8gQthZz73KSRfOaGtzKNoKulHvwtU9N8B6IlYM8xc3xnpeGD2Ylk--l2utjDSn4rD5DQ2cMUSHQQPoRCPw-_wQ">
|
|
</div>
|
|
<div class="flex-grow min-w-0 flex flex-col justify-between h-24 py-1">
|
|
<div>
|
|
<h3 class="font-headline-md text-headline-md truncate text-ink-black">杜康·原窖1972</h3>
|
|
<p class="text-subtle-gray font-label-md text-label-md mt-1">浓香型 | 500ml</p>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-heritage-red font-bold text-headline-md">¥1,299.00</span>
|
|
<div class="flex items-center space-x-3">
|
|
<span class="text-label-md font-label-md text-on-surface-variant">上架</span>
|
|
<div class="relative inline-block w-10 h-5 align-middle select-none transition duration-200 ease-in">
|
|
<input checked="" class="switch-checkbox absolute block w-5 h-5 rounded-full bg-white border-2 border-surface-container-highest appearance-none cursor-pointer z-10 outline-none" id="toggle1" name="toggle" type="checkbox">
|
|
<label class="switch-label block overflow-hidden h-5 rounded-full bg-surface-container-highest cursor-pointer transition-colors duration-200 ease-in after:content-[''] after:absolute after:top-0 after:left-0 after:w-5 after:h-5 after:rounded-full after:bg-white after:shadow-sm after:transition-transform after:duration-200" for="toggle1"></label>
|
|
</div>
|
|
<button class="p-1 rounded-full hover:bg-surface-container-high transition-colors text-subtle-gray">
|
|
<span class="material-symbols-outlined text-[20px]" data-icon="edit">edit</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Product Item 2 -->
|
|
<div class="card-shadow bg-surface-container-lowest rounded-xl p-3 flex items-center space-x-4 border border-heritage-red/5 transition-all active:bg-surface-container">
|
|
<div class="w-24 h-24 flex-shrink-0 rounded-lg overflow-hidden bg-surface-container-low">
|
|
<img class="w-full h-full object-cover" data-alt="Close-up of a sophisticated dark glass liquor bottle featuring a traditional Chinese seal stamp in crimson red. The setting is an editorial-style composition with dramatic shadows and a spotlight hitting the metallic gold neck of the bottle. Minimalist light-mode aesthetic with high contrast and premium textures." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDdqJuXyFlpHWgjNJ2ADK1UN1My2RQUjOMhpFYZAx0bY851FHDxq_8WW9DDHfuZT9C5jRgvyMuJTtNFQkenItv9eZkSeWsKc8cJgWo5CqxHlGPmH_BSQs8QunDfO9bng31hMCztktwsCAf53fMqZBWQOSYZ7UJ483pNJII-8kYzcmxuU1P6wQ9628dnzsuT1fHPngESh0ExKL4KywQ123wfWiK5jZy9IzKJpeOkxfmc_NVabVjB3i2RobZ9ehfLM41kk-srykX86c0">
|
|
</div>
|
|
<div class="flex-grow min-w-0 flex flex-col justify-between h-24 py-1">
|
|
<div>
|
|
<h3 class="font-headline-md text-headline-md truncate text-ink-black">杜康·名仕封坛</h3>
|
|
<p class="text-subtle-gray font-label-md text-label-md mt-1">酱香型 | 500ml</p>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-heritage-red font-bold text-headline-md">¥2,580.00</span>
|
|
<div class="flex items-center space-x-3">
|
|
<span class="text-label-md font-label-md text-on-surface-variant">上架</span>
|
|
<div class="relative inline-block w-10 h-5 align-middle select-none transition duration-200 ease-in">
|
|
<input checked="" class="switch-checkbox absolute block w-5 h-5 rounded-full bg-white border-2 border-surface-container-highest appearance-none cursor-pointer z-10 outline-none" id="toggle2" name="toggle" type="checkbox">
|
|
<label class="switch-label block overflow-hidden h-5 rounded-full bg-surface-container-highest cursor-pointer transition-colors duration-200 ease-in after:content-[''] after:absolute after:top-0 after:left-0 after:w-5 after:h-5 after:rounded-full after:bg-white after:shadow-sm after:transition-transform after:duration-200" for="toggle2"></label>
|
|
</div>
|
|
<button class="p-1 rounded-full hover:bg-surface-container-high transition-colors text-subtle-gray">
|
|
<span class="material-symbols-outlined text-[20px]" data-icon="edit">edit</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Product Item 3 -->
|
|
<div class="card-shadow bg-surface-container-lowest rounded-xl p-3 flex items-center space-x-4 border border-heritage-red/5 opacity-80 transition-all active:bg-surface-container">
|
|
<div class="w-24 h-24 flex-shrink-0 rounded-lg overflow-hidden bg-surface-container-low grayscale">
|
|
<img class="w-full h-full object-cover" data-alt="Minimalist product photography of a sleek clear glass bottle containing premium spirit. The bottle has a modern typographic label in black and white. It is positioned asymmetrically on a textured stone surface with light coming from a side window, creating long, soft shadows. Clean, organized, and sophisticated atmosphere." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCcWF1yV5KZohsIixpqhynOvslF8nS4ZRFH0Qx05xilenilritdBFSfPctmjZYiW6FDpnAJfXk_Y_88DSgRa_WN98-s5JaSMAEUH5XARLPDrzvGKPoUphXw-g7tGjTqD-dg9JTQU18O8AW6sqCPOBTor3rWoTh9T3luTMQZ-I6zmahw6hpUM6Z3UKTExK8btVMixikO2dhVp7pTOCg_ALF3ky05USTF0Oaq0ts27ADNK_uV5rURYgosrC4cE_jAG0amJITLgaYexLs">
|
|
</div>
|
|
<div class="flex-grow min-w-0 flex flex-col justify-between h-24 py-1">
|
|
<div>
|
|
<h3 class="font-headline-md text-headline-md truncate text-ink-black">杜康·珍藏系列</h3>
|
|
<p class="text-subtle-gray font-label-md text-label-md mt-1">清香型 | 375ml</p>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-heritage-red font-bold text-headline-md">¥888.00</span>
|
|
<div class="flex items-center space-x-3">
|
|
<span class="text-label-md font-label-md text-subtle-gray">下架</span>
|
|
<div class="relative inline-block w-10 h-5 align-middle select-none transition duration-200 ease-in">
|
|
<input class="switch-checkbox absolute block w-5 h-5 rounded-full bg-white border-2 border-surface-container-highest appearance-none cursor-pointer z-10 outline-none" id="toggle3" name="toggle" type="checkbox">
|
|
<label class="switch-label block overflow-hidden h-5 rounded-full bg-surface-container-highest cursor-pointer transition-colors duration-200 ease-in after:content-[''] after:absolute after:top-0 after:left-0 after:w-5 after:h-5 after:rounded-full after:bg-white after:shadow-sm after:transition-transform after:duration-200" for="toggle3"></label>
|
|
</div>
|
|
<button class="p-1 rounded-full hover:bg-surface-container-high transition-colors text-subtle-gray">
|
|
<span class="material-symbols-outlined text-[20px]" data-icon="edit">edit</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Product Item 4 -->
|
|
<div class="card-shadow bg-surface-container-lowest rounded-xl p-3 flex items-center space-x-4 border border-heritage-red/5 transition-all active:bg-surface-container">
|
|
<div class="w-24 h-24 flex-shrink-0 rounded-lg overflow-hidden bg-surface-container-low">
|
|
<img class="w-full h-full object-cover" data-alt="A luxurious bottle of Chinese liquor with a heavy wooden gift box in the background. The lighting is golden and warm, highlighting the intricate floral patterns on the porcelain bottle. The scene is elegant and traditional yet clean and modern, fitting for an upscale mobile app gallery." src="https://lh3.googleusercontent.com/aida-public/AB6AXuDQ6e9cHHzYIvUXoP9VCGgkHDBb_enCECM4jjmTtDY2-cespyAY1x7w5pJ-nOgL8AuprA5YMfdAHxyozB0lBwEGM-eTDrPyDNZZs988vI2KOFXcq76tsHTi1u2Qne7S7MZvLRzYbBNAHIQOG9kgV0Hpn6nv-7w9-Ig8luSTsdJ-0L4eL6yD9ZJQPOOsBp0ga7uvKCrqAAm3UnVOpVwdFVGBAXH7IwHOGZQHcGwl1aqZXC_Lak_56yQIqtpDvfoBItXoRik7tDgIOEg">
|
|
</div>
|
|
<div class="flex-grow min-w-0 flex flex-col justify-between h-24 py-1">
|
|
<div>
|
|
<h3 class="font-headline-md text-headline-md truncate text-ink-black">杜康·龙樽御酿</h3>
|
|
<p class="text-subtle-gray font-label-md text-label-md mt-1">浓香型 | 500ml</p>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-heritage-red font-bold text-headline-md">¥3,288.00</span>
|
|
<div class="flex items-center space-x-3">
|
|
<span class="text-label-md font-label-md text-on-surface-variant">上架</span>
|
|
<div class="relative inline-block w-10 h-5 align-middle select-none transition duration-200 ease-in">
|
|
<input checked="" class="switch-checkbox absolute block w-5 h-5 rounded-full bg-white border-2 border-surface-container-highest appearance-none cursor-pointer z-10 outline-none" id="toggle4" name="toggle" type="checkbox">
|
|
<label class="switch-label block overflow-hidden h-5 rounded-full bg-surface-container-highest cursor-pointer transition-colors duration-200 ease-in after:content-[''] after:absolute after:top-0 after:left-0 after:w-5 after:h-5 after:rounded-full after:bg-white after:shadow-sm after:transition-transform after:duration-200" for="toggle4"></label>
|
|
</div>
|
|
<button class="p-1 rounded-full hover:bg-surface-container-high transition-colors text-subtle-gray">
|
|
<span class="material-symbols-outlined text-[20px]" data-icon="edit">edit</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Product Item 5 -->
|
|
<div class="card-shadow bg-surface-container-lowest rounded-xl p-3 flex items-center space-x-4 border border-heritage-red/5 transition-all active:bg-surface-container">
|
|
<div class="w-24 h-24 flex-shrink-0 rounded-lg overflow-hidden bg-surface-container-low">
|
|
<img class="w-full h-full object-cover" data-alt="Modern studio shot of a red-labeled glass bottle on a minimalist pedestal. The atmosphere is clean and high-end, utilizing soft diffuse light and a light-gray paper texture background. The image evokes quality, tradition, and contemporary design, fitting the Heritage Modernism style." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBfcNRuJovQo8yMfM7S3LGVc-NNEwdqhmgfLBn3vnQtKu213M91aGWHwjdTcc0khZY2GJd4jmm1-U_tOO2U_2ySGSL_StMnhE19EP_Y1nRIeTsb5rwyGwMOAhQCkHg14GiaxFTh84W85MwSP2uyeo_PsYh37_8tn-167CHSZ4HaDVVsAzVqUQEZ-GW7jMoawYcetc6514fFfzA9tJwQPgznUS0DkiXSBVNONXGEIDQk56dgC39ZUWvo_oFkVjCpxEJd44C5qf2HLXA">
|
|
</div>
|
|
<div class="flex-grow min-w-0 flex flex-col justify-between h-24 py-1">
|
|
<div>
|
|
<h3 class="font-headline-md text-headline-md truncate text-ink-black">杜康·白酒品鉴装</h3>
|
|
<p class="text-subtle-gray font-label-md text-label-md mt-1">组合装 | 100ml*4</p>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-heritage-red font-bold text-headline-md">¥499.00</span>
|
|
<div class="flex items-center space-x-3">
|
|
<span class="text-label-md font-label-md text-on-surface-variant">上架</span>
|
|
<div class="relative inline-block w-10 h-5 align-middle select-none transition duration-200 ease-in">
|
|
<input checked="" class="switch-checkbox absolute block w-5 h-5 rounded-full bg-white border-2 border-surface-container-highest appearance-none cursor-pointer z-10 outline-none" id="toggle5" name="toggle" type="checkbox">
|
|
<label class="switch-label block overflow-hidden h-5 rounded-full bg-surface-container-highest cursor-pointer transition-colors duration-200 ease-in after:content-[''] after:absolute after:top-0 after:left-0 after:w-5 after:h-5 after:rounded-full after:bg-white after:shadow-sm after:transition-transform after:duration-200" for="toggle5"></label>
|
|
</div>
|
|
<button class="p-1 rounded-full hover:bg-surface-container-high transition-colors text-subtle-gray">
|
|
<span class="material-symbols-outlined text-[20px]" data-icon="edit">edit</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- Bottom Nav Bar -->
|
|
|
|
<script>
|
|
// Micro-interaction for toggle switches
|
|
document.querySelectorAll('.switch-checkbox').forEach(toggle => {
|
|
toggle.addEventListener('change', function() {
|
|
const statusText = this.closest('.flex').querySelector('.font-label-md');
|
|
if (this.checked) {
|
|
statusText.textContent = '上架';
|
|
statusText.classList.replace('text-subtle-gray', 'text-on-surface-variant');
|
|
this.closest('.card-shadow').classList.remove('opacity-80');
|
|
this.closest('.card-shadow').querySelector('img').classList.remove('grayscale');
|
|
} else {
|
|
statusText.textContent = '下架';
|
|
statusText.classList.replace('text-on-surface-variant', 'text-subtle-gray');
|
|
this.closest('.card-shadow').classList.add('opacity-80');
|
|
this.closest('.card-shadow').querySelector('img').classList.add('grayscale');
|
|
}
|
|
});
|
|
});
|
|
|
|
// Simple ripple-like effect on chips
|
|
document.querySelectorAll('button').forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
if(this.classList.contains('bg-heritage-red')) return;
|
|
|
|
// Reset siblings
|
|
this.parentElement.querySelectorAll('button').forEach(sib => {
|
|
sib.classList.remove('bg-heritage-red', 'text-white', 'shadow-md');
|
|
sib.classList.add('bg-surface-container-high', 'text-on-surface-variant');
|
|
});
|
|
|
|
// Activate current
|
|
this.classList.remove('bg-surface-container-high', 'text-on-surface-variant');
|
|
this.classList.add('bg-heritage-red', 'text-white', 'shadow-md');
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
</body></html> |