Enhance website templates for Invario services and pricing
- Updated dienstleistungen.html to improve layout and content clarity, including new service descriptions and a refined CSS style for better visual appeal. - Revamped inventarsystem.html with a focus on key features and pricing, adding a structured layout and enhancing the user experience with new design elements. - Modified main.html to reflect updated pricing information and improve SEO with enhanced meta descriptions and structured data for better search visibility. - Revised preise.html to clearly present pricing details, including new pricing pills and comparison cards for better user understanding of offerings.
This commit is contained in:
+34
-22
@@ -9,35 +9,37 @@
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<title>{% block title %}Digitale Inventarverwaltung für Schulen{% 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="description" content="{{ meta_description|default('Invario: Schul-Inventarverwaltung für 250 €/Jahr oder Bibliothekssystem für 100 €/Jahr – entwickelt mit der Grundschule Albert-Schweitzer-Straße.') }}">
|
||||
<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 Inventarverwaltung für Schulen') }}">
|
||||
<meta property="og:description" content="{{ meta_description|default('Invario — Lehrmittel-, Inventar- und Ausleihverwaltung für Schulen. Sicher, einfach, nachvollziehbar.') }}">
|
||||
<meta property="og:description" content="{{ meta_description|default('Invario: Schul-Inventarverwaltung für 250 €/Jahr oder Bibliothekssystem für 100 €/Jahr – entwickelt mit der Grundschule Albert-Schweitzer-Straße.') }}">
|
||||
<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 Inventarverwaltung für Schulen') }}">
|
||||
<meta name="twitter:description" content="{{ meta_description|default('Invario — Lehrmittel-, Inventar- und Ausleihverwaltung für Schulen. Sicher, einfach, nachvollziehbar.') }}">
|
||||
<meta name="twitter:description" content="{{ meta_description|default('Invario: Schul-Inventarverwaltung für 250 €/Jahr oder Bibliothekssystem für 100 €/Jahr – entwickelt mit der Grundschule Albert-Schweitzer-Straße.') }}">
|
||||
<meta name="twitter:image" content="{{ url_for('static', filename='images/logo-1.jpeg') }}">
|
||||
{% block head %}
|
||||
<link rel="preconnect" href="https://api.fontshare.com">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@700;900&family=Public+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<link href="https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg-main: #f3f1ea;
|
||||
--bg-soft: #e4e0d4;
|
||||
--bg-main: #f4f6f4;
|
||||
--bg-soft: #e6ebe6;
|
||||
--surface: #ffffff;
|
||||
--text-main: #1f2e33;
|
||||
--text-soft: #495d63;
|
||||
--line: #d0d7d0;
|
||||
--brand: #1c5a63;
|
||||
--brand-strong: #143f46;
|
||||
--accent: #b3672e;
|
||||
--text-main: #102126;
|
||||
--text-soft: #42565d;
|
||||
--line: #c9d4d0;
|
||||
--brand: #0f5d69;
|
||||
--brand-strong: #0a3d45;
|
||||
--accent: #a85c24;
|
||||
--radius-md: 14px;
|
||||
--shadow-sm: 0 10px 30px rgba(18, 40, 44, 0.08);
|
||||
--shell-gutter: clamp(12px, 2.2vw, 34px);
|
||||
@@ -45,6 +47,11 @@
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
:focus-visible {
|
||||
outline: 3px solid #0f5d69;
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
/* Verhinderung von iOS Auto-Zoom bei Inputs */
|
||||
input, textarea, select, button {
|
||||
font-family: inherit;
|
||||
@@ -59,11 +66,12 @@
|
||||
padding-left: env(safe-area-inset-left);
|
||||
padding-right: env(safe-area-inset-right);
|
||||
min-height: 100%;
|
||||
font-family: "Public Sans", system-ui, sans-serif;
|
||||
font-family: "Inter", system-ui, sans-serif;
|
||||
color: var(--text-main);
|
||||
background: radial-gradient(circle at 88% -8%, #dbe4d9 0%, transparent 34%),
|
||||
radial-gradient(circle at -5% 58%, #ece4d2 0%, transparent 40%),
|
||||
var(--bg-main);
|
||||
background:
|
||||
radial-gradient(circle at 88% -8%, rgba(15, 93, 105, 0.08) 0%, transparent 34%),
|
||||
radial-gradient(circle at -5% 58%, rgba(168, 92, 36, 0.08) 0%, transparent 40%),
|
||||
var(--bg-main);
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -74,28 +82,28 @@
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-family: "Merriweather", Georgia, serif;
|
||||
font-family: "Satoshi", "Inter", system-ui, sans-serif;
|
||||
line-height: 1.16;
|
||||
font-size: clamp(1.85rem, 4vw, 3.5rem);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-family: "Merriweather", Georgia, serif;
|
||||
font-family: "Satoshi", "Inter", system-ui, sans-serif;
|
||||
line-height: 1.2;
|
||||
font-size: clamp(1.5rem, 3vw, 2.5rem);
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-family: "Merriweather", Georgia, serif;
|
||||
font-family: "Satoshi", "Inter", system-ui, sans-serif;
|
||||
line-height: 1.24;
|
||||
font-size: clamp(1.2rem, 2vw, 1.8rem);
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
font-family: "Merriweather", Georgia, serif;
|
||||
font-family: "Satoshi", "Inter", system-ui, sans-serif;
|
||||
line-height: 1.24;
|
||||
font-size: clamp(1rem, 1.8vw, 1.5rem);
|
||||
}
|
||||
@@ -222,12 +230,12 @@
|
||||
font-weight: 700;
|
||||
color: #1b4b52;
|
||||
background: #ffffff;
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 16px rgba(20, 53, 58, 0.12);
|
||||
box-shadow: 0 8px 20px rgba(20, 53, 58, 0.14);
|
||||
}
|
||||
|
||||
.nav-btn.primary {
|
||||
@@ -236,6 +244,10 @@
|
||||
background: linear-gradient(120deg, #286f78 0%, #194f56 100%);
|
||||
}
|
||||
|
||||
.nav-btn.primary:hover {
|
||||
background: linear-gradient(120deg, #2d7882 0%, #1a5660 100%);
|
||||
}
|
||||
|
||||
.nav-dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user