161 lines
5.2 KiB
HTML
161 lines
5.2 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html lang="de" data-theme="light">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<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>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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>
|