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

Some more Changes to the Buisness menue

Browse Source
This commit is contained in:
AIIrondev
2026-11-05 23:06:59 +01:00
parent 7ed6e22d20
commit 16a6b3172b
3 changed files with 81 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Website/templates/base.html
+4 -4
View File
@@ -593,10 +593,10 @@
</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') }}">Module</a>
<a href="{{ url_for('blog') }}">Neuigkeiten</a>
<a href="{{ url_for('kontakt') }}">Kontakt</a>
<a href="{{ url_for('default') }}">{% if request.endpoint == 'business_homepage' or session.get('homepage_audience') == 'business' %}Übersicht{% else %}Start{% endif %}</a>
<a href="{% if request.endpoint == 'business_homepage' or session.get('homepage_audience') == 'business' %}{{ url_for('business_homepage') }}#module{% else %}{{ url_for('dienstleistungen') }}{% endif %}">{% if request.endpoint == 'business_homepage' or session.get('homepage_audience') == 'business' %}Produkt{% else %}Module{% endif %}</a>
<a href="{% if request.endpoint == 'business_homepage' or session.get('homepage_audience') == 'business' %}{{ url_for('business_homepage') }}#ablauf{% else %}{{ url_for('blog') }}{% endif %}">{% if request.endpoint == 'business_homepage' or session.get('homepage_audience') == 'business' %}Ablauf{% else %}Neuigkeiten{% endif %}</a>
<a href="{{ url_for('kontakt') }}">{% if request.endpoint == 'business_homepage' or session.get('homepage_audience') == 'business' %}Demo anfragen{% else %}Kontakt{% endif %}</a>
<a href="{{ url_for('audience') }}">Bereich wechseln</a>
{% if session.get('is_admin') %}
Website/templates/business.html
+47 -7
View File
@@ -10,12 +10,31 @@
<style>
.business-home { --ink:#152f38; --muted:#557074; --lime:#a9d8a4; --teal:#176b78; }
.business-hero { margin-top:1rem; padding:clamp(1.7rem,5vw,4.6rem); border-radius:10px; color:#fff; background:#123b46; border:1px solid #2b6975; overflow:hidden; }
.business-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.82fr); gap:2.5rem; align-items:center; }
.business-hero .eyebrow { color:var(--lime); font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.business-hero h1 { max-width: 760px; margin:.8rem 0 1rem; font-size:clamp(2.2rem,6vw,5rem); line-height:1.02; letter-spacing:-.04em; }
.business-hero p { max-width:650px; color:#d5e9e6; font-size:clamp(1.05rem,1.5vw,1.25rem); }
.business-actions { display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.7rem; }
.business-btn { display:inline-flex; padding:.78rem 1.15rem; border-radius:4px; background:var(--lime); color:#15353a; font-weight:800; }
.business-btn.secondary { background:transparent; border:1px solid #8fb7bf; color:#fff; }
.product-preview { padding:1rem; border:1px solid #376d77; border-radius:8px; background:#0b2933; box-shadow:0 18px 35px rgba(0,0,0,.2); }
.preview-bar { display:flex; align-items:center; justify-content:space-between; padding:.25rem .25rem .8rem; color:#a9c5c9; font-size:.75rem; }
.preview-dots { display:flex; gap:.3rem; }
.preview-dots span { width:7px; height:7px; border-radius:50%; background:#6b9299; }
.preview-body { display:grid; grid-template-columns:78px 1fr; min-height:220px; border:1px solid #2c5962; border-radius:5px; overflow:hidden; }
.preview-side { padding:.65rem .45rem; background:#102f3a; display:grid; align-content:start; gap:.55rem; }
.preview-side span { height:7px; border-radius:3px; background:#376a72; }
.preview-side span.active { background:var(--lime); }
.preview-content { padding:.8rem; background:#f3f6f7; }
.preview-content h3 { margin:0 0 .7rem; color:#15343d; font-size:.9rem; }
.preview-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:.45rem; }
.preview-kpi { padding:.55rem; background:#fff; border:1px solid #d5e0e3; border-radius:4px; }
.preview-kpi strong { display:block; color:#176b78; font-size:1rem; }
.preview-kpi small { color:#6b7d82; font-size:.58rem; }
.preview-table { margin-top:.65rem; height:82px; border-radius:4px; background:#fff; border:1px solid #d5e0e3; box-shadow:inset 0 -16px #eef2f3, inset 0 -17px #d5e0e3, inset 0 -33px #fff, inset 0 -34px #d5e0e3, inset 0 -50px #eef2f3, inset 0 -51px #d5e0e3; }
.business-process { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin-top:1.2rem; }
.business-process article { padding:1rem; border-left:3px solid var(--teal); background:#f5f7f8; }
.business-process b { display:block; color:#15343d; margin-bottom:.3rem; }
.business-section { margin-top:1.1rem; padding:clamp(1.3rem,3vw,2.2rem); border:1px solid #d5e0dc; border-radius:10px; background:#fff; }
.business-section h2 { color:var(--ink); margin-bottom:.45rem; }
.business-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; margin-top:1.2rem; }
@@ -32,19 +51,30 @@
.business-founder { width:150px; padding:.7rem; border:1px solid #d5ddd4; border-radius:8px; background:#fffdf8; text-align:center; }
.business-founder img { width:100%; height:145px; object-fit:contain; object-position:center bottom; border-radius:6px; background:#edf1eb; }
.business-founder p { margin-top:.4rem; font-size:.84rem; color:#2a4d53; }
@media (max-width:780px) { .business-grid,.business-proof,.business-founders { grid-template-columns:1fr; } .business-cta { align-items:flex-start; flex-direction:column; } .business-founder-list { justify-content:flex-start; } }
@media (max-width:780px) { .business-hero-grid,.business-grid,.business-proof,.business-founders { grid-template-columns:1fr; } .business-cta { align-items:flex-start; flex-direction:column; } .business-founder-list { justify-content:flex-start; } .preview-body { min-height:180px; } .business-process { grid-template-columns:1fr; } }
</style>
{% endblock %}
{% block content %}
<main class="business-home">
<header class="business-hero">
<span class="eyebrow">Für Handwerk, Elektro &amp; Bau</span>
<h1>Werkzeug finden. Auftrag starten. Feierabend machen.</h1>
<p>Invario macht aus verstreuten Werkzeugkisten, Transportern und Excel-Listen einen klaren digitalen Bestand. Damit Ihr Team weiß, was wo ist – und wer es zuletzt hatte.</p>
<div class="business-actions">
<a class="business-btn" href="{{ url_for('kontakt') }}">Persönliche Demo anfragen</a>
<a class="business-btn secondary" href="#module">Module entdecken</a>
<div class="business-hero-grid">
<div>
<span class="eyebrow">Für Handwerk, Elektro &amp; Bau</span>
<h1>Werkzeug finden. Auftrag starten. Feierabend machen.</h1>
<p>Invario macht aus verstreuten Werkzeugkisten, Transportern und Excel-Listen einen klaren digitalen Bestand. Damit Ihr Team weiß, was wo ist – und wer es zuletzt hatte.</p>
<div class="business-actions">
<a class="business-btn" href="{{ url_for('kontakt') }}">Persönliche Demo anfragen</a>
<a class="business-btn secondary" href="#module">Module entdecken</a>
</div>
</div>
<div class="product-preview" aria-label="Vorschau der Invario-Business-Oberfläche">
<div class="preview-bar"><span>INVARIO / ASSET CONTROL</span><div class="preview-dots"><span></span><span></span><span></span></div></div>
<div class="preview-body">
<div class="preview-side"><span class="active"></span><span></span><span></span><span></span><span></span></div>
<div class="preview-content"><h3>Werkzeugbestand</h3><div class="preview-kpis"><div class="preview-kpi"><strong>248</strong><small>Assets</small></div><div class="preview-kpi"><strong>12</strong><small>Im Einsatz</small></div><div class="preview-kpi"><strong>3</strong><small>Prüfungen</small></div></div><div class="preview-table"></div></div>
</div>
</div>
</div>
</header>
@@ -58,6 +88,16 @@
</div>
</section>
<section class="business-section" id="ablauf">
<h2>Vom Bestand zum klaren Ablauf</h2>
<p>Eine Oberfläche für die Schritte, die im Betrieb täglich zusammengehören.</p>
<div class="business-process">
<article><b>01 · Erfassen</b><span>Werkzeuge und Fahrzeuge digital anlegen.</span></article>
<article><b>02 · Zuordnen</b><span>Teams, Baustellen und Verantwortliche verbinden.</span></article>
<article><b>03 · Nachverfolgen</b><span>Ausgabe, Rückgabe und Prüfungen nachvollziehbar halten.</span></article>
</div>
</section>
<section class="business-section business-proof">
<div>
<h2>Für Inhaber gemacht, die entscheiden</h2>
Website/templates/main.html
+30 -63
View File
@@ -16,7 +16,7 @@
margin-top: 1rem;
padding: 3.2rem;
border-radius: 22px;
background: #f0f3ed;
background: linear-gradient(130deg, #f8f5ee 0%, #ece7d9 60%, #e0eadf 100%);
border: 1px solid #cfd6cd;
display: grid;
grid-template-columns: 1.15fr 0.85fr;
@@ -40,7 +40,7 @@
width: 220px;
height: 220px;
border-radius: 999px;
background: #b3672e;
background: radial-gradient(circle at center, #b3672e 0%, #b3672e 44%, transparent 72%);
opacity: 0.12;
pointer-events: none;
}
@@ -96,7 +96,7 @@
.btn-primary {
color: #ffffff;
background: #1f6970;
background: linear-gradient(120deg, #296f78 0%, #1a5057 100%);
box-shadow: 0 8px 18px rgba(25, 71, 77, 0.24);
}
@@ -107,7 +107,7 @@
}
.hero-testimonial {
background: #f9faf8;
background: linear-gradient(135deg, #ffffff 0%, #f9faf8 100%);
border: 1px solid #e0e6df;
border-radius: 14px;
padding: 1.4rem;
@@ -144,7 +144,7 @@
width: 38px;
height: 38px;
border-radius: 50%;
background: #1f6970;
background: linear-gradient(135deg, #296f78 0%, #1a5057 100%);
color: #ffffff;
display: flex;
align-items: center;
@@ -248,7 +248,7 @@
padding: 1rem;
border-radius: 14px;
border: 1px solid #dae1d8;
background: #f4f6ef;
background: linear-gradient(165deg, #fcfcf8 0%, #f4f6ef 100%);
}
.card h3 {
@@ -326,7 +326,7 @@
border-radius: 20px;
padding: 2rem;
border: 1px solid #2a636b;
background: #245a61;
background: linear-gradient(120deg, #245a61 0%, #1b484f 100%);
color: #d8ecea;
display: flex;
align-items: center;
@@ -354,29 +354,21 @@
.pictures {
margin-top: 1rem;
display: grid;
grid-template-columns: repeat(2, minmax(0, 260px));
justify-content: center;
gap: 1.5rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
align-items: stretch;
}
.picture {
text-align: center;
max-width: 260px;
padding: 1rem;
border: 1px solid #d5ddd4;
border-radius: 12px;
background: #fffdf8;
box-shadow: 0 10px 24px rgba(28, 45, 41, 0.07);
max-width: none;
}
.picture img {
width: 100%;
height: 250px;
object-fit: contain;
object-position: center bottom;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: 12px;
background: #edf1eb;
display: block;
}
@@ -386,45 +378,12 @@
color: #2a4d53;
}
#gruender {
background: #f0f3ed;
border-color: #cbd6cc;
}
#gruender h2 {
font-family: Georgia, "Times New Roman", serif;
font-weight: 500;
}
.hero,
.section,
.testimonials,
.primary-focus,
.contact {
border-radius: 10px;
}
.hero h1,
.section h2,
.testimonials h2,
.contact h2 {
font-family: Georgia, "Times New Roman", serif;
font-weight: 500;
}
.card,
.testimonial-card,
.step {
border-radius: 8px;
}
.testimonials {
margin-top: 2rem;
padding: 1.9rem;
border-radius: 18px;
border: 1px solid #d0d7cf;
background: #f5f7f3;
background: linear-gradient(135deg, #fafaf8 0%, #f5f7f3 100%);
box-shadow: 0 14px 30px rgba(28, 45, 41, 0.05);
}
@@ -511,15 +470,21 @@
}
#grundschule {
background: #245a61 url("{{ url_for('static', filename='images/Gemini_Generated_Image_mrmegrmrmegrmrme.png') }}") center/cover no-repeat;
background:
linear-gradient(114deg, rgba(17, 57, 63, 0.9) 0%, rgba(30, 92, 99, 0.78) 42%, rgba(244, 248, 242, 0.92) 100%),
url("{{ url_for('static', filename='images/Gemini_Generated_Image_mrmegrmrmegrmrme.png') }}") center/cover no-repeat;
}
#weiterführende-schulen {
background: #245a61 url("{{ url_for('static', filename='images/Gemini_Generated_Image_yjhhheyjhhheyjhh.png') }}") center/cover no-repeat;
background:
linear-gradient(114deg, rgba(17, 57, 63, 0.9) 0%, rgba(30, 92, 99, 0.78) 42%, rgba(244, 248, 242, 0.92) 100%),
url("{{ url_for('static', filename='images/Gemini_Generated_Image_yjhhheyjhhheyjhh.png') }}") center/cover no-repeat;
}
#oberschulen {
background: #245a61 url("{{ url_for('static', filename='images/Gemini_Generated_Image_qc97wfqc97wfqc97.png') }}") center/cover no-repeat;
background:
linear-gradient(114deg, rgba(17, 57, 63, 0.9) 0%, rgba(30, 92, 99, 0.78) 42%, rgba(244, 248, 242, 0.92) 100%),
url("{{ url_for('static', filename='images/Gemini_Generated_Image_qc97wfqc97wfqc97.png') }}") center/cover no-repeat;
}
.primary-focus {
@@ -529,7 +494,9 @@
position: relative;
overflow: hidden;
border: 1px solid #bfcfc9;
background: #245a61 url("{{ url_for('static', filename='images/Gemini_Generated_Image_2cd74s2cd74s2cd7.png') }}") 76% center/cover no-repeat;
background:
linear-gradient(114deg, rgba(17, 57, 63, 0.9) 0%, rgba(30, 92, 99, 0.78) 42%, rgba(244, 248, 242, 0.92) 100%),
url("{{ url_for('static', filename='images/Gemini_Generated_Image_2cd74s2cd74s2cd7.png') }}") 76% center/cover no-repeat;
color: #f2f8f7;
box-shadow: 0 16px 34px rgba(22, 44, 40, 0.12);
}
@@ -538,7 +505,7 @@
content: "";
position: absolute;
inset: 0;
background: rgba(255, 228, 151, 0.12);
background: radial-gradient(circle at 15% 20%, rgba(255, 228, 151, 0.28) 0%, transparent 38%);
pointer-events: none;
}
@@ -586,7 +553,7 @@
}
#zielgruppen .card {
background: #f5f9f3;
background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 249, 243, 0.98) 100%);
border: 1px solid rgba(201, 218, 208, 0.9);
box-shadow: 0 10px 20px rgba(14, 39, 35, 0.12);
padding: 1.1rem;
@@ -957,8 +924,8 @@
</div>
</section>
<section class="section reveal-on-scroll" id="gruender">
<h2>Die Menschen hinter Invario</h2>
<section class="section reveal-on-scroll" id="ablauf">
<h2>Unser Team</h2>
<p>Wir sind zwei ehemalige Schüler, die sich durch ihre Erfahrungen in verschiedenen Schulen mit deren Bedürfnisse vertraut machen konnten. Diese Erfahrungen haben uns dermaßen motiviert – eine einfache Lösung für den Schulalltag zu entwickeln.</p>
<div class="pictures">
<div class="picture">
@@ -973,7 +940,7 @@
</div>
</section>
<section class="section reveal-on-scroll" id="zusammenarbeit">
<section class="section reveal-on-scroll" id="ablauf">
<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">