#!/usr/bin/env python3 # -*- coding: utf-8 -*- """ Superium — showcase builder =========================== Generates ``demo.html``: the package's front door. Hero with live counts, the three homepages as palette cards, a gallery of every page with a lightbox, a component library rendered in all three palettes, and the feature list. python tools/build_demo.py Driven by ``assets/data/pages.json`` (written by build_pages.py) and the screenshots in ``assets/images/shots/``. Add a page to the manifest, rebuild, and its card appears here automatically. """ from __future__ import annotations import json import sys from pathlib import Path sys.path.insert(0, str(Path(__file__).resolve().parent)) from components import fa # noqa: E402 from layout import icon # noqa: E402 try: # only used to read each capture's intrinsic size from PIL import Image except ImportError: # pragma: no cover Image = None ROOT = Path(__file__).resolve().parent.parent DATA = ROOT / "assets" / "data" SHOTS = ROOT / "assets" / "images" / "shots" GROUPS = [ ("homepages", "سه صفحه اصلی", "سه معماری چیدمان و سه پالت رنگی مستقل"), ("shop", "فرآیند خرید", "از لیست کالا تا انتخاب فروشگاه"), ("checkout", "تحویل و پرداخت", "ارسال یا دریافت حضوری، نقشه و درگاه"), ("account", "حساب کاربری و پشتیبانی", "ورود، پروفایل، سفارش‌ها و راهنما"), ] PALETTES = [ ( "fresh", "تازه - گرم", "home-1-fresh.html", ["#f2600c", "#16a34a", "#fdf7f1", "#241a12"], ["هیرو کلاژی", "ریل دسته‌بندی گرد", "فوتر کامل"], ), ( "aqua", "آکوا - سرد", "home-2-aqua.html", ["#0e7490", "#f59e0b", "#f1f5f9", "#0f2530"], ["هیرو دوستونه", "کارت زمان تحویل", "چیدمان بنتو"], ), ( "graphite", "گرافیت - خنثی", "home-3-graphite.html", ["#a3e635", "#fb923c", "#0f1115", "#f2f4f7"], ["هیرو بنری تیره", "کاشی تک‌رنگ", "شبکه قیمت‌محور"], ), ] FEATURES = [ ("store", "مارکت‌پلیس چندفروشگاهی", "سبد را ببندید، قیمتش را بین فروشگاه‌های اطراف مقایسه کنید و فروشنده را انتخاب کنید."), ("truck", "ارسال یا دریافت حضوری", "یک کلید، کل صفحه پرداخت را عوض می‌کند: نقشه، زمان و هزینه ارسال."), ("pin", "انتخابگر نقشه بدون SDK", "پین قابل جابه‌جایی روی نقشه‌ی برداری درون‌خطی؛ بدون کلید API و بدون درخواست خارجی."), ("grid", "سه پالت مستقل", "هر صفحه اصلی توکن‌های خودش را دارد؛ تغییر یکی روی بقیه اثر ندارد."), ("percent", "فیلتر و مرتب‌سازی زنده", "دسته، برند، بازه قیمت و پنج حالت مرتب‌سازی، سمت کاربر."), ("shield", "راست‌به‌چپ اصولی", "فقط ویژگی‌های منطقی CSS؛ هیچ left/right فیزیکی در استایل‌ها نیست."), ("box", "بدون مرحله build", "HTML/CSS/JS ساده. فایل را باز کنید و کار می‌کند."), ("headset", "فونت محلی", "وزیرمتن به‌صورت woff2 داخل پکیج؛ بدون وابستگی به CDN."), ] def load(name: str): path = DATA / name if not path.exists(): sys.exit(f"✗ assets/data/{name} missing — run tools/build_pages.py first.") return json.loads(path.read_text(encoding="utf-8")) def shot(stem: str, view: str = "desktop") -> str | None: """Relative path of a capture. WebP is what shots.py writes now; a PNG left over from an older run still works.""" for ext in ("webp", "png"): rel = f"assets/images/shots/{stem}-{view}.{ext}" if (ROOT / rel).exists(): return rel return None def dims(rel: str) -> tuple[int, int]: """ A capture's real size. Shots run the whole length of the page, so the height varies per page — hard-coding one ratio would have the browser reserve the wrong box and jump on decode. """ if Image is not None: try: with Image.open(ROOT / rel) as im: return im.size except OSError: pass return (1440, 1000) def shot_img(rel: str, alt: str, *, lazy: bool = True) -> str: w, h = dims(rel) loading = ' loading="lazy"' if lazy else "" return f'{alt}' # -------------------------------------------------------------------------- # Sections # -------------------------------------------------------------------------- def palette_cards() -> str: cards = [] for slug, title, href, swatches, chips in PALETTES: img = shot(href.replace(".html", "")) media = ( shot_img(img, f"پیش‌نمایش {title}") if img else '
پیش‌نمایش موجود نیست
' ) swatch_html = "".join( f'' for c in swatches ) chip_html = "".join(f"{c}" for c in chips) mobile = shot(href.replace(".html", ""), "mobile") mobile_btn = ( f'' if mobile else "" ) card = f"""

{title}

{swatch_html}
{chip_html}
{mobile_btn}
""" cards.append(card) return "".join(cards) def gallery(pages: list[dict]) -> str: blocks = [] for key, title, blurb in GROUPS: rows = [p for p in pages if p["group"] == key] if not rows: continue cards = [] for p in rows: stem = p["file"].replace(".html", "") desktop = shot(stem) mobile = shot(stem, "mobile") media = ( shot_img(desktop, p["label"]) if desktop else '
پیش‌نمایش موجود نیست
' ) mobile_badge = ( f'' if mobile else "" ) cards.append(f"""

{p['label']}

{p['file']}

{p['blurb']}

{mobile_badge}
""") blocks.append(f"""

{title}

{blurb}

{fa(len(rows))} صفحه
{"".join(cards)}
""") return "".join(blocks) def components() -> str: """Every component rendered once per palette, side by side.""" def swatch_block(theme: str, label: str) -> str: return f"""
{label}
۲۵٪ موجود کم‌موجود Pro کالابرگ
۲
""" cols = "".join(swatch_block(slug, title) for slug, title, *_ in PALETTES) return f'
{cols}
' def feature_cards() -> str: return "".join( f"""
{icon(ico, 22)}

{title}

{text}

""" for ico, title, text in FEATURES ) # -------------------------------------------------------------------------- # Page # -------------------------------------------------------------------------- def build(pages: list[dict], catalogue: dict) -> str: n_pages = len(pages) n_shots = len(list(SHOTS.glob("*.webp"))) + len(list(SHOTS.glob("*.png"))) n_products = len(catalogue["products"]) n_cats = len(catalogue["categories"]) hero_shot = shot("home-1-fresh") or "" return f""" سوپردوپر مارکت - قالب RTL سوپرمارکت آنلاین
گالری صفحات
RTL · فارسی · بدون مرحله build

قالب سوپرمارکت آنلاین
سوپردوپر مارکت

یک مارکت‌پلیس سوپرمارکتی کامل: سبد خرید را می‌بندید، قیمتش بین فروشگاه‌های اطراف مقایسه می‌شود، فروشنده را انتخاب می‌کنید و با پیک یا حضوری تحویل می‌گیرید. سه صفحه اصلی با پالت و چیدمان مستقل، به‌همراه تمام صفحات فرآیند خرید و حساب کاربری.

گالری صفحات سه صفحه اصلی
{fa(n_pages)}
صفحه آماده
۳
صفحه اصلی
{fa(n_products)}
کالای واقعی
{fa(n_cats)}
دسته‌بندی
{fa(n_shots)}
پیش‌نمایش

سه صفحه اصلی، سه زبان بصری

هر صفحه اصلی معماری چیدمان و پالت رنگی خودش را دارد - نه صرفاً تعویض رنگ. توکن‌های هر پالت زیر کلاس بدنه‌ی خودش تعریف شده‌اند، بنابراین تغییر یکی هرگز روی دیگری اثر نمی‌گذارد.

{palette_cards()}

همه صفحات

برای بزرگ‌نمایی روی هر تصویر کلیک کنید. کلیدهای ← → و Esc هم کار می‌کنند.

{gallery(pages)}

کامپوننت‌ها در هر سه پالت

یک مجموعه کامپوننت، سه پالت. همه از توکن‌های --sp-* تغذیه می‌شوند؛ هیچ رنگی در کامپوننت hard-code نشده.

{components()}

ویژگی‌ها

آنچه این قالب را از یک فروشگاه تک‌فروشنده متمایز می‌کند.

{feature_cards()}
""" def main() -> int: pages = load("pages.json") catalogue = load("products.json") (ROOT / "demo.html").write_text(build(pages, catalogue), encoding="utf-8") shots = len(list(SHOTS.glob("*.webp"))) + len(list(SHOTS.glob("*.png"))) print(f" ✓ demo.html ({len(pages)} pages, {shots} shots)") return 0 if __name__ == "__main__": sys.exit(main())