Files
adguard-shield/templates/report.html

371 lines
12 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AdGuard Shield Report</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
background-color: #f0f2f5;
margin: 0;
padding: 0;
color: #1a1a2e;
}
.container {
max-width: 700px;
margin: 30px auto;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
color: #ffffff;
padding: 30px 35px;
text-align: center;
}
.header h1 {
margin: 0 0 6px 0;
font-size: 26px;
font-weight: 700;
letter-spacing: 0.5px;
}
.header .subtitle {
font-size: 14px;
color: #a8b2d1;
margin: 0;
}
.header .period {
display: inline-block;
margin-top: 14px;
padding: 6px 18px;
background: rgba(255,255,255,0.12);
border-radius: 20px;
font-size: 13px;
color: #ccd6f6;
}
.content {
padding: 30px 35px;
}
.stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 28px;
}
.stat-card {
background: #f8f9fc;
border-radius: 10px;
padding: 18px 20px;
border-left: 4px solid #0f3460;
}
.stat-card.danger {
border-left-color: #e74c3c;
}
.stat-card.warning {
border-left-color: #f39c12;
}
.stat-card.success {
border-left-color: #27ae60;
}
.stat-card.info {
border-left-color: #3498db;
}
.stat-card .stat-value {
font-size: 28px;
font-weight: 700;
color: #1a1a2e;
line-height: 1.2;
}
.stat-card .stat-label {
font-size: 12px;
color: #6c757d;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 4px;
}
h2 {
font-size: 18px;
color: #1a1a2e;
margin: 28px 0 14px 0;
padding-bottom: 8px;
border-bottom: 2px solid #f0f2f5;
}
h2:first-child {
margin-top: 0;
}
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
font-size: 14px;
}
th {
background: #f8f9fc;
color: #1a1a2e;
font-weight: 600;
text-align: left;
padding: 10px 14px;
border-bottom: 2px solid #e8ecf1;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
td {
padding: 10px 14px;
border-bottom: 1px solid #f0f2f5;
color: #495057;
}
tr:last-child td {
border-bottom: none;
}
tr:hover td {
background: #fafbfd;
}
.rank {
display: inline-block;
width: 24px;
height: 24px;
line-height: 24px;
text-align: center;
background: #e8ecf1;
border-radius: 50%;
font-size: 12px;
font-weight: 600;
color: #495057;
}
.rank.top3 {
background: #0f3460;
color: #ffffff;
}
.ip-cell {
font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
font-size: 13px;
color: #1a1a2e;
}
.bar-container {
display: flex;
align-items: center;
gap: 8px;
}
.bar {
height: 8px;
background: linear-gradient(90deg, #0f3460, #3498db);
border-radius: 4px;
min-width: 4px;
}
.bar-value {
font-size: 13px;
font-weight: 600;
color: #1a1a2e;
white-space: nowrap;
}
.protocol-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
background: #e8ecf1;
color: #495057;
margin: 2px;
}
.protocol-badge.dns { background: #dff0d8; color: #3c763d; }
.protocol-badge.doh { background: #d9edf7; color: #31708f; }
.protocol-badge.dot { background: #fcf8e3; color: #8a6d3b; }
.protocol-badge.doq { background: #f2dede; color: #a94442; }
.reason-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
}
.reason-badge.rate-limit { background: #fcf8e3; color: #8a6d3b; }
.reason-badge.subdomain-flood { background: #f2dede; color: #a94442; }
.reason-badge.external { background: #d9edf7; color: #31708f; }
.no-data {
text-align: center;
padding: 30px;
color: #adb5bd;
font-style: italic;
}
.footer {
background: #f8f9fc;
padding: 24px 35px;
text-align: center;
font-size: 12px;
color: #6c757d;
border-top: 1px solid #e8ecf1;
}
.footer a {
color: #0f3460;
text-decoration: none;
font-weight: 600;
}
.footer a:hover {
text-decoration: underline;
}
.footer .links {
margin-top: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.footer .separator {
margin: 0 8px;
color: #ced4da;
}
.version-tag {
display: block;
margin-top: 8px;
font-size: 11px;
color: #adb5bd;
}
.update-notice {
display: inline-block;
margin-top: 10px;
padding: 7px 14px;
background: #fff8e1;
border: 1px solid #ffc107;
border-radius: 8px;
color: #7a5700;
font-size: 12px;
font-weight: 600;
}
.update-notice a {
color: #7a5700;
text-decoration: none;
font-weight: 700;
}
.update-notice a:hover {
text-decoration: underline;
}
.period-today td {
background: #eef4ff;
font-weight: 600;
}
.period-today td:first-child {
color: #0f3460;
}
.period-gestern td {
background: #f0faf3;
font-weight: 600;
}
.period-gestern td:first-child {
color: #27ae60;
}
@media (max-width: 700px) {
table { font-size: 12px; }
th, td { padding: 8px 8px; }
}
</style>
</head>
<body>
<div class="container">
<!-- Header -->
<div class="header">
<h1>🛡️ AdGuard Shield</h1>
<p class="subtitle">Sicherheits-Report</p>
<div class="period">{{REPORT_PERIOD}}</div>
</div>
<!-- Statistik-Übersicht -->
<div class="content">
<!-- Zeitraum-Schnellübersicht -->
<h2>📅 Zeitraum-Schnellübersicht</h2>
{{PERIOD_OVERVIEW_TABLE}}
<!-- Gesamt-Übersicht des Berichtszeitraums -->
<h2>📊 Übersicht</h2>
<div class="stats-grid">
<div class="stat-card danger">
<div class="stat-value">{{TOTAL_BANS}}</div>
<div class="stat-label">Sperren gesamt</div>
</div>
<div class="stat-card success">
<div class="stat-value">{{TOTAL_UNBANS}}</div>
<div class="stat-label">Entsperrungen</div>
</div>
<div class="stat-card warning">
<div class="stat-value">{{UNIQUE_IPS}}</div>
<div class="stat-label">Eindeutige IPs</div>
</div>
<div class="stat-card info">
<div class="stat-value">{{PERMANENT_BANS}}</div>
<div class="stat-label">Permanente Sperren</div>
</div>
<div class="stat-card">
<div class="stat-value">{{ACTIVE_BANS}}</div>
<div class="stat-label">Aktuell aktive Sperren</div>
</div>
<div class="stat-card info">
<div class="stat-value">{{ABUSEIPDB_REPORTS}}</div>
<div class="stat-label">AbuseIPDB Reports</div>
</div>
</div>
<!-- Angriffsarten -->
<h2>⚔️ Angriffsarten</h2>
<div class="stats-grid">
<div class="stat-card warning">
<div class="stat-value">{{RATELIMIT_BANS}}</div>
<div class="stat-label">Rate-Limit Sperren</div>
</div>
<div class="stat-card danger">
<div class="stat-value">{{SUBDOMAIN_FLOOD_BANS}}</div>
<div class="stat-label">Subdomain-Flood Sperren</div>
</div>
<div class="stat-card">
<div class="stat-value">{{EXTERNAL_BLOCKLIST_BANS}}</div>
<div class="stat-label">Externe Blocklist</div>
</div>
<div class="stat-card success">
<div class="stat-value">{{BUSIEST_DAY}}</div>
<div class="stat-label">Aktivster Tag</div>
</div>
</div>
<!-- Top 10 IPs -->
<h2>🏴‍☠️ Top 10 Auffälligste IPs</h2>
{{TOP10_IPS_TABLE}}
<!-- Top 10 Domains -->
<h2>🌐 Top 10 Meistbetroffene Domains</h2>
{{TOP10_DOMAINS_TABLE}}
<!-- Protokoll-Verteilung -->
<h2>📡 Protokoll-Verteilung</h2>
{{PROTOCOL_TABLE}}
<!-- Letzte Sperren -->
<h2>🕐 Letzte 10 Sperren</h2>
{{RECENT_BANS_TABLE}}
</div>
<!-- Footer -->
<div class="footer">
<div class="links">
<span>
<a href="https://www.patrick-asmus.de">Patrick-Asmus.de</a>
<span class="separator">|</span>
<a href="https://www.cleveradmin.de">CleverAdmin.de</a>
</span>
<span>
<a href="https://git.techniverse.net/scriptos/adguard-shield.git">AdGuard Shield auf Gitea</a>
<span class="separator">|</span>
<a href="https://git.techniverse.net/scriptos/adguard-shield/src/branch/main/docs">docs</a>
</span>
</div>
<br>
Dieser Report wurde automatisch von <strong>AdGuard Shield</strong> generiert.<br>
Generiert am: {{REPORT_DATE}}
<div class="version-tag">AdGuard Shield {{VERSION}} · {{HOSTNAME}}</div>
{{UPDATE_NOTICE}}
</div>
</div>
</body>
</html>