generated from CubeCraft-Creations/Tracehound
134 lines
6.6 KiB
HTML
134 lines
6.6 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>RemoteRig Dashboard Preview</title>
|
||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
|
|
<style>
|
||
|
|
:root {
|
||
|
|
--bg-dark: #0f172a;
|
||
|
|
--card-dark: #1e293b;
|
||
|
|
--status-green: #22c55e;
|
||
|
|
--status-yellow: #eab308;
|
||
|
|
--status-red: #ef4444;
|
||
|
|
}
|
||
|
|
body { background-color: var(--bg-dark); color: white; font-family: 'Inter', sans-serif; }
|
||
|
|
.status-card { background-color: var(--card-dark); transition: transform 0.2s ease, box-shadow 0.2s ease; }
|
||
|
|
.status-card:hover { transform: translateY(-4px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3); }
|
||
|
|
.border-green { border-left: 4px solid var(--status-green); }
|
||
|
|
.border-yellow { border-left: 4px solid var(--status-yellow); }
|
||
|
|
.border-red { border-left: 4px solid var(--status-red); }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body class="p-6">
|
||
|
|
<!-- Top Bar -->
|
||
|
|
<header class="flex justify-between items-center mb-8 p-4 bg-slate-800 rounded-lg shadow-lg">
|
||
|
|
<div class="flex items-center gap-3">
|
||
|
|
<div class="w-3 h-3 bg-blue-500 rounded-full animate-pulse"></div>
|
||
|
|
<h1 class="text-xl font-bold">◉ RemoteRig</h1>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-4">
|
||
|
|
<span class="text-sm text-slate-400 flex items-center gap-2">
|
||
|
|
<span class="w-2 h-2 bg-green-500 rounded-full"></span>
|
||
|
|
System Online
|
||
|
|
</span>
|
||
|
|
<button class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-bold rounded transition-colors uppercase text-xs tracking-wider">
|
||
|
|
⏹ Stop All
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<!-- Dashboard Grid -->
|
||
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
|
|
|
||
|
|
<!-- Card: Healthy -->
|
||
|
|
<div class="status-card border-green p-5 rounded-xl shadow-md">
|
||
|
|
<div class="flex justify-between items-start mb-4">
|
||
|
|
<h3 class="font-bold text-lg">🎥 Front Door</h3>
|
||
|
|
<span class="text-green-500 text-xs font-bold">ONLINE</span>
|
||
|
|
</div>
|
||
|
|
<div class="space-y-3 mb-6">
|
||
|
|
<div>
|
||
|
|
<div class="flex justify-between text-xs mb-1"><span>Battery</span><span class="text-green-400">82%</span></div>
|
||
|
|
<div class="w-full bg-slate-700 h-2 rounded-full overflow-hidden">
|
||
|
|
<div class="bg-green-500 h-full" style="width: 82%"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="flex justify-between text-xs mb-1"><span>Storage</span><span class="text-green-400">45%</span></div>
|
||
|
|
<div class="w-full bg-slate-700 h-2 rounded-full overflow-hidden">
|
||
|
|
<div class="bg-green-500 h-full" style="width: 45%"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2 text-sm font-mono text-red-500">
|
||
|
|
<span class="w-2 h-2 bg-red-500 rounded-full animate-ping"></span>
|
||
|
|
REC: 00:42:10
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button class="w-full py-2 bg-slate-700 hover:bg-slate-600 rounded text-sm font-medium transition-colors">View Details ▸</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Card: Warning -->
|
||
|
|
<div class="status-card border-yellow p-5 rounded-xl shadow-md">
|
||
|
|
<div class="flex justify-between items-start mb-4">
|
||
|
|
<h3 class="font-bold text-lg">🎥 Backyard</h3>
|
||
|
|
<span class="text-yellow-500 text-xs font-bold">ONLINE</span>
|
||
|
|
</div>
|
||
|
|
<div class="space-y-3 mb-6">
|
||
|
|
<div>
|
||
|
|
<div class="flex justify-between text-xs mb-1"><span>Battery</span><span class="text-yellow-400">41%</span></div>
|
||
|
|
<div class="w-full bg-slate-700 h-2 rounded-full overflow-hidden">
|
||
|
|
<div class="bg-yellow-500 h-full" style="width: 41%"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="flex justify-between text-xs mb-1"><span>Storage</span><span class="text-yellow-400">88%</span></div>
|
||
|
|
<div class="w-full bg-slate-700 h-2 rounded-full overflow-hidden">
|
||
|
|
<div class="bg-yellow-500 h-full" style="width: 88%"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2 text-sm font-mono text-yellow-500">
|
||
|
|
<span class="w-2 h-2 bg-yellow-500 rounded-full"></span>
|
||
|
|
PAUSED
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button class="w-full py-2 bg-slate-700 hover:bg-slate-600 rounded text-sm font-medium transition-colors">View Details ▸</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Card: Critical -->
|
||
|
|
<div class="status-card border-red p-5 rounded-xl shadow-md">
|
||
|
|
<div class="flex justify-between items-start mb-4">
|
||
|
|
<h3 class="font-bold text-lg">🎥 Garage</h3>
|
||
|
|
<span class="text-red-500 text-xs font-bold">OFFLINE</span>
|
||
|
|
</div>
|
||
|
|
<div class="space-y-3 mb-6">
|
||
|
|
<div>
|
||
|
|
<div class="flex justify-between text-xs mb-1"><span>Battery</span><span class="text-red-400">12%</span></div>
|
||
|
|
<div class="w-full bg-slate-700 h-2 rounded-full overflow-hidden">
|
||
|
|
<div class="bg-red-500 h-full" style="width: 12%"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="flex justify-between text-xs mb-1"><span>Storage</span><span class="text-red-400">95%</span></div>
|
||
|
|
<div class="w-full bg-slate-700 h-2 rounded-full overflow-hidden">
|
||
|
|
<div class="bg-red-500 h-full" style="width: 95%"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex items-center gap-2 text-sm font-mono text-red-500">
|
||
|
|
<span class="w-2 h-2 bg-red-500 rounded-full"></span>
|
||
|
|
OFFLINE
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button class="w-full py-2 bg-slate-700 hover:bg-slate-600 rounded text-sm font-medium transition-colors">View Details ▸</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<footer class="mt-12 p-4 bg-slate-800 rounded-lg text-center text-sm text-slate-400 shadow-inner">
|
||
|
|
📊 6 cams | 4 recording | 1 paused | 1 offline | Storage: 60% used
|
||
|
|
</footer>
|
||
|
|
</body>
|
||
|
|
</html>
|