312 lines
8.2 KiB
HTML
312 lines
8.2 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% set meta_description = "Invario Leistungen für Schulen: Inventarverwaltung, Bibliothekssystem, Support, Sicherheit und Einführung ohne Installation. Klar für Schulen und Schulträger gegliedert." %}
|
|
|
|
{% block title %}Leistungen für Schulen | Invario{% endblock %}
|
|
|
|
{% block head %}
|
|
{{ super() }}
|
|
<style>
|
|
.page-hero {
|
|
padding: 1.4rem 1.5rem;
|
|
border-radius: 20px;
|
|
border: 1px solid #d6dfda;
|
|
background: linear-gradient(135deg, #ffffff 0%, #f5f8f4 100%);
|
|
box-shadow: 0 16px 34px rgba(25, 45, 41, 0.06);
|
|
}
|
|
|
|
.page-hero h1 {
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
|
|
.page-hero p {
|
|
max-width: 72ch;
|
|
color: #496267;
|
|
line-height: 1.65;
|
|
}
|
|
|
|
.service-grid {
|
|
margin-top: 1rem;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 0.85rem;
|
|
}
|
|
|
|
.service-card,
|
|
.highlight {
|
|
border-radius: 18px;
|
|
border: 1px solid #d8dfd7;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.service-card {
|
|
padding: 1rem;
|
|
box-shadow: 0 10px 26px rgba(25, 45, 41, 0.04);
|
|
}
|
|
|
|
.service-card h2 {
|
|
color: #235159;
|
|
margin-bottom: 0.45rem;
|
|
font-size: clamp(1.05rem, 1.8vw, 1.35rem);
|
|
}
|
|
|
|
.service-card p {
|
|
color: #496267;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.highlight {
|
|
margin-top: 1rem;
|
|
padding: 1.2rem;
|
|
background: linear-gradient(135deg, #f6fbf7 0%, #eef5ef 100%);
|
|
}
|
|
|
|
.highlight h2 {
|
|
color: #2a4d53;
|
|
margin-bottom: 0.4rem;
|
|
font-size: clamp(1.1rem, 2.2vw, 1.55rem);
|
|
}
|
|
|
|
.bento {
|
|
margin-top: 1rem;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 0.85rem;
|
|
}
|
|
|
|
.bento-item {
|
|
padding: 1rem;
|
|
border-radius: 16px;
|
|
border: 1px solid #d8dfd7;
|
|
background: #ffffff;
|
|
}
|
|
|
|
.bento-item strong {
|
|
display: block;
|
|
margin-bottom: 0.25rem;
|
|
color: #173f46;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.service-grid,
|
|
.bento {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<section class="page-hero">
|
|
<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">Inventarsystem</a></li>
|
|
<li data-module="mod2"><a href="#mod2">Bibliothekssystem</a></li>
|
|
<li data-module="mod3"><a href="#mod3">Terminplaner</a></li>
|
|
<li data-module="mod4"><a href="#mod4">Mail Add On</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="module-content" id="moduleContent">
|
|
<article id="mod1" class="module-panel">
|
|
<h2>Inventarsystem</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>Bibliothekssystem</h2>
|
|
<p class="lede">Platzhaltertext für Modul 2.</p>
|
|
</article>
|
|
|
|
<article id="mod3" class="module-panel hidden">
|
|
<h2>Terminplaner</h2>
|
|
<p class="lede">Platzhaltertext für Modul 3.</p>
|
|
</article>
|
|
|
|
<article id="mod4" class="module-panel hidden">
|
|
<h2>Mail Add On</h2>
|
|
<p class="lede">Platzhaltertext für Modul 4.</p>
|
|
</article>
|
|
</div>
|
|
</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; }
|
|
.module-panel p,
|
|
.module-panel li,
|
|
.module-panel dd {
|
|
line-height: 1.75;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.module-shell { grid-template-columns: 1fr; }
|
|
.module-nav { order: 2; }
|
|
.module-content { order: 1; }
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.page-hero {
|
|
padding: 1.15rem 1rem;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.page-hero h1 {
|
|
font-size: clamp(1.55rem, 7vw, 2rem);
|
|
}
|
|
|
|
.page-hero p {
|
|
max-width: none;
|
|
font-size: 1.02rem;
|
|
line-height: 1.72;
|
|
}
|
|
|
|
.module-shell {
|
|
gap: 0.75rem;
|
|
margin-top: 0.85rem;
|
|
}
|
|
|
|
.module-nav {
|
|
padding: 0.55rem;
|
|
border-radius: 14px;
|
|
overflow-x: auto;
|
|
-webkit-overflow-scrolling: touch;
|
|
scrollbar-width: none;
|
|
background: linear-gradient(180deg, #ffffff 0%, #f8fbf8 100%);
|
|
}
|
|
|
|
.module-nav::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.module-nav ul {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
min-width: max-content;
|
|
}
|
|
|
|
.module-nav li {
|
|
margin: 0;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.module-nav a {
|
|
padding: 0.8rem 1rem;
|
|
font-size: 0.96rem;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.module-nav li.active a {
|
|
box-shadow: 0 8px 20px rgba(23, 63, 70, 0.08);
|
|
background: linear-gradient(90deg, #e4f4f2, #f7fcfb);
|
|
}
|
|
|
|
.module-content {
|
|
padding: 1rem;
|
|
border-radius: 14px;
|
|
}
|
|
|
|
.module-panel {
|
|
max-width: none;
|
|
}
|
|
|
|
.module-panel h2 {
|
|
font-size: 1.32rem;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.module-panel h3 {
|
|
font-size: 1.02rem;
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.module-panel p,
|
|
.module-panel li,
|
|
.module-panel dd {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.module-panel ol {
|
|
margin-left: 1rem;
|
|
padding-left: 0.2rem;
|
|
}
|
|
|
|
.module-panel dl {
|
|
margin: 0;
|
|
}
|
|
|
|
.module-panel dt {
|
|
font-weight: 700;
|
|
margin-top: 0.6rem;
|
|
}
|
|
|
|
.module-panel dd {
|
|
margin: 0.2rem 0 0;
|
|
}
|
|
}
|
|
</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 %}
|