107 lines
4.3 KiB
HTML
107 lines
4.3 KiB
HTML
{% extends "sidebar.html" %}
|
|
|
|
{% block title %}AstraOS — Status Page{% endblock %}
|
|
|
|
{% block head %}
|
|
<style>
|
|
.status-indicator {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
.status-online {
|
|
background-color: #2ecc71;
|
|
box-shadow: 0 0 8px #2ecc71;
|
|
}
|
|
.status-offline {
|
|
background-color: #e74c3c;
|
|
box-shadow: 0 0 8px #e74c3c;
|
|
}
|
|
.status-wartung {
|
|
background-color: #f39c12;
|
|
box-shadow: 0 0 8px #f39c12;
|
|
}
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<header class="flex justify-between items-center mb-10">
|
|
<h2 class="text-4xl font-bold tracking-wide {% if maintenance_active %}text-yellow-300{% else %}text-purple-300{% endif %}">System Status</h2>
|
|
</header>
|
|
|
|
<div class="space-y-4" id="status-list">
|
|
<div class="bg-black/40 rounded-xl p-6 backdrop-blur-lg flex justify-between items-center
|
|
{% if maintenance_active %}border border-yellow-500/30{% else %}border border-purple-500/20{% endif %}">
|
|
<span class="text-xl font-semibold text-gray-200">Chainsaw Hood SCP:SL Server</span>
|
|
<div class="flex items-center gap-3">
|
|
<span id="scpsl-status-text" class="font-semibold">Lädt...</span>
|
|
<div id="scpsl-status-indicator" class="status-indicator status-offline"></div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-black/40 rounded-xl p-6 backdrop-blur-lg flex justify-between items-center
|
|
{% if maintenance_active %}border border-yellow-500/30{% else %}border border-purple-500/20{% endif %}">
|
|
<span class="text-xl font-semibold text-gray-200">Kettensägen Gamepanel</span>
|
|
<div class="flex items-center gap-3">
|
|
<span id="gamepanel-status-text" class="font-semibold">Lädt...</span>
|
|
<div id="gamepanel-status-indicator" class="status-indicator status-offline"></div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-black/40 rounded-xl p-6 backdrop-blur-lg flex justify-between items-center
|
|
{% if maintenance_active %}border border-yellow-500/30{% else %}border border-purple-500/20{% endif %}">
|
|
<span class="text-xl font-semibold text-gray-200">Discord Bots</span>
|
|
<div class="flex items-center gap-3">
|
|
<span id="discordbots-status-text" class="font-semibold">Lädt...</span>
|
|
<div id="discordbots-status-indicator" class="status-indicator status-offline"></div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-black/40 rounded-xl p-6 backdrop-blur-lg flex justify-between items-center
|
|
{% if maintenance_active %}border border-yellow-500/30{% else %}border border-purple-500/20{% endif %}">
|
|
<span class="text-xl font-semibold text-gray-200">Datenbank</span>
|
|
<div class="flex items-center gap-3">
|
|
<span id="db-status-text" class="font-semibold">Lädt...</span>
|
|
<div id="db-status-indicator" class="status-indicator status-offline"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function updateStatusPage() {
|
|
fetch('/api/system_status')
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
function setStatus(id, status) {
|
|
let text = "";
|
|
let indicator = "";
|
|
if (status === "online") {
|
|
text = "Online";
|
|
indicator = "status-online";
|
|
} else if (status === "offline") {
|
|
text = "Offline";
|
|
indicator = "status-offline";
|
|
} else if (status === "wartung") {
|
|
text = "Wartungsarbeiten";
|
|
indicator = "status-wartung";
|
|
} else {
|
|
text = status;
|
|
indicator = "status-offline";
|
|
}
|
|
document.getElementById(id + "-status-text").textContent = text;
|
|
let el = document.getElementById(id + "-status-indicator");
|
|
el.classList.remove("status-online", "status-offline", "status-wartung");
|
|
el.classList.add(indicator);
|
|
}
|
|
setStatus("scpsl", data.scpsl);
|
|
setStatus("gamepanel", data.gamepanel);
|
|
setStatus("discordbots", data.discord_bots);
|
|
setStatus("db", data.database);
|
|
});
|
|
}
|
|
setInterval(updateStatusPage, 5000);
|
|
updateStatusPage();
|
|
</script>
|
|
{% endblock %} |