60 lines
2.8 KiB
Plaintext
60 lines
2.8 KiB
Plaintext
---
|
|
layout: base.njk
|
|
title: "Status"
|
|
description: "Service Status"
|
|
---
|
|
|
|
<div class="max-w-6xl mx-auto px-4 py-8">
|
|
<div class="space-y-6">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">Service Status</h1>
|
|
</div>
|
|
|
|
<!-- Overall Status -->
|
|
<div id="overall-status" class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
|
|
<div class="flex items-center justify-between mb-3">
|
|
<h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Gesamtstatus</h2>
|
|
<div id="overall-indicator" class="flex items-center gap-2">
|
|
<div class="status-indicator operational"></div>
|
|
<span id="overall-text" class="text-green-600 dark:text-green-400 font-medium">Lädt...</span>
|
|
</div>
|
|
</div>
|
|
<p id="overall-summary" class="text-sm text-gray-600 dark:text-gray-300">
|
|
Status wird geprüft...
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Uptime Kuma Connection Status -->
|
|
<div id="uptime-kuma-status" class="bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-300 dark:border-gray-600 p-4">
|
|
<div class="flex items-center gap-3 mb-2">
|
|
<svg class="w-5 h-5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
|
|
</svg>
|
|
<h3 class="text-md font-semibold text-gray-700 dark:text-gray-300">Uptime Kuma</h3>
|
|
<span id="kuma-connection-status" class="tag tag-gray text-xs">Prüft...</span>
|
|
</div>
|
|
<p class="text-xs text-gray-600 dark:text-gray-400">
|
|
Endpoint: <span id="kuma-endpoint">Nicht konfiguriert</span>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Service List -->
|
|
<div id="service-list" class="space-y-3">
|
|
<!-- Services will be populated by JavaScript -->
|
|
</div>
|
|
|
|
<!-- Last Updated -->
|
|
<div class="text-center text-sm text-gray-500 dark:text-gray-400">
|
|
<p>Aktualisiert: <span id="last-updated">Nie</span></p>
|
|
<button id="refresh-status" class="mt-2 px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors">
|
|
Aktualisieren
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Pass service data to JavaScript -->
|
|
<script>
|
|
window.servicesData = {{ services | dump | safe }};
|
|
window.uptimeKumaConfig = {{ services.uptimeKuma | dump | safe }};
|
|
</script> |