From 1e6a83514f5f091046b98457d67508e0d9b6eba7 Mon Sep 17 00:00:00 2001
From: samuelzielke <git@samuelzielke.de>
Date: Wed, 30 Sep 2026 12:51:08 +0200
Subject: [PATCH] Install-Anleitung modernisiert: iOS + Android, eigene Seite
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Die alte Anleitung war nur für iOS, inhaltlich veraltet (kein Hinweis auf
Safari-Pflicht, keine In-App-Browser-Warnung) und lief im mobilen App-Shell-
Layout von base.html - dessen fixe Viewport-Höhe und ausgeblendete Header-
Icons (die zugehörige JS zum Einblenden fehlte auf dieser Seite) passen
nicht zu einer längeren, bebilderten Anleitung.

- Eigenständige, responsive Seite (kein app-shell mehr) - normal scrollbar,
  auch auf Desktop sinnvoll lesbar (für geteilte Links)
- iOS (Safari) und Android (Chrome) je mit 3 Schritten, automatische
  Erkennung per User-Agent mit manuellem Umschalter, Wahl wird gemerkt
- Warnhinweise: iOS braucht zwingend Safari (In-App-Browser-Falle erwähnt),
  Android-Menüpunkt kann je nach Hersteller anders heißen
- Eigene, einfache SVG-Schritt-Icons statt nachgestellter Apple/Google-
  Screenshots - ehrlicher als exakte UI vorzutäuschen, und markenrechtlich
  unproblematisch
- Bestehende Marke konsistent weitergeführt (Grün/Teal, App-Icon), keine
  neue visuelle Sprache - die kommt für die geplante Landingpage
- Kontaktwege (Feedback-Mail, WhatsApp) im Footer wie im Rest der App

Lokal getestet: Django-Check sauber, Rendering per Headless-Chrome-Screenshot
bei 900px (iOS- und Android-Ansicht) geprüft, Content-Struktur bei 500px
Layoutbreite ohne Overflow verifiziert (das Tool in dieser Umgebung erzwingt
intern eine Mindestbreite, echte Handybreiten ließen sich nicht zuverlässig
screenshotten - defensiv trotzdem mit clamp()-Titelgröße und min-width:0 an
den Flex-Textkindern gegen schmale Displays abgesichert). Empfehle echten
Gerätetest.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 app/templates/app/install.html | 430 +++++++++++++++++++++++++++++++--
 1 file changed, 415 insertions(+), 15 deletions(-)

diff --git a/app/templates/app/install.html b/app/templates/app/install.html
index 7496052..f2d7598 100644
--- a/app/templates/app/install.html
+++ b/app/templates/app/install.html
@@ -1,15 +1,415 @@
-{% extends 'app/base.html' %} 
-
-{% block content %}
-<h1>Installieren</h1>
-<br>
-<p>
-    Folgende Schritte sind nötig um PioMint unter IOS zu installieren:
-    <br>
-    1. Auf das <b>Teilen</b> Symbol klicken.
-    <br>
-    2. Auf <b>Zum Home-Bildschirm hinzufügen</b> klicken.
-    <br>
-    3. Auf <b>Hinzufügen</b> klicken.
-</p>
-{% endblock %}
+{% load static %}
+<!DOCTYPE html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="{% static 'app/css/bootstrap.css' %}?v={{ STATIC_VERSION }}">
+    <title>PioMint installieren</title>
+    <style>
+        :root {
+            --mint: rgb(120, 170, 86);
+            --mint-dark: rgb(98, 140, 68);
+            --teal: #026670;
+            --ink: #1c2723;
+            --paper: #fbfbf9;
+        }
+
+html, body {
+            overflow-x: hidden;
+        }
+
+        body {
+            background-color: var(--paper);
+            color: var(--ink);
+            padding-bottom: 4rem;
+        }
+
+        .hero {
+            background: linear-gradient(155deg, var(--teal) 0%, #024a52 100%);
+            color: white;
+            padding: 3rem 1.25rem 4.5rem 1.25rem;
+            text-align: center;
+        }
+
+        .hero img {
+            width: 84px;
+            height: 84px;
+            border-radius: 22px;
+            box-shadow: 0 0.75rem 1.75rem rgba(0, 0, 0, 0.35);
+            margin-bottom: 1.25rem;
+        }
+
+        .hero h1 {
+            font-weight: 700;
+            font-size: clamp(1.4rem, 7vw, 2.5rem);
+            margin-bottom: 0.5rem;
+        }
+
+        .hero h1 b {
+            color: var(--mint);
+        }
+
+        .hero p {
+            color: rgba(255, 255, 255, 0.8);
+            max-width: 32rem;
+            margin: 0 auto;
+        }
+
+        .wrap {
+            max-width: 640px;
+            margin: -3rem auto 0 auto;
+            padding: 0 1.25rem;
+        }
+
+        /* Segmented control */
+        .platform-switch {
+            display: flex;
+            background: white;
+            border-radius: 1rem;
+            box-shadow: 0 0.5rem 1.5rem rgba(2, 30, 33, 0.15);
+            padding: 0.35rem;
+            gap: 0.35rem;
+        }
+
+        .platform-switch button {
+            flex: 1;
+            min-width: 0;
+            border: none;
+            background: transparent;
+            padding: 0.7rem 0.5rem;
+            border-radius: 0.7rem;
+            font-weight: 600;
+            font-size: 0.95rem;
+            color: #6c757d;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+            transition: background-color 0.2s ease, color 0.2s ease;
+        }
+
+        .platform-switch button.active {
+            background: var(--teal);
+            color: white;
+        }
+
+        .platform-switch svg {
+            width: 18px;
+            height: 18px;
+            flex-shrink: 0;
+        }
+
+        /* Warnhinweis */
+        .browser-note {
+            margin-top: 1.25rem;
+            background: #fff7e6;
+            border: 1px solid #f3dca6;
+            color: #7a5b12;
+            border-radius: 0.85rem;
+            padding: 0.9rem 1.1rem;
+            font-size: 0.9rem;
+            display: flex;
+            gap: 0.65rem;
+            align-items: flex-start;
+        }
+
+        .browser-note svg {
+            width: 20px;
+            height: 20px;
+            flex-shrink: 0;
+            margin-top: 0.1rem;
+        }
+
+        /* Schritte */
+        .steps {
+            margin-top: 2rem;
+            position: relative;
+        }
+
+        .step {
+            display: flex;
+            gap: 1.1rem;
+            padding-bottom: 2rem;
+            position: relative;
+        }
+
+        .step:not(:last-child)::before {
+            content: "";
+            position: absolute;
+            left: 27px;
+            top: 56px;
+            bottom: 0;
+            width: 2px;
+            background: repeating-linear-gradient(to bottom, #d8ded4 0 6px, transparent 6px 12px);
+        }
+
+        .step-badge {
+            flex-shrink: 0;
+            width: 56px;
+            height: 56px;
+            border-radius: 16px;
+            background: white;
+            box-shadow: 0 0.4rem 1rem rgba(2, 30, 33, 0.12);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+        }
+
+        .step-badge svg {
+            width: 26px;
+            height: 26px;
+            color: var(--teal);
+        }
+
+        .step-num {
+            position: absolute;
+            top: -6px;
+            right: -6px;
+            width: 22px;
+            height: 22px;
+            border-radius: 50%;
+            background: var(--mint);
+            color: white;
+            font-size: 0.7rem;
+            font-weight: 700;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        /* Tippen-Indikator */
+        .tap-ring {
+            position: absolute;
+            width: 14px;
+            height: 14px;
+            border-radius: 50%;
+            border: 2px solid var(--mint);
+            animation: tapPulse 1.8s ease-out infinite;
+        }
+
+        @keyframes tapPulse {
+            0% { transform: scale(0.6); opacity: 0.9; }
+            80% { transform: scale(1.8); opacity: 0; }
+            100% { transform: scale(1.8); opacity: 0; }
+        }
+
+        .step-body {
+            padding-top: 0.35rem;
+            min-width: 0;
+        }
+
+        .browser-note > div {
+            min-width: 0;
+        }
+
+        .step-body h3 {
+            font-size: 1.05rem;
+            font-weight: 700;
+            margin-bottom: 0.25rem;
+        }
+
+        .step-body p {
+            color: #4b5a54;
+            margin: 0;
+            font-size: 0.95rem;
+        }
+
+        .step-body kbd {
+            background: #eef2ef;
+            color: var(--teal);
+            border-radius: 0.35rem;
+            padding: 0.05rem 0.4rem;
+            font-weight: 600;
+            font-size: 0.85em;
+        }
+
+        .done-card {
+            margin-top: 0.5rem;
+            background: linear-gradient(155deg, var(--mint) 0%, var(--mint-dark) 100%);
+            color: white;
+            border-radius: 1rem;
+            padding: 1.5rem;
+            text-align: center;
+            box-shadow: 0 0.5rem 1.5rem rgba(98, 140, 68, 0.3);
+        }
+
+        .done-card h3 {
+            font-weight: 700;
+            margin-bottom: 0.35rem;
+        }
+
+        .done-card p {
+            margin: 0;
+            opacity: 0.92;
+        }
+
+        footer {
+            text-align: center;
+            margin-top: 3rem;
+            color: #8a938c;
+            font-size: 0.85rem;
+        }
+
+        footer a {
+            color: var(--teal);
+            font-weight: 600;
+            text-decoration: none;
+        }
+
+        [data-platform-section] {
+            display: none;
+        }
+
+        [data-platform-section].active {
+            display: block;
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            .tap-ring { animation: none; opacity: 0.6; }
+        }
+    </style>
+</head>
+<body>
+
+    <div class="hero">
+        <img src="{% static 'app/images/appleicon_whitebg.png' %}" alt="PioMint Icon">
+        <h1>PIO<b>MINT</b> installieren</h1>
+        <p>Einmal einrichten, dann liegt PioMint als eigenes App-Icon auf deinem
+            Homescreen – ganz ohne App Store, in unter einer Minute.</p>
+    </div>
+
+    <div class="wrap">
+
+        <div class="platform-switch" role="tablist">
+            <button type="button" id="tab-ios" role="tab" onclick="showPlatform('ios')">
+                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.53 4.09l-.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/></svg>
+                iPhone
+            </button>
+            <button type="button" id="tab-android" role="tab" onclick="showPlatform('android')">
+                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M17.6 9.48l1.84-3.18a.5.5 0 00-.87-.5l-1.86 3.22a10.9 10.9 0 00-9.42 0L5.43 5.8a.5.5 0 00-.87.5L6.4 9.48A9.99 9.99 0 001 17h22a9.99 9.99 0 00-5.4-7.52zM7 14.5a1 1 0 111-1 1 1 0 01-1 1zm10 0a1 1 0 111-1 1 1 0 01-1 1z"/></svg>
+                Android
+            </button>
+        </div>
+
+        <!-- iOS -->
+        <div data-platform-section="ios">
+            <div class="browser-note">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 8v5M12 16h.01" stroke-linecap="round"/></svg>
+                <div>Funktioniert nur in <b>Safari</b>. Falls dieser Link in Instagram, WhatsApp
+                    oder einer anderen App geöffnet wurde: oben rechts <b>„In Safari öffnen"</b>
+                    wählen, dann weiter unten.</div>
+            </div>
+
+            <div class="steps">
+                <div class="step">
+                    <div class="step-badge">
+                        <span class="step-num">1</span>
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 15V3M8 7l4-4 4 4"/><path d="M4 13v6a2 2 0 002 2h12a2 2 0 002-2v-6"/></svg>
+                        <span class="tap-ring" style="bottom: -2px; right: -2px;"></span>
+                    </div>
+                    <div class="step-body">
+                        <h3>Teilen-Symbol antippen</h3>
+                        <p>In der Leiste am unteren (bei manchen Geräten oberen) Bildschirmrand
+                            von Safari – das Quadrat mit dem Pfeil nach oben.</p>
+                    </div>
+                </div>
+                <div class="step">
+                    <div class="step-badge">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="4"/><path d="M12 9v6M9 12h6"/></svg>
+                    </div>
+                    <div class="step-body">
+                        <h3>„Zum Home-Bildschirm" wählen</h3>
+                        <p>In der Liste etwas herunterscrollen, falls es nicht sofort zu sehen
+                            ist.</p>
+                    </div>
+                </div>
+                <div class="step">
+                    <div class="step-badge">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
+                    </div>
+                    <div class="step-body">
+                        <h3>Oben rechts auf „Hinzufügen" tippen</h3>
+                        <p>Der Name „PioMint" ist schon vorausgefüllt – einfach so lassen.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Android -->
+        <div data-platform-section="android">
+            <div class="browser-note">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 8v5M12 16h.01" stroke-linecap="round"/></svg>
+                <div>Am zuverlässigsten in <b>Chrome</b>. Manche Geräte (z. B. Samsung Internet)
+                    nennen den Menüpunkt etwas anders, das Prinzip ist aber gleich.</div>
+            </div>
+
+            <div class="steps">
+                <div class="step">
+                    <div class="step-badge">
+                        <span class="step-num">1</span>
+                        <svg viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>
+                        <span class="tap-ring" style="bottom: -2px; right: -2px;"></span>
+                    </div>
+                    <div class="step-body">
+                        <h3>Menü oben rechts öffnen</h3>
+                        <p>Die drei Punkte <kbd>⋮</kbd> neben der Adressleiste antippen.</p>
+                    </div>
+                </div>
+                <div class="step">
+                    <div class="step-badge">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2"/><path d="M12 8v5M9.5 10.5h5" stroke-linecap="round"/></svg>
+                    </div>
+                    <div class="step-body">
+                        <h3>„App installieren" antippen</h3>
+                        <p>Manchmal schlägt Chrome das schon automatisch über ein kleines
+                            Banner vor – dann reicht ein Tipp darauf.</p>
+                    </div>
+                </div>
+                <div class="step">
+                    <div class="step-badge">
+                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg>
+                    </div>
+                    <div class="step-body">
+                        <h3>Mit „Installieren" bestätigen</h3>
+                        <p>Das Icon landet direkt auf deinem Startbildschirm.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="done-card">
+            <h3>Fertig! 🎉</h3>
+            <p>PioMint öffnet sich jetzt wie eine eigene App – ohne Adressleiste, mit
+                eigenem Icon. Einfach drauftippen und loslegen.</p>
+        </div>
+
+        <footer>
+            Fragen oder klappt etwas nicht? Schreib uns an
+            <a href="mailto:app-feedback@zielke.studio">app-feedback@zielke.studio</a>
+            oder in der <a href="https://chat.whatsapp.com/Cy4laGaEdLP1DZbhN04zRQ" target="_blank" rel="noopener noreferrer">WhatsApp-Community</a>.
+        </footer>
+
+    </div>
+
+    <script>
+        function showPlatform(platform) {
+            document.querySelectorAll('[data-platform-section]').forEach(function (el) {
+                el.classList.toggle('active', el.dataset.platformSection === platform);
+            });
+            document.getElementById('tab-ios').classList.toggle('active', platform === 'ios');
+            document.getElementById('tab-android').classList.toggle('active', platform === 'android');
+            try { localStorage.setItem('piomintInstallPlatform', platform); } catch (error) {}
+        }
+
+        (function () {
+            var saved = null;
+            try { saved = localStorage.getItem('piomintInstallPlatform'); } catch (error) {}
+            var ua = navigator.userAgent || '';
+            var detected = /Android/i.test(ua) ? 'android' : 'ios';
+            showPlatform(saved || detected);
+        })();
+    </script>
+</body>
+</html>