Joseph.Rawlings
6440a24390
- Implemented a button for toggling between dark and light modes in the navigation component. - Adjusted sidebar width and improved active link indicators with shadows for better visibility. - Updated layout colors for a more vibrant and cohesive theme, focusing on a "Pure Neutral Black + Neon" aesthetic. - Refined ambient gradient accents for improved content readability across devices. - Enhanced console layout for better responsiveness and user experience.
168 lines
6.0 KiB
PHP
168 lines
6.0 KiB
PHP
<div class="container mx-auto px-4 py-8 sm:px-6 lg:px-8">
|
|
<!-- Custom CSS for animations -->
|
|
<style>
|
|
@keyframes status-pulse {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 0.7;
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
|
|
@keyframes status-ping {
|
|
0% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
75%, 100% {
|
|
transform: scale(1.5);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.status-online {
|
|
animation: status-pulse 2s ease-in-out infinite;
|
|
box-shadow: 0 0 10px rgba(34, 197, 94, 0.5);
|
|
}
|
|
|
|
.status-offline {
|
|
animation: status-ping 1.5s ease-in-out infinite;
|
|
box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
|
|
}
|
|
</style>
|
|
|
|
<!-- Header -->
|
|
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-8">
|
|
<div>
|
|
<h1 class="text-3xl font-bold ">Services Availability</h1>
|
|
</div>
|
|
<div class="mt-4 sm:mt-0">
|
|
<button
|
|
wire:click="refreshStatus"
|
|
wire:loading.attr="disabled"
|
|
class="inline-flex items-center px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-lg transition-colors duration-200 disabled:opacity-50"
|
|
>
|
|
<svg wire:loading.remove class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
|
|
</svg>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<svg wire:loading fill="currentColor" stroke="currentColor" viewBox="0 0 128 128" class="w-4 h-4 mr-2"><g><path stroke-width="5" d="M31.6 8.98a4.02 4.02 0 0 0 1.7 5.3l6.12 3.22a52.56 52.56 0 1 0 63.13 10.73L96 33.97a43.88 43.88 0 1 1-53-8.5l-3.65 7.4a4.02 4.02 0 0 0 1.72 5.3 3.73 3.73 0 0 0 5.13-1.67l7.66-15.63a4.18 4.18 0 0 0-1.75-5.4L36.74 7.32a3.73 3.73 0 0 0-5.13 1.66z" fill="currentColor" stroke="currentColor"/><animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64" dur="1000ms" repeatCount="indefinite"></animateTransform></g></svg>
|
|
|
|
|
|
Refresh
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Server Status Cards -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-6">
|
|
@forelse($servers as $server)
|
|
<div class="bg-background-secondary rounded-lg p-6 px-6 py-8">
|
|
<!-- Server Header -->
|
|
<div class="flex items-start justify-between ">
|
|
<div class="flex items-center">
|
|
<div class="w-3 h-3 rounded-full {{ $server->status === 'online' ? 'bg-green-500' : 'bg-red-500' }} mr-3 {{ $server->status === 'online' ? 'status-online' : 'status-offline' }}"></div>
|
|
<div>
|
|
<h3 class=" font-semibold text-sm">{{ $server->name }}</h3>
|
|
|
|
</div>
|
|
</div>
|
|
<span class="px-3 py-1 rounded-full text-xs font-medium {{ $server->status === 'online' ? 'bg-green-600 text-white' : 'bg-red-600 text-white' }}">
|
|
{{ ucfirst($server->status) }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Server Metrics -->
|
|
|
|
|
|
<!-- Last Status Updates -->
|
|
<div class="space-y-2" style="margin-top: .5rem;">
|
|
<div class="flex items-center text-sm" style="align-items: center; ">
|
|
<style>
|
|
.svgclock {
|
|
height: 4vh;
|
|
width: auto;
|
|
animation: upDown 1s ease-in-out infinite;
|
|
}
|
|
|
|
.loader-circle,
|
|
.loader-pointer,
|
|
.loader-line {
|
|
fill: none;
|
|
stroke-width: 5px;
|
|
stroke: #4d6565;
|
|
}
|
|
|
|
.loader-center {
|
|
fill: #4d6565;
|
|
}
|
|
|
|
.loader-pointer {
|
|
transform-origin: bottom center;
|
|
animation: spin 4s linear infinite;
|
|
}
|
|
|
|
.loader-line {
|
|
transform-origin: bottom center;
|
|
animation: spin 60s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); transform-origin: 50% 50%; }
|
|
to { transform: rotate(360deg); transform-origin: 50% 50%; }
|
|
}
|
|
</style>
|
|
|
|
<svg class="svgclock" viewBox="0 0 240 240">
|
|
<line class="loader-pointer" x1="120" y1="120" x2="120" y2="97"/>
|
|
<line class="loader-line" x1="120" y1="120" x2="135" y2="120" />
|
|
<circle class="loader-circle" cx="120" cy="120" r="30" />
|
|
<circle class="loader-center" cx="120" cy="120" r="5" />
|
|
</svg>
|
|
|
|
<span>Updated:</span>
|
|
<span class="ml-2">
|
|
{{ \Carbon\Carbon::parse($server->last_check)->format('m/d/y H:i') }} -0 UTC (MM/DD/YY, HH:MM)
|
|
</span>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="col-span-full text-center py-12">
|
|
<div class="mb-4">
|
|
<svg class="w-16 h-16 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-medium mb-2">No servers configured</h3>
|
|
<p class="">Contact your administrator to add servers for monitoring.</p>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
|
|
<!-- Auto-refresh indicator -->
|
|
<div class="mt-3 text-center text-gray-500 text-sm">
|
|
<p>Status updates automatically every 30 seconds</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Auto-refresh every 30 seconds
|
|
setInterval(function() {
|
|
@this.refreshStatus();
|
|
}, 30000);
|
|
</script>
|