275 lines
10 KiB
HTML
275 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Dashboard - Facebook Post Tracker</title>
|
|
<link rel="icon" type="image/png" sizes="32x32" href="assets/app-icon-64.png">
|
|
<link rel="icon" type="image/png" sizes="192x192" href="assets/app-icon-192.png">
|
|
<link rel="apple-touch-icon" href="assets/app-icon-192.png">
|
|
<link rel="stylesheet" href="style.css">
|
|
<link rel="stylesheet" href="dashboard.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<div class="header-main">
|
|
<h1>📊 Dashboard</h1>
|
|
<a href="?view=posts" class="btn btn-secondary">Zurück zu Beiträgen</a>
|
|
</div>
|
|
<div class="header-controls">
|
|
<div class="control-group">
|
|
<label for="timeFilter">Zeitraum:</label>
|
|
<select id="timeFilter" class="control-select">
|
|
<option value="all">Alle</option>
|
|
<option value="today">Heute</option>
|
|
<option value="week" selected>Diese Woche</option>
|
|
<option value="month">Dieser Monat</option>
|
|
<option value="year">Dieses Jahr</option>
|
|
</select>
|
|
</div>
|
|
<div class="control-group">
|
|
<label for="profileFilter">Profil-Filter:</label>
|
|
<select id="profileFilter" class="control-select">
|
|
<option value="all">Alle Profile</option>
|
|
<option value="1">Profil 1</option>
|
|
<option value="2">Profil 2</option>
|
|
<option value="3">Profil 3</option>
|
|
<option value="4">Profil 4</option>
|
|
<option value="5">Profil 5</option>
|
|
</select>
|
|
</div>
|
|
<button type="button" class="btn btn-primary" id="refreshBtn">
|
|
🔄 Aktualisieren
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div id="loading" class="loading">Lade Statistiken...</div>
|
|
<div id="error" class="error" style="display: none;"></div>
|
|
|
|
<div id="dashboardContainer" class="dashboard-container" style="display: none;">
|
|
|
|
<!-- SECTION 1: OVERVIEW -->
|
|
<section class="dashboard-section">
|
|
<h2 class="section-title">Übersicht</h2>
|
|
|
|
<!-- Primary Stats -->
|
|
<div class="stats-grid">
|
|
<div class="stat-card stat-card--primary">
|
|
<div class="stat-card__icon">📋</div>
|
|
<div class="stat-card__content">
|
|
<div class="stat-card__label">Gesamt Beiträge</div>
|
|
<div class="stat-card__value" id="totalPosts">0</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card stat-card--success">
|
|
<div class="stat-card__icon">✓</div>
|
|
<div class="stat-card__content">
|
|
<div class="stat-card__label">Abgeschlossen</div>
|
|
<div class="stat-card__value" id="completedPosts">0</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card stat-card--warning">
|
|
<div class="stat-card__icon">⏳</div>
|
|
<div class="stat-card__content">
|
|
<div class="stat-card__label">In Bearbeitung</div>
|
|
<div class="stat-card__value" id="activePosts">0</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card stat-card--danger">
|
|
<div class="stat-card__icon">⚠️</div>
|
|
<div class="stat-card__content">
|
|
<div class="stat-card__label">Abgelaufen</div>
|
|
<div class="stat-card__value" id="expiredPosts">0</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-card stat-card--info">
|
|
<div class="stat-card__icon">🏆</div>
|
|
<div class="stat-card__content">
|
|
<div class="stat-card__label">Erfolgreich</div>
|
|
<div class="stat-card__value" id="successfulPosts">0</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Key Metrics -->
|
|
<div class="metrics-grid">
|
|
<div class="metric-card">
|
|
<div class="metric-card__label">Erfolgsquote</div>
|
|
<div class="metric-card__value" id="successRateMetric">0%</div>
|
|
<div class="metric-card__change" id="successRateChange"></div>
|
|
</div>
|
|
|
|
<div class="metric-card">
|
|
<div class="metric-card__label">Ø Bearbeitungszeit</div>
|
|
<div class="metric-card__value" id="avgCompletionTime">-</div>
|
|
<div class="metric-card__subtext">bis Abschluss</div>
|
|
</div>
|
|
|
|
<div class="metric-card">
|
|
<div class="metric-card__label">Teilnahmen heute</div>
|
|
<div class="metric-card__value" id="checksToday">0</div>
|
|
<div class="metric-card__change" id="checksTodayChange"></div>
|
|
</div>
|
|
|
|
<div class="metric-card">
|
|
<div class="metric-card__label">Deadline-Risiko</div>
|
|
<div class="metric-card__value" id="deadlineRiskValue">0</div>
|
|
<div class="metric-card__subtext" id="deadlineRiskText">keine Risiken</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SECTION 2: ANALYTICS -->
|
|
<section class="dashboard-section">
|
|
<h2 class="section-title">Analyse</h2>
|
|
|
|
<div class="charts-row">
|
|
<!-- Activity Timeline -->
|
|
<div class="chart-card chart-card--full">
|
|
<div class="chart-card__header">
|
|
<h3 class="chart-card__title">Aktivitätsverlauf</h3>
|
|
<span class="chart-card__subtitle" id="timelineSubtitle"></span>
|
|
</div>
|
|
<div class="chart-card__body">
|
|
<canvas id="timelineChart" width="1200" height="280"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="charts-row">
|
|
<!-- Profile Performance -->
|
|
<div class="chart-card">
|
|
<div class="chart-card__header">
|
|
<h3 class="chart-card__title">Teilnahmen pro Profil</h3>
|
|
<span class="chart-card__subtitle" id="profileChartSubtitle"></span>
|
|
</div>
|
|
<div class="chart-card__body">
|
|
<div id="profileChart" class="bar-chart"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Progress Overview -->
|
|
<div class="chart-card">
|
|
<div class="chart-card__header">
|
|
<h3 class="chart-card__title">Status-Verteilung</h3>
|
|
<span class="chart-card__subtitle" id="progressChartSubtitle"></span>
|
|
</div>
|
|
<div class="chart-card__body">
|
|
<canvas id="progressChart" width="400" height="300"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="charts-row">
|
|
<!-- Period Trend -->
|
|
<div class="chart-card">
|
|
<div class="chart-card__header">
|
|
<h3 class="chart-card__title">Teilnahmen-Trend</h3>
|
|
<span class="chart-card__subtitle" id="trendChartSubtitle"></span>
|
|
</div>
|
|
<div class="chart-card__body">
|
|
<canvas id="periodTrendChart" width="500" height="300"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Profile Comparison -->
|
|
<div class="chart-card">
|
|
<div class="chart-card__header">
|
|
<h3 class="chart-card__title">Profilvergleich</h3>
|
|
<span class="chart-card__subtitle" id="profileComparisonSubtitle"></span>
|
|
</div>
|
|
<div class="chart-card__body">
|
|
<canvas id="profileComparisonChart" width="500" height="300"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SECTION 3: PERFORMANCE COMPARISONS -->
|
|
<section class="dashboard-section">
|
|
<h2 class="section-title">Performance-Vergleiche</h2>
|
|
|
|
<div class="comparison-grid">
|
|
<div class="comparison-card">
|
|
<h3 class="comparison-card__title">Wochenvergleich</h3>
|
|
<div class="comparison-card__content" id="weeklyComparison"></div>
|
|
</div>
|
|
<div class="comparison-card">
|
|
<h3 class="comparison-card__title">Monatsvergleich</h3>
|
|
<div class="comparison-card__content" id="monthlyComparison"></div>
|
|
</div>
|
|
<div class="comparison-card">
|
|
<h3 class="comparison-card__title">Jahresvergleich</h3>
|
|
<div class="comparison-card__content" id="yearlyComparison"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="success-comparison-grid">
|
|
<div class="success-comparison-card">
|
|
<h3 class="success-comparison-card__title">Erfolgsanalyse: Woche</h3>
|
|
<div class="success-comparison-card__content" id="weeklySuccessComparison"></div>
|
|
</div>
|
|
<div class="success-comparison-card">
|
|
<h3 class="success-comparison-card__title">Erfolgsanalyse: Monat</h3>
|
|
<div class="success-comparison-card__content" id="monthlySuccessComparison"></div>
|
|
</div>
|
|
<div class="success-comparison-card">
|
|
<h3 class="success-comparison-card__title">Erfolgsanalyse: Jahr</h3>
|
|
<div class="success-comparison-card__content" id="yearlySuccessComparison"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- SECTION 4: DETAILS -->
|
|
<section class="dashboard-section">
|
|
<h2 class="section-title">Details</h2>
|
|
|
|
<div class="details-grid">
|
|
<!-- Top Performers -->
|
|
<div class="detail-card">
|
|
<div class="detail-card__header">
|
|
<h3 class="detail-card__title">Top Performers</h3>
|
|
<span class="detail-card__badge" id="performersCount">0</span>
|
|
</div>
|
|
<div class="detail-card__body">
|
|
<div id="topPerformers" class="performers-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Upcoming Deadlines -->
|
|
<div class="detail-card">
|
|
<div class="detail-card__header">
|
|
<h3 class="detail-card__title">Anstehende Deadlines</h3>
|
|
<span class="detail-card__badge" id="deadlinesCount">0</span>
|
|
</div>
|
|
<div class="detail-card__body">
|
|
<div id="upcomingDeadlines" class="deadline-list"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Recent Activity -->
|
|
<div class="detail-card detail-card--full">
|
|
<div class="detail-card__header">
|
|
<h3 class="detail-card__title">Letzte Aktivitäten</h3>
|
|
<span class="detail-card__badge" id="activityCount">0</span>
|
|
</div>
|
|
<div class="detail-card__body">
|
|
<div id="recentActivity" class="activity-list"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script src="dashboard.js"></script>
|
|
</body>
|
|
</html>
|