کیس‌استادی · وب‌اپلیکیشن مالی
اسکین کامل موبایل‌فرست برای صندوق قرض‌الحسنه: اعتماد بانکی، تم سبز و طلایی، و قرارداد یکپارچه‌سازی jQuery بدون فریمورک.
چالش و راه‌حل
کارفرما به تمپلیت‌های استاتیک نیاز داشت که تیم بک‌اند بتواند با تزریق HTML از طریق jQuery محتوا را پر کند — بدون از بین رفتن استایل و بدون وابستگی به React یا Tailwind.
اپ‌های مالی معمولاً یا فریمورک‌محورند و برای تیم‌های سنتی سخت‌اند، یا استایل‌شان با تعویض فرگمنت‌های داینامیک می‌شکند. اینجا باید حس بام / مهر ایران حفظ می‌شد و در عین حال هر منو، فرم و لیست با id ثابت برای تزریق آماده می‌بود.
اولویت با کیفیت بصری، RTL فارسی، موبایل‌فرست، و قابلیت نصب به‌صورت PWA بود.
یک پوستهٔ کامل HTML/CSS/JS با توکن‌های طراحی، کامپوننت‌های کلاس‌محور، صفحات ورود تا انتقال وجه، و API جاوااسکریپتی FundUI.bind() برای اتصال مجدد رویدادها بعد از inject.
سه دور ادیت کارفرما روی طرح تأییدشده اعمال شد — از منوی آواتار و کشو تا بج‌های تعداد و حالت‌های چیدمان کاشی‌ها.
آنچه ساخته شد
از هویت بصری تا قرارداد یکپارچه‌سازی — همه چیز برای تحویل به تیم بک‌اند آماده است.
پالت زمردی برای اعتماد، طلای کهنه فقط برای تأکید؛ تایپوگرافی Vazirmatn / IRANSans و حس صندوق — نه فین‌تک عمومی.
هدر با آواتار و منوی کاربر، همبرگر با کشو از راست، نوار پایین با لوگوی صندوق، و بج قرمز برای تعداد حساب‌ها و تسهیلات.
اسکرولر کارت، مخفی/نمایش موجودی، کپی شماره کارت، بروزرسانی با حالت چرخش، خدمات پرکاربرد و بنر با کاروسل.
ورود، ثبت‌نام، انتقال کارت‌به‌کارت، حساب‌ها، تراکنش‌ها، پروفایل و ارسال پیام به صندوق — با فرم‌های خوانا و تأیید شفاف.
شناسه‌های ثابت روی اسلات‌ها؛ بعد از $('#id').html(...) استایل حفظ می‌شود و FundUI.bind رویدادها را دوباره وصل می‌کند.
مانیفست، سرویس‌ورکر، صفحه آفلاین، خطاهای ۴۰۴/۵۰۰، و پیشنهاد نصب قابل تنظیم برای Android و راهنمای iOS.
گالری صفحات
پیش‌نمایش زنده داخل قاب iPhone 14 Pro Max (۴۳۰×۹۳۲) — افقی بکشید تا بقیه را ببینید.
احراز هویت و کپچا
کارت‌ها و خدمات
فرم انتقال وجه
فهرست و عملیات
صورتحساب و فیلتر
اطلاعات کاربر
ارتباط با پشتیبانی
عضویت کاربر جدید
فهرست تحویل
روی هر مورد کلیک کنید تا همان فایل HTML را در تب جدید ببینید.
معماری فنی
استک عمداً بدون فریمورک نگه داشته شد تا با محیط کارفرما هم‌خوان باشد. توکن‌های CSS، کلاس‌های پایدار، و مستند یکپارچه‌سازی بخشی از تحویل‌اند.
مسیر پروژه
فرآیند کوتاه، شفاف و مبتنی بر تأیید کارفرما در هر مرحله.
تأیید جهت طراحی ورود و انتقال با تم سبز و طلایی قبل از شروع کامل.
شل مشترک، متغیرهای رنگ و فاصله، کامپوننت‌های قابل تزریق.
خانه، حساب، تراکنش، پروفایل، پیام، خطا و PWA.
سه دور بازخورد روی طرح تأییدشده؛ دمو آنلاین روی دامنه اختصاصی.
دموی زنده روی سرور امن در دسترس است. برای مرور آفلاین، پوشه final/ را با یک سرور استاتیک ساده باز کنید.