شارژینو | Charginoشارژینو | سامانه جامع خدمات ارزی و بین‌المللی

شارژینو — نسخه دو

کتابخانه طراحی

توکن‌های پایه‌ی جهت هنری «اعتماد آرام»: پالت، تایپوگرافی، فاصله‌گذاری، شعاع و سایه. این صفحه فقط برای مرجع توسعه است و در ناوبری اصلی سایت نمایش داده نمی‌شود.

پالت رنگ

سوییچ «حالت نمایش» بالای صفحه، نمونه‌های زیر را زنده بین روشن و تیره عوض می‌کند. جدول کنار هر نمونه، مقدار hex هر دو حالت را برای مرجع نگه می‌دارد.

نمونهنامتوکنlightdark
پس‌زمینه--bg#FBFAF8#0B0F0E
سطح--surface#FFFFFF#131917
سطح فرورفته--surface-sunk#F4F1EC#0F1413
خط مرزی--border#E7E2DA#242D2A
متن--text#14110E#F2EFEA
متن کم‌رنگ--text-muted#6B645C#9AA5A1
اصلی--primary#0E6E5E#2FD4AE
اصلی (هاور)--primary-hover#0A5749#57E0C1
اصلی (نرم)--primary-soft#E4F2EE#11302A
اکسنت--accent#C98A2B#E3B45F

رنگ‌های معنایی

یکسان در هر دو مود — با سوییچ بالا تغییر نمی‌کنند، چون هدفشان خوانایی وضعیت است، نه هماهنگی با بوم.

موفقیت

#17925F

خطا

#C8362F

هشدار

#B8791B

اطلاع

#2563A8

مقیاس تایپوگرافی

اندازه‌ها بین موبایل (۳۷۵px) و دسکتاپ (۱۴۴۰px) به‌صورت fluid با clamp() درون‌یابی می‌شوند — یک توکن، بدون نیاز به کلاس جدا برای هر breakpoint.

سفر ارز شما، شفاف تا ریال آخر

Display--text-display34px → 56pxleading 1.45tracking -0.01em

سفر ارز شما، شفاف تا ریال آخر

H1--text-h128px → 40pxleading 1.45tracking -0.01em

سفر ارز شما، شفاف تا ریال آخر

H2--text-h223px → 30pxleading 1.45tracking -0.01em

سفر ارز شما، شفاف تا ریال آخر

H3--text-h319px → 22pxleading 1.45tracking 0

سفر ارز شما، شفاف تا ریال آخر

Body--text-body16px → 17pxleading 1.85tracking 0

سفر ارز شما، شفاف تا ریال آخر

Small--text-small15px → 15pxleading 1.85tracking 0

سفر ارز شما، شفاف تا ریال آخر

Caption--text-caption13px → 13pxleading 1.85tracking 0

فاصله‌گذاری

پایه ۴px. مقیاس عددی Tailwind از قبل روی همین پایه است، پس کلاس‌های استاندارد p-1…p-32 دقیقاً همین مقادیر را می‌دهند — توکن جدا لازم نبود.

4pxp-1
8pxp-2
12pxp-3
16pxp-4
24pxp-6
32pxp-8
48pxp-12
64pxp-16
96pxp-24
128pxp-32

شعاع گوشه

sm

8px

md (پیش‌فرض)

12px

lg

16px

xl

24px

full

9999px

سایه

فقط دو سطح، هر دو خنثی و کم‌کنتراست. سایه‌ی رنگی در این سیستم وجود ندارد.

sm

--shadow-sm

md

--shadow-md

لایه RTL

  • Logical properties: فقط ms-/me-/ps-/pe-/start-/end- — هرگز ml-/mr-/pl-/pr-/left-/right-.
  • آیکون جهت‌دار: کلاس .cg-icon-directional برای فلش/شورون/برگشت — میرور می‌شود. لوگو، پخش/مکث، چک‌مارک و نمودار با .cg-icon-static دست‌نخورده می‌مانند.
  • نام لاتین: نمونه: PayPal و USDT در وسط جمله فارسی نمی‌شکنند، چون داخل <bdi class="cg-latin"> ایزوله شده‌اند.
  • رشته‌ی ترکیبی: نمونه با .cg-bidi-plaintext: ۶۸,۵۰۰ تومان +۱.۲٪

کامپوننت‌ها

با props نمونه — هنوز به هیچ API متصل نیستن. هر کامپوننت تعاملی هم حالت‌های واقعی (hover/focus/active با ماوس و کیبورد) داره و هم، برای مرور سریع، یک ردیف نمایش اجباری هر حالت از طریق پراپ داخلی demoState (فقط برای همین صفحه — در کد محصول استفاده نمی‌شه).

Button

چهار variant × سه سایز؛ همه حالت‌ها زیر هم برای هر variant.

variant="primary"

پیش‌فرض
Hover
Focus
Active
Disabled
Loading

variant="secondary"

پیش‌فرض
Hover
Focus
Active
Disabled
Loading

variant="ghost"

پیش‌فرض
Hover
Focus
Active
Disabled
Loading

variant="danger"

پیش‌فرض
Hover
Focus
Active
Disabled
Loading

Badge / StatusPill

بدون حالت تعاملی — فقط tone.

خنثیاصلیعملیاتیناموفقدر انتظاراطلاعیه

Skeleton

حالت loading برای هر بخش داده‌محور — هرگز اسپینر.

EmptyState / ErrorState

هنوز سفارشی ثبت نشده

وقتی سفارش بدی، اینجا نشون داده می‌شه.

Input

پیش‌فرض

برای اطلاع‌رسانی سفارش

Hover
Focus
Disabled
Error

Select

پیش‌فرض
Hover
Focus
Disabled
Error

Textarea

پیش‌فرض
Hover
Focus
Disabled
Error

CurrencyInput

فرمت خودکار با ارقام فارسی، تابیولار، جهت داخلی ltr برای حرکت پایدار کرسر.

پیش‌فرض
تومان
Hover
تومان
Focus
تومان
Disabled
تومان
Error
تومان

Accordion

نمونه‌ی زنده — کلیک کن تا باز/بسته شه.

معمولاً کمتر از ۱۰ دقیقه، بسته به روش پرداخت.

Tabs

کلیدهای جهت‌نما هم کار می‌کنن — راست/چپ متناسب با RTL.

شارژ حساب پی‌پال، تسویه فاکتور.

StepIndicator

  1. مبلغ
  2. 2
    پرداخت
  3. 3
    تایید

Breadcrumb

Pagination

نمونه‌ی زنده — صفحه فعلی با useState کنترل می‌شه.

Table

روی md به بالا جدول واقعیه، زیر md خودکار به کارت تبدیل می‌شه — عرض مرورگر رو کم کن تا ببینی.

  • جفت ارز
    USD/IRT
    خرید
    ۶۸,۵۰۰
    فروش
    ۶۸,۹۰۰
  • جفت ارز
    EUR/IRT
    خرید
    ۷۴,۲۰۰
    فروش
    ۷۴,۶۵۰
  • جفت ارز
    USDT/IRT
    خرید
    ۶۷,۹۰۰
    فروش
    ۶۸,۱۰۰

Toast

نمونه‌ی زنده — دکمه رو بزن، پیام گوشه‌ی صفحه ظاهر می‌شه و بعد از ۵ ثانیه خودش می‌ره.

Modal / Sheet

روی دسکتاپ دیالوگ وسط صفحه، روی موبایل bottom sheet — همون یک کامپوننت، فقط CSS واکنش‌گراست.

RateCard

سه حالت: idle / loading / error.

USDدلار آمریکا
آنلاین

خرید

۶۸,۵۰۰

فروش

۶۸,۹۰۰

آخرین بروزرسانی: امروز، ۱۴:۳۲
EURیورو
آنلاین

خرید

فروش

ServiceCard

کپی بر اساس jobs-to-be-done واقعی، نه اسم انتزاعی سرویس.

هزینه آیلتس رو پرداخت کن

پرداخت مستقیم به حساب مرکز آزمون، بدون واسطه.

شروع از ۴,۲۰۰,۰۰۰ تومان

معمولاً کمتر از ۱۰ دقیقه

فاکتور سرور خارجی رو تسویه کن

Hetzner، DigitalOcean، هر ارائه‌دهنده‌ای.

شروع از ۳۵۰,۰۰۰ تومان

معمولاً کمتر از ۵ دقیقه

Calculator — نسخه‌ی نمایشی

مدل عمومی درصد-کارمزد با props نمونه — برای مستندسازی شکل/حالت‌های کامپوننت. نسخه‌ی واقعی متصل به API را پایین‌تر ببین.

دلار
کارمزد (٪۳.۵)۴ دلار
مبلغ نهایی۷,۱۲۴,۰۰۰ تومان

زمان تخمینی انجام: معمولاً کمتر از ۱۰ دقیقه

دلار
دلار

مبلغ و سرویس رو انتخاب کن

نتیجه‌ی محاسبه اینجا نشون داده می‌شه.

دلار

Calculator — متصل به API واقعی

داده از /categories و /products در زمان build گرفته شده — 0 سرویس قیمت‌گذاری‌شده در 0 دسته‌بندی. بدون درصد کارمزد ساختگی: API فیلدی برای کارمزد جدا نداره، پس «نرخ استفاده‌شده» مستقیم از تقسیم مبلغ نهایی بر مبلغ دلاری محاسبه می‌شه — عدد واقعی، نه فرضی.

فعلاً سرویس قیمت‌گذاری‌شده‌ای موجود نیست

به‌زودی برمی‌گردیم.

همون داده، سه حالت دیگه (اجباری، فقط برای این صفحه):

فعلاً سرویس قیمت‌گذاری‌شده‌ای موجود نیست

به‌زودی برمی‌گردیم.