Fixed minor issues with
This commit is contained in:
VIART Mathieu
parent
516af8b23f
commit
8a54aeadc5
4 changed files with 112 additions and 1 deletions
|
|
@ -1474,4 +1474,26 @@ body.reverse-mode .cat-sort-btn {
|
|||
*::selection {
|
||||
background: transparent;
|
||||
color: inherit;
|
||||
|
||||
/* ── iOS Install Banner ─────────────────────────────────────────── */
|
||||
#ios-install-banner {
|
||||
position: fixed;
|
||||
bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: calc(100% - 32px);
|
||||
max-width: 360px;
|
||||
background: var(--surface2);
|
||||
border: 1px solid rgba(245,200,66,0.4);
|
||||
border-radius: 16px;
|
||||
padding: 14px 16px 10px;
|
||||
z-index: 8000;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
|
||||
animation: banner-slide-up 0.4s cubic-bezier(.2,.9,.2,1);
|
||||
}
|
||||
@keyframes banner-slide-up {
|
||||
from { opacity:0; transform:translateX(-50%) translateY(20px); }
|
||||
to { opacity:1; transform:translateX(-50%) translateY(0); }
|
||||
}
|
||||
|
||||
}
|
||||
64
index.html
64
index.html
|
|
@ -1,4 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<script>
|
||||
// Affiche le bouton uniquement sur iOS Safari hors standalone
|
||||
(function() {
|
||||
var isIOS = /iphone|ipad|ipod/i.test(navigator.userAgent);
|
||||
var isSafari = /safari/i.test(navigator.userAgent) && !/crios|fxios/i.test(navigator.userAgent);
|
||||
var isStandalone = navigator.standalone === true;
|
||||
if (isIOS && isSafari && !isStandalone) {
|
||||
var btn = document.getElementById('btn-ios-install');
|
||||
if (btn) btn.style.display = 'inline-flex';
|
||||
}
|
||||
})();
|
||||
|
||||
function openIosInstallModal() {
|
||||
var m = document.getElementById('ios-install-modal');
|
||||
if (m) { m.style.display = 'flex'; applyTranslations(); }
|
||||
}
|
||||
function closeIosInstallModal() {
|
||||
var m = document.getElementById('ios-install-modal');
|
||||
if (m) m.style.display = 'none';
|
||||
}
|
||||
// Fermer en cliquant sur le fond
|
||||
document.getElementById('ios-install-modal').addEventListener('click', function(e) {
|
||||
if (e.target === this) closeIosInstallModal();
|
||||
});
|
||||
</script>
|
||||
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
|
|
@ -112,6 +139,43 @@
|
|||
</svg>
|
||||
github.com/mathieuviart/legrandgeoquiz
|
||||
</a>
|
||||
<div style="margin-top:10px;text-align:center;">
|
||||
<button id="btn-ios-install"
|
||||
onclick="openIosInstallModal()"
|
||||
style="display:none;background:none;border:1px solid rgba(245,200,66,0.35);border-radius:8px;padding:6px 14px;font-family:'DM Mono',monospace;font-size:0.68em;color:#f5c842;cursor:pointer;transition:all 0.15s;gap:6px;align-items:center;"
|
||||
onmouseover="this.style.background='rgba(245,200,66,0.08)'"
|
||||
onmouseout="this.style.background='none'">
|
||||
📲 <span data-i18n="iosInstallBtn"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Modal instructions iOS -->
|
||||
<div id="ios-install-modal" style="display:none;position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,0.7);backdrop-filter:blur(4px);align-items:flex-end;justify-content:center;">
|
||||
<div style="width:100%;max-width:480px;background:var(--surface);border:1px solid rgba(245,200,66,0.4);border-radius:20px 20px 0 0;padding:24px 20px calc(env(safe-area-inset-bottom,0px) + 24px);position:relative;">
|
||||
<button onclick="closeIosInstallModal()" style="position:absolute;top:14px;right:16px;background:none;border:none;color:var(--muted);font-size:1.3em;cursor:pointer;">✕</button>
|
||||
<div style="font-family:'Syne',sans-serif;font-size:1em;font-weight:800;color:#f5c842;margin-bottom:16px;">📲 <span data-i18n="iosInstallTitle"></span></div>
|
||||
|
||||
<!-- Étape 1 -->
|
||||
<div style="display:flex;align-items:flex-start;gap:12px;margin-bottom:14px;">
|
||||
<div style="min-width:28px;height:28px;border-radius:50%;background:rgba(245,200,66,0.15);border:1px solid rgba(245,200,66,0.4);display:flex;align-items:center;justify-content:center;font-family:'DM Mono',monospace;font-size:0.75em;color:#f5c842;font-weight:700;">1</div>
|
||||
<div style="font-family:'DM Mono',monospace;font-size:0.78em;color:var(--text);line-height:1.5;">
|
||||
<span data-i18n="iosInstallStep1"></span><br>
|
||||
<span style="font-size:1.8em;line-height:1.4;">⎋</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Étape 2 -->
|
||||
<div style="display:flex;align-items:flex-start;gap:12px;margin-bottom:20px;">
|
||||
<div style="min-width:28px;height:28px;border-radius:50%;background:rgba(245,200,66,0.15);border:1px solid rgba(245,200,66,0.4);display:flex;align-items:center;justify-content:center;font-family:'DM Mono',monospace;font-size:0.75em;color:#f5c842;font-weight:700;">2</div>
|
||||
<div style="font-family:'DM Mono',monospace;font-size:0.78em;color:var(--text);line-height:1.5;">
|
||||
<span data-i18n="iosInstallStep2"></span><br>
|
||||
<span style="color:#f5c842;font-weight:700;" data-i18n="iosInstallAdd"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="font-family:'DM Mono',monospace;font-size:0.68em;color:var(--muted);text-align:center;" data-i18n="iosInstallNote"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -173,6 +173,12 @@ var TRANSLATIONS = {
|
|||
presetLandlocked: 'Enclavés',
|
||||
presetIslands: 'Îles seulement',
|
||||
presetFlagGuesser: 'Flag Guesser',
|
||||
iosInstallTitle: 'Ajouter à l\'écran d\'accueil',
|
||||
iosInstallBtn: 'Installer l\'app',
|
||||
iosInstallStep1: 'Appuie sur le bouton Partager en bas de Safari',
|
||||
iosInstallStep2: 'Puis sélectionne',
|
||||
iosInstallAdd: '« Sur l\'écran d\'accueil »',
|
||||
iosInstallNote: 'Profite du jeu hors connexion 🎮',
|
||||
},
|
||||
|
||||
en: {
|
||||
|
|
@ -342,6 +348,12 @@ var TRANSLATIONS = {
|
|||
presetLandlocked: 'Landlocked',
|
||||
presetIslands: 'Islands only',
|
||||
presetFlagGuesser: 'Flag Guesser',
|
||||
iosInstallTitle: 'Add to Home Screen',
|
||||
iosInstallBtn: 'Install the app',
|
||||
iosInstallStep1: 'Tap the Share button at the bottom of Safari',
|
||||
iosInstallStep2: 'Then select',
|
||||
iosInstallAdd: '"Add to Home Screen"',
|
||||
iosInstallNote: 'Play offline anytime 🎮',
|
||||
},
|
||||
|
||||
ua: {
|
||||
|
|
@ -511,6 +523,13 @@ var TRANSLATIONS = {
|
|||
presetLandlocked: 'Без виходу до моря',
|
||||
presetIslands: 'Лише острови',
|
||||
presetFlagGuesser: 'Вгадай прапор',
|
||||
iosInstallTitle: 'Додати на головний екран',
|
||||
iosInstallBtn: 'Встановити додаток',
|
||||
iosInstallStep1: 'Натисни кнопку Поділитися внизу Safari',
|
||||
iosInstallStep2: 'Потім обери',
|
||||
iosInstallAdd: '«На головний екран»',
|
||||
iosInstallNote: 'Грай офлайн коли завгодно 🎮',
|
||||
|
||||
},
|
||||
|
||||
de: {
|
||||
|
|
@ -680,6 +699,12 @@ var TRANSLATIONS = {
|
|||
presetLandlocked: 'Binnenstaaten',
|
||||
presetIslands: 'Nur Inseln',
|
||||
presetFlagGuesser: 'Flaggen-Raten',
|
||||
iosInstallTitle: 'Zum Home-Bildschirm',
|
||||
iosInstallBtn: 'App installieren',
|
||||
iosInstallStep1: 'Tippe auf Teilen unten in Safari',
|
||||
iosInstallStep2: 'Dann wähle',
|
||||
iosInstallAdd: '„Zum Home-Bildschirm"',
|
||||
iosInstallNote: 'Spiele jederzeit offline 🎮',
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
2
sw.js
2
sw.js
|
|
@ -2,7 +2,7 @@
|
|||
// Stratégie : Cache First pour les assets statiques, Network First pour l'API Daily.
|
||||
// iOS Safari (standalone) nécessite un SW pour fonctionner offline.
|
||||
|
||||
var CACHE_NAME = 'geoquiz-v1';
|
||||
var CACHE_NAME = 'geoquiz-v2';
|
||||
|
||||
// Assets à précacher au moment de l'installation
|
||||
var PRECACHE_URLS = [
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue