Design suggestion from AI. Not very useable
This commit is contained in:
@@ -1,36 +1,160 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="de" data-theme="light">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>{% block title %}{% endblock %}</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{% block title %}Vorgaben Informatiksicherheit BIT{% endblock %}</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
{% load static %}
|
||||
<link rel="stylesheet" href="{% static 'custom/css/vorgaben-ui.css' %}">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||
<a class="navbar-brand" href="#">Vorgaben</a>
|
||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
|
||||
<div class="navbar-nav">
|
||||
<a class="nav-item nav-link active" href="/dokumente">Standards</a>
|
||||
{% if user.is_staff %}
|
||||
<a class="nav-item nav-link" href="/dokumente/unvollstaendig/">Unvollständig</a>
|
||||
{% endif %}
|
||||
<a class="nav-item nav-link" href="/referenzen">Referenzen</a>
|
||||
<a class="nav-item nav-link" href="/stichworte">Stichworte</a>
|
||||
<a class="nav-item nav-link" href="/search">Suche</a>
|
||||
<!-- Enhanced Navigation -->
|
||||
<nav class="navbar navbar-expand-lg sticky-top">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="/">
|
||||
Vorgaben Informatiksicherheit
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Navigation umschalten">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav me-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'standard_list' %}">Standards</a>
|
||||
</li>
|
||||
{% if user.is_staff %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'incomplete_standards' %}">Unvollständig</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'referenz_tree' %}">Referenzen</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'stichworte_list' %}">Stichworte</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="{% url 'search' %}">Suche</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Search Bar -->
|
||||
<form class="navbar-search d-none d-lg-flex me-3" action="/search/" method="get">
|
||||
<input type="text" name="q" placeholder="Suchen..." value="{{ search_term|default:'' }}">
|
||||
<button type="submit" aria-label="Suchen">🔍</button>
|
||||
</form>
|
||||
|
||||
<!-- Dark Mode Toggle -->
|
||||
<button class="theme-toggle" onclick="toggleTheme()" aria-label="Dark Mode umschalten">
|
||||
<span id="theme-icon">🌙</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<div class="d-flex">
|
||||
<div class="col-md-2">{% block sidebar_left %}{% endblock %}</div>
|
||||
<div class="flex-fill">{% block content %}Main Content{% endblock %}</div>
|
||||
<div class="col-md-2">{% block sidebar_right %}{% endblock %}</div>
|
||||
|
||||
<!-- Breadcrumb -->
|
||||
{% block breadcrumb %}
|
||||
{% if request.resolver_match.url_name != 'startseite' and request.path != '/' %}
|
||||
<nav aria-label="Breadcrumb">
|
||||
<div class="container-fluid">
|
||||
<ol class="breadcrumb">
|
||||
<li class="breadcrumb-item"><a href="/">Startseite</a></li>
|
||||
{% block breadcrumb_items %}{% endblock %}
|
||||
</ol>
|
||||
</div>
|
||||
</nav>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<!-- Left Sidebar -->
|
||||
{% if block.sidebar_left %}
|
||||
<aside class="col-lg-2 d-none d-lg-block">
|
||||
{% block sidebar_left %}{% endblock %}
|
||||
</aside>
|
||||
{% endif %}
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<main class="{% if block.sidebar_left or block.sidebar_right %}col-lg-8{% else %}col-lg-12{% endif %} py-4">
|
||||
{% block content %}{% endblock %}
|
||||
</main>
|
||||
|
||||
<!-- Right Sidebar -->
|
||||
{% if block.sidebar_right %}
|
||||
<aside class="col-lg-2 d-none d-lg-block">
|
||||
{% block sidebar_right %}{% endblock %}
|
||||
</aside>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
<div>VorgabenUI v0.942</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container-fluid">
|
||||
<p class="mb-0">VorgabenUI v0.942 | © {{ "now"|date:"Y" }} Bundesamt für Informatik</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
// Theme Toggle
|
||||
function toggleTheme() {
|
||||
const html = document.documentElement;
|
||||
const themeIcon = document.getElementById('theme-icon');
|
||||
const currentTheme = html.getAttribute('data-theme');
|
||||
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
|
||||
|
||||
html.setAttribute('data-theme', newTheme);
|
||||
themeIcon.textContent = newTheme === 'light' ? '🌙' : '☀️';
|
||||
localStorage.setItem('theme', newTheme);
|
||||
}
|
||||
|
||||
// Load saved theme
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const savedTheme = localStorage.getItem('theme') || 'light';
|
||||
const html = document.documentElement;
|
||||
const themeIcon = document.getElementById('theme-icon');
|
||||
|
||||
html.setAttribute('data-theme', savedTheme);
|
||||
themeIcon.textContent = savedTheme === 'light' ? '🌙' : '☀️';
|
||||
});
|
||||
|
||||
// Smooth scroll for anchor links
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Active navigation highlighting
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const currentPath = window.location.pathname;
|
||||
const navLinks = document.querySelectorAll('.navbar-nav .nav-link');
|
||||
|
||||
navLinks.forEach(link => {
|
||||
if (link.getAttribute('href') === currentPath) {
|
||||
link.classList.add('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,30 +1,160 @@
|
||||
{% extends "base.html" %}
|
||||
{% load page_extras %}
|
||||
{% block title %}Suchresultate für {{ suchbegriff }}{% endblock %}
|
||||
{% block breadcrumb_items %}
|
||||
<li class="breadcrumb-item"><a href="/search/">Suche</a></li>
|
||||
<li class="breadcrumb-item active" aria-current="page">Resultate</li>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h1 class="mb-4">Suchresultate für {{ suchbegriff }}</h1>
|
||||
{% if resultat.geltungsbereich %}
|
||||
<h2>Standards mit "{{suchbegriff}}" im Geltungsbereich</h2>
|
||||
{% for standard,geltungsbereich in resultat.geltungsbereich.items %}
|
||||
<h4>{{ standard }}</h4>
|
||||
{% for typ, html in geltungsbereich %}
|
||||
<div>{{ html|highlighttext:suchbegriff|safe }}</div>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<!-- Search Form -->
|
||||
<div class="card search-form sticky-top" style="top: 1rem;">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">🔍 Suche</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="/search/" method="post" id="search-form">
|
||||
{% csrf_token %}
|
||||
|
||||
<!-- Main Search Field -->
|
||||
<div class="mb-3">
|
||||
<label for="query" class="form-label">Suchbegriff</label>
|
||||
<div class="input-group">
|
||||
<input type="text"
|
||||
class="form-control"
|
||||
id="query"
|
||||
name="q"
|
||||
placeholder="Suchbegriff eingeben …"
|
||||
value="{{ suchbegriff|default:'' }}"
|
||||
required
|
||||
maxlength="200">
|
||||
<button class="btn btn-primary" type="submit">
|
||||
Suchen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if resultat.all %}
|
||||
<h2>Vorgaben mit "{{ suchbegriff }}"</h2>
|
||||
{% for standard, vorgaben in resultat.all.items %}
|
||||
<h4>{{ standard }}</h4>
|
||||
<ul>
|
||||
{% for vorgabe in vorgaben %}
|
||||
<li><a href="{% url 'standard_detail' nummer=vorgabe.dokument.nummer %}#{{vorgabe.Vorgabennummer}}">{{vorgabe}}</a></li>
|
||||
<!-- Search Options -->
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Suchbereiche</label>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="search_in" value="standards" id="search-standards" checked>
|
||||
<label class="form-check-label" for="search-standards">
|
||||
Standards
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="search_in" value="geltungsbereich" id="search-geltungsbereich" checked>
|
||||
<label class="form-check-label" for="search-geltungsbereich">
|
||||
Geltungsbereich
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="search_in" value="vorgaben" id="search-vorgaben" checked>
|
||||
<label class="form-check-label" for="search-vorgaben">
|
||||
Vorgaben
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-outline btn-sm w-100" onclick="history.back()">
|
||||
← Zurück zur Suche
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-8">
|
||||
<!-- Search Results -->
|
||||
<div class="search-results">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h2>Suchresultate für "{{ suchbegriff }}"</h2>
|
||||
<span class="badge bg-primary">
|
||||
{% if resultat.geltungsbereich %}
|
||||
{{ resultat.geltungsbereich|length }}
|
||||
{% endif %}
|
||||
{% if resultat.all %}
|
||||
{% for standard, vorgaben in resultat.all.items %}
|
||||
{{ vorgaben|length }}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
Ergebnisse
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Geltungsbereich Results -->
|
||||
{% if resultat.geltungsbereich %}
|
||||
<div class="mb-5">
|
||||
<h3 class="h4 mb-3">📋 Standards mit "{{ suchbegriff }}" im Geltungsbereich</h3>
|
||||
{% for standard, geltungsbereich in resultat.geltungsbereich.items %}
|
||||
<div class="result-item">
|
||||
<div class="d-flex justify-content-between align-items-start mb-2">
|
||||
<h5 class="mb-1">
|
||||
<a href="/dokumente/{{ standard.nummer }}/" class="text-decoration-none">
|
||||
{{ standard.nummer }} – {{ standard.name }}
|
||||
</a>
|
||||
</h5>
|
||||
<span class="badge bg-info">Geltungsbereich</span>
|
||||
</div>
|
||||
{% for typ, html in geltungsbereich %}
|
||||
<div class="search-context">{{ html|highlighttext:suchbegriff|safe }}</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if not resultat.all %}
|
||||
<h2>Keine Resultate für "{{suchbegriff}}"</h2>
|
||||
{% endif %}
|
||||
<!-- Vorgaben Results -->
|
||||
{% if resultat.all %}
|
||||
<div class="mb-5">
|
||||
<h3 class="h4 mb-3">📝 Vorgaben mit "{{ suchbegriff }}"</h3>
|
||||
{% for standard, vorgaben in resultat.all.items %}
|
||||
<div class="result-item">
|
||||
<div class="d-flex justify-content-between align-items-start mb-3">
|
||||
<h5 class="mb-1">
|
||||
<a href="/dokumente/{{ standard.nummer }}/" class="text-decoration-none">
|
||||
{{ standard }}
|
||||
</a>
|
||||
</h5>
|
||||
<span class="badge bg-success">{{ vorgaben|length }} Vorgaben</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
{% for vorgabe in vorgaben %}
|
||||
<div class="col-md-6 mb-2">
|
||||
<div class="d-flex align-items-center">
|
||||
<span class="badge bg-secondary me-2">{{ vorgabe.Vorgabennummer }}</span>
|
||||
<a href="/dokumente/{{ vorgabe.dokument.nummer }}/#{{vorgabe.Vorgabennummer}}"
|
||||
class="text-decoration-none">
|
||||
{{ vorgabe.titel }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- No Results -->
|
||||
{% if not resultat.geltungsbereich and not resultat.all %}
|
||||
<div class="text-center py-5">
|
||||
<div class="mb-3">
|
||||
<span style="font-size: 3rem;">🔍</span>
|
||||
</div>
|
||||
<h3 class="text-muted">Keine Resultate für "{{ suchbegriff }}"</h3>
|
||||
<p class="text-muted mb-4">
|
||||
Es wurden keine Ergebnisse gefunden. Versuchen Sie es mit anderen Suchbegriffen.
|
||||
</p>
|
||||
<button class="btn btn-primary" onclick="history.back()">
|
||||
← Zurück zur Suche
|
||||
</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -1,28 +1,139 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Suche{% endblock %}
|
||||
{% block breadcrumb_items %}
|
||||
<li class="breadcrumb-item active" aria-current="page">Suche</li>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h1 class="mb-4">Suche</h1>
|
||||
|
||||
{% if error_message %}
|
||||
<div class="alert alert-danger">
|
||||
<strong>Fehler:</strong> {{ error_message }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Search form -->
|
||||
<form action="." method="post">
|
||||
{% csrf_token %}
|
||||
<!-- Search field -->
|
||||
<div class="mb-3">
|
||||
<label for="query" class="form-label">Suchbegriff</label>
|
||||
<input type="text"
|
||||
class="form-control"
|
||||
id="query"
|
||||
name="q"
|
||||
placeholder="Suchbegriff eingeben …"
|
||||
value="{{ search_term|default:'' }}"
|
||||
required
|
||||
maxlength="200">
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<!-- Search Form -->
|
||||
<div class="card search-form sticky-top" style="top: 1rem;">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">🔍 Suche</h5>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Suchen</button>
|
||||
</form>
|
||||
{% endblock %}
|
||||
<div class="card-body">
|
||||
<form action="/search/" method="post" id="search-form">
|
||||
{% csrf_token %}
|
||||
|
||||
<!-- Main Search Field -->
|
||||
<div class="mb-3">
|
||||
<label for="query" class="form-label">Suchbegriff</label>
|
||||
<div class="input-group">
|
||||
<input type="text"
|
||||
class="form-control"
|
||||
id="query"
|
||||
name="q"
|
||||
placeholder="Suchbegriff eingeben …"
|
||||
value="{{ search_term|default:'' }}"
|
||||
required
|
||||
maxlength="200">
|
||||
<button class="btn btn-primary" type="submit">
|
||||
Suchen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-outline btn-sm w-100" onclick="history.back()">
|
||||
← Zurück zur Suche
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-8">
|
||||
<!-- Search Results -->
|
||||
{% if search_term %}
|
||||
<div class="search-results">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h2>Suchresultate für "{{ search_term }}"</h2>
|
||||
<span class="badge bg-primary">
|
||||
{% if resultat.geltungsbereich %}
|
||||
{{ resultat.geltungsbereich|length }}
|
||||
{% endif %}
|
||||
{% if resultat.all %}
|
||||
{% for standard, vorgaben in resultat.all.items %}
|
||||
{{ vorgaben|length }}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
Ergebnisse
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- No Results -->
|
||||
{% if not resultat.geltungsbereich and not resultat.all %}
|
||||
<div class="text-center py-5">
|
||||
<div class="mb-3">
|
||||
<span style="font-size: 3rem;">🔍</span>
|
||||
</div>
|
||||
<h3 class="text-muted">Keine Resultate für "{{ search_term }}"</h3>
|
||||
<p class="text-muted mb-4">
|
||||
Es wurden keine Ergebnisse gefunden. Versuchen Sie es mit anderen Suchbegriffen.
|
||||
</p>
|
||||
<button class="btn btn-primary" onclick="history.back()">
|
||||
← Zurück zur Suche
|
||||
</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% else %}
|
||||
<!-- Initial Search State -->
|
||||
<div class="text-center py-5">
|
||||
<div class="mb-4">
|
||||
<span style="font-size: 4rem;">🔍</span>
|
||||
</div>
|
||||
<h2>Willkommen bei der Suche</h2>
|
||||
<p class="text-muted mb-4">
|
||||
Geben Sie einen Suchbegriff ein, um Standards, Vorgaben und Geltungsbereiche zu durchsuchen.
|
||||
</p>
|
||||
|
||||
<!-- Quick Search Examples -->
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h6 class="mb-0">Beispielsuchen</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-2">
|
||||
<div class="col-md-4">
|
||||
<button class="btn btn-outline btn-sm w-100 quick-search" data-term="Passwort">
|
||||
🔐 Passwort
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<button class="btn btn-outline btn-sm w-100 quick-search" data-term="Netzwerk">
|
||||
🌐 Netzwerk
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<button class="btn btn-outline btn-sm w-100 quick-search" data-term="Verschlüsselung">
|
||||
🔒 Verschlüsselung
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- JavaScript for quick search -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Quick search buttons
|
||||
const quickSearchButtons = document.querySelectorAll('.quick-search');
|
||||
quickSearchButtons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
const term = this.dataset.term;
|
||||
document.getElementById('query').value = term;
|
||||
document.getElementById('search-form').submit();
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
139
pages/templates/search_simple.html
Normal file
139
pages/templates/search_simple.html
Normal file
@@ -0,0 +1,139 @@
|
||||
{% extends "base.html" %}
|
||||
{% block title %}Suche{% endblock %}
|
||||
{% block breadcrumb_items %}
|
||||
<li class="breadcrumb-item active" aria-current="page">Suche</li>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="row">
|
||||
<div class="col-lg-4">
|
||||
<!-- Search Form -->
|
||||
<div class="card search-form sticky-top" style="top: 1rem;">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">🔍 Suche</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form action="/search/" method="post" id="search-form">
|
||||
{% csrf_token %}
|
||||
|
||||
<!-- Main Search Field -->
|
||||
<div class="mb-3">
|
||||
<label for="query" class="form-label">Suchbegriff</label>
|
||||
<div class="input-group">
|
||||
<input type="text"
|
||||
class="form-control"
|
||||
id="query"
|
||||
name="q"
|
||||
placeholder="Suchbegriff eingeben …"
|
||||
value="{{ search_term|default:'' }}"
|
||||
required
|
||||
maxlength="200">
|
||||
<button class="btn btn-primary" type="submit">
|
||||
Suchen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="btn btn-outline btn-sm w-100" onclick="history.back()">
|
||||
← Zurück zur Suche
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-8">
|
||||
<!-- Search Results -->
|
||||
{% if search_term %}
|
||||
<div class="search-results">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h2>Suchresultate für "{{ search_term }}"</h2>
|
||||
<span class="badge bg-primary">
|
||||
{% if resultat.geltungsbereich %}
|
||||
{{ resultat.geltungsbereich|length }}
|
||||
{% endif %}
|
||||
{% if resultat.all %}
|
||||
{% for standard, vorgaben in resultat.all.items %}
|
||||
{{ vorgaben|length }}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
Ergebnisse
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- No Results -->
|
||||
{% if not resultat.geltungsbereich and not resultat.all %}
|
||||
<div class="text-center py-5">
|
||||
<div class="mb-3">
|
||||
<span style="font-size: 3rem;">🔍</span>
|
||||
</div>
|
||||
<h3 class="text-muted">Keine Resultate für "{{ search_term }}"</h3>
|
||||
<p class="text-muted mb-4">
|
||||
Es wurden keine Ergebnisse gefunden. Versuchen Sie es mit anderen Suchbegriffen.
|
||||
</p>
|
||||
<button class="btn btn-primary" onclick="history.back()">
|
||||
← Zurück zur Suche
|
||||
</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% else %}
|
||||
<!-- Initial Search State -->
|
||||
<div class="text-center py-5">
|
||||
<div class="mb-4">
|
||||
<span style="font-size: 4rem;">🔍</span>
|
||||
</div>
|
||||
<h2>Willkommen bei der Suche</h2>
|
||||
<p class="text-muted mb-4">
|
||||
Geben Sie einen Suchbegriff ein, um Standards, Vorgaben und Geltungsbereiche zu durchsuchen.
|
||||
</p>
|
||||
|
||||
<!-- Quick Search Examples -->
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h6 class="mb-0">Beispielsuchen</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row g-2">
|
||||
<div class="col-md-4">
|
||||
<button class="btn btn-outline btn-sm w-100 quick-search" data-term="Passwort">
|
||||
🔐 Passwort
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<button class="btn btn-outline btn-sm w-100 quick-search" data-term="Netzwerk">
|
||||
🌐 Netzwerk
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<button class="btn btn-outline btn-sm w-100 quick-search" data-term="Verschlüsselung">
|
||||
🔒 Verschlüsselung
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- JavaScript for quick search -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Quick search buttons
|
||||
const quickSearchButtons = document.querySelectorAll('.quick-search');
|
||||
quickSearchButtons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
const term = this.dataset.term;
|
||||
document.getElementById('query').value = term;
|
||||
document.getElementById('search-form').submit();
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -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