81 lines
4.1 KiB
HTML
81 lines
4.1 KiB
HTML
{% extends "user_layout.html" %}
|
|
|
|
{% block title %}User Dashboard - BZOD{% endblock %}
|
|
|
|
{% block active_dashboard %}active{% endblock %}
|
|
|
|
{% block header_title %}Dashboard Overview{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Overview Cards -->
|
|
<div class="grid-stats">
|
|
<div class="card stat-card">
|
|
<span class="stat-label">Total Short URLs</span>
|
|
<span class="stat-val" style="color: #60a5fa;">{{ total_urls }}</span>
|
|
</div>
|
|
<div class="card stat-card">
|
|
<span class="stat-label">Total Landing Pages</span>
|
|
<span class="stat-val" style="color: #c084fc;">{{ total_pages }}</span>
|
|
</div>
|
|
<div class="card stat-card">
|
|
<span class="stat-label">Total Visits / Clicks</span>
|
|
<span class="stat-val" style="color: #34d399;">{{ total_clicks }}</span>
|
|
</div>
|
|
<div class="card stat-card">
|
|
<span class="stat-label">Active / Dead Links</span>
|
|
<div style="display: flex; align-items: baseline; gap: 0.5rem; margin-top: 0.25rem;">
|
|
<span class="stat-val" style="color: #10b981;">{{ active_links }}</span>
|
|
<span style="color: var(--text-muted); font-size: 1.25rem;">/</span>
|
|
<span style="font-size: 1.25rem; font-weight: 700; color: #ef4444;">{{ dead_links }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Traffic Chart -->
|
|
<div class="card" style="margin-bottom: 2rem;">
|
|
<h3 style="font-size: 1.1rem; margin-bottom: 1.25rem; color: var(--text-primary); display: flex; align-items: center; gap: 0.5rem;">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
|
|
Click Traffic Trend (Last 30 Days)
|
|
</h3>
|
|
<div style="background-color: rgba(15, 23, 42, 0.4); border-radius: 12px; padding: 1rem; border: 1px solid rgba(255, 255, 255, 0.03);">
|
|
{{ traffic_chart|safe }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Secondary Charts Grid -->
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); gap: 1.5rem; margin-bottom: 2rem;">
|
|
<!-- Countries -->
|
|
<div class="card">
|
|
<h3 style="font-size: 1.1rem; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem;">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
|
|
Geographic Analysis (Top Countries)
|
|
</h3>
|
|
<div style="background-color: rgba(15, 23, 42, 0.4); border-radius: 12px; padding: 1rem; border: 1px solid rgba(255, 255, 255, 0.03);">
|
|
{{ countries_chart|safe }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Referrers -->
|
|
<div class="card">
|
|
<h3 style="font-size: 1.1rem; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem;">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
|
|
Referrer Channels (Top Referrers)
|
|
</h3>
|
|
<div style="background-color: rgba(15, 23, 42, 0.4); border-radius: 12px; padding: 1rem; border: 1px solid rgba(255, 255, 255, 0.03);">
|
|
{{ referrers_chart|safe }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Browsers -->
|
|
<div class="card" style="grid-column: span 1;">
|
|
<h3 style="font-size: 1.1rem; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem;">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/></svg>
|
|
User Agent breakdown (Top Browsers)
|
|
</h3>
|
|
<div style="background-color: rgba(15, 23, 42, 0.4); border-radius: 12px; padding: 1rem; border: 1px solid rgba(255, 255, 255, 0.03);">
|
|
{{ browsers_chart|safe }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|