adebaumann/vgui-cicd
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Design suggestion from AI. Not very useable

Browse Source
This commit is contained in:
Adrian A. Baumann
2025-11-05 10:16:56 +01:00
parent 0cd09d0878
commit 32917113f2
14 changed files with 3257 additions and 269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
pages/templates/base.html
View File

@@ -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>