Merge remote-tracking branch 'refs/remotes/origin/main'
This commit is contained in:
@@ -5,137 +5,298 @@
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
<style>
|
||||
.packages-hero {
|
||||
background: linear-gradient(140deg, #f6f2e6 0%, #e8efe4 55%, #dfe9ef 100%);
|
||||
border: 1px solid #ced8d1;
|
||||
border-radius: 18px;
|
||||
padding: 1.4rem;
|
||||
box-shadow: 0 14px 34px rgba(16, 36, 47, 0.08);
|
||||
margin-bottom: 1rem;
|
||||
.booking-hero {
|
||||
background: linear-gradient(135deg, rgba(28, 90, 99, 0.14), rgba(255, 255, 255, 0.65)),
|
||||
linear-gradient(180deg, #fffefb 0%, #f2f5f2 100%);
|
||||
border: 1px solid rgba(28, 90, 99, 0.16);
|
||||
border-radius: 24px;
|
||||
padding: 2.2rem;
|
||||
margin-bottom: 1.8rem;
|
||||
box-shadow: 0 18px 44px rgba(18, 49, 54, 0.08);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.packages-hero h1 {
|
||||
color: #173f57;
|
||||
font-size: clamp(1.65rem, 3.2vw, 2.45rem);
|
||||
margin-bottom: 0.35rem;
|
||||
.booking-hero::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(circle at top right, rgba(34, 98, 128, 0.16), transparent 36%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.booking-hero > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.booking-hero h1 {
|
||||
margin-bottom: 0.65rem;
|
||||
color: #133d4a;
|
||||
font-size: clamp(2rem, 3.5vw, 3.2rem);
|
||||
}
|
||||
|
||||
.booking-hero p {
|
||||
margin: 0.75rem 0 0;
|
||||
max-width: 780px;
|
||||
color: #3b5f69;
|
||||
font-size: clamp(1rem, 1.05vw, 1.1rem);
|
||||
}
|
||||
|
||||
.packages-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.9rem;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 1.4rem;
|
||||
margin-bottom: 1.8rem;
|
||||
}
|
||||
|
||||
.package-card {
|
||||
background: #ffffff;
|
||||
border: 1px solid #d5e0e8;
|
||||
border-radius: 16px;
|
||||
padding: 1rem;
|
||||
box-shadow: 0 10px 24px rgba(23, 44, 57, 0.05);
|
||||
border: 1px solid #dfe7e7;
|
||||
border-radius: 22px;
|
||||
box-shadow: 0 18px 40px rgba(23, 44, 57, 0.05);
|
||||
padding: 1.8rem;
|
||||
display: grid;
|
||||
gap: 0.7rem;
|
||||
gap: 1.2rem;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.package-name {
|
||||
.package-card:hover {
|
||||
transform: translateY(-3px);
|
||||
border-color: #b2d4dc;
|
||||
box-shadow: 0 24px 48px rgba(23, 44, 57, 0.1);
|
||||
}
|
||||
|
||||
.package-card__header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.package-card__header > div {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.package-card__header > div:first-child {
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.package-card__tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0.45rem 0.8rem;
|
||||
border-radius: 999px;
|
||||
background: #e6f5f8;
|
||||
color: #106476;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.package-card__name {
|
||||
margin: 0;
|
||||
color: #184560;
|
||||
font-size: 1.35rem;
|
||||
color: #143f46;
|
||||
font-size: clamp(1.4rem, 2.5vw, 2rem);
|
||||
line-height: 1.08;
|
||||
}
|
||||
|
||||
.package-headline {
|
||||
color: #3a6177;
|
||||
font-weight: 600;
|
||||
.package-card__price {
|
||||
display: inline-flex;
|
||||
align-items: baseline;
|
||||
gap: 0.35rem;
|
||||
font-weight: 700;
|
||||
color: #102d37;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.package-card__price span {
|
||||
font-size: clamp(2rem, 3vw, 2.75rem);
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.package-card__price small {
|
||||
color: #57717b;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.feature-list {
|
||||
.package-card__description {
|
||||
margin: 0;
|
||||
padding-left: 1.1rem;
|
||||
color: #456274;
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
color: #4b6a72;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.package-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.55rem;
|
||||
.package-card__features {
|
||||
margin: 1rem 0 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.package-card__features li {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 0.75rem;
|
||||
align-items: flex-start;
|
||||
color: #4f6a72;
|
||||
font-size: 0.98rem;
|
||||
}
|
||||
|
||||
.package-card__features li::before {
|
||||
content: "✓";
|
||||
color: #187490;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.package-card__actions {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.package-card__actions form,
|
||||
.package-card__actions a {
|
||||
width: 100%;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border: 1px solid #0d4f77;
|
||||
background: linear-gradient(120deg, #0d6294 0%, #0b476a 100%);
|
||||
width: 100%;
|
||||
border: 1px solid #1c5a63;
|
||||
background: linear-gradient(120deg, #1d6d79 0%, #164b55 100%);
|
||||
color: #ffffff;
|
||||
border-radius: 999px;
|
||||
padding: 0.45rem 0.88rem;
|
||||
padding: 0.95rem 1.2rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
text-align: center;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.btn:hover,
|
||||
.btn:focus-visible {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 12px 24px rgba(28, 90, 99, 0.22);
|
||||
}
|
||||
|
||||
.btn.secondary {
|
||||
border-color: #9ab5c8;
|
||||
background: #f2f8fc;
|
||||
color: #275a78;
|
||||
border-color: #c7dde3;
|
||||
background: #f7fbfb;
|
||||
color: #1d5f6f;
|
||||
}
|
||||
|
||||
.notice {
|
||||
margin-top: 1rem;
|
||||
padding: 1.3rem 1.35rem;
|
||||
border-radius: 20px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #d4e0e9;
|
||||
border-radius: 14px;
|
||||
padding: 0.9rem;
|
||||
color: #274f65;
|
||||
border: 1px solid #dfe7ea;
|
||||
color: #304f5a;
|
||||
box-shadow: 0 12px 24px rgba(23, 44, 57, 0.04);
|
||||
}
|
||||
|
||||
.notice strong {
|
||||
color: #173f57;
|
||||
color: #15444c;
|
||||
}
|
||||
|
||||
@media (max-width: 980px) {
|
||||
.packages-grid {
|
||||
grid-template-columns: 1fr;
|
||||
.package-card__tag + .package-card__name {
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
|
||||
@media (max-width: 760px) {
|
||||
.booking-hero {
|
||||
padding: 1.6rem;
|
||||
}
|
||||
|
||||
.package-card {
|
||||
padding: 1.4rem;
|
||||
}
|
||||
|
||||
.package-card__header {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.package-card__price {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="packages-hero">
|
||||
<h1>Buchungsoptionen als Softwarepakete</h1>
|
||||
<p>Alle Pakete sind frei einsehbar, auch ohne Admin.</p>
|
||||
<p>Jedes Paket basiert auf derselben Sicherheitsarchitektur mit Rollenrechten, geschützten Sessions und nachvollziehbaren Aktionen.</p>
|
||||
<section class="booking-hero">
|
||||
<h1>Buchungsoptionen entdecken</h1>
|
||||
<p>Unsere Pakete sind klar strukturiert und transparent. Wählen Sie die passende Lösung für Ihre Schule und senden Sie die Anfrage direkt an unser Admin-Team.</p>
|
||||
</section>
|
||||
|
||||
<section class="packages-grid">
|
||||
{% for package in software_packages %}
|
||||
<article class="package-card">
|
||||
<h2 class="package-name">{{ package.name }}</h2>
|
||||
<p class="package-headline">{{ package.headline }}</p>
|
||||
<ul class="feature-list">
|
||||
{% for feature in package.features %}
|
||||
<li>{{ feature }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<div class="package-actions">
|
||||
{% if 'username' in session %}
|
||||
<form method="POST" action="{{ url_for('book_option_package') }}">
|
||||
<input type="hidden" name="package" value="{{ package.slug }}">
|
||||
<button class="btn" type="submit">Option buchen</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<a class="btn secondary" href="{{ url_for('login') }}">Mit Konto buchen</a>
|
||||
{% endif %}
|
||||
<section class="packages-grid" aria-label="Buchungspakete">
|
||||
<article class="package-card">
|
||||
<div class="package-card__header">
|
||||
<div>
|
||||
<span class="package-card__tag">Beliebt</span>
|
||||
<h2 class="package-card__name">Inventarsystem</h2>
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
<div class="package-card__price">
|
||||
<span>250 €</span>
|
||||
<small>/ Monat</small>
|
||||
</div>
|
||||
</div>
|
||||
<p class="package-card__description">Der stabile Einstieg in die Schulverwaltung mit Inventarverwaltung, Benutzerrechten und Berichten für den gesamten Schulbetrieb.</p>
|
||||
<ul class="package-card__features">
|
||||
<li>Inventarverwaltung mit Rollenrechten</li>
|
||||
<li>Basis-Support und Ticketing</li>
|
||||
<li>Schulweite Übersichten und Berichte</li>
|
||||
<li>Erweiterte Instanzverwaltung</li>
|
||||
</ul>
|
||||
<div class="package-card__actions">
|
||||
{% if 'username' in session %}
|
||||
<form method="POST" action="{{ url_for('book_option_package') }}">
|
||||
<input type="hidden" name="package" value="inventarsystem">
|
||||
<button class="btn" type="submit">Jetzt buchen</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<a class="btn secondary" href="{{ url_for('login') }}">Mit Konto buchen</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="package-card">
|
||||
<div class="package-card__header">
|
||||
<div>
|
||||
<span class="package-card__tag">Modul</span>
|
||||
<h2 class="package-card__name">Bibliothekssystem</h2>
|
||||
</div>
|
||||
<div class="package-card__price">
|
||||
<span>150 €</span>
|
||||
<small>/ Monat</small>
|
||||
</div>
|
||||
</div>
|
||||
<p class="package-card__description">Ein spezialisiertes Modul für Bibliotheken und Medienzentren mit Ausleihprozessen, Medienbeständen und historischer Transparenz.</p>
|
||||
<ul class="package-card__features">
|
||||
<li>Ausleih- und Rückgabeprozesse</li>
|
||||
<li>Bestandsübersichten für Medien</li>
|
||||
<li>Transparente Historie pro Medium</li>
|
||||
<li>Einfaches Modul-Setup für Schulen</li>
|
||||
</ul>
|
||||
<div class="package-card__actions">
|
||||
{% if 'username' in session %}
|
||||
<form method="POST" action="{{ url_for('book_option_package') }}">
|
||||
<input type="hidden" name="package" value="buecherei">
|
||||
<button class="btn" type="submit">Jetzt buchen</button>
|
||||
</form>
|
||||
{% else %}
|
||||
<a class="btn secondary" href="{{ url_for('login') }}">Mit Konto buchen</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="notice">
|
||||
{% if 'username' in session %}
|
||||
<p><strong>Hinweis:</strong> Buchungsanfragen werden direkt vom Admin-Team verarbeitet und Ihrer Instanz zugeordnet.</p>
|
||||
<p><strong>Hinweis:</strong> Deine Buchungsanfrage wird direkt vom Admin-Team bearbeitet und deiner Schulinstanz zugeordnet.</p>
|
||||
{% else %}
|
||||
<p><strong>Hinweis:</strong> Bitte einloggen oder registrieren, um Buchungsoptionen anzufragen.</p>
|
||||
<p><strong>Hinweis:</strong> Bitte logge dich ein oder registriere dich, um eine Buchungsoption anzufragen.</p>
|
||||
{% endif %}
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
+227
-30
@@ -8,6 +8,21 @@
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<title>{% block title %}Digitale Schulverwaltung{% endblock %}</title>
|
||||
{# Basic SEO meta tags, can be overridden per-template by setting `meta_description` #}
|
||||
<meta name="description" content="{{ meta_description|default('Invario — Lehrmittel-, Inventar- und Ausleihverwaltung für Schulen. Sicher, einfach, nachvollziehbar.') }}">
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="canonical" href="{{ request.url_root.rstrip('/') }}{{ request.path }}">
|
||||
<!-- OpenGraph / Twitter -->
|
||||
<meta property="og:site_name" content="Invario">
|
||||
<meta property="og:title" content="{{ meta_title|default('Digitale Schulverwaltung') }}">
|
||||
<meta property="og:description" content="{{ meta_description|default('Invario — Lehrmittel-, Inventar- und Ausleihverwaltung für Schulen. Sicher, einfach, nachvollziehbar.') }}">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="{{ request.url_root.rstrip('/') }}{{ request.path }}">
|
||||
<meta property="og:image" content="{{ url_for('static', filename='images/logo-1.jpeg') }}">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:title" content="{{ meta_title|default('Digitale Schulverwaltung') }}">
|
||||
<meta name="twitter:description" content="{{ meta_description|default('Invario — Lehrmittel-, Inventar- und Ausleihverwaltung für Schulen. Sicher, einfach, nachvollziehbar.') }}">
|
||||
<meta name="twitter:image" content="{{ url_for('static', filename='images/logo-1.jpeg') }}">
|
||||
{% block head %}
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
@@ -115,21 +130,22 @@
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
|
||||
.brand {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.62rem;
|
||||
gap: 0.72rem;
|
||||
font-family: "Merriweather", Georgia, serif;
|
||||
font-size: 1.15rem;
|
||||
font-size: 1.22rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.03em;
|
||||
color: var(--brand-strong);
|
||||
}
|
||||
|
||||
.brand img {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 10px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
object-fit: cover;
|
||||
border: 1px solid #bccdc4;
|
||||
box-shadow: 0 8px 16px rgba(19, 49, 54, 0.14);
|
||||
@@ -140,21 +156,56 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.1rem;
|
||||
flex-wrap: wrap;
|
||||
font-weight: 600;
|
||||
color: var(--text-soft);
|
||||
font-size: 0.98rem;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
white-space: nowrap;
|
||||
transition: background 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-links a:hover {
|
||||
color: var(--brand);
|
||||
}
|
||||
|
||||
.nav-links .nav-user-link,
|
||||
.nav-links .nav-mobile-action {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.nav-toggle {
|
||||
display: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--text-main);
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 14px;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-toggle:hover,
|
||||
.nav-toggle:focus-visible {
|
||||
background: rgba(28, 90, 99, 0.08);
|
||||
}
|
||||
|
||||
.nav-toggle svg {
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -325,25 +376,81 @@
|
||||
@media (max-width: 820px) {
|
||||
.site-nav-inner {
|
||||
min-height: 64px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.nav-toggle {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: calc(100% + 0.6rem);
|
||||
transform: translateX(-50%) translateY(-10px);
|
||||
width: min(100%, calc(100% - 1.5rem));
|
||||
max-width: 520px;
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
border: 1px solid #d8dfdb;
|
||||
border-radius: 20px;
|
||||
padding: 0.9rem;
|
||||
display: grid;
|
||||
gap: 0.6rem;
|
||||
z-index: 25;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
box-shadow: 0 18px 40px rgba(23, 44, 57, 0.12);
|
||||
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
|
||||
}
|
||||
|
||||
.nav-links.open {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
pointer-events: auto;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 1rem 1rem;
|
||||
border-radius: 16px;
|
||||
background: #f7f5f0;
|
||||
color: var(--text-main);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.nav-links a:hover,
|
||||
.nav-links a:focus-visible {
|
||||
background: #e7f0ec;
|
||||
}
|
||||
|
||||
.nav-links .nav-user-link,
|
||||
.nav-links .nav-mobile-action {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-links .nav-user-link {
|
||||
padding-left: 1rem;
|
||||
border-left: 3px solid rgba(28, 90, 99, 0.18);
|
||||
background: #f1f6f4;
|
||||
}
|
||||
|
||||
.nav-links .nav-mobile-action {
|
||||
border: 1px solid #bcd0de;
|
||||
background: #ffffff;
|
||||
color: #1b4b52;
|
||||
}
|
||||
|
||||
.nav-actions {
|
||||
gap: 0.4rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
padding: 0.42rem 0.72rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
right: auto;
|
||||
left: 0;
|
||||
min-width: 200px;
|
||||
.main-wrap {
|
||||
padding: 1.4rem 0 2.2rem;
|
||||
}
|
||||
|
||||
.cookie-banner {
|
||||
@@ -358,28 +465,73 @@
|
||||
.cookie-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
right: auto;
|
||||
left: 0;
|
||||
min-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
.site-shell {
|
||||
width: min(100%, calc(100% - 1rem));
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
top: calc(100% + 0.6rem);
|
||||
padding: 0.9rem;
|
||||
}
|
||||
|
||||
.nav-actions {
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.nav-actions .nav-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-links .nav-user-link {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<nav class="site-nav">
|
||||
<nav class="site-nav" role="navigation" aria-label="Hauptnavigation">
|
||||
<div class="site-shell site-nav-inner">
|
||||
<a class="brand" href="{{ url_for('default') }}">
|
||||
<img src="{{ url_for('static', filename='images/Logo-clear.png') }}" alt="Invario Logo">
|
||||
<span>Invario</span>
|
||||
</a>
|
||||
<div class="nav-links" aria-label="Main Navigation">
|
||||
<a href="{{ url_for('dienstleistungen') }}">Leistungen für Schulen</a>
|
||||
<a href="{{ url_for('projekte') }}">Praxisbeispiele</a>
|
||||
<a href="{{ url_for('team') }}">Team</a>
|
||||
<button type="button" class="nav-toggle" id="mobileMenuToggle" aria-expanded="false" aria-controls="mainNav" aria-label="Navigation öffnen">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
|
||||
<path d="M4 7h16M4 12h16M4 17h16" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div class="nav-links" id="mainNav" aria-label="Main Navigation" aria-hidden="true">
|
||||
<a href="{{ url_for('default') }}">Start</a>
|
||||
<a href="{{ url_for('dienstleistungen') }}">Für Schulen</a>
|
||||
<a href="{{ url_for('kontakt') }}">Kontakt</a>
|
||||
<a href="{{ url_for('inventarsystem') }}">Inventarsystem</a>
|
||||
{% if 'username' in session %}
|
||||
<a class="nav-user-link" href="{{ url_for('my_invoices') }}">Meine Rechnungen</a>
|
||||
<a class="nav-user-link" href="{{ url_for('my_instance_management') }}">Meine Instanz</a>
|
||||
<a class="nav-user-link" href="{{ url_for('user_chat') }}">Chat mit Admin</a>
|
||||
<a class="nav-user-link" href="{{ url_for('user_tickets') }}">Support Tickets</a>
|
||||
<a class="nav-user-link" href="{{ url_for('logout') }}">Abmelden</a>
|
||||
{% if session.get('is_admin') %}
|
||||
<a class="nav-user-link" href="{{ url_for('admin_dashboard') }}">Admin Dashboard</a>
|
||||
<a class="nav-user-link" href="{{ url_for('admin_users') }}">Userverwaltung</a>
|
||||
<a class="nav-user-link" href="{{ url_for('admin_invoices') }}">Rechnungsverwaltung</a>
|
||||
{% endif %}
|
||||
{% else %}
|
||||
<a class="nav-mobile-action nav-btn primary" href="{{ url_for('login') }}">Login</a>
|
||||
<a class="nav-mobile-action nav-btn" href="{{ url_for('register') }}">Registrieren</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="nav-actions">
|
||||
{% if 'username' in session %}
|
||||
<a class="nav-btn" href="{{ url_for('appointments') }}">Buchungsoption</a>
|
||||
|
||||
<details class="nav-dropdown">
|
||||
<summary class="nav-btn">Nutzerbereich</summary>
|
||||
<div class="dropdown-menu">
|
||||
@@ -389,7 +541,6 @@
|
||||
<a href="{{ url_for('user_tickets') }}">Support Tickets</a>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
{% if session.get('is_admin') %}
|
||||
<details class="nav-dropdown">
|
||||
<summary class="nav-btn">Admin</summary>
|
||||
@@ -406,17 +557,16 @@
|
||||
</div>
|
||||
</details>
|
||||
{% endif %}
|
||||
|
||||
<a class="nav-btn primary" href="{{ url_for('appointments') }}">Buchungsoption</a>
|
||||
<a class="nav-btn" href="{{ url_for('logout') }}">Logout</a>
|
||||
{% else %}
|
||||
<a class="nav-btn" href="{{ url_for('blog') }}">Neuigkeiten</a>
|
||||
<a class="nav-btn" href="{{ url_for('login') }}">Login</a>
|
||||
<a class="nav-btn primary" href="{{ url_for('register') }}">Registrieren</a>
|
||||
<a class="nav-btn primary" href="{{ url_for('login') }}">Login</a>
|
||||
<a class="nav-btn" href="{{ url_for('register') }}">Registrieren</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<main class="site-shell main-wrap">
|
||||
<main class="site-shell main-wrap" role="main">
|
||||
{% with messages = get_flashed_messages(with_categories=true) %}
|
||||
{% if messages %}
|
||||
<div class="flashes">
|
||||
@@ -554,6 +704,53 @@
|
||||
<script src="{{ url_for('static', filename='js/ios_fixes.js') }}"></script>
|
||||
<script>
|
||||
(function () {
|
||||
var menuToggle = document.getElementById('mobileMenuToggle');
|
||||
var navLinks = document.getElementById('mainNav');
|
||||
if (menuToggle && navLinks) {
|
||||
menuToggle.addEventListener('click', function () {
|
||||
var isExpanded = this.getAttribute('aria-expanded') === 'true';
|
||||
this.setAttribute('aria-expanded', String(!isExpanded));
|
||||
navLinks.classList.toggle('open');
|
||||
navLinks.setAttribute('aria-hidden', String(isExpanded));
|
||||
});
|
||||
|
||||
navLinks.querySelectorAll('a').forEach(function (link) {
|
||||
link.addEventListener('click', function () {
|
||||
if (navLinks.classList.contains('open')) {
|
||||
menuToggle.setAttribute('aria-expanded', 'false');
|
||||
navLinks.classList.remove('open');
|
||||
navLinks.setAttribute('aria-hidden', 'true');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('click', function (event) {
|
||||
if (!navLinks.contains(event.target) && !menuToggle.contains(event.target) && navLinks.classList.contains('open')) {
|
||||
menuToggle.setAttribute('aria-expanded', 'false');
|
||||
navLinks.classList.remove('open');
|
||||
navLinks.setAttribute('aria-hidden', 'true');
|
||||
}
|
||||
});
|
||||
|
||||
navLinks.querySelectorAll('a').forEach(function (link) {
|
||||
link.addEventListener('click', function () {
|
||||
if (navLinks.classList.contains('open')) {
|
||||
menuToggle.setAttribute('aria-expanded', 'false');
|
||||
navLinks.classList.remove('open');
|
||||
navLinks.setAttribute('aria-hidden', 'true');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener('resize', function () {
|
||||
if (window.innerWidth > 820 && navLinks.classList.contains('open')) {
|
||||
menuToggle.setAttribute('aria-expanded', 'false');
|
||||
navLinks.classList.remove('open');
|
||||
navLinks.removeAttribute('aria-hidden');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var banner = document.getElementById("cookieBanner");
|
||||
var acceptBtn = document.getElementById("cookieAcceptBtn");
|
||||
var declineBtn = document.getElementById("cookieDeclineBtn");
|
||||
|
||||
+146
-11
@@ -1,5 +1,8 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{# SEO: per-page description used in base.html meta tags #}
|
||||
{% set meta_description = "Invario bündelt Lehrmittelverwaltung, Inventar und Ausleihe für Schulen – sicher, transparent und einfach zu bedienen." %}
|
||||
|
||||
{% block title %}Digitale Schulverwaltung mit Sicherheitsfokus{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
@@ -550,12 +553,73 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="hero" id="top">
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@graph": [
|
||||
{
|
||||
"@type": "WebSite",
|
||||
"@id": "{{ request.url_root.rstrip('/') }}#website",
|
||||
"url": "{{ request.url_root.rstrip('/') }}",
|
||||
"name": "Invario",
|
||||
"description": "{{ meta_description }}",
|
||||
"inLanguage": "de-DE",
|
||||
"publisher": { "@id": "{{ request.url_root.rstrip('/') }}#organization" },
|
||||
"potentialAction": {
|
||||
"@type": "ContactAction",
|
||||
"target": "{{ request.url_root.rstrip('/') }}/kontakt"
|
||||
}
|
||||
},
|
||||
{
|
||||
"@type": "Organization",
|
||||
"@id": "{{ request.url_root.rstrip('/') }}#organization",
|
||||
"name": "Invario",
|
||||
"url": "{{ request.url_root.rstrip('/') }}",
|
||||
"logo": {
|
||||
"@type": "ImageObject",
|
||||
"url": "{{ url_for('static', filename='images/logo-1.jpeg') }}"
|
||||
},
|
||||
"contactPoint": [
|
||||
{
|
||||
"@type": "ContactPoint",
|
||||
"contactType": "customer support",
|
||||
"url": "{{ request.url_root.rstrip('/') }}/kontakt",
|
||||
"availableLanguage": ["de", "en"]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"@type": "SoftwareApplication",
|
||||
"@id": "{{ request.url_root.rstrip('/') }}#software",
|
||||
"name": "Invario",
|
||||
"url": "{{ request.url_root.rstrip('/') }}",
|
||||
"description": "{{ meta_description }}",
|
||||
"operatingSystem": "Web",
|
||||
"applicationCategory": "EducationApplication",
|
||||
"softwareVersion": "1.0",
|
||||
"image": "{{ url_for('static', filename='images/logo-1.jpeg') }}",
|
||||
"author": { "@id": "{{ request.url_root.rstrip('/') }}#organization" },
|
||||
"publisher": { "@id": "{{ request.url_root.rstrip('/') }}#organization" },
|
||||
"inLanguage": "de-DE"
|
||||
},
|
||||
{
|
||||
"@type": "WebPage",
|
||||
"@id": "{{ request.url_root.rstrip('/') }}#webpage",
|
||||
"url": "{{ request.url_root.rstrip('/') }}",
|
||||
"name": "Invario Startseite",
|
||||
"description": "{{ meta_description }}",
|
||||
"isPartOf": { "@id": "{{ request.url_root.rstrip('/') }}#website" },
|
||||
"mainEntity": { "@id": "{{ request.url_root.rstrip('/') }}#software" }
|
||||
}
|
||||
]
|
||||
}
|
||||
</script>
|
||||
<header class="hero" id="top" aria-label="Seitenstart">
|
||||
<div>
|
||||
<span class="eyebrow">Lehrmittelverwaltungssoftware für Schulen</span>
|
||||
<h1>Lehrmittel, Schul-IT und Ausleihen in einem sicheren System.</h1>
|
||||
<h1>Invario ist die sichere Schulsoftware für Lehrmittelverwaltung, Inventar und Ausleihe.</h1>
|
||||
<p>
|
||||
Invario ist eine Lehrmittelverwaltungssoftware, die Schulbibliothek, Inventar und digitale Ausleihe zusammenführt. Prozesse bleiben bewusst schlank und schnell, während Sicherheitsfunktionen wie rollenbasierte Rechte, Sitzungsabsicherung und nachvollziehbare Protokolle im Hintergrund dauerhaft aktiv sind.
|
||||
Invario hilft Schulen, Lehrmittel, Medien und Ausleihprozesse übersichtlich, digital und DSGVO-konform zu organisieren. Die Oberfläche bleibt für Lehrkräfte und Bibliothekspersonal verständlich, während Sicherheitsfunktionen im Hintergrund für Verlässlichkeit sorgen.
|
||||
</p>
|
||||
<div class="cta-row">
|
||||
{% if 'username' in session %}
|
||||
@@ -563,9 +627,7 @@
|
||||
{% else %}
|
||||
<a class="btn btn-primary" href="{{ url_for('login') }}">Buchungsoption nutzen</a>
|
||||
{% endif %}
|
||||
<a class="btn btn-secondary" href="{{ url_for('dienstleistungen') }}">Leistungen ansehen</a>
|
||||
<a class="btn btn-secondary" href="{{ url_for('team') }}">Team ansehen</a>
|
||||
<a class="btn btn-secondary" href="{{ url_for('kontakt') }}">Direkt kontaktieren</a>
|
||||
<a class="btn btn-secondary" href="{{ url_for('kontakt') }}">Kontakt aufnehmen</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-right">
|
||||
@@ -596,10 +658,75 @@
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="primary-focus" id="zielgruppen" aria-label="Zielgruppen">
|
||||
<div class="primary-focus-content">
|
||||
<span class="eyebrow">Für wen ist das?</span>
|
||||
<h2>Passend für jede Schulform</h2>
|
||||
<div class="primary-points">
|
||||
<span>Grundschule: Übersicht für Klassen 1–4</span>
|
||||
<span>Weiterführende Schulen: Effizienz für Klassen 5–13</span>
|
||||
<span>Oberschulen: Verwaltung für FOS/BOS</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="ablauf" style="animation-delay: 100ms;">
|
||||
<h2>So verläuft die Zusammenarbeit</h2>
|
||||
<p>Ein klarer Prozess sorgt für Sicherheit, besonders bei begrenzten Zeitfenstern im Schulbetrieb.</p>
|
||||
<div class="process" aria-label="Ablauf in fünf Schritten">
|
||||
<div class="step"><strong>1. Kennenlernen</strong><small>Ziele klären</small></div>
|
||||
<div class="step"><strong>2. Struktur</strong><small>Bestehende Abläufe erfassen</small></div>
|
||||
<div class="step"><strong>3. Einrichtung</strong><small>System passgenau einstellen</small></div>
|
||||
<div class="step"><strong>4. Schulung</strong><small>Praxisnah einführen</small></div>
|
||||
<div class="step"><strong>5. Betrieb</strong><small>Persönlich begleiten</small></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="nutzen" style="animation-delay: 180ms;">
|
||||
<h2>Nutzen-Inseln aus dem Schulalltag</h2>
|
||||
<div class="section-grid">
|
||||
<article class="card">
|
||||
<h3>Bücher sicher ausgeben und zurücknehmen</h3>
|
||||
<p>Mit Barcode oder QR-Code werden Bücher und Materialien schnell und nachvollziehbar ausgegeben und zurückgenommen – ohne Zettelwirtschaft.</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Den Überblick über Laptops und iPads behalten</h3>
|
||||
<p>IT-Geräte, Tablets und Medien werden gemeinsam verwaltet. Verantwortlichkeiten und Rückgaben sind jederzeit einsehbar.</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Lehrmittel für die Unterrichtsplanung</h3>
|
||||
<p>Lehrkräfte planen Materialbedarf im Voraus und vermeiden so Engpässe und Doppelbestellungen.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="sicherheit" style="animation-delay: 220ms;">
|
||||
<h2>Datenschutz & Sicherheit</h2>
|
||||
<div class="section-grid">
|
||||
<article class="card">
|
||||
<h3>Rollen- und Bereichstrennung</h3>
|
||||
<p>Bibliothek, Verwaltung und IT erhalten abgestufte Rechte, sodass jede Rolle nur ihre benötigten Funktionen sieht.</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Protokollierung und Nachweis</h3>
|
||||
<p>Ausgaben, Rücknahmen und kritische Admin-Aktionen werden dokumentiert und sind jederzeit auditierbar.</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Gesicherte Web-Session</h3>
|
||||
<p>Sicherheits-Header, HttpOnly-Cookies und klare Session-Richtlinien schützen den laufenden Betrieb vor typischen Webangriffen.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="hilfe" style="animation-delay: 240ms;">
|
||||
<h2>Wir lassen Sie nicht allein</h2>
|
||||
<p>Sie erhalten persönlichen Support – per E-Mail, über den Chat mit einem Administrator oder für die Einrichtung vor Ort. So bleibt keine Frage offen und die Hemmschwelle vor der Digitalisierung sinkt.</p>
|
||||
</section>
|
||||
|
||||
<section class="testimonials">
|
||||
<h2>Das sagen unsere Schulen</h2>
|
||||
<h2>Das sagen andere Schulleitungen</h2>
|
||||
<div class="testimonials-grid">
|
||||
<div class="testimonial-card">
|
||||
<div class="testimonial-stars">
|
||||
@@ -609,7 +736,7 @@
|
||||
<span class="star">★</span>
|
||||
<span class="star">★</span>
|
||||
</div>
|
||||
<p class="testimonial-text">"Mit Invario haben wir unsere Lehrmittelausleihe um 70% beschleunigt. Die Schüler wissen sofort, welche Materialien verfügbar sind, ohne die Bibliothek zu stören."</p>
|
||||
<p class="testimonial-text">"Mit Invario haben wir unsere Lehrmittelausleihe um 70% beschleunigt. Die Oberfläche ist intuitiv und unsere Bibliothekare sparen täglich Zeit."</p>
|
||||
<div class="testimonial-author">
|
||||
<div class="testimonial-avatar">SR</div>
|
||||
<div class="testimonial-info">
|
||||
@@ -667,7 +794,7 @@
|
||||
<span>Kinderleichte Bedienung</span>
|
||||
</div>
|
||||
<div class="cta-row">
|
||||
<a class="btn btn-primary" href="{{ url_for('inventarsystem') }}">Module ansehen</a>
|
||||
<a class="btn btn-primary" href="{{ url_for('inventarsystem') }}">Grundschul-Modul ansehen</a>
|
||||
<a class="btn btn-secondary" href="{{ url_for('kontakt') }}">Beratung für Grundschule</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -685,7 +812,7 @@
|
||||
<span>Kinderleichte Bedienung</span>
|
||||
</div>
|
||||
<div class="cta-row">
|
||||
<a class="btn btn-primary" href="{{ url_for('inventarsystem') }}">Module ansehen</a>
|
||||
<a class="btn btn-primary" href="{{ url_for('inventarsystem') }}">Modul ansehen</a>
|
||||
<a class="btn btn-secondary" href="{{ url_for('kontakt') }}">Beratung für Weiterführende Schulen</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -703,7 +830,7 @@
|
||||
<span>Kinderleichte Bedienung</span>
|
||||
</div>
|
||||
<div class="cta-row">
|
||||
<a class="btn btn-primary" href="{{ url_for('inventarsystem') }}">Module ansehen</a>
|
||||
<a class="btn btn-primary" href="{{ url_for('inventarsystem') }}">Modul ansehen</a>
|
||||
<a class="btn btn-secondary" href="{{ url_for('kontakt') }}">Beratung für Oberschulen</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -798,4 +925,12 @@
|
||||
<a class="btn btn-secondary" href="{{ url_for('login') }}">Buchungsoption nutzen</a>
|
||||
{% endif %}
|
||||
</section>
|
||||
|
||||
<section class="contact" id="kontakt">
|
||||
<div>
|
||||
<h2>Sie sind Schulträger?</h2>
|
||||
<p>In einer Persönlichen Präsentation klären wir Ihre Anforderungen und prüfen in Zusammenarbeit wie Invario ihren Digitalisierungsvorgang in ihren Schulen unterstützen kann.</p>
|
||||
</div>
|
||||
<a class="btn btn-secondary" href="{{ url_for('kontakt') }}">Beratungstermin vereinbaren</a>
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user