modified: templates/base.html
modified: templates/index.html
This commit is contained in:
SimolZimol
@@ -175,6 +175,63 @@
|
||||
.btn[title]:disabled {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
/* Neue Kategorie-Statistiken */
|
||||
.category-stat {
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
border: none;
|
||||
min-height: 120px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.category-stat:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.stat-number-cat {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.tech-stat {
|
||||
border: 1px solid #e0e0e0;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.tech-stat:hover {
|
||||
background-color: rgba(0,0,0,0.05) !important;
|
||||
}
|
||||
|
||||
/* Verbesserte Header-Stats */
|
||||
.header-stats {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
|
||||
padding: 30px !important;
|
||||
border-radius: 15px !important;
|
||||
margin-bottom: 30px !important;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center !important;
|
||||
color: white !important;
|
||||
padding: 15px !important;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
display: block !important;
|
||||
font-size: 2.5em !important;
|
||||
font-weight: bold !important;
|
||||
margin-bottom: 5px !important;
|
||||
}
|
||||
|
||||
.stat-item span:last-child {
|
||||
font-size: 0.9em !important;
|
||||
opacity: 0.9 !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -1,30 +1,133 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<!-- Haupt-Statistiken -->
|
||||
<div class="header-stats">
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
<div class="stat-item">
|
||||
<i class="fas fa-box text-white mb-2" style="font-size: 1.5em;"></i>
|
||||
<span class="stat-number">{{ projects|length }}</span>
|
||||
<span>Installierte Apps</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="stat-item">
|
||||
<i class="fas fa-play-circle text-white mb-2" style="font-size: 1.5em;"></i>
|
||||
<span class="stat-number">{{ projects|selectattr('status', 'equalto', 'running')|list|length }}</span>
|
||||
<span>Laufende Apps</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="stat-item">
|
||||
<i class="fas fa-cloud-download-alt text-white mb-2" style="font-size: 1.5em;"></i>
|
||||
<span class="stat-number">{{ config.projects|length if config.projects else 0 }}</span>
|
||||
<span>Verfügbare Apps</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<div class="stat-item">
|
||||
<i class="fab fa-docker text-white mb-2" style="font-size: 1.5em;"></i>
|
||||
<span class="stat-number">{{ projects|selectattr('has_dockerfile', 'equalto', true)|list|length }}</span>
|
||||
<span>Docker Apps</span>
|
||||
<span>Docker-fähig</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Erweiterte Kategorie-Statistiken -->
|
||||
<div class="row mb-4">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="card-title mb-0">
|
||||
<i class="fas fa-chart-pie me-2"></i>App-Kategorien & Typen
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<!-- Web Applications -->
|
||||
<div class="col-md-3 col-sm-6 mb-3">
|
||||
<div class="category-stat text-center p-3 rounded" style="background: linear-gradient(45deg, #667eea, #764ba2); color: white;">
|
||||
<i class="fas fa-globe fa-2x mb-2"></i>
|
||||
<div class="stat-number-cat">
|
||||
{% set web_apps = config.projects|selectattr('category', 'equalto', 'Web Application')|list if config.projects else [] %}
|
||||
{{ web_apps|length }}
|
||||
</div>
|
||||
<small>Web Applications</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Productivity -->
|
||||
<div class="col-md-3 col-sm-6 mb-3">
|
||||
<div class="category-stat text-center p-3 rounded" style="background: linear-gradient(45deg, #f093fb, #f5576c); color: white;">
|
||||
<i class="fas fa-tasks fa-2x mb-2"></i>
|
||||
<div class="stat-number-cat">
|
||||
{% set productivity_apps = config.projects|selectattr('category', 'equalto', 'Productivity')|list if config.projects else [] %}
|
||||
{{ productivity_apps|length }}
|
||||
</div>
|
||||
<small>Productivity</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Media & Entertainment -->
|
||||
<div class="col-md-3 col-sm-6 mb-3">
|
||||
<div class="category-stat text-center p-3 rounded" style="background: linear-gradient(45deg, #4facfe, #00f2fe); color: white;">
|
||||
<i class="fas fa-play fa-2x mb-2"></i>
|
||||
<div class="stat-number-cat">
|
||||
{% set media_apps = config.projects|selectattr('category', 'equalto', 'Media & Entertainment')|list if config.projects else [] %}
|
||||
{{ media_apps|length }}
|
||||
</div>
|
||||
<small>Media & Entertainment</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Web Server -->
|
||||
<div class="col-md-3 col-sm-6 mb-3">
|
||||
<div class="category-stat text-center p-3 rounded" style="background: linear-gradient(45deg, #fa709a, #fee140); color: white;">
|
||||
<i class="fas fa-server fa-2x mb-2"></i>
|
||||
<div class="stat-number-cat">
|
||||
{% set server_apps = config.projects|selectattr('category', 'equalto', 'Web Server')|list if config.projects else [] %}
|
||||
{{ server_apps|length }}
|
||||
</div>
|
||||
<small>Web Server</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Zusätzliche Technologie-Statistiken -->
|
||||
<div class="row mt-3">
|
||||
<div class="col-md-4 col-sm-6 mb-2">
|
||||
<div class="tech-stat d-flex align-items-center p-2 rounded" style="background: #e3f2fd;">
|
||||
<i class="fab fa-js-square text-warning me-2 fa-lg"></i>
|
||||
<span class="me-auto"><strong>JavaScript/Node.js:</strong></span>
|
||||
<span class="badge bg-warning">
|
||||
{% set js_apps = config.projects|selectattr('language', 'equalto', 'JavaScript')|list if config.projects else [] %}
|
||||
{{ js_apps|length }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-6 mb-2">
|
||||
<div class="tech-stat d-flex align-items-center p-2 rounded" style="background: #f3e5f5;">
|
||||
<i class="fab fa-python text-success me-2 fa-lg"></i>
|
||||
<span class="me-auto"><strong>Python:</strong></span>
|
||||
<span class="badge bg-success">
|
||||
{% set python_apps = config.projects|selectattr('language', 'equalto', 'Python')|list if config.projects else [] %}
|
||||
{{ python_apps|length }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 col-sm-6 mb-2">
|
||||
<div class="tech-stat d-flex align-items-center p-2 rounded" style="background: #fce4ec;">
|
||||
<i class="fas fa-code text-primary me-2 fa-lg"></i>
|
||||
<span class="me-auto"><strong>Andere:</strong></span>
|
||||
<span class="badge bg-primary">
|
||||
{% set other_apps = config.projects|rejectattr('language', 'in', ['JavaScript', 'Python'])|list if config.projects else [] %}
|
||||
{{ other_apps|length }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user