1b30aa4892
- Cyberpunk-themed Unraid dashboard - Disk usage monitoring with ring charts - System metrics (CPU, Memory, Parity) - Docker container status display - Optimized for Raspberry Pi 3 - GraphQL API integration 🤖 Generated with Claude Code (https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
112 lines
6.7 KiB
HTML
112 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Thanos Systems Monitor</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<h1 class="title">THANOS SYSTEMS MONITOR</h1>
|
|
</header>
|
|
|
|
<div class="grid grid-row-1">
|
|
<!-- Disk Usage Section -->
|
|
<section class="panel">
|
|
<h2 class="panel-title">DISK USAGE</h2>
|
|
<div class="disk-usage-layout">
|
|
<div class="ring-chart-column">
|
|
<div class="ring-chart-row-split">
|
|
<div class="mini-ring-chart-container">
|
|
<div class="resource-label">TOTAL DISK</div>
|
|
<svg class="mini-ring-chart" viewBox="0 0 200 200">
|
|
<circle class="ring-background" cx="100" cy="100" r="80" fill="none" stroke="#1a1a1a" stroke-width="20"></circle>
|
|
<circle class="ring-progress" id="disk-ring" cx="100" cy="100" r="80" fill="none" stroke="#00ffff" stroke-width="20" stroke-dasharray="502.65" stroke-dashoffset="502.65" transform="rotate(-90 100 100)"></circle>
|
|
<text class="ring-text-small" id="disk-percentage" x="100" y="105" text-anchor="middle">0%</text>
|
|
<text class="ring-fraction-small" id="disk-fraction" x="100" y="125" text-anchor="middle">0 / 0 TB</text>
|
|
</svg>
|
|
</div>
|
|
<div class="mini-ring-chart-container">
|
|
<div class="resource-label">DOCKER</div>
|
|
<svg class="mini-ring-chart" viewBox="0 0 200 200">
|
|
<circle class="ring-background" cx="100" cy="100" r="80" fill="none" stroke="#1a1a1a" stroke-width="20"></circle>
|
|
<circle class="ring-progress" id="docker-ring" cx="100" cy="100" r="80" fill="none" stroke="#00ffff" stroke-width="20" stroke-dasharray="502.65" stroke-dashoffset="502.65" transform="rotate(-90 100 100)"></circle>
|
|
<text class="ring-text-small" id="docker-percentage" x="100" y="105" text-anchor="middle">0%</text>
|
|
<text class="ring-fraction-small" id="docker-fraction" x="100" y="125" text-anchor="middle">0 / 0 TB</text>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="ring-chart-row-split">
|
|
<div class="mini-ring-chart-container">
|
|
<div class="resource-label">PHOTOS</div>
|
|
<svg class="mini-ring-chart" viewBox="0 0 200 200">
|
|
<circle class="ring-background" cx="100" cy="100" r="80" fill="none" stroke="#1a1a1a" stroke-width="20"></circle>
|
|
<circle class="ring-progress" id="photos-ring" cx="100" cy="100" r="80" fill="none" stroke="#00ffff" stroke-width="20" stroke-dasharray="502.65" stroke-dashoffset="502.65" transform="rotate(-90 100 100)"></circle>
|
|
<text class="ring-text-small" id="photos-percentage" x="100" y="105" text-anchor="middle">0%</text>
|
|
<text class="ring-fraction-small" id="photos-fraction" x="100" y="125" text-anchor="middle">0 / 0 TB</text>
|
|
</svg>
|
|
</div>
|
|
<div class="mini-ring-chart-container">
|
|
<div class="resource-label">MEDIA</div>
|
|
<svg class="mini-ring-chart" viewBox="0 0 200 200">
|
|
<circle class="ring-background" cx="100" cy="100" r="80" fill="none" stroke="#1a1a1a" stroke-width="20"></circle>
|
|
<circle class="ring-progress" id="media-ring" cx="100" cy="100" r="80" fill="none" stroke="#00ffff" stroke-width="20" stroke-dasharray="502.65" stroke-dashoffset="502.65" transform="rotate(-90 100 100)"></circle>
|
|
<text class="ring-text-small" id="media-percentage" x="100" y="105" text-anchor="middle">0%</text>
|
|
<text class="ring-fraction-small" id="media-fraction" x="100" y="125" text-anchor="middle">0 / 0 TB</text>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="disk-array-column">
|
|
<div id="disk-container"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- System Section -->
|
|
<section class="panel">
|
|
<h2 class="panel-title">SYSTEM</h2>
|
|
<div class="status-grid">
|
|
<div class="resource-item">
|
|
<div class="resource-label">CPU USAGE</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="cpu-progress"></div>
|
|
<span class="progress-text" id="cpu-text">0%</span>
|
|
</div>
|
|
</div>
|
|
<div class="resource-item">
|
|
<div class="resource-label">MEMORY USAGE</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="memory-progress"></div>
|
|
<span class="progress-text" id="memory-text">0%</span>
|
|
</div>
|
|
</div>
|
|
<div class="status-item">
|
|
<span class="status-label">PARITY STATUS:</span>
|
|
<span class="status-value" id="parity-status">VALID</span>
|
|
</div>
|
|
<div class="status-item">
|
|
<span class="status-label">LAST CHECK:</span>
|
|
<span class="status-value" id="parity-last-check">2024-01-15</span>
|
|
</div>
|
|
<div class="status-item">
|
|
<span class="status-label">ERRORS:</span>
|
|
<span class="status-value" id="parity-errors">0</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Docker Containers Section -->
|
|
<section class="panel panel-wide">
|
|
<h2 class="panel-title">DOCKER CONTAINERS</h2>
|
|
<div id="docker-container"></div>
|
|
</section>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|