8396fbcf6f
- Dockerfile with nginx:alpine for static file serving - docker-compose.yml with port 9113:80 mapping - deploy.sh for git-based deployment to Unraid - setup-unraid.sh for initial server configuration - manage.sh for container operations (logs, status, restart, etc.) - .gitignore to exclude config.js Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
114 lines
7.0 KiB
HTML
114 lines
7.0 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>
|
|
<button class="theme-toggle" id="theme-toggle">LIGHT MODE</button>
|
|
<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" id="disk-tooltip-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" id="docker-tooltip-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" id="photos-tooltip-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" id="media-tooltip-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="config.js"></script>
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|