Design suggestion from AI. Not very useable
This commit is contained in:
@@ -1,10 +1,335 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Startseite - Vorgaben Informatiksicherheit BIT{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h1>Vorgaben Informatiksicherheit BIT</h1>
|
||||
<h2>Aktuell erfasste Standards</h2>
|
||||
<ul>
|
||||
{% for standard in dokumente %}
|
||||
<li><a href="{% url 'standard_detail' nummer=standard.nummer %}">{{ standard }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<!-- 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 %}
|
||||
|
||||
Reference in New Issue
Block a user