کارت
قالب HTML راست‌چین برای فروشگاه‌هایی که اشتراک چت‌جی‌پی‌تی، کانوا، اسپاتیفای و سرویس‌های جهانی دیگر را با پرداخت تومانی می‌فروشند. سه صفحه اول متفاوت، بیست صفحه داخلی و بدون هیچ مرحله نصب.
سه صفحه اول با سه فونت، سه پالت و سه چیدمان که هیچ بخشی را با هم شریک نیستند. یکی را انتخاب کنید؛ همین صفحه هم فونت و رنگ‌های آن را می‌گیرد.
باز کردن این صفحه اول
محصول، سبد، تحویل، پرداخت، تأیید سفارش، ورود، پنل کاربری با نُه صفحه، مجله، مقاله، درباره ما، تماس و قوانین؛ همه با یک سیستم طراحی.
افزودن به سبد، شمارنده زنده در نوار بالا، سبدی که بین صفحه‌ها می‌ماند و جمعی که درست حساب می‌شود. مسیر خرید از سبد تا اطلاعات تحویل، پرداخت و تأیید سفارش کامل است و فقط به درگاه شما وصل نشده.
دانا با اعداد فارسی، ایران‌یکان و کلمه، هر سه به‌صورت woff2 داخل بسته. بدون گوگل فونت، پس با فیلتر یا قطعی هم درست نمایش داده می‌شوند. اندازه‌ها فقط پنج پله‌اند و فاصله خطوط برای متن فارسی تنظیم شده.
همه رنگ‌ها و اندازه‌ها در یک فایل تعریف شده‌اند. با عوض کردن سه مقدار، دکمه‌ها، متن و فوتر رنگ برند شما را می‌گیرند. صفحه اول کارت و همه صفحه‌های داخلی تم تاریک هم دارند.
۳۷ عکس واقعی در سه برش افقی، عمودی و مربع با فرمت WebP، آیکون‌های Phosphor به‌صورت فونت محلی و نشان ۱۵ سرویس برای ردیف‌های قیمت. هر محصول یک اسلایدر چهار عکسی دارد.
HTML، CSS و Alpine.js. فایل index.html را مستقیم در مرورگر باز کنید و روی هر هاست استاتیکی بگذارید. هدر و فوتر مشترک با یک دستور در همه صفحه‌ها به‌روز می‌شوند.
زمان‌ها تخمینی‌اند؛ مرحله آخر به برنامه‌نویس سمت سرور نیاز دارد.
| صفحه اول | کارت | index.html |
|---|---|---|
| کاتالوگ | index-alt.html | |
| پوستر | index-dark.html | |
| خرید | محصول | product.html |
| سبد خرید | cart.html | |
| اطلاعات تحویل | shipping.html | |
| پرداخت و تأیید | payment.html | |
| حساب | ورود و عضویت | login-singup.html |
| پنل کاربری، نُه صفحه | profile.html | |
| محتوا | مجله و مقاله | blog.html |
| درباره ما | about.html | |
| تماس | contact.html | |
| قوانین و بازگشت وجه | terms.html |
نه. فایل‌ها HTML، CSS و جاوااسکریپت ساده‌اند. index.html را مستقیم در مرورگر باز کنید؛ برای انتشار، هر هاست استاتیک یا Apache و Nginx کافی است.
به‌صورت نمایشی. سبد، ورود و پرداخت داده را در مرورگر نگه می‌دارند تا کل مسیر خرید دیده شود. برای فروش واقعی باید به بک‌اند و درگاه پرداخت خودتان وصل شوند؛ جای این اتصال در راهنما مشخص شده است.
بله. هر صفحه اول CSS جداگانه دارد. صفحه‌ای را که لازم ندارید با فایل CSS آن حذف کنید و لینکش را از فوتر بردارید.
همه رنگ‌ها و اندازه‌ها در pc-tokens.css توکن هستند. برای رنگ برند، سه مقدار --ink، --accent و --field-1 را عوض کنید. فونت‌ها با یک @font-face در بالای همان فایل جایگزین می‌شوند.
در یک فایل: assets/js/premium.js. هر سرویس نام، پلن‌ها، قیمت به تومان، ویژگی‌ها و پرسش‌های خودش را دارد و همه صفحه‌ها از همین داده ساخته می‌شوند.
عکس‌ها از Unsplash با مجوز استفاده آزادند و فهرستشان در CREDITS.md آمده است. نشان سرویس‌ها علامت تجاری صاحبانشان است؛ فقط برای معرفی همان سرویس از آن‌ها استفاده کنید.
هر دو در همین بسته‌اند؛ چیزی برای نصب نیست.