dd-timer/ntfy-redirect/index.html

75 lines
3.1 KiB
HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Minuteur Dragodinde - Notifications</title>
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#0b0b14;color:#dddaf8;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.card{background:#181828;border:1px solid #2a2a45;border-radius:16px;padding:32px;max-width:400px;width:100%;text-align:center}
h1{font-size:1.3rem;margin-bottom:8px}
.sub{color:#6868a0;font-size:0.85rem;margin-bottom:24px}
.spinner{width:32px;height:32px;border:3px solid #2a2a45;border-top-color:#c060ff;border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 16px}
@keyframes spin{to{transform:rotate(360deg)}}
.msg{font-size:0.9rem;margin-bottom:24px;line-height:1.6}
.btn{display:block;width:100%;padding:14px;border-radius:10px;border:none;font-size:1rem;font-weight:700;cursor:pointer;text-decoration:none;margin-bottom:10px;text-align:center}
.btn-main{background:linear-gradient(135deg,#5020b0,#c060ff);color:#fff}
.btn-store{background:#20203a;color:#dddaf8;border:1px solid #2a2a45}
.btn-store:hover{background:#2a2a45}
.hidden{display:none}
.sep{color:#6868a0;font-size:0.8rem;margin:12px 0}
</style>
</head>
<body>
<div class="card">
<h1>Minuteur Dragodinde</h1>
<p class="sub">Notifications mobiles</p>
<div id="loading">
<div class="spinner"></div>
<p class="msg">Ouverture de l'app ntfy...</p>
</div>
<div id="fallback" class="hidden">
<p class="msg">Si l'app ntfy ne s'est pas ouverte, installe-la d'abord :</p>
<a id="btn-play" class="btn btn-store" href="#" target="_blank">Android — Play Store</a>
<a id="btn-apple" class="btn btn-store" href="#" target="_blank">iOS — App Store</a>
<div class="sep">puis reviens sur cette page</div>
<button id="btn-retry" class="btn btn-main" onclick="doRedirect()">Ouvrir dans ntfy</button>
</div>
</div>
<script>
const params = new URLSearchParams(window.location.search);
const topic = params.get('t');
const server = params.get('s') || 'ntfy.mickael-pol.fr';
const name = params.get('n') || 'dd-timer';
const ntfyLink = 'ntfy://' + server + '/' + topic + '?display=' + encodeURIComponent(name);
const playStore = 'https://play.google.com/store/apps/details?id=io.heckel.ntfy';
const appStore = 'https://apps.apple.com/app/ntfy/id1625396347';
document.getElementById('btn-play').href = playStore;
document.getElementById('btn-apple').href = appStore;
function doRedirect() {
if (!topic) return;
window.location = ntfyLink;
}
// Tenter la redirection automatique
if (topic) {
doRedirect();
// Afficher le fallback après 2s si on est toujours sur la page
setTimeout(function() {
document.getElementById('loading').classList.add('hidden');
document.getElementById('fallback').classList.remove('hidden');
}, 2000);
} else {
document.getElementById('loading').innerHTML = '<p class="msg" style="color:#ff5070">Lien invalide — aucun topic fourni.</p>';
}
</script>
</body>
</html>