This commit is contained in:
Louis King
2026-02-07 14:47:12 +00:00
parent 2758cf4dd5
commit d79e29bc0a
3 changed files with 14 additions and 13 deletions

View File

@@ -124,16 +124,17 @@
to { opacity: 1; transform: translateY(0); }
}
/* Card entrance animations */
.card {
/* Card entrance animations - only for stat cards with .animate-stagger class */
.animate-stagger > .card,
.animate-stagger > .stat {
animation: card-fade-in 300ms ease-out backwards;
}
.card:nth-child(1) { animation-delay: 0ms; }
.card:nth-child(2) { animation-delay: 50ms; }
.card:nth-child(3) { animation-delay: 100ms; }
.card:nth-child(4) { animation-delay: 150ms; }
.card:nth-child(5) { animation-delay: 200ms; }
.card:nth-child(6) { animation-delay: 250ms; }
.animate-stagger > :nth-child(1) { animation-delay: 0ms; }
.animate-stagger > :nth-child(2) { animation-delay: 50ms; }
.animate-stagger > :nth-child(3) { animation-delay: 100ms; }
.animate-stagger > :nth-child(4) { animation-delay: 150ms; }
.animate-stagger > :nth-child(5) { animation-delay: 200ms; }
.animate-stagger > :nth-child(6) { animation-delay: 250ms; }
@keyframes card-fade-in {
from { opacity: 0; transform: translateY(8px); }

View File

@@ -23,7 +23,7 @@
{% endif %}
<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6 animate-stagger">
<!-- Total Nodes -->
<div class="stat bg-base-100 rounded-box shadow">
<div class="stat-figure text-primary">
@@ -62,7 +62,7 @@
</div>
<!-- Activity Charts -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8 animate-stagger">
<!-- Node Count Chart -->
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
@@ -113,7 +113,7 @@
</div>
<!-- Additional Stats -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 animate-stagger">
<!-- Recent Advertisements -->
<div class="card bg-base-100 shadow-xl">
<div class="card-body">

View File

@@ -52,7 +52,7 @@
</div>
<!-- Stats Column (stacked vertically) -->
<div class="flex flex-col gap-4">
<div class="flex flex-col gap-4 animate-stagger">
<!-- Total Nodes -->
<div class="stat bg-base-200 rounded-box">
<div class="stat-figure text-primary">
@@ -85,7 +85,7 @@
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6 animate-stagger">
<!-- Network Info Card -->
<div class="card bg-base-100 shadow-xl">
<div class="card-body">