پنل مدیریت موبایل‌پسند — تم فراورد

مدیریت از روی گوشی، بدون از دست دادن جدول

رنگ‌ها، شعاع‌ها و دکمه‌های سه‌بعدی مستقیماً از سیستم طراحی مخزن gamification-faraward آمده‌اند. نکتهٔ اصلی این نمونه ساختاری است: جدول بازیکنان یک بار نوشته شده و با container query در عرض کم به کارت تبدیل می‌شود — پس صفحهٔ موبایل و قاب دسکتاپِ پایین، دقیقاً یک کد هستند و از هم جدا نمی‌افتند.

۹:۴۱

داشبورد

جمعه ۱ مرداد ۱۴۰۵
م‌ر
کمپین فعال جشنوارهٔ تابستان
۶۸٪ تکمیل۱۲ روز مانده
۳٬۴۸۰بازیکن فعال
۲٫۴مامتیاز توزیع‌شده
۱۸۶جایزهٔ تحویل‌شده
۶۸٪نرخ تکمیل
صدرنشینان هفته
سارا کریمیسطح ۹۱۸٬۷۵۰
نیلوفر رستمیسطح ۷۱۲٬۴۸۰
زهرا احمدیسطح ۶۱۱٬۰۵۰
۱ · داشبورد کارت کمپین همان دکمهٔ سه‌بعدی سیستم خودشان است؛ لبهٔ تیرهٔ پایین از توکن -darker می‌آید.
۹:۴۱

بازیکنان

۳٬۴۸۰ نفر
+
نام یا شمارهٔ بازیکن
۲ بازیکن انتخاب شده
بازیکنامتیازوضعیتآخرین فعالیتکمپین
سارا کریمیسطح ۹ ۱۸٬۷۵۰ فعال ۱۰ دقیقه پیش جشنوارهٔ تابستان
امیر صادقیسطح ۵ ۹٬۳۲۰ در انتظار جایزه دیروز جشنوارهٔ تابستان
نیلوفر رستمیسطح ۷ ۱۲٬۴۸۰ فعال ۲ ساعت پیش جشنوارهٔ تابستان
محمد نوریسطح ۳ ۴٬۱۰۰ غیرفعال ۱۲ روز پیش
۲ · بازیکنان همان جدولِ پایین صفحه است، فقط در عرض کم. انتخاب گروهی و اعطای امتیاز روی گوشی هم کار می‌کند.
۹:۴۱

بازیکنان

۳٬۴۸۰ نفر
+
نام یا شمارهٔ بازیکن
سارا کریمیسطح ۹ ۱۸٬۷۵۰
امیر صادقیسطح ۵ ۹٬۳۲۰

فیلترها

وضعیت
سطح
کمپین
۳ · فیلترها فیلترها در شیت پایینی، نه منوی بالا — دکمهٔ اصلی تعداد نتیجه را از قبل می‌گوید.
بازیکنان ۳٬۴۸۰ نفر
بازیکنامتیازوضعیتآخرین فعالیتکمپین
سارا کریمیسطح ۹ ۱۸٬۷۵۰ فعال ۱۰ دقیقه پیش جشنوارهٔ تابستان
امیر صادقیسطح ۵ ۹٬۳۲۰ در انتظار جایزه دیروز جشنوارهٔ تابستان
نیلوفر رستمیسطح ۷ ۱۲٬۴۸۰ فعال ۲ ساعت پیش جشنوارهٔ تابستان
زهرا احمدیسطح ۶ ۱۱٬۰۵۰ تازه‌وارد ۵ ساعت پیش چالش پاییز
محمد نوریسطح ۳ ۴٬۱۰۰ غیرفعال ۱۲ روز پیش

یک جدول، دو نمایش. قاب بالا و جدول پایین یک کامپوننت‌اند؛ @container (max-width: 620px) هر ردیف را به کارت برچسب‌دار تبدیل می‌کند. نام و وضعیت همیشه دیده می‌شوند و صفحه هرگز افقی اسکرول نمی‌شود.
دو نکته از خود مخزن. اول اینکه رنگ اصلی‌شان #5246E5 واقعاً خوب انتخاب شده — ۶٫۲۴ با متن سفید — ولی رنگ‌های وضعیت با متن سفید می‌افتند (#F59E0B فقط ۲٫۱۵ و #10B981 فقط ۲٫۵۴)، پس این‌جا نشان‌ها با جفتِ خودِ سیستم ساخته شده‌اند: متنِ -darker روی زمینهٔ -soft که هر پنج حالت را بین ۴٫۶ تا ۷٫۸ می‌رساند. دوم اینکه packages/ui/src/tokens.ts رنگ برند را #7c3aed ثبت کرده ولی پروتوتایپ #5246E5 است — دو مقدار متفاوت برای یک برند که بهتر است یکی شود.