s.esmaeili
f441ca8289
Applies to both user-app and user-app-v2. Logic and structure are shared; each app keeps its own look. Appearance settings - New "تنظیمات ظاهری" page (/settings/appearance), opened from the dashboard and available without login. It offers a light/dark/system theme and a "fast & light" motion switch. - appearanceStore saves the choice to localStorage. A small inline boot script in index.html applies it before first paint so there is no white flash. The "system" option follows OS changes live. - New ToggleSwitch component. Dark mode - Theme LESS tokens now compile to CSS custom properties. Light/dark values come from a generated virtual:palette.css (themeConfig/ appearance.ts, with colors.json + new colors.dark.json). - New LESS alpha() plugin replaces fade() on theme tokens. - New semantic tokens: page, onInk, heroSurface, hairlineStrong, photoMat, photoStage. - The dark palette is layered (page < card < panel < border) so surfaces separate without shadows. - Hard-coded colors were replaced by tokens according to their role. - antd inputs/text get dark overrides; vant uses its own .van-theme-dark. - Light mode looks the same as before. Reduced motion - With html.motion-reduced, transitions are capped at 120ms, keyframe loops stop, and backdrop blurs and permanent will-change are dropped. - Spinners and the toast progress bar (which closes the toast) are exempt via .keep-motion. - Carousel autoplay, the v1 Lottie and the product morph honor the setting. Product detail - Opening a product is now a container-transform morph from the tapped card (ProductMorph). It replaces the bottom Drawer and uses composited transform/opacity only. - The detail view is seeded with the card's data, so it no longer opens blank and jumps. Filters and sheets - Filters are now a full-width bottom sheet. Selections stay a draft until applied, so the result list no longer re-renders while dragging the slider. - DropDown collapse animates grid-template-rows instead of a capped max-height. - v2 IslandSheet is restyled to the v2 design language (API unchanged). Fixes - filtersStore.reset() shallow-copied shared arrays, so clearing the filters never cleared the selected brands.
42 lines
2.0 KiB
HTML
42 lines
2.0 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<link rel="icon" href="/favicon.ico" />
|
|
<meta charset="UTF-8" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
<meta name="theme-color" content="#23493c" data-light="#23493c" />
|
|
<meta name="background-color" content="#23493c" />
|
|
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
|
|
<!--
|
|
Appearance boot (see src/stores/appearanceStore.ts): applies the saved
|
|
theme / reduced-motion classes before the first paint, so a dark-mode
|
|
user never sees a white flash while the bundle loads. Same storage key
|
|
and class names as the store, which takes over once the app is up.
|
|
-->
|
|
<script>
|
|
(function () {
|
|
try {
|
|
var s = JSON.parse(localStorage.getItem('gold-bank:appearance') || '{}');
|
|
var mq = function (q) { return window.matchMedia && matchMedia(q).matches; };
|
|
var dark = s.theme === 'dark' || ((s.theme || 'system') === 'system' && mq('(prefers-color-scheme: dark)'));
|
|
var motion = typeof s.reduceMotion === 'boolean' ? s.reduceMotion : mq('(prefers-reduced-motion: reduce)');
|
|
var c = document.documentElement.classList;
|
|
if (dark) { c.add('theme-dark', 'van-theme-dark'); document.querySelector('meta[name=theme-color]').setAttribute('content', '#15171A'); }
|
|
if (motion) c.add('motion-reduced');
|
|
} catch (e) {}
|
|
})();
|
|
</script>
|
|
<style>
|
|
/* Until the bundle's palette loads. */
|
|
html.theme-dark, html.theme-dark body { background-color: #15171A !important; }
|
|
</style>
|
|
<title>طلای منتزر</title>
|
|
</head>
|
|
<body style="background-color: #fff">
|
|
<div class="w-screen h-screen fixed" style="background-color: var(--c-page, #fff)"></div>
|
|
<div id="app"></div>
|
|
<script type="module" src="/src/main.ts"></script>
|
|
</body>
|
|
</html>
|