712ed0eefa
- HamburgerMenu drawer slide-in left avec liens A propos, Manifeste, Mentions legales (ESC + clic overlay pour fermer) - ColJournal enrichi : CTA Manifeste, accordeon Hashtags (7 plateformes, ferme mobile / ouvert desktop, persistence localStorage), skeleton Journal pour PC6 - Page /manifeste : V1 redige integre (em-dashes remplaces par tirets/points-virgules), pivot stylise blockquote, diagramme mouvements en 3 sections boites - Page /manifeste/commander : stub form pre-inscription (V1 localStorage, V1.1 cable Listmonk) - Page /a-propos : extrait de Contexte Global, 3-4 paragraphes Jules - Page /mentions-legales : placeholder court (editeur, hebergeur Hetzner, pas de cookies) - PopupOnboarding : micro-resume 3 lignes proposees, dismiss X / CTA / scroll 200px / ESC, flag tf-onboarded
102 lines
3.0 KiB
Plaintext
102 lines
3.0 KiB
Plaintext
---
|
|
// PopupOnboarding - micro-resume premier visit, localStorage flag tf-onboarded
|
|
// Le micro-resume est une PROPOSITION Opus a iterer avec Jules.
|
|
// Stocke en constante en tete pour iteration facile.
|
|
const microResume = `Architecture, ecologie, politique : un commun a construire ensemble.
|
|
Reapproprions-nous nos infrastructures vitales en repartant de l'existant.
|
|
Ce site, c'est le journal vivant de cette bifurcation.`;
|
|
---
|
|
<div
|
|
id="onboarding-popup"
|
|
class="fixed inset-0 z-[60] hidden bg-black/50 backdrop-blur-sm items-center justify-center p-4"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="onboarding-text"
|
|
>
|
|
<div class="bg-white rounded-xl max-w-md w-full p-6 md:p-7 shadow-2xl relative animate-fade-in">
|
|
<button
|
|
id="onboarding-close"
|
|
type="button"
|
|
class="absolute top-3 right-3 w-8 h-8 flex items-center justify-center text-neutral-400 hover:text-neutral-800 text-2xl leading-none rounded-md hover:bg-neutral-100 transition-colors"
|
|
aria-label="Fermer"
|
|
>
|
|
×
|
|
</button>
|
|
<p
|
|
id="onboarding-text"
|
|
class="text-base md:text-lg leading-relaxed text-neutral-800 whitespace-pre-line pr-6"
|
|
>{microResume}</p>
|
|
<button
|
|
id="onboarding-cta"
|
|
type="button"
|
|
class="mt-5 px-4 py-2.5 bg-neutral-900 text-white rounded-lg w-full font-medium hover:bg-neutral-700 transition-colors"
|
|
>
|
|
Entrer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(8px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.animate-fade-in {
|
|
animation: fadeIn 0.25s ease-out;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
const STORAGE_KEY = 'tf-onboarded';
|
|
const popup = document.getElementById('onboarding-popup');
|
|
const closeBtn = document.getElementById('onboarding-close');
|
|
const ctaBtn = document.getElementById('onboarding-cta');
|
|
|
|
let alreadyOnboarded = false;
|
|
try {
|
|
alreadyOnboarded = !!localStorage.getItem(STORAGE_KEY);
|
|
} catch {
|
|
// mode prive : on affiche quand meme, sans persistence
|
|
alreadyOnboarded = false;
|
|
}
|
|
|
|
if (!alreadyOnboarded && popup) {
|
|
requestAnimationFrame(() => {
|
|
popup.classList.remove('hidden');
|
|
popup.classList.add('flex');
|
|
});
|
|
}
|
|
|
|
const dismiss = () => {
|
|
if (!popup) return;
|
|
popup.classList.remove('flex');
|
|
popup.classList.add('hidden');
|
|
try {
|
|
localStorage.setItem(STORAGE_KEY, '1');
|
|
} catch {
|
|
// mode prive : pas de persistence
|
|
}
|
|
window.removeEventListener('scroll', onScroll);
|
|
};
|
|
|
|
closeBtn?.addEventListener('click', dismiss);
|
|
ctaBtn?.addEventListener('click', dismiss);
|
|
|
|
// Dismiss implicite au scroll 200px (engagement implicite)
|
|
const onScroll = () => {
|
|
if (window.scrollY > 200) {
|
|
dismiss();
|
|
}
|
|
};
|
|
if (!alreadyOnboarded) {
|
|
window.addEventListener('scroll', onScroll, { passive: true });
|
|
}
|
|
|
|
// ESC pour fermer
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Escape' && popup && !popup.classList.contains('hidden')) {
|
|
dismiss();
|
|
}
|
|
});
|
|
</script>
|