526 lines
29 KiB
HTML
526 lines
29 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>
|
||
/* --- Bestehendes CSS --- */
|
||
.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;
|
||
}
|
||
|
||
/* --- NEU: Screenshot Toggle (Der Kompromiss) --- */
|
||
.screenshot-toggle {
|
||
margin-top: 0.6rem;
|
||
margin-bottom: 1rem;
|
||
border: 1px solid #e0e8e4;
|
||
border-radius: 8px;
|
||
background: #fafcfb;
|
||
overflow: hidden;
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.screenshot-toggle:hover {
|
||
border-color: #c9d6d0;
|
||
}
|
||
|
||
.screenshot-toggle summary {
|
||
padding: 0.5rem 0.8rem;
|
||
cursor: pointer;
|
||
font-size: 0.9rem;
|
||
font-weight: 600;
|
||
color: #235159;
|
||
list-style: none; /* Versteckt den Standard-Pfeil */
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
user-select: none;
|
||
}
|
||
|
||
/* Eigener, cleaner Pfeil */
|
||
.screenshot-toggle summary::before {
|
||
content: "▶";
|
||
font-size: 0.75rem;
|
||
color: #6a8a8f;
|
||
transition: transform 0.2s ease;
|
||
}
|
||
|
||
.screenshot-toggle[open] summary::before {
|
||
transform: rotate(90deg);
|
||
}
|
||
|
||
/* Safari Fix für den Pfeil */
|
||
.screenshot-toggle summary::-webkit-details-marker {
|
||
display: none;
|
||
}
|
||
|
||
.screenshot-wrapper {
|
||
padding: 0.75rem;
|
||
background: #ffffff;
|
||
border-top: 1px solid #e0e8e4;
|
||
}
|
||
|
||
.screenshot-wrapper img {
|
||
display: block;
|
||
max-width: 100%;
|
||
height: auto;
|
||
border-radius: 6px;
|
||
border: 1px solid #d8dfd7;
|
||
box-shadow: 0 4px 12px rgba(23, 63, 70, 0.05);
|
||
}
|
||
|
||
.download-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
padding: 0.6rem 1rem;
|
||
background: #eef5ef;
|
||
color: #173f46;
|
||
border: 1px solid #d8dfd7;
|
||
border-radius: 8px;
|
||
text-decoration: none;
|
||
font-weight: 600;
|
||
transition: background 0.2s;
|
||
}
|
||
|
||
.download-btn:hover {
|
||
background: #dceae0;
|
||
}
|
||
</style>
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<section class="page-hero">
|
||
<h1>Module & Leitfäden</h1>
|
||
<p>Diese Seite stellt die Produkt Suite der Invario UG vollständig dar und gibt nützliche Tipps.</p>
|
||
</section>
|
||
|
||
<section class="module-shell" aria-label="Module Übersicht">
|
||
<div class="module-nav" role="navigation" aria-label="Module Navigation">
|
||
<ul>
|
||
<li 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">Verwalten und überwachen Sie Ihr gesamtes schulisches Inventar: Von der schnellen Suche und Detailansicht bis hin zur revisionssicheren Defektverwaltung.</p>
|
||
|
||
<h3>Suchen, Filtern und Ansicht (Navigation)</h3>
|
||
<ol>
|
||
<li>
|
||
<strong>Präzise Filter- und Suchfunktionen anwenden:</strong> Um die Suche nach Artikeln im Inventar zu verfeinern, bietet die Suchmaske interaktive Dropdown-Menüs. Über das Dropdown „Schlagwort“ können Sie gezielt nach festgelegten Tags wie „Klasse 1“ oder „Geographie“ filtern. Ein weiteres Menü über dem Titelsuchfeld erlaubt es, den grundsätzlichen Status der angezeigten Objekte einzugrenzen (Auswahl zwischen „Alle Objekte“, „Nur Ausleihbare“ oder „Nur gesperrte/defekte“). Zusätzlich können Sie über ein kleines Zahnrad- oder Einstellungs-Icon neben der Suchleiste exakt bestimmen, in welchen Datenfeldern (z. B. nur im „Titel“ oder auch in der „Beschreibung“) der eingegebene Text gesucht werden soll.
|
||
|
||
<details class="screenshot-toggle">
|
||
<summary>🖼️ Screenshots ansehen</summary>
|
||
<div class="screenshot-wrapper">
|
||
<img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 12-08-11.jpg') }}" alt="Suchmaske Dropdowns" loading="lazy" style="margin-bottom: 1rem;">
|
||
<img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 12-08-13.jpg') }}" alt="Status Filter" loading="lazy" style="margin-bottom: 1rem;">
|
||
<img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 12-08-15.jpg') }}" alt="Erweiterte Such-Einstellungen" loading="lazy">
|
||
</div>
|
||
</details>
|
||
</li>
|
||
|
||
<li>
|
||
<strong>Ansichtsmodus der Inventarliste wechseln:</strong> Das System bietet unterschiedliche Darstellungsformen für die durchsuchten Inventarobjekte. Standardmäßig werden die Ergebnisse in einer Kachelansicht präsentiert, die das Artikelbild, wichtige Kurzinfos und Schnellzugriffs-Buttons direkt anzeigt. Wenn Sie mit der Maus über ein Objekt fahren oder dieses auswählen, wird dies durch einen grünen Rahmen visuell hervorgehoben. Oben rechts befinden sich zwei kleine Icons, mit denen Sie das Layout umstellen können. Ein Klick darauf wechselt die Ansicht von den Kacheln in ein kompaktes, tabellarisches Listenformat, in dem alle Metadaten (Name, Ort, System/Bereich, etc.) zeilenweise nebeneinander dargestellt werden.
|
||
|
||
<details class="screenshot-toggle">
|
||
<summary>🖼️ Screenshots ansehen</summary>
|
||
<div class="screenshot-wrapper">
|
||
<img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 12-08-06.jpg') }}" alt="Kachelansicht Inventar" loading="lazy" style="margin-bottom: 1rem;">
|
||
<img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 12-08-29.jpg') }}" alt="Objekt in der Kachelansicht fokussiert" loading="lazy" style="margin-bottom: 1rem;">
|
||
<img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 12-08-39.jpg') }}" alt="Kompaktes Listenformat" loading="lazy">
|
||
</div>
|
||
</details>
|
||
</li>
|
||
</ol>
|
||
|
||
<h3>Objektdetails und Aktionen</h3>
|
||
<ol start="3">
|
||
<li>
|
||
<strong>Objekte identifizieren und Detailinformationen abrufen:</strong> In der Übersicht "Inventar Objekte" lässt sich ein spezifischer Artikel durch Anklicken visuell markieren (erkennbar am grünen Rahmen und der hellgelben Hervorhebung). Durch das Öffnen des Artikels gelangen Sie in die detaillierte Modal-Ansicht. Diese Ansicht zentriert das Produktbild und listet alle Stammdaten übersichtlich untereinander auf, was besonders für eine schnelle, ablenkungsfreie Kontrolle der Artikeldaten vor einer Ausleihe oder Bearbeitung nützlich ist.
|
||
|
||
<details class="screenshot-toggle">
|
||
<summary>🖼️ Screenshots ansehen</summary>
|
||
<div class="screenshot-wrapper">
|
||
<img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 12-07-37.jpg') }}" alt="Visuelle Hervorhebung eines Objekts" loading="lazy" style="margin-bottom: 1rem;">
|
||
<img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 12-07-41_2.jpg') }}" alt="Detail-Informationen aufrufen" loading="lazy">
|
||
</div>
|
||
</details>
|
||
</li>
|
||
|
||
<li>
|
||
<strong>Objektdetails im Vollbild einsehen:</strong> Wenn Sie weitere Informationen zu einem spezifischen Artikel benötigen, öffnet sich eine fokussierte Detailansicht in einem Pop-up-Fenster. Diese Maske präsentiert das Objektbild (inklusive Navigationspfeilen zum Durchschalten, falls mehrere Bilder vorhanden sind) sowie alle hinterlegten Stammdaten in einer übersichtlichen Liste (z. B. Ort, System/Bereich, Anschaffungspreis). Am unteren Rand des Fensters ist zudem das Feld für die ausführliche Textbeschreibung des Artikels vollständig einsehbar.
|
||
|
||
<details class="screenshot-toggle">
|
||
<summary>🖼️ Screenshot ansehen</summary>
|
||
<div class="screenshot-wrapper">
|
||
<img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 12-07-41.jpg') }}" alt="Vollbild der Objektdetails" loading="lazy">
|
||
</div>
|
||
</details>
|
||
</li>
|
||
|
||
<li>
|
||
<strong>Verfügbarkeit prüfen, Historie einsehen und Aktionen ausführen:</strong> Dieses erweiterte Aktions-Fenster bietet verschiedene Verwaltungswerkzeuge für ein Einzelobjekt. Im oberen Bereich können Sie unter „Defekthistorie (Letzte 5)“ vergangene Meldungen einsehen oder über einen Button einen neuen Defekt melden. Darunter befindet sich der Bereich „Verfügbarkeit prüfen“. Ein Klick auf „Kalender anzeigen“ klappt eine interaktive Monatsansicht auf, um Belegungen zu prüfen. Im unteren Abschluss des Fensters finden Sie eine Reihe farbiger Aktions-Buttons: Hierüber lässt sich der Artikel unter anderem direkt „Ausleihen“, „Reservieren“, in den Status „In Reparatur“ oder „Defekt/...“ versetzen oder aus dem System „Löschen“.
|
||
|
||
<details class="screenshot-toggle">
|
||
<summary>🖼️ Screenshots ansehen</summary>
|
||
<div class="screenshot-wrapper">
|
||
<img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 12-07-46.jpg') }}" alt="Defekthistorie einsehen" loading="lazy" style="margin-bottom: 1rem;">
|
||
<img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 12-07-58.jpg') }}" alt="Verfügbarkeit über Kalender prüfen" loading="lazy" style="margin-bottom: 1rem;">
|
||
<img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 12-08-03.jpg') }}" alt="Aktions-Buttons" loading="lazy">
|
||
</div>
|
||
</details>
|
||
</li>
|
||
</ol>
|
||
|
||
<h3>Defektverwaltung und Administration</h3>
|
||
<ol start="6">
|
||
<li>
|
||
<strong>Defekte Items überwachen:</strong> Die Ansicht "Defekte Items" dient als zentrales Dashboard für alle Artikel, die als beschädigt gemeldet wurden oder sich in Reparatur befinden. Die Maske bietet eine Suchleiste, um gezielt nach dem Namen, Code, Typ oder Aufbewahrungsort eines defekten Objekts zu suchen. Die darunterliegende Tabelle ist strukturiert nach "Bild", "Status", "Fehlerbeschreibung" sowie "Aktionen" und "Aktiv seit", um den Reparatur- oder Ersatzprozess transparent nachverfolgen zu können.
|
||
|
||
<details class="screenshot-toggle">
|
||
<summary>🖼️ Screenshot ansehen</summary>
|
||
<div class="screenshot-wrapper">
|
||
<img src="{{ url_for('static', filename='images/Bildschirmfoto zu 2026-07-30 12-07-33.jpg') }}" alt="Dashboard für defekte Items" loading="lazy">
|
||
</div>
|
||
</details>
|
||
</li>
|
||
|
||
<li>
|
||
<strong>Revisionssichere Audit-Reports analysieren:</strong> Das System exportiert bei Bedarf revisionssichere Protokolle aller Systemvorgänge als PDF-Dokument. Der Bericht enthält eine "Prüfsummary zur Audit-Chain", welche die Integrität bestätigt und die Häufigkeit bestimmter Ereignisse aggregiert (beispielsweise Einträge für Rückgaben oder gemeldete Schäden). Die detaillierte Liste darunter schlüsselt jedes Ereignis mit einem Zeitstempel, dem ausführenden Benutzer, der IP-Adresse und einem kryptografischen Hash-Wert ab. Für formelle Prüfungen schließt das Dokument mit Unterschriftsfeldern für die Schulleitung und den IT-Beauftragten.
|
||
<br><br>
|
||
<a href="{{ url_for('static', filename='docs/audit-official-report-20260730-100236.pdf') }}"
|
||
class="download-btn" target="_blank" rel="noopener noreferrer">
|
||
📥 Audit-Report herunterladen (PDF)
|
||
</a>
|
||
</li>
|
||
|
||
<li>
|
||
<strong>Schadensersatzrechnungen generieren:</strong> Wenn ein Artikel irreparabel beschädigt wird, kann das System eine Rechnung zur Schadensregulierung erstellen. Das Dokument weist einen spezifischen Rechnungsbetrag aus, der dem verantwortlichen Benutzer in Rechnung gestellt wird. Die Schadensbeschreibung auf dem Dokument vermerkt transparent, dass das Objekt während der Ausleihe beschädigt oder zerstört wurde, und fordert dazu auf, den Betrag bei der Verwaltung zu begleichen.
|
||
<br><br>
|
||
<a href="{{ url_for('static', filename='docs/rechnung_INV-20260730-100002-577983.pdf') }}"
|
||
class="download-btn" target="_blank" rel="noopener noreferrer">
|
||
📥 Muster-Rechnung herunterladen (PDF)
|
||
</a>
|
||
</li>
|
||
</ol>
|
||
</article>
|
||
|
||
<article id="mod2" class="module-panel">
|
||
<h2>Bibliothekssystem</h2>
|
||
<p class="lede">Digitalisieren Sie Ihre Schulbibliothek: Verwalten Sie Ihren Medienbestand, Ausleihen und Bibliotheksausweise zentral, schnell und intuitiv.</p>
|
||
|
||
<h3>Medienverwaltung & Ausleihe</h3>
|
||
<ol>
|
||
<li>
|
||
<strong>Die Bibliotheks-Übersicht öffnen:</strong> Navigieren Sie im System zum Modul "Bibliothek". Hier finden Sie die zentrale Übersicht Ihres Medienbestandes. Über die Suchleiste können Sie schnell nach bestimmten Titeln oder ISBNs suchen. Zu jedem Buch sehen Sie auf einen Blick den Bestand, den Status (z. B. "Verfügbar") und haben direkten Zugriff auf Schnellaktionen wie "Ausleihen" oder "Bearbeiten".
|
||
|
||
<!-- Hier ist der neue Aufklapp-Mechanismus für Bilder -->
|
||
<details class="screenshot-toggle">
|
||
<summary>🖼️ Screenshot ansehen</summary>
|
||
<div class="screenshot-wrapper">
|
||
<img src="{{ url_for('static', filename='images/Screenshot 2026-07-13 102127.png') }}" alt="Übersicht des Bibliotheks-Moduls mit Suchleiste" loading="lazy">
|
||
</div>
|
||
</details>
|
||
</li>
|
||
|
||
<li>
|
||
<strong>Buchdetails und Historie einsehen:</strong> Klicken Sie in der Medienliste bei einem beliebigen Buch auf den Button "Details". Es öffnet sich ein übersichtliches Fenster mit allen wichtigen Informationen zum Werk, wie der genauen Beschreibung, dem Regalort und der Kategorie. Im unteren Bereich dieses Fensters finden Sie die Ausleihhistorie, die Ihnen genau anzeigt, welcher Nutzer das Buch wann ausgeliehen hat.
|
||
|
||
<details class="screenshot-toggle">
|
||
<summary>🖼️ Screenshot ansehen</summary>
|
||
<div class="screenshot-wrapper">
|
||
<img src="{{ url_for('static', filename='images/Screenshot 2026-07-13 102134.png') }}" alt="Pop-up Fenster mit Buchdetails und Ausleihhistorie" loading="lazy">
|
||
</div>
|
||
</details>
|
||
</li>
|
||
|
||
<li>
|
||
<strong>Medien gezielt filtern und Listen exportieren:</strong> Um spezifische Listen zu erstellen, klicken Sie rechts neben der Suchleiste auf den Button "Filter". Daraufhin öffnen sich erweiterte Optionen, mit denen Sie den Bestand nach bestimmten Kriterien (z. B. Medientyp oder Verfügbarkeitsstatus) eingrenzen können. Zusätzlich finden Sie hier praktische Export-Buttons, um Ihre gefilterten Ergebnisse oder alle ausgeliehenen Bücher bequem als Excel-Tabelle herunterzuladen.
|
||
|
||
<details class="screenshot-toggle">
|
||
<summary>🖼️ Screenshot ansehen</summary>
|
||
<div class="screenshot-wrapper">
|
||
<img src="{{ url_for('static', filename='images/Screenshot 2026-07-13 102154.png') }}" alt="Filter-Menü mit Export-Funktionen" loading="lazy">
|
||
</div>
|
||
</details>
|
||
</li>
|
||
|
||
<li>
|
||
<strong>Den passenden Scanner-Modus wählen:</strong> Um die Ausleihe effizienter zu gestalten, können Sie das Verhalten des Barcode-Scanners anpassen. Klicken Sie auf das Dropdown-Menü über der Medienliste (Standardmäßig auf "Nur Ausweis erfassen"). Wählen Sie hier beispielsweise den "Schnellmodus: Ausweis + Mediencode" aus. Das System erwartet dann nacheinander den Scan des Schülerausweises und direkt danach den Buchcode, was den Ausleihprozess an der Theke deutlich beschleunigt.
|
||
|
||
<details class="screenshot-toggle">
|
||
<summary>🖼️ Screenshot ansehen</summary>
|
||
<div class="screenshot-wrapper">
|
||
<img src="{{ url_for('static', filename='images/Screenshot 2026-07-13 102200.png') }}" alt="Filter-Menü mit Export-Funktionen" loading="lazy">
|
||
</div>
|
||
</details>
|
||
</li>
|
||
<li>
|
||
<strong>Neue Bücher anlegen oder gesammelt importieren:</strong> Wenn Sie neue Medien ins System aufnehmen möchten, wechseln Sie in den Bereich zum Hochladen von Büchern. Für große Mengen nutzen Sie ganz oben den "Excel-Import", um eine vorgefertigte Liste direkt einzulesen. Für einzelne Bücher füllen Sie das Formular darunter aus. Besonders praktisch: Scannen oder tippen Sie unten im Formular die ISBN ein und klicken Sie auf "Informationen abrufen", um Buchdaten automatisch ausfüllen zu lassen. Legen Sie abschließend noch fest, ob der Artikel im Voraus reservierbar sein soll.
|
||
|
||
<details class="screenshot-toggle">
|
||
<summary>🖼️ Screenshot ansehen</summary>
|
||
<div class="screenshot-wrapper">
|
||
<img src="{{ url_for('static', filename='images/Screenshot 2026-07-13 102214.png') }}" alt="Neue Bücher anlegen oder gesammelt importieren" loading="lazy">
|
||
</div>
|
||
</details>
|
||
</li>
|
||
<li>
|
||
<strong>Rückgaben verwalten und Schäden dokumentieren:</strong> Um ausgeliehene Medien zurückzunehmen, öffnen Sie die Ansicht "Bibliotheks-Ausleihen". Hier sehen Sie alle aktuell verliehenen Bücher. Klicken Sie bei Rückgabe einfach auf "Zurücksetzen", um das Buch wieder als "Verfügbar" im System zu vermerken. Sollte ein Medium beschädigt zurückgegeben werden, klicken Sie auf "Schaden melden". Das System markiert das Element dann deutlich mit einem roten Warnhinweis. Sobald das Buch repariert wurde, können Sie es über den neuen Button "Als repariert markieren" wieder regulär für den Verleih freigeben.
|
||
|
||
<details class="screenshot-toggle">
|
||
<summary>🖼️ Screenshot ansehen</summary>
|
||
<div class="screenshot-wrapper">
|
||
<img src="{{ url_for('static', filename='images/Screenshot 2026-07-13 102223.png') }}" alt="Rückgaben verwalten und Schäden dokumentieren" loading="lazy">
|
||
</div>
|
||
</details>
|
||
</li>
|
||
</ol>
|
||
|
||
<h3>Nutzer, Stammdaten & System</h3>
|
||
<ol start="7">
|
||
<li>
|
||
<strong>Bibliotheksausweise anlegen und verwalten:</strong> In der Ausweisverwaltung können Sie die Ausleihberechtigungen für Ihre Schüler organisieren. Sie können einzelne Ausweise manuell anlegen oder bestehende bearbeiten, indem Sie die Ausweis-ID (Barcode-Nummer), den Namen, die Klasse und die gewünschte Standard-Ausleihdauer eintragen. Alternativ bietet das System oben einen praktischen Excel-Import, um ganze Klassenlisten auf einmal einzulesen. In der Liste unten lassen sich alle Ausweise verwalten oder über den Button "PDF" direkt als druckfertige Dokumente (inklusive scanbarem Barcode) exportieren.
|
||
|
||
<a href="{{ url_for('download_sample') }}"
|
||
class="download-btn"
|
||
download>
|
||
📥 Muster-Ausweis herunterladen (PDF)
|
||
</a>
|
||
<details class="screenshot-toggle">
|
||
<summary>🖼️ Screenshot ansehen</summary>
|
||
<div class="screenshot-wrapper">
|
||
<img src="{{ url_for('static', filename='images/Screenshot 2026-07-13 102331.png') }}" alt="Bibliotheksausweise anlegen und verwalten 1" loading="lazy">
|
||
</div>
|
||
</details>
|
||
<details class="screenshot-toggle">
|
||
<summary>🖼️ Screenshot ansehen</summary>
|
||
<div class="screenshot-wrapper">
|
||
<img src="{{ url_for('static', filename='images/Screenshot 2026-07-13 102335.png') }}" alt="Bibliotheksausweise anlegen und verwalten 2" loading="lazy">
|
||
</div>
|
||
</details>
|
||
</li>
|
||
<li>
|
||
<strong>Schulstammdaten für offizielle Dokumente hinterlegen:</strong> Damit alle Berichte, PDFs und exportierten Ausweise direkt richtig zugeordnet werden können, rufen Sie die "Schulstammdaten" auf. Hier tragen Sie zentrale Basisdaten wie den Schulnamen, die Adresse und einen Ansprechpartner ein. Zudem können Sie hier Ihr Schullogo hochladen. Das System zeigt Ihnen in der "Aktuellen Vorschau" auf der rechten Seite sofort an, wie diese Angaben später auf amtlichen Dokumenten oder Ausweisen erscheinen werden.
|
||
|
||
<details class="screenshot-toggle">
|
||
<summary>🖼️ Screenshot ansehen</summary>
|
||
<div class="screenshot-wrapper">
|
||
<img src="{{ url_for('static', filename='images/Screenshot 2026-07-13 102343.png') }}" alt="Schulstammdaten für offizielle Dokumente hinterlegen" loading="lazy">
|
||
</div>
|
||
</details>
|
||
</li>
|
||
<li>
|
||
<strong>Benutzermenü und Kontoeinstellungen öffnen:</strong> Klicken Sie in der dunklen Hauptleiste ganz rechts auf Ihren Benutzernamen (z. B. "admin"), um das Dropdown-Menü zu öffnen. Dieses kleine Menü dient als Schnellzugriff für Ihre Kontoverwaltung. Von hier aus können Sie mit nur einem Klick Ihr Passwort ändern, das System über "Logout" sicher verlassen oder direkt in die Übersicht Ihrer ungelesenen Systemmeldungen ("Benachrichtigungen") springen.
|
||
|
||
<details class="screenshot-toggle">
|
||
<summary>🖼️ Screenshot ansehen</summary>
|
||
<div class="screenshot-wrapper">
|
||
<img src="{{ url_for('static', filename='images/Screenshot 2026-07-13 102424.png') }}" alt="Benutzermenü und Kontoeinstellungen" loading="lazy">
|
||
</div>
|
||
</details>
|
||
</li>
|
||
<li>
|
||
<strong>Benachrichtigungen und System-Hinweise prüfen:</strong> Das Benachrichtigungs-Modul ist Ihre zentrale Anlaufstelle für wichtige Ereignisse im laufenden Betrieb. Hier informiert Sie die Software proaktiv über Handlungsbedarf – zum Beispiel, wenn ein Nutzer ein beschädigtes Buch gemeldet hat oder Rückgabe-Erinnerungen anstehen. Sobald Sie eine Meldung geprüft und das Problem gelöst haben, klicken Sie einfach auf "Als gelesen", um den Hinweis zu archivieren und Ihre Übersicht stets aufgeräumt zu halten.
|
||
|
||
<details class="screenshot-toggle">
|
||
<summary>🖼️ Screenshot ansehen</summary>
|
||
<div class="screenshot-wrapper">
|
||
<img src="{{ url_for('static', filename='images/Screenshot 2026-07-13 102428.png') }}" alt="Benachrichtigungen und System-Hinweise" loading="lazy">
|
||
</div>
|
||
</details>
|
||
</li>
|
||
</ol>
|
||
</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: 1.5rem; color: #22595b; }
|
||
.module-panel ol { margin-left: 1.2rem; padding-left: 0.5rem; }
|
||
.module-panel ol li { margin-bottom: 0.75rem; }
|
||
.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();
|
||
} else {
|
||
// Standardmäßig Modul 2 (Bibliothek) öffnen, wenn kein Hash vorliegt
|
||
var defaultTab = document.querySelector('.module-nav li[data-module="mod2"]');
|
||
if (defaultTab) defaultTab.click();
|
||
}
|
||
});
|
||
</script>
|
||
{% endblock %} |