| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <meta name="description" content="La Bible - Application Multilingue par M. Kadoua Kouassi Jean Marc"> |
| |
| <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval' https:; script-src 'self' 'unsafe-inline' 'unsafe-eval' https:; style-src 'self' 'unsafe-inline' https:;"> |
| <title>La Bible - Application Multilingue</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/lucide@latest"></script> |
| |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| 'royal': '#1a237e', |
| 'royal-light': '#3949ab', |
| 'royal-dark': '#0d1642', |
| 'chick': '#FDD835', |
| 'chick-light': '#FFF176', |
| 'chick-dark': '#F9A825', |
| }, |
| fontFamily: { |
| 'serif-bible': ['Georgia', 'serif'], |
| 'sans-bible': ['Segoe UI', 'sans-serif'], |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| |
| * { box-sizing: border-box; margin: 0; padding: 0; } |
| body { font-family: 'Segoe UI', sans-serif; background: #f8f9ff; color: #000; overflow-x: hidden; } |
| |
| |
| .page-enter { animation: fadeSlideIn 0.35s ease forwards; } |
| .page-exit { animation: fadeSlideOut 0.25s ease forwards; } |
| @keyframes fadeSlideIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } } |
| @keyframes fadeSlideOut { from { opacity:1; transform:translateY(0); } to { opacity:0; transform:translateY(-16px); } } |
| |
| |
| @keyframes pulse-badge { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.15); } } |
| .badge-pulse { animation: pulse-badge 2s infinite; } |
| |
| |
| @keyframes confetti-fall { 0%{ transform:translateY(-100vh) rotate(0deg); opacity:1; } 100%{ transform:translateY(100vh) rotate(720deg); opacity:0; } } |
| .confetti { position:fixed; top:0; left:0; width:10px; height:10px; z-index:9999; pointer-events:none; animation: confetti-fall 3s ease-in forwards; } |
| |
| |
| ::-webkit-scrollbar { width:6px; } |
| ::-webkit-scrollbar-track { background:#e8eaf6; } |
| ::-webkit-scrollbar-thumb { background:#1a237e; border-radius:3px; } |
| ::-webkit-scrollbar-thumb:hover { background:#3949ab; } |
| |
| |
| .gradient-royal { background: linear-gradient(135deg, #1a237e 0%, #283593 50%, #3949ab 100%); } |
| |
| |
| .glass-card { background: rgba(255,255,255,0.85); backdrop-filter: blur(10px); border: 1px solid rgba(26,35,126,0.1); } |
| |
| |
| .verse-highlight { background: rgba(253,216,53,0.35); border-radius: 4px; padding: 2px 4px; cursor: pointer; transition: all 0.2s; } |
| .verse-highlight:hover { background: rgba(253,216,53,0.6); } |
| .verse-read { border-left: 3px solid #1a237e; } |
| .verse-bookmarked { border-left: 3px solid #F9A825; } |
| |
| |
| .high-contrast { background: #000 !important; color: #fff !important; } |
| .high-contrast .glass-card { background: #222 !important; color: #fff !important; border-color: #fff !important; } |
| |
| |
| @keyframes cardIn { from { opacity:0; transform:scale(0.9) translateY(20px); } to { opacity:1; transform:scale(1) translateY(0); } } |
| .card-animate { animation: cardIn 0.4s ease forwards; } |
| |
| |
| .nav-active { color: #FDD835 !important; transform: scale(1.1); } |
| .nav-active .nav-icon { color: #FDD835; } |
| |
| |
| .toast { position:fixed; top:20px; right:20px; z-index:10000; padding:16px 24px; border-radius:12px; color:#fff; font-weight:600; box-shadow:0 8px 32px rgba(0,0,0,0.2); transform:translateX(120%); transition:transform 0.4s cubic-bezier(0.68,-0.55,0.265,1.55); } |
| .toast.show { transform:translateX(0); } |
| .toast-success { background: linear-gradient(135deg,#1a237e,#3949ab); } |
| .toast-warning { background: linear-gradient(135deg,#F9A825,#FDD835); color:#1a237e; } |
| |
| |
| .large-text { font-size: 1.4em !important; } |
| .xlarge-text { font-size: 1.8em !important; } |
| |
| |
| .audio-player { background: linear-gradient(135deg, #1a237e 0%, #283593 100%); border-radius: 16px; } |
| |
| |
| @keyframes mic-pulse { 0%,100%{ box-shadow:0 0 0 0 rgba(253,216,53,0.7); } 70%{ box-shadow:0 0 0 20px rgba(253,216,53,0); } } |
| .mic-active { animation: mic-pulse 1.5s infinite; background: #F9A825 !important; } |
| |
| |
| .snap-scroll { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } |
| .snap-scroll > * { scroll-snap-align: start; } |
| |
| |
| @keyframes shimmer { 0%{ background-position:-200% 0; } 100%{ background-position:200% 0; } } |
| .skeleton { background: linear-gradient(90deg, #e8eaf6 25%, #c5cae9 50%, #e8eaf6 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 8px; } |
| </style> |
| </head> |
| <body class="min-h-screen bg-white"> |
|
|
| |
| |
| |
| <div id="splash-screen" class="fixed inset-0 z-50 gradient-royal flex flex-col items-center justify-center text-white"> |
| <div class="text-6xl mb-4">📖</div> |
| <h1 class="text-3xl font-bold mb-2 font-serif-bible">La Bible</h1> |
| <p class="text-chick font-medium mb-8">Application Multilingue</p> |
| <div class="w-48 h-1 bg-white/20 rounded-full overflow-hidden"> |
| <div id="splash-progress" class="h-full bg-chick rounded-full transition-all duration-300" style="width:0%"></div> |
| </div> |
| <p class="text-sm mt-4 opacity-70">Conçue par M. Kadoua Kouassi Jean Marc</p> |
| </div> |
|
|
| |
| |
| |
| <div id="onboarding-modal" class="fixed inset-0 z-40 bg-white hidden overflow-y-auto"> |
| |
| <div id="onboard-steps" class="min-h-screen flex flex-col"> |
| |
| <div class="gradient-royal p-4"> |
| <div class="flex items-center justify-between mb-3"> |
| <span id="onboard-step-label" class="text-chick font-bold text-sm">Étape 1/7</span> |
| <span id="onboard-skip" class="text-white/70 text-sm cursor-pointer hover:text-white">Passer</span> |
| </div> |
| <div class="w-full h-2 bg-white/20 rounded-full overflow-hidden"> |
| <div id="onboard-progress-bar" class="h-full bg-chick rounded-full transition-all duration-500" style="width:14%"></div> |
| </div> |
| </div> |
| |
| |
| <div id="onboard-content" class="flex-1 flex flex-col items-center justify-center p-6"> |
| |
| </div> |
| |
| |
| <div class="p-6 flex gap-3"> |
| <button id="onboard-prev" class="hidden flex-1 py-3 rounded-xl border-2 border-royal text-royal font-bold hover:bg-royal hover:text-white transition">Précédent</button> |
| <button id="onboard-next" class="flex-1 py-3 rounded-xl gradient-royal text-white font-bold hover:opacity-90 transition">Suivant</button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| |
| |
| <div id="emotion-modal" class="fixed inset-0 z-30 bg-black/50 hidden flex items-center justify-center p-4"> |
| <div class="glass-card rounded-2xl p-6 w-full max-w-md card-animate"> |
| <h2 class="text-xl font-bold text-royal mb-2 text-center">Comment vous sentez-vous aujourd'hui ? 🌟</h2> |
| <p class="text-sm text-gray-600 mb-4 text-center">Votre émotion nous aide à vous proposer des méditations adaptées</p> |
| <div id="emotion-grid" class="grid grid-cols-3 gap-3 mb-4"> |
| |
| </div> |
| <textarea id="emotion-detail" class="w-full p-3 border-2 border-royal/20 rounded-xl text-sm resize-none focus:outline-none focus:border-royal transition" rows="2" placeholder="Décrivez ce que vous ressentez (optionnel)..."></textarea> |
| <button id="emotion-submit" class="w-full mt-3 py-3 gradient-royal text-white font-bold rounded-xl hover:opacity-90 transition">Continuer 🙏</button> |
| </div> |
| </div> |
|
|
| |
| |
| |
| <div id="sunday-modal" class="fixed inset-0 z-30 bg-black/50 hidden flex items-center justify-center p-4"> |
| <div class="glass-card rounded-2xl p-6 w-full max-w-lg max-h-[90vh] overflow-y-auto card-animate"> |
| <div class="flex items-center justify-between mb-4"> |
| <h2 class="text-xl font-bold text-royal">🕊️ Programme Dominical</h2> |
| <button onclick="document.getElementById('sunday-modal').classList.add('hidden')" class="text-gray-400 hover:text-royal"><i data-lucide="x" class="w-6 h-6"></i></button> |
| </div> |
| <div class="space-y-3" id="sunday-program"> |
| |
| </div> |
| <button onclick="startSundayProgram()" class="w-full mt-4 py-3 gradient-royal text-white font-bold rounded-xl hover:opacity-90 transition">Commencer le programme ✨</button> |
| </div> |
| </div> |
|
|
| |
| |
| |
| <div id="app-container" class="hidden min-h-screen flex flex-col"> |
| |
| |
| <header id="app-header" class="gradient-royal text-white px-4 pt-3 pb-2 sticky top-0 z-20 shadow-lg"> |
| <div class="flex items-center justify-between mb-2"> |
| <div class="flex items-center gap-2"> |
| <span class="text-2xl">📖</span> |
| <h1 class="text-lg font-bold font-serif-bible">La Bible</h1> |
| <span class="text-xs bg-chick text-royal px-2 py-0.5 rounded-full font-bold" id="version-badge">LS</span> |
| </div> |
| <div class="flex items-center gap-2"> |
| |
| <button id="voice-btn" onclick="toggleVoiceSearch()" class="w-9 h-9 rounded-full bg-white/15 flex items-center justify-center hover:bg-chick hover:text-royal transition" title="Recherche vocale"> |
| <i data-lucide="mic" class="w-5 h-5"></i> |
| </button> |
| |
| <button onclick="showNotifications()" class="w-9 h-9 rounded-full bg-white/15 flex items-center justify-center hover:bg-chick hover:text-royal transition relative" title="Notifications"> |
| <i data-lucide="bell" class="w-5 h-5"></i> |
| <span id="notif-badge" class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full text-[10px] flex items-center justify-center font-bold hidden">3</span> |
| </button> |
| |
| <button onclick="navigateTo('profile')" class="w-9 h-9 rounded-full bg-chick/30 flex items-center justify-center hover:bg-chick hover:text-royal transition" title="Profil"> |
| <i data-lucide="user" class="w-5 h-5"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div class="relative mb-1"> |
| <i data-lucide="search" class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-white/50"></i> |
| <input id="search-input" type="text" placeholder="Rechercher un verset, livre ou passage..." |
| class="w-full pl-9 pr-10 py-2 rounded-xl bg-white/15 text-white placeholder-white/50 text-sm focus:outline-none focus:bg-white/25 transition" |
| onkeypress="if(event.key==='Enter')performSearch()"> |
| <button onclick="performSearch()" class="absolute right-2 top-1/2 -translate-y-1/2 text-chick hover:text-white transition"> |
| <i data-lucide="arrow-right" class="w-4 h-4"></i> |
| </button> |
| </div> |
| |
| <div class="flex gap-2 overflow-x-auto pb-1 snap-scroll"> |
| <button onclick="switchVersion('LS')" class="version-tab active shrink-0 px-3 py-0.5 rounded-full text-xs font-bold bg-chick text-royal transition" data-ver="LS">Louis Segond</button> |
| <button onclick="switchVersion('PV')" class="version-tab shrink-0 px-3 py-0.5 rounded-full text-xs font-bold bg-white/15 text-white transition" data-ver="PV">Parole de Vie</button> |
| </div> |
| </header> |
|
|
| |
| <main id="main-content" class="flex-1 overflow-y-auto pb-20"> |
| |
| </main> |
| |
| |
| <nav class="fixed bottom-0 left-0 right-0 gradient-royal z-20 shadow-[0_-4px_20px_rgba(0,0,0,0.15)]"> |
| <div class="flex items-center justify-around py-1 px-1"> |
| <button onclick="navigateTo('home')" class="nav-btn nav-active flex flex-col items-center p-2 rounded-xl transition" data-page="home"> |
| <i data-lucide="home" class="w-5 h-5 nav-icon"></i> |
| <span class="text-[10px] mt-0.5 font-medium">Accueil</span> |
| </button> |
| <button onclick="navigateTo('bible')" class="nav-btn flex flex-col items-center p-2 rounded-xl text-white/60 transition" data-page="bible"> |
| <i data-lucide="book-open" class="w-5 h-5 nav-icon"></i> |
| <span class="text-[10px] mt-0.5 font-medium">Bible</span> |
| </button> |
| <button onclick="navigateTo('prayer')" class="nav-btn flex flex-col items-center p-2 rounded-xl text-white/60 transition" data-page="prayer"> |
| <i data-lucide="heart-handshake" class="w-5 h-5 nav-icon"></i> |
| <span class="text-[10px] mt-0.5 font-medium">Prière</span> |
| </button> |
| <button onclick="navigateTo('study')" class="nav-btn flex flex-col items-center p-2 rounded-xl text-white/60 transition" data-page="study"> |
| <i data-lucide="graduation-cap" class="w-5 h-5 nav-icon"></i> |
| <span class="text-[10px] mt-0.5 font-medium">Étude</span> |
| </button> |
| <button onclick="navigateTo('more')" class="nav-btn flex flex-col items-center p-2 rounded-xl text-white/60 transition" data-page="more"> |
| <i data-lucide="grid-3x3" class="w-5 h-5 nav-icon"></i> |
| <span class="text-[10px] mt-0.5 font-medium">Plus</span> |
| </button> |
| </div> |
| </nav> |
| </div> |
|
|
| |
| |
| |
| <div id="voice-panel" class="fixed inset-0 z-30 gradient-royal hidden flex flex-col items-center justify-center text-white"> |
| <button onclick="toggleVoiceSearch()" class="absolute top-4 right-4 w-10 h-10 rounded-full bg-white/15 flex items-center justify-center"> |
| <i data-lucide="x" class="w-6 h-6"></i> |
| </button> |
| <div class="text-center"> |
| <div id="voice-wave" class="flex items-center justify-center gap-1 mb-6 h-16"> |
| <div class="w-1 bg-chick rounded-full animate-pulse" style="height:20px"></div> |
| <div class="w-1 bg-chick rounded-full animate-pulse" style="height:35px; animation-delay:0.1s"></div> |
| <div class="w-1 bg-chick rounded-full animate-pulse" style="height:50px; animation-delay:0.2s"></div> |
| <div class="w-1 bg-chick rounded-full animate-pulse" style="height:35px; animation-delay:0.3s"></div> |
| <div class="w-1 bg-chick rounded-full animate-pulse" style="height:20px; animation-delay:0.4s"></div> |
| </div> |
| <p id="voice-status" class="text-lg mb-4">Parlez maintenant...</p> |
| <p id="voice-transcript" class="text-chick text-xl font-bold min-h-[2em]"></p> |
| <button id="voice-record-btn" onclick="startVoiceRecognition()" class="mt-8 w-20 h-20 rounded-full bg-chick text-royal flex items-center justify-center mx-auto shadow-lg hover:scale-105 transition"> |
| <i data-lucide="mic" class="w-10 h-10"></i> |
| </button> |
| </div> |
| </div> |
|
|
| |
| |
| |
| <div id="toast" class="toast toast-success"> |
| <span id="toast-message"></span> |
| </div> |
|
|
| |
| |
| |
| <script> |
| // ======================================================== |
| // DONNÉES DE L'APPLICATION (Modèle dans l'architecture MVC) |
| // ======================================================== |
| |
| // --- Données bibliques (extrait Louis Segond & Parole de Vie) --- |
| const BIBLE_DATA = { |
| books: [ |
| { id:'gen', name:'Genèse', abbr:'Gn', chapters:50, testament:'AT', category:'Pentateuque' }, |
| { id:'exo', name:'Exode', abbr:'Ex', chapters:40, testament:'AT', category:'Pentateuque' }, |
| { id:'lev', name:'Lévitique', abbr:'Lv', chapters:27, testament:'AT', category:'Pentateuque' }, |
| { id:'deu', name:'Deutéronome', abbr:'Dt', chapters:34, testament:'AT', category:'Pentateuque' }, |
| { id:'jos', name:'Josué', abbr:'Jos', chapters:24, testament:'AT', category:'Livres Historiques' }, |
| { id:'jdg', name:'Juges', abbr:'Jg', chapters:21, testament:'AT', category:'Livres Historiques' }, |
| { id:'rut', name:'Ruth', abbr:'Rt', chapters:4, testament:'AT', category:'Livres Historiques' }, |
| { id:'1sa', name:'1 Samuel', abbr:'1S', chapters:31, testament:'AT', category:'Livres Historiques' }, |
| { id:'2sa', name:'2 Samuel', abbr:'2S', chapters:24, testament:'AT', category:'Livres Historiques' }, |
| { id:'psa', name:'Psaumes', abbr:'Ps', chapters:150, testament:'AT', category:'Livres Poétiques' }, |
| { id:'pro', name:'Proverbes', abbr:'Pr', chapters:31, testament:'AT', category:'Livres Poétiques' }, |
| { id:'ecc', name:'Ecclésiaste', abbr:'Ec', chapters:12, testament:'AT', category:'Livres Poétiques' }, |
| { id:'can', name:'Cantique des Cantiques', abbr:'Ct', chapters:8, testament:'AT', category:'Livres Poétiques' }, |
| { id:'esa', name:'Ésaïe', abbr:'És', chapters:66, testament:'AT', category:'Grands Prophètes' }, |
| { id:'jer', name:'Jérémie', abbr:'Jr', chapters:52, testament:'AT', category:'Grands Prophètes' }, |
| { id:'eze', name:'Ézéchiel', abbr:'Éz', chapters:48, testament:'AT', category:'Grands Prophètes' }, |
| { id:'dan', name:'Daniel', abbr:'Dn', chapters:12, testament:'AT', category:'Grands Prophètes' }, |
| { id:'mat', name:'Matthieu', abbr:'Mt', chapters:28, testament:'NT', category:'Évangiles' }, |
| { id:'mar', name:'Marc', abbr:'Mc', chapters:16, testament:'NT', category:'Évangiles' }, |
| { id:'luk', name:'Luc', abbr:'Lu', chapters:24, testament:'NT', category:'Évangiles' }, |
| { id:'joh', name:'Jean', abbr:'Jn', chapters:21, testament:'NT', category:'Évangiles' }, |
| { id:'act', name:'Actes', abbr:'Ac', chapters:28, testament:'NT', category:'Actes' }, |
| { id:'rom', name:'Romains', abbr:'Ro', chapters:16, testament:'NT', category:'Épîtres Paul' }, |
| { id:'1co', name:'1 Corinthiens', abbr:'1Co', chapters:16, testament:'NT', category:'Épîtres Paul' }, |
| { id:'2co', name:'2 Corinthiens', abbr:'2Co', chapters:13, testament:'NT', category:'Épîtres Paul' }, |
| { id:'gal', name:'Galates', abbr:'Ga', chapters:6, testament:'NT', category:'Épîtres Paul' }, |
| { id:'eph', name:'Éphésiens', abbr:'Ép', chapters:6, testament:'NT', category:'Épîtres Paul' }, |
| { id:'phi', name:'Philippiens', abbr:'Ph', chapters:4, testament:'NT', category:'Épîtres Paul' }, |
| { id:'heb', name:'Hébreux', abbr:'Hé', chapters:13, testament:'NT', category:'Épîtres Autres' }, |
| { id:'jam', name:'Jacques', abbr:'Ja', chapters:5, testament:'NT', category:'Épîtres Autres' }, |
| { id:'1pe', name:'1 Pierre', abbr:'1Pi', chapters:5, testament:'NT', category:'Épîtres Autres' }, |
| { id:'rev', name:'Apocalypse', abbr:'Ap', chapters:22, testament:'NT', category:'Apocalypse' } |
| ], |
| // Versets Louis Segond (échantillon) |
| LS: { |
| 'joh-3-16': 'Car Dieu a tant aimé le monde qu\'il a donné son Fils unique, afin que quiconque croit en lui ne périsse point, mais qu\'il ait la vie éternelle.', |
| 'gen-1-1': 'Au commencement, Dieu créa les cieux et la terre.', |
| 'gen-1-2': 'La terre était informe et vide : il y avait des ténèbres à la surface de l\'abîme, et l\'esprit de Dieu se mouvait au-dessus des eaux.', |
| 'gen-1-3': 'Dieu dit : Que la lumière soit ! Et la lumière fut.', |
| 'psa-23-1': 'L\'Éternel est mon berger : je ne manquerai de rien.', |
| 'psa-23-2': 'Il me fait reposer dans de verts pâturages, il me dirige près des eaux paisibles.', |
| 'psa-23-3': 'Il restaure mon âme, il me conduit dans les sentiers de la justice, à cause de son nom.', |
| 'psa-23-4': 'Quand je marche dans la vallée de l\'ombre de la mort, je ne crains aucun mal, car tu es avec moi : ta houlette et ton bâton me consolent.', |
| 'rom-8-28': 'Nous savons, du reste, que toutes choses concourent au bien de ceux qui aiment Dieu, de ceux qui sont appelés selon son dessein.', |
| 'phi-4-13': 'Je puis tout par celui qui me fortifie.', |
| 'phi-4-6': 'Ne vous inquiétez de rien ; mais en toute chose faites connaître vos besoins à Dieu par des prières et des supplications, avec des actions de grâces.', |
| 'phi-4-7': 'Et la paix de Dieu, qui surpasse toute intelligence, gardera vos cœurs et vos pensées en Jésus-Christ.', |
| 'pro-3-5': 'Confie-toi en l\'Éternel de tout ton cœur, et ne t\'appuie pas sur ta sagesse.', |
| 'pro-3-6': 'Reconnais-le dans toutes tes voies, et il aplanira tes sentiers.', |
| 'mat-5-3': 'Heureux les pauvres en esprit, car le royaume des cieux est à eux !', |
| 'mat-5-4': 'Heureux les affligés, car ils seront consolés !', |
| 'mat-5-5': 'Heureux les débonnaires, car ils hériteront la terre !', |
| 'mat-5-6': 'Heureux ceux qui ont faim et soif de la justice, car ils seront rassasiés !', |
| 'mat-5-7': 'Heureux les miséricordieux, car ils obtiendront miséricorde !', |
| 'mat-5-8': 'Heureux ceux qui ont le cœur pur, car ils verront Dieu !', |
| 'mat-5-9': 'Heureux ceux qui procurent la paix, car ils seront appelés fils de Dieu !', |
| 'mat-6-33': 'Cherchez premièrement le royaume et la justice de Dieu ; et toutes ces choses vous seront données par-dessus.', |
| 'rom-12-1': 'Je vous exhorte donc, frères, par les compassions de Dieu, à offrir vos corps comme un sacrifice vivant, saint, agréable à Dieu, ce qui sera de votre part un culte raisonnable.', |
| 'rom-12-2': 'Ne vous conformez pas au siècle présent, mais soyez transformés par le renouvellement de l\'intelligence, afin que vous discerniez quelle est la volonté de Dieu, ce qui est bon, agréable et parfait.', |
| 'eph-6-10': 'Au reste, fortifiez-vous dans le Seigneur, et par sa force toute-puissante.', |
| 'eph-6-11': 'Revêtez-vous de toutes les armes de Dieu, afin de pouvoir tenir ferme contre les ruses du diable.', |
| 'eph-6-12': 'Car nous n\'avons pas à lutter contre la chair et le sang, mais contre les dominations, contre les autorités, contre les princes de ce monde de ténèbres, contre les esprits méchants dans les lieux célestes.', |
| 'jer-29-11': 'Car je connais les projets que j\'ai formés sur vous, dit l\'Éternel, projets de paix et non de malheur, afin de vous donner un avenir et de l\'espérance.', |
| 'isa-41-10': 'Ne crains rien, car je suis avec toi ; ne promène pas des regards inquiets, car je suis ton Dieu ; je te fortifie, je viens à ton secours, je te soutiens de ma droite triomphante.', |
| }, |
| // Versets Parole de Vie (échantillon) |
| PV: { |
| 'joh-3-16': 'Dieu a tant aimé le monde qu\'il a donné son Fils unique. Ainsi, tout homme qui croit en lui ne périt pas, mais il reçoit la vie éternelle.', |
| 'gen-1-1': 'Au commencement, Dieu a créé le ciel et la terre.', |
| 'gen-1-2': 'La terre n\'avait pas de forme et elle était vide. C\'était l\'obscurité totale au-dessus de l\'abîme. L\'Esprit de Dieu planait au-dessus des eaux.', |
| 'gen-1-3': 'Dieu dit : « Que la lumière soit ! » Et la lumière fut.', |
| 'psa-23-1': 'Le SEIGNEUR est mon berger : je ne manque de rien.', |
| 'psa-23-2': 'Il me fait reposer dans les vertes prairies. Il me mène près des eaux tranquilles.', |
| 'psa-23-3': 'Il me donne de nouvelles forces. Il me conduit sur le bon chemin pour la gloire de son nom.', |
| 'psa-23-4': 'Même si je marche dans la vallée très sombre de la mort, je ne crains aucun mal, car tu es avec moi. Ton bâton et ton bâton de berger me réconfortent.', |
| 'rom-8-28': 'Nous le savons : Dieu fait tout concourir au bien de ceux qui l\'aiment, de ceux qu\'il a appelés selon son projet.', |
| 'phi-4-13': 'Je peux tout faire grâce au Christ qui me donne la force.', |
| 'phi-4-6': 'Ne vous inquiétez de rien. Au contraire, dans toutes les situations, priez et demandez à Dieu ce qu\'il vous faut, en le remerciant.', |
| 'phi-4-7': 'Alors la paix de Dieu, qui dépasse tout ce qu\'on peut comprendre, gardera vos cœurs et vos pensées dans le Christ Jésus.', |
| 'pro-3-5': 'Fais confiance au SEIGNEUR de tout ton cœur, et ne compte pas sur ta propre intelligence.', |
| 'pro-3-6': 'Pense à lui chaque fois que tu prends une décision, et il te guidera sur le droit chemin.', |
| 'mat-5-3': 'Heureux ceux qui se reconnaissent pauvres en esprit, car le royaume des cieux leur appartient !', |
| 'mat-5-4': 'Heureux ceux qui pleurent, car Dieu les consolera !', |
| 'mat-5-5': 'Heureux ceux qui sont doux, car la terre leur appartiendra !', |
| 'mat-5-6': 'Heureux ceux qui ont faim et soif de la justice, car Dieu les rassasiera !', |
| }, |
| // Personnages bibliques |
| characters: [ |
| { id:'moses', name:'Moïse', era:'~1400 av.J.C.', role:'Libérateur & Législateur', testament:'AT', img:'nature/640x360/10', |
| bio:'Moïse est l\'un des plus grands personnages de la Bible. Né en Égypte au temps de l\'esclavage des Hébreux, il fut sauvé des eaux par la fille de Pharaon.', |
| traits:['Foi','Courage','Humilité','Patience','Obéissance'], |
| key_verses:['Exode 3:14','Hébreux 11:24-27','Deutéronome 34:10-12'], |
| actions:['Libération des Hébreux d\'Égypte','Reception des 10 Commandements','Guidance pendant 40 ans dans le désert','Construction du Tabernacle'], |
| lessons:'Moïse nous apprend que Dieu peut utiliser celui qui se sent incapable. Malgré ses doutes et ses hésitations, il a obéi et Dieu l\'a utilisé puissamment.' |
| }, |
| { id:'david', name:'David', era:'~1000 av.J.C.', role:'Roi & Psalmiste', testament:'AT', img:'people/640x360/20', |
| bio:'David, berger devenu roi d\'Israël, est l\'homme selon le cœur de Dieu. Il a écrit de nombreux Psaumes et est l\'ancêtre de Jésus-Christ.', |
| traits:['Courage','Repentance','Louange','Confiance en Dieu','Foi'], |
| key_verses:['1 Samuel 16:7','Psaume 51','1 Samuel 17:45-47'], |
| actions:['Victoire sur Goliath','Unification du royaume d\'Israël','Composition de nombreux Psaumes','Établissement de Jérusalem comme capitale'], |
| lessons:'David nous montre que la grandeur ne réside pas dans la perfection, mais dans le repentir authentique et la confiance en Dieu.' |
| }, |
| { id:'jesus', name:'Jésus-Christ', era:'4 av.J.C. - 30 apr.J.C.', role:'Fils de Dieu & Sauveur', testament:'NT', img:'minimal/640x360/30', |
| bio:'Jésus-Christ est le Fils de Dieu, le Messie promis. Il est venu sur terre pour sauver l\'humanité du péché par sa mort sur la croix et sa résurrection.', |
| traits:['Amour','Compassion','Sagesse','Sainteté','Puissance'], |
| key_verses:['Jean 3:16','Jean 14:6','Matthieu 28:18-20'], |
| actions:['Miracles et guérisons','Enseignement par paraboles','Sacrifice sur la croix','Résurrection le 3ème jour','Institution de la Sainte Cène'], |
| lessons:'Jésus est l\'exemple parfait de l\'amour de Dieu. Il nous enseigne à aimer nos ennemis, à pardonner, et à vivre dans la vérité et la grâce.' |
| }, |
| { id:'paul', name:'Paul (Saul de Tarse)', era:'5 - 67 apr.J.C.', role:'Apôtre des Nations', testament:'NT', img:'education/640x360/40', |
| bio:'Paul, anciennement persécuteur des chrétiens, a été transformé par une rencontre avec Jésus sur le chemin de Damas. Il est devenu le plus grand missionnaire du christianisme.', |
| traits:['Persévérance','Zèle','Foi','Humilité','Courage'], |
| key_verses:['Actes 9:1-19','Romains 1:16','Philippiens 3:13-14'], |
| actions:['Conversion miraculeuse sur le chemin de Damas','3 grands voyages missionnaires','Écriture de 13 épîtres du NT','Fondation de nombreuses églises'], |
| lessons:'Paul nous montre que personne n\'est trop loin de la grâce de Dieu. Sa transformation prouve que Dieu peut changer radicalement une vie.' |
| }, |
| { id:'esther', name:'Esther', era:'~470 av.J.C.', role:'Reine & Libératrice', testament:'AT', img:'people/640x360/50', |
| bio:'Esther, jeune juive orpheline, est devenue reine de Perse et a sauvé son peuple de l\'extermination par son courage et sa foi.', |
| traits:['Courage','Sagesse','Foi','Patience','Dévouement'], |
| key_verses:['Esther 4:14','Esther 7:3-4'], |
| actions:['Devenir reine de Perse','Démasquer le complot d\'Haman','Sauver le peuple juif de l\'extermination','Instituer la fête de Purim'], |
| lessons:'Esther nous enseigne que Dieu place parfois des personnes à des positions stratégiques pour accomplir ses plans. Le courage et la foi peuvent sauver des nations.' |
| }, |
| { id:'peter', name:'Pierre', era:'~1-67 apr.J.C.', role:'Apôtre & Premier Pape', testament:'NT', img:'technology/640x360/60', |
| bio:'Pierre, pêcheur de Galilée, a été appelé par Jésus pour devenir "pêcheur d\'hommes". Malgré ses faiblesses, il est devenu le rocher sur lequel l\'Église est bâtie.', |
| traits:['Impétuosité','Foi','Repentir','Zèle','Amour pour Christ'], |
| key_verses:['Matthieu 16:18','Luc 22:61-62','Jean 21:15-17'], |
| actions:['Marche sur l\'eau','Confession de la divinité de Christ','Reniement puis restauration','Prédication à la Pentecôte (3000 convertis)'], |
| lessons:'Pierre nous montre que nos échecs ne sont pas finaux avec Dieu. Son reniement a été suivi d\'une restauration puissante.' |
| } |
| ], |
| // Thèmes bibliques avec versets de référence |
| themes: [ |
| { id:'love', name:'Amour', icon:'❤️', color:'red', |
| verses:['1 Corinthiens 13:4-8','1 Jean 4:8','Jean 15:13','Romains 5:8','1 Jean 3:16','Cantique 8:6-7'], |
| description:'L\'amour est au cœur du message de la Bible. Dieu est amour, et son amour pour l\'humanité est démontré par le sacrifice de Jésus-Christ.', |
| study_points:['L\'amour de Dieu est inconditionnel (agapè)','L\'amour entre croyants doit être authentique','L\'aimer Dieu c\'est obéir à ses commandements','L\'amour couvre une multitude de péchés'] |
| }, |
| { id:'faith', name:'Foi', icon:'✝️', color:'blue', |
| verses:['Hébreux 11:1','Hébreux 11:6','Romains 10:17','Jacques 2:17','Marc 11:22-24','Éphésiens 2:8'], |
| description:'La foi est la confiance en Dieu et en ses promesses. Elle est le fondement de la vie chrétienne et la clé qui ouvre les portes du surnaturel.', |
| study_points:['La foi vient en entendant la Parole de Dieu','La foi sans les œuvres est morte','La foi est l\'assurance des choses espérées','Abraham est le père de la foi'] |
| }, |
| { id:'prayer_themes', name:'Prière', icon:'🙏', color:'purple', |
| verses:['Matthieu 6:5-13','1 Thessaloniciens 5:17','Jacques 5:16','Philippiens 4:6','Psaume 50:15','Jérémie 33:3'], |
| description:'La prière est la communication avec Dieu. Elle est essentielle pour la vie spirituelle, la communion avec Dieu et la victoire sur les épreuves.', |
| study_points:['Prier sans cesse : une attitude du cœur','Les différentes formes de prière','La prière fervente a une grande efficacité','Prier selon la volonté de Dieu'] |
| }, |
| { id:'salvation', name:'Salut', icon:'🕊️', color:'green', |
| verses:['Jean 3:16','Éphésiens 2:8-9','Romains 6:23','Actes 4:12','Romains 10:9-10','Tite 3:5'], |
| description:'Le salut est le don gratuit de Dieu offert à tout être humain par la foi en Jésus-Christ. Il libère du péché et donne la vie éternelle.', |
| study_points:['Le salut est par la grâce, non par les œuvres','Le péché sépare de Dieu, Christ reconcile','Le baptême est l\'engagement d\'une bonne conscience','Le salut implique une transformation de vie'] |
| }, |
| { id:'wisdom', name:'Sagesse', icon:'🦉', color:'amber', |
| verses:['Proverbes 9:10','Jacques 1:5','Proverbes 4:7','Colossiens 2:3','1 Rois 3:9-12','Psaume 111:10'], |
| description:'La sagesse biblique est la crainte de l\'Éternel. Elle guide les choix de vie et permet de discerner la volonté de Dieu.', |
| study_points:['La sagesse commence par la crainte de Dieu','Demander la sagesse à Dieu qui donne libéralement','La sagesse du monde vs la sagesse de Dieu','Salomon : un exemple de sagesse demandée'] |
| }, |
| { id:'deliverance', name:'Délivrance', icon:'⚔️', color:'indigo', |
| verses:['Psaume 34:18','Ésaïe 58:6','Jean 8:36','Psaume 107:2','2 Corinthiens 10:4','Luc 4:18-19'], |
| description:'La délivrance est l\'action de Dieu pour libérer ses enfants de toute forme d\'oppression : spirituelle, physique, émotionnelle.', |
| study_points:['Dieu est un libérateur','Les armes de notre combat spirituel','La vérité affranchit vraiment','Jésus est venu pour libérer les captifs'] |
| }, |
| { id:'marriage', name:'Mariage', icon:'💍', color:'pink', |
| verses:['Genèse 2:24','Éphésiens 5:22-33','1 Corinthiens 7:2-5','Hébreux 13:4','Proverbes 18:22','Matthieu 19:4-6'], |
| description:'Le mariage est une institution divine. Dieu l\'a établi comme une alliance sacrée entre un homme et une femme.', |
| study_points:['L\'unité dans le mariage reflète Christ et l\'Église','Le mariage est un engagement devant Dieu','La fidélité et le respect mutuel','La prière en couple fortifie le foyer'] |
| }, |
| { id:'prosperity', name:'Prospérité', icon:'💰', color:'yellow', |
| verses:['3 Jean 1:2','Deutéronome 8:18','Psaume 35:27','Proverbes 10:22','Malachie 3:10','Luc 6:38'], |
| description:'Dieu désire la prospérité de ses enfants dans toutes les dimensions : spirituelle, physique, financière, relationnelle.', |
| study_points:['La prospérité spirituelle est prioritaire','La dîme et les offrandes ouvrent les fenêtres du ciel','Le travail diligents est honoré par Dieu','La générosité attire la bénédiction'] |
| } |
| ], |
| // Types et méthodes de prière |
| prayerTypes: [ |
| { id:'thanksgiving', name:'Action de grâces', icon:'🙌', color:'amber', |
| description:'Exprimer sa gratitude à Dieu pour ses bienfaits, sa bonté et sa fidélité.', |
| method:'Commencez par remercier Dieu pour sa création, sa protection, ses bénédictions daily, et surtout pour le salut en Christ.', |
| examples:['Seigneur, merci pour ta grâce qui me sauve chaque jour...','Père, je te remercie pour ta fidélité qui ne faillit jamais...'], |
| duration:'5-15 min', hours:['06:00','12:00','18:00'] |
| }, |
| { id:'repentance', name:'Prière de repentance', icon:'💧', color:'blue', |
| description:'Confesser ses péchés et demander pardon à Dieu avec un cœur sincèrement contrit.', |
| method:'Examinez votre conscience, confessez vos fautes avec sincérité, demandez pardon et décidez de tourner le dos au péché.', |
| examples:['Seigneur, pardonne-moi car j\'ai péché contre toi...','Père, crée en moi un cœur pur, renouvelle en moi un esprit droit...'], |
| duration:'10-20 min', hours:['05:00','21:00'] |
| }, |
| { id:'intercession', name:'Intercession', icon:'🤝', color:'green', |
| description:'Prier pour les autres : famille, amis, église, nation, personnes en détresse.', |
| method:'Identifiez les besoins des autres, portez-les devant Dieu avec ferveur, persévérez dans la prière jusqu\'à l\'exaucement.', |
| examples:['Seigneur, je te confie ma famille, protège-la...','Père, bénis mon pays et ses dirigeants...'], |
| duration:'15-30 min', hours:['06:00','15:00','21:00'] |
| }, |
| { id:'warfare', name:'Combat spirituel', icon:'⚔️', color:'red', |
| description:'Lutter par la prière contre les forces spirituelles du mal et les attaques de l\'ennemi.', |
| method:'Revêtez toutes les armes de Dieu (Éphésiens 6:10-18). Priez avec autorité au nom de Jésus, utilisez la Parole comme épée.', |
| examples:['Au nom de Jésus, je lie tout esprit maléfique...','Seigneur, que ton feu consume tout plan de l\'ennemi...'], |
| duration:'15-45 min', hours:['00:00','03:00','06:00'] |
| }, |
| { id:'praise', name:'Louange', icon:'🎵', color:'purple', |
| description:'Célébrer Dieu pour qui Il est : sa grandeur, sa puissance, sa majesté.', |
| method:'Chantez, levez les mains, dansez devant le Seigneur. Proclamez ses attributs : Il est Saint, Tout-Puissant, Éternel.', |
| examples:['Seigneur, tu es grand et digne de louange...','Je t\'exalte, ô Roi des rois, Seigneur des seigneurs...'], |
| duration:'10-30 min', hours:['06:00','09:00','18:00'] |
| }, |
| { id:'worship', name:'Adoration', icon:'👑', color:'indigo', |
| description:'Contempler Dieu dans sa sainteté, l\'adorer en esprit et en vérité.', |
| method:'Entrez dans la présence de Dieu avec révérence. Soyez silencieux, écoutez, méditez sur sa sainteté.', |
| examples:['Saint, saint, saint est le Seigneur Dieu Tout-Puissant...','Je me prosterne devant toi, ô Éternel, mon Dieu...'], |
| duration:'15-60 min', hours:['05:00','22:00'] |
| }, |
| { id:'petition', name:'Supplication', icon:'🛐', color:'teal', |
| description:'Présenter ses besoins personnels à Dieu avec humilité et confiance.', |
| method:'Présentez vos besoins spécifiques à Dieu. Croyez qu\'il entend et qu\'il exaucera selon sa volonté parfaite.', |
| examples:['Seigneur, pourvois à mes besoins selon ta richesse...','Père, accorde-moi la sagesse pour cette decision...'], |
| duration:'10-20 min', hours:['06:00','12:00','21:00'] |
| }, |
| { id:'sanctification', name:'Sanctification', icon:'🔥', color:'orange', |
| description:'Demander à Dieu de nous purifier et de nous sanctifier pour marcher dans la sainteté.', |
| method:'Confessez vos faiblesses, demandez le feu du Saint-Esprit pour purifier votre cœur, engagez-vous à marcher dans la sainteté.', |
| examples:['Seigneur, sanctifie-moi par ta vérité, ta Parole est la vérité...','Purifie-moi, et je serai pur, lave-moi et je serai plus blanc que la neige...'], |
| duration:'10-25 min', hours:['05:00','18:00'] |
| } |
| ], |
| // Heures de prière bibliques |
| prayerHours: [ |
| { id:'morning', name:'Prière du matin', time:'05:00-06:00', aka:'Première veille', psalms:'Psaume 5, Psaume 63', description:'Commencer la journée avec Dieu, lui confier la journée.' }, |
| { id:'third', name:'3ème heure', time:'09:00', aka:'Heure de la prière', psalms:'Psaume 119:65-72', description:'Moment de la Pentecôte (Actes 2), prière pour l\'onction.' }, |
| { id:'sixth', name:'6ème heure', time:'12:00', aka:'Midi', psalms:'Psaume 55:17', description:'Prière de gratitude pour la moitié de la journée.' }, |
| { id:'ninth', name:'9ème heure', time:'15:00', aka:'Heure de la prière', psalms:'Psaume 141:2', description:'Moment de la mort de Jésus, prière pour la miséricorde.' }, |
| { id:'evening', name:'Prière du soir', time:'18:00-19:00', aka:'Soirée', psalms:'Psaume 4, Psaume 121', description:'Remercier Dieu pour la journée, confier la nuit.' }, |
| { id:'midnight', name:'Minuit', time:'00:00-01:00', aka:'Veille de minuit', psalms:'Psaume 119:62', description:'Moment de combat spirituel (Actes 16), prière fervente.' } |
| ], |
| // Badges/Récompenses |
| badges: [ |
| { id:'first_read', name:'Premier Pas', icon:'🌱', desc:'Lire votre premier verset', condition:'1 verset lu', category:'Lecture' }, |
| { id:'chapter_read', name:'Chapitre entier', icon:'📖', desc:'Lire un chapitre complet', condition:'1 chapitre lu', category:'Lecture' }, |
| { id:'book_read', name:'Livre complet', icon:'📚', desc:'Lire un livre biblique entier', condition:'1 livre lu', category:'Lecture' }, |
| { id:'pray_7days', name:'Semaine de prière', icon:'🙏', desc:'Prier 7 jours consécutifs', condition:'7 jours de prière', category:'Prière' }, |
| { id:'pray_30mins', name:'Guerrier de prière', icon:'⚔️', desc:'Prier pendant 30 minutes', condition:'30 min de prière continue', category:'Prière' }, |
| { id:'study_5', name:'Étudiant biblique', icon:'🎓', desc:'Compléter 5 études', condition:'5 études complétées', category:'Étude' }, |
| { id:'character_5', name:'Connaisseur', icon:'👤', desc:'Étudier 5 personnages bibliques', condition:'5 personnages étudiés', category:'Étude' }, |
| { id:'streak_7', name:'Fidélité', icon:'🔥', desc:'7 jours consécutifs de lecture', condition:'Série de 7 jours', category:'Fidélité' }, |
| { id:'streak_30', name:'Dévotion', icon:'💎', desc:'30 jours consécutifs de lecture', condition:'Série de 30 jours', category:'Fidélité' }, |
| { id:'read_nt', name:'Nouveau Testament', icon:'✝️', desc:'Lire tout le Nouveau Testament', condition:'NT complet', category:'Exploit' }, |
| { id:'read_ot', name:'Ancien Testament', icon:'📜', desc:'Lire tout l\'Ancien Testament', condition:'AT complet', category:'Exploit' }, |
| { id:'all_badges', name:'Maître Bibliste', icon:'👑', desc:'Obtenir tous les badges', condition:'Tous les badges', category:'Légendaire' }, |
| ], |
| // Quiz pour les enfants (Ecodim) |
| kidsQuizzes: [ |
| { id:'q1', question:'Qui a construit l\'arche pour survivre au déluge ?', options:['Abraham','Noé','Moïse','David'], answer:1, explanation:'Noé a construit l\'arche sur l\'ordre de Dieu (Genèse 6).' }, |
| { id:'q2', question:'Qui a affronté Goliath avec une fronde ?', options:['Samuel','Saül','David','Jonathan'], answer:2, explanation:'David, le jeune berger, a vaincu Goliath avec confiance en Dieu (1 Samuel 17).' }, |
| { id:'q3', question:'Combien de jours Dieu a-t-il pris pour créer le monde ?', options:['5','6','7','10'], answer:1, explanation:'Dieu a créé le monde en 6 jours et s\'est reposé le 7ème (Genèse 1).' }, |
| { id:'q4', question:'Qui a été sauvé des eaux dans un panier ? ', options:['Moïse','Isaac','Joseph','Josué'], answer:0, explanation:'Le bébé Moïse a été placé dans un panier dans le Nil (Exode 2).' }, |
| { id:'q5', question:'Que Jésus a-t-il multiplié pour nourrir 5000 personnes ?', options:['Poissons et vin','Pains et poissons','Pains et eau','Fruits et légumes'], answer:1, explanation:'Jésus a multiplié 5 pains et 2 poissons (Matthieu 14).' }, |
| { id:'q6', question:'Qui a marché sur l\'eau vers Jésus ?', options:['Pierre','Jean','Jacques','Paul'], answer:0, explanation:'Pierre a marché sur l\'eau mais a coulé quand il a douté (Matthieu 14:29).' }, |
| ], |
| // Quiz adultes |
| adultQuizzes: [ |
| { id:'aq1', question:'Quelle est la signification spirituelle du nombre 7 dans la Bible ?', options:['Perfection/Complétude','Jugement','Tribu d\'Israël','Génération'], answer:0, explanation:'Le nombre 7 représente la perfection et la complétude divine.' }, |
| { id:'aq2', question:'Quels sont les 7 esprits de Dieu mentionnés en Apocalypse ?', options:['Sagesse, Intelligence, Conseil, Force, Connaissance, Crainte, Piété','Esprit de vie, de mort, de guerre, de paix, d\'amour, de haine, de vérité','Autre combinaison','Aucune de ces réponses'], answer:0, explanation:'Ésaïe 11:2 parle de l\'Esprit de l\'Éternel, de sagesse, etc.' }, |
| { id:'aq3', question:'Quelle loi économique biblique interdit l\'usure entre frères ?', options:['Deutéronome 23:19-20','Lévitique 25:36-37','Exode 22:25','Toutes ces réponses'], answer:3, explanation:'Plusieurs textes bibliques interdisent l\'usure entre frères croyants.' }, |
| ], |
| // Méditations guidées par émotion |
| emotionMeditations: { |
| 'joyeux': { theme:'Actions de grâces', verses:['Psaume 100','Philippiens 4:4-7','1 Thessaloniciens 5:16-18'], message:'Votre joie est une bénédiction ! Partagez-la en louant Dieu et en encourageant quelqu\'un aujourd\'hui.' }, |
| 'triste': { theme:'Consolation divine', verses:['Psaume 34:18','Matthieu 5:4','Apocalypse 21:4','2 Corinthiens 1:3-4'], message:'Dieu est proche des cœurs brisés. Il voit votre peine et vous enveloppe de sa présence. Vous n\'êtes pas seul(e).' }, |
| 'inquiet': { theme:'Paix de Dieu', verses:['Philippiens 4:6-7','1 Pierre 5:7','Ésaïe 41:10','Psaume 46:1-3'], message:'Confiez vos inquiétudes à Dieu. Sa paix, qui dépasse tout entendement, gardera votre cœur aujourd\'hui.' }, |
| 'colere': { theme:'Maîtrise de soi', verses:['Jacques 1:19-20','Proverbes 15:1','Éphésiens 4:26','Psaume 37:8'], message:'La colère ne produit pas la justice de Dieu. Prenez un moment pour respirer, prier, et confier cette situation à Dieu.' }, |
| 'grateful': { theme:'Reconnaissance', verses:['Psaume 107:1','1 Chroniques 16:34','Colossiens 3:15-17','Psaume 118:1'], message:'La gratitude ouvre les portes de la bénédiction. Continuez à cultiver un cœur reconnaissant !' }, |
| 'confus': { theme:'Direction divine', verses:['Proverbes 3:5-6','Psaume 119:105','Jacques 1:5','Jérémie 29:11'], message:'Dieu n\'est pas l\'auteur de la confusion. Demandez-lui la sagesse et il vous guidera sur le bon chemin.' }, |
| 'fatigue': { theme:'Renouvellement', verses:['Ésaïe 40:31','Matthieu 11:28-30','Psaume 23:3','2 Corinthiens 12:9'], message:'Venez à Jésus, vous qui êtes fatigués. Il vous donnera du repos et renouvellera vos forces.' }, |
| 'paisible': { theme:'Demeurer en Christ', verses:['Jean 15:4-5','Psaume 46:10','Colossiens 3:15','Philippiens 4:7'], message:'La paix de Dieu est un trésor. Demeurez dans cette quiétude et laissez-la couler vers les autres.' }, |
| 'seul': { theme:'Présence de Dieu', verses:['Psaume 139:7-10','Hébreux 13:5-6','Deutéronome 31:6','Psaume 25:16'], message:'Dieu ne vous abandonnera jamais. Il est plus proche qu\'un frère. Vous êtes dans ses mains.' }, |
| }, |
| // Prières du matin et du soir |
| morningPrayers: [ |
| 'Seigneur, ce matin je me présente devant toi avec reconnaissance. Merci pour la protection de la nuit et cette nouvelle journée. Guide mes pas, Purifie mes pensées, et use de moi pour ta gloire. Au nom de Jésus. Amen.', |
| 'Père céleste, merci pour ce nouveau jour. Je te confie ma journée, mes rencontres, mes activités. Que ta lumière éclaire mon chemin, que ta sagesse dirige mes décisions, et que ta paix règne dans mon cœur. Au nom de Jésus. Amen.', |
| 'Seigneur Dieu, ce matin je te loue car tu es bon. Remplis-moi de ton Esprit Saint, donne-moi la force de résister au mal, la sagesse de discerner ta volonté, et l\'amour de servir mes frères et sœurs. Au nom de Jésus. Amen.' |
| ], |
| eveningPrayers: [ |
| 'Seigneur, merci pour cette journée qui s\'achève. Pardonne-moi pour mes manquements. Qu\'entre dans mon sommeil ta paix profonde. Que tes anges veillent sur moi et sur les miens cette nuit. Au nom de Jésus. Amen.', |
| 'Père, je remets entre tes mains tout ce que j\'ai vécu aujourd\'hui. Les joies comme les difficultés. Que ton sang me couvre de ta protection, et que ton Esprit me garde pendant mon sommeil. Au nom de Jésus. Amen.', |
| 'Seigneur, avant de dormir, je te demande pardon pour mes péchés. Je te remercie pour ta fidélité de ce jour. Accorde-moi un sommeil réparateur et réveille-moi demain avec une nouvelle onction. Au nom de Jésus. Amen.' |
| ], |
| // Prières de type pour les heures bibliques |
| hourlyPrayers: { |
| '05:00': 'Seigneur, je me lève avant l\'aube pour te chercher. Que ma prière monte comme l\'encens, que mes mains levées soient comme l\'offrande du soir. Remplis-moi de ta présence ce matin.', |
| '09:00': 'Père, à cette heure où tu as envoyé ton Esprit à la Pentecôte, répands ton onction sur moi. Donne-moi la puissance pour témoigner et la sagesse pour comprendre.', |
| '12:00': 'Seigneur, au milieu de cette journée, je me tourne vers toi pour te remercier. Bénis le travail de mes mains et garde mon cœur attaché à ta Parole.', |
| '15:00': 'Père, à l\'heure où Jésus a donné sa vie, je m\'humilie devant toi. Merci pour ta miséricorde infinie. Pardonne mes offenses et accorde-moi ta grâce.', |
| '18:00': 'Seigneur, ce soir je t\'apporte ma gratitude pour cette journée. Protège ma famille, bénis mon foyer, et que ta paix règne dans mon cœur cette nuit.', |
| '00:00': 'Seigneur, à minuit, je me lève pour te louer. Comme Paul et Silas, je prie dans les ténèbres pour que ta lumière éclate. Brise toute chaîne et libère tes captifs !' |
| }, |
| // Sujets catégorisés de la Bible |
| categories: [ |
| { id:'spirituality', name:'Spiritualité', icon:'🕊️', subtopics:['Prière','Jeûne','Méditation','Saint-Esprit','Oraison','Adoration'] }, |
| { id:'family', name:'Famille & Relations', icon:'👨👩👧👦', subtopics:['Mariage','Éducation des enfants','Relations familiales','Amour fraternel','Pardon'] }, |
| { id:'economy', name:'Économie & Travail', icon:'💼', subtopics:['Gestion financière','Travail','Dîme & offrandes','Prospérité','Intégrité dans les affaires'] }, |
| { id:'health', name:'Santé & Guérison', icon:'🏥', subtopics:['Guérison divine','Santé physique','Santé mentale','Prendre soin du temple de Dieu'] }, |
| { id:'leadership', name:'Leadership & Service', icon:'👔', subtopics:['Qualités d\'un leader biblique','Servir humblement','Responsabilité dans l\'église','Être instrumentiste'] }, |
| { id:'law', name:'Lois & Commandements', icon:'⚖️', subtopics:['Les 10 Commandements','Lois cérémonielles','Lois morales','La loi de l\'amour','La grâce et la loi'] }, |
| { id:'identity', name:'Identité & Sexualité', icon:'💫', subtopics:['Identité en Christ','Célibat','Mariage','Pureté sexuelle','Asexualité et vocation'] }, |
| { id:'community', name:'Vie communautaire', icon:'🏘️', subtopics:['Église locale','Communion fraternelle','Service communautaire','Évangélisation'] }, |
| ], |
| // Vœux et postes de responsabilité |
| ministryRoles: [ |
| { id:'pastor', name:'Pasteur', requirements:['1 Timothée 3:1-7','Tite 1:6-9','1 Pierre 5:1-4'], criteria:['Irréprochable','Mari d\'une seule femme','Tempérant','Sage','Hospitable','Apt à enseigner','Non adonné au vin','Non violent','Doux','Non querelleur','Non cupide','Bon gestionnaire de sa maison'], steps:['Être appelé par Dieu','Se former à la Parole','Servir fidèlement dans l\'église','Être reconnu par la communauté','Recevoir l\'onction et la charge'] }, |
| { id:'deacon', name:'Diacre', requirements:['1 Timothée 3:8-13','Actes 6:1-7'], criteria:['Digne de respect','Sincère','Non adonné au vin','Non porté au gain honteux','Conserve le mystère de la foi dans une conscience pure','Femme digne','Bon gestionnaire'], steps:['Servir avec joie','Être reconnu pour son intégrité','Se former au service','Être établi par l\'église','Servir les tables et les besoins'] }, |
| { id:'worship', name:'Instrumentiste / Choriste', requirements:['Psaume 33:2-3','1 Chroniques 25:1-7','2 Chroniques 5:12-14'], criteria:['Cœur de louange','Talent musical développé','Vie de piété','Esprit de service','Fidélité dans les répétitions','Humilité'], steps:['Développer votre talent musical','Servir avec constance','Se former musicalement et spirituellement','Être intégré dans l\'équipe de louange','Louer Dieu avec excellence et sincérité'] }, |
| { id:'elder', name:'Ancien', requirements:['Tite 1:5-9','Jacques 5:14','1 Pierre 5:1-5'], criteria:['Sagesse reconnue','Vie exemplaire','Non accusé d\'intempérance','Expérience spirituelle','Capacité à conseiller','Humilité'], steps:['Mûrir spirituellement','Servir humblement pendant des années','Être reconnu par la communauté','Recevoir la charge d\'ancien','Veiller sur le troupeau avec amour'] }, |
| ], |
| // Vidéos animées bibliques (référence) |
| animatedFilms: [ |
| { id:'f1', title:'La Création', desc:'Dieu crée le monde en 6 jours', duration:'10 min', age:'3+', cover:'nature/320x240/1' }, |
| { id:'f2', title:'Noé et l\'Arche', desc:'Le déluge et la promesse divine', duration:'12 min', age:'3+', cover:'nature/320x240/2' }, |
| { id:'f3', title:'Moïse en Égypte', desc:'Les 10 plaies et la libération', duration:'15 min', age:'6+', cover:'nature/320x240/3' }, |
| { id:'f4', title:'David et Goliath', desc:'Le berger qui terrassa le géant', duration:'10 min', age:'3+', cover:'nature/320x240/4' }, |
| { id:'f5', title:'Naissance de Jésus', desc:'La nativité à Bethléem', duration:'12 min', age:'3+', cover:'nature/320x240/5' }, |
| { id:'f6', title:'Miracles de Jésus', desc:'Guérisons et multiplications', duration:'14 min', age:'6+', cover:'nature/320x240/6' }, |
| { id:'f7', title:'Mort et Résurrection', desc:'Le sacrifice et la victoire', duration:'16 min', age:'10+', cover:'nature/320x240/7' }, |
| { id:'f8', title:'Actes des Apôtres', desc:'La naissance de l\'Église', duration:'15 min', age:'10+', cover:'nature/320x240/8' }, |
| ] |
| }; |
| |
| // --- Langues supportées --- |
| const LANGUAGES = [ |
| { code:'fr', name:'Français', flag:'🇫🇷' }, |
| { code:'en', name:'English', flag:'🇬🇧' }, |
| { code:'es', name:'Español', flag:'🇪🇸' }, |
| { code:'pt', name:'Português', flag:'🇧🇷' }, |
| { code:'de', name:'Deutsch', flag:'🇩🇪' }, |
| { code:'it', name:'Italiano', flag:'🇮🇹' }, |
| { code:'lingala', name:'Lingala', flag:'🇨🇩' }, |
| { code:'bambara', name:'Bambara', flag:'🇲🇱' }, |
| ]; |
| |
| // --- Émotions pour le modal --- |
| const EMOTIONS = [ |
| { id:'joyeux', name:'Joyeux', emoji:'😄' }, |
| { id:'triste', name:'Triste', emoji:'😢' }, |
| { id:'inquiet', name:'Inquiet', emoji:'😟' }, |
| { id:'colere', name:'Colère', emoji:'😤' }, |
| { id:'grateful', name:'Reconnaissant', emoji:'🙏' }, |
| { id:'confus', name:'Confus', emoji:'😵💫' }, |
| { id:'fatigue', name:'Fatigué', emoji:'😴' }, |
| { id:'paisible', name:'Paisible', emoji:'😌' }, |
| { id:'seul', name:'Seul', emoji:'😔' }, |
| ]; |
| |
| // ======================================================== |
| // CONTRÔLEUR - Gestion de l'état et de la navigation |
| // ======================================================== |
| |
| // État global de l'application |
| let appState = { |
| currentPage: 'home', |
| bibleVersion: 'LS', // LS = Louis Segond, PV = Parole de Vie |
| language: 'fr', |
| user: null, |
| readVerses: [], |
| bookmarks: [], |
| highlights: {}, |
| badges: [], |
| streak: 0, |
| lastVisit: null, |
| prayerReminders: [], |
| isVoiceActive: false, |
| fontSize: 'normal', |
| highContrast: false, |
| currentBook: 'joh', |
| currentChapter: 3, |
| dailyTheme: null, |
| }; |
| |
| // Charger l'état depuis localStorage |
| function loadState() { |
| try { |
| const saved = localStorage.getItem('bible_app_state'); |
| if (saved) { |
| const parsed = JSON.parse(saved); |
| appState = { ...appState, ...parsed }; |
| } |
| } catch(e) { console.log('Erreur chargement état:', e); } |
| } |
| |
| // Sauvegarder l'état dans localStorage |
| function saveState() { |
| try { |
| localStorage.setItem('bible_app_state', JSON.stringify(appState)); |
| } catch(e) { console.log('Erreur sauvegarde état:', e); } |
| } |
| |
| // Initialiser l'application |
| function initApp() { |
| loadState(); |
| |
| // Animation du splash screen |
| let progress = 0; |
| const splashInterval = setInterval(() => { |
| progress += Math.random() * 15 + 5; |
| if (progress >= 100) { |
| progress = 100; |
| clearInterval(splashInterval); |
| setTimeout(() => { |
| document.getElementById('splash-screen').style.opacity = '0'; |
| setTimeout(() => { |
| document.getElementById('splash-screen').style.display = 'none'; |
| // Vérifier si c'est la première utilisation |
| if (!appState.user) { |
| showOnboarding(); |
| } else { |
| document.getElementById('app-container').classList.remove('hidden'); |
| // Vérifier si c'est dimanche pour le programme spécial |
| checkSundayProgram(); |
| // Afficher le modal d'émotion |
| showEmotionModal(); |
| // Mettre à jour le thème quotidien |
| updateDailyTheme(); |
| // Vérifier le parcours de progression |
| updateStreak(); |
| // Afficher la page d'accueil |
| navigateTo('home'); |
| } |
| }, 300); |
| }, 500); |
| } |
| document.getElementById('splash-progress').style.width = progress + '%'; |
| }, 150); |
| } |
| |
| // ======================================================== |
| // SYSTÈME D'ONBOARDING |
| // ======================================================== |
| |
| let onboardStep = 0; |
| const onboardSteps = [ |
| // Étape 1: Bienvenue |
| () => ` |
| <div class="text-center"> |
| <div class="text-8xl mb-4">📖</div> |
| <h2 class="text-2xl font-bold text-royal mb-2">Bienvenue dans La Bible !</h2> |
| <p class="text-gray-600 mb-4">L'application qui vous accompagne dans votre marche avec Dieu</p> |
| <div class="flex items-center justify-center gap-2 text-sm text-royal/60"> |
| <span>Conçue par</span> |
| <span class="font-bold text-royal">M. Kadoua Kouassi Jean Marc</span> |
| </div> |
| </div>`, |
| // Étape 2: Langue |
| () => ` |
| <div class="text-center"> |
| <div class="text-4xl mb-3">🌍</div> |
| <h2 class="text-xl font-bold text-royal mb-2">Choisissez votre langue</h2> |
| <p class="text-gray-500 text-sm mb-4">Vous pourrez la modifier dans les paramètres</p> |
| <div class="grid grid-cols-2 gap-2 max-w-xs mx-auto"> |
| ${LANGUAGES.map(l => `<button onclick="selectLanguage('${l.code}')" class="lang-btn p-3 rounded-xl border-2 ${appState.language === l.code ? 'border-royal bg-royal text-white' : 'border-gray-200 hover:border-royal/50'} transition text-sm font-medium">${l.flag} ${l.name}</button>`).join('')} |
| </div> |
| </div>`, |
| // Étape 3: Informations personnelles |
| () => ` |
| <div class="text-center"> |
| <div class="text-4xl mb-3">👤</div> |
| <h2 class="text-xl font-bold text-royal mb-2">Qui êtes-vous ?</h2> |
| <p class="text-gray-500 text-sm mb-4">Pour personnaliser votre expérience</p> |
| <div class="space-y-3 max-w-xs mx-auto text-left"> |
| <input id="ob-name" type="text" placeholder="Votre nom *" required class="w-full p-3 border-2 border-royal/20 rounded-xl focus:border-royal focus:outline-none transition"> |
| <input id="ob-firstname" type="text" placeholder="Votre prénom *" required class="w-full p-3 border-2 border-royal/20 rounded-xl focus:border-royal focus:outline-none transition"> |
| <input id="ob-age" type="number" placeholder="Votre âge" min="3" max="120" class="w-full p-3 border-2 border-royal/20 rounded-xl focus:border-royal focus:outline-none transition"> |
| <input id="ob-email" type="email" placeholder="Votre email (pour sauvegarder)" class="w-full p-3 border-2 border-royal/20 rounded-xl focus:border-royal focus:outline-none transition"> |
| <input id="ob-church" type="text" placeholder="Votre église (optionnel)" class="w-full p-3 border-2 border-royal/20 rounded-xl focus:border-royal focus:outline-none transition"> |
| </div> |
| </div>`, |
| // Étape 4: Sexe et accessibilité |
| () => ` |
| <div class="text-center"> |
| <div class="text-4xl mb-3">♿</div> |
| <h2 class="text-xl font-bold text-royal mb-2">Accessibilité</h2> |
| <p class="text-gray-500 text-sm mb-4">Nous adaptons l'interface à vos besoins</p> |
| <div class="space-y-4 max-w-xs mx-auto text-left"> |
| <div> |
| <p class="font-bold text-royal text-sm mb-2">Sexe :</p> |
| <div class="flex gap-2"> |
| <button onclick="selectGender('M')" class="gender-btn flex-1 p-3 rounded-xl border-2 ${appState.user?.gender==='M'?'border-royal bg-royal text-white':'border-gray-200'} transition font-medium">👨 Homme</button> |
| <button onclick="selectGender('F')" class="gender-btn flex-1 p-3 rounded-xl border-2 ${appState.user?.gender==='F'?'border-royal bg-royal text-white':'border-gray-200'} transition font-medium">👩 Femme</button> |
| </div> |
| </div> |
| <div> |
| <p class="font-bold text-royal text-sm mb-2">Besoins spécifiques :</p> |
| <div class="space-y-2"> |
| <label class="flex items-center gap-2 p-2 rounded-lg hover:bg-royal/5 transition cursor-pointer"> |
| <input type="checkbox" id="ob-deaf" class="w-4 h-4 accent-royal"> <span class="text-sm">🤟 Sourdeau/Sourd</span> |
| </label> |
| <label class="flex items-center gap-2 p-2 rounded-lg hover:bg-royal/5 transition cursor-pointer"> |
| <input type="checkbox" id="ob-mute" class="w-4 h-4 accent-royal"> <span class="text-sm">🔇 Muet/Muette</span> |
| </label> |
| <label class="flex items-center gap-2 p-2 rounded-lg hover:bg-royal/5 transition cursor-pointer"> |
| <input type="checkbox" id="ob-blind" class="w-4 h-4 accent-royal"> <span class="text-sm">👁️ Malvoyant/Aveugle</span> |
| </label> |
| <label class="flex items-center gap-2 p-2 rounded-lg hover:bg-royal/5 transition cursor-pointer"> |
| <input type="checkbox" id="ob-able" class="w-4 h-4 accent-royal"> <span class="text-sm">✅ Portant(e)</span> |
| </label> |
| </div> |
| </div> |
| </div> |
| </div>`, |
| // Étape 5: Situation spirituelle |
| () => ` |
| <div class="text-center"> |
| <div class="text-4xl mb-3">⛪</div> |
| <h2 class="text-xl font-bold text-royal mb-2">Votre parcours spirituel</h2> |
| <p class="text-gray-500 text-sm mb-4">Pour mieux vous guider</p> |
| <div class="space-y-3 max-w-xs mx-auto text-left"> |
| <div> |
| <p class="font-bold text-royal text-sm mb-2">Fréquentez-vous une église ?</p> |
| <div class="flex gap-2"> |
| <button onclick="selectChurch(true)" class="church-btn flex-1 p-3 rounded-xl border-2 border-gray-200 hover:border-royal/50 transition font-medium text-sm">✅ Oui</button> |
| <button onclick="selectChurch(false)" class="church-btn flex-1 p-3 rounded-xl border-2 border-gray-200 hover:border-royal/50 transition font-medium text-sm">❌ Non</button> |
| </div> |
| </div> |
| <div> |
| <p class="font-bold text-royal text-sm mb-2">Êtes-vous baptisé(e) ?</p> |
| <div class="flex gap-2"> |
| <button onclick="selectBaptized(true)" class="bapt-btn flex-1 p-3 rounded-xl border-2 border-gray-200 hover:border-royal/50 transition font-medium text-sm">💧 Oui</button> |
| <button onclick="selectBaptized(false)" class="bapt-btn flex-1 p-3 rounded-xl border-2 border-gray-200 hover:border-royal/50 transition font-medium text-sm">🚫 Non</button> |
| </div> |
| </div> |
| <p class="text-xs text-gray-400 mt-4">ℹ️ Toutes ces informations sont stockées localement et restent privées.</p> |
| </div> |
| </div>`, |
| // Étape 6: Version de la Bible |
| () => ` |
| <div class="text-center"> |
| <div class="text-4xl mb-3">📚</div> |
| <h2 class="text-xl font-bold text-royal mb-2">Version de la Bible</h2> |
| <p class="text-gray-500 text-sm mb-4">Choisissez votre version préférée</p> |
| <div class="space-y-3 max-w-xs mx-auto"> |
| <button onclick="selectVersion('LS')" class="ver-btn w-full p-4 rounded-xl border-2 ${appState.bibleVersion==='LS'?'border-royal bg-royal text-white':'border-gray-200 hover:border-royal/50'} transition text-left"> |
| <p class="font-bold">📖 Louis Segond (LS)</p> |
| <p class="text-xs mt-1 ${appState.bibleVersion==='LS'?'text-white/70':'text-gray-500'}">Traduction classique et fidèle, idéale pour l'étude approfondie</p> |
| </button> |
| <button onclick="selectVersion('PV')" class="ver-btn w-full p-4 rounded-xl border-2 ${appState.bibleVersion==='PV'?'border-chick bg-royal text-white':'border-gray-200 hover:border-royal/50'} transition text-left"> |
| <p class="font-bold">📖 Parole de Vie (PV)</p> |
| <p class="text-xs mt-1 ${appState.bibleVersion==='PV'?'text-white/70':'text-gray-500'}">Langage simple et accessible, parfait pour les nouveaux croyants</p> |
| </button> |
| </div> |
| </div>`, |
| // Étape 7: C'est parti ! |
| () => ` |
| <div class="text-center"> |
| <div class="text-8xl mb-4">🎉</div> |
| <h2 class="text-2xl font-bold text-royal mb-2">C'est parti !</h2> |
| <p class="text-gray-600 mb-4">Votre aventure avec la Parole de Dieu commence maintenant</p> |
| <div class="glass-card rounded-xl p-4 max-w-xs mx-auto text-left space-y-2"> |
| <p class="text-sm font-bold text-royal">📋 Votre profil :</p> |
| <p class="text-sm text-gray-600">📝 ${appState.user?.name || 'Utilisateur'} ${appState.user?.firstname || ''}</p> |
| <p class="text-sm text-gray-600">📊 Version : ${appState.bibleVersion === 'LS' ? 'Louis Segond' : 'Parole de Vie'}</p> |
| <p class="text-sm text-gray-600">🌍 Langue : ${LANGUAGES.find(l=>l.code===appState.language)?.name || 'Français'}</p> |
| <p class="text-sm text-gray-600">⛪ Église : ${appState.user?.hasChurch ? 'Oui' : 'Non catégorisé'}</p> |
| <p class="text-sm text-gray-600">💧 Baptisé : ${appState.user?.baptized ? 'Oui' : 'Pas encore'}</p> |
| </div> |
| <p class="text-xs text-gray-400 mt-4">🔒 Aucune donnée n'est partagée. Pas de cookies. Pas de publicité.</p> |
| </div>` |
| ]; |
| |
| // Afficher l'onboarding |
| function showOnboarding() { |
| document.getElementById('onboarding-modal').classList.remove('hidden'); |
| renderOnboardStep(); |
| } |
| |
| // Rendre l'étape d'onboarding |
| function renderOnboardStep() { |
| const content = document.getElementById('onboard-content'); |
| const label = document.getElementById('onboard-step-label'); |
| const progressBar = document.getElementById('onboard-progress-bar'); |
| const prevBtn = document.getElementById('onboard-prev'); |
| const nextBtn = document.getElementById('onboard-next'); |
| const skipBtn = document.getElementById('onboard-skip'); |
| |
| label.textContent = `Étape ${onboardStep + 1}/${onboardSteps.length}`; |
| progressBar.style.width = ((onboardStep + 1) / onboardSteps.length * 100) + '%'; |
| |
| content.innerHTML = onboardSteps[onboardStep](); |
| content.className = 'flex-1 flex flex-col items-center justify-center p-6 page-enter'; |
| |
| prevBtn.classList.toggle('hidden', onboardStep === 0); |
| nextBtn.textContent = onboardStep === onboardSteps.length - 1 ? 'Commencer ! ✨' : 'Suivant'; |
| skipBtn.classList.toggle('hidden', onboardStep === onboardSteps.length - 1); |
| |
| lucide.createIcons(); |
| } |
| |
| // Navigation dans l'onboarding |
| document.getElementById('onboard-next').addEventListener('click', () => { |
| if (onboardStep === 2) { // Étape infos personnelles |
| const name = document.getElementById('ob-name')?.value; |
| const firstname = document.getElementById('ob-firstname')?.value; |
| const age = document.getElementById('ob-age')?.value; |
| const email = document.getElementById('ob-email')?.value; |
| const church = document.getElementById('ob-church')?.value; |
| if (!name || !firstname) { |
| showToast('Veuillez entrer au minimum votre nom et prénom', 'warning'); |
| return; |
| } |
| appState.user = { ...appState.user, name, firstname, age: parseInt(age)||0, email, church }; |
| saveState(); |
| } |
| if (onboardStep === 3) { // Étape accessibilité |
| const isDeaf = document.getElementById('ob-deaf')?.checked; |
| const isMute = document.getElementById('ob-mute')?.checked; |
| const isBlind = document.getElementById('ob-blind')?.checked; |
| const isAble = document.getElementById('ob-able')?.checked; |
| appState.user = { ...appState.user, isDeaf, isMute, isBlind, isAble }; |
| // Configurer l'interface selon les besoins |
| if (isBlind) { appState.fontSize = 'xlarge'; appState.highContrast = true; } |
| else if (isDeaf || isMute) { /* Activer lecture auto */ } |
| saveState(); |
| } |
| if (onboardStep >= onboardSteps.length - 1) { |
| // Terminer l'onboarding |
| document.getElementById('onboarding-modal').classList.add('hidden'); |
| document.getElementById('app-container').classList.remove('hidden'); |
| applyAccessibilitySettings(); |
| checkSundayProgram(); |
| showEmotionModal(); |
| updateDailyTheme(); |
| navigateTo('home'); |
| showToast('Bienvenue ! Que Dieu vous bénisse ! 🙏', 'success'); |
| triggerCelebration(); |
| return; |
| } |
| onboardStep++; |
| renderOnboardStep(); |
| }); |
| |
| document.getElementById('onboard-prev').addEventListener('click', () => { |
| if (onboardStep > 0) { onboardStep--; renderOnboardStep(); } |
| }); |
| |
| document.getElementById('onboard-skip').addEventListener('click', () => { |
| appState.user = appState.user || { name: 'Utilisateur', firstname: '', age: 0 }; |
| saveState(); |
| document.getElementById('onboarding-modal').classList.add('hidden'); |
| document.getElementById('app-container').classList.remove('hidden'); |
| checkSundayProgram(); |
| showEmotionModal(); |
| updateDailyTheme(); |
| navigateTo('home'); |
| }); |
| |
| // Fonctions de sélection dans l'onboarding |
| function selectLanguage(code) { appState.language = code; saveState(); renderOnboardStep(); } |
| function selectGender(g) { appState.user = { ...appState.user, gender: g }; saveState(); renderOnboardStep(); } |
| function selectChurch(has) { appState.user = { ...appState.user, hasChurch: has }; saveState(); renderOnboardStep(); } |
| function selectBaptized(is) { appState.user = { ...appState.user, baptized: is }; saveState(); renderOnboardStep(); } |
| function selectVersion(v) { appState.bibleVersion = v; saveState(); renderOnboardStep(); } |
| |
| // ======================================================== |
| // SYSTÈME DE NAVIGATION (Contrôleur principal) |
| // ======================================================== |
| |
| function navigateTo(page, params = {}) { |
| appState.currentPage = page; |
| const content = document.getElementById('main-content'); |
| content.className = 'flex-1 overflow-y-auto pb-20 page-enter'; |
| |
| // Mettre à jour la navigation |
| document.querySelectorAll('.nav-btn').forEach(btn => { |
| btn.classList.remove('nav-active'); |
| btn.classList.add('text-white/60'); |
| if (btn.dataset.page === page) { |
| btn.classList.add('nav-active'); |
| btn.classList.remove('text-white/60'); |
| } |
| }); |
| |
| // Rendre la page correspondante |
| switch(page) { |
| case 'home': content.innerHTML = renderHomePage(); break; |
| case 'bible': content.innerHTML = renderBiblePage(); break; |
| case 'prayer': content.innerHTML = renderPrayerPage(); break; |
| case 'study': content.innerHTML = renderStudyPage(); break; |
| case 'more': content.innerHTML = renderMorePage(); break; |
| case 'character': content.innerHTML = renderCharacterDetail(params.id); break; |
| case 'theme': content.innerHTML = renderThemeDetail(params.id); break; |
| case 'category': content.innerHTML = renderCategoryDetail(params.id); break; |
| case 'prayer-type': content.innerHTML = renderPrayerTypeDetail(params.id); break; |
| case 'ecodim': content.innerHTML = renderEcodimPage(); break; |
| case 'adult-learn': content.innerHTML = renderAdultLearnPage(); break; |
| case 'ministry': content.innerHTML = renderMinistryPage(); break; |
| case 'meditation': content.innerHTML = renderMeditationPage(); break; |
| case 'films': content.innerHTML = renderFilmsPage(); break; |
| case 'donate': content.innerHTML = renderDonatePage(); break; |
| case 'feedback': content.innerHTML = renderFeedbackPage(); break; |
| case 'profile': content.innerHTML = renderProfilePage(); break; |
| case 'settings': content.innerHTML = renderSettingsPage(); break; |
| case 'leaderboard': content.innerHTML = renderLeaderboardPage(); break; |
| case 'baptism-track': content.innerHTML = renderBaptismTrack(); break; |
| case 'search-results': content.innerHTML = renderSearchResults(params.query); break; |
| default: content.innerHTML = renderHomePage(); |
| } |
| |
| content.scrollTop = 0; |
| lucide.createIcons(); |
| } |
| |
| // ======================================================== |
| // PAGES DE L'APPLICATION (Vues dans l'architecture MVC) |
| // ======================================================== |
| |
| // --- PAGE D'ACCUEIL --- |
| function renderHomePage() { |
| const user = appState.user || {}; |
| const firstName = user.firstname || user.name || 'Ami(e)'; |
| const isSunday = new Date().getDay() === 0; |
| const currentHour = new Date().getHours(); |
| const timeGreeting = currentHour < 12 ? 'Bon matin' : currentHour < 18 ? 'Bon après-midi' : 'Bonsoir'; |
| const dailyTheme = getDailyTheme(); |
| |
| // Calculer la progression |
| const totalVerses = 31102; // Approximatif |
| const readCount = appState.readVerses.length; |
| const progressPercent = Math.min(Math.round((readCount / 100) * 100), 100); |
| |
| return ` |
| <div class="p-4 space-y-4"> |
| |
| <div class="glass-card rounded-2xl p-5 card-animate"> |
| <div class="flex items-center justify-between mb-3"> |
| <div> |
| <p class="text-sm text-royal/60">${timeGreeting} ☀️</p> |
| <h2 class="text-xl font-bold text-royal">Bonjour ${firstName} !</h2> |
| </div> |
| <div class="text-3xl">🙏</div> |
| </div> |
| |
| <div class="bg-royal/5 rounded-xl p-3 mt-2"> |
| <p class="text-xs font-bold text-chick-dark mb-1">📜 Verset du jour</p> |
| <p class="text-sm text-royal font-serif-bible italic">"${getRandomVerse()}"</p> |
| <p class="text-xs text-royal/60 mt-1">${getRandomVerseRef()}</p> |
| </div> |
| </div> |
| |
| |
| <div id="emotion-meditation" class="glass-card rounded-2xl p-4 card-animate" style="animation-delay:0.1s"> |
| <h3 class="font-bold text-royal mb-2 flex items-center gap-2"><span>🧘</span> Méditation personnalisée</h3> |
| <div id="daily-meditation-content"> |
| ${renderDailyMeditation()} |
| </div> |
| </div> |
| |
| |
| ${isSunday ? ` |
| <div class="glass-card rounded-2xl p-4 card-animate border-2 border-chick/50" style="animation-delay:0.15s"> |
| <h3 class="font-bold text-royal mb-2 flex items-center gap-2"><span>🕊️</span> Programme Dominical</h3> |
| <p class="text-sm text-gray-600 mb-2">Aujourd'hui est un jour spécial ! Suivez le programme de prière et de méditation.</p> |
| <button onclick="document.getElementById('sunday-modal').classList.remove('hidden')" class="w-full py-2 gradient-royal text-white rounded-xl font-bold text-sm hover:opacity-90 transition">Voir le programme ✨</button> |
| </div>` : ''} |
| |
| |
| <div class="glass-card rounded-2xl p-4 card-animate" style="animation-delay:0.2s"> |
| <div class="flex items-center justify-between mb-2"> |
| <h3 class="font-bold text-royal flex items-center gap-2"><span>📅</span> Thème du jour : ${dailyTheme.icon} ${dailyTheme.name}</h3> |
| </div> |
| <p class="text-sm text-gray-600 mb-2">${dailyTheme.description}</p> |
| <div class="flex gap-2 overflow-x-auto snap-scroll pb-1"> |
| ${dailyTheme.verses.slice(0,4).map(v => `<span class="shrink-0 px-3 py-1 bg-royal/10 rounded-full text-xs text-royal font-medium">${v}</span>`).join('')} |
| </div> |
| </div> |
| |
| |
| <div class="glass-card rounded-2xl p-4 card-animate" style="animation-delay:0.25s"> |
| <div class="flex items-center justify-between mb-2"> |
| <h3 class="font-bold text-royal flex items-center gap-2"><span>📊</span> Progression</h3> |
| <span class="text-xs font-bold bg-chick text-royal px-2 py-0.5 rounded-full">${readCount} versets</span> |
| </div> |
| <div class="w-full h-3 bg-gray-100 rounded-full overflow-hidden mb-2"> |
| <div class="h-full gradient-royal rounded-full transition-all duration-500" style="width:${progressPercent}%"></div> |
| </div> |
| <div class="flex justify-between text-xs text-gray-500"> |
| <span>Série : ${appState.streak} jours 🔥</span> |
| <span>${progressPercent}% de progression</span> |
| </div> |
| </div> |
| |
| |
| <div class="glass-card rounded-2xl p-4 card-animate" style="animation-delay:0.3s"> |
| <div class="flex items-center justify-between mb-2"> |
| <h3 class="font-bold text-royal flex items-center gap-2"><span>🏆</span> Badges</h3> |
| <button onclick="navigateTo('profile')" class="text-xs text-royal hover:underline">Voir tout</button> |
| </div> |
| <div class="flex gap-3 overflow-x-auto snap-scroll pb-1"> |
| ${appState.badges.length > 0 ? |
| appState.badges.slice(0,4).map(bid => { |
| const badge = BIBLE_DATA.badges.find(b=>b.id===bid); |
| return badge ? `<div class="shrink-0 text-center"><div class="text-3xl">${badge.icon}</div><p class="text-[10px] text-royal font-bold mt-1">${badge.name}</p></div>` : ''; |
| }).join('') : |
| `<p class="text-sm text-gray-400">Commencez à lire pour gagner des badges !</p>` |
| } |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-2 gap-3"> |
| <button onclick="navigateTo('bible')" class="glass-card rounded-xl p-4 text-center hover:shadow-md transition card-animate" style="animation-delay:0.35s"> |
| <div class="text-2xl mb-1">📖</div> |
| <p class="text-sm font-bold text-royal">Lire la Bible</p> |
| <p class="text-[10px] text-gray-500">Poursuivre la lecture</p> |
| </button> |
| <button onclick="navigateTo('prayer')" class="glass-card rounded-xl p-4 text-center hover:shadow-md transition card-animate" style="animation-delay:0.4s"> |
| <div class="text-2xl mb-1">🙏</div> |
| <p class="text-sm font-bold text-royal">Prier</p> |
| <p class="text-[10px] text-gray-500">Heure de prière</p> |
| </button> |
| <button onclick="navigateTo('ecodim')" class="glass-card rounded-xl p-4 text-center hover:shadow-md transition card-animate" style="animation-delay:0.45s"> |
| <div class="text-2xl mb-1">🧒</div> |
| <p class="text-sm font-bold text-royal">Ecodim</p> |
| <p class="text-[10px] text-gray-500">Pour les enfants</p> |
| </button> |
| <button onclick="navigateTo('study')" class="glass-card rounded-xl p-4 text-center hover:shadow-md transition card-animate" style="animation-delay:0.5s"> |
| <div class="text-2xl mb-1">🎓</div> |
| <p class="text-sm font-bold text-royal">Étudier</p> |
| <p class="text-[10px] text-gray-500">Étude biblique</p> |
| </button> |
| </div> |
| |
| |
| <div class="glass-card rounded-2xl p-4 card-animate" style="animation-delay:0.55s"> |
| <h3 class="font-bold text-royal mb-2 flex items-center gap-2"><span>${currentHour < 15 ? '🌅' : '🌙'}</span> ${currentHour < 15 ? 'Prière du matin' : 'Prière du soir'}</h3> |
| <p class="text-sm text-gray-600 italic font-serif-bible mb-2">"${currentHour < 15 ? BIBLE_DATA.morningPrayers[0] : BIBLE_DATA.eveningPrayers[0]}"</p> |
| <button onclick="navigateTo('prayer')" class="w-full py-2 bg-royal/10 text-royal rounded-xl font-bold text-sm hover:bg-royal hover:text-white transition">Voir les prières complètes</button> |
| </div> |
| |
| |
| <div class="glass-card rounded-2xl p-4 border-l-4 border-chick card-animate" style="animation-delay:0.6s"> |
| <p class="text-xs text-royal/60 mb-1">💪 Message de fortification</p> |
| <p class="text-sm text-royal font-serif-bible italic">"${getRandomVerse()}"</p> |
| <p class="text-xs text-royal/60 mt-1">— Restez ferme dans la foi !</p> |
| </div> |
| </div>`; |
| } |
| |
| // --- PAGE BIBLE (LECTEUR) --- |
| function renderBiblePage() { |
| const book = BIBLE_DATA.books.find(b=>b.id===appState.currentBook) || BIBLE_DATA.books.find(b=>b.id==='joh'); |
| const testament = book.testament === 'AT' ? 'Ancien Testament' : 'Nouveau Testament'; |
| |
| return ` |
| <div class="p-4 space-y-4"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <h2 class="text-lg font-bold text-royal">${book.name}</h2> |
| <p class="text-xs text-gray-500">${testament} - ${book.category}</p> |
| </div> |
| <div class="flex gap-2"> |
| <span class="px-3 py-1 bg-royal text-white rounded-full text-xs font-bold">${appState.bibleVersion === 'LS' ? 'Louis Segond' : 'Parole de Vie'}</span> |
| </div> |
| </div> |
| |
| |
| <div class="glass-card rounded-xl p-3"> |
| <p class="text-xs font-bold text-royal mb-2">📖 Sélectionner un livre</p> |
| <div class="flex gap-2 mb-2"> |
| <button onclick="showTestament('AT')" class="test-tab px-3 py-1 rounded-full text-xs font-bold ${book.testament==='AT'?'bg-royal text-white':'bg-royal/10 text-royal'} transition">Ancien Testament</button> |
| <button onclick="showTestament('NT')" class="test-tab px-3 py-1 rounded-full text-xs font-bold ${book.testament==='NT'?'bg-royal text-white':'bg-royal/10 text-royal'} transition">Nouveau Testament</button> |
| </div> |
| <div id="book-list" class="grid grid-cols-4 gap-1 max-h-48 overflow-y-auto"> |
| ${BIBLE_DATA.books.filter(b=>b.testament===book.testament).map(b => |
| `<button onclick="selectBook('${b.id}')" class="p-1.5 rounded text-[10px] font-medium ${b.id===appState.currentBook?'bg-royal text-white':'bg-royal/5 text-royal hover:bg-royal/15'} transition truncate">${b.abbr}</button>` |
| ).join('')} |
| </div> |
| </div> |
| |
| |
| <div class="flex gap-2 items-center"> |
| <button onclick="changeChapter(-1)" class="w-10 h-10 rounded-full bg-royal/10 text-royal flex items-center justify-center hover:bg-royal hover:text-white transition"><i data-lucide="chevron-left" class="w-5 h-5"></i></button> |
| <div class="flex-1 text-center"> |
| <span class="font-bold text-royal text-lg">Chapitre ${appState.currentChapter}</span> |
| </div> |
| <button onclick="changeChapter(1)" class="w-10 h-10 rounded-full bg-royal/10 text-royal flex items-center justify-center hover:bg-royal hover:text-white transition"><i data-lucide="chevron-right" class="w-5 h-5"></i></button> |
| </div> |
| |
| |
| <div class="glass-card rounded-xl p-4"> |
| <div id="bible-content" class="space-y-2 font-serif-bible leading-relaxed"> |
| ${renderBibleChapter(book)} |
| </div> |
| </div> |
| |
| |
| <div class="glass-card rounded-xl p-3 flex items-center justify-around"> |
| <button onclick="readAloud()" class="flex flex-col items-center text-royal hover:text-royal-light transition" title="Écouter"> |
| <i data-lucide="volume-2" class="w-5 h-5"></i> |
| <span class="text-[10px] mt-0.5">Écouter</span> |
| </button> |
| <button onclick="readAloudMyVoice()" class="flex flex-col items-center text-royal hover:text-royal-light transition" title="Lire à voix haute"> |
| <i data-lucide="mic" class="w-5 h-5"></i> |
| <span class="text-[10px] mt-0.5">Ma voix</span> |
| </button> |
| <button onclick="markAllRead()" class="flex flex-col items-center text-royal hover:text-royal-light transition" title="Marquer lu"> |
| <i data-lucide="check-circle" class="w-5 h-5"></i> |
| <span class="text-[10px] mt-0.5">Tout lu</span> |
| </button> |
| <button onclick="shareVerse()" class="flex flex-col items-center text-royal hover:text-royal-light transition" title="Partager"> |
| <i data-lucide="share-2" class="w-5 h-5"></i> |
| <span class="text-[10px] mt-0.5">Partager</span> |
| </button> |
| </div> |
| </div>`; |
| } |
| |
| // Rendre un chapitre biblique |
| function renderBibleChapter(book) { |
| // Générer des versets pour le chapitre sélectionné (données exemples) |
| const chapterVerses = Object.entries(BIBLE_DATA[appState.bibleVersion]) |
| .filter(([key]) => key.startsWith(book.id)) |
| .filter(([key]) => { |
| const parts = key.split('-'); |
| return parseInt(parts[parts.length-2]) === appState.currentChapter; |
| }); |
| |
| if (chapterVerses.length === 0) { |
| // Générer des versets placeholder |
| const numVerses = Math.min(20 + Math.floor(Math.random()*15), 35); |
| let html = ''; |
| for (let i = 1; i <= numVerses; i++) { |
| const verseId = `${book.id}-${appState.currentChapter}-${i}`; |
| const isRead = appState.readVerses.includes(verseId); |
| const isHighlighted = appState.highlights[verseId]; |
| html += ` |
| <p class="verse=${isRead?'verse-read':''} ${isHighlighted?'verse-bookmarked':''} cursor-pointer" |
| onclick="toggleVerseRead('${verseId}')" |
| data-verse="${verseId}"> |
| <sup class="text-xs font-bold text-chick-dark mr-1">${i}</sup> |
| <span class="${isHighlighted?'bg-chick/30':''} rounded px-0.5">Texte biblique du verset ${i} du chapitre ${appState.currentChapter} de ${book.name}. La Parole de Dieu est vivante et efficace.</span> |
| </p>`; |
| } |
| return html; |
| } |
| |
| return chapterVerses.map(([key, text]) => { |
| const verseNum = parseInt(key.split('-').pop()); |
| const verseId = key; |
| const isRead = appState.readVerses.includes(verseId); |
| const isHighlighted = appState.highlights[verseId]; |
| return ` |
| <p class="verse ${isRead?'verse-read':''} ${isHighlighted?'verse-bookmarked':''} cursor-pointer" |
| onclick="toggleVerseRead('${verseId}')" |
| data-verse="${verseId}"> |
| <sup class="text-xs font-bold text-chick-dark mr-1">${verseNum}</sup> |
| <span class="${isHighlighted?'bg-chick/30':''} rounded px-0.5">${text}</span> |
| </p>`; |
| }).join(''); |
| } |
| |
| // --- PAGE PRIÈRE --- |
| function renderPrayerPage() { |
| const currentHour = new Date().getHours(); |
| const currentPrayer = getCurrentPrayerHour(currentHour); |
| |
| return ` |
| <div class="p-4 space-y-4"> |
| <h2 class="text-xl font-bold text-royal">🙏 Prière</h2> |
| |
| |
| <div class="gradient-royal rounded-2xl p-5 text-white card-animate"> |
| <p class="text-xs text-chick font-bold mb-1">🕐 Heure de prière actuelle</p> |
| <h3 class="text-lg font-bold mb-2">${currentPrayer.name}</h3> |
| <p class="text-sm opacity-90 mb-1">${currentPrayer.aka} • ${currentPrayer.time}</p> |
| <p class="text-sm opacity-80 italic">"${currentPrayer.description}"</p> |
| <p class="text-xs mt-2 opacity-70">Psaumes suggérés : ${currentPrayer.psalms}</p> |
| </div> |
| |
| |
| <div class="glass-card rounded-xl p-4 card-animate" style="animation-delay:0.1s"> |
| <h3 class="font-bold text-royal mb-2">🕊️ Prière pour cette heure</h3> |
| <p class="text-sm text-gray-700 font-serif-bible italic leading-relaxed">"${getPrayerForHour()}"</p> |
| <div class="flex gap-2 mt-3"> |
| <button onclick="readAloud()" class="flex-1 py-2 gradient-royal text-white rounded-xl text-sm font-bold hover:opacity-90 transition">Écouter</button> |
| <button onclick="markPrayerDone()" class="flex-1 py-2 bg-royal/10 text-royal rounded-xl text-sm font-bold hover:bg-royal hover:text-white transition">✅ Prié !</button> |
| </div> |
| </div> |
| |
| |
| <div class="glass-card rounded-xl p-4 card-animate" style="animation-delay:0.15s"> |
| <h3 class="font-bold text-royal mb-2">🌅🌙 Prières quotidiennes</h3> |
| <div class="space-y-3"> |
| <div class="p-3 rounded-xl bg-amber-50 border border-amber-200"> |
| <p class="text-sm font-bold text-amber-800 mb-1">🌅 Prière du matin</p> |
| <p class="text-xs text-gray-700 italic font-serif-bible">"${BIBLE_DATA.morningPrayers[0]}"</p> |
| </div> |
| <div class="p-3 rounded-xl bg-indigo-50 border border-indigo-200"> |
| <p class="text-sm font-bold text-indigo-800 mb-1">🌙 Prière du soir</p> |
| <p class="text-xs text-gray-700 italic font-serif-bible">"${BIBLE_DATA.eveningPrayers[0]}"</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="card-animate" style="animation-delay:0.2s"> |
| <h3 class="font-bold text-royal mb-2 ml-1">Types de prière</h3> |
| <div class="grid grid-cols-2 gap-2"> |
| ${BIBLE_DATA.prayerTypes.map(pt => ` |
| <button onclick="navigateTo('prayer-type',{id:'${pt.id}'})" class="glass-card rounded-xl p-3 text-left hover:shadow-md transition"> |
| <div class="text-2xl mb-1">${pt.icon}</div> |
| <p class="text-sm font-bold text-royal">${pt.name}</p> |
| <p class="text-[10px] text-gray-500">${pt.duration} • ${pt.hours.join(', ')}</p> |
| </button> |
| `).join('')} |
| </div> |
| </div> |
| |
| |
| <div class="glass-card rounded-xl p-4 card-animate" style="animation-delay:0.25s"> |
| <h3 class="font-bold text-royal mb-2">⏰ Rappels de prière</h3> |
| <div class="space-y-2" id="prayer-reminders"> |
| ${appState.prayerReminders.length > 0 ? |
| appState.prayerReminders.map((r,i) => ` |
| <div class="flex items-center justify-between p-2 bg-royal/5 rounded-lg"> |
| <div> |
| <p class="text-sm font-bold text-royal">${r.name}</p> |
| <p class="text-xs text-gray-500">${r.time}</p> |
| </div> |
| <button onclick="removeReminder(${i})" class="text-red-400 hover:text-red-600"><i data-lucide="trash-2" class="w-4 h-4"></i></button> |
| </div> |
| `).join('') : |
| '<p class="text-sm text-gray-400">Aucun rappel configuré</p>' |
| } |
| </div> |
| <button onclick="addPrayerReminder()" class="mt-2 w-full py-2 border-2 border-dashed border-royal/30 rounded-xl text-royal text-sm font-bold hover:bg-royal/5 transition">+ Ajouter un rappel</button> |
| </div> |
| |
| |
| <div class="glass-card rounded-xl p-4 card-animate" style="animation-delay:0.3s"> |
| <h3 class="font-bold text-royal mb-2">🎯 Points de prière du jour</h3> |
| <div class="space-y-2"> |
| <div class="flex items-start gap-2 p-2 bg-royal/5 rounded-lg"> |
| <span class="text-lg">🛐</span> |
| <div><p class="text-sm font-bold text-royal">Supplication</p><p class="text-xs text-gray-600">Priez pour la repentance et le renouveau dans votre vie</p></div> |
| </div> |
| <div class="flex items-start gap-2 p-2 bg-royal/5 rounded-lg"> |
| <span class="text-lg">✝️</span> |
| <div><p class="text-sm font-bold text-royal">Intercession</p><p class="text-xs text-gray-600">Priez pour votre famille, votre église et votre nation</p></div> |
| </div> |
| <div class="flex items-start gap-2 p-2 bg-royal/5 rounded-lg"> |
| <span class="text-lg">🔥</span> |
| <div><p class="text-sm font-bold text-royal">Combat spirituel</p><p class="text-xs text-gray-600">Lie tout esprit d'oppression et proclame la liberté en Christ</p></div> |
| </div> |
| <div class="flex items-start gap-2 p-2 bg-royal/5 rounded-lg"> |
| <span class="text-lg">👑</span> |
| <div><p class="text-sm font-bold text-royal">Adoration</p><p class="text-xs text-gray-600">Louez Dieu pour sa grandeur et sa fidélité éternelle</p></div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="card-animate" style="animation-delay:0.35s"> |
| <h3 class="font-bold text-royal mb-2 ml-1">⏰ Heures de prière bibliques</h3> |
| <div class="space-y-2"> |
| ${BIBLE_DATA.prayerHours.map(ph => ` |
| <div class="glass-card rounded-xl p-3 flex items-center gap-3"> |
| <div class="w-10 h-10 rounded-full ${isCurrentPrayerHour(ph.time)?'bg-chick text-royal':'bg-royal/10 text-royal'} flex items-center justify-center text-sm font-bold shrink-0">${ph.time.split('-')[0]}</div> |
| <div class="flex-1 min-w-0"> |
| <p class="text-sm font-bold text-royal">${ph.name}</p> |
| <p class="text-[10px] text-gray-500 truncate">${ph.aka} • ${ph.psalms}</p> |
| </div> |
| ${isCurrentPrayerHour(ph.time)?'<span class="px-2 py-0.5 bg-chick text-royal text-[10px] font-bold rounded-full">Maintenant</span>':''} |
| </div> |
| `).join('')} |
| </div> |
| </div> |
| </div>`; |
| } |
| |
| // --- PAGE ÉTUDE --- |
| function renderStudyPage() { |
| return ` |
| <div class="p-4 space-y-4"> |
| <h2 class="text-xl font-bold text-royal">🎓 Étude Biblique</h2> |
| |
| |
| <div class="glass-card rounded-2xl p-4 card-animate border-l-4 border-royal"> |
| <h3 class="font-bold text-royal mb-2 flex items-center gap-2">👨⚕️ Docteur de la Parole</h3> |
| <p class="text-sm text-gray-600 mb-3">Posez votre question biblique et recevez une explication claire</p> |
| <div class="flex gap-2"> |
| <input id="bible-question" type="text" placeholder="Ex: Que dit la Bible du mariage ?" class="flex-1 p-2 border-2 border-royal/20 rounded-xl text-sm focus:outline-none focus:border-royal transition"> |
| <button onclick="askBibleQuestion()" class="px-4 gradient-royal text-white rounded-xl text-sm font-bold">?</button> |
| </div> |
| <div id="bible-answer" class="mt-3 hidden"></div> |
| </div> |
| |
| |
| <div class="card-animate" style="animation-delay:0.1s"> |
| <h3 class="font-bold text-royal mb-2 ml-1">📖 Thèmes et Références</h3> |
| <div class="grid grid-cols-2 gap-2"> |
| ${BIBLE_DATA.themes.map(t => ` |
| <button onclick="navigateTo('theme',{id:'${t.id}'})" class="glass-card rounded-xl p-3 text-left hover:shadow-md transition"> |
| <div class="text-2xl mb-1">${t.icon}</div> |
| <p class="text-sm font-bold text-royal">${t.name}</p> |
| <p class="text-[10px] text-gray-500">${t.verses.length} références</p> |
| </button> |
| `).join('')} |
| </div> |
| </div> |
| |
| |
| <div class="card-animate" style="animation-delay:0.15s"> |
| <h3 class="font-bold text-royal mb-2 ml-1">👤 Personnages Bibliques</h3> |
| <div class="flex gap-3 overflow-x-auto snap-scroll pb-2"> |
| ${BIBLE_DATA.characters.map(c => ` |
| <button onclick="navigateTo('character',{id:'${c.id}'})" class="shrink-0 w-32 glass-card rounded-xl overflow-hidden hover:shadow-md transition"> |
| <div class="h-20 bg-gray-200"><img src="http://static.photos/${c.img}" class="w-full h-full object-cover" alt="${c.name}" onerror="this.style.display='none'"></div> |
| <div class="p-2"> |
| <p class="text-sm font-bold text-royal truncate">${c.name}</p> |
| <p class="text-[10px] text-gray-500">${c.role}</p> |
| </div> |
| </button> |
| `).join('')} |
| </div> |
| </div> |
| |
| |
| <div class="card-animate" style="animation-delay:0.2s"> |
| <h3 class="font-bold text-royal mb-2 ml-1">📂 Catégories</h3> |
| <div class="space-y-2"> |
| ${BIBLE_DATA.categories.map(cat => ` |
| <button onclick="navigateTo('category',{id:'${cat.id}'})" class="w-full glass-card rounded-xl p-3 flex items-center gap-3 hover:shadow-md transition text-left"> |
| <div class="text-2xl">${cat.icon}</div> |
| <div class="flex-1 min-w-0"> |
| <p class="text-sm font-bold text-royal">${cat.name}</p> |
| <p class="text-[10px] text-gray-500">${cat.subtopics.length} sujets</p> |
| </div> |
| <i data-lucide="chevron-right" class="w-4 h-4 text-gray-400"></i> |
| </button> |
| `).join('')} |
| </div> |
| </div> |
| |
| |
| <button onclick="navigateTo('ministry')" class="w-full glass-card rounded-xl p-4 text-left hover:shadow-md transition card-animate" style="animation-delay:0.25s"> |
| <div class="flex items-center gap-3"> |
| <div class="text-2xl">👔</div> |
| <div> |
| <p class="font-bold text-royal">Vœux et Ministères</p> |
| <p class="text-xs text-gray-500">Critères bibliques pour les postes de responsabilité</p> |
| </div> |
| </div> |
| </button> |
| </div>`; |
| } |
| |
| // --- PAGE PLUS --- |
| function renderMorePage() { |
| return ` |
| <div class="p-4 space-y-3"> |
| <h2 class="text-xl font-bold text-royal">Plus de fonctionnalités</h2> |
| |
| <div class="grid grid-cols-3 gap-3"> |
| <button onclick="navigateTo('ecodim')" class="glass-card rounded-xl p-3 text-center hover:shadow-md transition"> |
| <div class="text-2xl mb-1">🧒</div><p class="text-xs font-bold text-royal">Ecodim</p><p class="text-[9px] text-gray-500">Enfants</p> |
| </button> |
| <button onclick="navigateTo('adult-learn')" class="glass-card rounded-xl p-3 text-center hover:shadow-md transition"> |
| <div class="text-2xl mb-1">🧠</div><p class="text-xs font-bold text-royal">Espace Adulte</p><p class="text-[9px] text-gray-500">Apprendre</p> |
| </button> |
| <button onclick="navigateTo('films')" class="glass-card rounded-xl p-3 text-center hover:shadow-md transition"> |
| <div class="text-2xl mb-1">🎬</div><p class="text-xs font-bold text-royal">Films</p><p class="text-[9px] text-gray-500">Animés</p> |
| </button> |
| <button onclick="navigateTo('meditation')" class="glass-card rounded-xl p-3 text-center hover:shadow-md transition"> |
| <div class="text-2xl mb-1">🧘</div><p class="text-xs font-bold text-royal">Méditation</p><p class="text-[9px] text-gray-500">Guide</p> |
| </button> |
| <button onclick="navigateTo('ministry')" class="glass-card rounded-xl p-3 text-center hover:shadow-md transition"> |
| <div class="text-2xl mb-1">👔</div><p class="text-xs font-bold text-royal">Ministère</p><p class="text-[9px] text-gray-500">Vœux</p> |
| </button> |
| <button onclick="navigateTo('donate')" class="glass-card rounded-xl p-3 text-center hover:shadow-md transition"> |
| <div class="text-2xl mb-1">💛</div><p class="text-xs font-bold text-royal">Dons</p><p class="text-[9px] text-gray-500">Soutenir</p> |
| </button> |
| <button onclick="navigateTo('feedback')" class="glass-card rounded-xl p-3 text-center hover:shadow-md transition"> |
| <div class="text-2xl mb-1">📝</div><p class="text-xs font-bold text-royal">Avis</p><p class="text-[9px] text-gray-500">Newsletter</p> |
| </button> |
| <button onclick="navigateTo('leaderboard')" class="glass-card rounded-xl p-3 text-center hover:shadow-md transition"> |
| <div class="text-2xl mb-1">🏆</div><p class="text-xs font-bold text-royal">Classement</p><p class="text-[9px] text-gray-500">Mondial</p> |
| </button> |
| <button onclick="navigateTo('baptism-track')" class="glass-card rounded-xl p-3 text-center hover:shadow-md transition"> |
| <div class="text-2xl mb-1">💧</div><p class="text-xs font-bold text-royal">Baptême</p><p class="text-[9px] text-gray-500">Parcours</p> |
| </button> |
| </div> |
| |
| <div class="space-y-2 mt-4"> |
| <button onclick="navigateTo('profile')" class="w-full glass-card rounded-xl p-3 flex items-center gap-3 hover:shadow-md transition"> |
| <div class="w-10 h-10 rounded-full gradient-royal text-white flex items-center justify-center font-bold">${(appState.user?.name||'U')[0]}</div> |
| <div class="flex-1 text-left"> |
| <p class="text-sm font-bold text-royal">${appState.user?.name||'Utilisateur'} ${appState.user?.firstname||''}</p> |
| <p class="text-xs text-gray-500">${appState.user?.email||'Non configuré'}</p> |
| </div> |
| <i data-lucide="chevron-right" class="w-4 h-4 text-gray-400"></i> |
| </button> |
| |
| <button onclick="navigateTo('settings')" class="w-full glass-card rounded-xl p-3 flex items-center gap-3 hover:shadow-md transition"> |
| <div class="w-10 h-10 rounded-full bg-royal/10 flex items-center justify-center"><i data-lucide="settings" class="w-5 h-5 text-royal"></i></div> |
| <div class="flex-1 text-left"><p class="text-sm font-bold text-royal">Paramètres</p><p class="text-xs text-gray-500">Langue, accessibilité, version</p></div> |
| <i data-lucide="chevron-right" class="w-4 h-4 text-gray-400"></i> |
| </button> |
| </div> |
| |
| |
| <div class="text-center mt-6 p-4 bg-royal/5 rounded-xl"> |
| <p class="text-xs text-royal/60">Conçu par</p> |
| <p class="text-sm font-bold text-royal">M. Kadoua Kouassi Jean Marc</p> |
| <p class="text-[10px] text-gray-400 mt-1">🚫 Pas de publicité • 🍪 Pas de cookies • 🔒 Pas de traçage</p> |
| </div> |
| </div>`; |
| } |
| |
| // --- PAGE ECODIM (ENFANTS) --- |
| function renderEcodimPage() { |
| return ` |
| <div class="p-4 space-y-4"> |
| <div class="gradient-royal rounded-2xl p-5 text-white"> |
| <h2 class="text-2xl font-bold mb-1">🌈 Ecodim</h2> |
| <p class="text-sm opacity-90">Apprendre la Parole de Dieu en s'amusant !</p> |
| <p class="text-xs opacity-70 mt-1">Pour les enfants (moins de 15 ans)</p> |
| </div> |
| |
| |
| <div class="glass-card rounded-xl p-4 card-animate"> |
| <h3 class="font-bold text-royal mb-3 flex items-center gap-2">❓ Quiz Biblique</h3> |
| <div id="kids-quiz-area"> |
| ${renderKidsQuiz()} |
| </div> |
| </div> |
| |
| |
| <div class="card-animate" style="animation-delay:0.1s"> |
| <h3 class="font-bold text-royal mb-2 ml-1">📖 Histoires de la Bible</h3> |
| <div class="flex gap-3 overflow-x-auto snap-scroll pb-2"> |
| ${BIBLE_DATA.animatedFilms.filter(f=>f.age==='3+').map(f => ` |
| <div class="shrink-0 w-40 glass-card rounded-xl overflow-hidden hover:shadow-md transition"> |
| <div class="h-24 bg-gray-200 relative"> |
| <img src="http://static.photos/${f.cover}" class="w-full h-full object-cover" alt="${f.title}" onerror="this.style.display='none'"> |
| <div class="absolute inset-0 flex items-center justify-center bg-black/30"><span class="text-4xl">▶️</span></div> |
| </div> |
| <div class="p-2"> |
| <p class="text-xs font-bold text-royal">${f.title}</p> |
| <p class="text-[10px] text-gray-500">${f.duration} • ${f.age}</p> |
| </div> |
| </div> |
| `).join('')} |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-2 gap-3"> |
| <button class="glass-card rounded-xl p-4 text-center hover:shadow-md transition card-animate" style="animation-delay:0.15s" onclick="startMemoryGame()"> |
| <div class="text-3xl mb-1">🃏</div> |
| <p class="text-sm font-bold text-royal">Memory</p> |
| <p class="text-[10px] text-gray-500">Retrouver les paires</p> |
| </button> |
| <button class="glass-card rounded-xl p-4 text-center hover:shadow-md transition card-animate" style="animation-delay:0.2s" onclick="startWordSearch()"> |
| <div class="text-3xl mb-1">🔤</div> |
| <p class="text-sm font-bold text-royal">Mots cachés</p> |
| <p class="text-[10px] text-gray-500">Trouver les mots</p> |
| </button> |
| </div> |
| </div>`; |
| } |
| |
| // --- PAGE ESPACE ADULTE --- |
| function renderAdultLearnPage() { |
| return ` |
| <div class="p-4 space-y-4"> |
| <div class="gradient-royal rounded-2xl p-5 text-white"> |
| <h2 class="text-xl font-bold mb-1">🧠 Espace Adulte</h2> |
| <p class="text-sm opacity-90">Spiritualité, Mystères, Lois divines et Vie en communauté</p> |
| </div> |
| |
| |
| <div class="glass-card rounded-xl p-4 card-animate"> |
| <h3 class="font-bold text-royal mb-3 flex items-center gap-2">❓ Quiz Spiritualité</h3> |
| <div id="adult-quiz-area">${renderAdultQuiz()}</div> |
| </div> |
| |
| |
| <div class="space-y-2"> |
| <div class="glass-card rounded-xl p-4 card-animate" style="animation-delay:0.1s"> |
| <h3 class="font-bold text-royal mb-2">⛪ Marcher avec Christ</h3> |
| <p class="text-sm text-gray-600">L'importance de venir à Christ, de se faire baptiser et de quitter les péchés.</p> |
| <div class="flex gap-1 mt-2 flex-wrap"> |
| <span class="px-2 py-0.5 bg-royal/10 rounded-full text-xs text-royal">Actes 2:38</span> |
| <span class="px-2 py-0.5 bg-royal/10 rounded-full text-xs text-royal">Romains 6:3-4</span> |
| <span class="px-2 py-0.5 bg-royal/10 rounded-full text-xs text-royal">Jean 3:5</span> |
| </div> |
| </div> |
| <div class="glass-card rounded-xl p-4 card-animate" style="animation-delay:0.15s"> |
| <h3 class="font-bold text-royal mb-2">💰 L'économie selon la Bible</h3> |
| <p class="text-sm text-gray-600">Gestion financière, dîme, intégrité dans les affaires et prospérité divine.</p> |
| <div class="flex gap-1 mt-2 flex-wrap"> |
| <span class="px-2 py-0.5 bg-royal/10 rounded-full text-xs text-royal">Proverbes 22:7</span> |
| <span class="px-2 py-0.5 bg-royal/10 rounded-full text-xs text-royal">Malachie 3:10</span> |
| </div> |
| </div> |
| <div class="glass-card rounded-xl p-4 card-animate" style="animation-delay:0.2s"> |
| <h3 class="font-bold text-royal mb-2">⚯ Mystères de la Bible</h3> |
| <p class="text-sm text-gray-600">Comprendre les mystères spirituels : les 7 esprits de Dieu, le nombre de la bête, les 144000, l'enlèvement.</p> |
| </div> |
| <div class="glass-card rounded-xl p-4 card-animate" style="animation-delay:0.25s"> |
| <h3 class="font-bold text-royal mb-2">👨👩👧ordi Mariage et sexualité</h3> |
| <p class="text-sm text-gray-600">Le mariage biblique, le célibat, la pureté, l'asexualité et la vocation.</p> |
| </div> |
| <div class="glass-card rounded-xl p-4 card-animate" style="animation-delay:0.3s"> |
| <h3 class="font-bold text-royal mb-2">🏛️ Lois divines</h3> |
| <p class="text-sm text-gray-600">Les 10 Commandements, les lois morales, la grâce et la loi, la loi de l'amour.</p> |
| </div> |
| </div> |
| </div>`; |
| } |
| |
| // --- PAGE MINISTÈRE / VŒUX --- |
| function renderMinistryPage() { |
| return ` |
| <div class="p-4 space-y-4"> |
| <div class="gradient-royal rounded-2xl p-5 text-white"> |
| <h2 class="text-xl font-bold mb-1">👔 Vœux & Ministères</h2> |
| <p class="text-sm opacity-90">Critères bibliques pour les postes de responsabilité</p> |
| </div> |
| |
| <div class="space-y-3"> |
| ${BIBLE_DATA.ministryRoles.map(role => ` |
| <div class="glass-card rounded-xl p-4 card-animate |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> |
