|
|
|
|
@ -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>
|
|
|
|
|
|
