feat: redesign admin panel with glass morphism UI, animated background, and stats bar

- Rewrite AdminPanel with cosmic floating orbs background using theme colors
- Add stats bar: uptime, bot version, cabinet version, trial/paid counts from API
- Glass morphism cards with 3D tilt effect (rAF-throttled) and entry animations
- Live search with Cmd+K shortcut, highlight matches, permission-aware filtering
- Register Tailwind `light:` variant for proper light theme support
- Mobile optimizations: reduced orbs (3), lower blur (80px), compact 2-col stats
- Telegram MiniApp safe area support via useTelegramSDK
- Full accessibility: aria-hidden on decorative SVGs, aria-labels, role="status"
- React.memo on StatsBar, GlassCard, CosmosBackground for render performance
- Memo-stable section refs via Set<id> pattern to preserve GlassCard memo during search
- i18n keys added to all 4 locales (ru, en, zh, fa)
This commit is contained in:
Fringg
2026-03-28 21:17:51 +03:00
parent aa989a6ade
commit 0bb064e2c0
7 changed files with 1210 additions and 679 deletions

View File

@@ -1117,6 +1117,17 @@
"panel": {
"title": "Admin Panel",
"subtitle": "System management",
"statsUptime": "Uptime",
"statsBot": "Bot",
"statsCabinet": "Cabinet",
"statsTrials": "Trials",
"statsPaid": "Paid",
"statsOnline": "Online",
"statsToday": "today",
"searchPlaceholder": "Search...",
"searchEmpty": "Nothing found",
"searchEmptyHint": "Try a different query",
"searchClear": "Clear search",
"dashboardDesc": "Statistics and system monitoring",
"ticketsDesc": "Handle user support tickets",
"settingsDesc": "System settings and parameters",

View File

@@ -951,6 +951,17 @@
"panel": {
"title": "پنل مدیریت",
"subtitle": "مدیریت سیستم",
"statsUptime": "آپتایم",
"statsBot": "ربات",
"statsCabinet": "کابینت",
"statsTrials": "آزمایشی",
"statsPaid": "پولی",
"statsOnline": "آنلاین",
"statsToday": "امروز",
"searchPlaceholder": "جستجو...",
"searchEmpty": "چیزی پیدا نشد",
"searchEmptyHint": "عبارت دیگری امتحان کنید",
"searchClear": "پاک کردن جستجو",
"dashboardDesc": "آمار و مانیتورینگ سیستم",
"ticketsDesc": "مدیریت تیکت‌های کاربران",
"settingsDesc": "تنظیمات و پارامترهای سیستم",

View File

@@ -1138,6 +1138,17 @@
"panel": {
"title": "Панель администратора",
"subtitle": "Управление системой",
"statsUptime": "Аптайм",
"statsBot": "Бот",
"statsCabinet": "Кабинет",
"statsTrials": "Триалы",
"statsPaid": "Платные",
"statsOnline": "Онлайн",
"statsToday": "сегодня",
"searchPlaceholder": "Поиск...",
"searchEmpty": "Ничего не найдено",
"searchEmptyHint": "Попробуйте другой запрос",
"searchClear": "Очистить поиск",
"dashboardDesc": "Статистика и мониторинг системы",
"ticketsDesc": "Обработка обращений пользователей",
"settingsDesc": "Настройки системы и параметры",

View File

@@ -951,6 +951,17 @@
"panel": {
"title": "管理面板",
"subtitle": "系统管理",
"statsUptime": "运行时间",
"statsBot": "机器人",
"statsCabinet": "控制台",
"statsTrials": "试用",
"statsPaid": "付费",
"statsOnline": "在线",
"statsToday": "今日",
"searchPlaceholder": "搜索...",
"searchEmpty": "未找到结果",
"searchEmptyHint": "请尝试其他关键词",
"searchClear": "清除搜索",
"dashboardDesc": "统计和系统监控",
"ticketsDesc": "处理用户工单",
"settingsDesc": "系统设置和参数",

File diff suppressed because it is too large Load Diff

View File

@@ -1642,3 +1642,82 @@ input[type='checkbox']:hover:not(:checked) {
.light .sheet-handle {
@apply bg-champagne-400;
}
/* ── Admin Panel: Floating Orbs Background ── */
@keyframes adminOrbFloat {
0% {
transform: translate(0, 0) scale(1);
}
33% {
transform: translate(30px, -40px) scale(1.05);
}
66% {
transform: translate(-20px, 30px) scale(0.95);
}
100% {
transform: translate(10px, -20px) scale(1.02);
}
}
@keyframes adminPulse {
0%,
100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.4;
transform: scale(0.85);
}
}
@keyframes adminCardEnter {
from {
opacity: 0;
transform: translateY(20px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes adminItemEnter {
from {
opacity: 0;
transform: translateX(-8px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.admin-orb {
position: absolute;
border-radius: 50%;
filter: blur(120px);
pointer-events: none;
animation: adminOrbFloat 20s ease-in-out infinite alternate;
}
.light .admin-orb {
filter: blur(140px);
opacity: 0.15 !important;
}
/* Mobile: reduce orb count and blur for performance */
@media (max-width: 1023px) {
.admin-orb {
filter: blur(80px);
}
.admin-orb:nth-child(n + 4) {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.admin-orb {
animation: none;
}
}