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

@@ -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;
}
}