| {% extends "base.html" %} |
|
|
| {% block title %}Statistik — PromptGarage{% endblock %} |
|
|
| {% block content %} |
| <div class="hero"> |
| <h1>Statistik</h1> |
| <p class="subtitle">Ein Blick auf deine Prompt-Sammlung</p> |
| </div> |
|
|
| |
| <div class="stats-grid"> |
| <div class="stat-card"> |
| <div class="stat-value">{{ stats.total }}</div> |
| <div class="stat-label">Prompts gesamt</div> |
| </div> |
| <div class="stat-card highlight"> |
| <div class="stat-value" style="background: linear-gradient(135deg, var(--yellow), var(--peach)); -webkit-background-clip: text;">{{ stats.starred }}</div> |
| <div class="stat-label">⭐ Gestartet</div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-value">{{ stats.by_tag|length }}</div> |
| <div class="stat-label">Eindeutige Tags</div> |
| </div> |
| </div> |
|
|
| |
| <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 1rem; margin-top: 2rem;"> |
| |
| <div class="card"> |
| <h3 class="mb-4" style="font-size: 1.1rem; font-weight: 600;">Top Tags</h3> |
| {% if top_tags %} |
| <div style="display: flex; flex-direction: column; gap: 0.75rem;"> |
| {% for tag, count in top_tags %} |
| <a href="/prompts?tag={{ tag|urlencode }}" class="flex-between" style="text-decoration: none; color: inherit; padding: 0.5rem; border-radius: 8px; transition: background 0.15s;" onmouseover="this.style.background='var(--card-hover)'" onmouseout="this.style.background='transparent'"> |
| <span class="badge badge-mauve">{{ tag }}</span> |
| <span class="text-muted font-mono text-sm">{{ count }}</span> |
| </a> |
| {% endfor %} |
| </div> |
| {% else %} |
| <p class="text-muted">Keine Tags vorhanden.</p> |
| {% endif %} |
| </div> |
|
|
| |
| <div class="card"> |
| <h3 class="mb-4" style="font-size: 1.1rem; font-weight: 600;">Bewertungsverteilung</h3> |
| {% if stats.total > 0 %} |
| <div style="display: flex; flex-direction: column; gap: 0.75rem;"> |
| {% for rating, count in rating_dist.items() %} |
| <div class="flex-between"> |
| <span style="min-width: 100px;"> |
| {% if rating == 0 %}<span class="text-muted">Unbewertet</span> |
| {% else %} |
| <span class="star-filled">{% for i in range(rating) %}★{% endfor %}</span><span class="star-empty">{% for i in range(5 - rating) %}☆{% endfor %}</span> |
| {% endif %} |
| </span> |
| <div style="flex: 1; margin: 0 1rem; background: var(--mantle); height: 20px; border-radius: 10px; overflow: hidden;"> |
| <div style="background: linear-gradient(90deg, var(--mauve), var(--blue)); height: 100%; width: {{ (count / stats.total * 100)|round }}%; border-radius: 10px; transition: width 0.3s;"></div> |
| </div> |
| <span class="text-muted font-mono text-sm">{{ count }}</span> |
| </div> |
| {% endfor %} |
| </div> |
| {% else %} |
| <p class="text-muted">Keine Prompts vorhanden.</p> |
| {% endif %} |
| </div> |
| </div> |
|
|
| |
| {% if stats.by_source or stats.by_model %} |
| <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; margin-top: 2rem;"> |
| {% if stats.by_source %} |
| <div class="card"> |
| <h3 class="mb-4" style="font-size: 1.1rem; font-weight: 600;">Nach Quelle</h3> |
| <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;"> |
| {% for source, count in stats.by_source.items() %} |
| <span class="badge badge-blue">{{ source or 'unbekannt' }} <span class="text-muted">({{ count }})</span></span> |
| {% endfor %} |
| </div> |
| </div> |
| {% endif %} |
|
|
| {% if stats.by_model %} |
| <div class="card"> |
| <h3 class="mb-4" style="font-size: 1.1rem; font-weight: 600;">Nach Modell</h3> |
| <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;"> |
| {% for model, count in stats.by_model.items() %} |
| <span class="badge badge-green">{{ model }} <span class="text-muted">({{ count }})</span></span> |
| {% endfor %} |
| </div> |
| </div> |
| {% endif %} |
| </div> |
| {% endif %} |
| {% endblock %} |
|
|
