145 lines
8.7 KiB
HTML
145 lines
8.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Einstellungen - Uptime Monitor</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
<script src="lib/chart.js"></script>
|
|
</head>
|
|
<body class="options-page">
|
|
<div class="options-grid-container">
|
|
<main class="main-settings-area">
|
|
<!-- Tab-Navigation -->
|
|
<div class="tab-nav">
|
|
<button class="tab-btn active" data-tab="manage">Dienste verwalten</button>
|
|
<button class="tab-btn" data-tab="stats">Statistik & Übersicht</button>
|
|
</div>
|
|
|
|
<!-- Tab 1: Dienste verwalten -->
|
|
<div class="tab-panel active" id="manage-panel">
|
|
<div class="manage-grid">
|
|
<aside class="widget-area-left">
|
|
<div class="card">
|
|
<h2>Anleitung</h2>
|
|
<ol>
|
|
<li><strong>Hinzufügen:</strong> Nutze das Formular, um neue Dienste hinzuzufügen.</li>
|
|
<li><strong>Überwachung:</strong> Passe die Intervalle und Benachrichtigungen an.</li>
|
|
<li><strong>Popup-Auswahl:</strong> Wähle unten bis zu 8 Server aus, die schnell im Popup angezeigt werden sollen.</li>
|
|
<li><strong>Discord:</strong> Aktiviere optionale Benachrichtigungen für deinen Discord-Server.</li>
|
|
<li><strong>Statistik:</strong> Wechsle zum Tab "Statistik & Übersicht" um die Liste zu sehen.</li>
|
|
<li><strong>Backup:</strong> Nutze Import/Export, um Dienste zu sichern.</li>
|
|
</ol>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Mittlere Spalte: Formulare und Aktionen -->
|
|
<section class="form-section">
|
|
<div class="card">
|
|
<h1>Neuen Dienst hinzufügen</h1>
|
|
<form id="add-service-form">
|
|
<div class="form-group"><label for="service-name">Name</label><input type="text" id="service-name" placeholder="z.B. Mein Server" required></div>
|
|
<div class="form-group">
|
|
<label for="service-domain">Adresse</label>
|
|
<div class="input-group">
|
|
<select id="service-protocol"><option value="https://">https://</option><option value="http://">http://</option></select>
|
|
<input type="text" id="service-domain" placeholder="example.com" required>
|
|
</div>
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Dienst hinzufügen</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- NEU: Bereich für die Popup-Auswahl -->
|
|
<div class="card">
|
|
<h2>Server für Popup auswählen (max. 8)</h2>
|
|
<p>Wenn Sie mehr als 8 Server haben, wählen Sie hier aus, welche im Popup angezeigt werden sollen. Ansonsten werden alle Server angezeigt.</p>
|
|
<div id="popup-selection-container">
|
|
<div class="selection-info" id="selection-info">Keine Server ausgewählt (die ersten 8 werden angezeigt)</div>
|
|
<div id="popup-server-list" class="popup-server-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>Überwachungseinstellungen</h2>
|
|
<div class="form-group">
|
|
<label for="check-interval">Prüfungsintervall:</label>
|
|
<select id="check-interval">
|
|
<option value="0.1667">Alle 10 Sekunden</option>
|
|
<option value="0.5">Alle 30 Sekunden</option>
|
|
<option value="1">Jede Minute</option>
|
|
<option value="5">Alle 5 Minuten</option>
|
|
<option value="10">Alle 10 Minuten</option>
|
|
<option value="15">Alle 15 Minuten</option>
|
|
<option value="30">Alle 30 Minuten</option>
|
|
<option value="60">Jede Stunde</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group checkbox-group">
|
|
<input type="checkbox" id="notify-online">
|
|
<label for="notify-online">Auch benachrichtigen, wenn ein Dienst wieder online ist.</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- NEU: Discord-Benachrichtigungen -->
|
|
<div class="card">
|
|
<h2>Discord-Benachrichtigungen</h2>
|
|
<p>Senden Sie Status-Updates an einen Discord-Kanal über einen Webhook. Dies ist optional.</p>
|
|
<div class="form-group">
|
|
<label for="discord-webhook-url">Discord Webhook URL</label>
|
|
<input type="url" id="discord-webhook-url" placeholder="https://discord.com/api/webhooks/...">
|
|
<small>Erstelle einen Webhook in deinen Discord-Servereinstellungen (Kanal > Integrationen > Webhooks) und füge die vollständige URL hier ein. Lasse das Feld leer, um die Funktion zu deaktivieren.</small>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h2>Daten-Management</h2>
|
|
<div class="form-actions">
|
|
<button id="export-services" class="btn btn-secondary">Dienste exportieren</button>
|
|
<button id="import-services" class="btn btn-secondary">Dienste importieren</button>
|
|
<input type="file" id="import-file" accept=".json" style="display: none;">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<aside class="widget-area-right">
|
|
<div class="widget-card">
|
|
<h2>Changelog</h2>
|
|
<ul>
|
|
<li><strong>Version 1.0</strong> - Erstellung der Chrome Erweiterung.</li>
|
|
</ul>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab 2: Statistik & Übersicht (unverändert) -->
|
|
<div class="tab-panel" id="stats-panel">
|
|
<div class="stats-grid">
|
|
<!-- Linke Seite: Serverliste + Suche -->
|
|
<div class="card stats-list-card">
|
|
<div style="display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px;">
|
|
<h2 style="margin:0;">Serverliste</h2>
|
|
<input id="services-search" placeholder="Suche Server..." style="padding:8px;border-radius:8px;border:1px solid var(--border-color);width:160px;">
|
|
</div>
|
|
<p class="info-text">Klicke auf einen Dienstnamen, um seine Statistik rechts anzuzeigen. Benutze die Icons zum Bearbeiten / Löschen.</p>
|
|
<ul id="services-list-stat" class="services-stat-list" aria-live="polite"></ul>
|
|
<div id="empty-state" class="empty-state" style="display: none;">
|
|
<p>Keine Dienste konfiguriert.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rechte Seite: Uptime-Statistik -->
|
|
<div class="widget-card stats-chart-card">
|
|
<h2>Uptime-Statistik</h2>
|
|
<div id="stats-card">
|
|
<p id="no-service-selected">Wähle einen Dienst aus der Liste aus, um seine Statistik zu sehen.</p>
|
|
<canvas id="uptimeChart" style="display: none;"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
<script src="options.js"></script>
|
|
</body>
|
|
</html> |