Joseph.Rawlings/Virtnet.bond
Private
Public Access
1
0
Fork 0
Code Activity

feat: enhance live telemetry chart with animation for better visual feedback

Browse Source
This commit is contained in:
Joseph.Rawlings
2025-12-22 19:45:20 -05:00
parent d2fe4b8c55
commit 9d08ca7b9d
1 changed files with 10 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
themes/lucentui/views/home.blade.php
View File

@@ -209,10 +209,10 @@
</div> </div>
<h3 class="text-2xl font-bold text-color-base mb-2">Live Telemetry</h3> <h3 class="text-2xl font-bold text-color-base mb-2">Live Telemetry</h3>
<p class="text-color-muted leading-relaxed mb-6">Monitor CPU, memory, network, and disk I/O with interactive charts. Track performance over hours, days, weeks, or months.</p> <p class="text-color-muted leading-relaxed mb-6">Monitor CPU, memory, network, and disk I/O with interactive charts. Track performance over hours, days, weeks, or months.</p>
<!-- Mock Chart --> <!-- Mock Chart - Animated -->
<div class="h-24 flex items-end gap-1 p-4 bg-background/50 rounded-xl"> <div class="h-24 flex items-end gap-1 p-4 bg-background/50 rounded-xl">
@for($i = 0; $i < 24; $i++) @for($i = 0; $i < 24; $i++)
<div class="flex-1 bg-gradient-to-t from-primary to-primary/50 rounded-t transition-all hover:from-primary/90" style="height: {{ rand(20, 100) }}%"></div> <div class="flex-1 bg-gradient-to-t from-primary to-primary/50 rounded-t chart-bar" style="--bar-height: {{ rand(25, 95) }}%; animation-delay: {{ $i * 0.1 }}s;"></div>
@endfor @endfor
</div> </div>
</div> </div>
@@ -675,4 +675,12 @@
.scrollbar-hide::-webkit-scrollbar { .scrollbar-hide::-webkit-scrollbar {
display: none; display: none;
} }
@keyframes chartPulse {
0%, 100% { height: var(--bar-height); }
50% { height: calc(var(--bar-height) * 0.6); }
}
.chart-bar {
height: var(--bar-height);
animation: chartPulse 2s ease-in-out infinite;
}
</style> </style>