یک مارکتپلیس سوپرمارکتی کامل: سبد خرید را میبندید، قیمتش بین فروشگاههای اطراف مقایسه میشود، فروشنده را انتخاب میکنید و با پیک یا حضوری تحویل میگیرید. سه صفحه اصلی با پالت و چیدمان مستقل، بههمراه تمام صفحات فرآیند خرید و حساب کاربری.
هر صفحه اصلی معماری چیدمان و پالت رنگی خودش را دارد - نه صرفاً تعویض رنگ. توکنهای هر پالت زیر کلاس بدنهی خودش تعریف شدهاند، بنابراین تغییر یکی هرگز روی دیگری اثر نمیگذارد.
برای بزرگنمایی روی هر تصویر کلیک کنید. کلیدهای ← → و Esc هم کار میکنند.
سه معماری چیدمان و سه پالت رنگی مستقل
۳ صفحهhome-1-fresh.html
پالت گرم، هیرو کلاژی، ریل دستهبندی گرد و فوتر کامل
home-2-aqua.html
پالت سرد، هیرو دوستونه با کارت زمان تحویل، چیدمان بنتو
home-3-graphite.html
پالت تیره خنثی، هیرو بنری، کاشی تکرنگ و شبکه قیمتمحور
از لیست کالا تا انتخاب فروشگاه
۵ صفحهmarket.html
لیست کالا با فیلتر، مرتبسازی، نمای شبکه/لیست و صفحهبندی
product.html
گالری، جعبه خرید، فروشندگان دیگر، مشخصات و نظرات
cart.html
اقلام سبد، تغییر تعداد و خلاصه چسبان فاکتور
vendors.html
قیمت سبد شما در فروشگاههای اطراف، با کالای ناموجود و جایگزین
store.html
ویترین یک سوپرمارکت با جستجوی داخلی و سبد کنار صفحه
ارسال یا دریافت حضوری، نقشه و درگاه
۳ صفحهcheckout.html
ارسال با پیک یا دریافت حضوری، زمان آمادهسازی، کد تخفیف و درگاه
address-map.html
انتخابگر نقشه با پین قابل جابهجایی - بدون SDK خارجی
address-add.html
فرم آدرس با عنوان خانه/محل کار و موبایل تحویلگیرنده
ورود، پروفایل، سفارشها و راهنما
۶ صفحهlogin.html
ورود با شماره موبایل و کد یکبارمصرف با شمارنده معکوس
signup.html
ساخت حساب: مشخصات، موبایل و پذیرش قوانین
profile.html
داشبورد کاربر: نام، نام خانوادگی، موبایل و آدرس پیشفرض
profile-orders.html
تاریخچه سفارش با وضعیت جاری، تحویلشده و لغوشده
profile-addresses.html
مدیریت آدرسهای ذخیرهشده
support.html
پرسشهای متداول آکاردئونی و فرم تماس
یک مجموعه کامپوننت، سه پالت. همه از توکنهای
--sp-* تغذیه میشوند؛ هیچ رنگی در کامپوننت hard-code نشده.
آنچه این قالب را از یک فروشگاه تکفروشنده متمایز میکند.
سبد را ببندید، قیمتش را بین فروشگاههای اطراف مقایسه کنید و فروشنده را انتخاب کنید.
یک کلید، کل صفحه پرداخت را عوض میکند: نقشه، زمان و هزینه ارسال.
پین قابل جابهجایی روی نقشهی برداری درونخطی؛ بدون کلید API و بدون درخواست خارجی.
هر صفحه اصلی توکنهای خودش را دارد؛ تغییر یکی روی بقیه اثر ندارد.
دسته، برند، بازه قیمت و پنج حالت مرتبسازی، سمت کاربر.
فقط ویژگیهای منطقی CSS؛ هیچ left/right فیزیکی در استایلها نیست.
HTML/CSS/JS ساده. فایل را باز کنید و کار میکند.
وزیرمتن بهصورت woff2 داخل پکیج؛ بدون وابستگی به CDN.