feat: Add print functionality and improve layout for various templates
This commit is contained in:
@@ -98,47 +98,108 @@
|
||||
|
||||
{% block content %}
|
||||
<section class="page-hero">
|
||||
<h1>Leistungen für Bildungseinrichtungen</h1>
|
||||
<p>Invario bündelt die Leistungen so, dass Schulen sofort verstehen, was sie bekommen: Inventarverwaltung für 250 € pro Jahr, Bibliothekssystem für 100 € pro Jahr für Schulen unter 400 Schülern und 150 € pro Jahr für größere Schulen, dazu Ticket-Support, Detailierte Video Schulung und dokumentierte Sicherheit.</p>
|
||||
<div class="bento" aria-label="Kernleistungen">
|
||||
<div class="bento-item"><strong>Schulen</strong>5-Minuten-Start, Zettelwirtschaft vermeiden, intuitive Web-App ohne Installation.</div>
|
||||
<div class="bento-item"><strong>Schulträger</strong>Rechtssicherheit, revisionssichere PDF-Berichte und Serverstandort Deutschland.</div>
|
||||
<h1>Module & Leitfäden</h1>
|
||||
<p>Diese Seite stellt vier austauschbare Module dar. Jedes Modul ist als kompakter, wiki‑ähnlicher Leitfaden gehalten — übersichtlich, schnell zu scannen und leicht editierbar.</p>
|
||||
</section>
|
||||
|
||||
<section class="module-shell" aria-label="Module Übersicht">
|
||||
<div class="module-nav" role="navigation" aria-label="Module Navigation">
|
||||
<ul>
|
||||
<li class="active" data-module="mod1"><a href="#mod1">Modul 1</a></li>
|
||||
<li data-module="mod2"><a href="#mod2">Modul 2</a></li>
|
||||
<li data-module="mod3"><a href="#mod3">Modul 3</a></li>
|
||||
<li data-module="mod4"><a href="#mod4">Modul 4</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="module-content" id="moduleContent">
|
||||
<article id="mod1" class="module-panel">
|
||||
<h2>Modul 1 — Titel</h2>
|
||||
<p class="lede">Kurze Zusammenfassung des Moduls. (Platzhalter — du ersetzt den Inhalt später.)</p>
|
||||
<h3>Was ist das?</h3>
|
||||
<p>Beschreibe hier den Zweck, Zielgruppe und schnelle Anwendungsfälle.</p>
|
||||
<h3>Schnellstart</h3>
|
||||
<ol>
|
||||
<li>Schritt 1 — Kurzer Tipp.</li>
|
||||
<li>Schritt 2 — Konfigurationsempfehlung.</li>
|
||||
<li>Schritt 3 — Prüfpunkte.</li>
|
||||
</ol>
|
||||
<h3>FAQs</h3>
|
||||
<dl>
|
||||
<dt>Frage: Wie mache ich X?</dt>
|
||||
<dd>Antwort: Kurze Anleitung.</dd>
|
||||
</dl>
|
||||
</article>
|
||||
|
||||
<article id="mod2" class="module-panel hidden">
|
||||
<h2>Modul 2 — Titel</h2>
|
||||
<p class="lede">Platzhaltertext für Modul 2.</p>
|
||||
</article>
|
||||
|
||||
<article id="mod3" class="module-panel hidden">
|
||||
<h2>Modul 3 — Titel</h2>
|
||||
<p class="lede">Platzhaltertext für Modul 3.</p>
|
||||
</article>
|
||||
|
||||
<article id="mod4" class="module-panel hidden">
|
||||
<h2>Modul 4 — Titel</h2>
|
||||
<p class="lede">Platzhaltertext für Modul 4.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="service-grid">
|
||||
<article class="service-card">
|
||||
<h2>Digitale Inventarverwaltung</h2>
|
||||
<p>Alle Geräte, Räume und Zuständigkeiten an einem Ort. Das verkürzt Suchzeiten und reduziert Rückfragen.</p>
|
||||
</article>
|
||||
<article class="service-card">
|
||||
<h2>Instanz- und Fristenkontrolle</h2>
|
||||
<p>Instanzzustände und wichtige Wartungsfristen werden transparent angezeigt, inklusive klarer Hinweise für den Betrieb.</p>
|
||||
</article>
|
||||
<article class="service-card">
|
||||
<h2>Support mit klaren Prioritäten</h2>
|
||||
<p>Störungen werden strukturiert aufgenommen, priorisiert und mit nachvollziehbarem Status bearbeitet.</p>
|
||||
</article>
|
||||
<article class="service-card">
|
||||
<h2>DSGVO-konforme Dokumentation</h2>
|
||||
<p>Vorgänge und Änderungen bleiben nachvollziehbar dokumentiert, damit Prüfungen und Abstimmungen einfacher werden.</p>
|
||||
</article>
|
||||
<article class="service-card">
|
||||
<h2>Einrichtung und Schulung</h2>
|
||||
<p>Die Einführung erfolgt in klaren, alltagsnahen Schritten, damit der laufende Betrieb stabil bleibt.</p>
|
||||
</article>
|
||||
<article class="service-card">
|
||||
<h2>Begleitung im laufenden Betrieb</h2>
|
||||
<p>Feste Ansprechpartner unterstützen bei Fragen, Erweiterungen und organisatorischen Anpassungen.</p>
|
||||
</article>
|
||||
<article class="service-card">
|
||||
<h2>Technische Sicherheitsbasis</h2>
|
||||
<p>Rollenrechte, sichere Sitzungen, Schutz-Header und protokollierte Änderungen bilden die Grundlage für einen verlässlichen Betrieb.</p>
|
||||
</article>
|
||||
</section>
|
||||
<style>
|
||||
/* Module page styles */
|
||||
.module-shell { display: grid; grid-template-columns: 260px 1fr; gap: 1rem; margin-top: 1rem; }
|
||||
.module-nav { border: 1px solid #d8dfd7; border-radius: 10px; background: #fff; padding: 0.6rem; }
|
||||
.module-nav ul { list-style: none; margin: 0; padding: 0; }
|
||||
.module-nav li { margin: 0.25rem 0; }
|
||||
.module-nav a { display: block; padding: 0.6rem 0.8rem; color: #173f46; text-decoration: none; border-radius: 8px; }
|
||||
.module-nav li.active a { background: linear-gradient(90deg,#eaf6f4,#f3fbf8); font-weight:700; }
|
||||
.module-content { border: 1px solid #d8dfd7; border-radius: 12px; padding: 1.1rem; background: #fff; }
|
||||
.module-panel { max-width: 80ch; }
|
||||
.module-panel.hidden { display: none; }
|
||||
.module-panel h2 { margin-top: 0; color: #133e40; }
|
||||
.module-panel .lede { color: #455e5e; font-weight: 600; }
|
||||
.module-panel h3 { margin-top: 1rem; color: #22595b; }
|
||||
.module-panel ol { margin-left: 1.1rem; }
|
||||
|
||||
<section class="highlight">
|
||||
<h2>Besonders geeignet für Teams mit wenig Zeit</h2>
|
||||
<p>Die Oberfläche ist bewusst reduziert aufgebaut: große, klare Bedienelemente, eindeutige Bezeichnungen und kurze Klickwege für tägliche Verwaltungsaufgaben.</p>
|
||||
</section>
|
||||
@media (max-width: 900px) {
|
||||
.module-shell { grid-template-columns: 1fr; }
|
||||
.module-nav { order: 2; }
|
||||
.module-content { order: 1; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Simple client-side module switching for an immediate wiki-like experience
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var navItems = document.querySelectorAll('.module-nav li');
|
||||
navItems.forEach(function (li) {
|
||||
li.addEventListener('click', function (ev) {
|
||||
ev.preventDefault();
|
||||
var target = li.getAttribute('data-module');
|
||||
if (!target) return;
|
||||
// activate nav
|
||||
navItems.forEach(function (n) { n.classList.remove('active'); });
|
||||
li.classList.add('active');
|
||||
// show panel
|
||||
document.querySelectorAll('.module-panel').forEach(function (p) { p.classList.add('hidden'); });
|
||||
var panel = document.getElementById(target);
|
||||
if (panel) panel.classList.remove('hidden');
|
||||
// update hash
|
||||
history.replaceState(null, '', '#'+target);
|
||||
// scroll into view on small screens
|
||||
if (window.innerWidth < 900) panel.scrollIntoView({ behavior: 'smooth' });
|
||||
});
|
||||
});
|
||||
|
||||
// If hash present on load, open that module
|
||||
var hash = window.location.hash.replace('#','');
|
||||
if (hash) {
|
||||
var initial = document.querySelector('.module-nav li[data-module="'+hash+'"]');
|
||||
if (initial) initial.click();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user