Invario/Key-service-Server
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor website templates for improved clarity and user experience

Browse Source 
- Updated titles and content in kontakt.html to better reflect services for schools.
- Enhanced styling in main.html for a more modern look and feel.
- Changed project descriptions in projekte.html to focus on practical examples from schools.
- Revised team.html to emphasize the structured approach and values of the team.
This commit is contained in:
Aiirondev
2026-03-29 17:32:43 +02:00
parent 370a17b295
commit 84185c35ae
7 changed files with 349 additions and 471 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Website/templates/base.html
+73 -71
View File
@@ -1,32 +1,32 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="de">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>{% block title %}IT Lösungen{% endblock %}</title> <title>{% block title %}Digitale Schulverwaltung{% endblock %}</title>
{% block head %} {% block head %}
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@700;900&family=Public+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<style> <style>
:root { :root {
--bg-main: #f5f8fa; --bg-main: #f3f1ea;
--bg-soft: #e8eef2; --bg-soft: #e4e0d4;
--surface: #ffffff; --surface: #ffffff;
--text-main: #112332; --text-main: #1f2e33;
--text-soft: #466176; --text-soft: #495d63;
--line: #d8e1e8; --line: #d0d7d0;
--brand: #0a4c74; --brand: #1c5a63;
--brand-strong: #073754; --brand-strong: #143f46;
--accent: #f28c28; --accent: #b3672e;
--radius-md: 14px; --radius-md: 14px;
--shadow-sm: 0 10px 30px rgba(17, 35, 50, 0.08); --shadow-sm: 0 10px 30px rgba(18, 40, 44, 0.08);
--shell-gutter: clamp(12px, 2.2vw, 34px); --shell-gutter: clamp(12px, 2.2vw, 34px);
--shell-max-width: 100vw; --shell-max-width: 1240px;
} }
* { box-sizing: border-box; } * { box-sizing: border-box; }
@@ -35,10 +35,10 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
min-height: 100%; min-height: 100%;
font-family: "Source Sans 3", system-ui, sans-serif; font-family: "Public Sans", system-ui, sans-serif;
color: var(--text-main); color: var(--text-main);
background: radial-gradient(circle at 85% -10%, #c5d8e5 0%, transparent 35%), background: radial-gradient(circle at 88% -8%, #dbe4d9 0%, transparent 34%),
radial-gradient(circle at -10% 50%, #dce8ef 0%, transparent 42%), radial-gradient(circle at -5% 58%, #ece4d2 0%, transparent 40%),
var(--bg-main); var(--bg-main);
} }
@@ -50,37 +50,37 @@
h1 { h1 {
margin: 0; margin: 0;
font-family: "Space Grotesk", system-ui, sans-serif; font-family: "Merriweather", Georgia, serif;
line-height: 1.08; line-height: 1.16;
font-size: clamp(1.75rem, 4.5vw, 4.2rem); font-size: clamp(1.85rem, 4vw, 3.5rem);
} }
h2 { h2 {
margin: 0; margin: 0;
font-family: "Space Grotesk", system-ui, sans-serif; font-family: "Merriweather", Georgia, serif;
line-height: 1.08; line-height: 1.2;
font-size: clamp(1.4rem, 3.2vw, 3rem); font-size: clamp(1.5rem, 3vw, 2.5rem);
} }
h3 { h3 {
margin: 0; margin: 0;
font-family: "Space Grotesk", system-ui, sans-serif; font-family: "Merriweather", Georgia, serif;
line-height: 1.08; line-height: 1.24;
font-size: clamp(1.1rem, 2.5vw, 2rem); font-size: clamp(1.2rem, 2vw, 1.8rem);
} }
h4 { h4 {
margin: 0; margin: 0;
font-family: "Space Grotesk", system-ui, sans-serif; font-family: "Merriweather", Georgia, serif;
line-height: 1.08; line-height: 1.24;
font-size: clamp(1rem, 1.8vw, 1.5rem); font-size: clamp(1rem, 1.8vw, 1.5rem);
} }
p { p {
margin: 0; margin: 0;
line-height: 1.55; line-height: 1.6;
color: var(--text-soft); color: var(--text-soft);
font-size: clamp(0.95rem, 1.2vw, 1.1rem); font-size: clamp(1rem, 1.15vw, 1.12rem);
} }
a { a {
@@ -102,13 +102,13 @@
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 30; z-index: 30;
backdrop-filter: blur(10px); backdrop-filter: blur(12px);
background: rgba(245, 248, 250, 0.86); background: rgba(245, 242, 234, 0.9);
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--line);
} }
.site-nav-inner { .site-nav-inner {
min-height: 78px; min-height: 82px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@@ -116,20 +116,20 @@
} }
.brand { .brand {
font-family: "Space Grotesk", system-ui, sans-serif; font-family: "Merriweather", Georgia, serif;
font-size: 1.1rem; font-size: 1.15rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.08em; letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--brand-strong); color: var(--brand-strong);
} }
.nav-links { .nav-links {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: 1.1rem;
font-weight: 600; font-weight: 600;
color: var(--text-soft); color: var(--text-soft);
font-size: 0.98rem;
} }
.nav-links a:hover { .nav-links a:hover {
@@ -139,7 +139,7 @@
.nav-actions { .nav-actions {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.6rem; gap: 0.65rem;
} }
.nav-btn { .nav-btn {
@@ -148,21 +148,22 @@
justify-content: center; justify-content: center;
border-radius: 999px; border-radius: 999px;
border: 1px solid #bcd0de; border: 1px solid #bcd0de;
padding: 0.48rem 0.95rem; padding: 0.52rem 0.98rem;
font-weight: 700; font-weight: 700;
color: #0e425f; color: #1b4b52;
background: #ffffff; background: #ffffff;
transition: transform 0.15s ease; transition: transform 0.15s ease, box-shadow 0.15s ease;
} }
.nav-btn:hover { .nav-btn:hover {
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(20, 53, 58, 0.12);
} }
.nav-btn.primary { .nav-btn.primary {
color: #ffffff; color: #ffffff;
border-color: #0a4c74; border-color: #184f57;
background: linear-gradient(120deg, #0b5b89 0%, #0b4262 100%); background: linear-gradient(120deg, #286f78 0%, #194f56 100%);
} }
.nav-dropdown { .nav-dropdown {
@@ -182,7 +183,7 @@
content: "▾"; content: "▾";
margin-left: 0.45rem; margin-left: 0.45rem;
font-size: 0.72rem; font-size: 0.72rem;
color: #57798f; color: #5f747a;
} }
.nav-dropdown[open] > summary::after { .nav-dropdown[open] > summary::after {
@@ -196,9 +197,9 @@
min-width: 220px; min-width: 220px;
padding: 0.5rem; padding: 0.5rem;
border-radius: 12px; border-radius: 12px;
border: 1px solid #ccdae5; border: 1px solid #ccd4cc;
background: #ffffff; background: #ffffff;
box-shadow: 0 12px 24px rgba(16, 44, 62, 0.15); box-shadow: 0 12px 24px rgba(26, 45, 48, 0.14);
display: grid; display: grid;
gap: 0.35rem; gap: 0.35rem;
z-index: 40; z-index: 40;
@@ -208,16 +209,16 @@
padding: 0.5rem 0.65rem; padding: 0.5rem 0.65rem;
border-radius: 8px; border-radius: 8px;
font-weight: 600; font-weight: 600;
color: #1a4865; color: #214f55;
} }
.dropdown-menu a:hover { .dropdown-menu a:hover {
background: #f3f8fc; background: #f2f6f3;
} }
.main-wrap { .main-wrap {
flex: 1 0 auto; flex: 1 0 auto;
padding: 2rem 0 3.4rem; padding: 2.2rem 0 3.5rem;
} }
.flashes { .flashes {
@@ -245,10 +246,10 @@
bottom: 1rem; bottom: 1rem;
transform: translateX(-50%); transform: translateX(-50%);
width: min(900px, calc(100% - 1.5rem)); width: min(900px, calc(100% - 1.5rem));
border: 1px solid #c0d4e2; border: 1px solid #c6d0c7;
border-radius: 14px; border-radius: 14px;
background: rgba(255, 255, 255, 0.98); background: rgba(255, 255, 255, 0.98);
box-shadow: 0 16px 32px rgba(16, 44, 62, 0.2); box-shadow: 0 16px 32px rgba(26, 45, 48, 0.2);
padding: 0.95rem; padding: 0.95rem;
z-index: 70; z-index: 70;
display: flex; display: flex;
@@ -260,12 +261,12 @@
.cookie-banner p { .cookie-banner p {
margin: 0; margin: 0;
color: #274f68; color: #315055;
font-size: 0.92rem; font-size: 0.92rem;
} }
.cookie-banner a { .cookie-banner a {
color: #0c537c; color: #1b5b62;
text-decoration: underline; text-decoration: underline;
font-weight: 700; font-weight: 700;
} }
@@ -278,9 +279,9 @@
} }
.cookie-btn { .cookie-btn {
border: 1px solid #0a4c74; border: 1px solid #1c5a63;
border-radius: 999px; border-radius: 999px;
background: linear-gradient(120deg, #0b5b89 0%, #0b4262 100%); background: linear-gradient(120deg, #286f78 0%, #194f56 100%);
color: #ffffff; color: #ffffff;
font-weight: 700; font-weight: 700;
padding: 0.45rem 0.85rem; padding: 0.45rem 0.85rem;
@@ -288,9 +289,9 @@
} }
.cookie-btn.secondary { .cookie-btn.secondary {
border-color: #c9d9e4; border-color: #ccd5cc;
background: #ffffff; background: #ffffff;
color: #2b536b; color: #315055;
} }
.cookie-banner.hidden { .cookie-banner.hidden {
@@ -351,17 +352,17 @@
<body> <body>
<nav class="site-nav"> <nav class="site-nav">
<div class="site-shell site-nav-inner"> <div class="site-shell site-nav-inner">
<a class="brand" href="{{ url_for('default') }}">Invario</a> <a class="brand" href="{{ url_for('default') }}">Invario Schule</a>
<div class="nav-links" aria-label="Main Navigation"> <div class="nav-links" aria-label="Main Navigation">
<a href="{{ url_for('dienstleistungen') }}">Dienstleistungen</a> <a href="{{ url_for('dienstleistungen') }}">Leistungen fuer Schulen</a>
<a href="{{ url_for('projekte') }}">Projekte</a> <a href="{{ url_for('projekte') }}">Praxisbeispiele</a>
<a href="{{ url_for('team') }}">Team</a> <a href="{{ url_for('team') }}">Unser Ansatz</a>
<a href="{{ url_for('kontakt') }}">Kontakt</a> <a href="{{ url_for('kontakt') }}">Kontakt</a>
<a href="{{ url_for('inventarsystem') }}">Unser Produkt</a> <a href="{{ url_for('inventarsystem') }}">Inventarsystem</a>
</div> </div>
<div class="nav-actions"> <div class="nav-actions">
{% if 'username' in session %} {% if 'username' in session %}
<a class="nav-btn" href="{{ url_for('appointments') }}">Termin anfragen</a> <a class="nav-btn" href="{{ url_for('appointments') }}">Beratungstermin</a>
<details class="nav-dropdown"> <details class="nav-dropdown">
<summary class="nav-btn">Nutzerbereich</summary> <summary class="nav-btn">Nutzerbereich</summary>
@@ -391,7 +392,7 @@
<a class="nav-btn" href="{{ url_for('logout') }}">Logout</a> <a class="nav-btn" href="{{ url_for('logout') }}">Logout</a>
{% else %} {% else %}
<a class="nav-btn" href="{{ url_for('blog') }}">Blog</a> <a class="nav-btn" href="{{ url_for('blog') }}">Neuigkeiten</a>
<a class="nav-btn" href="{{ url_for('login') }}">Login</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('register') }}">Registrieren</a>
{% endif %} {% endif %}
@@ -415,15 +416,16 @@
<div class="footer-content"> <div class="footer-content">
<div class="footer-section"> <div class="footer-section">
<h4>Über uns</h4> <h4>Über uns</h4>
<p>Wir bieten professionelle IT-Lösungen für Ihre Inventur.</p> <p>Digitale Verwaltungsablaeufe fuer Schulsekretariate und Schulleitungen in Deutschland.</p>
</div> </div>
<div class="footer-section"> <div class="footer-section">
<h4>Schnelllinks</h4> <h4>Schnelllinks</h4>
<ul class="footer-links"> <ul class="footer-links">
<li><a href="{{ url_for('default') }}">Startseite</a></li> <li><a href="{{ url_for('default') }}">Start</a></li>
<li><a href="{{ url_for('blog') }}">Blog</a></li> <li><a href="{{ url_for('dienstleistungen') }}">Leistungsuebersicht</a></li>
<li><a href="{{ url_for('blog') }}">Neuigkeiten</a></li>
{% if 'username' in session %} {% if 'username' in session %}
<li><a href="{{ url_for('appointments') }}">Termine</a></li> <li><a href="{{ url_for('appointments') }}">Beratungstermine</a></li>
{% endif %} {% endif %}
</ul> </ul>
</div> </div>
@@ -442,7 +444,7 @@
</div> </div>
<style> <style>
.site-footer { .site-footer {
background: linear-gradient(135deg, var(--brand-strong) 0%, #0a4c74 100%); background: linear-gradient(135deg, var(--brand-strong) 0%, #1c5a63 100%);
color: #ffffff; color: #ffffff;
margin-top: auto; margin-top: auto;
padding: 3rem 0 1.5rem; padding: 3rem 0 1.5rem;
@@ -523,9 +525,9 @@
</style> </style>
</footer> </footer>
<div class="cookie-banner hidden" id="cookieBanner" role="dialog" aria-live="polite" aria-label="Cookie Hinweis"> <div class="cookie-banner hidden" id="cookieBanner" role="dialog" aria-live="polite" aria-label="Cookie Hinweis">
<p>Wir verwenden Cookies, um die Website sicher und benutzerfreundlich zu betreiben. Mit "Accept Cookies" stimmen Sie der Nutzung zu. Details in <a href="{{ url_for('datenschutz') }}">Datenschutz</a>.</p> <p>Wir verwenden Cookies, um die Website sicher und benutzerfreundlich zu betreiben. Mit "Cookies akzeptieren" stimmen Sie der Nutzung zu. Details in <a href="{{ url_for('datenschutz') }}">Datenschutz</a>.</p>
<div class="cookie-actions"> <div class="cookie-actions">
<button type="button" class="cookie-btn" id="cookieAcceptBtn">Accept Cookies</button> <button type="button" class="cookie-btn" id="cookieAcceptBtn">Cookies akzeptieren</button>
<button type="button" class="cookie-btn secondary" id="cookieDeclineBtn">Ablehnen und zu Ecosia</button> <button type="button" class="cookie-btn secondary" id="cookieDeclineBtn">Ablehnen und zu Ecosia</button>
</div> </div>
</div> </div>
Website/templates/dienstleistungen.html
+24 -17
View File
@@ -1,44 +1,51 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block title %}Dienstleistungen | Invario{% endblock %} {% block title %}Leistungen fuer Schulen | Invario{% endblock %}
{% block content %} {% block content %}
<section class="page-hero"> <section class="page-hero">
<h1>Unsere Dienstleistungen</h1> <h1>Leistungen fuer Schulsekretariat und Schulleitung</h1>
<p>Praxisnahe IT-Lösungen für Schulen mit klaren Prozessen, direkter Betreuung und zuverlässiger Umsetzung.</p> <p>Praxisnahe Module fuer Schulen in Deutschland: verstaendlich, sicher und ohne unnoetige Komplexitaet.</p>
</section> </section>
<section class="cards"> <section class="cards">
<article class="card"> <article class="card">
<h2>Inventarsystem</h2> <h2>Digitale Inventarverwaltung</h2>
<p>Strukturierte Verwaltung von Geräten, Zubehör und Standorten mit nachvollziehbaren Zuständigkeiten und sauberer Historie.</p> <p>Alle Geraete, Raeume und Zustaendigkeiten an einem Ort. So finden Sie Informationen schneller und reduzieren Rueckfragen.</p>
</article> </article>
<article class="card"> <article class="card">
<h2>Lizenzverwaltung</h2> <h2>Lizenz- und Fristenkontrolle</h2>
<p>Zentrale Übersicht über aktive, pausierte und abgelaufene Lizenzen inklusive Laufzeiten, Zuständen und Übergaben.</p> <p>Lizenzlaufzeiten werden transparent angezeigt, inklusive Hinweise auf bald ablaufende Nutzungen.</p>
</article> </article>
<article class="card"> <article class="card">
<h2>24/7 Support</h2> <h2>Support mit klaren Prioritaeten</h2>
<p>Schnelle Reaktionszeiten bei Störungen, klare Eskalationspfade und direkte Hilfe bei betriebskritischen Themen.</p> <p>Stoerungen werden strukturiert aufgenommen, priorisiert und mit nachvollziehbarem Status bearbeitet.</p>
</article> </article>
<article class="card"> <article class="card">
<h2>Beratung</h2> <h2>DSGVO-konforme Dokumentation</h2>
<p>Strategische und technische Beratung für Schulträger und Schulleitungen von der Planung bis zum laufenden Betrieb.</p> <p>Vorgaenge und Aenderungen bleiben nachvollziehbar dokumentiert, damit Pruefungen und Abstimmungen einfacher werden.</p>
</article> </article>
<article class="card"> <article class="card">
<h2>Sicherheitskonzepte</h2> <h2>Einrichtung und Schulung</h2>
<p>DSGVO-konforme Abläufe, Zugriffsrollen und dokumentierte Sicherheitsstandards für sensible Schuldaten.</p> <p>Wir richten das System gemeinsam mit Ihrem Team ein und schulen in klaren, alltagsnahen Schritten.</p>
</article> </article>
<article class="card"> <article class="card">
<h2>Einführung & Schulung</h2> <h2>Begleitung im laufenden Betrieb</h2>
<p>Geordnete Einführung im Team, kurze Lernkurve und praxisorientierte Schulung für Verwaltung und Kollegium.</p> <p>Feste Ansprechpartner unterstuetzen Ihr Team bei Fragen, Erweiterungen und organisatorischen Anpassungen.</p>
</article> </article>
</section> </section>
<section class="highlight">
<h2>Besonders geeignet fuer Teams mit wenig Zeit</h2>
<p>Die Oberflaeche ist bewusst reduziert aufgebaut: grosse, klare Bedienelemente, eindeutige Bezeichnungen und kurze Klickwege fuer taegliche Verwaltungsaufgaben.</p>
</section>
<style> <style>
.page-hero { margin-bottom: 1.2rem; } .page-hero { margin-bottom: 1.2rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.9rem; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.9rem; }
.card { background: #fff; border: 1px solid #d8e1e8; border-radius: 14px; padding: 1rem; } .card { background: #fff; border: 1px solid #d8dfd7; border-radius: 14px; padding: 1rem; box-shadow: 0 10px 26px rgba(25, 45, 41, 0.04); }
.card h2 { color: #0f334b; margin-bottom: 0.45rem; font-size: clamp(1.05rem, 1.8vw, 1.4rem); } .card h2 { color: #24525a; margin-bottom: 0.45rem; font-size: clamp(1.05rem, 1.8vw, 1.35rem); }
.highlight { margin-top: 1rem; background: linear-gradient(135deg, #f8f4eb 0%, #eef3eb 100%); border: 1px solid #d4dbd2; border-radius: 14px; padding: 1.1rem; }
.highlight h2 { color: #2a4d53; margin-bottom: 0.4rem; font-size: clamp(1.1rem, 2.2vw, 1.55rem); }
</style> </style>
{% endblock %} {% endblock %}
Website/templates/inventarsystem.html
+36 -66
View File
@@ -1,110 +1,80 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block title %}Inventarsystem | Funktionsübersicht & Module{% endblock %} {% block title %}Inventarsystem fuer Schulen | Uebersicht{% endblock %}
{% block content %} {% block content %}
<section class="page-hero"> <section class="page-hero">
<h1>Funktionsmodule: Inventarsystem</h1> <h1>Inventarsystem fuer Schulen</h1>
<p>Detaillierte Übersicht der technischen Kernkomponenten und der systemseitigen Datenverarbeitung.</p> <p>Alle wichtigen Funktionen fuer den Schulalltag in einer klaren Oberflaeche: von Inventar ueber Lizenzen bis zur nachvollziehbaren Historie.</p>
</section> </section>
<section class="split"> <section class="split">
<article class="panel"> <article class="panel">
<h2>Digitale Objektverwaltung</h2> <h2>1. Bestand einfach pflegen</h2>
<div class="image-placeholder"> <p>Jedes Geraet erhaelt eine eindeutige Akte mit Standort, Status, Kaufdaten und zustaendiger Person.</p>
<span>[Screenshot: Asset-Detailansicht mit technischen Spezifikationen und Dateianhängen]</span>
</div>
<p>Das Modul zur Verwaltung einzelner Assets bildet die Basis der Datenbank und erlaubt eine granulare Datenerfassung.</p>
<ul> <ul>
<li><strong>Datenfelder:</strong> Erfassung von Seriennummern, Modellbezeichnungen, Kaufdatum und Anschaffungswerten.</li> <li>Suche nach Seriennummer, Raum oder Geraetetyp</li>
<li><strong>Dokumenten-Ablage:</strong> Direkte Verknüpfung von PDF-Rechnungen, Handbüchern oder Garantiescheinen mit dem Objekt.</li> <li>Einheitliche Datenfelder fuer alle Standorte</li>
<li><strong>Zustands-Tracking:</strong> Systemseitige Kategorisierung in Zustände wie "Einsatzbereit", "Defekt" oder "In Reparatur".</li> <li>Schnelle Erfassung neuer Geraete</li>
</ul> </ul>
</article> </article>
<article class="panel"> <article class="panel">
<h2>Hierarchische Standort-Logik</h2> <h2>2. Standorte nachvollziehbar verwalten</h2>
<div class="image-placeholder"> <p>Raeume, Etagen und Gebaeude werden klar strukturiert, damit jederzeit ersichtlich ist, wo sich ein Geraet befindet.</p>
<span>[Grafik: Strukturbaum der Standorte – Gebäude, Stockwerk, Raum]</span>
</div>
<p>Die Standortverwaltung ermöglicht eine präzise physische Verortung jedes Inventargegenstands im System.</p>
<ul> <ul>
<li><strong>Mehrstufige Baumstruktur:</strong> Definition von Hauptstandorten, Unterräumen und spezifischen Lagerplätzen (z.B. Schranknummer).</li> <li>Uebersicht je Raum oder Fachbereich</li>
<li><strong>Massen-Transfer:</strong> Funktion zum gleichzeitigen Verschieben mehrerer Assets zwischen verschiedenen Standorten.</li> <li>Sammelverschiebung mehrerer Geraete</li>
<li><strong>Raum-Inventur:</strong> Exportierbare Checklisten pro Raum für den schnellen Abgleich vor Ort.</li> <li>Einfacher Abgleich bei Inventurterminen</li>
</ul> </ul>
</article> </article>
</section> </section>
<section class="split" style="margin-top:0.9rem;"> <section class="split" style="margin-top:0.9rem;">
<article class="panel"> <article class="panel">
<h2>QR-Code & Mobil-Schnittstelle</h2> <h2>3. QR-Code Unterstuetzung</h2>
<div class="image-placeholder"> <p>Mit QR-Codes lassen sich Geraete vor Ort direkt identifizieren und aktualisieren.</p>
<span>[Screenshot: Mobile Ansicht des Scanners und generierte QR-Code Labels]</span>
</div>
<p>Das System integriert eine Schnittstelle für die physische Identifikation via Scan-Verfahren.</p>
<ul> <ul>
<li><strong>Automatisierte Label-Generierung:</strong> Erstellung von druckfertigen QR-Codes direkt aus der Datenbank.</li> <li>Labels direkt aus dem System erzeugen</li>
<li><strong>Direkt-Aktionen:</strong> Beim Scannen öffnet das System sofort die Objektakte für Statusänderungen oder Wartungseinträge.</li> <li>Scannen und sofort zur richtigen Akte springen</li>
<li><strong>Hardware-Unabhängigkeit:</strong> Unterstützung gängiger USB-Handscanner sowie der Kamerafunktion von Mobilgeräten.</li> <li>Nutzbar mit Handscanner oder Smartphone-Kamera</li>
</ul> </ul>
</article> </article>
<article class="panel"> <article class="panel">
<h2>Transaktions- & Leihhistorie</h2> <h2>4. Historie und Verantwortung</h2>
<div class="image-placeholder"> <p>Aenderungen bleiben dokumentiert, damit Entscheidungen und Vorgaenge transparent bleiben.</p>
<span>[Grafik: Zeitstrahl eines Assets von Anschaffung bis Aussonderung]</span>
</div>
<p>Jede Änderung am Status oder Standort eines Objekts wird als unveränderbarer Datensatz gespeichert.</p>
<ul> <ul>
<li><strong>Leihvorgänge:</strong> Dokumentation von Ausgabe- und Rückgabedaten inklusive Zuweisung zu Personen-IDs.</li> <li>Wer hat wann was geaendert</li>
<li><strong>Fristenverwaltung:</strong> Systemseitige Überwachung von Rückgabedaten mit automatischer Kennzeichnung überfälliger Assets.</li> <li>Leihvorgaenge und Rueckgaben nachvollziehen</li>
<li><strong>Audit-Logging:</strong> Lückenloser Nachweis über alle Systemzugriffe und Datenänderungen (Wer hat was wann geändert?).</li> <li>Klare Nachweise fuer interne Abstimmungen</li>
</ul> </ul>
</article> </article>
</section> </section>
<section class="panel" style="margin-top:0.9rem;"> <section class="panel" style="margin-top:0.9rem;">
<h2>Benutzerrollen & Datenschnittstellen</h2> <h2>5. Rollen, Rechte und Exporte</h2>
<div class="image-placeholder" style="height: 120px;"> <p>Das System unterscheidet klar zwischen Verwaltung, Schulleitung und technischen Rollen.</p>
<span>[Diagramm: Rollenbasiertes Zugriffskonzept (RBAC) und Export-Workflow]</span> <ul class="wide-list">
</div> <li><strong>Rollenbasiert:</strong> Nur relevante Funktionen pro Nutzergruppe sichtbar.</li>
<p>Die Administration erfolgt über ein differenziertes Berechtigungssystem zur Steuerung der Datenintegrität.</p> <li><strong>Datenschutzgerecht:</strong> Zugriff und Aenderungen werden protokolliert.</li>
<ul style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;"> <li><strong>Exportierbar:</strong> Berichte und Bestandslisten koennen fuer Termine und Pruefungen ausgegeben werden.</li>
<li><strong>Rollenmanagement:</strong> Trennung zwischen Administratoren (Vollzugriff), Technikern (Wartungsrechte) und Lese-Accounts.</li> <li><strong>Erweiterbar:</strong> Das System waechst mit Ihren organisatorischen Anforderungen.</li>
<li><strong>Export-Modul:</strong> Datenausgabe in Formaten wie CSV, JSON oder Excel für externe Revisionen.</li>
<li><strong>Sicherheits-Protokolle:</strong> Verschlüsselte Speicherung und passwortgeschützte Zugriffsebenen.</li>
<li><strong>API-Anbindung:</strong> Vorbereitete Endpunkte für die Synchronisation mit anderen Datenbank-Systemen.</li>
</ul> </ul>
</section> </section>
<style> <style>
/* Konsistente Stile für die Funktionspräsentation */
.page-hero { margin-bottom: 1.2rem; } .page-hero { margin-bottom: 1.2rem; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; } .split { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.panel { background: #fff; border: 1px solid #d8e1e8; border-radius: 14px; padding: 1.2rem; } .panel { background: #fff; border: 1px solid #d8dfd7; border-radius: 14px; padding: 1.15rem; box-shadow: 0 10px 24px rgba(25, 45, 41, 0.04); }
.panel h2 { color: #0f334b; margin-bottom: 0.6rem; font-size: 1.25rem; } .panel h2 { color: #265057; margin-bottom: 0.5rem; font-size: clamp(1.05rem, 1.8vw, 1.35rem); }
.panel p { color: #466176; line-height: 1.5; margin-bottom: 1rem; font-size: 0.95rem; } .panel p { color: #496267; line-height: 1.55; margin-bottom: 0.8rem; font-size: 0.98rem; }
.panel ul { margin: 0; padding-left: 1.2rem; color: #466176; display: grid; gap: 0.5rem; } .panel ul { margin: 0; padding-left: 1.15rem; color: #496267; display: grid; gap: 0.45rem; }
.wide-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.image-placeholder {
background: #f8fafc;
border: 2px dashed #cbd5e1;
border-radius: 10px;
height: 160px;
display: flex;
align-items: center;
justify-content: center;
color: #94a3b8;
font-size: 0.8rem;
text-align: center;
margin-bottom: 1rem;
padding: 15px;
}
@media (max-width: 900px) { @media (max-width: 900px) {
.split { grid-template-columns: 1fr; } .split { grid-template-columns: 1fr; }
.panel ul { grid-template-columns: 1fr !important; } .wide-list { grid-template-columns: 1fr; }
} }
</style> </style>
{% endblock %} {% endblock %}
Website/templates/kontakt.html
+16 -14
View File
@@ -1,33 +1,35 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block title %}Kontakt | Invario{% endblock %} {% block title %}Kontakt fuer Schulen | Invario{% endblock %}
{% block content %} {% block content %}
<section class="page-hero"> <section class="page-hero">
<h1>Kontakt</h1> <h1>Kontakt</h1>
<p>Sie erreichen uns schnell über E-Mail oder Telefon. Für eine strukturierte Anfrage empfehlen wir die Terminbuchung.</p> <p>Wir beantworten Anfragen aus Schulsekretariat und Schulleitung schnell und klar. Fuer neue Projekte empfehlen wir einen kurzen Beratungstermin.</p>
</section> </section>
<section class="contact-grid"> <section class="contact-grid">
<article class="contact-card"> <article class="contact-card">
<h2>Info</h2> <h2>Allgemeine Anfrage</h2>
<p><strong>Info E-Mail:</strong> info@invario.de</p> <p><strong>E-Mail:</strong> info@invario.de</p>
<p><strong>Telefonnummer:</strong> +49 (0) 123 / 456789</p> <p><strong>Telefon:</strong> +49 (0) 123 / 456789</p>
<p>Geeignet fuer organisatorische Fragen, Erstkontakt und allgemeine Informationen.</p>
</article> </article>
<article class="contact-card"> <article class="contact-card">
<h2>Support</h2> <h2>Support</h2>
<p><strong>Support E-Mail:</strong> support@invario.de</p> <p><strong>E-Mail:</strong> support@invario.de</p>
<p><strong>Support Telefonnummer:</strong> +49 (0) 123 / 456790</p> <p><strong>Telefon:</strong> +49 (0) 123 / 456790</p>
<p>Bei laufendem Betrieb, stoerenden Fehlern oder dringenden Rueckfragen im Schulalltag.</p>
</article> </article>
<article class="contact-card"> <article class="contact-card">
<h2>Terminbuchung</h2> <h2>Beratungstermin</h2>
<p>Für Erstgespräche, Rückfragen und Projektanfragen buchen Sie direkt einen Termin.</p> <p>In 30 Minuten besprechen wir Ihre aktuelle Situation und priorisieren sinnvolle erste Schritte fuer Ihre Schule.</p>
{% if 'username' in session %} {% if 'username' in session %}
<a class="btn" href="{{ url_for('appointments') }}">Zur Terminbuchung</a> <a class="btn" href="{{ url_for('appointments') }}">Beratungstermin buchen</a>
{% else %} {% else %}
<a class="btn" href="{{ url_for('login') }}">Login zur Terminbuchung</a> <a class="btn" href="{{ url_for('login') }}">Login fuer Terminbuchung</a>
{% endif %} {% endif %}
</article> </article>
</section> </section>
@@ -35,8 +37,8 @@
<style> <style>
.page-hero { margin-bottom: 1.2rem; } .page-hero { margin-bottom: 1.2rem; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.9rem; } .contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.9rem; }
.contact-card { background: #fff; border: 1px solid #d8e1e8; border-radius: 14px; padding: 1rem; } .contact-card { background: #fff; border: 1px solid #d8dfd7; border-radius: 14px; padding: 1rem; box-shadow: 0 10px 24px rgba(25, 45, 41, 0.04); }
.contact-card h2 { color: #0f334b; margin-bottom: 0.45rem; font-size: clamp(1.05rem, 1.8vw, 1.4rem); } .contact-card h2 { color: #265057; margin-bottom: 0.45rem; font-size: clamp(1.05rem, 1.8vw, 1.35rem); }
.btn { margin-top: 0.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid #0a4c74; background: linear-gradient(120deg, #0c5a86 0%, #08486c 100%); color: #fff; padding: 0.52rem 0.92rem; font-weight: 700; } .btn { margin-top: 0.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid #1d5a63; background: linear-gradient(120deg, #296f78 0%, #1a5057 100%); color: #fff; padding: 0.54rem 0.92rem; font-weight: 700; }
</style> </style>
{% endblock %} {% endblock %}
Website/templates/main.html
+154 -256
View File
@@ -1,67 +1,68 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block title %}Inventarlösungen{% endblock %} {% block title %}Digitale Schulverwaltung fuer Sekretariat und Schulleitung{% endblock %}
{% block head %} {% block head %}
{{ super() }} {{ super() }}
<style> <style>
.hero { .hero {
margin-top: 1.2rem; margin-top: 1rem;
padding: 3.8rem; padding: 3.2rem;
border-radius: 24px; border-radius: 22px;
background: linear-gradient(135deg, #f8fcff 0%, #e1ecf3 70%, #d4e3ed 100%); background: linear-gradient(130deg, #f8f5ee 0%, #ece7d9 60%, #e0eadf 100%);
border: 1px solid #cfdbe4; border: 1px solid #cfd6cd;
display: grid; display: grid;
grid-template-columns: 1.2fr 1fr; grid-template-columns: 1.15fr 0.85fr;
gap: 2rem; gap: 1.6rem;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
box-shadow: 0 25px 55px rgba(17, 35, 50, 0.1); box-shadow: 0 24px 46px rgba(28, 45, 41, 0.08);
} }
.hero::after { .hero::after {
content: ""; content: "";
position: absolute; position: absolute;
right: -80px; right: -60px;
bottom: -90px; bottom: -70px;
width: 280px; width: 220px;
height: 280px; height: 220px;
border-radius: 999px; border-radius: 999px;
background: radial-gradient(circle at center, #0b5b89 0%, #0b5b89 40%, transparent 70%); background: radial-gradient(circle at center, #b3672e 0%, #b3672e 44%, transparent 72%);
opacity: 0.12; opacity: 0.12;
pointer-events: none; pointer-events: none;
} }
.eyebrow { .eyebrow {
display: inline-block; display: inline-block;
margin-bottom: 0.85rem; margin-bottom: 0.9rem;
padding: 0.3rem 0.65rem; padding: 0.34rem 0.72rem;
border-radius: 999px; border-radius: 999px;
font-size: clamp(0.7rem, 0.9vw, 0.85rem); font-size: clamp(0.76rem, 0.9vw, 0.88rem);
font-weight: 700; font-weight: 700;
letter-spacing: 0.08em; letter-spacing: 0.05em;
text-transform: uppercase; text-transform: uppercase;
color: #0c4f78; color: #1f5158;
background: #d9ebf6; background: #dbe8e5;
} }
.hero h1 { .hero h1 {
font-size: clamp(2rem, 5.5vw, 4rem); font-size: clamp(2rem, 4.8vw, 3.6rem);
color: #06293e; color: #21363b;
text-wrap: balance; text-wrap: balance;
} }
.hero p { .hero p {
max-width: 56ch; max-width: 60ch;
margin-top: 1.1rem; margin-top: 1rem;
font-size: clamp(0.95rem, 1.4vw, 1.2rem); font-size: clamp(1.03rem, 1.3vw, 1.18rem);
color: #4f666c;
} }
.cta-row { .cta-row {
margin-top: 1.8rem; margin-top: 1.8rem;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.75rem; gap: 0.72rem;
} }
.btn { .btn {
@@ -70,8 +71,9 @@
justify-content: center; justify-content: center;
border-radius: 999px; border-radius: 999px;
border: 1px solid transparent; border: 1px solid transparent;
padding: 0.68rem 1.15rem; padding: 0.7rem 1.2rem;
font-weight: 700; font-weight: 700;
font-size: 0.97rem;
transition: transform 0.2s ease, box-shadow 0.2s ease; transition: transform 0.2s ease, box-shadow 0.2s ease;
} }
@@ -81,179 +83,168 @@
.btn-primary { .btn-primary {
color: #ffffff; color: #ffffff;
background: linear-gradient(120deg, #0c5a86 0%, #08486c 100%); background: linear-gradient(120deg, #296f78 0%, #1a5057 100%);
box-shadow: 0 8px 20px rgba(11, 87, 128, 0.26); box-shadow: 0 8px 18px rgba(25, 71, 77, 0.24);
} }
.btn-secondary { .btn-secondary {
color: #0d4567; color: #24525a;
background: #ffffff; background: #ffffff;
border-color: #b8cddc; border-color: #bcc9c0;
} }
.hero-card { .hero-card {
align-self: end; align-self: end;
background: #0e2f44; background: #1f4e55;
color: #dcf0ff; color: #e4f2f1;
border-radius: 18px; border-radius: 16px;
padding: 1.2rem; padding: 1.2rem;
border: 1px solid #194b68; border: 1px solid #3a6970;
} }
.hero-card h3 { .hero-card h3 {
font-size: clamp(1rem, 2vw, 1.4rem); font-size: clamp(1rem, 1.8vw, 1.35rem);
margin-bottom: 0.6rem; margin-bottom: 0.55rem;
} }
.hero-card p { .hero-card p {
color: #b6d6ea; color: #c7dfde;
font-size: clamp(0.9rem, 1.1vw, 1.05rem); font-size: clamp(0.92rem, 1.05vw, 1.03rem);
margin: 0; margin: 0;
} }
.stats { .stats {
margin-top: 1rem; margin-top: 0.95rem;
display: grid; display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.55rem; gap: 0.5rem;
} }
.stats div { .stats div {
padding: 0.55rem 0.65rem; padding: 0.55rem 0.62rem;
border-radius: 12px; border-radius: 10px;
background: #153a52; background: #285e66;
border: 1px solid #2a5673; border: 1px solid #4a7c82;
} }
.stats strong { .stats strong {
display: block; display: block;
font-family: "Space Grotesk", system-ui, sans-serif;
color: #ffffff; color: #ffffff;
font-size: 1.08rem; font-size: 1.06rem;
} }
.stats span { .stats span {
color: #9ec5dc; color: #d1e8e6;
font-size: 0.8rem; font-size: 0.82rem;
} }
.section { .section {
margin-top: 2.2rem; margin-top: 2rem;
padding: 2rem; padding: 1.9rem;
border-radius: 18px; border-radius: 18px;
border: 1px solid #d4dde5; border: 1px solid #d0d7cf;
background: #ffffff; background: #ffffff;
box-shadow: 0 15px 35px rgba(20, 40, 55, 0.05); box-shadow: 0 14px 30px rgba(28, 45, 41, 0.05);
animation: rise 700ms ease both; animation: rise 680ms ease both;
} }
.section h2 { .section h2 {
font-size: clamp(1.5rem, 3.2vw, 2.8rem); font-size: clamp(1.45rem, 3vw, 2.3rem);
margin-bottom: 0.5rem; margin-bottom: 0.4rem;
color: #0f334b; color: #21393e;
} }
.section-grid { .section-grid {
margin-top: 1.1rem; margin-top: 1rem;
display: grid; display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.9rem; gap: 0.8rem;
} }
.card { .card {
padding: 1rem; padding: 1rem;
border-radius: 14px; border-radius: 14px;
border: 1px solid #d9e2ea; border: 1px solid #dae1d8;
background: linear-gradient(160deg, #fbfdff 0%, #f4f8fb 100%); background: linear-gradient(165deg, #fcfcf8 0%, #f4f6ef 100%);
} }
.card h3 { .card h3 {
font-size: clamp(1rem, 1.8vw, 1.3rem); font-size: clamp(1.04rem, 1.5vw, 1.25rem);
color: #113c58; color: #275058;
margin-bottom: 0.45rem; margin-bottom: 0.35rem;
} }
.card p { .card p {
font-size: clamp(0.9rem, 1.1vw, 1rem); font-size: clamp(0.95rem, 1vw, 1.02rem);
} }
.project-list { .routine-list {
margin-top: 1.1rem; margin-top: 1rem;
display: grid; display: grid;
gap: 0.8rem; gap: 0.7rem;
} }
.project { .routine {
padding: 0.95rem 1rem; padding: 0.9rem 1rem;
border-radius: 14px; border-radius: 12px;
border: 1px solid #cfdae4; border: 1px solid #d2d9d1;
background: #f8fbfd; background: #f8f7f1;
display: flex; display: flex;
gap: 1rem; gap: 1rem;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.project b { .routine b {
display: block; display: block;
color: #0b3753; color: #2a4d53;
margin-bottom: 0.2rem; margin-bottom: 0.18rem;
font-size: clamp(1rem, 1.5vw, 1.15rem); font-size: clamp(1rem, 1.2vw, 1.1rem);
} }
.project span { .routine span {
font-size: clamp(0.8rem, 0.95vw, 0.95rem); font-size: 0.86rem;
color: #4a6579; color: #5c716f;
border: 1px solid #bfd0dd; border: 1px solid #c5cec5;
padding: 0.2rem 0.55rem; padding: 0.2rem 0.55rem;
border-radius: 999px; border-radius: 999px;
white-space: nowrap; white-space: nowrap;
} }
.process { .process {
margin-top: 1.2rem; margin-top: 1.05rem;
display: grid; display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0.6rem; gap: 0.6rem;
} }
.step { .step {
padding: 0.8rem 0.65rem; padding: 0.78rem 0.65rem;
text-align: center; text-align: center;
border-radius: 12px; border-radius: 12px;
border: 1px solid #ccdae5; border: 1px solid #d0d8d0;
background: #f7fafc; background: #f4f6f2;
} }
.step strong { .step strong {
display: block; display: block;
margin-bottom: 0.2rem; margin-bottom: 0.2rem;
font-size: clamp(0.9rem, 1.2vw, 1.1rem); font-size: clamp(0.9rem, 1.1vw, 1rem);
color: #0f3650; color: #284a50;
} }
.step small { .step small {
color: #5f7b8f; color: #617572;
font-size: clamp(0.8rem, 0.9vw, 0.95rem); font-size: clamp(0.8rem, 0.86vw, 0.9rem);
}
.team-note {
margin-top: 0.85rem;
padding: 0.9rem 1rem;
border-radius: 12px;
border: 1px solid #f0c18b;
background: linear-gradient(120deg, #fffaf3 0%, #ffeed8 100%);
color: #7d4f14;
font-weight: 600;
} }
.contact { .contact {
margin-top: 2rem; margin-top: 2rem;
border-radius: 20px; border-radius: 20px;
padding: 2.3rem; padding: 2rem;
border: 1px solid #0f496f; border: 1px solid #2a636b;
background: linear-gradient(120deg, #114e75 0%, #0a3d5c 100%); background: linear-gradient(120deg, #245a61 0%, #1b484f 100%);
color: #d2ebfa; color: #d8ecea;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@@ -262,93 +253,25 @@
.contact h2 { .contact h2 {
color: #ffffff; color: #ffffff;
font-size: clamp(1.4rem, 3.2vw, 2.8rem); font-size: clamp(1.35rem, 3vw, 2.2rem);
margin-bottom: 0.4rem; margin-bottom: 0.4rem;
} }
.contact p { .contact p {
color: #b9d8ec; color: #c7e0de;
font-size: clamp(0.95rem, 1.2vw, 1.1rem); font-size: clamp(0.95rem, 1.05vw, 1.08rem);
} }
.contact .btn-secondary { .contact .btn-secondary {
border-color: rgba(255, 255, 255, 0.35); border-color: rgba(255, 255, 255, 0.45);
background: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.14);
color: #ffffff; color: #ffffff;
} }
.site-footer {
margin-top: 2rem;
padding: 1rem 0 0.3rem;
color: #6a8192;
display: flex;
justify-content: space-between;
gap: 1rem;
font-size: 0.95rem;
}
.partnership {
margin-top: 2.2rem;
padding: 2.5rem;
border-radius: 18px;
background: linear-gradient(135deg, #f0f7fc 0%, #e6effa 100%);
border: 2px solid var(--brand);
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 2rem;
align-items: center;
}
.partnership-icon {
font-size: clamp(4rem, 8vw, 6rem);
text-align: center;
line-height: 1;
}
.partnership-content h3 {
font-size: clamp(1.3rem, 2.5vw, 1.8rem);
color: var(--brand);
margin-bottom: 0.8rem;
}
.partnership-content p {
margin-bottom: 0.8rem;
color: var(--text-soft);
font-size: clamp(0.95rem, 1.1vw, 1.05rem);
}
.partnership-badges {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: 1rem;
}
.badge {
display: inline-block;
padding: 0.4rem 0.85rem;
border-radius: 999px;
background: var(--brand);
color: #ffffff;
font-size: clamp(0.8rem, 0.95vw, 0.95rem);
font-weight: 600;
}
@media (max-width: 700px) {
.partnership {
grid-template-columns: 1fr;
padding: 1.8rem;
}
.partnership-icon {
font-size: clamp(3rem, 6vw, 4rem);
}
}
@keyframes rise { @keyframes rise {
from { from {
opacity: 0; opacity: 0;
transform: translateY(16px); transform: translateY(14px);
} }
to { to {
opacity: 1; opacity: 1;
@@ -359,7 +282,7 @@
@media (max-width: 980px) { @media (max-width: 980px) {
.hero { .hero {
grid-template-columns: 1fr; grid-template-columns: 1fr;
padding: 2rem; padding: 2.1rem;
} }
.section-grid { .section-grid {
@@ -376,7 +299,7 @@
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.project { .routine {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
} }
@@ -388,12 +311,7 @@
.contact { .contact {
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
padding: 1.55rem; padding: 1.5rem;
}
.site-footer {
flex-direction: column;
padding-bottom: 1.2rem;
} }
} }
</style> </style>
@@ -402,120 +320,100 @@
{% block content %} {% block content %}
<section class="hero" id="top"> <section class="hero" id="top">
<div> <div>
<span class="eyebrow">IT Lösungen mit Haltung</span> <span class="eyebrow">Fuer Schulsekretariat und Schulleitung</span>
<h1>Zuhören. Verstehen. Planen. Realisieren.</h1> <h1>Mehr Ruhe im Schulalltag durch klare digitale Verwaltung.</h1>
<p> <p>
Wir sind spezialisiert auf Schulen aller Art und machen Schulinventur endlich einfach: Unser DSGVO-konformes Inventarsystem sorgt für klare Ordnung, volle Transparenz und schnelle Abläufe im Schulalltag. Jede Lösung wird individuell für Ihre Einrichtung entwickelt, mit passgenauen Features und einer besonders schnellen, unkomplizierten Inbetriebnahme. Invario unterstützt Schulen in Deutschland dabei, Inventar, Lizenzen und Anfragen nachvollziehbar zu organisieren. Die Bedienung ist bewusst einfach gehalten, damit auch Teams ohne IT-Spezialisierung schnell und sicher arbeiten koennen.
</p> </p>
<div class="cta-row"> <div class="cta-row">
{% if 'username' in session %} {% if 'username' in session %}
<a class="btn btn-primary" href="{{ url_for('appointments') }}">Termin anfragen</a> <a class="btn btn-primary" href="{{ url_for('appointments') }}">Beratungstermin buchen</a>
{% else %} {% else %}
<a class="btn btn-primary" href="{{ url_for('login') }}">Termin anfragen</a> <a class="btn btn-primary" href="{{ url_for('login') }}">Beratungstermin buchen</a>
{% endif %} {% endif %}
<a class="btn btn-primary" href="{{ url_for('kontakt') }}">Kontakt aufnehmen</a> <a class="btn btn-secondary" href="{{ url_for('dienstleistungen') }}">Leistungen ansehen</a>
<a class="btn btn-secondary" href="{{ url_for('dienstleistungen') }}">Dienstleistungen ansehen</a> <a class="btn btn-secondary" href="{{ url_for('kontakt') }}">Direkt kontaktieren</a>
</div> </div>
</div> </div>
<aside class="hero-card" aria-label="Kurzfakten"> <aside class="hero-card" aria-label="Kurzfakten fuer Schulen">
<h3>Inventur mit Verstand</h3> <h3>Was Schulen besonders schaetzen</h3>
<p> <p>Klare Ablaeufe, feste Ansprechpartner und verstaendliche Oberflaechen fuer den taeglichen Einsatz.</p>
Von Infrastruktur bis Governance: Wir verbinden konzeptionelle Tiefe mit
pragmatischer Umsetzung im Tagesgeschäft.
</p>
<div class="stats"> <div class="stats">
<div><strong>25+</strong><span>aktive Mandate</span></div> <div><strong>5 Min</strong><span>Einstieg pro Aufgabe</span></div>
<div><strong>98%</strong><span>Zieltermine erreicht</span></div> <div><strong>1 Klick</strong><span>Status und Historie</span></div>
<div><strong>24/7</strong><span>Servicebereit</span></div> <div><strong>DSGVO</strong><span>Konform dokumentiert</span></div>
</div> </div>
</aside> </aside>
</section> </section>
<section class="partnership" id="entwicklung"> <section class="section" id="nutzen" style="animation-delay: 100ms;">
<div class="partnership-icon">🤝</div> <h2>Was Ihr Sekretariat sofort entlastet</h2>
<div class="partnership-content"> <p>Alle Informationen sind gebuendelt, Vorgaenge sind standardisiert, und Rueckfragen lassen sich schneller beantworten.</p>
<h3>Entwickelt mit Schulen – für Schulen</h3>
<p>
Unser Inventarsystem wurde nicht theoretisch konzipiert, sondern in enger Zusammenarbeit mit einzelnen Schulen entwickelt. Wir verstehen die täglichen Herausforderungen im Schulbetrieb und entwickeln Lösungen, die wirklich einen Vorteil für den Schulalltag bringen.
</p>
<div class="partnership-badges">
<span class="badge">✓ Schulgetestet</span>
<span class="badge">✓ Praxisorientiert</span>
<span class="badge">✓ DSGVO-konform</span>
<span class="badge">✓ Einfach zu bedienen</span>
</div>
</div>
</section>
<section class="section" id="leistungen" style="animation-delay: 100ms;">
<h2>Leistungsbereiche</h2>
<p>Klare Gliederung in Konnektivität, Inventarverwaltung und laufenden Betrieb.</p>
<div class="section-grid"> <div class="section-grid">
<article class="card"> <article class="card">
<h3>Konnektivität und Netzwerk</h3> <h3>Inventar auf einen Blick</h3>
<p>Stabile Anbindung Ihrer Schulstandorte, saubere Netzstruktur und sichere Erreichbarkeit aller relevanten Systeme.</p> <p>Geraete, Standorte und Zustaendigkeiten sind zentral erfasst. Das reduziert Suchzeiten und doppelte Rueckfragen.</p>
</article> </article>
<article class="card"> <article class="card">
<h3>Inventar und Lizenzmanagement</h3> <h3>Lizenzfristen im Blick</h3>
<p>Zentrale Verwaltung von Geräten und Lizenzen mit schneller Übersicht, nachvollziehbaren Prozessen und klaren Zuständigkeiten.</p> <p>Auslaufende Lizenzen werden rechtzeitig sichtbar, damit keine Unterrichtsausfaelle durch fehlende Software entstehen.</p>
</article> </article>
<article class="card"> <article class="card">
<h3>Support, Updates und Beratung</h3> <h3>Verstaendliche Prozesse</h3>
<p>Persönliche Ansprechpartner, kurze Reaktionszeiten und planbare Updates für einen zuverlässigen Betrieb im Schulalltag.</p> <p>Statt technischer Fachsprache sehen Sie klare Schritte und eindeutige Statusmeldungen fuer jede Aufgabe.</p>
</article> </article>
</div> </div>
</section> </section>
<section class="section" id="projekte" style="animation-delay: 180ms;"> <section class="section" id="alltag" style="animation-delay: 180ms;">
<h2>Sicherheit</h2> <h2>Typische Situationen aus dem Schulalltag</h2>
<p>Wir legen großen Wert auf die Sicherheit Ihrer Daten und Systeme. Die Daten liegen ausschließlich gesichert bei ihnen auf dem Server und wird in keinem Fall an dritte weitergegeben.</p> <p>Die folgenden Beispiele zeigen, wie die Plattform bei wiederkehrenden Verwaltungsaufgaben hilft.</p>
<div class="project-list"> <div class="routine-list">
<div class="project"> <div class="routine">
<div> <div>
<b>DSGVO</b> <b>Neues Geraet kommt an</b>
Alle Daten werden DSGVO-konform verarbeitet, mit klaren Einwilligungen, transparenter Dokumentation und sicheren Löschprozessen. Seriennummer, Raum und Ansprechpartner werden in wenigen Schritten eingetragen und sind sofort nachvollziehbar.
</div> </div>
<span>Netzwerk</span> <span>Inventar</span>
</div> </div>
<div class="project"> <div class="routine">
<div> <div>
<b>Sicherheitsprüfungen</b> <b>Rueckfrage der Schulleitung</b>
Automatisierte Sicherheitsprüfungen und klare Compliance-Standards für den Einsatz im öffentlichen Bereich. Alle an uns herangetragene Fehler werden umgehend behoben und mit einem transparenten Prozess dokumentiert. Status zu Bestellung, Nutzung oder Defekt ist direkt sichtbar, ohne mehrere Listen durchsuchen zu muessen.
</div> </div>
<span>Security</span> <span>Transparenz</span>
</div> </div>
<div class="project"> <div class="routine">
<div> <div>
<b>Betrieb und Updates</b> <b>Supportfall im Unterricht</b>
Regelmäßige Updates, schnelle Störungsbehebung und laufende Optimierung sorgen für einen dauerhaft stabilen Schulbetrieb. Tickets werden dokumentiert und priorisiert. Das Team sieht jederzeit, wer bereits daran arbeitet.
</div> </div>
<span>Updates</span> <span>Support</span>
</div> </div>
</div> </div>
</section> </section>
<section class="section" id="team" style="animation-delay: 260ms;"> <section class="section" id="ablauf" style="animation-delay: 260ms;">
<h2>Zusammenarbeit</h2> <h2>So verlaeuft die Zusammenarbeit</h2>
<p>Strukturiert, nachvollziehbar und mit festen Ansprechpartnern von der Analyse bis zum Betrieb.</p> <p>Ein klarer Prozess sorgt fuer Sicherheit, besonders bei begrenzten Zeitfenstern im Schulbetrieb.</p>
<div class="process" aria-label="Prozessschritte"> <div class="process" aria-label="Ablauf in fuenf Schritten">
<div class="step"><strong>Zuhören</strong><small>Anforderungen erfassen</small></div> <div class="step"><strong>1. Kennenlernen</strong><small>Ziele klären</small></div>
<div class="step"><strong>Verstehen</strong><small>Kontext analysieren</small></div> <div class="step"><strong>2. Struktur</strong><small>Bestehende Abläufe erfassen</small></div>
<div class="step"><strong>Besprechen</strong><small>Optionen priorisieren</small></div> <div class="step"><strong>3. Einrichtung</strong><small>System passgenau einstellen</small></div>
<div class="step"><strong>Planen</strong><small>Roadmap festlegen</small></div> <div class="step"><strong>4. Schulung</strong><small>Praxisnah einführen</small></div>
<div class="step"><strong>Realisieren</strong><small>Lösung liefern</small></div> <div class="step"><strong>5. Betrieb</strong><small>Persoenlich begleiten</small></div>
<div class="step"><strong>Unterstützen</strong><small>Betrieb absichern</small></div>
</div> </div>
</section> </section>
<section class="contact" id="kontakt"> <section class="contact" id="kontakt">
<div> <div>
<h2>Bereit für das nächste IT-Projekt?</h2> <h2>Sie moechten den Verwaltungsaufwand spuerbar reduzieren?</h2>
<p>In einem kurzen Erstgespräch klären wir gemeinsam Zielbild, Risiken und realistische Umsetzungsschritte. Erstellen Sie dafür einfach ein Konto über den Button oben rechts und buchen Sie anschließend über die Kalenderfunktion einen Termin mit Ihrem Schulnamen und dem Betreff „Erstgespräch“. Alternativ können Sie uns jederzeit per E-Mail kontaktieren oder unseren Website-Chat nutzen.</p> <p>In einem kurzen Gespraech klaeren wir gemeinsam, welche Prozesse in Ihrem Sekretariat zuerst vereinfacht werden sollten. Auf Wunsch erhalten Sie danach einen konkreten Einfuehrungsplan fuer Ihre Schule.</p>
</div> </div>
{% if 'username' in session %} {% if 'username' in session %}
<a class="btn btn-secondary" href="{{ url_for('appointments') }}">Termin anfragen</a> <a class="btn btn-secondary" href="{{ url_for('appointments') }}">Beratungstermin buchen</a>
{% else %} {% else %}
<a class="btn btn-secondary" href="{{ url_for('login') }}">Termin anfragen</a> <a class="btn btn-secondary" href="{{ url_for('login') }}">Beratungstermin buchen</a>
{% endif %} {% endif %}
</section> </section>
{% endblock %} {% endblock %}
Website/templates/projekte.html
+23 -24
View File
@@ -1,51 +1,50 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block title %}Projekte | Invario{% endblock %} {% block title %}Praxisbeispiele | Invario{% endblock %}
{% block content %} {% block content %}
<section class="page-hero"> <section class="page-hero">
<h1>Projekte und Kunden</h1> <h1>Praxisbeispiele aus dem Schulalltag</h1>
<p>Einblick in aktuelle und vergangene Zusammenarbeit mit Schulen und Bildungsträgern.</p> <p>So setzen Schulen unsere Loesung ein, um Verwaltungsaufwand zu reduzieren und Ablaeufe transparent zu machen.</p>
</section> </section>
<section class="split"> <section class="split">
<article class="panel"> <article class="panel">
<h2>Aktuelle Projekte</h2> <h2>Beispiel 1: Gymnasium mit 1.100 Schuelern</h2>
<ul> <ul>
<li><strong>Schulverbund Nord:</strong> Rollout Inventarsystem für 12 Standorte, inklusive Gerätehistorie und Lizenzmonitoring.</li> <li><strong>Ausgangslage:</strong> Inventardaten lagen in mehreren Excel-Listen und Papierordnern.</li>
<li><strong>Berufskolleg West:</strong> Einführung zentraler Termin- und Supportprozesse mit Admin-Dashboard.</li> <li><strong>Umsetzung:</strong> Zentralisierung von Geraeten, Raeumen und Verantwortlichkeiten in einer Plattform.</li>
<li><strong>Gymnasium am Park:</strong> Migration von Altbeständen und strukturierte Rechtevergabe für Fachbereiche.</li> <li><strong>Ergebnis:</strong> Rueckfragen aus Schulleitung und Fachbereichen werden deutlich schneller beantwortet.</li>
</ul> </ul>
</article> </article>
<article class="panel"> <article class="panel">
<h2>Aktuelle Kunden</h2> <h2>Beispiel 2: Verbundschule mit mehreren Standorten</h2>
<ul> <ul>
<li>Städtischer Schulträger Musterstadt</li> <li><strong>Ausgangslage:</strong> Unterschiedliche Ablaeufe je Standort, keine gemeinsame Fristenuebersicht.</li>
<li>Campus Bildung Rhein-Main</li> <li><strong>Umsetzung:</strong> Einheitliche Prozesse fuer Inventar, Lizenzen und Supporttickets.</li>
<li>Verbundschule Süd</li> <li><strong>Ergebnis:</strong> Standortuebergreifende Transparenz und bessere Planbarkeit im Sekretariat.</li>
<li>Fachoberschule Technikzentrum</li>
</ul> </ul>
</article> </article>
</section> </section>
<section class="split" style="margin-top:0.9rem;"> <section class="split" style="margin-top:0.9rem;">
<article class="panel"> <article class="panel">
<h2>Vergangene Projekte</h2> <h2>Beispiel 3: Berufskolleg mit Fokus IT-Raeume</h2>
<ul> <ul>
<li><strong>Realschule Mitte:</strong> Digitalisierung der Inventurabläufe und Schulung des Verwaltungsteams.</li> <li><strong>Ausgangslage:</strong> Hohe Anzahl technischer Geraete mit haeufigen Aenderungen.</li>
<li><strong>Bildungswerk Ost:</strong> Aufbau eines Lizenz- und Rechnungsworkflows mit Dokumentenablage.</li> <li><strong>Umsetzung:</strong> QR-gestuetzte Bestandsfuehrung und klare Historie je Geraet.</li>
<li><strong>Campus Linden:</strong> Sicherheitsreview und Stabilisierung der laufenden IT-Prozesse.</li> <li><strong>Ergebnis:</strong> Schnellere Inventur und weniger Fehler bei Standort- oder Statusaenderungen.</li>
</ul> </ul>
</article> </article>
<article class="panel"> <article class="panel">
<h2>Vergangene Kunden</h2> <h2>Was diese Projekte gemeinsam haben</h2>
<ul> <ul>
<li>Privatschulzentrum Amberg</li> <li>Verstaendliche Bedienung ohne IT-Fachwissen</li>
<li>Schulträger Kreis Süd</li> <li>Klare Rollen fuer Sekretariat, Schulleitung und Administration</li>
<li>Akademie für Gesundheit Nord</li> <li>Nachvollziehbare Dokumentation fuer interne Abstimmungen</li>
<li>Campus Schöneck</li> <li>Schrittweise Einfuehrung im laufenden Schulbetrieb</li>
</ul> </ul>
</article> </article>
</section> </section>
@@ -53,9 +52,9 @@
<style> <style>
.page-hero { margin-bottom: 1.2rem; } .page-hero { margin-bottom: 1.2rem; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; } .split { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.panel { background: #fff; border: 1px solid #d8e1e8; border-radius: 14px; padding: 1rem; } .panel { background: #fff; border: 1px solid #d8dfd7; border-radius: 14px; padding: 1rem; box-shadow: 0 10px 24px rgba(25, 45, 41, 0.04); }
.panel h2 { color: #0f334b; margin-bottom: 0.45rem; font-size: clamp(1.05rem, 1.8vw, 1.4rem); } .panel h2 { color: #265057; margin-bottom: 0.45rem; font-size: clamp(1.05rem, 1.8vw, 1.35rem); }
.panel ul { margin: 0; padding-left: 1rem; color: #466176; display: grid; gap: 0.55rem; } .panel ul { margin: 0; padding-left: 1rem; color: #4a6267; display: grid; gap: 0.55rem; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } } @media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
</style> </style>
{% endblock %} {% endblock %}
Website/templates/team.html
+20 -20
View File
@@ -1,47 +1,47 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block title %}Team | Invario{% endblock %} {% block title %}Unser Ansatz | Invario{% endblock %}
{% block content %} {% block content %}
<section class="page-hero"> <section class="page-hero">
<h1>Unser Team</h1> <h1>Unser Ansatz fuer Schulen</h1>
<p>Wir verbinden technische Expertise, Projekterfahrung und starke Referenzen im Bildungsumfeld.</p> <p>Wir arbeiten strukturiert, persoenlich und mit Fokus auf den praktischen Nutzen im Sekretariat und in der Schulleitung.</p>
</section> </section>
<section class="grid"> <section class="grid">
<article class="member"> <article class="member">
<h2>Leitung & Strategie</h2> <h2>Verstaendliche Beratung</h2>
<p>Verantwortlich für Projektsteuerung, Qualitätsstandards und die Ausrichtung unserer Lösungen auf den Schulbetrieb.</p> <p>Wir uebersetzen technische Moeglichkeiten in klare Entscheidungen: Was bringt im Schulalltag wirklich Entlastung und was nicht.</p>
<p><strong>Referenzen:</strong> Schulträgerprojekte mit mehr als 30 Standorten, Prozessstandardisierung im laufenden Betrieb.</p> <p><strong>Ihr Vorteil:</strong> Keine unnoetigen Funktionen, sondern ein klarer Fahrplan mit nachvollziehbaren Prioritaeten.</p>
</article> </article>
<article class="member"> <article class="member">
<h2>Entwicklung</h2> <h2>Saubere Einfuehrung</h2>
<p>Konzipiert und entwickelt unsere Plattform mit Fokus auf Zuverlässigkeit, Sicherheit und einfache Bedienung.</p> <p>Das System wird gemeinsam mit Ihrem Team eingerichtet, ohne den laufenden Betrieb zu ueberlasten.</p>
<p><strong>Referenzen:</strong> Einführung modularer Inventarsysteme, automatisierte Verwaltungsabläufe, DSGVO-konforme Datenhaltung.</p> <p><strong>Ihr Vorteil:</strong> Schrittweise Umstellung mit Schulung direkt an Ihren typischen Arbeitsablaeufen.</p>
</article> </article>
<article class="member"> <article class="member">
<h2>Support & Betrieb</h2> <h2>Zuverlaessige Begleitung</h2>
<p>Sorgt für stabile Systeme, schnelle Unterstützung und nachvollziehbare Kommunikation mit Einrichtungen.</p> <p>Nach der Einfuehrung bleiben wir erreichbar und unterstuetzen bei Anpassungen, Fragen und neuen Anforderungen.</p>
<p><strong>Referenzen:</strong> 24/7 Betreuung für Bildungseinrichtungen, SLA-basierte Reaktionszeiten und strukturierte Ticketprozesse.</p> <p><strong>Ihr Vorteil:</strong> Feste Ansprechpartner und verlässliche Rueckmeldung statt wechselnder Kontaktwege.</p>
</article> </article>
</section> </section>
<section class="references"> <section class="references">
<h2>Ausgewählte Referenzen</h2> <h2>Werte, nach denen wir arbeiten</h2>
<ul> <ul>
<li>Einführung zentraler Inventurprozesse in Schulverbünden</li> <li>Klarheit vor Komplexitaet</li>
<li>Beratung zur IT-Governance für Schulleitungen und Träger</li> <li>Datenschutz als Standard, nicht als Zusatz</li>
<li>Sicherheits- und Compliance-Begleitung bei Systemumstellungen</li> <li>Respekt fuer die Arbeitsrealitaet in Schulen</li>
<li>Operative Stabilisierung von Support- und Terminprozessen</li> <li>Verbindliche Kommunikation und transparente Schritte</li>
</ul> </ul>
</section> </section>
<style> <style>
.page-hero { margin-bottom: 1.2rem; } .page-hero { margin-bottom: 1.2rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.9rem; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.9rem; }
.member, .references { background: #fff; border: 1px solid #d8e1e8; border-radius: 14px; padding: 1rem; } .member, .references { background: #fff; border: 1px solid #d8dfd7; border-radius: 14px; padding: 1rem; box-shadow: 0 10px 24px rgba(25, 45, 41, 0.04); }
.member h2, .references h2 { color: #0f334b; margin-bottom: 0.45rem; font-size: clamp(1.05rem, 1.8vw, 1.4rem); } .member h2, .references h2 { color: #265057; margin-bottom: 0.45rem; font-size: clamp(1.05rem, 1.8vw, 1.35rem); }
.references { margin-top: 0.9rem; } .references { margin-top: 0.9rem; }
.references ul { margin: 0; padding-left: 1rem; color: #466176; display: grid; gap: 0.5rem; } .references ul { margin: 0; padding-left: 1rem; color: #4a6267; display: grid; gap: 0.5rem; }
</style> </style>
{% endblock %} {% endblock %}