بانک ملی ایرانکارت قرض‌الحسنه
6037 9918 4512 8765
دارندهمحمد رضایی
UI Kit · v1.0
راهنمای جامع المان‌ها
سبز زمردی اعتماد، طلای کهنه برای تأکید، و سطوح گرم کاغذی — همه‌چیز برای ساخت یک اپلیکیشن موبایل قرض‌الحسنه استاندارد و یکپارچه.
توکن‌های طراحی (Design Tokens)
پالت برند، فاصله‌گذاری و سایه‌ها — پایه یکپارچگی بصری در تمام صفحات.
رنگ‌های برند
سبز اصلی
--greenسبز تیره
--green-darkسبز ملایم
--green-softطلایی
--goldطلایی روشن
--gold-brightکرم
--creamمتن
--inkمتن ثانویه
--mutedرنگ‌های معنایی (Semantic)
خطر
--dangerفیروزه‌ای
--tealخط جداکننده
--lineسطح سفید
--whiteشعاع گوشه و سایه
8px
12px
16px
20px
full
xs
sm
md
lg
فاصله‌گذاری (Spacing)
4
8
12
16
24
32
تایپوگرافی
فونت IRANSans با اعداد جدولی (.nums) برای مبالغ و تاریخ.
22px
موجودی حساب
18px
عنوان صفحه
16px
متن بدنه — سامانه قرض‌الحسنه توسعه عصر شمال
14px
برچسب فیلد و دکمه
12px
توضیحات کمکی و زمان‌بندی
10px
برچسب‌های کوچک و nav
اعداد فارسی
۱۲,۵۴۰,۰۰۰ ریال · ۱۴۰۳/۰۵/۳۰ · 6037 9918 4512 8765
دکمه‌ها (Buttons)
انواع اصلی
اندازه‌ها
حالت‌ها
کلاس is-spinning روی .btn-refresh مثل is-loading دکمه را غیرفعال و در حال چرخش نگه می‌دارد تا خودتان کلاس را بردارید.
دکمه‌های کمکی
آیکون‌باتن
ورودی‌ها (Form Inputs)
برچسب با نوار طلایی، فوکوس سبز+طلایی، و المان‌های اختصاصی صندوق.
Text & Number
معادل ۰ تومان · + → ۰۰۰ · − → ۰۰
تزریق داینامیک (FundUI.bind / rebind)
اگر المان‌ها را با jQuery یا حتی با Paste دستی HTML به DOM اضافه می‌کنید، بعد از inject یکی از این‌ها را از کنسول مرورگر صدا بزنید (بدون نیاز به jQuery):
// کل صفحه — همهٔ کپی، تاریخ، مانده، مبلغ، بنر، منو، …
FundUI.bind();
// فقط یک ظرف
FundUI.bind('#my-form');
// اگر HTML را از Inspect کپی کردید (data-fb-* همراه آمده) حتماً rebind:
FundUI.rebind('#my-form');
// معادل:
FundUI.bind('#my-form', { force: true });
پوشش بر اساس attribute/کلاس: [data-copy]، [data-toggle-balance]، [data-input-date]، [data-date-picker-trigger]، .mnmoney / [data-input-amount]، [data-input-pan]، [data-input-national]، [data-carousel]، .btn-refresh، منوی drawer و …
بروزرسانی سرور: روی دکمه classList.add('is-spinning') بگذارید؛ بعد از پاسخ سرور classList.remove('is-spinning').
رمز عبور (pass-wrap)
Select & Textarea
Checkbox & OTP
رمز ۵ تا ۸ رقمی پیامک‌شده
بلوک امنیتی (secure-block)
اطلاعات امنیتی کارت
CVV2 و تاریخ انقضا
کپچا
حالت خطا
شماره موبایل باید ۱۱ رقم باشد
کارت‌ها (Cards)
Hero خلاصه (page-hero)
۲ حساب فعال · آخرین بروزرسانی امروز
مجموع باقیمانده: ۴۵,۰۰۰,۰۰۰ ریال
کارت بانکی
بانک ملتکارت جام
6104 3378 9012 3456
دارندهمحمد رضایی
کارت حساب (acct-card)
حساب پس‌اندازشماره ۱۰۲۴۵۶۷۸۹۰
فعال
IR12 3456 7890 1234 5678 9012 34
کارت وام (loan-card)
وام قرض‌الحسنهاقساط ماهانه · ۱۲ ماه
تأیید شده
باقیمانده۱۵,۰۰۰,۰۰۰ ریال
۶۵٪ پرداخت شده
لیست‌ها و ردیف‌ها
تراکنش (tx-row)
انتقال به کارت۱۴۰۳/۰۵/۲۰ · ۱۰:۳۰
−۵۰۰,۰۰۰
واریز حق عضویت۱۴۰۳/۰۵/۱۸ · ۱۴:۱۵
+۱,۲۵۰,۰۰۰
تنظیمات (set-row)
مخاطبین (contact-row)
ععلی
سسارا
ممریم
+جدید
کاشی خدمات (Service Tiles)
دو استایل آیکون: رنگی (پرکاربرد) و ملایم (soft). برای چیدمان بیش از ۴ آیتم به بخش حالت‌های چیدمان مراجعه کنید.
پرکاربرد — رنگی
کارت به کارت
خرید شارژ
قبوض
تسهیلات
ملایم — Soft
صورتحساب
مانده کارت
حالت‌های چیدمان (Layout Modes)
دو الگو برای سکشن‌های خدمات و بنر. روی صفحه اصلی (index.html) حالت B برای کاشی‌ها و بنر با تایمر فعال است. برای تعویض، کلاس‌ها و attributeهای زیر را عوض کنید.
کاشی خدمات — بیش از ۴ آیتم
tile-row is-scroll
کارت به کارت
خرید شارژ
قبوض
تسهیلات
یادآوری
اسکرول دستی افقی؛ نقطه‌ها تعداد «صفحه» را نشان می‌دهند. بدون تایمر خودکار.
<div class="tile-row is-scroll">…</div>
tile-row is-wrap
کارت به کارت
خرید شارژ
قبوض
تسهیلات
یادآوری
همه دکمه‌ها بدون اسکرول دیده می‌شوند. آیتم پنجم به ردیف دوم می‌رود. پیشنهاد کارفرما.
<div class="tile-row is-wrap">…</div>
بنر اطلاع‌رسانی
data-carousel
کاربر با لمس/درگ یا کلیک روی نقطه‌ها جابه‌جا می‌شود. بدون تایمر.
<div data-carousel> <div class="banner-row" data-carousel-track>…</div> <div class="dots" data-carousel-dots></div> </div>
data-carousel-autoplay="5000"
هر ۵ ثانیه اسلاید بعدی. با لمس/هاور متوقف می‌شود. نقطه‌ها برای اسلاید فعال.
<div data-carousel data-carousel-autoplay="5000">…</div>
برچسب‌ها و نشان‌ها
Pill
فعال تأیید شده منقضی پیش‌نویس ۳ مورد
Count Chip & Badge
۲ ✓ اعلان ۵
آواتار
م.ر
مودال‌ها (Modals)
۱۲ الگوی مودال برای تأیید مالی، فرم، هشدار، action sheet و رسید — bottom sheet موبایل + dialog مرکزی.
تأیید انتقال
تأیید عملیات مالی · هدر سبز
یادداشت
ورودی متنی · هدر ساده
مرکز صفحه · آیکون info
نتیجه عملیات · شماره پیگیری
موجودی ناکافی · تأیید ادامه
خطای سیستم · تلاش مجدد
Confirm / Cancel کنار هم
خروج
خروج · حذف · لغو حساس
رمز پویا
خلاصه + رمز پویا · هدر طلایی
لیست اقدامات سریع
در حال پردازش تراکنش
رسید تراکنش
رسید کامل · جزئیات زیاد
کلاس‌های Modifier
.modal.is-center — dialog مرکزی
.modal.is-full — تمام‌صفحه
.modal-h.is-gold / .is-danger / .is-warning / .is-plain
.modal-actions.is-row — دو دکمه افقی
.modal-handle — دستگیره bottom sheet
بازخورد (Feedback)
Alert
پیام اطلاع‌رسانی — عملیات در حال پردازش است.
عملیات با موفقیت انجام شد.
توجه: موجودی کافی نیست.
خطا در انجام عملیات — دوباره تلاش کنید.
Toast
نتیجه موفق (Result)
انتقال موفق
REF-۱۴۰۳۰۵۲۰-۸۴۲۱
نمایش داده
جدول (Table)
| تاریخ | شرح | مبلغ | وضعیت |
|---|---|---|---|
| ۱۴۰۳/۰۵/۲۰ | واریز | +۱٬۲۵۰٬۰۰۰ | تأیید |
| ۱۴۰۳/۰۵/۱۸ | برداشت | −۵۰۰٬۰۰۰ | ثبت |
خلاصه (Summary)
مبلغ انتقال۵۰۰,۰۰۰ ریال
کارمزد۰ ریال
مبلغ نهایی۵۰۰,۰۰۰ ریال
نوار پیشرفت (Progress)
وضعیت‌ها (States)
خالی (Empty State)
تراکنشی یافت نشد
هنوز گردش حسابی ثبت نشده. پس از اولین تراکنش، اینجا نمایش داده می‌شود.
اسکلتون (Skeleton Loading)
صفحه وضعیت (Status Screen)
اتصال برقرار نیست
لطفاً اتصال اینترنت خود را بررسی کنید.