دریافت قالب

یک قالب، سه داروخانهٔ متفاوت.

داروچین قالب HTML فارسی و راست‌چین برای داروخانه و فروشگاه سلامت است: سه صفحهٔ اصلی با سه هویت کاملاً متفاوت و ۲۶ صفحهٔ داخلی، از فروشگاه تا حساب کاربری.

صفحهٔ اصلی
۳
صفحهٔ داخلی
۲۶
خانوادهٔ فونت فارسی
۶
نیاز به build
صفر

هر خانه، هویت خودش را دارد

هر خانه رنگ، فونت، کارت محصول، هدر و فوتر خودش را دارد؛ فقط سبد خرید و منطق مشترک است.

مشاهدهٔ دمو
خانهٔ ۱

داروخانهٔ محله

برچسب نسخه، کشوی قفسه، برچسب آویز و رسید؛ صفحه از اشیای چاپی خود داروخانه ساخته شده. ارسال نسخه با کشیدن و رها کردن و بستهٔ فصلی با محاسبهٔ تخفیف.

  • حسآرام و بالینی
  • فونتکالمه + دانا
  • رنگ
مشاهدهٔ دمو
خانهٔ ۲

ویتالیتی

عنوان بزرگی که با اسکرول ثابت می‌ماند و قاب‌ها و رنگ زمینه زیرش عوض می‌شوند؛ حراج با شمارندهٔ زنده و سازندهٔ بستهٔ هدف.

  • حسپرانرژی و حراج‌محور
  • فونتامکان + وزیر
  • رنگ
مشاهدهٔ دمو
خانهٔ ۳

درما

کارت راه‌راه کنار عکس، روتین سه‌قدمی که با انتخاب نوع پوست عوض می‌شود و عکسی که هنگام خواندن ثابت می‌ماند.

  • حسپوست و زیبایی، مجله‌ای
  • فونتکارا + شبنم
  • رنگ

۲۶ صفحهٔ داخلی، همه آماده

صفحه‌های داخلی با هدر و فوتر خانهٔ ۱ ساخته شده‌اند و فقط توکن‌های رنگ و فونت را می‌خوانند؛ پس برای هر خانه قابل تغییرند. هیچ صفحهٔ خالی و نیمه‌کاره‌ای در بسته نیست.

چیزهایی که یک داروخانه واقعاً لازم دارد

نه فقط یک فروشگاه با رنگ سبز؛ هر ویژگی از کار روزانهٔ یک داروخانه آمده است.

ارسال نسخه، همان‌جایی که مشتری هست

آپلود عکس نسخه با کشیدن و رها کردن در صفحهٔ اصلی، صفحهٔ «نسخه‌های من» با وضعیت هر نسخه، تأیید داروی جایگزین و دکمهٔ تمدید.

  • آپلود با بررسی حجم فایل
  • وضعیت: در حال بررسی، آماده، ارسال‌شده
  • یادآور تمدید داروهای دائمی

سبد خرید زنده

کشوی سبد در هر صفحه، تغییر تعداد، نوار «تا ارسال رایگان» و ذخیره در مرورگر.

مسیر خرید سه‌مرحله‌ای

سبد، ارسال، پرداخت؛ کد تخفیف، بازهٔ زمانی تحویل و ارسال یخچالی ۲ تا ۸ درجه.

ورود با کد پیامکی

پنج خانهٔ کد با پرش خودکار، چسباندن کد، شمارش معکوس ارسال دوباره و ورود با رمز.

فیلتر بدون بارگذاری دوباره

دسته، قیمت، برند، تخفیف‌دار و مرتب‌سازی؛ در موبایل، کشوی فیلتر از پایین باز می‌شود.

ابزارهای تعاملی هر خانه

خانهٔ ۱
بستهٔ فصلی که با انتخاب اقلام، تخفیف را حساب می‌کند؛ شمارندهٔ پایان روز.
خانهٔ ۲
سازندهٔ بستهٔ هدف (انرژی، خواب، ایمنی، عضله، پوست)؛ حراج با درصد فروش.
خانهٔ ۳
روتین پوست بر اساس نوع پوست؛ راهنمای مواد مؤثره؛ رزرو مشاوره.

مگامنو و منوی موبایل

همهٔ دسته‌ها و زیردسته‌ها در یک نگاه؛ در موبایل، منوی کشویی با زیرمنوی بازشونده.

اعداد فارسی، همه‌جا

قیمت‌ها، شمارنده‌ها و تاریخ‌ها با ارقام فارسی و جداکنندهٔ هزارگان.

شش فونت فارسی، سه پالت رنگ

هر خانه یک فونت نمایشی و یک فونت متن دارد. فونت‌ها داخل بسته هستند و از هیچ سرویس بیرونی بارگذاری نمی‌شوند.

کالمهداروی درست، دمِ در خانه.نمایشی · خانهٔ ۱
امکانانرژی هر روزتنمایشی · خانهٔ ۲
کاراپوستت را بشناس، بعد انتخاب کن.نمایشی · خانهٔ ۳
دانا

مراقبت، از انتخاب‌های کوچک شروع می‌شود. ۱۲۳۴۵۶۷۸۹۰

متن · خانهٔ ۱ و صفحه‌های داخلی
وزیر

مراقبت، از انتخاب‌های کوچک شروع می‌شود. ۱۲۳۴۵۶۷۸۹۰

متن · خانهٔ ۲
شبنم

مراقبت، از انتخاب‌های کوچک شروع می‌شود. ۱۲۳۴۵۶۷۸۹۰

متن · خانهٔ ۳
داروخانهٔ محله
  • #173a40
  • #0b6e78
  • #d8e8e2
  • #e7dcc8
  • #f3f0e8
ویتالیتی
  • #0e1822
  • #6bb4ee
  • #ff5a1f
  • #ffb58f
  • #eaf3fb
درما
  • #1e1a19
  • #9a7440
  • #f2e6df
  • #2b2321
  • #faf5f1

اول برای موبایل

بیشتر خریدهای داروخانه با گوشی انجام می‌شود. هر بخش در عرض ۳۹۰ پیکسل ترکیب خودش را دارد؛ نه فقط جمع‌شدهٔ نسخهٔ دسکتاپ.

  • بدون اسکرول افقی در هیچ صفحه
  • دکمه‌های حداقل ۴۴ پیکسل برای انگشت
  • کشوی فیلتر، منو و سبد از لبهٔ صفحه
  • نوار خرید چسبان در صفحهٔ محصول

ساده برای توسعه‌دهنده

HTML خالص، CSS با متغیر، و دو کتابخانهٔ سبک. بدون jQuery، بدون Bootstrap و بدون مرحلهٔ build؛ فایل را باز کنید و کار کنید.

  • HTML5 معناییعنوان‌بندی درست، نقش‌ها و برچسب‌های دسترس‌پذیری، فرم‌های کامل
  • CSS Custom Propertiesهر خانه فقط توکن‌ها را تعریف می‌کند؛ رنگ، فونت، گردی گوشه
  • Alpine.js 3سبد، فیلتر، تب، کشو، شمارنده و فرم‌ها؛ حدود ۴۵ کیلوبایت
  • Swiper 12اسلایدرهای راست‌چین با تنظیم از روی data-swiper
  • بدون فونت و اسکریپت بیرونیفونت‌ها و کتابخانه‌ها داخل پوشهٔ assets هستند
  • دسترس‌پذیریفوکوس قابل دیدن، پشتیبانی کیبورد، Escape برای بستن، احترام به کاهش حرکت
.home-apothecary {
  --bg: #f3f0e8;        /* counter paper */
  --ink: #1b2d32;       /* slate ink */
  --accent: #0b6e78;    /* dispensary teal */
  --radius: 12px;
  --font-display: "Kalameh", "Dana";
  --font-text: "Dana", system-ui;
}
<article data-product data-id="p01"
  data-name="سرم ویتامین C" data-price="685000"
  data-img="…">
  …
  <button @click="$store.shop.addFrom($el)">
    افزودن به سبد
  </button>
</article>
html/
├─ index.html  vitality.html  derma.html
├─ shop.html  product.html  cart.html …
├─ assets/
│  ├─ css/  daroochin.css + one file per home
│  ├─ js/   daroochin.js  alpine.js  swiper
│  └─ fonts/
└─ scripts/localize-images.mjs

در بسته چه هست

همه‌چیز برای شروع، به‌علاوهٔ راهنمای فارسی.

  • ۳۰ فایل HTMLسه خانه، ۲۶ صفحهٔ داخلی و همین صفحهٔ دمو
  • ۷ فایل CSS و ۸ فایل JSکدهای خود قالب کامنت‌گذاری‌شده و بدون فشرده‌سازی؛ Alpine و Swiper به‌صورت محلی
  • فونت‌های وبدانا، کالمه، امکان، وزیر، کارا و شبنم
  • اسکریپت دانلود عکس‌هاعکس‌های رایگان Unsplash را داخل پروژه ذخیره می‌کند
  • راهنما و DESIGN.mdساختار، توکن‌ها و آنچه پیش از انتشار باید جایگزین شود

پرسش‌ها

برای اجرا به سرور یا Node نیاز دارم؟

نه. فایل‌ها را مستقیم در مرورگر باز کنید. Node فقط برای اسکریپت اختیاری دانلود عکس‌ها لازم است.

می‌توانم صفحه‌های داخلی را با سبک خانهٔ ۲ یا ۳ داشته باشم؟

بله. صفحه‌های داخلی فقط توکن‌ها را می‌خوانند. فایل CSS خانهٔ مورد نظر و هدر و فوترش را جایگزین کنید.

سبد خرید به بک‌اند وصل است؟

سبد در مرورگر کار می‌کند تا تجربه کامل دیده شود. برای فروشگاه واقعی، توابع Alpine.store('shop') را به API خود وصل کنید.

عکس‌ها را می‌توانم در پروژهٔ تجاری استفاده کنم؟

عکس‌ها از Unsplash و با مجوز استفادهٔ تجاری رایگان هستند. برای کارت محصول، عکس واقعی بستهٔ محصولات خودتان را جایگزین کنید.

مجوز فونت‌ها چطور است؟

وزیر و شبنم متن‌باز هستند. دانا، کالمه، امکان و کارا تجاری‌اند؛ برای انتشار عمومی، مجوز استفادهٔ وب آن‌ها را تهیه کنید.

کدام مرورگرها پشتیبانی می‌شوند؟

نسخه‌های جدید کروم، فایرفاکس، سافاری و اج، روی دسکتاپ و موبایل.

داروخانه‌تان را امروز باز کنید.

سه خانه، ۲۶ صفحه، شش فونت؛ آمادهٔ اتصال به فروشگاه شما.