336 lines
9.7 KiB
HTML
336 lines
9.7 KiB
HTML
{% extends "base.html" %}
|
||
{% block title %}Startseite - Vorgaben Informatiksicherheit BIT{% endblock %}
|
||
|
||
{% block content %}
|
||
<!-- Hero Section -->
|
||
<div class="card bg-primary text-white mb-5">
|
||
<div class="card-body text-center py-5">
|
||
<h1 class="display-4 mb-3">🔒 Vorgaben Informatiksicherheit BIT</h1>
|
||
<p class="lead mb-4">
|
||
Zentraler Zugang zu allen Sicherheitsstandards, Vorgaben und Richtlinien des Bundesamtes für Informatik
|
||
</p>
|
||
<div class="d-flex justify-content-center gap-3">
|
||
<a href="/dokumente/" class="btn btn-light btn-lg">
|
||
📋 Standards durchsuchen
|
||
</a>
|
||
<a href="/search/" class="btn btn-outline-light btn-lg">
|
||
🔍 Volltextsuche
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Statistics Dashboard -->
|
||
<div class="row mb-5">
|
||
<div class="col-lg-3 col-md-6 mb-4">
|
||
<div class="card h-100 text-center">
|
||
<div class="card-body">
|
||
<div class="mb-3">
|
||
<span style="font-size: 2.5rem;">📋</span>
|
||
</div>
|
||
<h3 class="h2 text-primary mb-2">{{ dokumente|length }}</h3>
|
||
<p class="text-muted mb-0">Standards</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-3 col-md-6 mb-4">
|
||
<div class="card h-100 text-center">
|
||
<div class="card-body">
|
||
<div class="mb-3">
|
||
<span style="font-size: 2.5rem;">📝</span>
|
||
</div>
|
||
<h3 class="h2 text-success mb-2">
|
||
{% if total_vorgaben %}{{ total_vorgaben }}{% else %}--{% endif %}
|
||
</h3>
|
||
<p class="text-muted mb-0">Vorgaben</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-3 col-md-6 mb-4">
|
||
<div class="card h-100 text-center">
|
||
<div class="card-body">
|
||
<div class="mb-3">
|
||
<span style="font-size: 2.5rem;">🏷️</span>
|
||
</div>
|
||
<h3 class="h2 text-info mb-2">
|
||
{% if total_stichworte %}{{ total_stichworte }}{% else %}--{% endif %}
|
||
</h3>
|
||
<p class="text-muted mb-0">Stichworte</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-3 col-md-6 mb-4">
|
||
<div class="card h-100 text-center">
|
||
<div class="card-body">
|
||
<div class="mb-3">
|
||
<span style="font-size: 2.5rem;">🔗</span>
|
||
</div>
|
||
<h3 class="h2 text-warning mb-2">
|
||
{% if total_referenzen %}{{ total_referenzen }}{% else %}--{% endif %}
|
||
</h3>
|
||
<p class="text-muted mb-0">Referenzen</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Quick Actions -->
|
||
<div class="row mb-5">
|
||
<div class="col-12">
|
||
<h2 class="h4 mb-4">⚡ Schnellzugriffe</h2>
|
||
</div>
|
||
<div class="col-lg-4 col-md-6 mb-4">
|
||
<div class="card h-100">
|
||
<div class="card-body text-center">
|
||
<div class="mb-3">
|
||
<span style="font-size: 2rem;">📋</span>
|
||
</div>
|
||
<h5 class="card-title">Standards</h5>
|
||
<p class="card-text text-muted">
|
||
Alle Sicherheitsstandards durchsuchen und filtern
|
||
</p>
|
||
<a href="/dokumente/" class="btn btn-primary">
|
||
Standards anzeigen
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4 col-md-6 mb-4">
|
||
<div class="card h-100">
|
||
<div class="card-body text-center">
|
||
<div class="mb-3">
|
||
<span style="font-size: 2rem;">🔍</span>
|
||
</div>
|
||
<h5 class="card-title">Suche</h5>
|
||
<p class="card-text text-muted">
|
||
Volltextsuche in allen Standards und Vorgaben
|
||
</p>
|
||
<a href="/search/" class="btn btn-primary">
|
||
Suche starten
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4 col-md-6 mb-4">
|
||
<div class="card h-100">
|
||
<div class="card-body text-center">
|
||
<div class="mb-3">
|
||
<span style="font-size: 2rem;">🏷️</span>
|
||
</div>
|
||
<h5 class="card-title">Stichworte</h5>
|
||
<p class="card-text text-muted">
|
||
Nach Stichworten browsen und entdecken
|
||
</p>
|
||
<a href="/stichworte/" class="btn btn-primary">
|
||
Stichworte anzeigen
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-4 col-md-6 mb-4">
|
||
<div class="card h-100">
|
||
<div class="card-body text-center">
|
||
<div class="mb-3">
|
||
<span style="font-size: 2rem;">🔗</span>
|
||
</div>
|
||
<h5 class="card-title">Referenzen</h5>
|
||
<p class="card-text text-muted">
|
||
Referenzbaum und Querverbindungen
|
||
</p>
|
||
<a href="/referenzen/" class="btn btn-primary">
|
||
Referenzen anzeigen
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% if user.is_staff %}
|
||
<div class="col-lg-4 col-md-6 mb-4">
|
||
<div class="card h-100">
|
||
<div class="card-body text-center">
|
||
<div class="mb-3">
|
||
<span style="font-size: 2rem;">⚠️</span>
|
||
</div>
|
||
<h5 class="card-title">Unvollständig</h5>
|
||
<p class="card-text text-muted">
|
||
Unvollständige Standards bearbeiten
|
||
</p>
|
||
<a href="/dokumente/unvollstaendig/" class="btn btn-warning">
|
||
Bearbeiten
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<!-- Recent Standards -->
|
||
<div class="row mb-5">
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<h3 class="h5 mb-0">📋 Aktuell erfasste Standards</h3>
|
||
<a href="/dokumente/" class="btn btn-outline btn-sm">
|
||
Alle anzeigen →
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
{% if dokumente %}
|
||
<div class="row">
|
||
{% for standard in dokumente|slice:":6" %}
|
||
<div class="col-lg-4 col-md-6 mb-3">
|
||
<div class="card h-100">
|
||
<div class="card-body">
|
||
<h6 class="card-title">
|
||
<a href="{% url 'standard_detail' nummer=standard.nummer %}" class="text-decoration-none">
|
||
{{ standard.nummer }} – {{ standard.name|truncatechars:40 }}
|
||
</a>
|
||
</h6>
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<small class="text-muted">
|
||
{{ standard.gueltigkeit_von|default_if_none:"-" }}
|
||
</small>
|
||
{% if not standard.aktiv %}
|
||
<span class="badge bg-danger">Inaktiv</span>
|
||
{% else %}
|
||
<span class="badge bg-success">Aktiv</span>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
{% else %}
|
||
<div class="text-center py-4">
|
||
<p class="text-muted mb-0">Keine Standards gefunden.</p>
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Quick Search -->
|
||
<div class="row mb-5">
|
||
<div class="col-12">
|
||
<div class="card bg-light">
|
||
<div class="card-body text-center py-4">
|
||
<h3 class="h5 mb-3">🔍 Schnellsuche</h3>
|
||
<form action="/search/" method="get" class="row justify-content-center">
|
||
<div class="col-md-6">
|
||
<div class="input-group">
|
||
<input type="text"
|
||
class="form-control"
|
||
name="q"
|
||
placeholder="Suchbegriff eingeben..."
|
||
maxlength="200">
|
||
<button class="btn btn-primary" type="submit">
|
||
Suchen
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Help Section -->
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h3 class="h5 mb-0">💡 Hinweise zur Nutzung</h3>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="row">
|
||
<div class="col-md-4 mb-3">
|
||
<h6 class="text-primary">🔍 Suchen</h6>
|
||
<p class="small text-muted mb-0">
|
||
Nutzen Sie die Volltextsuche um gezielt nach Begriffen in allen Standards zu suchen.
|
||
</p>
|
||
</div>
|
||
<div class="col-md-4 mb-3">
|
||
<h6 class="text-primary">📋 Filtern</h6>
|
||
<p class="small text-muted mb-0">
|
||
Filtern Sie Standards nach Status, Gültigkeit oder anderen Kriterien.
|
||
</p>
|
||
</div>
|
||
<div class="col-md-4 mb-3">
|
||
<h6 class="text-primary">🏷️ Stichworte</h6>
|
||
<p class="small text-muted mb-0">
|
||
Entdecken Sie verwandte Inhalte durch die Stichwort-Navigation.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- JavaScript for dynamic interactions -->
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// Add hover effects to cards
|
||
const cards = document.querySelectorAll('.card');
|
||
cards.forEach(card => {
|
||
card.addEventListener('mouseenter', function() {
|
||
this.style.transform = 'translateY(-2px)';
|
||
this.style.transition = 'all 0.2s ease';
|
||
});
|
||
|
||
card.addEventListener('mouseleave', function() {
|
||
this.style.transform = 'translateY(0)';
|
||
});
|
||
});
|
||
|
||
// Animate statistics on page load
|
||
const statNumbers = document.querySelectorAll('.h2');
|
||
statNumbers.forEach((stat, index) => {
|
||
setTimeout(() => {
|
||
stat.style.opacity = '0';
|
||
stat.style.transform = 'scale(0.8)';
|
||
stat.style.transition = 'all 0.5s ease';
|
||
|
||
setTimeout(() => {
|
||
stat.style.opacity = '1';
|
||
stat.style.transform = 'scale(1)';
|
||
}, 100);
|
||
}, index * 100);
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<style>
|
||
.card {
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.card:hover {
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.display-4 {
|
||
font-weight: 700;
|
||
}
|
||
|
||
.btn-lg {
|
||
padding: 0.75rem 2rem;
|
||
font-weight: 500;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.display-4 {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.btn-lg {
|
||
padding: 0.5rem 1.5rem;
|
||
font-size: 1rem;
|
||
}
|
||
}
|
||
</style>
|
||
{% endblock %}
|