feat: Добавить анимации и улучшения UX/UI в компоненты приложения, включая плавные переходы, эффекты при наведении и анимации для модальных окон. Обновить карточки и таблицы с новыми анимациями для улучшения визуального восприятия и доступности.

2025-10-02 19:17:25 +07:00
parent cd5e169bc6
commit 8952c4a897
12 changed files with 1267 additions and 143 deletions
@@ -189,44 +189,52 @@ function Dashboard() {
      {/* Основные метрики */}
      <div className="row g-3 mb-4">
        <div className="col-md-3">
-          <StatCard
-            icon={IconWorld}
-            color="blue"
-            value={loading ? '...' : (stats.domainsCount ?? '—')}
-            title="Доменов"
-            subtitle="Всего доменов в системе"
-            to="/domains"
-          />
+          <div className="animate-in">
+            <StatCard
+              icon={IconWorld}
+              color="blue"
+              value={loading ? '...' : (stats.domainsCount ?? '—')}
+              title="Доменов"
+              subtitle="Всего доменов в системе"
+              to="/domains"
+            />
+          </div>
        </div>
        <div className="col-md-3">
-          <StatCard
-            icon={IconNetwork}
-            color="green"
-            value={loading ? '...' : (stats.ipRangesCount ?? '—')}
-            title="IP-диапазонов"
-            subtitle="Всего IP диапазонов"
-            to="/ip-ranges"
-          />
+          <div className="animate-in" style={{animationDelay: '0.1s'}}>
+            <StatCard
+              icon={IconNetwork}
+              color="green"
+              value={loading ? '...' : (stats.ipRangesCount ?? '—')}
+              title="IP-диапазонов"
+              subtitle="Всего IP диапазонов"
+              to="/ip-ranges"
+            />
+          </div>
        </div>
        <div className="col-md-3">
-          <StatCard
-            icon={IconNetwork}
-            color="purple"
-            value={loading ? '...' : (stats.asnsCount ?? '—')}
-            title="AS"
-            subtitle="Всего Autonomous Systems"
-            to="/asns"
-          />
+          <div className="animate-in" style={{animationDelay: '0.2s'}}>
+            <StatCard
+              icon={IconNetwork}
+              color="purple"
+              value={loading ? '...' : (stats.asnsCount ?? '—')}
+              title="AS"
+              subtitle="Всего Autonomous Systems"
+              to="/asns"
+            />
+          </div>
        </div>
        <div className="col-md-3">
-          <StatCard
-            icon={IconServer}
-            color="orange"
-            value={loading ? '...' : (stats.serversCount ?? '—')}
-            title="Серверов"
-            subtitle="Всего серверов"
-            to="/servers"
-          />
+          <div className="animate-in" style={{animationDelay: '0.3s'}}>
+            <StatCard
+              icon={IconServer}
+              color="orange"
+              value={loading ? '...' : (stats.serversCount ?? '—')}
+              title="Серверов"
+              subtitle="Всего серверов"
+              to="/servers"
+            />
+          </div>
        </div>
      </div>