README: Anleitung für STATS_PASSWORD und Dashboard ergänzt

2025-07-23 11:12:53 +02:00
parent 3041b86f3e
commit cdbe6f0574
3 changed files with 116 additions and 1 deletions
--- a/templates/stats_dashboard.html
+++ b/templates/stats_dashboard.html
@@ -0,0 +1,52 @@
+<!doctype html>
+<html lang="de">
+<head>
+    <meta charset="utf-8">
+    <title>Dashboard – Elpatrons Datumsrechner</title>
+    <link rel="stylesheet" href="/static/style.css">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <style>
+        .dashboard-box { max-width: 600px; margin: 3em auto; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px #cbd5e1; padding: 2em 2em 1.5em 2em; border: 1px solid #e5e7eb; }
+        .dashboard-box h2 { text-align: center; margin-bottom: 1.2em; }
+        .stats-row { display: flex; justify-content: space-between; margin-bottom: 2em; }
+        .stats-label { color: #64748b; }
+        .stats-value { font-size: 1.5em; font-weight: bold; }
+        .chart-container { margin: 2em 0; }
+    </style>
+</head>
+<body>
+    <div class="dashboard-box">
+        <h2>Statistik-Dashboard</h2>
+        <div class="stats-row">
+            <div class="stats-label">Gesamt-Pageviews:</div>
+            <div class="stats-value">{{ pageviews }}</div>
+        </div>
+        <div class="chart-container">
+            <canvas id="funcChart" width="400" height="220"></canvas>
+        </div>
+        <a href="/" style="color:#2563eb;">Zurück zur App</a>
+    </div>
+    <script>
+        const funcCounts = {{ func_counts|tojson }};
+        const labels = Object.keys(funcCounts);
+        const data = Object.values(funcCounts);
+        new Chart(document.getElementById('funcChart').getContext('2d'), {
+            type: 'bar',
+            data: {
+                labels: labels,
+                datasets: [{
+                    label: 'Funktionsaufrufe',
+                    data: data,
+                    backgroundColor: '#2563eb',
+                }]
+            },
+            options: {
+                plugins: { legend: { display: false } },
+                scales: {
+                    y: { beginAtZero: true, ticks: { stepSize: 1 } }
+                }
+            }
+        });
+    </script>
+</body>
+</html>