187 lines
12 KiB
HTML
187 lines
12 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>Benachrichtigungen:</strong> Aktiviere optionale Benachrichtigungen für Discord und Telegram.</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>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- NEU: Telegram-Benachrichtigungen -->
|
|
<div class="card">
|
|
<h2>Telegram-Benachrichtigungen</h2>
|
|
<p>Senden Sie Status-Updates an einen Telegram-Chat über einen Bot. Dies ist optional.</p>
|
|
<div class="form-group">
|
|
<label for="telegram-bot-token">Telegram Bot Token</label>
|
|
<input type="text" id="telegram-bot-token" placeholder="1234567890:ABCdefGHIjklMNOpqrsTUVwxyz">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="telegram-chat-id">Telegram Chat ID</label>
|
|
<input type="text" id="telegram-chat-id" placeholder="123456789">
|
|
</div>
|
|
<small>
|
|
<strong>Anleitung:</strong><br>
|
|
1. Spreche mit dem <a href="https://t.me/botfather" target="_blank">@BotFather</a> auf Telegram, um einen neuen Bot zu erstellen und den Token zu erhalten.<br>
|
|
2. Spreche mit deinem neuen Bot und sende ihm eine Nachricht.<br>
|
|
3. Rufe <code>https://api.telegram.org/bot<DEIN_TOKEN>/getUpdates</code> auf, um deine Chat ID zu finden.
|
|
</small>
|
|
</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>
|
|
<li><strong>Version 1.1</strong> - Verschiedene BUG-Fix, Telegram Benachrichtigung hinzugefügt</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- ANGEPASST: Widget für Gitea Repositories -->
|
|
<div class="widget-card" id="gitea-repos-widget">
|
|
<h2>Projekt-Repositories</h2>
|
|
<div id="gitea-repos-loading">Lade Repositories...</div>
|
|
<ul id="gitea-repos-list" style="display: none;"></ul>
|
|
<div id="gitea-repos-error" style="display: none; color: var(--error-color, #d9534f);">Fehler beim Laden der Repositories.</div>
|
|
</div>
|
|
|
|
<!-- NEU: Widget für Discord Support -->
|
|
<div class="widget-card">
|
|
<h2>Discord Support</h2>
|
|
<p>Brauchst du Hilfe oder hast eine Frage? Tritt unserem Discord-Server bei und werde Teil der Community!</p>
|
|
<a href="https://discord.com/invite/FdRs4BRd8D" target="_blank" class="discord-link">
|
|
<!-- Discord SVG Icon -->
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.032.074c-.217.124-.456.214-.69.29-.023.015-.041.032-.064.05-.05.063-.09.11-.09.175v.002c-.004.09-.012.19-.025.293a17.433 17.433 0 0 0-2.513.339 19.792 19.792 0 0 0-8.315 0c-.833-.22-1.7-.339-2.513-.339a13.65 13.65 0 0 0-.025-.293v-.002c0-.064-.04-.112-.09-.175-.023-.018-.041-.035-.064-.05-.234-.076-.473-.166-.69-.29a.074.074 0 0 0-.032-.074 19.736 19.736 0 0 0-4.885 1.515A19.78 19.78 0 0 0 3.676 18.26c.124.265.224.541.299.823a.074.074 0 0 1 .04.087 19.724 19.724 0 0 0 5.897 3.027.074.074 0 0 1 .084.028c.03.012.064.012.094 0a19.832 19.832 0 0 0 5.896-3.027.074.074 0 0 1 .04-.087c.075-.282.175-.558.299-.823A19.724 19.724 0 0 0 20.317 4.37zM8.02 15.33c-1.182 0-2.157-1.085-2.157-2.419 0-1.333.975-2.418 2.157-2.418 1.183 0 2.157 1.085 2.157 2.418 0 1.334-.975 2.419-2.157 2.419zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.975-2.418 2.157-2.418 1.183 0 2.157 1.085 2.157 2.418 0 1.334-.975 2.419-2.157 2.419z"/>
|
|
</svg>
|
|
<span>Jetzt beitreten</span>
|
|
</a>
|
|
</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> |