ramforth/Overlays
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add heading-less system monitor overlay

Browse Source
This commit is contained in:
ramforth
2025-10-31 09:50:35 +01:00
parent c45cfc9aa0
commit a48a06ed04
3 changed files with 72 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@@ -87,6 +87,7 @@
<h3>System Monitor Overlay</h3> <h3>System Monitor Overlay</h3>
<ul> <ul>
<li><a href="/system_monitor_overlay/index.html">System Monitor Overlay</a></li> <li><a href="/system_monitor_overlay/index.html">System Monitor Overlay</a></li>
<li><a href="/system_monitor_overlay/index-no-heading.html">System Monitor Overlay (No Heading)</a></li>
</ul> </ul>
<p>For detailed usage instructions and to understand how to deploy these overlays, please refer to the <a href="https://gitea.ramforth.net/ramforth/Overlays/src/branch/main/azuracast/README.md">Azuracast README.md</a> within the Gitea repository.</p> <p>For detailed usage instructions and to understand how to deploy these overlays, please refer to the <a href="https://gitea.ramforth.net/ramforth/Overlays/src/branch/main/azuracast/README.md">Azuracast README.md</a> within the Gitea repository.</p>

55
system_monitor_overlay/index-no-heading.html Normal file
View File

@@ -0,0 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>System Monitor (No Heading)</title>
<style>
body {
font-family: sans-serif;
color: white;
background-color: rgba(0, 0, 0, 0.5);
padding: 20px;
border-radius: 10px;
}
.stat {
font-size: 1.2em;
margin-bottom: 10px;
}
.descriptor {
font-weight: 300; /* Light */
}
.value {
font-weight: 700; /* Bold */
}
</style>
</head>
<body>
<div class="stat">
<span class="descriptor">CPU Usage:</span>
<span class="value" id="cpu-usage"></span>
</div>
<div class="stat">
<span class="descriptor">Memory Usage:</span>
<span class="value" id="memory-usage"></span>
</div>
<script>
function fetchStats() {
fetch('http://localhost:8000/stats')
.then(response => response.json())
.then(data => {
document.getElementById('cpu-usage').textContent = `${data.cpu_percent}%`;
document.getElementById('memory-usage').textContent = `${data.memory_percent}%`;
})
.catch(error => console.error('Error fetching system stats:', error));
}
// Fetch stats every 2 seconds
setInterval(fetchStats, 2000);
// Initial fetch
fetchStats();
</script>
</body>
</html>

22
system_monitor_overlay/index.html
View File

@@ -12,17 +12,27 @@
padding: 20px; padding: 20px;
border-radius: 10px; border-radius: 10px;
} }
.stat {
font-size: 1.2em;
margin-bottom: 10px;
}
.descriptor {
font-weight: 300; /* Light */
}
.value {
font-weight: 700; /* Bold */
}
</style> </style>
</head> </head>
<body> <body>
<h1>System Monitor</h1> <h1>System Monitor</h1>
<div> <div class="stat">
<h2>CPU Usage</h2> <span class="descriptor">CPU Usage:</span>
<p id="cpu-usage"></p> <span class="value" id="cpu-usage"></span>
</div> </div>
<div> <div class="stat">
<h2>Memory Usage</h2> <span class="descriptor">Memory Usage:</span>
<p id="memory-usage"></p> <span class="value" id="memory-usage"></span>
</div> </div>
<script> <script>