erstes Layout

2026-04-14 13:42:25 +02:00 · 2026-04-14 13:42:25 +02:00 · 5be932666e
commit 5be932666e
parent f29d7c69d5
10 changed files with 425 additions and 16 deletions
--- a/app.py
+++ b/app.py
@ -1,8 +1,9 @@
 from flask import Flask, render_template

-app = Flask(__name__)
+app = Flask(__name__, static_folder="images", static_url_path="/images")

@app.route("/")
+@app.route("/home")
 def home():
    return render_template("home.html")

--- a/deploy_flask.sh
+++ b/deploy_flask.sh
@ -1,7 +1,7 @@
 #!/bin/bash
 set -euo pipefail

-SRC_ROOT="/Volumes/MacBook SD/Projekte/hebammekrystyna"
+SRC_ROOT="/Volumes/MacBook SD/Projekte/HebammeKrystyna"
 DST_ROOT="/Volumes/docker/flask-postgres/app-hebammekrystyna"

 NAS_USER="BKolb"
--- a/images/Krystyna.jpeg
+++ b/images/Krystyna.jpeg
--- a/images/Krystyna_optimized_full.png
+++ b/images/Krystyna_optimized_full.png
--- a/images/logo.png
+++ b/images/logo.png
--- a/images/logo_transparent.png
+++ b/images/logo_transparent.png
--- a/templates/base.html
+++ b/templates/base.html
@ -2,17 +2,305 @@
 <html lang="de">
 <head>
    <meta charset="UTF-8">
-    <title>{{ title or "Hebamme Krystyna" }}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}Hebamme Krystyna Kolb{% endblock %}</title>
+    <style>
+        :root {
+            --rosa: #f8dfe8;
+            --rosa-dunkel: #c97f95;
+            --blau: #dcefff;
+            --blau-dunkel: #6c8cab;
+            --text: #4f4850;
+            --weiss: rgba(255,255,255,0.72);
+            --weiss-stark: rgba(255,255,255,0.88);
+            --shadow: 0 10px 28px rgba(108, 140, 171, 0.18);
+            --radius: 22px;
+        }
+
+        * {
+            box-sizing: border-box;
+        }
+
+        body {
+            margin: 0;
+            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+            color: var(--text);
+            background: linear-gradient(135deg, #f9d9e6 0%, #f8e7ee 28%, #eaf4ff 72%, #d8ebff 100%);
+            min-height: 100vh;
+        }
+
+        .page-wrap {
+            max-width: 1180px;
+            margin: 0 auto;
+            padding: 28px 20px 40px;
+        }
+
+        .topbar {
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-start;
+            gap: 24px;
+            margin-bottom: 24px;
+        }
+
+        .logo-box,
+        .photo-box {
+            background: var(--weiss);
+            border-radius: 24px;
+            box-shadow: var(--shadow);
+            backdrop-filter: blur(6px);
+            padding: 14px;
+        }
+
+        .logo-box img {
+            display: block;
+            max-height: 88px;
+            width: auto;
+        }
+
+        .photo-box img {
+            display: block;
+            width: 170px;
+            max-width: 100%;
+            height: auto;
+            border-radius: 18px;
+            object-fit: cover;
+        }
+
+        nav {
+            margin-bottom: 28px;
+            background: var(--weiss);
+            border-radius: 18px;
+            padding: 14px 18px;
+            box-shadow: var(--shadow);
+        }
+
+        nav a {
+            color: var(--blau-dunkel);
+            text-decoration: none;
+            font-weight: 600;
+            margin-right: 18px;
+        }
+
+        nav a:hover {
+            color: var(--rosa-dunkel);
+        }
+
+        .hero {
+            display: grid;
+            grid-template-columns: 1.2fr 0.8fr;
+            gap: 28px;
+            align-items: center;
+            margin-bottom: 34px;
+        }
+
+        .hero-card {
+            background: var(--weiss-stark);
+            border-radius: 30px;
+            padding: 36px 34px;
+            box-shadow: var(--shadow);
+        }
+
+        .eyebrow {
+            display: inline-block;
+            padding: 8px 14px;
+            border-radius: 999px;
+            background: rgba(255,255,255,0.7);
+            color: var(--rosa-dunkel);
+            font-size: 0.95rem;
+            font-weight: 700;
+            margin-bottom: 18px;
+        }
+
+        h1 {
+            font-size: clamp(2rem, 4vw, 3.6rem);
+            line-height: 1.08;
+            margin: 0 0 20px;
+            color: #6f5d69;
+        }
+
+        .hero-text {
+            font-size: 1.15rem;
+            line-height: 1.8;
+            margin: 0;
+        }
+
+        .hero-highlight {
+            color: var(--rosa-dunkel);
+            font-weight: 700;
+        }
+
+        .intro-side {
+            background: linear-gradient(180deg, rgba(255,255,255,0.84), rgba(255,255,255,0.62));
+            border-radius: 30px;
+            padding: 30px;
+            box-shadow: var(--shadow);
+        }
+
+        .intro-side h2 {
+            margin-top: 0;
+            color: var(--blau-dunkel);
+            font-size: 1.5rem;
+        }
+
+        .intro-side p {
+            line-height: 1.75;
+            margin-bottom: 0;
+        }
+
+        .section-title {
+            font-size: 2rem;
+            color: #6f5d69;
+            margin: 12px 0 18px;
+        }
+
+        .section-subtitle {
+            margin: 0 0 26px;
+            line-height: 1.75;
+            max-width: 760px;
+        }
+
+        .leistungen-grid {
+            display: grid;
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+            gap: 18px;
+        }
+
+        details {
+            background: var(--weiss-stark);
+            border-radius: var(--radius);
+            box-shadow: var(--shadow);
+            padding: 0;
+            overflow: hidden;
+        }
+
+        summary {
+            list-style: none;
+            cursor: pointer;
+            padding: 22px 24px;
+            font-size: 1.08rem;
+            font-weight: 700;
+            color: var(--blau-dunkel);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        summary::-webkit-details-marker {
+            display: none;
+        }
+
+        summary::after {
+            content: "+";
+            font-size: 1.4rem;
+            color: var(--rosa-dunkel);
+            margin-left: 14px;
+        }
+
+        details[open] summary::after {
+            content: "–";
+        }
+
+        .detail-content {
+            padding: 0 24px 24px;
+            line-height: 1.75;
+        }
+
+        .languages {
+            margin: 8px 0 0;
+            padding-left: 18px;
+        }
+
+        footer {
+            margin-top: 38px;
+            padding: 20px 10px 10px;
+            text-align: center;
+            color: #7b7480;
+            font-size: 0.95rem;
+        }
+
+        @media (max-width: 900px) {
+            .hero,
+            .leistungen-grid {
+                grid-template-columns: 1fr;
+            }
+
+            .topbar {
+                align-items: stretch;
+            }
+
+            .photo-box img {
+                width: 130px;
+            }
+        }
+
+        @media (max-width: 640px) {
+            .topbar {
+                flex-direction: column;
+            }
+
+            .logo-box img {
+                max-height: 70px;
+            }
+
+            .photo-box img {
+                width: 100%;
+                max-width: 220px;
+            }
+
+            .hero-card,
+            .intro-side {
+                padding: 24px;
+            }
+
+            h1 {
+                font-size: 2rem;
+            }
+        }
+
+        .logo {
+            height: 90px;
+            object-fit: contain;
+        }
+
+        .profile {
+            width: 180px;
+            height: auto;
+            border-radius: 20px;
+            box-shadow: 0 12px 30px rgba(0,0,0,0.15);
+            object-fit: cover;
+        }
+
+        .profile {
+            width: 180px;
+            border-radius: 50%;
+            border: 4px solid rgba(255,255,255,0.6);
+        }
+    </style>
 </head>
 <body>
+    <div class="page-wrap">
+        <div class="topbar">
+            <div class="logo-box">
+                <img src="{{ url_for('static', filename='logo_transparent.png') }}" class="logo">
+            </div>
+
+            <div class="photo-box">
+                <img src="{{ url_for('static', filename='Krystyna_optimized_full.png') }}" class="profile">
+            </div>
+        </div>
+
        <nav>
-        <a href="/">Home</a> |
-        <a href="/impressum">Impressum</a> |
-        <a href="/kontakt">Kontakt</a>
+            <a href="{{ url_for('home') }}">Startseite</a>
+            <a href="{{ url_for('impressum') }}">Impressum</a>
+            <a href="{{ url_for('kontakt') }}">Kontakt</a>
        </nav>

-    <hr>
-
        {% block content %}{% endblock %}
+
+        <footer>
+            Hebamme Krystyna Kolb
+        </footer>
+    </div>
 </body>
 </html>
--- a/templates/home.html
+++ b/templates/home.html
@ -1,6 +1,112 @@
 {% extends "base.html" %}

+{% block title %}Hebamme Krystyna Kolb{% endblock %}
+
 {% block content %}
-<h1>Willkommen</h1>
-<p>Herzlich willkommen bei Hebamme Krystyna.</p>
+<section class="hero">
+    <div class="hero-card">
+        <div class="eyebrow">Mit Herz, Erfahrung und Achtsamkeit</div>
+        <h1>Hebamme Krystyna Kolb</h1>
+        <p class="hero-text">
+            <span class="hero-highlight">Ein neues Leben ist ein Wunder.</span>
+            Die jungen Familien achtsam zu begleiten ist meine Berufung.
+            Ich unterstütze euch mit <strong>25 Jahren Erfahrung</strong> –
+            einfühlsam, individuell und sicher in der Schwangerschaft,
+            rund um die Geburt und im Wochenbett.
+        </p>
+    </div>
+
+    <div class="intro-side">
+        <h2>Begleitung in einer besonderen Zeit</h2>
+        <p>
+            Jede Schwangerschaft ist einzigartig. In dieser sensiblen und wertvollen Lebensphase
+            ist es mir wichtig, euch mit Ruhe, Fachwissen und persönlicher Zuwendung zur Seite zu stehen.
+            Gemeinsam schaffen wir Vertrauen, Orientierung und einen geschützten Raum für eure Fragen,
+            Wünsche und Bedürfnisse.
+        </p>
+    </div>
+</section>
+
+<section>
+    <h2 class="section-title">Meine Leistungen</h2>
+    <p class="section-subtitle">
+        Ich begleite euch mit fachlicher Kompetenz und viel Feingefühl durch die verschiedenen Phasen
+        von Schwangerschaft, Geburt und der ersten Zeit mit eurem Baby. Die folgenden Leistungen
+        können individuell auf eure persönliche Situation abgestimmt werden.
+    </p>
+
+    <div class="leistungen-grid">
+        <details>
+            <summary>Mutter-Kind-Pass-Beratung</summary>
+            <div class="detail-content">
+                In der Zeit zwischen der 18. und 22. Schwangerschaftswoche biete ich euch eine
+                umfassende Beratung im Rahmen des Mutter-Kind-Passes an. Dabei geht es um Fragen
+                rund um die Entwicklung eures Babys, euer körperliches und seelisches Wohlbefinden
+                sowie um wertvolle Informationen für eine bewusste und gut vorbereitete Schwangerschaft.
+            </div>
+        </details>
+
+        <details>
+            <summary>Akupunktur</summary>
+            <div class="detail-content">
+                Mit punktgenauer Aktivierung ausgewählter Punkte aus der chinesischen Medizin kann
+                Akupunktur den Körper sanft unterstützen. Sie wird in der Schwangerschaft häufig als
+                wohltuende Begleitung eingesetzt und kann individuell auf eure Bedürfnisse abgestimmt werden.
+            </div>
+        </details>
+
+        <details>
+            <summary>Geburtsvorbereitungskurs</summary>
+            <div class="detail-content">
+                Eine gute Vorbereitung schenkt Vertrauen. Im Geburtsvorbereitungskurs erhaltet ihr
+                hilfreiches Wissen über die Geburt, Atem- und Entspannungstechniken, den Umgang mit
+                Wehen sowie die ersten Tage mit eurem Baby. Ziel ist es, euch Sicherheit zu geben und
+                euch gestärkt auf die Geburt einzustimmen.
+            </div>
+        </details>
+
+        <details>
+            <summary>Wochenbettbetreuung</summary>
+            <div class="detail-content">
+                Die erste Zeit nach der Geburt ist intensiv, berührend und oft auch herausfordernd.
+                In der Wochenbettbetreuung begleite ich euch zuhause mit Ruhe und Erfahrung. Ich unterstütze
+                bei Fragen zur Rückbildung, zur Versorgung eures Babys, zum Stillen und zu allem,
+                was euch in dieser neuen Lebensphase bewegt.
+            </div>
+        </details>
+
+        <details>
+            <summary>Still- und Laktationsberatung</summary>
+            <div class="detail-content">
+                Stillen ist etwas sehr Natürliches und gleichzeitig nicht immer selbstverständlich.
+                Mit einfühlsamer und fachkundiger Still- und Laktationsberatung helfe ich euch dabei,
+                einen guten Start zu finden, Unsicherheiten zu klären und individuelle Lösungen zu entwickeln,
+                damit ihr euch sicher und gut begleitet fühlt.
+            </div>
+        </details>
+
+        <details>
+            <summary>Homöopathie</summary>
+            <div class="detail-content">
+                Die Homöopathie kann als sanfte, ergänzende Begleitung in besonderen Lebensphasen
+                eingesetzt werden. Mit großer Sorgfalt und auf eure persönliche Situation abgestimmt
+                beziehe ich diese Möglichkeit auf Wunsch in meine Betreuung mit ein.
+            </div>
+        </details>
+
+        <details>
+            <summary>Fremdsprachliche Betreuung</summary>
+            <div class="detail-content">
+                Eine vertrauensvolle Begleitung beginnt mit gutem Verstehen. Ich biete Betreuung in
+                mehreren Sprachen an, damit ihr euch in Gesprächen sicher, verstanden und aufgehoben fühlt.
+                <ul class="languages">
+                    <li>Deutsch</li>
+                    <li>Polnisch</li>
+                    <li>Russisch</li>
+                    <li>Englisch</li>
+                </ul>
+            </div>
+        </details>
+    </div>
+</section>
 {% endblock %}
--- a/templates/impressum.html
+++ b/templates/impressum.html
@ -1,6 +1,13 @@
 {% extends "base.html" %}

+{% block title %}Impressum | Hebamme Krystyna Kolb{% endblock %}
+
 {% block content %}
-<h1>Willkommen</h1>
-<p>Herzlich willkommen bei Hebamme Krystyna.</p>
+<div class="hero-card">
+    <h1>Impressum</h1>
+    <p class="hero-text">
+        Angaben gemäß den gesetzlichen Bestimmungen.<br><br>
+        Hebamme Krystyna Kolb
+    </p>
+</div>
 {% endblock %}
--- a/templates/kontakt.html
+++ b/templates/kontakt.html
@ -1,6 +1,13 @@
 {% extends "base.html" %}

+{% block title %}Kontakt | Hebamme Krystyna Kolb{% endblock %}
+
 {% block content %}
+<div class="hero-card">
    <h1>Kontakt</h1>
-<p>Email: info@hebammekrystyna.de</p>
+    <p class="hero-text">
+        Gerne begleite ich euch auf eurem Weg durch Schwangerschaft, Geburt und Wochenbett.
+        Für Anfragen und Terminvereinbarungen freue ich mich über eure Nachricht.
+    </p>
+</div>
 {% endblock %}