204 lines
9.6 KiB
HTML
204 lines
9.6 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<meta name="theme-color" content="#2d6a2d" />
|
||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
|
||
<meta name="apple-mobile-web-app-title" content="Jagd Apps" />
|
||
<meta name="mobile-web-app-capable" content="yes" />
|
||
<link rel="manifest" href="/manifest.json" />
|
||
<meta name="description" content="Jagd Apps Heidekreis – Nachsuche, Drohnenführer, Stöberhunde" />
|
||
<title>Jagd Apps Heidekreis</title>
|
||
<script>
|
||
window.__installPrompt = null;
|
||
window.addEventListener('beforeinstallprompt', function(e) {
|
||
e.preventDefault();
|
||
window.__installPrompt = e;
|
||
});
|
||
</script>
|
||
<style>
|
||
*, *::before, *::after { box-sizing: border-box; }
|
||
:root {
|
||
--green: #2d6a2d;
|
||
--text: #1a1a1a;
|
||
--muted: #555;
|
||
--bg: #f5f5f0;
|
||
--card-bg: #ffffff;
|
||
--border: #d4e8d4;
|
||
--shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||
--radius: 12px;
|
||
}
|
||
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; min-height: 100vh; }
|
||
header { background: var(--green); color: #fff; padding: 1.25rem 1.5rem; text-align: center; }
|
||
header h1 { margin: 0; font-size: 1.35rem; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 0.6rem; }
|
||
header h1 img { height: 2.2rem; width: auto; vertical-align: middle; }
|
||
header p { margin: 0.3rem 0 0; font-size: 0.9rem; opacity: 0.85; }
|
||
main { max-width: 520px; margin: 0 auto; padding: 1.5rem 1rem 3rem; display: flex; flex-direction: column; gap: 1rem; }
|
||
.app-card { background: var(--card-bg); border: 1px solid var(--border); border-left: 5px solid var(--green); border-radius: var(--radius); box-shadow: var(--shadow); display: flex; align-items: center; gap: 1.25rem; padding: 1.25rem; text-decoration: none; color: var(--text); transition: transform 0.15s, box-shadow 0.15s; -webkit-tap-highlight-color: transparent; }
|
||
.app-card:active { transform: scale(0.98); }
|
||
@media (hover: hover) { .app-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,0.12); } }
|
||
.app-icon { flex-shrink: 0; width: 52px; display: flex; align-items: center; justify-content: center; }
|
||
.app-info { flex: 1; }
|
||
.app-name { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.2rem; }
|
||
.app-desc { font-size: 0.85rem; color: var(--muted); margin: 0; line-height: 1.4; }
|
||
.app-arrow { color: var(--green); font-size: 1.3rem; flex-shrink: 0; }
|
||
footer { text-align: center; padding: 1rem; font-size: 0.75rem; color: var(--muted); }
|
||
#install-banner { display: none; position: sticky; top: 0; z-index: 100; background: var(--green); color: #fff; padding: 0.6rem 1rem; font-size: 0.88rem; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
|
||
#install-banner.visible { display: flex; }
|
||
#install-banner span { flex: 1; }
|
||
#install-btn { background: #fff; color: var(--green); border: none; border-radius: 4px; padding: 0.3rem 0.8rem; font-weight: 600; font-size: 0.85rem; cursor: pointer; white-space: nowrap; }
|
||
#dismiss-btn { background: transparent; border: none; color: rgba(255,255,255,0.8); font-size: 1rem; cursor: pointer; padding: 0.2rem 0.3rem; flex-shrink: 0; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div id="install-banner" role="banner">
|
||
<span id="install-text">📲 App auf dem Homescreen installieren</span>
|
||
<button id="install-btn" style="display:none">Installieren</button>
|
||
<button id="dismiss-btn" aria-label="Schließen">✕</button>
|
||
</div>
|
||
|
||
<header>
|
||
<h1><img src="/icon-192.png?v=2" alt="Logo"> Jagd Apps Heidekreis</h1>
|
||
<p>Wählen Sie Ihre App</p>
|
||
</header>
|
||
|
||
<main>
|
||
<a href="/nachsuche/" class="app-card">
|
||
<div class="app-icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="44" height="44" aria-hidden="true">
|
||
<!-- floppy ears -->
|
||
<ellipse cx="9" cy="24" rx="5" ry="9" fill="#2d6a2d"/>
|
||
<ellipse cx="35" cy="24" rx="5" ry="9" fill="#2d6a2d"/>
|
||
<!-- head -->
|
||
<circle cx="22" cy="21" r="13" fill="#2d6a2d"/>
|
||
<!-- muzzle -->
|
||
<ellipse cx="22" cy="28" rx="7" ry="5" fill="#3a7a3a"/>
|
||
<!-- nose -->
|
||
<ellipse cx="22" cy="25" rx="4.5" ry="2.5" fill="#1a3a1a"/>
|
||
<!-- eyes -->
|
||
<circle cx="17" cy="18" r="2.5" fill="white"/>
|
||
<circle cx="17" cy="18" r="1.2" fill="#111"/>
|
||
<circle cx="27" cy="18" r="2.5" fill="white"/>
|
||
<circle cx="27" cy="18" r="1.2" fill="#111"/>
|
||
</svg>
|
||
</div>
|
||
<div class="app-info">
|
||
<p class="app-name">Nachsuche</p>
|
||
<p class="app-desc">Nachsuchenstation Heidekreis – Übersicht der Nachsuchenführer und Verfügbarkeiten</p>
|
||
</div>
|
||
<span class="app-arrow">›</span>
|
||
</a>
|
||
<a href="/drohnenfuehrer/" class="app-card">
|
||
<div class="app-icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="44" height="44" aria-hidden="true">
|
||
<!-- arms -->
|
||
<line x1="22" y1="22" x2="9" y2="9" stroke="#2d6a2d" stroke-width="3" stroke-linecap="round"/>
|
||
<line x1="22" y1="22" x2="35" y2="9" stroke="#2d6a2d" stroke-width="3" stroke-linecap="round"/>
|
||
<line x1="22" y1="22" x2="9" y2="35" stroke="#2d6a2d" stroke-width="3" stroke-linecap="round"/>
|
||
<line x1="22" y1="22" x2="35" y2="35" stroke="#2d6a2d" stroke-width="3" stroke-linecap="round"/>
|
||
<!-- rotors -->
|
||
<circle cx="9" cy="9" r="5" fill="none" stroke="#2d6a2d" stroke-width="2.5"/>
|
||
<circle cx="35" cy="9" r="5" fill="none" stroke="#2d6a2d" stroke-width="2.5"/>
|
||
<circle cx="9" cy="35" r="5" fill="none" stroke="#2d6a2d" stroke-width="2.5"/>
|
||
<circle cx="35" cy="35" r="5" fill="none" stroke="#2d6a2d" stroke-width="2.5"/>
|
||
<!-- body -->
|
||
<rect x="17" y="17" width="10" height="10" rx="2" fill="#2d6a2d"/>
|
||
<!-- camera -->
|
||
<circle cx="22" cy="22" r="2.5" fill="white"/>
|
||
</svg>
|
||
</div>
|
||
<div class="app-info">
|
||
<p class="app-name">Drohnenführer</p>
|
||
<p class="app-desc">Drohnenführer Heidekreis – Übersicht der zertifizierten Drohnenführer im Einsatz</p>
|
||
</div>
|
||
<span class="app-arrow">›</span>
|
||
</a>
|
||
<a href="/stoeberhunde/" class="app-card">
|
||
<div class="app-icon">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44" width="44" height="44" aria-hidden="true">
|
||
<!-- main pad -->
|
||
<ellipse cx="22" cy="32" rx="10" ry="8" fill="#2d6a2d"/>
|
||
<!-- toe pads -->
|
||
<ellipse cx="11" cy="21" rx="3.5" ry="4.5" fill="#2d6a2d" transform="rotate(-20 11 21)"/>
|
||
<ellipse cx="18" cy="16" rx="3.5" ry="4.5" fill="#2d6a2d"/>
|
||
<ellipse cx="26" cy="16" rx="3.5" ry="4.5" fill="#2d6a2d"/>
|
||
<ellipse cx="33" cy="21" rx="3.5" ry="4.5" fill="#2d6a2d" transform="rotate(20 33 21)"/>
|
||
</svg>
|
||
</div>
|
||
<div class="app-info">
|
||
<p class="app-name">Stöberhunde</p>
|
||
<p class="app-desc">Stöberhunde Heidekreis – Übersicht der Stöberhundleiter und Einsatzmöglichkeiten</p>
|
||
</div>
|
||
<span class="app-arrow">›</span>
|
||
</a>
|
||
</main>
|
||
|
||
<footer>Jägerschaft Fallingbostel e.V.</footer>
|
||
|
||
<script>
|
||
if ('serviceWorker' in navigator) {
|
||
navigator.serviceWorker.register('/sw.js').catch(() => {});
|
||
}
|
||
|
||
const banner = document.getElementById('install-banner');
|
||
const installBtn = document.getElementById('install-btn');
|
||
const dismissBtn = document.getElementById('dismiss-btn');
|
||
const installText = document.getElementById('install-text');
|
||
|
||
const isStandalone = () =>
|
||
window.matchMedia('(display-mode: standalone)').matches ||
|
||
window.navigator.standalone === true;
|
||
|
||
const isIOS = () =>
|
||
/iphone|ipad|ipod/i.test(navigator.userAgent) && !window.MSStream;
|
||
|
||
const isSamsung = () =>
|
||
/SamsungBrowser/i.test(navigator.userAgent);
|
||
|
||
function attachInstall(prompt) {
|
||
installBtn.style.display = '';
|
||
installBtn.onclick = async () => {
|
||
prompt.prompt();
|
||
const { outcome } = await prompt.userChoice;
|
||
if (outcome === 'accepted') banner.classList.remove('visible');
|
||
};
|
||
}
|
||
|
||
if (!isStandalone() && !sessionStorage.getItem('portal-pwa-dismissed')) {
|
||
if (isIOS()) {
|
||
installText.textContent = '📲 Zum Homescreen: Teilen ⬆️ → „Zum Home-Bildschirm"';
|
||
banner.classList.add('visible');
|
||
} else if (isSamsung()) {
|
||
installText.textContent = '📲 App installieren: Menü ⋮ → „Seite hinzufügen" → „Auf Startbildschirm"';
|
||
banner.classList.add('visible');
|
||
if (window.__installPrompt) {
|
||
attachInstall(window.__installPrompt);
|
||
} else {
|
||
window.addEventListener('beforeinstallprompt', (e) => { e.preventDefault(); attachInstall(e); });
|
||
}
|
||
} else {
|
||
const activate = (e) => {
|
||
e.preventDefault();
|
||
installText.textContent = '📲 App auf dem Homescreen installieren';
|
||
attachInstall(e);
|
||
banner.classList.add('visible');
|
||
};
|
||
if (window.__installPrompt) {
|
||
activate(window.__installPrompt);
|
||
} else {
|
||
window.addEventListener('beforeinstallprompt', activate);
|
||
}
|
||
}
|
||
}
|
||
|
||
dismissBtn.addEventListener('click', () => {
|
||
sessionStorage.setItem('portal-pwa-dismissed', '1');
|
||
banner.classList.remove('visible');
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|