Tobias Leuschner
309b01a440
All checks were successful
Deploy via FTP / deploy (push) Successful in 3s
123 lines
5.4 KiB
HTML
123 lines
5.4 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
|
||
|
||
<title>Finger Chooser – Zufällig einen Finger auswählen</title>
|
||
<meta name="description" content="Lege 2–5 Finger gleichzeitig aufs Display. Die App wählt per Zufallsanimation einen Finger aus. Kostenlos, kein Download – direkt im Browser nutzbar.">
|
||
<meta name="keywords" content="finger chooser, finger auswählen, zufälliger finger, wer ist dran, finger roulette, multi touch spiel, gruppenspiel smartphone">
|
||
<meta name="robots" content="index,follow">
|
||
<link rel="canonical" href="/">
|
||
|
||
<!-- Open Graph -->
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:title" content="Finger Chooser – Zufällig einen Finger auswählen">
|
||
<meta property="og:description" content="Lege 2–5 Finger gleichzeitig aufs Display. Die App wählt per Zufallsanimation einen Finger aus. Kostenlos, direkt im Browser.">
|
||
<meta property="og:locale" content="de_DE">
|
||
|
||
<!-- Twitter Card -->
|
||
<meta name="twitter:card" content="summary">
|
||
<meta name="twitter:title" content="Finger Chooser – Zufällig einen Finger auswählen">
|
||
<meta name="twitter:description" content="Lege 2–5 Finger aufs Display – die App wählt per Animation zufällig einen aus. Kostenlos im Browser.">
|
||
|
||
<!-- PWA / Mobile -->
|
||
<meta name="theme-color" content="#0c0c14">
|
||
<meta name="mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||
<meta name="apple-mobile-web-app-title" content="Finger Chooser">
|
||
|
||
<!-- Icons & Manifest -->
|
||
<link rel="manifest" href="manifest.json">
|
||
<link rel="apple-touch-icon" href="icons/apple-touch-icon.png">
|
||
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32.png">
|
||
<link rel="icon" type="image/svg+xml" href="icons/icon.svg">
|
||
|
||
<link rel="stylesheet" href="css/style.css">
|
||
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org",
|
||
"@type": "WebApplication",
|
||
"name": "Finger Chooser",
|
||
"description": "Lege mehrere Finger auf das Display – ein Finger wird per Zufallsanimation ausgewählt. Ideal für Gruppenentscheidungen.",
|
||
"applicationCategory": "GameApplication",
|
||
"operatingSystem": "Any",
|
||
"browserRequirements": "Requires JavaScript and a touch-capable browser",
|
||
"offers": { "@type": "Offer", "price": "0", "priceCurrency": "EUR" },
|
||
"inLanguage": "de"
|
||
}
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<main id="stage">
|
||
<div id="overlay">
|
||
<h1>Finger Chooser</h1>
|
||
<p>Lege 2 oder mehr Finger auf das Display —<br>einer wird zufällig ausgewählt.</p>
|
||
<p class="hint">Alle Finger anheben, um neu zu starten.</p>
|
||
<p id="limit-hint" class="hint"></p>
|
||
</div>
|
||
</main>
|
||
|
||
<div id="install-hint" style="display:none">
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||
<rect x="3" y="3" width="18" height="18" rx="3"/>
|
||
<path d="M9 3v4M15 3v4M3 9h18M9 17l3-3 3 3M12 14v6"/>
|
||
</svg>
|
||
<span id="install-hint-text"></span>
|
||
<button id="install-hint-close" aria-label="Hinweis schließen">×</button>
|
||
</div>
|
||
|
||
<footer id="legal-bar">
|
||
<a href="impressum.html">Impressum</a>
|
||
<span aria-hidden="true">·</span>
|
||
<a href="datenschutz.html">Datenschutz</a>
|
||
<span aria-hidden="true">·</span>
|
||
<a href="https://git.leuschner.dev/Tobias/ChooserApp" target="_blank" rel="noopener noreferrer">Quellcode</a>
|
||
</footer>
|
||
|
||
<script>
|
||
(function(){
|
||
// Device finger limit hint
|
||
var el = document.getElementById('limit-hint');
|
||
if(/iPhone/.test(navigator.userAgent)){
|
||
el.textContent = 'Auf dem iPhone sind max. 5 Finger möglich (Hardware-Limit).';
|
||
} else {
|
||
el.textContent = 'Auf diesem Gerät sind mehrere Finger gleichzeitig möglich.';
|
||
}
|
||
|
||
// Install hint — only when not already running as installed app
|
||
var isStandalone = window.navigator.standalone === true ||
|
||
window.matchMedia('(display-mode: standalone)').matches;
|
||
if (isStandalone) return;
|
||
if (sessionStorage.getItem('ihd')) return;
|
||
|
||
var ua = navigator.userAgent;
|
||
var hint = document.getElementById('install-hint');
|
||
var text = document.getElementById('install-hint-text');
|
||
|
||
if (/iPhone|iPad|iPod/.test(ua)) {
|
||
text.innerHTML = 'Tippe auf <strong>Teilen ↑</strong> → <strong>„Zum Home‑Bildschirm"</strong> um die App zu installieren.';
|
||
} else if (/Android/.test(ua)) {
|
||
text.innerHTML = 'Tippe auf <strong>⋮</strong> → <strong>„App installieren"</strong> um die App zum Startbildschirm hinzuzufügen.';
|
||
} else {
|
||
return;
|
||
}
|
||
|
||
hint.style.display = 'flex';
|
||
document.getElementById('install-hint-close').addEventListener('click', function(){
|
||
hint.style.display = 'none';
|
||
sessionStorage.setItem('ihd', '1');
|
||
});
|
||
})();
|
||
</script>
|
||
<script src="js/app.js"></script>
|
||
<noscript>
|
||
<div style="position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#0c0c14;color:#fff;font-family:system-ui,sans-serif;text-align:center;padding:24px">
|
||
Bitte aktiviere JavaScript, um die Anwendung zu nutzen.
|
||
</div>
|
||
</noscript>
|
||
</body>
|
||
</html>
|