Initial commit: Thanos Systems Monitor
- 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>
This commit is contained in:
Michael Simard
420
styles.css
Normal file
420
styles.css
Normal file
@@ -0,0 +1,420 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@keyframes borderGlow {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 15px rgba(0, 255, 255, 0.3), 0 0 30px rgba(0, 255, 255, 0.1);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 25px rgba(0, 255, 255, 0.6), 0 0 50px rgba(0, 255, 255, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes titleGlow {
|
||||
0%, 100% {
|
||||
text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff, 0 0 30px #00ffff;
|
||||
}
|
||||
50% {
|
||||
text-shadow: 0 0 20px #00ffff, 0 0 30px #00ffff, 0 0 40px #00ffff, 0 0 50px #00ffff;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scanline {
|
||||
0% {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(100vh);
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Courier New', monospace;
|
||||
background-color: #000000;
|
||||
color: #00ffff;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, transparent, #00ffff, transparent);
|
||||
animation: scanline 4s linear infinite;
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 2px solid #00ffff;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
letter-spacing: 4px;
|
||||
text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff;
|
||||
margin-bottom: 10px;
|
||||
animation: titleGlow 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
font-size: 0.9rem;
|
||||
color: #00cccc;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.grid-row-1 {
|
||||
grid-template-columns: 2fr 1fr;
|
||||
}
|
||||
|
||||
.grid-row-2 {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background-color: #0a0a0a;
|
||||
border: 2px solid #00ffff;
|
||||
padding: 20px;
|
||||
box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
|
||||
animation: borderGlow 2s ease-in-out infinite;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.panel::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
right: -2px;
|
||||
bottom: -2px;
|
||||
background: linear-gradient(45deg, #00ffff, #ff00ff, #00ffff);
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
border-radius: 0px;
|
||||
}
|
||||
|
||||
.panel:hover::before {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.panel-wide {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.panel-title {
|
||||
font-size: 1.2rem;
|
||||
letter-spacing: 3px;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #00ffff;
|
||||
text-shadow: 0 0 5px #00ffff;
|
||||
}
|
||||
|
||||
/* Resource Section */
|
||||
.resources-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Disk Usage Layout */
|
||||
.disk-usage-layout {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 20px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.disk-array-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.ring-chart-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.ring-chart-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ring-chart-row-split {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.mini-ring-chart-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.progress-bars-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.resource-item {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.resource-label {
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 8px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.ring-chart-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.ring-chart {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.mini-ring-chart {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
.ring-progress {
|
||||
transition: stroke-dashoffset 0.5s ease, stroke 0.3s ease;
|
||||
filter: drop-shadow(0 0 8px currentColor);
|
||||
}
|
||||
|
||||
.ring-text {
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
fill: #00ffff;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.ring-text-small {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
fill: #00ffff;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.ring-fraction {
|
||||
font-size: 0.7rem;
|
||||
fill: #00ffff;
|
||||
font-family: 'Courier New', monospace;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.ring-fraction-small {
|
||||
font-size: 0.5rem;
|
||||
fill: #00ffff;
|
||||
font-family: 'Courier New', monospace;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
background-color: #1a1a1a;
|
||||
border: 1px solid #00ffff;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #00ffff, #00cccc);
|
||||
transition: width 0.3s ease, background 0.3s ease;
|
||||
box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-fill::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
|
||||
animation: shimmer 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
left: -100%;
|
||||
}
|
||||
100% {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-fill.warning {
|
||||
background: linear-gradient(90deg, #ff00ff, #ff00cc);
|
||||
box-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
|
||||
}
|
||||
|
||||
.progress-fill.critical {
|
||||
background: linear-gradient(90deg, #ffffff, #cccccc);
|
||||
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
font-weight: bold;
|
||||
text-shadow: 1px 1px 2px #000000;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* Parity Status */
|
||||
.status-grid {
|
||||
display: grid;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.status-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
background-color: #1a1a1a;
|
||||
border-left: 3px solid #00ffff;
|
||||
}
|
||||
|
||||
.status-label {
|
||||
font-weight: bold;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.status-value {
|
||||
color: #00ffff;
|
||||
}
|
||||
|
||||
.status-value.error {
|
||||
color: #ffffff;
|
||||
text-shadow: 0 0 5px #ffffff;
|
||||
}
|
||||
|
||||
/* Disk Array */
|
||||
.disk-item {
|
||||
margin-bottom: 8px;
|
||||
padding: 8px;
|
||||
background-color: #1a1a1a;
|
||||
border-left: 3px solid #00ffff;
|
||||
}
|
||||
|
||||
.disk-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 5px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.disk-name {
|
||||
font-weight: bold;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.disk-info {
|
||||
color: #00cccc;
|
||||
}
|
||||
|
||||
/* Docker Containers */
|
||||
.docker-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.docker-item {
|
||||
padding: 15px;
|
||||
background-color: #1a1a1a;
|
||||
border: 1px solid #00ffff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.docker-name {
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
letter-spacing: 1px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.docker-status {
|
||||
padding: 5px 10px;
|
||||
border-radius: 3px;
|
||||
font-size: 0.8rem;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.docker-status.running {
|
||||
background-color: #00ffff;
|
||||
color: #000000;
|
||||
box-shadow: 0 0 5px #00ffff;
|
||||
}
|
||||
|
||||
.docker-status.stopped,
|
||||
.docker-status.offline {
|
||||
background-color: #666666;
|
||||
color: #ffffff;
|
||||
box-shadow: 0 0 5px #666666;
|
||||
}
|
||||
|
||||
.docker-status.paused {
|
||||
background-color: #ff00ff;
|
||||
color: #000000;
|
||||
box-shadow: 0 0 5px #ff00ff;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.title {
|
||||
font-size: 1.8rem;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.docker-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user