PageSourceSearch

http://healingstreams.org/kids/

html healingstreams.org collected 2026-09-27 03:37:27 UTC 297,954 bytes, 5,501 lines download raw bytes

1
2<!DOCTYPE html>
3<html lang="en" class="scroll-smooth">
4<head>
5    <meta charset="utf-8">
6    <meta http-equiv="x-ua-compatible" content="ie=edge">
7    <title>HSLHS for Kids | Healing Streams Live Healing Services with Pastor Chris</title>
8    <meta name="description" content="Welcome to the Healing Streams Live Healing Services Platform for Kids. Redesigned, interactive, and faith-filled!">
9    <meta name="viewport" content="width=device-width, initial-scale=1.0">
10    <meta name="keywords" content="HSLHS for Kids, healing, kiddies magazine, Healing Streams, Pastor Chris, healing to the nations, HERALD, HTTN magazine, miracles, healing school, largest crusade, soul winning, RevDr. Chris Oyakhilome">
11    <meta name="author" content="Healing Streams Live Healing Services for Kids">
12    <meta name="theme-color" content="#ffffff">
13    
14    <!-- Open Graph Tags -->
15    <meta property="og:title" content="HSLHS for Kids | Healing Streams Live Healing Services with Pastor Chris">
16    <meta property="og:image" content="https://healingstreams.tv/images/favicon.png" />
17    <meta property="og:image:type" content="image/png" />
18    <meta property="og:image:width" content="200" />
19    <meta property="og:image:height" content="200" />
20    <link rel="shortcut icon" type="image/x-icon" href="https://healingstreams.tv/images/favicon.png">
21    <meta property="og:description" content="Welcome to the Healing Streams Live Healing Services Platform for Kids."/>
22    
23    <!-- Tailwind CSS -->
24    
24<script src="https://cdn.tailwindcss.com"></script>
24
25    
25<script>
26        tailwind.config = {
27              content: ["./**/*.{html,php}"],
28            theme: {
29                extend: {
30                     fontSize: {
31                        'fluid-xl': 'clamp(1.8rem, 5vw, 3.5rem)'
32                    },
33                    colors: {
34                        brand: {
35                            sky: '#0ea5e9',
36                            ocean: '#0284c7',
37                            banana: '#f59e0b',
38                            amber: '#d97706',
39                            bubblegum: '#f43f5e',
40                            purple: '#8b5cf6',
41                            emerald: '#10b981',
42                            coral: '#ff7a59',
43                            darkBlue: '#1e1b4b'
44                        }
45                    },
46                    fontFamily: {
47                        sans: ['Fredoka', 'Quicksand', 'Inter', 'Comic Sans MS', 'sans-serif'],
48                    },
49                    boxShadow: {
50                        '3d-sky': '0 8px 0 0 #0369a1',
51                        '3d-emerald': '0 8px 0 0 #047857',
52                        '3d-bubblegum': '0 8px 0 0 #be123c',
53                        '3d-banana': '0 8px 0 0 #b45309',
54                        '3d-purple': '0 8px 0 0 #6d28d9',
55                        'premium': '0 20px 40px -15px rgba(0,0,0,0.1)',
56                        'card-depth': '0 10px 25px -5px rgba(0,0,0,0.05), 0 8px 10px -6px rgba(0,0,0,0.05)'
57                    },
58                    animation: {
59                        'bounce-slow': 'bounce 4s infinite',
60                        'pulse-fast': 'pulse 1.2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
61                        'wiggle': 'wiggle 1s ease-in-out infinite',
62                        'float-slow': 'float 6s ease-in-out infinite',
63                        'float-medium': 'float 4s ease-in-out infinite',
64                        'gradient-flow': 'gradient-shift 8s ease infinite',
65                        'spin-slow': 'spin 12s linear infinite',
66                        'wave-hand': 'wave 2.5s infinite'
67                    },
68                    keyframes: {
69                        wiggle: {
70                            '0%, 100%': { transform: 'rotate(-4deg)' },
71                            '50%': { transform: 'rotate(4deg)' },
72                        },
73                        float: {
74                            '0%, 100%': { transform: 'translateY(0px)' },
75                            '50%': { transform: 'translateY(-15px)' },
76                        },
77                        'gradient-shift': {
78                            '0%, 100%': { 'background-position': '0% 50%' },
79                            '50%': { 'background-position': '100% 50%' }
80                        },
81                        wave: {
82                            '0%, 100%': { transform: 'rotate(0deg)' },
83                            '25%': { transform: 'rotate(-15deg)' },
84                            '75%': { transform: 'rotate(15deg)' }
85                        }
86                    }
87                }
88            }
89        }
90    </script>
90
91    
92    <!-- FontAwesome, Google Fonts, & Confetti -->
93    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
94    <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;500;600;700&family=Quicksand:wght@400;500;600;700&family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
95    
96        <!-- Bootstrap 5 CSS -->
97    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
98
99    <!-- Bootstrap 5 JS Bundle (includes Popper) -->
100    
100<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
100
101    <!-- TomSelect CSS -->
102    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tom-select.default.min.css">
103
104    <!-- TomSelect JS (place before closing </body> or after Bootstrap) -->
105    
105<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/tom-select.complete.min.js"></script>
105
106    
106<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js"></script>
106
107    
107<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
107
108
109    <!-- ============================================ -->
110    <!-- MAGAZINE SPONSORSHIP - OPEN MODAL FUNCTION -->
111    <!-- ============================================ -->
112    
112<script>
113        // ============================================
114        // GLOBAL CONSTANTS
115        // ============================================
116        const PRICE_PER_COPY = 0.30;
117
118        // ============================================
119        // MAGAZINE SPONSORSHIP - OPEN MODAL FUNCTION
120        // ============================================
121        function openSponsorshipModal(plan, amount, copies) {
122            console.log('openSponsorshipModal called with:', plan, amount, copies);
123            
124            let finalAmount = amount;
125            let finalCopies = copies;
126            
127            // Check if the slider exists and if this was triggered from the garden section
128            var slider = document.getElementById('sowSlider');
129            
130            // Only use slider value if it was a direct call from the garden section
131            // (i.e., when plan is 'starter' and amount is 25 - the default garden amount)
132            // OR if amount is 0 (meaning we should use slider)
133            var isFromGarden = (plan === 'starter' && amount === 25) || amount === 0;
134            
135            if (isFromGarden && slider) {
136                var sliderAmount = parseInt(slider.value);
137                if (sliderAmount > 0) {
138                    finalAmount = sliderAmount;
139                    finalCopies = Math.floor(finalAmount / PRICE_PER_COPY);
140                }
141            }
142            
143            // If copies is not provided or is 0, calculate from amount
144            if (finalCopies === 0 || !finalCopies) {
145                finalCopies = Math.floor(finalAmount / PRICE_PER_COPY);
146            }
147            
148            // Ensure at least 1 copy
149            if (finalCopies < 1) {
150                finalCopies = 1;
151                finalAmount = Math.max(finalAmount, PRICE_PER_COPY);
152            }
153            
154            // Build the URL
155            var url = 'payment.php?plan=' + plan + 
156                    '&amount=' + finalAmount + 
157                    '&copies=' + finalCopies + 
158                    '&return=' + encodeURIComponent(window.location.pathname) +
159                    '&product_type=magazine_sponsorship';
160            
161            console.log('Redirecting to:', url);
162            window.location.href = url;
163        }
164    </script>
164
165
166    <style>
167        .glass-panel {
168            background: rgba(255, 255, 255, 0.94);
169            backdrop-filter: blur(20px);
170            border: 4px solid rgba(255, 255, 255, 0.7);
171        }
172        .hero-gradient {
173            background: linear-gradient(-45deg, #0ea5e9, #a78bfa, #f43f5e, #10b981);
174            background-size: 400% 400%;
175            animation: gradient-shift 15s ease infinite;
176        }
177        .rainbow-border {
178            border: 6px solid transparent;
179            background: linear-gradient(white, white) padding-box,
180                        linear-gradient(to right, #0ea5e9, #10b981, #f59e0b, #f43f5e, #8b5cf6) border-box;
181        }
182        .text-stroke {
183            -webkit-text-stroke: 1px rgba(0,0,0,0.15);
184        }
185        /* Custom scrollbar */
186        ::-webkit-scrollbar {
187            width: 14px;
188        }
189        ::-webkit-scrollbar-track {
190            background: #f1f5f9;
191        }
192        ::-webkit-scrollbar-thumb {
193            background: #cbd5e1;
194            border-radius: 9999px;
195            border: 4px solid #f1f5f9;
196        }
197        ::-webkit-scrollbar-thumb:hover {
198            background: #94a3b8;
199        }
200        
201        /* Premium Kids Interactive Enhancements */
202        .kids-card-tilt {
203            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
204        }
205        .kids-card-tilt:hover {
206            transform: translateY(-8px) rotate(1.5deg) scale(1.02);
207            box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.15);
208        }
209        .magazine-3d {
210            perspective: 1000px;
211        }
212        .magazine-inner {
213            transition: transform 0.6s;
214            transform-style: preserve-3d;
215        }
216        .magazine-3d:hover .magazine-inner {
217            transform: rotateY(15deg) rotateX(5deg);
218        }
219
220        /* Modal Animations */
221        @keyframes fadeIn {
222            from { opacity: 0; transform: scale(0.95); }
223            to { opacity: 1; transform: scale(1); }
224        }
225        .animate-fade-in {
226            animation: fadeIn 0.3s ease-out;
227        }
228
229
230
231        
232        /* Stationary App Download Ad Bar (below navbar) */
233        .herald-app-download-bar {
234            position: fixed;
235            left: 0;
236            right: 0;
237            top: 56px;
238            z-index: 1025;
239            display: flex;
240            align-items: center;
241            justify-content: center;
242            flex-wrap: wrap;
243            gap: 0.5rem 1rem;
244            padding: 0.5rem 1rem;
245            min-height: 44px;
246            background: linear-gradient(135deg, #0a1633 0%, #0f2d1a 50%, #0d4d2b 100%);
247            color: #fff;
248            font-size: 0.875rem;
249            font-weight: 600;
250            box-shadow: 0 2px 10px rgba(0,0,0,0.15);
251        }
252
253        .herald-app-download-bar-msg {
254            margin: 0;
255            font-size: 0.85rem;
256            font-weight: 700;
257            color: #fff;
258            line-height: 1.3;
259            text-align: center;
260        }
261
262        .herald-app-download-bar .download-cta-wrap {
263            display: flex;
264            align-items: center;
265            gap: 0.5rem;
266            flex-wrap: wrap;
267            justify-content: center;
268        }
269
270        .herald-app-download-bar .download-cta {
271            display: inline-flex;
272            align-items: center;
273            gap: 0.4rem;
274            padding: 0.5rem 1rem;
275            background: rgba(255,255,255,0.95);
276            color: #0a1633;
277            font-weight: 700;
278            font-size: 0.85rem;
279            text-decoration: none;
280            border-radius: 10px;
281            white-space: nowrap;
282            transition: transform 0.2s ease, box-shadow 0.2s ease;
283            border: none;
284            cursor: pointer;
285            box-shadow: 0 2px 6px rgba(0,0,0,0.15);
286        }
287
288        .herald-app-download-bar .download-cta:hover {
289            transform: translateY(-1px);
290            box-shadow: 0 4px 12px rgba(0,0,0,0.2);
291            color: #0a1633;
292        }
293
294        .herald-app-download-bar .download-cta.download-cta-android { background: #dc5d3d; color: #0a1633; }
295        .herald-app-download-bar .download-cta.download-cta-ios { background: #fff; color: #0a1633; }
296        body.has-app-download-bar .main { padding-top: 108px; }
297        
298        /* Pull hero up into the padding so no white gap shows below ad bar */
299        body.has-app-download-bar .main .hero-wrap { margin-top: -108px; }
300        @media (max-width: 768px) {
301            .herald-app-download-bar { top: 56px; }
302            body.has-app-download-bar .main { padding-top: 70px; }
303            body.has-app-download-bar .main .hero-wrap { margin-top: -108px; }
304        }
305        @media (max-width: 480px) {
306            .herald-app-download-bar { padding: 0.6rem 0.75rem; gap: 0.5rem; min-height: 48px; }
307            .herald-app-download-bar-msg { font-size: 0.8rem; }
308            .herald-app-download-bar .download-cta { padding: 0.45rem 0.85rem; font-size: 0.8rem; }
309        }
310
311
312
313/* Modal Animations */
314@keyframes fadeIn {
315    from { 
316        opacity: 0; 
317        transform: scale(0.95) translateY(20px); 
318    }
319    to { 
320        opacity: 1; 
321        transform: scale(1) translateY(0); 
322    }
323}
324
325.animate-fade-in {
326    animation: fadeIn 0.4s ease-out forwards;
327}
328
329/* Button Hover Effects */
330.btn-3d-sky {
331    box-shadow: 0 8px 0 0 #0369a1;
332    transition: all 0.15s ease;
333}
334
335.btn-3d-sky:hover {
336    transform: translateY(-2px);
337    box-shadow: 0 10px 0 0 #0369a1;
338}
339
340.btn-3d-sky:active {
341    transform: translateY(8px);
342    box-shadow: 0 0px 0 0 #0369a1;
343}
344
345/* Modal Scrollbar */
346#quizModalContent::-webkit-scrollbar,
347#activityModal .overflow-y-auto::-webkit-scrollbar {
348    width: 6px;
349}
350
351#quizModalContent::-webkit-scrollbar-track,
352#activityModal .overflow-y-auto::-webkit-scrollbar-track {
353    background: rgba(255,255,255,0.05);
354    border-radius: 10px;
355}
356
357#quizModalContent::-webkit-scrollbar-thumb,
358#activityModal .overflow-y-auto::-webkit-scrollbar-thumb {
359    background: rgba(255,255,255,0.2);
360    border-radius: 10px;
361}
362
363#quizModalContent::-webkit-scrollbar-thumb:hover,
364#activityModal .overflow-y-auto::-webkit-scrollbar-thumb:hover {
365    background: rgba(255,255,255,0.3);
366}
367
368
369
370/* Answer Feedback Modal Animations */
371#answerFeedbackModal .animate-fade-in {
372    animation: modalSlideIn 0.4s ease-out forwards;
373}
374
375@keyframes modalSlideIn {
376    from {
377        opacity: 0;
378        transform: scale(0.9) translateY(30px);
379    }
380    to {
381        opacity: 1;
382        transform: scale(1) translateY(0);
383    }
384}
385
386#answerFeedbackModal .bg-gradient-correct {
387    background: linear-gradient(135deg, #10b981, #059669);
388}
389
390#answerFeedbackModal .bg-gradient-wrong {
391    background: linear-gradient(135deg, #ef4444, #dc2626);
392}
393
394/* Confetti overlay for correct answers */
395.confetti-overlay {
396    position: fixed;
397    top: 0;
398    left: 0;
399    width: 100%;
400    height: 100%;
401    pointer-events: none;
402    z-index: 10000;
403}
404
405
406
407/* Toast Slide In Animation */
408@keyframes slideInRight {
409    from {
410        opacity: 0;
411        transform: translateX(100px) scale(0.9);
412    }
413    to {
414        opacity: 1;
415        transform: translateX(0) scale(1);
416    }
417}
418
419@keyframes slideOutRight {
420    from {
421        opacity: 1;
422        transform: translateX(0) scale(1);
423    }
424    to {
425        opacity: 0;
426        transform: translateX(100px) scale(0.9);
427    }
428}
429
430.animate-slide-in-right {
431    animation: slideInRight 0.4s ease-out forwards;
432}
433
434.animate-slide-out-right {
435    animation: slideOutRight 0.3s ease-in forwards;
436}
437
438/* Toast styling */
439#answerFeedbackToast {
440    pointer-events: auto;
441}
442
443#feedbackToastContent {
444    box-shadow: 0 20px 60px -15px rgba(0,0,0,0.3);
445}
446
447
448
449@keyframes scale-pulse {
450  0%, 100% {
451    transform: scale(1);
452  }
453  50% {
454    transform: scale(1.08); /* adjust 1.08 to control how much it swells */
455  }
456}
457
458
459@keyframes breathe {
460  0%, 100% { transform: scale(1); }
461  50% { transform: scale(1.12); }
462}
463
464
465/* Glassmorphism Card Theme */
466        .glass-card {
467            background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.92) 100%);
468            backdrop-filter: blur(30px);
469            -webkit-backdrop-filter: blur(30px);
470            border: 1px solid rgba(255, 255, 255, 0.9);
471            box-shadow: 
472                0 0 0 1px rgba(226, 232, 240, 0.8) inset,
473                0 25px 60px -15px rgba(15, 23, 42, 0.12),
474                0 0 80px 0 rgba(37, 99, 235, 0.15);
475        }
476
477        .scroll-container::-webkit-scrollbar {
478            width: 5px;
479        }
480        .scroll-container::-webkit-scrollbar-track {
481            background: transparent;
482        }
483        .scroll-container::-webkit-scrollbar-thumb {
484            background: rgba(148, 163, 184, 0.4);
485            border-radius: 10px;
486        }
487
488        /* Floating background elements */
489        @keyframes float {
490            0% { transform: translateY(0px) rotate(0deg) scale(1); }
491            50% { transform: translateY(-16px) rotate(2deg) scale(1.03); }
492            100% { transform: translateY(0px) rotate(0deg) scale(1); }
493        }
494        .animate-float {
495            animation: float 12s ease-in-out infinite;
496        }
497
498        /* Shimmer button gradient animation */
499        .glow-shimmer {
500            background: linear-gradient(90deg, #2563eb, #3b82f6, #f59e0b, #2563eb);
501            background-size: 300% auto;
502            animation: shimmer 4s linear infinite;
503        }
504
505        @keyframes shimmer {
506            to { background-position: 300% center; }
507        }
508
509        .modal-entrance {
510            animation: modalScale 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
511        }
512
513        @keyframes modalScale {
514            from { opacity: 0; transform: scale(0.94) translateY(24px); }
515            to { opacity: 1; transform: scale(1) translateY(0); }
516        }
517
518        /* Carousel Slide Transitions */
519        .carousel-slide {
520            display: none;
521            opacity: 0;
522            transition: opacity 0.4s ease-in-out;
523        }
524        .carousel-slide.active {
525            display: block;
526            opacity: 1;
527        }
528
529        .smooth-img {
530            image-rendering: auto;
531            -webkit-font-smoothing: antialiased;
532            backface-visibility: hidden;
533        }
534
535        .card-hover-effect {
536            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
537        }
538        .card-hover-effect:hover {
539            transform: translateY(-2px);
540            box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.12);
541        }
542
543
544
545          /* Force center the modal */
546#unifiedPopup {
547    position: fixed !important;
548    top: 0 !important;
549    left: 0 !important;
550    right: 0 !important;
551    bottom: 0 !important;
552    z-index: 99999 !important;
553    display: none !important;
554    align-items: center !important;
555    justify-content: center !important;
556    background: rgba(0, 0, 0, 0.7) !important;
557    backdrop-filter: blur(8px) !important;
558    -webkit-backdrop-filter: blur(8px) !important;
559    margin: 0 !important;
560    padding: 20px !important;
561    width: 100vw !important;
562    height: 100vh !important;
563}
564
565#unifiedPopup.show {
566    display: flex !important;
567}
568
569#unifiedPopup .glass-card {
570    margin: auto !important;
571    width: 100% !important;
572    max-width: 500px !important;
573}
574
575    </style>
576</head>
577<body class="bg-indigo-50/40 text-slate-800 font-sans selection:bg-brand-sky selection:text-white overflow-x-hidden">
578
579    <!-- Playful Floating Bubbles Background Decoration -->
580    <div class="fixed inset-0 pointer-events-none z-0 overflow-hidden opacity-45">
581        <div class="absolute w-96 h-96 rounded-full bg-brand-sky/20 blur-3xl -top-20 -left-20 animate-float-slow"></div>
582        <div class="absolute w-[500px] h-[500px] rounded-full bg-brand-purple/15 blur-3xl top-1/3 -right-20 animate-float-medium"></div>
583        <div class="absolute w-80 h-80 rounded-full bg-brand-bubblegum/20 blur-3xl bottom-10 left-1/4 animate-float-slow"></div>
584        <div class="absolute w-64 h-64 rounded-full bg-brand-emerald/15 blur-2xl top-10 right-1/4 animate-pulse"></div>
585    </div>
586
587    <!-- Navigation Header -->
588    <header class="sticky top-0 z-50 transition-all duration-300 bg-white/95 backdrop-blur-md border-b-8 border-brand-sky/10 shadow-lg">
589        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
590            <div class="flex items-center justify-between h-24">
591                
592                <!-- Brand Identity -->
593                <div class="flex items-center space-x-3 cursor-pointer" onclick="scrollToSection('hero')">
594                    <!-- <div class="relative w-14 h-14 bg-gradient-to-tr from-brand-sky via-brand-purple to-brand-coral rounded-2xl flex items-center justify-center shadow-lg transform hover:rotate-12 hover:scale-105 transition-all">
595                        <span class="text-white font-extrabold text-3xl text-stroke">K</span>
596                        <div class="absolute -top-1 -right-1 w-4 h-4 bg-brand-banana rounded-full animate-ping"></div>
597                    </div> -->
598                    <div>
599                        <!-- <h1 class="font-black text-2xl tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-brand-sky via-brand-purple to-brand-bubblegum">
600                            HSLHS <span class="text-brand-banana font-bold">KIDS</span>
601                        </h1> --><img src="https://hsch.ceflixcdn.com/hsrc/images/hslhs4kids.png" style="width:170px; border-radius:20px;">
602                        <!-- <p class="text-[10px] font-black text-slate-500 uppercase tracking-widest leading-none">Healing Streams Live</p> -->
603                    </div>
604                </div>
605
606                <!-- Desktop Navigation Menu -->
607                <nav class="hidden md:flex space-x-2 items-center">
608                    <button onclick="scrollToSection('testimonies')" class="px-4 py-2.5 rounded-2xl text-slate-700 font-extrabold hover:bg-slate-100/80 hover:text-brand-purple transition-all flex items-center gap-2">
609                        <i class="fa-solid fa-heart-circle-check text-brand-purple"></i> Miracles
610                    </button>
611                    <button onclick="scrollToSection('about')" class="px-4 py-2.5 rounded-2xl text-slate-700 font-extrabold hover:bg-slate-100/80 hover:text-brand-purple transition-all flex items-center gap-2">
612                        About 
613                    </button>
614                    <button onclick="scrollToSection('tv')" class="px-4 py-2.5 rounded-2xl text-slate-700 font-extrabold hover:bg-slate-100/80 hover:text-brand-sky transition-all flex items-center gap-2">
615                        <i class="fa-solid fa-tv text-brand-bubblegum animate-pulse"></i> Live TV
616                    </button>
617                    <button onclick="scrollToSection('garden')" class="px-4 py-2.5 rounded-2xl text-slate-700 font-extrabold hover:bg-slate-100/80 hover:text-brand-emerald transition-all flex items-center gap-2">
618                        <i class="fa-solid fa-seedling text-brand-emerald"></i> Faith Garden
619                    </button>
620                   
621                   <button class="px-4 py-2.5 rounded-2xl text-slate-700 font-extrabold hover:bg-slate-100/80 hover:text-brand-purple transition-all flex items-center gap-2">
622                        <i class="fa-solid fa-globe text-brand-purple"></i>  <a href="https://herald.healingstreams.tv/healingcenters_map2/">Healing Centers</a>
623                    </button>
624
625                     <button class="px-4 py-2.5 rounded-2xl text-slate-700 font-extrabold hover:bg-slate-100/80 hover:text-brand-purple transition-all flex items-center gap-2">
626                        <i class="fa-solid fa-download text-brand-purple"></i> <a href="https://kidspiration.world">Magazine</a>
627                    </button>
628                </nav>
629
630                            <!-- Action Button Triggering Sponsorship -->
631                <div class="flex items-center space-x-2 sm:space-x-3">
632                    <button onclick="scrollToSection('magazine')" 
633                            class="relative overflow-hidden bg-brand-banana hover:bg-brand-amber text-white font-black px-3 sm:px-4 py-2 sm:py-2.5 rounded-xl sm:rounded-2xl shadow-3d-banana hover:shadow-none hover:translate-y-1 transform active:scale-95 transition-all flex items-center gap-2 border-b-2 border-amber-600 text-sm">
634                        
635                        <i class="fa-solid fa-heart animate-wiggle"></i> 
636                        
637                        <!-- Mobile: "Sponsor" -->
638                        <span class="sm:hidden font-medium">Give Now</span>
639                        
640                        <!-- Desktop: "Give Now" (or "Sponsor a Child") -->
641                        <span class="hidden sm:inline">Give Now</span>
642                    </button>
643                    
644                    <!-- Mobile Menu Hamburger -->
645                    <button id="mobileMenuBtn" class="md:hidden flex items-center justify-center p-1.5 sm:p-2 rounded-xl sm:rounded-2xl text-slate-600 bg-slate-100 hover:bg-slate-200 transition-all">
646                        <i class="fa-solid fa-bars text-lg sm:text-xl"></i>
647                    </button>
648                </div>
649            </div>
650        </div>
651
652        <!-- Mobile Navigation Menu Dropdown -->
653        <div id="mobileMenu" class="hidden md:hidden bg-white/95 backdrop-blur-md border-t-4 border-slate-100 px-4 pt-2 pb-6 space-y-2 shadow-inner">
654            <button onclick="scrollToSection('hero')" class="w-full text-left block px-4 py-3 rounded-2xl text-slate-700 font-extrabold hover:bg-slate-50 flex items-center gap-3">
655                Home
656            </button>
657            <button onclick="scrollToSection('about')" class="w-full text-left block px-4 py-3 rounded-2xl text-slate-700 font-extrabold hover:bg-slate-50 flex items-center gap-3">
658                About us
659            </button>
660            <button onclick="scrollToSection('tv')" class="w-full text-left block px-4 py-3.5 rounded-2xl text-slate-700 font-extrabold hover:bg-slate-50 flex items-center gap-3">
661                <i class="fa-solid fa-tv text-brand-bubblegum"></i> Live TV
662            </button>
663            <button onclick="scrollToSection('garden')" class="w-full text-left block px-4 py-3.5 rounded-2xl text-slate-700 font-extrabold hover:bg-slate-50 flex items-center gap-3">
664                <i class="fa-solid fa-seedling text-brand-emerald"></i> Faith Garden (Sowing)
665            </button>
666            <button onclick="scrollToSection('magazine')" class="w-full text-left block px-4 py-3.5 rounded-2xl text-slate-700 font-extrabold hover:bg-slate-50 flex items-center gap-3">
667                <i class="fa-solid fa-book-open text-brand-banana"></i> Kiddies Herald & Sponsorship
668            </button>
669            <button onclick="scrollToSection('testimonies')" class="w-full text-left block px-4 py-3.5 rounded-2xl text-slate-700 font-extrabold hover:bg-slate-50 flex items-center gap-3">
670                <i class="fa-solid fa-star text-brand-purple"></i> Miracle Stories
671            </button>
672            <button onclick="scrollToSection('magazine')" class="w-full text-center block px-4 py-4 bg-brand-banana text-white font-black rounded-2xl shadow-3d-banana border-b-2 border-amber-600">
673                Sponsor a Child's Miracle
674            </button>
675        </div>
676    </header>
677
678    <!-- Hero Section -->
679    <section id="hero" class="relative overflow-hidden hero-gradient text-white py-16 lg:py-28 z-10 shadow-inner">
680        <!-- Floating Animated Background Emojis/Icons -->
681        <div class="absolute inset-0 opacity-20 pointer-events-none select-none">
682            <div class="absolute text-5xl top-10 left-10 animate-bounce">✨</div>
683            <div class="absolute text-7xl top-1/4 right-20 animate-pulse">🎈</div>
684            <div class="absolute text-6xl bottom-12 left-1/3 animate-bounce-slow">🚀</div>
685            <div class="absolute text-5xl bottom-24 right-1/4 animate-wiggle">💖</div>
686            <div class="absolute text-8xl top-12 left-1/2 opacity-30 animate-pulse">☁️</div>
687        </div>
688
689        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
690            <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
691                
692                <!-- Left Content: High visual call-outs -->
693                <div class="lg:col-span-7 space-y-6 text-center lg:text-left relative">
694                    <p class="herald-app-download-bar-msg"> DOWNLOAD THE HERALD APP</p>               
695                    <span class="inline-flex items-center gap-2 px-5 py-2 rounded-full bg-white/20 text-white font-black text-sm tracking-wider uppercase backdrop-blur-md animate-pulse border border-white/35">
696              
697                         <!-- <p class="herald-app-download-bar-msg"> 
698                            
699                          Download HERALD app</p> -->
700                            <div class="download-cta-wrap">
701                                <a href="https://web.lwappstore.com/share/lW-sA-D70-GT237" target="_blank" rel="noopener noreferrer" class="text-lg font-bold text-black-500   download-cta download-cta-android">
702                                    <i class="fab fa-android animate-bounce" aria-hidden="true"></i> android
703                                </a>
704                                <a href="https://herald.healingstreams.tv/widget_test/index.html" target="_blank" rel="noopener noreferrer" class="text-lg font-bold text-blue-500 download-cta download-cta-ios">
705                                    <i class="fab fa-apple  animate-bounce" aria-hidden="true"></i> iOS
706                                </a>
707                            </div>
708                    </span>
709                    <h2 class="text-5xl sm:text-7xl font-black tracking-tight leading-tight drop-shadow-md">
710                        Healing Streams   <br>
711                        <span class="text-brand-banana  decoration-brand-bubblegum">Live Healing Services</span> with Pastor Chris
712                    </h2>
713                    <p class="text-xl font-medium text-indigo-50 max-w-2xl mx-auto lg:mx-0 drop-shadow">
714                        Join billions of kids globally on the largest faith journey ever! Watch amazing live streams, play faith-building games, and sponsor God's word to other children.
715                    </p>
716              
717                    <!-- Dynamic CTA button flows -->
718                    <div class="flex flex-col sm:flex-row gap-3 justify-center lg:justify-start pt-4">
719                        <button onclick="scrollToSection('tv')" class="px-6 py-3 bg-brand-bubblegum hover:bg-rose-600 text-white font-black text-base rounded-2xl shadow-3d-bubblegum active:translate-y-1 hover:shadow-none hover:translate-y-1 transition-all flex items-center justify-center gap-2 border-b-2 border-rose-800">
720                            <i class="fa-solid fa-gamepad text-xl animate-wiggle"></i> Enter Live Arena
721                        </button>
722                        <button onclick="scrollToSection('garden')" class="px-6 py-3 bg-white hover:bg-slate-100 text-slate-900 font-black text-base rounded-2xl shadow-premium transform hover:-translate-y-1 active:translate-y-0 transition-all flex items-center justify-center gap-2">
723                            <i class="fa-solid fa-seedling text-brand-emerald text-xl animate-bounce"></i> Seed Planting Game
724                        </button>
725                    </div>
726
727                    <!-- Trust Indicators / Fun Stats Counter -->
728                    <!-- Trust Indicators / Fun Stats Counter -->
729                    <div class="grid grid-cols-3 gap-2 sm:gap-4 pt-6 sm:pt-10 border-t border-white/25 text-center">
730                        <div class="bg-indigo-900/40 p-2 sm:p-4 rounded-2xl backdrop-blur-sm border border-white/10 shadow-inner">
731                            <span class="block text-lg sm:text-3xl lg:text-4xl font-black text-brand-banana">1B+</span>
732                            <span class="text-[8px] sm:text-xs font-bold text-slate-200 uppercase tracking-wider">Kids Reached</span>
733                        </div>
734                        <div class="bg-indigo-900/40 p-2 sm:p-4 rounded-2xl backdrop-blur-sm border border-white/10 shadow-inner">
735                            <span class="block text-lg sm:text-3xl lg:text-4xl font-black text-brand-banana">150+</span>
736                            <span class="text-[8px] sm:text-xs font-bold text-slate-200 uppercase tracking-wider">Countries Live</span>
737                        </div>
738                        <div class="bg-indigo-900/40 p-2 sm:p-4 rounded-2xl backdrop-blur-sm border border-white/10 shadow-inner">
739                            <span class="block text-lg sm:text-3xl lg:text-4xl font-black text-brand-banana">1M+</span>
740                            <span class="text-[8px] sm:text-xs font-bold text-slate-200 uppercase tracking-wider">Miracle Seeds</span>
741                        </div>
742                    </div>
743                </div>
744
745                <!-- Right Content: The Interactive Registration Card -->
746                <div class="lg:col-span-5 relative">
747                    <!-- <div class="absolute -top-10 -left-10 w-24 h-24 pointer-events-none select-none opacity-80 lg:hidden animate-float-medium">
748                        <img src="https://healingstreams.org/kids/assets/img/812B2E78_E0B5_4F95_B388_C472F7065A11.png" alt="Mascot Mobile" class="w-full h-full object-contain">
749                    </div> -->
750                    
751                    <div class="glass-panel p-8 rounded-3xl shadow-premium relative overflow-hidden text-slate-800 flex flex-col items-center border-4 border-white/85">
752                        <div class="absolute top-0 right-0 bg-brand-bubblegum text-white text-xs font-black px-5 py-2 rounded-bl-2xl uppercase tracking-wider animate-bounce">
753                            New Event!
754                        </div>
755                        <div class="w-16 h-16 bg-brand-sky/15 text-brand-sky rounded-2xl flex items-center justify-center text-3xl mb-3 shadow-inner">
756                            <i class="fa-solid fa-address-card"></i>
757                        </div>
758                        <h3 class="font-black text-2xl mb-1 text-center text-indigo-900">Register For The Healing Streams</h3>
759                        <p class="text-xs text-slate-500 mb-6 text-center font-bold">Fill the virtual stream tank & secure a kid's spot!</p>
760                        
761                        <div class="w-full space-y-4">
762                           <button   onclick="openRegistrationModal()" 
763                                class="w-full py-4 bg-gradient-to-r from-brand-sky to-brand-purple text-white font-black rounded-2xl shadow-3d-sky active:translate-y-1 hover:opacity-95 transition-all flex items-center justify-center gap-2 border-b-2 border-sky-800">
764                                <i class="fa-solid fa-sparkles text-brand-banana animate-spin"></i>
765                                Claim Free Digital Seat
766                            </button>
767                        </div>
768                    </div>
769                </div>
770
771            </div>
772        </div>
773    </section>
774
775    
776
777    <!-- Interactive About Us & Core Pillars Section -->
778    <section id="about" class="py-24 bg-white relative overflow-hidden">
779        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
780            <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
781                
782                <!-- Left Visual Polaroid Container -->
783                <div class="lg:col-span-5 relative flex justify-center">
784                    <div class="relative p-6 bg-slate-50 rounded-[2.5rem] border-4 border-slate-100 shadow-premium group max-w-md w-full kids-card-tilt">
785                        <div class="absolute -top-6 -left-6 bg-brand-banana text-white text-3xl p-4 rounded-2xl shadow-lg transform -rotate-12">
786                            ✨
787                        </div>
788                        <div class="absolute -bottom-6 -right-6 bg-brand-bubblegum text-white text-3xl p-4 rounded-2xl shadow-lg transform rotate-12">
789                            🙏
790                        </div>
791                        <div class="relative overflow-hidden rounded-[1.8rem] border-4 border-white bg-indigo-900 shadow-inner">
792                            <img src="https://healingstreams.org/kids/assets/img/about/thumb-3-1.jpg" 
793                                 alt="About Healing Streams Kids" 
794                                 class="w-full object-cover aspect-[4/3] group-hover:scale-105 transition-transform duration-500"
795                                 onerror="this.src='https://placehold.co/400x300/1e1b4b/ffffff?text=Healing+Streams+Kids'">
796                        </div>
797                        <div class="text-center pt-6 pb-2">
798                            <p class="font-black text-xl text-indigo-950">Spreading Healing & Divine Faith</p>
799                            <span class="text-xs text-brand-purple font-black uppercase tracking-widest block mt-1">HSLHS Children Missions</span>
800                        </div>
801                    </div>
802                </div>
803
804                <!-- Right Mission content -->
805                <div class="lg:col-span-7 space-y-6">
806                    <span class="px-5 py-2 rounded-full bg-brand-purple/10 text-brand-purple font-black text-xs uppercase tracking-widest inline-block border border-brand-purple/20">Our Noble Mission</span>
807                    <h3 class="text-4xl sm:text-5xl font-black text-slate-900 tracking-tight leading-none">
808                        Reaching & Impacting <span class="text-brand-sky">Billions of Children</span> Globally
809                    </h3>
810                    <p class="text-slate-600 font-semibold text-lg leading-relaxed">
811                        HSLHS for Kids is designed to reach every child in the world with God's healing power. Healing Streams is the largest platform in the world for the preaching of the Gospel, reaching and transforming billions of young minds and lives under the divine guidance of Pastor Chris.
812                    </p>
813
814                    <!-- Interactive Pillar Tabs -->
815                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-4">
816                        <div class="p-5 rounded-2xl bg-indigo-50/50 border-2 border-slate-100 hover:border-brand-sky transition-all flex items-start gap-4">
817                            <div class="w-12 h-12 rounded-xl bg-brand-sky/10 text-brand-sky flex items-center justify-center text-xl shrink-0 shadow-sm">
818                                <i class="fa-solid fa-heart-pulse"></i>
819                            </div>
820                            <div>
821                                <h5 class="font-black text-indigo-950 text-base leading-tight">Divine Healing</h5>
822                                <p class="text-xs text-slate-500 font-bold mt-1">Supernatural deliverance and perfect health for children.</p>
823                            </div>
824                        </div>
825
826                        <div class="p-5 rounded-2xl bg-indigo-50/50 border-2 border-slate-100 hover:border-brand-emerald transition-all flex items-start gap-4">
827                            <div class="w-12 h-12 rounded-xl bg-brand-emerald/10 text-brand-emerald flex items-center justify-center text-xl shrink-0 shadow-sm">
828                                <i class="fa-solid fa-bible"></i>
829                            </div>
830                            <div>
831                                <h5 class="font-black text-indigo-950 text-base leading-tight">Faith Foundations</h5>
832                                <p class="text-xs text-slate-500 font-bold mt-1">Teaching deep bible truths via animated kid-friendly literature.</p>
833                            </div>
834                        </div>
835
836                        <div class="p-5 rounded-2xl bg-indigo-50/50 border-2 border-slate-100 hover:border-brand-banana transition-all flex items-start gap-4">
837                            <div class="w-12 h-12 rounded-xl bg-brand-banana/10 text-brand-amber flex items-center justify-center text-xl shrink-0 shadow-sm">
838                                <i class="fa-solid fa-earth-americas"></i>
839                            </div>
840                            <div>
841                                <h5 class="font-black text-indigo-950 text-base leading-tight">Global Translation</h5>
842                                <p class="text-xs text-slate-500 font-bold mt-1">Providing faith platforms in 100+ native spoken languages.</p>
843                            </div>
844                        </div>
845
846                        <div class="p-5 rounded-2xl bg-indigo-50/50 border-2 border-slate-100 hover:border-brand-bubblegum transition-all flex items-start gap-4">
847                            <div class="w-12 h-12 rounded-xl bg-brand-bubblegum/10 text-brand-bubblegum flex items-center justify-center text-xl shrink-0 shadow-sm">
848                                <i class="fa-solid fa-hand-holding-dollar"></i>
849                            </div>
850                            <div>
851                                <h5 class="font-black text-indigo-950 text-base leading-tight">Partner Sponsorship</h5>
852                                <p class="text-xs text-slate-500 font-bold mt-1">Facilitating direct, robust channel routes for distribution.</p>
853                            </div>
854                        </div>
855                    </div>
856                </div>
857
858            </div>
859        </div>
860    </section>
861
862   <!-- Live Arena & Streaming Interactive Panel -->
863    <section id="tv" class="py-24 bg-slate-50 relative">
864        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
865            <div class="text-center max-w-3xl mx-auto mb-16">
866                <span class="px-5 py-2 rounded-full bg-brand-bubblegum/10 text-brand-bubblegum font-black text-xs uppercase tracking-widest inline-block mb-3 border border-brand-bubblegum/20">🌟 LIVE NOW</span>
867                <h3 class="text-4xl sm:text-5xl font-black text-slate-900 tracking-tight">HSLHS Kids Live TV</h3>
868                <p class="text-slate-600 mt-2 font-semibold">Watch live healing streams, praise animations, and engage with kids worldwide in real-time!</p>
869            </div>
870
871            <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
872                
873                <!-- Main Video Player -->
874                <div class="lg:col-span-8">
875                    <div class="relative bg-slate-950 rounded-[2.5rem] overflow-hidden shadow-2xl border-8 border-slate-900" id="videoWrapper">
876                        
877                        <div class="relative aspect-video bg-black">
878                            <video id="liveTvPlayer" class="w-full h-full" controls autoplay playsinline muted></video>
879                            
880                            <!-- Live Badge -->
881                            <div class="absolute top-4 left-4 bg-red-600 text-white text-xs font-black px-4 py-1.5 rounded-full flex items-center gap-2 shadow-lg z-20">
882                                <span class="relative flex h-3 w-3">
883                                    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-white opacity-75"></span>
884                                    <span class="relative inline-flex rounded-full h-3 w-3 bg-white"></span>
885                                </span>
886                                LIVE
887                            </div>
888
889                            <!-- Stream Status -->
890                            <div id="streamStatus" class="absolute top-4 right-4 z-30 bg-black/70 text-white text-xs px-3 py-1.5 rounded-2xl hidden">
891                                <span id="statusText"></span>
892                            </div>
893
894                            <!-- Floating Kids Elements -->
895                            <div class="absolute bottom-6 right-6 flex gap-3 text-3xl opacity-80 pointer-events-none z-10">
896                                <div class="animate-bounce">🎈</div>
897                                <div class="animate-bounce delay-300">🧸</div>
898                                <div class="animate-bounce delay-700">🌈</div>
899                            </div>
900                        </div>
901
902                        <!-- Program Info -->
903                        <div class="bg-white p-6 rounded-b-[2.5rem]">
904                            <div class="flex items-start justify-between">
905                                <div>
906                                    <h4 class="font-black text-xl text-slate-900">HSLHS Kids</h4>
907                                </div>
908                                <div class="text-right">
909                                    <div class="flex items-center gap-2 text-sm font-semibold text-slate-500">
910                                        <i class="fa-solid fa-eye text-brand-sky"></i>
911                                        <span id="viewer-count">142,583</span> watching
912                                    </div>
913                                </div>
914                            </div>
915                        </div>
916                    </div>
917                </div>
918
919                <!-- Live Chat Sidebar -->
920                <div class="lg:col-span-4">
921                    <div id="chatWrapper" class="bg-indigo-950 text-white rounded-[2.5rem] shadow-2xl border-4 border-slate-900 flex flex-col overflow-hidden">
922                        
923                        <!-- Chat Header -->
924                        <div class="flex items-center justify-between px-6 pt-6 pb-4 border-b border-indigo-800 flex-shrink-0">
925                            <div class="flex items-center gap-3">
926                                <i class="fa-solid fa-comment-dots text-brand-sky"></i>
927                                <h4 class="font-black text-lg">Kids Chat Room</h4>
928                            </div>
929                            <span class="text-xs bg-indigo-900 px-3 py-1 rounded-full font-mono" id="totalWatchers">142K online</span>
930                        </div>
931                        
932                        <!-- Scrollable Chat Area -->
933                        <div id="chatContainer" 
934                            class="flex-1 overflow-y-auto p-6 space-y-4 text-sm custom-chat-scroll">
935                            <!-- Messages will be added here by JS -->
936                        </div>
937
938                        <!-- Chat Input -->
939                        <div class="p-6 pt-4 border-t border-indigo-800 flex-shrink-0">
940                            <div class="flex gap-2">
941                                <input id="chatInput" 
942                                    type="text" 
943                                    placeholder="Type something nice..." 
944                                    class="flex-1 bg-indigo-900 border border-indigo-700 rounded-2xl px-5 py-3.5 text-sm focus:outline-none focus:border-brand-sky"
945                                    onkeypress="if(event.key === 'Enter') postUserMessage()">
946                                <button onclick="postUserMessage()" 
947                                        class="px-6 bg-brand-sky hover:bg-sky-600 rounded-2xl font-black transition-all">
948                                    <i class="fa-solid fa-paper-plane"></i>
949                                </button>
950                            </div>
951                        </div>
952                    </div>
953                </div>
954            </div>
955        </div>
956    </section>
957
958    
958<script>
959    // Dynamic Height Matching for Chat
960    function syncChatHeight() {
961        const videoWrapper = document.getElementById('videoWrapper');
962        const chatWrapper = document.getElementById('chatWrapper');
963        
964        if (videoWrapper && chatWrapper) {
965            const videoHeight = videoWrapper.offsetHeight;
966            chatWrapper.style.height = `${videoHeight}px`;
967        }
968    }
969
970    window.addEventListener('load', () => {
971        syncChatHeight();
972        setTimeout(syncChatHeight, 800);
973    });
974
975    window.addEventListener('resize', () => {
976        syncChatHeight();
977    });
978
979    document.getElementById('liveTvPlayer').addEventListener('loadedmetadata', () => {
980        setTimeout(syncChatHeight, 300);
981    });
982    </script>
982
983
984    <!-- Gamified Giving Flow: Faith Garden Sowing Interactive Game -->
985    <section id="garden" class="py-24 bg-gradient-to-b from-indigo-50/20 to-white relative">
986        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
987            <div class="text-center max-w-3xl mx-auto mb-16">
988                <span class="px-5 py-2 rounded-full bg-brand-emerald/10 text-brand-emerald font-black text-xs uppercase tracking-widest inline-block mb-3 border border-brand-emerald/20">This Is Exciting </span>
989                <h3 class="text-4xl sm:text-5xl font-black text-slate-900 tracking-tight">5Ps: ENJOY THE FUN </h3>
990                <p class="text-slate-600 mt-2 font-semibold text-red">Be involved in Prayers, Giving, Personal Evanglism, Tell Someone About Healing Streams, Setup A Healing Center </p>
991            </div>
992
993            <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 items-center">
994                
995                <!-- Sowing Controller -->
996                <div class="lg:col-span-6 space-y-6">
997                    <div class="bg-white p-8 rounded-[2.5rem] shadow-premium border-4 border-brand-emerald/10 space-y-6">
998                        <h4 class="font-black text-2xl text-indigo-950 flex items-center gap-2">
999                            <i class="fa-solid fa-seedling text-brand-emerald animate-[breathe_2.5s_ease-in-out_infinite]"></i>Time To Create Your 5P(s)
1000                        </h4>
1001                        
1002                        <!-- Seed Category Grid Selector - Made wider with better text -->
1003                        <div class="grid grid-cols-2 gap-4">
1004                            <button onclick="selectSeedType('Love', '#f43f5e')" id="seed-Love" class="seed-selector p-4 rounded-2xl border-4 border-slate-100 hover:border-brand-bubblegum transition-all text-left bg-slate-50/80 shadow-sm flex flex-col items-center">
1005                                <span class="block text-3xl mb-2 animate-[breathe_2.5s_ease-in-out_infinite]">🙏</span>
1006                                <a href="https://prayerclouds.org/app/signin.php"><div class="text-center w-full">
1007                                     <span class="font-black text-slate-800 text-base block animate-bounce">CLICK ME TO PRAY   ⭐</span>
1008                                   <span class="text-xs text-slate-500 font-bold block">Prayer Cloud </span>
1009                                </div></a>
1010                            </button>
1011                            <button onclick="selectSeedType('Healing', '#0ea5e9')" id="seed-Healing" class="seed-selector p-4 rounded-2xl border-4 border-brand-sky transition-all text-left bg-brand-sky/5 shadow-sm flex flex-col items-center">
1012                                <span class="block text-3xl mb-2 animate-[breathe_2.5s_ease-in-out_infinite]"> 🎡 </span>
1013                                <a href="https://herald.healingstreams.tv/"><div class="text-center w-full">
1014                                     <span class="font-black text-slate-800 text-base block animate-[breathe_2.5s_ease-in-out_infinite]">CREATE A FUN CENTER</span>
1015
1016
1017                                    <span class="text-xs text-slate-500 font-bold block">Healing Center</span>
1018                                </div></a>
1019                            </button>
1020                            <button onclick="selectSeedType('Joy', '#f59e0b')" id="seed-Joy" class="seed-selector p-4 rounded-2xl border-4 border-slate-100 hover:border-brand-banana transition-all text-left bg-slate-50/80 shadow-sm flex flex-col items-center">
1021                                <span class="block text-3xl mb-2 animate-wiggle"> 🔔  </span>
1022                                <a href="https://herald.healingstreams.tv/"><div class="text-center w-full">
1023                                    <span class="font-black text-slate-800 text-base block animate-[scale-pulse_2s_ease-in-out_infinite]">INVITE YOUR FRIENDS</span>
1024                                    <span class="text-xs text-slate-500 font-bold block">Publicity</span>
1025                                </div></a>
1026                            </button>
1027                            <button onclick="selectSeedType('Faith', '#8b5cf6')" id="seed-Faith" class="seed-selector p-4 rounded-2xl border-4 border-slate-100 hover:border-brand-purple transition-all text-left bg-slate-50/80 shadow-sm flex flex-col items-center">
1028                                <span class="block text-3xl mb-2">📢</span>
1029                                 <a href="https://herald.healingstreams.tv/"><div class="text-center w-full">
1030                                    <span class="font-black text-slate-800 text-base block animate-wiggle">WIN SOULS FOR JESUS</span>
1031                                    <span class="text-xs text-slate-500 font-bold block">Personal Evangelism</span>
1032                                </div></a>
1033                            </button>
1034                        </div>
1035
1036                        <!-- Slide Value Controller - Made wider -->
1037                        <div class="space-y-3 bg-slate-50 p-6 rounded-2xl shadow-inner border border-slate-100">
1038                            <div class="flex justify-between font-black text-sm text-slate-600">
1039                                <span>Choose Sponsorship Seed:</span>
1040                                <span id="sowAmountText" class="text-brand-emerald text-2xl font-black">$25</span>
1041                            </div>
1042                            <input id="sowSlider" type="range" min="5" max="250" value="25" oninput="updateSowAmount(this.value)" class="w-full accent-brand-emerald h-3 bg-slate-200 rounded-lg cursor-pointer">
1043                            <div class="flex justify-between text-xs text-slate-400 font-bold">
1044                                <span>$0.30 (Seeds 1 Child)</span>
1045                                <span>$250 (Seeds 833 Children)</span>
1046                            </div>
1047                        </div>
1048
1049                        <!-- Impact Visualizer - Made wider -->
1050                        <div class="p-5 rounded-3xl bg-brand-emerald/5 border-2 border-brand-emerald/15 flex items-center gap-4">
1051                            <div class="w-14 h-14 rounded-2xl bg-brand-emerald text-white flex items-center justify-center text-2xl shadow-premium border-b-2 border-emerald-700 flex-shrink-0">
1052                                <i class="fa-solid fa-users text-stroke"></i>
1053                            </div>
1054                            <div class="flex-1">
1055                                <p class="text-base font-black text-slate-800 leading-tight">Your Seed reaches <span id="childrenReachedCount" class="text-brand-emerald">5</span> Children!</p>
1056                                <p class="text-xs text-slate-500 font-semibold mt-1">Instantly plants healing literature with active distribution trackers.</p>
1057                            </div>
1058                        </div>
1059
1060                        <!-- Sow CTA - Made smaller -->
1061                        <button onclick="openSponsorshipModal('starter', parseInt(document.getElementById('sowSlider').value), 0);
1061 simulatePlanting();" class="w-full py-3 bg-brand-emerald hover:bg-emerald-600 text-white font-black text-lg rounded-2xl shadow-3d-emerald active:translate-y-1 hover:shadow-none hover:translate-y-1 transition-all flex items-center justify-center gap-3 border-b-2 border-emerald-800">
1062                            <i class="fa-solid fa-seedling text-xl animate-spin"></i> SOW MIRACLE SEED NOW
1063                        </button>
1064                    </div>
1065                </div>
1066
1067                <!-- Live Virtual Garden Preview -->
1068                <div class="lg:col-span-6">
1069                    <div class="glass-panel p-8 rounded-[2.5rem] shadow-premium relative overflow-hidden flex flex-col items-center justify-center text-center border-4 border-brand-emerald/20 bg-emerald-50/20 min-h-[480px]">
1070                        
1071                        <!-- Dynamic Visual Tree -->
1072                        <div class="relative w-72 h-72 mb-6 flex items-end justify-center">
1073                            <div class="absolute inset-0 flex justify-center items-center opacity-10">
1074                                <i class="fa-solid fa-cloud text-[140px] text-brand-sky animate-pulse"></i>
1075                            </div>
1076                            
1077                            <div class="absolute bottom-0 w-40 h-8 bg-amber-900 rounded-full border-b-4 border-amber-950 z-10 shadow-lg"></div>
1078                            
1079                            <div id="virtualPlant" class="relative z-20 flex flex-col items-center origin-bottom transition-all duration-1000 transform scale-50">
1080                                <div id="plantFlower" class="w-24 h-24 bg-brand-sky rounded-full border-4 border-white shadow-premium flex items-center justify-center text-4xl transition-all duration-500 hover:rotate-12">
1081                                    💧
1082                                </div>
1083                                <div class="w-4 h-32 bg-brand-emerald border-2 border-emerald-600 rounded-full flex justify-center relative shadow-inner">
1084                                    <div class="absolute top-10 -left-8 w-8 h-5 bg-brand-emerald rounded-full transform -rotate-45 border-2 border-emerald-600 shadow-sm"></div>
1085                                    <div class="absolute top-14 -right-8 w-8 h-5 bg-brand-emerald rounded-full transform rotate-45 border-2 border-emerald-600 shadow-sm"></div>
1086                                </div>
1087                            </div>
1088                        </div>
1089
1090                        <div class="space-y-2 relative z-35 bg-white p-5 rounded-2xl shadow-premium border border-slate-100 w-full max-w-sm">
1091                            <h5 id="gardenStatusTitle" class="font-black text-brand-emerald text-lg">Your Garden is Waiting!</h5>
1092                            <p id="gardenStatusDesc" class="text-xs text-slate-500 font-bold">Pick a seed type, adjust slider, and press "SOW MIRACLE SEED NOW" to watch faith grow instantly!</p>
1093                        </div>
1094                    </div>
1095                </div>
1096
1097            </div>
1098        </div>
1099    </section>
1100
1101    <!-- Kiddies Herald & Faith Literature Marketplace -->
1102    <section id="magazine" class="py-24 bg-slate-50">
1103        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
1104            <div class="text-center max-w-3xl mx-auto mb-16">
1105                <span class="px-5 py-2 rounded-full bg-brand-banana/10 text-brand-amber font-black text-xs uppercase tracking-widest inline-block mb-3 border border-brand-banana/20">Sponsor the Kids HTTN magazine</span>
1106                <h3 class="text-4xl sm:text-5xl font-black text-slate-900 tracking-tight">Healing To The Nations Magazine For Kids</h3>
1107                <p class="text-slate-600 mt-2 font-semibold">Equipping young minds worldwide with divine tools of healing, courage, faith, and incredible Bible-oriented kids adventures.</p>
1108            </div>
1109
1110            <!-- Magazine Sponsorship Cards -->
1111            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 items-stretch">
1112                
1113                <!-- Package 1 - Starter -->
1114                <div class="bg-white rounded-[2rem] overflow-hidden shadow-premium hover:shadow-2xl transition-all border-4 border-slate-200/60 hover:border-brand-sky flex flex-col justify-between group transform hover:-translate-y-2">
1115                    <div class="p-6">
1116                        <div class="relative rounded-2xl overflow-hidden aspect-[4/5] bg-sky-50 flex items-center justify-center border border-sky-100/55 mb-4 shadow-inner magazine-3d">
1117                            <div class="w-32 h-44 bg-white rounded-2xl shadow-premium transform group-hover:rotate-6 transition-all duration-300 flex flex-col justify-between overflow-hidden border-2 border-slate-100/80 relative">
1118                                <img src="https://hsch.ceflixcdn.com/magazine/images/Capture.PNG" 
1119                                    alt="Kids Herald cover" 
1120                                    class="absolute inset-0 w-full h-full object-cover"
1121                                    onerror="this.src='https://placehold.co/160x208/0ea5e9/ffffff?text=Kiddies+Herald'">
1122                                <div class="absolute top-2 right-2 bg-brand-banana/90 text-white font-extrabold text-[8px] px-2 py-0.5 rounded-full uppercase tracking-widest z-10">
1123                                    New Edition
1124                                </div>
1125                            </div>
1126                        </div>
1127                        <span class="px-3 py-1 bg-brand-sky/10 text-brand-sky font-black text-[10px] rounded-full uppercase tracking-wider">Starter Sower</span>
1128                        <h4 class="text-xl font-black mt-2 text-indigo-950">Sponsor 33 Copies</h4>
1129                        <p class="text-slate-500 text-xs mt-1.5 font-bold leading-relaxed">Deliver the Healing message directly to a classroom of young, excited hearts looking for hope.</p>
1130                    </div>
1131                    <div class="p-6 bg-slate-50 border-t border-slate-100 flex items-center justify-between">
1132                        <div>
1133                            <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest block">Total Cost</span>
1134                            <span class="text-2xl font-black text-slate-800">$10</span>
1135                        </div>
1136                        <button onclick="openSponsorshipModal('starter', 10, 33)" 
1137                                class="px-4 py-2.5 bg-brand-sky hover:bg-brand-ocean text-white font-black rounded-xl shadow-3d-sky hover:shadow-none hover:translate-y-1 transition-all text-xs border-b-2 border-sky-800">
1138                            Sponsor Package
1139                        </button>
1140                    </div>
1141                </div>
1142
1143                <!-- Package 2 - Standard (Most Popular) -->
1144                <div class="bg-white rounded-[2rem] overflow-hidden shadow-premium hover:shadow-2xl transition-all border-4 border-brand-purple/70 flex flex-col justify-between group transform hover:-translate-y-2 relative">
1145                    <div class="absolute top-3 right-3 bg-brand-purple text-white font-black text-[8px] px-3 py-1 rounded-full uppercase tracking-widest animate-pulse shadow-md z-10">
1146                        Most Popular
1147                    </div>
1148                    <div class="p-6">
1149                        <div class="relative rounded-2xl overflow-hidden aspect-[4/5] bg-purple-50 flex items-center justify-center border border-purple-100 mb-4 shadow-inner magazine-3d">
1150                            <div class="w-32 h-44 bg-white rounded-2xl shadow-premium transform group-hover:-rotate-6 transition-all duration-300 flex flex-col justify-between overflow-hidden border-2 border-slate-100/80 relative">
1151                                <img src="https://hsch.ceflixcdn.com/magazine/images/Capture.PNG" 
1152                                    alt="Kids Herald cover" 
1153                                    class="absolute inset-0 w-full h-full object-cover"
1154                                    onerror="this.src='https://placehold.co/160x208/0ea5e9/ffffff?text=Kiddies+Herald'">
1155                                <div class="absolute top-2 left-2 bg-brand-purple/90 text-white font-extrabold text-[8px] px-2 py-0.5 rounded-full uppercase tracking-widest z-10">
1156                                    Hot Pick
1157                                </div>
1158                            </div>
1159                        </div>
1160                        <span class="px-3 py-1 bg-brand-purple/10 text-brand-purple font-black text-[10px] rounded-full uppercase tracking-wider">Faith Partner</span>
1161                        <h4 class="text-xl font-black mt-2 text-indigo-950">Sponsor 167 Copies</h4>
1162                        <p class="text-slate-500 text-xs mt-1.5 font-bold leading-relaxed">Reach orphans, pediatric wards, and rural centers with printed color illustrations and kids comic books.</p>
1163                    </div>
1164                    <div class="p-6 bg-slate-50 border-t border-slate-100 flex items-center justify-between">
1165                        <div>
1166                            <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest block">Total Cost</span>
1167                            <span class="text-2xl font-black text-slate-800">$50</span>
1168                        </div>
1169                        <button onclick="openSponsorshipModal('faith', 50, 167)" 
1170                                class="px-4 py-2.5 bg-brand-purple hover:bg-violet-600 text-white font-black rounded-xl shadow-3d-purple hover:shadow-none hover:translate-y-1 transition-all text-xs border-b-2 border-indigo-700">
1171                            Sponsor Package
1172                        </button>
1173                    </div>
1174                </div>
1175
1176                <!-- Package 3 - Classic -->
1177                <div class="bg-white rounded-[2rem] overflow-hidden shadow-premium hover:shadow-2xl transition-all border-4 border-slate-200/60 hover:border-brand-banana flex flex-col justify-between group transform hover:-translate-y-2">
1178                    <div class="p-6">
1179                        <div class="relative rounded-2xl overflow-hidden aspect-[4/5] bg-amber-50 flex items-center justify-center border border-amber-100 mb-4 shadow-inner magazine-3d">
1180                            <div class="w-32 h-44 bg-white rounded-2xl shadow-premium transform group-hover:rotate-12 transition-all duration-300 flex flex-col justify-between overflow-hidden border-2 border-slate-100/80 relative">
1181                                <img src="https://hsch.ceflixcdn.com/magazine/images/Capture.PNG" 
1182                                    alt="Kids Herald cover" 
1183                                    class="absolute inset-0 w-full h-full object-cover"
1184                                    onerror="this.src='https://placehold.co/160x208/0ea5e9/ffffff?text=Kiddies+Herald'">
1185                                <div class="absolute bottom-2 right-2 bg-brand-emerald/90 text-white font-extrabold text-[8px] px-2 py-0.5 rounded-full uppercase tracking-widest z-10 animate-bounce">
1186                                    Top Gift
1187                                </div>
1188                            </div>
1189                        </div>
1190                        <span class="px-3 py-1 bg-brand-banana/10 text-brand-amber font-black text-[10px] rounded-full uppercase tracking-wider">Kingdom Champion</span>
1191                        <h4 class="text-xl font-black mt-2 text-indigo-950">Sponsor 833 Copies</h4>
1192                        <p class="text-slate-500 text-xs mt-1.5 font-bold leading-relaxed">Adopt an entire community, village, or mega children stream centers with thousands of books.</p>
1193                    </div>
1194                    <div class="p-6 bg-slate-50 border-t border-slate-100 flex items-center justify-between">
1195                        <div>
1196                            <span class="text-[10px] font-black text-slate-400 uppercase tracking-widest block">Total Cost</span>
1197                            <span class="text-2xl font-black text-slate-800">$250</span>
1198                        </div>
1199                        <button onclick="openSponsorshipModal('kingdom', 250, 833)" 
1200                                class="px-4 py-2.5 bg-brand-banana hover:bg-brand-amber text-white font-black rounded-xl shadow-3d-banana hover:shadow-none hover:translate-y-1 transition-all text-xs border-b-2 border-amber-600">
1201                            Sponsor Package
1202                        </button>
1203                    </div>
1204                </div>
1205            </div>
1206        </div>
1207    </section>
1208
1209    <!-- Miracle Testimonies Slider Panel -->
1210    <section id="testimonies" class="py-24 bg-white">
1211        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
1212            <div class="text-center max-w-3xl mx-auto mb-16">
1213                <span class="px-5 py-2 rounded-full bg-brand-purple/10 text-brand-purple font-black text-xs uppercase tracking-widest inline-block mb-3 border border-brand-purple/20">Miracles Live</span>
1214                <h3 class="text-4xl sm:text-5xl font-black text-slate-900 tracking-tight">Kids Miracle Testimonies</h3>
1215                <p class="text-slate-600 mt-2 font-semibold">Read stunning faith transformations and miracle reports from young boys and girls all across the globe.</p>
1216            </div>
1217
1218            <!-- Custom Interactive Slider UI -->
1219            <div class="relative max-w-4xl mx-auto px-4">
1220                <div id="testimonyTrack" class="overflow-hidden relative rounded-[2.5rem] rainbow-border bg-slate-50 p-8 sm:p-14 shadow-premium min-h-[340px] flex items-center justify-center border-4 border-white/50">
1221                    
1222                    <!-- Testimony Content Slide 1 -->
1223                    <div class="testimony-slide text-center space-y-5 max-w-2xl transition-all duration-500 ease-out">
1224                        <div class="text-6xl animate-bounce">🧒</div>
1225                        <p class="text-xl sm:text-2xl font-extrabold italic text-indigo-950 leading-relaxed">
1226                            "I had chronic asthma and couldn't run with my friends. During the Live Healing Service, Pastor Chris prayed for kids, and I felt a warm breath in my chest. I am completely free now!"
1227                        </p>
1228                        <div>
1229                            <h5 class="font-black text-brand-purple text-lg">Daniel K.</h5>
1230                            <span class="text-xs font-black tracking-widest text-slate-400 uppercase">Toronto, Canada</span>
1231                        </div>
1232                    </div>
1233
1234                    <!-- Testimony Content Slide 2 -->
1235                    <div class="testimony-slide hidden text-center space-y-5 max-w-2xl transition-all duration-500 ease-out">
1236                        <div class="text-6xl animate-bounce">👧</div>
1237                        <p class="text-xl sm:text-2xl font-extrabold italic text-indigo-950 leading-relaxed">
1238                            "My eyes were painful and blurry, making school work very hard. After reading the Kiddies Herald and planting our Seed of Joy, I woke up with clear, bright sight! Praise Jesus!"
1239                        </p>
1240                        <div>
1241                            <h5 class="font-black text-brand-purple text-lg">Gabriella S.</h5>
1242                            <span class="text-xs font-black tracking-widest text-slate-400 uppercase">Johannesburg, South Africa</span>
1243                        </div>
1244                    </div>
1245
1246                    <!-- Testimony Content Slide 3 -->
1247                    <div class="testimony-slide hidden text-center space-y-5 max-w-2xl transition-all duration-500 ease-out">
1248                        <div class="text-6xl animate-bounce">👦</div>
1249                        <p class="text-xl sm:text-2xl font-extrabold italic text-indigo-950 leading-relaxed">
1250                            "I am so happy that my healing center received the mini media kits. Now 40 of my neighbors come to watch HSLHS Kids TV in my backyard. Many are learning to pray!"
1251                        </p>
1252                        <div>
1253                            <h5 class="font-black text-brand-purple text-lg">Musa A.</h5>
1254                            <span class="text-xs font-black tracking-widest text-slate-400 uppercase">Lagos, Nigeria</span>
1255                        </div>
1256                    </div>
1257
1258                </div>
1259
1260                <!-- Navigation Controls -->
1261                <div class="absolute inset-y-0 -left-2 sm:-left-6 flex items-center">
1262                    <button onclick="prevTestimony()" class="w-12 h-12 sm:w-14 sm:h-14 rounded-full bg-white border-2 border-slate-100 shadow-premium hover:bg-slate-50 text-slate-700 flex items-center justify-center transition-all hover:scale-105 active:scale-95">
1263                        <i class="fa-solid fa-chevron-left text-lg"></i>
1264                    </button>
1265                </div>
1266                <div class="absolute inset-y-0 -right-2 sm:-right-6 flex items-center">
1267                    <button onclick="nextTestimony()" class="w-12 h-12 sm:w-14 sm:h-14 rounded-full bg-white border-2 border-slate-100 shadow-premium hover:bg-slate-50 text-slate-700 flex items-center justify-center transition-all hover:scale-105 active:scale-95">
1268                        <i class="fa-solid fa-chevron-right text-lg"></i>
1269                    </button>
1270                </div>
1271            </div>
1272        </div>
1273    </section>
1274
1275    <!-- Super Fun Faith Quiz / Kid's Interaction Segment -->
1276    <!-- <section class="py-24 bg-indigo-50/30">
1277        <div class="max-w-4xl mx-auto px-4 sm:px-6">
1278            <div class="bg-gradient-to-tr from-brand-sky via-brand-purple to-brand-bubblegum p-8 sm:p-14 rounded-[3rem] shadow-premium text-white text-center relative overflow-hidden border-4 border-white/40">
1279                <div class="absolute -top-10 -left-10 text-9xl opacity-10">📖</div>
1280                <div class="absolute -bottom-10 -right-10 text-9xl opacity-10">🧠</div>
1281                
1282                <span class="px-5 py-2 rounded-full bg-white/20 text-white font-black text-xs uppercase tracking-wider inline-block mb-3 border border-white/25">Daily Miracle Verse Game</span>
1283                <h3 class="text-3xl sm:text-5xl font-black mb-8 drop-shadow">Complete the Bible Verse!</h3>
1284                
1285               
1286                <div id="quizContainer" class="space-y-6 max-w-lg mx-auto bg-white/10 p-8 rounded-3xl backdrop-blur-md border border-white/20 text-left shadow-premium">
1287                    <p class="font-extrabold text-xl sm:text-2xl text-center leading-relaxed">"I can do all things through _________ who strengthens me."</p>
1288                    <p class="text-center text-sm text-brand-banana font-black tracking-widest uppercase">Philippians 4:13</p>
1289                    
1290                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-4">
1291                        <button onclick="checkQuizAnswer(false)" class="p-4 bg-white/10 hover:bg-white/25 text-white font-extrabold rounded-2xl transition-all text-sm text-left border border-white/10 flex items-center gap-2">
1292                            <span>❌</span> A) My Own Strength
1293                        </button>
1294                        <button onclick="checkQuizAnswer(true)" class="p-4 bg-white/10 hover:bg-white/25 text-white font-extrabold rounded-2xl transition-all text-sm text-left border border-white/10 flex items-center gap-2">
1295                            <span>✨</span> B) Christ
1296                        </button>
1297                        <button onclick="checkQuizAnswer(false)" class="p-4 bg-white/10 hover:bg-white/25 text-white font-extrabold rounded-2xl transition-all text-sm text-left border border-white/10 flex items-center gap-2">
1298                            <span>🚀</span> C) Superheroes
1299                        </button>
1300                        <button onclick="checkQuizAnswer(false)" class="p-4 bg-white/10 hover:bg-white/25 text-white font-extrabold rounded-2xl transition-all text-sm text-left border border-white/10 flex items-center gap-2">
1301                            <span>🎈</span> D) Big Balloons
1302                        </button>
1303                    </div>
1304                </div>
1305            </div>
1306        </div>
1307    </section> -->
1308
1309
1310
1311
1312                <!-- Bible Quiz & Activities Section -->
1313            <section id="bible-activities" class="py-24 bg-indigo-50/30">
1314                <div class="max-w-6xl mx-auto px-4 sm:px-6">
1315                    <div class="text-center max-w-3xl mx-auto mb-16">
1316                        <span class="px-5 py-2 rounded-full bg-brand-purple/10 text-brand-purple font-black text-xs uppercase tracking-widest inline-block mb-3 border border-brand-purple/20">
1317                            <i class="fa-solid fa-bible mr-2"></i> Fun Learning
1318                        </span>
1319                        <h3 class="text-4xl sm:text-5xl font-black text-slate-900 tracking-tight">
1320                            Kids Bible Activities
1321                        </h3>
1322                        <p class="text-slate-600 mt-2 font-semibold">
1323                            Learn God's word through fun games, quizzes, and interactive activities!
1324                        </p>
1325                    </div>
1326
1327                    <!-- Two Big Beautiful Buttons -->
1328                    <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
1329                        
1330                        <!-- Button 1: Bible Quiz -->
1331                        <div class="group relative">
1332                            <div class="absolute -inset-1 bg-gradient-to-r from-brand-sky via-brand-purple to-brand-bubblegum rounded-3xl blur opacity-30 group-hover:opacity-70 transition duration-500"></div>
1333                            <button onclick="openQuizModal()" 
1334                                    class="relative w-full bg-white hover:bg-slate-50 p-8 rounded-3xl shadow-premium border-4 border-white/50 hover:border-brand-sky transition-all transform hover:-translate-y-2 hover:shadow-2xl flex flex-col items-center text-center">
1335                                <div class="w-24 h-24 rounded-full bg-gradient-to-br from-brand-sky to-brand-purple flex items-center justify-center text-5xl shadow-lg mb-6 animate-float-slow group-hover:animate-bounce">
1336                                    📖
1337                                </div>
1338                                <h4 class="text-2xl font-black text-slate-900 group-hover:text-brand-sky transition-colors">
1339                                    Bible Quiz Challenge
1340                                </h4>
1341                                <p class="text-slate-500 font-semibold mt-2 text-sm max-w-xs">
1342                                    Test your Bible knowledge with fun questions and learn amazing truths from God's Word!
1343                                </p>
1344                                <div class="mt-4 flex items-center gap-2 text-brand-sky font-bold text-sm">
1345                                    <span>Start Quiz</span>
1346                                    <i class="fa-solid fa-arrow-right group-hover:translate-x-2 transition-transform"></i>
1347                                </div>
1348                                <div class="absolute top-4 right-4">
1349                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-black bg-brand-emerald/10 text-brand-emerald border border-brand-emerald/20">
1350                                        <i class="fa-solid fa-star mr-1 text-brand-banana"></i> 15 Questions
1351                                    </span>
1352                                </div>
1353                            </button>
1354                        </div>
1355
1356                        <!-- Button 2: Bible Coloring Game -->
1357                        <div class="group relative">
1358                            <div class="absolute -inset-1 bg-gradient-to-r from-brand-emerald via-brand-banana to-brand-coral rounded-3xl blur opacity-30 group-hover:opacity-70 transition duration-500"></div>
1359                            <button onclick="openActivityModal()" 
1360                                    class="relative w-full bg-white hover:bg-slate-50 p-8 rounded-3xl shadow-premium border-4 border-white/50 hover:border-brand-emerald transition-all transform hover:-translate-y-2 hover:shadow-2xl flex flex-col items-center text-center">
1361                                <div class="w-24 h-24 rounded-full bg-gradient-to-br from-brand-emerald to-brand-banana flex items-center justify-center text-5xl shadow-lg mb-6 animate-float-medium group-hover:animate-bounce">
1362                                    🎨
1363                                </div>
1364                                <h4 class="text-2xl font-black text-slate-900 group-hover:text-brand-emerald transition-colors">
1365                                    Bible Coloring Game
1366                                </h4>
1367                                <p class="text-slate-500 font-semibold mt-2 text-sm max-w-xs">
1368                                    Color Bible characters and scenes! Learn about David, Noah, Jonah and more!
1369                                </p>
1370                                <div class="mt-4 flex items-center gap-2 text-brand-emerald font-bold text-sm">
1371                                    <span>Start Coloring</span>
1372                                    <i class="fa-solid fa-arrow-right group-hover:translate-x-2 transition-transform"></i>
1373                                </div>
1374                                <div class="absolute top-4 right-4">
1375                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-black bg-brand-purple/10 text-brand-purple border border-brand-purple/20">
1376                                        <i class="fa-solid fa-paintbrush mr-1"></i> 6 Scenes
1377                                    </span>
1378                                </div>
1379                            </button>
1380                        </div>
1381
1382                    </div>
1383                </div>
1384            </section>
1385
1386
1387
1388
1389
1390
1391  <section class="py-12 sm:py-24 bg-indigo-50/30" id="game-section">
1392            <div class="max-w-7xl mx-auto px-3 sm:px-6">
1393                <!-- Header with Fullscreen Button -->
1394                <div class="flex justify-between items-center mb-4 sm:mb-6">
1395                    <h2 class="text-lg sm:text-2xl font-bold text-indigo-900">🎮 HERALD GAMES</h2>
1396                    <button 
1397                        id="fullscreen-btn"
1398                        class="bg-indigo-600 hover:bg-indigo-700 text-white px-3 sm:px-4 py-1.5 sm:py-2 rounded-lg transition-all flex items-center gap-1.5 sm:gap-2 text-sm sm:text-base"
1399                    >
1400                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 sm:h-5 sm:w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
1401                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5" />
1402                        </svg>
1403                        <span class="hidden sm:inline">Fullscreen</span>
1404                        <span class="sm:hidden">⛶</span>
1405                    </button>
1406                </div>
1407
1408                <!-- Iframe Container -->
1409                <div class="bg-white/10 p-2 sm:p-4 rounded-2xl sm:rounded-3xl backdrop-blur-md border border-white/20 shadow-premium" id="iframe-wrapper">
1410                    <iframe 
1411                        id="game-iframe"
1412                        src="https://goherald.org/game/" 
1413                        class="w-full h-[800px] sm:h-[500px] lg:h-[800px] rounded-xl sm:rounded-2xl border-2 border-white/20 transition-all"
1414                        loading="lazy"
1415                        title="Bible Quiz Game"
1416                        sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-modals"
1417                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
1418                    ></iframe>
1419                </div>
1420            </div>
1421        </section>
1422
1423        <style>
1424            /* Fullscreen styles */
1425            #game-section.fullscreen {
1426                position: fixed;
1427                top: 0;
1428                left: 0;
1429                width: 100vw !important;
1430                height: 100vh !important;
1431                z-index: 9999;
1432                padding: 10px;
1433                background: #1a1a2e;
1434                overflow: hidden;
1435            }
1436
1437            #game-section.fullscreen .max-w-7xl {
1438                max-width: 100% !important;
1439                height: 100%;
1440                display: flex;
1441                flex-direction: column;
1442                padding: 0 4px;
1443            }
1444
1445            #game-section.fullscreen #iframe-wrapper {
1446                flex: 1;
1447                padding: 0 !important;
1448                background: transparent !important;
1449                border: none !important;
1450                backdrop-filter: none !important;
1451                border-radius: 0 !important;
1452            }
1453
1454            #game-section.fullscreen #game-iframe {
1455                height: 100% !important;
1456                border: none !important;
1457                border-radius: 8px !important;
1458                min-height: 0 !important;
1459            }
1460
1461            #game-section.fullscreen .flex.justify-between {
1462                margin-bottom: 8px;
1463                padding: 0 4px;
1464            }
1465
1466            #game-section.fullscreen h2 {
1467                color: white;
1468                font-size: 1rem !important;
1469            }
1470
1471            @media (max-width: 480px) {
1472                #game-section.fullscreen {
1473                    padding: 6px;
1474                }
1475                #game-section.fullscreen h2 {
1476                    font-size: 0.9rem !important;
1477                }
1478                #game-section.fullscreen #fullscreen-btn {
1479                    padding: 4px 10px;
1480                    font-size: 0.8rem;
1481                }
1482            }
1483
1484            /* Hide scrollbar in fullscreen */
1485            #game-section.fullscreen::-webkit-scrollbar {
1486                display: none;
1487            }
1488            #game-section.fullscreen {
1489                -ms-overflow-style: none;
1490                scrollbar-width: none;
1491            }
1492
1493            /* Mobile touch optimization */
1494            @media (hover: none) {
1495                #fullscreen-btn {
1496                    -webkit-tap-highlight-color: transparent;
1497                    touch-action: manipulation;
1498                }
1499            }
1500        </style>
1501
1502        
1502<script>
1503        (function() {
1504            'use strict';
1505
1506            // Wait for DOM to be ready
1507            if (document.readyState === 'loading') {
1508                document.addEventListener('DOMContentLoaded', init);
1509            } else {
1510                init();
1511            }
1512
1513            function init() {
1514                const section = document.getElementById('game-section');
1515                const iframe = document.getElementById('game-iframe');
1516                const fullscreenBtn = document.getElementById('fullscreen-btn');
1517                
1518                // Exit if elements don't exist
1519                if (!section || !iframe || !fullscreenBtn) return;
1520
1521                let isFullscreen = false;
1522                let isNativeFullscreen = false;
1523
1524                // Toggle fullscreen function
1525                function toggleFullscreen() {
1526                    isFullscreen = !isFullscreen;
1527                    
1528                    // Toggle CSS class
1529                    section.classList.toggle('fullscreen', isFullscreen);
1530                    
1531                    // Try native fullscreen API if available (only on user gesture)
1532                    if (isFullscreen) {
1533                        tryNativeFullscreen();
1534                    } else {
1535                        exitNativeFullscreen();
1536                    }
1537
1538                    // Update button text
1539                    updateButtonText();
1540                }
1541
1542                // Try native fullscreen API
1543                function tryNativeFullscreen() {
1544                    if (document.documentElement.requestFullscreen) {
1545                        document.documentElement.requestFullscreen()
1546                            .then(() => {
1547                                isNativeFullscreen = true;
1548                            })
1549                            .catch(() => {
1550                                // Native fullscreen failed, but CSS fullscreen is already active
1551                                isNativeFullscreen = false;
1552                            });
1553                    }
1554                }
1555
1556                // Exit native fullscreen
1557                function exitNativeFullscreen() {
1558                    if (document.fullscreenElement) {
1559                        document.exitFullscreen()
1560                            .catch(() => {
1561                                // Silent fail
1562                            });
1563                    }
1564                    isNativeFullscreen = false;
1565                }
1566
1567                // Update button text/icon
1568                function updateButtonText() {
1569                    const span = fullscreenBtn.querySelector('span');
1570                    if (span) {
1571                        span.textContent = isFullscreen ? 'Exit' : 'Fullscreen';
1572                    }
1573                }
1574
1575                // Handle fullscreen button click
1576                fullscreenBtn.addEventListener('click', toggleFullscreen);
1577
1578                // Handle ESC key
1579                document.addEventListener('keydown', function(e) {
1580                    if (e.key === 'Escape' && section.classList.contains('fullscreen')) {
1581                        section.classList.remove('fullscreen');
1582                        isFullscreen = false;
1583                        updateButtonText();
1584                        
1585                        if (document.fullscreenElement) {
1586                            document.exitFullscreen().catch(() => {});
1587                        }
1588                    }
1589                });
1590
1591                // Handle native fullscreen change events
1592                document.addEventListener('fullscreenchange', function() {
1593                    if (!document.fullscreenElement && section.classList.contains('fullscreen')) {
1594                        // User exited via native fullscreen API (browser controls)
1595                        section.classList.remove('fullscreen');
1596                        isFullscreen = false;
1597                        updateButtonText();
1598                    }
1599                });
1600
1601                // Handle orientation changes
1602                if (window.screen && window.screen.orientation) {
1603                    window.screen.orientation.addEventListener('change', function() {
1604                        if (section.classList.contains('fullscreen')) {
1605                            // Small delay for layout to settle
1606                            setTimeout(() => {
1607                                if (iframe.contentWindow && iframe.contentWindow.postMessage) {
1608                                    try {
1609                                        iframe.contentWindow.postMessage('resize', 'https://goherald.org');
1610                                    } catch (e) {
1611                                        // Silent fail for cross-origin
1612                                    }
1613                                }
1614                            }, 300);
1615                        }
1616                    });
1617                }
1618
1619                // Handle iframe load - ensure it's properly sized
1620                iframe.addEventListener('load', function() {
1621                    // Try to send resize message to iframe
1622                    try {
1623                        if (iframe.contentWindow && iframe.contentWindow.postMessage) {
1624                            iframe.contentWindow.postMessage('resize', 'https://goherald.org');
1625                        }
1626                    } catch (e) {
1627                        // Silent fail - cross-origin
1628                    }
1629                });
1630
1631                // Fallback: If iframe fails to load, show error state
1632                iframe.addEventListener('error', function() {
1633                    console.warn('Iframe failed to load: https://goherald.org/game/');
1634                    // Optionally show a fallback message
1635                });
1636
1637                // Mobile double-tap to fullscreen (with error prevention)
1638                let lastTap = 0;
1639                iframe.addEventListener('touchend', function(e) {
1640                    // Prevent default to avoid unwanted zoom
1641                    e.preventDefault();
1642                    
1643                    const currentTime = new Date().getTime();
1644                    const tapLength = currentTime - lastTap;
1645                    
1646                    if (tapLength < 300 && tapLength > 0) {
1647                        // Double tap detected
1648                        if (!section.classList.contains('fullscreen')) {
1649                            toggleFullscreen();
1650                        }
1651                    }
1652                    lastTap = currentTime;
1653                }, { passive: false });
1654
1655                // Prevent context menu on long press (mobile)
1656                iframe.addEventListener('contextmenu', function(e) {
1657                    e.preventDefault();
1658                });
1659
1660                console.log('Game section initialized successfully');
1661            }
1662
1663        })();
1664        </script>
1664
1665
1666
1667
1668
1669
1670
1671      <!-- Global Footer -->
1672<footer class="bg-indigo-950 text-slate-400 py-16 border-t-8 border-brand-banana relative z-10">
1673    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
1674        <!-- Main Footer Grid - 4 columns -->
1675        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
1676            
1677            <!-- Column 1: Brand Info -->
1678            <div class="space-y-4">
1679                <div class="flex items-center">
1680                    <img src="https://hsch.ceflixcdn.com/hsrc/images/hslhs4kids.png" 
1681                         alt="HSLHS for Kids" 
1682                         class="w-full max-w-[180px] h-auto rounded-xl shadow-lg">
1683                </div>
1684                <p class="text-xs leading-relaxed text-slate-400 font-medium">
1685                    HSLHS for Kids is designed to reach every child globally with God's healing power. Operated in partner network with Healing Streams and Pastor Chris.
1686                </p>
1687                
1688                <!-- Contact Info -->
1689                <div class="space-y-2 pt-2">
1690                    <p class="text-xs font-semibold flex items-center gap-2">
1691                        <i class="fa-solid fa-envelope text-brand-sky w-4"></i> [email protected]
1692                    </p>
1693                    <p class="text-xs font-semibold flex items-center gap-2">
1694                        <i class="fa-solid fa-phone text-brand-sky w-4"></i> +234 20 1330 0167
1695                    </p>
1696                    <p class="text-xs font-semibold flex items-center gap-2">
1697                        <i class="fa-solid fa-phone-volume text-brand-purple w-4"></i> +27 799 675 852
1698                    </p>
1699                    <p class="text-xs font-semibold flex items-center gap-2">
1700                        <i class="fa-solid fa-phone-square text-brand-bubblegum w-4"></i> +1 832 724 9390
1701                    </p>
1702                    <a href="https://kingschat.online/user/heverywhere" target="_blank" rel="noopener noreferrer" class="inline-block mt-1">
1703                        <img src="https://herald.social/img/kclogo_white.png" 
1704                             alt="KingChat" 
1705                             class="h-8 w-auto opacity-80 hover:opacity-100 transition-opacity">
1706                    </a>
1707                </div>
1708            </div>
1709
1710            <!-- Column 2: Quick Links -->
1711            <div>
1712                <h5 class="font-black text-white text-sm uppercase tracking-widest mb-4">Quick Links</h5>
1713                <ul class="space-y-2.5 text-xs font-semibold">
1714                    <li><a href="#hero" class="hover:text-white transition-all flex items-center gap-2"><i class="fa-solid fa-house text-brand-sky text-[10px] w-4"></i> Home</a></li>
1715                    <li><a href="#about" class="hover:text-white transition-all flex items-center gap-2"><i class="fa-solid fa-address-card text-brand-purple text-[10px] w-4"></i> About us</a></li>
1716                    <li><a href="#tv" class="hover:text-white transition-all flex items-center gap-2"><i class="fa-solid fa-circle-play text-brand-sky text-[10px] w-4"></i> Live TV Stream</a></li>
1717                    <li><a href="#garden" class="hover:text-white transition-all flex items-center gap-2"><i class="fa-solid fa-seedling text-brand-emerald text-[10px] w-4"></i> Sow Faith Seeds</a></li>
1718                    <li><a href="#magazine" class="hover:text-white transition-all flex items-center gap-2"><i class="fa-solid fa-book-open text-brand-banana text-[10px] w-4"></i> Kiddies Herald Store</a></li>
1719                    <li><a href="#testimonies" class="hover:text-white transition-all flex items-center gap-2"><i class="fa-solid fa-star text-brand-purple text-[10px] w-4"></i> Miracle Hubs</a></li>
1720                </ul>
1721            </div>
1722
1723            <!-- Column 3: Language Hub -->
1724            <div>
1725                <h5 class="font-black text-white text-sm uppercase tracking-widest mb-4">Language Hub</h5>
1726                <div class="relative inline-block w-full">
1727                    <!-- GTranslate: https://gtranslate.io/ -->
1728
1729
1730
1731<style type="text/css">
1732<!--
1733a.gflag {vertical-align:middle;font-size:12px;background-repeat:no-repeat;background-image:url(img/flag.png);}
1734a.gflag img {border:0;}
1735a.gflag:hover {background-image:url(img/flag.png);}
1736#goog-gt-tt {display:none !important;}
1737.goog-te-banner-frame {display:none !important;}
1738.goog-te-menu-value:hover {text-decoration:none !important;}
1739body {top:0 !important;}
1740#google_translate_element2 {display:none!important;}
1741-->
1742</style>
1743
1744<br /><select onchange="doGTranslate(this);" style="width:150px;"><option value="">Translate page</option><option value="en|en">English</option><option value="en|ar">Arabic</option><option value="en|bg">Bulgarian</option><option value="en|zh-CN">Chinese (Simplified)</option><option value="en|zh-TW">Chinese (Traditional)</option><option value="en|hr">Croatian</option><option value="en|cs">Czech</option><option value="en|da">Danish</option><option value="en|nl">Dutch</option><option value="en|fi">Finnish</option><option value="en|fr">French</option><option value="en|de">German</option><option value="en|el">Greek</option><option value="en|hi">Hindi</option><option value="en|it">Italian</option><option value="en|ja">Japanese</option><option value="en|ko">Korean</option><option value="en|no">Norwegian</option><option value="en|pl">Polish</option><option value="en|pt">Portuguese</option><option value="en|ro">Romanian</option><option value="en|ru">Russian</option><option value="en|es">Spanish</option><option value="en|sv">Swedish</option><option value="en|ca">Catalan</option><option value="en|tl">Filipino</option><option value="en|iw">Hebrew</option><option value="en|id">Indonesian</option><option value="en|lv">Latvian</option><option value="en|lt">Lithuanian</option><option value="en|sr">Serbian</option><option value="en|sk">Slovak</option><option value="en|sl">Slovenian</option><option value="en|uk">Ukrainian</option><option value="en|vi">Vietnamese</option><option value="en|sq">Albanian</option><option value="en|et">Estonian</option><option value="en|gl">Galician</option><option value="en|hu">Hungarian</option><option value="en|mt">Maltese</option><option value="en|th">Thai</option><option value="en|tr">Turkish</option><option value="en|fa">Persian</option><option value="en|af">Afrikaans</option><option value="en|ms">Malay</option><option value="en|sw">
1744Swahili</option><option value="en|ga">Irish</option><option value="en|cy">Welsh</option><option value="en|be">Belarusian</option><option value="en|is">Icelandic</option><option value="en|mk">Macedonian</option><option value="en|yi">Yiddish</option><option value="en|hy">Armenian</option><option value="en|az">Azerbaijani</option><option value="en|eu">Basque</option><option value="en|ka">Georgian</option><option value="en|ht">Haitian Creole</option><option value="en|ur">Urdu</option><option value="en|bn">Bengali</option><option value="en|bs">Bosnian</option><option value="en|ceb">Cebuano</option><option value="en|eo">Esperanto</option><option value="en|gu">Gujarati</option><option value="en|ha">Hausa</option><option value="en|hmn">Hmong</option><option value="en|ig">Igbo</option><option value="en|jw">Javanese</option><option value="en|kn">Kannada</option><option value="en|km">Khmer</option><option value="en|lo">Lao</option><option value="en|la">Latin</option><option value="en|mi">Maori</option><option value="en|mr">Marathi</option><option value="en|mn">Mongolian</option><option value="en|ne">Nepali</option><option value="en|pa">Punjabi</option><option value="en|so">Somali</option><option value="en|ta">Tamil</option><option value="en|te">Telugu</option><option value="en|yo">Yoruba</option><option value="en|zu">Zulu</option><option value="en|my">Myanmar (Burmese)</option><option value="en|ny">Chichewa</option><option value="en|kk">Kazakh</option><option value="en|mg">Malagasy</option><option value="en|ml">Malayalam</option><option value="en|si">Sinhala</option><option value="en|st">Sesotho</option><option value="en|su">Sudanese</option><option value="en|tg">Tajik</option><option value="en|uz">Uzbek</option><option value="en|am">Amharic</option><option value="en|co">Corsican</option><option value="en|haw">Hawaiian</option><option value="en|ku">Kurdish (Kurmanji)</option><option value="en|ky">Kyrgyz</option><option value="en|lb">Luxembourgish</option><option value="en|ps">Pashto</option><option value="en|sm">Samoan</option><option value="en|gd">Scottish Gaelic</option><option value="en|sn">Shona</option><option value="en|sd">Sindhi</option><option value="en|fy">Frisian</option><option value="en|xh">Xhosa</option></select>
1745<div id="google_translate_element2"></div>
1746<script type="text/javascript">
1747function googleTranslateElementInit2() {new google.translate.TranslateElement({pageLanguage: 'en',autoDisplay: false}, 'google_translate_element2');}
1748</script>
1748<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit2"></script>
1748
1749
1750
1751<script type="text/javascript">
1752/* <![CDATA[ */
1753eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('6 7(a,b){n{4(2.9){3 c=2.9("o");c.p(b,f,f);a.q(c)}g{3 c=2.r();a.s(\'t\'+b,c)}}u(e){}}6 h(a){4(a.8)a=a.8;4(a==\'\')v;3 b=a.w(\'|\')[1];3 c;3 d=2.x(\'y\');z(3 i=0;i<d.5;i++)4(d[i].A==\'B-C-D\')c=d[i];4(2.j(\'k\')==E||2.j(\'k\').l.5==0||c.5==0||c.l.5==0){F(6(){h(a)},G)}g{c.8=b;7(c,\'m\');7(c,\'m\')}}',43,43,'||document|var|if|length|function|GTranslateFireEvent|value|createEvent||||||true|else|doGTranslate||getElementById|google_translate_element2|innerHTML|change|try|HTMLEvents|initEvent|dispatchEvent|createEventObject|fireEvent|on|catch|return|split|getElementsByTagName|select|for|className|goog|te|combo|null|setTimeout|500'.split('|'),0,{}))
1754/* ]]> */
1755</script>
1755
1756                    <img width="150" src="https://healingstreams.tv/LHS/images/flags.png" alt="Flags" class="mt-2">
1757                </div>
1758                <p class="text-[10px] text-slate-500 mt-2 leading-relaxed font-bold">Translate all streams, subtitles, and virtual cards dynamically!</p>
1759            </div>
1760
1761          
1762           <!-- Column 4: Faith-filled Resources -->
1763            <div>
1764                <h4 class="font-black text-white text-sm uppercase tracking-widest mb-4">Faith-filled resources:</h4>
1765                <div class="grid grid-cols-2 gap-1.5">
1766                    <div class="it-footer-gallery">
1767                        <a href="https://httnmagazine.org/subscribe" target="_blank" rel="noopener noreferrer">
1768                            <img src="https://cdn.neocdn.cloud/i/hstv/1221-x-942-june-2026-7f2386.jpg" 
1769                                alt="Kids Magazine" 
1770                                class="w-full h-12 sm:h-16 object-cover rounded-lg border border-indigo-800 hover:border-brand-sky transition-all duration-300 hover:scale-105">
1771                        </a>
1772                    </div>
1773                    <div class="it-footer-gallery">
1774                        <a href="https://httnmagazine.org/subscribe" target="_blank" rel="noopener noreferrer">
1775                            <img src="https://hsch.ceflixcdn.com/magazine/web/2025/jan25httn-app.png" 
1776                                alt="HTTN App" 
1777                                class="w-full h-12 sm:h-16 object-cover rounded-lg border border-indigo-800 hover:border-brand-sky transition-all duration-300 hover:scale-105">
1778                        </a>
1779                    </div>
1780                    <div class="it-footer-gallery">
1781                        <a href="https://httnmagazine.org/subscribe" target="_blank" rel="noopener noreferrer">
1782                            <img src="https://hsch.ceflixcdn.com/magazine/web/2025/jan25httn-podcast.png" 
1783                                alt="Podcast" 
1784                                class="w-full h-12 sm:h-16 object-cover rounded-lg border border-indigo-800 hover:border-brand-sky transition-all duration-300 hover:scale-105">
1785                        </a>
1786                    </div>
1787                    <div class="it-footer-gallery">
1788                        <a href="https://httnmagazine.org/subscribe" target="_blank" rel="noopener noreferrer">
1789                            <img src="https://hsch.ceflixcdn.com/magazine/web/2025/jan25httnr.png" 
1790                                alt="HTTN Resources" 
1791                                class="w-full h-12 sm:h-16 object-cover rounded-lg border border-indigo-800 hover:border-brand-sky transition-all duration-300 hover:scale-105">
1792                        </a>
1793                    </div>
1794                </div>
1795            </div>
1796        </div>
1797
1798        <!-- Bottom Bar: Copyright -->
1799        <div class="pt-8 border-t border-indigo-900/50 text-center text-xs text-slate-500 font-semibold">
1800            <p>© 2026 Healing Streams Live Healing Services for Kids. All rights reserved.</p>
1801        </div>
1802    </div>
1803</footer>
1804
1805    <!-- SPONSORSHIP DIRECT MODAL -->
1806    <div id="donateModal" class="fixed inset-0 z-50 bg-black/75 backdrop-blur-md hidden flex items-center justify-center p-4">
1807        <div class="bg-white rounded-[2.5rem] shadow-2xl max-w-md w-full overflow-hidden border-4 border-brand-banana relative transform transition-all scale-95 duration-300">
1808            <!-- Modal Header banner -->
1809            <div class="bg-gradient-to-r from-brand-banana to-brand-amber p-8 text-white text-center relative border-b-2 border-amber-500">
1810                <button onclick="closeDonateModal()" class="absolute top-5 right-5 text-white hover:opacity-85 text-2xl font-bold transition-transform hover:scale-115">
1811                    <i class="fa-solid fa-circle-xmark"></i>
1812                </button>
1813                <div class="text-5xl mb-3 animate-wiggle inline-block">🎁</div>
1814                <h4 class="font-black text-2xl tracking-tight text-stroke">Sponsor Live Healing TV</h4>
1815                <p class="text-xs text-amber-100 mt-1 font-bold uppercase tracking-wider">Help build a custom TV screen hub in remote nations today!</p>
1816            </div>
1817
1818            <!-- Modal Form details -->
1819            <div class="p-8 space-y-5 text-slate-800">
1820                <div class="space-y-1.5">
1821                    <label class="block text-xs font-black uppercase text-slate-500 tracking-wider">Your Sweet Name</label>
1822                    <input id="sponsorName" type="text" placeholder="e.g. Samuel Joy" class="w-full px-4 py-3.5 rounded-2xl bg-slate-100 border border-slate-200 text-sm font-semibold focus:outline-none focus:border-brand-banana shadow-inner">
1823                </div>
1824
1825                <div class="space-y-1.5">
1826                    <label class="block text-xs font-black uppercase text-slate-500 tracking-wider">Select Sponsorship Target</label>
1827                    <select id="sponsorTarget" class="w-full bg-slate-100 border border-slate-200 text-sm rounded-2xl px-4 py-3.5 font-semibold focus:outline-none focus:border-brand-banana shadow-inner cursor-pointer">
1828                        <option value="Magazine distribution">Sponsor 20 Kids Herald Magazines ($20)</option>
1829                        <option value="Live stream kits">Buy Streaming Media Kits ($100)</option>
1830                        <option value="Global translation">Adopt Translation Hub ($250)</option>
1831                        <option value="Custom Seed">Custom Miracle Seed Sowing</option>
1832                    </select>
1833                </div>
1834
1835                <!-- Virtual Credit Card Interactive Simulator -->
1836                <div class="bg-slate-50 p-5 rounded-3xl border border-slate-100 space-y-3 shadow-inner">
1837                    <div class="flex items-center justify-between text-xs font-black text-slate-500 tracking-wider">
1838                        <span>Checkout Secure Gateway</span>
1839                        <i class="fa-solid fa-lock text-brand-emerald animate-pulse"></i>
1840                    </div>
1841                    <div class="grid grid-cols-2 gap-2">
1842                        <div class="col-span-2">
1843                            <input type="text" placeholder="Card Number" class="w-full px-4 py-3 rounded-xl bg-white border border-slate-200 text-xs font-bold shadow-sm">
1844                        </div>
1845                        <div>
1846                            <input type="text" placeholder="MM/YY" class="w-full px-4 py-3 rounded-xl bg-white border border-slate-200 text-xs font-bold text-center shadow-sm">
1847                        </div>
1848                        <div>
1849                            <input type="password" placeholder="CVC" class="w-full px-4 py-3 rounded-xl bg-white border border-slate-200 text-xs font-bold text-center shadow-sm">
1850                        </div>
1851                    </div>
1852                </div>
1853
1854                <!-- Custom Success response visual trigger -->
1855                <button onclick="submitSponsorshipPayment()" class="w-full py-4.5 bg-brand-banana hover:bg-brand-amber text-white font-black text-lg rounded-2xl shadow-3d-banana hover:shadow-none hover:translate-y-1 transition-all flex items-center justify-center gap-2 border-b-2 border-amber-600">
1856                    <i class="fa-solid fa-heart animate-pulse"></i> Complete Gift Sponsorship
1857                </button>
1858            </div>
1859        </div>
1860    </div>
1861
1862    <!-- CUSTOM SUCCESS NOTICE MODAL (Sleek Toast Notifications) -->
1863    <div id="statusNotice" class="fixed top-6 right-6 z-50 bg-indigo-950 text-white p-5 rounded-3xl shadow-premium border-l-8 border-brand-emerald hidden flex items-center gap-4 max-w-sm transition-all duration-300">
1864        <div class="w-10 h-10 rounded-2xl bg-brand-emerald/10 text-brand-emerald flex items-center justify-center text-xl shadow-inner">
1865            <i class="fa-solid fa-check"></i>
1866        </div>
1867        <div>
1868            <h6 id="statusTitle" class="font-black text-sm">Success!</h6>
1869            <p id="statusDesc" class="text-xs text-slate-300 font-semibold">Action performed seamlessly.</p>
1870        </div>
1871    </div>
1872
1873    <a href="#"
1874       class="fixed bottom-6 right-6 z-50 flex h-12 w-12 items-center justify-center rounded-full bg-purple-600 text-white shadow-lg transition-all duration-300 hover:bg-purple-700 hover:scale-110 back-to-top">
1875        <i class="fa-solid fa-arrow-up"></i>
1876    </a>
1877
1878    <!-- ============================================ -->
1879    <!-- PAYMENT SUCCESS MODAL -->
1880    <!-- ============================================ -->
1881    
1882    <!-- ============================================ -->
1883    <!-- PAYMENT FAILED MODAL -->
1884    <!-- ============================================ -->
1885    
1886    <!-- Custom Web App Interactive Flow Mechanics -->
1887    
1887<script>
1888        let currentSowAmount = 25;
1889        let selectedSeedType = 'Healing';
1890        let selectedSeedColor = '#0ea5e9';
1891        let currentTestimonyIndex = 0;
1892        let isStreamPlaying = false;
1893
1894        // Auto Simulated Live chat records
1895        const simulatedUsernames = [
1896            'Chloe from UK', 'Daniel from Nigeria', 'Mateo from Spain', 
1897            'Sophia from USA', 'Zoe from France', 'Aiden from Canada', 
1898            'Amara from SA', 'Tariq from Kenya', 'Liam from Australia'
1899        ];
1900        const simulatedTexts = [
1901            'We are learning so many faith statements today! 🌟',
1902            'Sowing seed of faith for my little cousin who is healed!',
1903            'The animated cartoon of Pastor Chris is amazing! 😍',
1904            'Glory to God, I passed my spelling exams perfectly!',
1905            'Love from France, watching with family.',
1906            'My family sowed 50 magazines today!'
1907        ];
1908
1909        // Core Interaction: Dynamic Smooth scroll
1910        function scrollToSection(id) {
1911            const section = document.getElementById(id);
1912            if(section) {
1913                section.scrollIntoView({ behavior: 'smooth' });
1914                document.getElementById('mobileMenu').classList.add('hidden');
1915            }
1916        }
1917
1918        // Mobile Menu Toggling
1919        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
1920        const mobileMenu = document.getElementById('mobileMenu');
1921        if(mobileMenuBtn && mobileMenu) {
1922            mobileMenuBtn.addEventListener('click', () => {
1923                mobileMenu.classList.toggle('hidden');
1924            });
1925        }
1926
1927        // Core Interaction: Active Seed Selection & Styling state
1928        function selectSeedType(type, hexColor) {
1929            selectedSeedType = type;
1930            selectedSeedColor = hexColor;
1931            
1932            document.querySelectorAll('.seed-selector').forEach(sel => {
1933                sel.classList.remove('border-brand-sky', 'border-brand-bubblegum', 'border-brand-banana', 'border-brand-purple', 'bg-brand-sky/5');
1934                sel.classList.add('border-slate-100', 'bg-slate-50/80');
1935            });
1936
1937            const activeSel = document.getElementById(`seed-${type}`);
1938            if (activeSel) {
1939                activeSel.classList.remove('border-slate-100', 'bg-slate-50/80');
1940                let colorClass = 'border-brand-sky bg-brand-sky/5';
1941                if(type === 'Love') colorClass = 'border-brand-bubblegum bg-red-50';
1942                if(type === 'Joy') colorClass = 'border-brand-banana bg-amber-50';
1943                if(type === 'Faith') colorClass = 'border-brand-purple bg-violet-50';
1944                activeSel.className += ` ${colorClass}`;
1945            }
1946
1947            const bud = document.getElementById('plantFlower');
1948            if (bud) {
1949                bud.style.backgroundColor = hexColor;
1950                let emoji = '💧';
1951                if(type === 'Love') emoji = '❤️';
1952                if(type === 'Joy') emoji = '⭐';
1953                if(type === 'Faith') emoji = '✨';
1954                bud.innerHTML = emoji;
1955            }
1956        }
1957
1958        // Sowing Slider dynamic updates
1959       function updateSowAmount(val) {
1960            currentSowAmount = val;
1961            document.getElementById('sowAmountText').innerText = `$${val}`;
1962            // Calculate children reached based on $0.30 per copy
1963            const reached = Math.max(1, Math.floor(val / PRICE_PER_COPY));
1964            document.getElementById('childrenReachedCount').innerText = reached;
1965        }
1966
1967        // Simulate Interactive Seed Sowing Plant Growth
1968        function simulatePlanting() {
1969            triggerConfetti();
1970            
1971            const plant = document.getElementById('virtualPlant');
1972            plant.style.transform = 'scale(1.2) rotate(5deg)';
1973            
1974            document.getElementById('gardenStatusTitle').innerText = `Your ${selectedSeedType} Tree bloomed!`;
1975            document.getElementById('gardenStatusTitle').style.color = selectedSeedColor;
1976            document.getElementById('gardenStatusDesc').innerText = `Amazing! You just sowed $${currentSowAmount} towards reaching children. A beautifully printed pack will be tracked directly to those in need!`;
1977
1978            showStatusNotice("Seed Sowed Successfully!", "Your virtual faith garden is looking brilliant! Thank you.");
1979            
1980            setTimeout(() => {
1981                plant.style.transform = 'scale(1.0) rotate(0deg)';
1982            }, 2500);
1983        }
1984
1985        // Testimony Carousel Loop control
1986        const slides = document.querySelectorAll('.testimony-slide');
1987        function showTestimony(index) {
1988            slides.forEach((slide, idx) => {
1989                if (idx === index) {
1990                    slide.classList.remove('hidden');
1991                } else {
1992                    slide.classList.add('hidden');
1993                }
1994            });
1995        }
1996        function nextTestimony() {
1997            currentTestimonyIndex = (currentTestimonyIndex + 1) % slides.length;
1998            showTestimony(currentTestimonyIndex);
1999        }
2000        function prevTestimony() {
2001            currentTestimonyIndex = (currentTestimonyIndex - 1 + slides.length) % slides.length;
2002            showTestimony(currentTestimonyIndex);
2003        }
2004
2005        // Live Chat simulation injection loops
2006        function postUserMessage() {
2007            const input = document.getElementById('chatInput');
2008            if (input && input.value.trim() !== "") {
2009                const text = input.value.trim();
2010                injectChatMessage("You", text, "#f43f5e");
2011                input.value = "";
2012                
2013                setTimeout(() => {
2014                    const chatCont = document.getElementById('chatContainer');
2015                    chatCont.scrollTop = chatCont.scrollHeight;
2016                }, 100);
2017            }
2018        }
2019
2020        function injectChatMessage(user, msg, colorCode) {
2021            const chatCont = document.getElementById('chatContainer');
2022            if (chatCont) {
2023                const bubble = document.createElement('div');
2024                bubble.className = "bg-indigo-900/60 p-3.5 rounded-2xl border border-indigo-900 animate-fade-in";
2025                bubble.innerHTML = `<span class="font-black text-brand-emerald">${user}</span>: <span class="text-slate-100 font-medium">${msg}</span>`;
2026                chatCont.appendChild(bubble);
2027                chatCont.scrollTop = chatCont.scrollHeight;
2028            }
2029        }
2030
2031        // Periodically inject fake live chat messages
2032        setInterval(() => {
2033            const rUser = simulatedUsernames[Math.floor(Math.random() * simulatedUsernames.length)];
2034            const rText = simulatedTexts[Math.floor(Math.random() * simulatedTexts.length)];
2035            const randomColorClass = ["text-brand-sky", "text-brand-purple", "text-brand-banana"][Math.floor(Math.random() * 3)];
2036            
2037            const chatCont = document.getElementById('chatContainer');
2038            if (chatCont) {
2039                const bubble = document.createElement('div');
2040                bubble.className = "bg-indigo-900/40 p-3.5 rounded-2xl border border-indigo-900/50";
2041                bubble.innerHTML = `<span class="font-black ${randomColorClass}">${rUser}</span>: <span class="text-slate-200 font-medium">${rText}</span>`;
2042                chatCont.appendChild(bubble);
2043                
2044                if(chatCont.children.length > 20) {
2045                    chatCont.removeChild(chatCont.firstChild);
2046                }
2047                chatCont.scrollTop = chatCont.scrollHeight;
2048            }
2049        }, 4500);
2050
2051        // Daily Kid Bible Verse Quiz responses
2052        function checkQuizAnswer(isCorrect) {
2053            const quiz = document.getElementById('quizContainer');
2054            if (isCorrect) {
2055                triggerConfetti();
2056                quiz.innerHTML = `
2057                    <div class="text-center py-8 space-y-4">
2058                        <span class="text-6xl">👑</span>
2059                        <h4 class="font-black text-2xl text-brand-banana">Absolutely Correct!</h4>
2060                        <p class="text-base font-extrabold text-white">"I can do all things through Christ who strengthens me!" Keep growing in super faith.</p>
2061                        <button onclick="resetQuiz()" class="px-8 py-3 bg-white/20 hover:bg-white/35 text-white rounded-2xl text-sm font-black transition-all shadow-md">Play Again</button>
2062                    </div>
2063                `;
2064            } else {
2065                showStatusNotice("Try Again!", "Read Philippians 4:13 carefully and try once more!");
2066            }
2067        }
2068
2069        // function resetQuiz() {
2070        //     document.getElementById('quizContainer').innerHTML = `
2071        //         <p class="font-extrabold text-xl sm:text-2xl text-center leading-relaxed">"I can do all things through _________ who strengthens me."</p>
2072        //         <p class="text-center text-sm text-brand-banana font-black tracking-widest uppercase">Philippians 4:13</p>
2073        //         <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-4">
2074        //             <button onclick="checkQuizAnswer(false)" class="p-4 bg-white/10 hover:bg-white/25 text-white font-extrabold rounded-2xl transition-all text-sm text-left border border-white/10 flex items-center gap-2">❌ A) My Own Strength</button>
2075        //             <button onclick="checkQuizAnswer(true)" class="p-4 bg-white/10 hover:bg-white/25 text-white font-extrabold rounded-2xl transition-all text-sm text-left border border-white/10 flex items-center gap-2">✨ B) Christ</button>
2076        //             <button onclick="checkQuizAnswer(false)" class="p-4 bg-white/10 hover:bg-white/25 text-white font-extrabold rounded-2xl transition-all text-sm text-left border border-white/10 flex items-center gap-2">🚀 C) Superheroes</button>
2077        //             <button onclick="checkQuizAnswer(false)" class="p-4 bg-white/10 hover:bg-white/25 text-white font-extrabold rounded-2xl transition-all text-sm text-left border border-white/10 flex items-center gap-2">🎈 D) Big Balloons</button>
2078        //         </div>
2079        //     `;
2080        // }
2081
2082        function openDonateModal() {
2083            document.getElementById('donateModal').classList.remove('hidden');
2084        }
2085
2086        function closeDonateModal() {
2087            document.getElementById('donateModal').classList.add('hidden');
2088        }
2089
2090        function submitSponsorshipPayment() {
2091            const name = document.getElementById('sponsorName').value || "Amazing Partner";
2092            const target = document.getElementById('sponsorTarget').value;
2093            
2094            closeDonateModal();
2095            triggerConfetti();
2096            
2097            showStatusNotice("Sponsorship Completed!", `Thank you ${name}! You have sowed directly towards ${target}. Your gift transforms lives.`);
2098        }
2099
2100        function showStatusNotice(title, desc) {
2101            const notice = document.getElementById('statusNotice');
2102            document.getElementById('statusTitle').innerText = title;
2103            document.getElementById('statusDesc').innerText = desc;
2104            
2105            notice.classList.remove('hidden');
2106            setTimeout(() => {
2107                notice.classList.add('hidden');
2108            }, 5000);
2109        }
2110
2111        function triggerConfetti() {
2112            if (typeof confetti !== 'undefined') {
2113                confetti({
2114                    particleCount: 150,
2115                    spread: 80,
2116                    origin: { y: 0.6 }
2117                });
2118            }
2119        }
2120
2121        // Register Modal functions
2122        function registerKid() {
2123            const modal = document.getElementById("registerModal");
2124            modal.classList.remove("hidden");
2125            document.body.classList.add("overflow-hidden");
2126        }
2127
2128        function closeRegisterModal() {
2129            const modal = document.getElementById("registerModal");
2130            modal.classList.add("hidden");
2131            document.body.classList.remove("overflow-hidden");
2132        }
2133
2134        document.getElementById("registerModal").addEventListener("click", function(e){
2135            if(e.target === this){
2136                closeRegisterModal();
2137            }
2138        });
2139
2140        document.addEventListener("keydown", function(e){
2141            if(e.key === "Escape"){
2142                closeRegisterModal();
2143            }
2144        });
2145    </script>
2145
2146
2147    <!-- HLS.js for Live Streaming -->
2148    
2148<script src="https://cdn.jsdelivr.net/npm/hls.js@1"></script>
2148
2149
2150    
2150<script>
2151        const mainStream = 'https://vcpout-ams01.internetmultimediaonline.org/vcp/HSLST20bhgb23nc/playlist.m3u8';
2152        const backupStream = 'https://pvqybrzodz24-hls-live.5centscdn.com/HSOP/955ad3298db330b5ee880c2c9e6f23a0.sdp/playlist.m3u8';
2153
2154        let video = document.getElementById('liveTvPlayer');
2155        let hls = null;
2156        let currentUrl = 'https://vcpout-ams01.internetmultimediaonline.org/vcp/HSLST20bhgb23nc/playlist.m3u8'; // PHP injected initial link
2157        let isUsingBackup = false;
2158
2159        function initPlayer(url) {
2160            currentUrl = url;
2161
2162            // Destroy previous instance
2163            if (hls) {
2164                hls.destroy();
2165                hls = null;
2166            }
2167
2168            document.getElementById('streamStatus').classList.add('hidden');
2169
2170            if (Hls.isSupported()) {
2171                hls = new Hls({
2172                    lowLatencyMode: true,
2173                    backBufferLength: 30,
2174                    maxBufferLength: 60,
2175                    enableWorker: true
2176                });
2177
2178                hls.loadSource(url);
2179                hls.attachMedia(video);
2180
2181                hls.on(Hls.Events.MANIFEST_PARSED, () => {
2182                    video.play().catch(() => {});
2183                });
2184
2185                // Automatic Failover Logic
2186                hls.on(Hls.Events.ERROR, function(event, data) {
2187                    if (data.fatal) {
2188                        console.warn('Stream error:', data.type, data.details);
2189                        
2190                        if (!isUsingBackup) {
2191                            showStreamStatus('Main stream failed. Switching to backup...', 'text-amber-400');
2192                            setTimeout(() => {
2193                                isUsingBackup = true;
2194                                initPlayer(backupStream);
2195                            }, 1500);
2196                        } else {
2197                            showStreamStatus('Both streams unavailable', 'text-red-400');
2198                        }
2199                    }
2200                });
2201
2202            } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
2203                // Safari native
2204                video.src = url;
2205                video.addEventListener('loadedmetadata', () => video.play());
2206            }
2207        }
2208
2209        function showStreamStatus(message, colorClass = 'text-white') {
2210            const statusEl = document.getElementById('streamStatus');
2211            const textEl = document.getElementById('statusText');
2212            textEl.innerHTML = message;
2213            textEl.className = colorClass;
2214            statusEl.classList.remove('hidden');
2215        }
2216
2217        // Initialize player
2218        document.addEventListener('DOMContentLoaded', function() {
2219            initPlayer(currentUrl);
2220            
2221            // Viewer counter simulation
2222            setInterval(() => {
2223                let count = parseInt(document.getElementById('viewer-count').textContent.replace(/,/g, ''));
2224                count += Math.floor(Math.random() * 12) + 3;
2225                document.getElementById('viewer-count').textContent = count.toLocaleString();
2226            }, 7000);
2227        });
2228
2229
2230
2231
2232        // Function to open the registration modal
2233        function openRegistrationModal() {
2234            // Check if Bootstrap is loaded
2235            if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
2236                const modalElement = document.getElementById('healingRegistrationModal');
2237                if (modalElement) {
2238                    const modal = new bootstrap.Modal(modalElement);
2239                    modal.show();
2240                }
2241            } else {
2242                // Fallback if Bootstrap isn't loaded
2243                const modalElement = document.getElementById('healingRegistrationModal');
2244                if (modalElement) {
2245                    modalElement.style.display = 'block';
2246                    modalElement.classList.add('show');
2247                    document.body.classList.add('modal-open');
2248                    
2249                    // Create backdrop
2250                    const backdrop = document.createElement('div');
2251                    backdrop.className = 'modal-backdrop fade show';
2252                    document.body.appendChild(backdrop);
2253                }
2254            }
2255        }
2256
2257            // Function to close the modal (for the close button)
2258            function closeRegistrationModal() {
2259                const modalElement = document.getElementById('healingRegistrationModal');
2260                if (modalElement) {
2261                    if (typeof bootstrap !== 'undefined' && bootstrap.Modal) {
2262                        const modal = bootstrap.Modal.getInstance(modalElement);
2263                        if (modal) {
2264                            modal.hide();
2265                        }
2266                    } else {
2267                        modalElement.style.display = 'none';
2268                        modalElement.classList.remove('show');
2269                        document.body.classList.remove('modal-open');
2270                        const backdrop = document.querySelector('.modal-backdrop');
2271                        if (backdrop) {
2272                            backdrop.remove();
2273                        }
2274                    }
2275                }
2276            }
2277
2278            // Make sure the modal works when hash is in URL
2279            document.addEventListener('DOMContentLoaded', function() {
2280                if (window.location.hash === '#healingRegistrationModal') {
2281                    openRegistrationModal();
2282                }
2283            });
2284
2285
2286// ============================================
2287// BIBLE QUIZ - LOAD FROM EXTERNAL JSON
2288// ============================================
2289let bibleQuizQuestions = [];
2290let currentQuestionIndex = 0;
2291let userAnswers = {};
2292let answeredQuestions = {};
2293let isQuizLoaded = false;
2294
2295// Modal-specific quiz state
2296let modalQuizIndex = 0;
2297let modalUserAnswers = {};
2298let modalAnsweredQuestions = {};
2299
2300// Function to load questions from external JSON file
2301async function loadQuizQuestions() {
2302    try {
2303        const response = await fetch('bible_questions.json');
2304        if (!response.ok) {
2305            throw new Error(`HTTP error! status: ${response.status}`);
2306        }
2307        const data = await response.json();
2308        bibleQuizQuestions = data;
2309        isQuizLoaded = true;
2310        console.log(`✅ Loaded ${bibleQuizQuestions.length} quiz questions`);
2311        
2312        // Render both the main section and modal if open
2313        renderQuestion();
2314        if (!document.getElementById('quizModal').classList.contains('hidden')) {
2315            renderQuizModal();
2316        }
2317        enableQuizControls();
2318    } catch (error) {
2319        console.error('❌ Error loading quiz questions:', error);
2320        bibleQuizQuestions = getFallbackQuestions();
2321        isQuizLoaded = true;
2322        renderQuestion();
2323        if (!document.getElementById('quizModal').classList.contains('hidden')) {
2324            renderQuizModal();
2325        }
2326        enableQuizControls();
2327        showStatusNotice('Info', 'Using default questions. Please check your internet connection.');
2328    }
2329}
2330
2331// Fallback questions
2332function getFallbackQuestions() {
2333    return [
2334        {
2335            id: 1,
2336            question: '"I can do all things through _________ who strengthens me."',
2337            reference: "Philippians 4:13",
2338            options: [
2339                { label: "A", text: "My Own Strength", isCorrect: false },
2340                { label: "B", text: "Christ", isCorrect: true },
2341                { label: "C", text: "Superheroes", isCorrect: false },
2342                { label: "D", text: "Big Balloons", isCorrect: false }
2343            ],
2344            explanation: "Philippians 4:13 reminds us that our strength comes from Christ!"
2345        },
2346        {
2347            id: 2,
2348            question: '"For God so loved the world that He gave His one and only __________."',
2349            reference: "John 3:16",
2350            options: [
2351                { label: "A", text: "Son", isCorrect: true },
2352                { label: "B", text: "Angel", isCorrect: false },
2353                { label: "C", text: "Prophet", isCorrect: false },
2354                { label: "D", text: "King", isCorrect: false }
2355            ],
2356            explanation: "God's love for us is so great that He gave His only Son, Jesus!"
2357        },
2358        {
2359            id: 3,
2360            question: '"The LORD is my __________; I shall not want."',
2361            reference: "Psalm 23:1",
2362            options: [
2363                { label: "A", text: "King", isCorrect: false },
2364                { label: "B", text: "Shepherd", isCorrect: true },
2365                { label: "C", text: "Father", isCorrect: false },
2366                { label: "D", text: "Friend", isCorrect: false }
2367            ],
2368            explanation: "David called the Lord his Shepherd because God guides and provides for us!"
2369        },
2370        {
2371            id: 4,
2372            question: '"Trust in the LORD with all your __________ and lean not on your own understanding."',
2373            reference: "Proverbs 3:5",
2374            options: [
2375                { label: "A", text: "Strength", isCorrect: false },
2376                { label: "B", text: "Heart", isCorrect: true },
2377                { label: "C", text: "Mind", isCorrect: false },
2378                { label: "D", text: "Soul", isCorrect: false }
2379            ],
2380            explanation: "God wants us to trust Him completely with everything in our hearts!"
2381        },
2382        {
2383            id: 5,
2384            question: '"The joy of the LORD is your __________."',
2385            reference: "Nehemiah 8:10",
2386            options: [
2387                { label: "A", text: "Strength", isCorrect: true },
2388                { label: "B", text: "Hope", isCorrect: false },
2389                { label: "C", text: "Peace", isCorrect: false },
2390                { label: "D", text: "Song", isCorrect: false }
2391            ],
2392            explanation: "The joy that comes from knowing God gives us strength to overcome any challenge!"
2393        }
2394    ];
2395}
2396
2397function enableQuizControls() {
2398    const prevBtn = document.getElementById('prevBtn');
2399    const nextBtn = document.getElementById('nextBtn');
2400    if (prevBtn) prevBtn.disabled = false;
2401    if (nextBtn) nextBtn.disabled = false;
2402}
2403
2404// ============================================
2405// MAIN SECTION QUIZ FUNCTIONS
2406// ============================================
2407
2408function renderQuestion() {
2409    if (!isQuizLoaded || bibleQuizQuestions.length === 0) {
2410        return;
2411    }
2412    
2413    const quizContainer = document.getElementById('quizContainer');
2414    if (!quizContainer) return;
2415    
2416    const question = bibleQuizQuestions[currentQuestionIndex];
2417    const totalQuestions = bibleQuizQuestions.length;
2418    
2419    const counter = document.getElementById('questionCounter');
2420    if (counter) {
2421        counter.textContent = `${currentQuestionIndex + 1} / ${totalQuestions}`;
2422    }
2423    
2424    const prevBtn = document.getElementById('prevBtn');
2425    const nextBtn = document.getElementById('nextBtn');
2426    if (prevBtn) prevBtn.disabled = currentQuestionIndex === 0;
2427    if (nextBtn) {
2428        nextBtn.textContent = currentQuestionIndex === totalQuestions - 1 ? 'Finish' : 'Next';
2429    }
2430    
2431    let optionsHTML = '';
2432    question.options.forEach((option, index) => {
2433        const isAnswered = answeredQuestions[currentQuestionIndex];
2434        const isSelected = userAnswers[currentQuestionIndex] === option.text;
2435        const isCorrect = option.isCorrect;
2436        
2437        let buttonClass = 'p-4 bg-white/10 hover:bg-white/25 text-white font-extrabold rounded-2xl transition-all text-sm text-left border border-white/10 flex items-center gap-2 w-full';
2438        
2439        if (isAnswered && isSelected) {
2440            buttonClass += isCorrect ? ' bg-green-500/30 border-green-400' : ' bg-red-500/30 border-red-400';
2441        } else if (isAnswered && isCorrect && !isSelected) {
2442            buttonClass += ' bg-green-500/20 border-green-400/50';
2443        }
2444        
2445        optionsHTML += `
2446            <button onclick="selectAnswer('${option.text.replace(/'/g, "\\'")}', ${index})" 
2447                    class="${buttonClass}"
2448                    ${isAnswered ? 'disabled' : ''}>
2449                <span>${option.label})</span> ${option.text}
2450            </button>
2451        `;
2452    });
2453    
2454    const allAnswered = Object.keys(answeredQuestions).length === totalQuestions;
2455    
2456    quizContainer.innerHTML = `
2457        <div class="space-y-6">
2458            <p class="font-extrabold text-xl sm:text-2xl text-center leading-relaxed">
2459                "${question.question}"
2460            </p>
2461            <p class="text-center text-sm text-brand-banana font-black tracking-widest uppercase">
2462                ${question.reference}
2463            </p>
2464            
2465            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-4">
2466                ${optionsHTML}
2467            </div>
2468            
2469            ${answeredQuestions[currentQuestionIndex] ? `
2470                <div class="mt-4 p-4 rounded-xl bg-white/20 border border-white/20 text-center animate-fade-in">
2471                    <p class="text-sm text-white font-semibold">
2472                        <i class="fa-solid fa-lightbulb mr-2 text-brand-banana"></i>
2473                        ${question.explanation}
2474                    </p>
2475                </div>
2476            ` : ''}
2477            
2478            ${allAnswered ? `
2479                <div class="mt-4 p-4 rounded-xl bg-white/20 border border-white/20 text-center animate-fade-in">
2480                    <p class="text-sm text-white font-bold">
2481                        🎉 You've completed all questions! 
2482                        <span id="scoreDisplay" class="text-brand-banana text-lg block mt-2"></span>
2483                    </p>
2484                    <button onclick="resetMainQuiz()" class="mt-3 px-6 py-2 bg-white/20 hover:bg-white/30 text-white font-bold rounded-xl transition-all text-sm">
2485                        <i class="fa-solid fa-rotate-right mr-2"></i> Play Again
2486                    </button>
2487                    <button onclick="showFinalScoreModal()" class="mt-3 px-6 py-2 bg-brand-purple hover:bg-violet-600 text-white font-bold rounded-xl transition-all text-sm">
2488                        <i class="fa-solid fa-trophy mr-2"></i> View Results
2489                    </button>
2490                </div>
2491            ` : ''}
2492        </div>
2493    `;
2494    
2495    if (allAnswered) {
2496        displayScore();
2497    }
2498}
2499
2500function selectAnswer(answerText, optionIndex) {
2501    if (answeredQuestions[currentQuestionIndex]) return;
2502    
2503    const question = bibleQuizQuestions[currentQuestionIndex];
2504    const option = question.options[optionIndex];
2505    
2506    userAnswers[currentQuestionIndex] = answerText;
2507    answeredQuestions[currentQuestionIndex] = true;
2508    
2509    showAnswerFeedback(option.isCorrect, question, answerText);
2510    
2511    if (option.isCorrect) {
2512        triggerConfetti();
2513        showStatusNotice('🎉 Correct!', 'Great job! Keep learning God\'s word!');
2514    } else {
2515        showStatusNotice('📖 Not quite!', 'Read the verse again and learn from it!');
2516    }
2517    
2518    renderQuestion();
2519    
2520    if (option.isCorrect && currentQuestionIndex < bibleQuizQuestions.length - 1) {
2521        setTimeout(() => {
2522            const nextBtn = document.getElementById('nextBtn');
2523            if (nextBtn && !nextBtn.disabled) {
2524                nextQuestion();
2525            }
2526        }, 4000);
2527    }
2528}
2529
2530function nextQuestion() {
2531    if (currentQuestionIndex < bibleQuizQuestions.length - 1) {
2532        currentQuestionIndex++;
2533        renderQuestion();
2534    } else {
2535        if (Object.keys(answeredQuestions).length === bibleQuizQuestions.length) {
2536            renderQuestion();
2537        } else {
2538            if (typeof Swal !== 'undefined') {
2539                Swal.fire({
2540                    title: '📖 Not Done Yet!',
2541                    text: 'Please answer all questions before finishing the quiz!',
2542                    icon: 'info',
2543                    confirmButtonColor: '#8b5cf6',
2544                    confirmButtonText: 'Continue'
2545                });
2546            } else {
2547                alert('Please answer all questions before finishing!');
2548            }
2549        }
2550    }
2551}
2552
2553function previousQuestion() {
2554    if (currentQuestionIndex > 0) {
2555        currentQuestionIndex--;
2556        renderQuestion();
2557    }
2558}
2559
2560function displayScore() {
2561    let correctCount = 0;
2562    let totalAnswered = Object.keys(answeredQuestions).length;
2563    let totalQuestions = bibleQuizQuestions.length;
2564    
2565    bibleQuizQuestions.forEach((question, index) => {
2566        if (answeredQuestions[index]) {
2567            const userAnswer = userAnswers[index];
2568            const isCorrect = question.options.some(opt => opt.text === userAnswer && opt.isCorrect);
2569            if (isCorrect) correctCount++;
2570        }
2571    });
2572    
2573    const scoreDisplay = document.getElementById('scoreDisplay');
2574    if (scoreDisplay) {
2575        const percentage = Math.round((correctCount / totalAnswered) * 100);
2576        let emoji = '🌟';
2577        let message = '';
2578        if (percentage === 100) {
2579            emoji = '👑';
2580            message = 'Perfect score! You\'re a Bible champion!';
2581        } else if (percentage >= 80) {
2582            emoji = '⭐';
2583            message = 'Excellent! Keep learning God\'s word!';
2584        } else if (percentage >= 60) {
2585            emoji = '💪';
2586            message = 'Good effort! Keep studying the Bible!';
2587        } else {
2588            emoji = '📖';
2589            message = 'Keep learning! God\'s word is a treasure!';
2590        }
2591        
2592        scoreDisplay.innerHTML = `
2593            ${emoji} ${correctCount}/${totalQuestions} (${percentage}%)<br>
2594            <span class="text-xs text-white/70">${message}</span>
2595        `;
2596    }
2597}
2598
2599function resetMainQuiz() {
2600    if (confirm('Do you want to restart the quiz?')) {
2601        currentQuestionIndex = 0;
2602        userAnswers = {};
2603        answeredQuestions = {};
2604        renderQuestion();
2605        const counter = document.getElementById('questionCounter');
2606        if (counter) {
2607            counter.textContent = `1 / ${bibleQuizQuestions.length}`;
2608        }
2609        showStatusNotice('🔄 Quiz Reset', 'Start fresh and test your Bible knowledge again!');
2610    }
2611}
2612
2613// ============================================
2614// ANSWER FEEDBACK TOAST FUNCTIONS
2615// ============================================
2616
2617// Store toast timeout reference globally
2618let toastTimeout = null;
2619let isToastVisible = false;
2620
2621// Show feedback toast at top right corner
2622function showAnswerFeedback(isCorrect, question, selectedOptionText) {
2623    const toast = document.getElementById('answerFeedbackToast');
2624    const header = document.getElementById('toastHeader');
2625    const icon = document.getElementById('toastIcon');
2626    const title = document.getElementById('toastTitle');
2627    const subtitle = document.getElementById('toastSubtitle');
2628    const message = document.getElementById('toastMessage');
2629    const explanation = document.getElementById('toastExplanation');
2630    const progress = document.getElementById('toastProgress');
2631    const progressText = document.getElementById('toastProgressText');
2632    
2633    const totalQuestions = bibleQuizQuestions.length;
2634    const totalAnswered = Object.keys(answeredQuestions).length;
2635    
2636    // Clear any existing timeout
2637    if (toastTimeout) {
2638        clearTimeout(toastTimeout);
2639        toastTimeout = null;
2640    }
2641    
2642    // If toast is already visible, hide it first
2643    if (isToastVisible) {
2644        toast.className = 'fixed top-4 right-4 z-[9999] w-80 max-w-full animate-slide-out-right';
2645        setTimeout(() => {
2646            toast.style.display = 'none';
2647            showNewToast(isCorrect, question, selectedOptionText, totalQuestions, totalAnswered);
2648        }, 300);
2649    } else {
2650        showNewToast(isCorrect, question, selectedOptionText, totalQuestions, totalAnswered);
2651    }
2652}
2653
2654function showNewToast(isCorrect, question, selectedOptionText, totalQuestions, totalAnswered) {
2655    const toast = document.getElementById('answerFeedbackToast');
2656    const header = document.getElementById('toastHeader');
2657    const icon = document.getElementById('toastIcon');
2658    const title = document.getElementById('toastTitle');
2659    const subtitle = document.getElementById('toastSubtitle');
2660    const message = document.getElementById('toastMessage');
2661    const explanation = document.getElementById('toastExplanation');
2662    const progress = document.getElementById('toastProgress');
2663    const progressText = document.getElementById('toastProgressText');
2664    
2665    // Set up the toast based on correct/incorrect
2666    if (isCorrect) {
2667        header.className = 'px-4 py-3 text-white flex items-center gap-3 bg-gradient-to-r from-green-500 to-emerald-500';
2668        icon.textContent = '🎉';
2669        title.textContent = '✨ Correct!';
2670        subtitle.textContent = 'Great job!';
2671        message.textContent = 'Amazing work! Keep it up! 🎊';
2672        triggerConfetti();
2673    } else {
2674        header.className = 'px-4 py-3 text-white flex items-center gap-3 bg-gradient-to-r from-red-500 to-rose-500';
2675        icon.textContent = '📖';
2676        title.textContent = '🤔 Not Quite!';
2677        subtitle.textContent = 'Keep learning!';
2678        message.textContent = 'Don\'t give up! Learn and grow! 💪';
2679    }
2680    
2681    // Show explanation
2682    const selectedLabel = question.options.find(opt => opt.text === selectedOptionText)?.label || '';
2683    const correctAnswer = question.options.find(opt => opt.isCorrect)?.text;
2684    
2685    if (!isCorrect) {
2686        explanation.innerHTML = `
2687            <div class="mt-1">
2688                <span class="font-bold text-red-600">You picked:</span> ${selectedLabel}) ${selectedOptionText}
2689                <br><span class="font-bold text-green-600">✅ Correct:</span> ${correctAnswer}
2690                <br><span class="text-gray-500 text-xs mt-1 block">${question.explanation || ''}</span>
2691            </div>
2692        `;
2693    } else {
2694        explanation.innerHTML = `
2695            <div class="mt-1">
2696                <span class="text-green-600">✅</span> ${selectedLabel}) ${selectedOptionText}
2697                <br><span class="text-gray-500 text-xs mt-1 block">${question.explanation || ''}</span>
2698            </div>
2699        `;
2700    }
2701    
2702    // Update progress
2703    const progressPercent = Math.round((totalAnswered / totalQuestions) * 100);
2704    progress.style.width = `${progressPercent}%`;
2705    
2706    let progressEmoji = '📖';
2707    if (progressPercent >= 100) progressEmoji = '👑';
2708    else if (progressPercent >= 75) progressEmoji = '⭐';
2709    else if (progressPercent >= 50) progressEmoji = '💪';
2710    else if (progressPercent >= 25) progressEmoji = '🌱';
2711    
2712    progressText.textContent = `${progressEmoji} ${totalAnswered}/${totalQuestions}`;
2713    
2714    // Show the toast with animation
2715    toast.style.display = 'block';
2716    toast.className = 'fixed top-4 right-4 z-[9999] w-80 max-w-full animate-slide-in-right';
2717    isToastVisible = true;
2718    
2719    // Auto-hide after 5 seconds (longer so user can read)
2720    toastTimeout = setTimeout(() => {
2721        closeFeedbackToast();
2722    }, 5000);
2723}
2724
2725// Close feedback toast
2726function closeFeedbackToast() {
2727    const toast = document.getElementById('answerFeedbackToast');
2728    if (toast && isToastVisible) {
2729        toast.className = 'fixed top-4 right-4 z-[9999] w-80 max-w-full animate-slide-out-right';
2730        isToastVisible = false;
2731        
2732        setTimeout(() => {
2733            toast.style.display = 'none';
2734            toast.className = 'fixed top-4 right-4 z-[9999] hidden w-80 max-w-full';
2735        }, 300);
2736    }
2737}
2738
2739// Close toast on click
2740document.addEventListener('click', function(e) {
2741    const toast = document.getElementById('answerFeedbackToast');
2742    const toastContent = document.getElementById('feedbackToastContent');
2743    
2744    if (toast && isToastVisible && toastContent) {
2745        // Close if clicking outside the toast
2746        if (!toastContent.contains(e.target)) {
2747            closeFeedbackToast();
2748        }
2749    }
2750});
2751
2752// Also close on Escape key
2753document.addEventListener('keydown', function(e) {
2754    if (e.key === 'Escape' && isToastVisible) {
2755        closeFeedbackToast();
2756    }
2757});
2758// ============================================
2759// MODAL QUIZ FUNCTIONS
2760// ============================================
2761
2762function openQuizModal() {
2763    const modal = document.getElementById('quizModal');
2764    if (modal) {
2765        modal.classList.remove('hidden');
2766        document.body.classList.add('overflow-hidden');
2767        if (bibleQuizQuestions.length === 0) {
2768            loadQuizQuestions();
2769        } else {
2770            renderQuizModal();
2771        }
2772    }
2773}
2774
2775function closeQuizModal() {
2776    const modal = document.getElementById('quizModal');
2777    if (modal) {
2778        modal.classList.add('hidden');
2779        document.body.classList.remove('overflow-hidden');
2780    }
2781}
2782
2783function openActivityModal() {
2784    const modal = document.getElementById('activityModal');
2785    if (modal) {
2786        modal.classList.remove('hidden');
2787        document.body.classList.add('overflow-hidden');
2788    }
2789}
2790
2791function closeActivityModal() {
2792    const modal = document.getElementById('activityModal');
2793    if (modal) {
2794        modal.classList.add('hidden');
2795        document.body.classList.remove('overflow-hidden');
2796    }
2797}
2798
2799function renderQuizModal() {
2800    if (bibleQuizQuestions.length === 0) {
2801        return;
2802    }
2803    
2804    const container = document.getElementById('quizModalContent');
2805    if (!container) return;
2806    
2807    const question = bibleQuizQuestions[modalQuizIndex];
2808    const total = bibleQuizQuestions.length;
2809    
2810    const counter = document.getElementById('quizModalCounter');
2811    if (counter) {
2812        counter.textContent = `${modalQuizIndex + 1} / ${total}`;
2813    }
2814    
2815    const prevBtn = document.getElementById('quizPrevBtn');
2816    const nextBtn = document.getElementById('quizNextBtn');
2817    if (prevBtn) prevBtn.disabled = modalQuizIndex === 0;
2818    if (nextBtn) {
2819        nextBtn.textContent = modalQuizIndex === total - 1 ? 'Finish' : 'Next';
2820    }
2821    
2822    let optionsHTML = '';
2823    question.options.forEach((option, index) => {
2824        const isAnswered = modalAnsweredQuestions[modalQuizIndex];
2825        const isSelected = modalUserAnswers[modalQuizIndex] === option.text;
2826        const isCorrect = option.isCorrect;
2827        
2828        let buttonClass = 'p-4 bg-white/10 hover:bg-white/20 text-white font-bold rounded-2xl transition-all text-sm text-left border border-white/10 flex items-center gap-2 w-full';
2829        
2830        if (isAnswered && isSelected) {
2831            buttonClass += isCorrect ? ' bg-green-500/30 border-green-400' : ' bg-red-500/30 border-red-400';
2832        } else if (isAnswered && isCorrect && !isSelected) {
2833            buttonClass += ' bg-green-500/20 border-green-400/50';
2834        }
2835        
2836        optionsHTML += `
2837            <button onclick="modalSelectAnswer('${option.text.replace(/'/g, "\\'")}', ${index})" 
2838                    class="${buttonClass}"
2839                    ${isAnswered ? 'disabled' : ''}>
2840                <span class="font-black text-white/50">${option.label})</span> ${option.text}
2841            </button>
2842        `;
2843    });
2844    
2845    const allAnswered = Object.keys(modalAnsweredQuestions).length === total;
2846    updateModalScore();
2847    
2848    container.innerHTML = `
2849        <div class="space-y-6">
2850            <div class="bg-white/5 p-6 rounded-2xl border border-white/10">
2851                <p class="font-extrabold text-xl text-white text-center leading-relaxed">
2852                    "${question.question}"
2853                </p>
2854                <p class="text-center text-sm text-brand-banana font-black tracking-widest uppercase mt-3">
2855                    ${question.reference}
2856                </p>
2857            </div>
2858            
2859            <div class="grid grid-cols-1 gap-3">
2860                ${optionsHTML}
2861            </div>
2862            
2863            ${modalAnsweredQuestions[modalQuizIndex] ? `
2864                <div class="mt-4 p-4 rounded-xl bg-white/10 border border-white/10 text-center animate-fade-in">
2865                    <p class="text-sm text-white/90 font-semibold">
2866                        <i class="fa-solid fa-lightbulb mr-2 text-brand-banana"></i>
2867                        ${question.explanation}
2868                    </p>
2869                </div>
2870            ` : ''}
2871            
2872            ${allAnswered ? `
2873                <div class="mt-4 p-6 rounded-xl bg-white/10 border border-white/20 text-center animate-fade-in">
2874                    <div class="text-4xl mb-3">🎉</div>
2875                    <p class="text-lg text-white font-bold">
2876                        You've completed all questions!
2877                    </p>
2878                    <div id="quizFinalScore" class="mt-3 text-2xl font-black text-brand-banana"></div>
2879                    <button onclick="resetModalQuiz()" class="mt-4 px-6 py-3 bg-brand-purple hover:bg-violet-600 text-white font-bold rounded-xl transition-all text-sm">
2880                        <i class="fa-solid fa-rotate-right mr-2"></i> Play Again
2881                    </button>
2882                    <button onclick="showFinalScoreModal()" class="mt-4 px-6 py-3 bg-brand-sky hover:bg-sky-600 text-white font-bold rounded-xl transition-all text-sm">
2883                        <i class="fa-solid fa-trophy mr-2"></i> View Results
2884                    </button>
2885                </div>
2886            ` : ''}
2887        </div>
2888    `;
2889    
2890    if (allAnswered) {
2891        displayModalFinalScore();
2892    }
2893}
2894
2895function modalSelectAnswer(answerText, optionIndex) {
2896    if (modalAnsweredQuestions[modalQuizIndex]) return;
2897    
2898    const question = bibleQuizQuestions[modalQuizIndex];
2899    const option = question.options[optionIndex];
2900    
2901    modalUserAnswers[modalQuizIndex] = answerText;
2902    modalAnsweredQuestions[modalQuizIndex] = true;
2903    
2904    showAnswerFeedback(option.isCorrect, question, answerText);
2905    
2906    if (option.isCorrect) {
2907        triggerConfetti();
2908    }
2909    
2910    renderQuizModal();
2911    updateModalScore();
2912    
2913    if (option.isCorrect && modalQuizIndex < bibleQuizQuestions.length - 1) {
2914        setTimeout(() => {
2915            const nextBtn = document.getElementById('quizNextBtn');
2916            if (nextBtn && !nextBtn.disabled) {
2917                modalNextQuestion();
2918            }
2919        }, 4000);
2920    }
2921}
2922
2923function modalNextQuestion() {
2924    if (modalQuizIndex < bibleQuizQuestions.length - 1) {
2925        modalQuizIndex++;
2926        renderQuizModal();
2927    } else {
2928        if (Object.keys(modalAnsweredQuestions).length === bibleQuizQuestions.length) {
2929            renderQuizModal();
2930        } else {
2931            if (typeof Swal !== 'undefined') {
2932                Swal.fire({
2933                    title: '📖 Not Done Yet!',
2934                    text: 'Please answer all questions before finishing!',
2935                    icon: 'info',
2936                    confirmButtonColor: '#8b5cf6',
2937                    confirmButtonText: 'Continue'
2938                });
2939            }
2940        }
2941    }
2942}
2943
2944function modalPreviousQuestion() {
2945    if (modalQuizIndex > 0) {
2946        modalQuizIndex--;
2947        renderQuizModal();
2948    }
2949}
2950
2951function updateModalScore() {
2952    let correct = 0;
2953    let answered = Object.keys(modalAnsweredQuestions).length;
2954    
2955    bibleQuizQuestions.forEach((question, index) => {
2956        if (modalAnsweredQuestions[index]) {
2957            const userAnswer = modalUserAnswers[index];
2958            const isCorrect = question.options.some(opt => opt.text === userAnswer && opt.isCorrect);
2959            if (isCorrect) correct++;
2960        }
2961    });
2962    
2963    const scoreDisplay = document.getElementById('quizScoreDisplay');
2964    if (scoreDisplay) {
2965        scoreDisplay.textContent = `${correct}/${answered}`;
2966    }
2967}
2968
2969function displayModalFinalScore() {
2970    let correct = 0;
2971    let answered = Object.keys(modalAnsweredQuestions).length;
2972    let total = bibleQuizQuestions.length;
2973    
2974    bibleQuizQuestions.forEach((question, index) => {
2975        if (modalAnsweredQuestions[index]) {
2976            const userAnswer = modalUserAnswers[index];
2977            const isCorrect = question.options.some(opt => opt.text === userAnswer && opt.isCorrect);
2978            if (isCorrect) correct++;
2979        }
2980    });
2981    
2982    const scoreDisplay = document.getElementById('quizFinalScore');
2983    if (scoreDisplay) {
2984        const percentage = Math.round((correct / total) * 100);
2985        let emoji = '🌟';
2986        if (percentage === 100) emoji = '👑';
2987        else if (percentage >= 80) emoji = '⭐';
2988        else if (percentage >= 60) emoji = '💪';
2989        else emoji = '📖';
2990        
2991        scoreDisplay.textContent = `${emoji} ${correct}/${total} (${percentage}%)`;
2992    }
2993}
2994
2995function resetModalQuiz() {
2996    modalQuizIndex = 0;
2997    modalUserAnswers = {};
2998    modalAnsweredQuestions = {};
2999    renderQuizModal();
3000    updateModalScore();
3001}
3002
3003// ============================================
3004// FINAL SCORE MODAL FUNCTIONS
3005// ============================================
3006
3007function showFinalScoreModal() {
3008    const modal = document.getElementById('finalScoreModal');
3009    let correctCount = 0;
3010    let totalQuestions = bibleQuizQuestions.length;
3011    
3012    // Check if we're in the main quiz or modal quiz
3013    const isMainQuiz = Object.keys(answeredQuestions).length > 0;
3014    const currentAnswers = isMainQuiz ? answeredQuestions : modalAnsweredQuestions;
3015    const currentUserAnswers = isMainQuiz ? userAnswers : modalUserAnswers;
3016    
3017    bibleQuizQuestions.forEach((question, index) => {
3018        if (currentAnswers[index]) {
3019            const userAnswer = currentUserAnswers[index];
3020            const isCorrect = question.options.some(opt => opt.text === userAnswer && opt.isCorrect);
3021            if (isCorrect) correctCount++;
3022        }
3023    });
3024    
3025    document.getElementById('finalScoreCorrect').textContent = correctCount;
3026    document.getElementById('finalScoreTotal').textContent = totalQuestions;
3027    
3028    const percentage = Math.round((correctCount / totalQuestions) * 100);
3029    document.getElementById('finalScorePercentage').textContent = `${percentage}%`;
3030    document.getElementById('finalScoreBar').style.width = `${percentage}%`;
3031    
3032    let emoji = '📖';
3033    let message = 'Keep learning! God\'s word is a treasure!';
3034    if (percentage === 100) {
3035        emoji = '👑';
3036        message = 'Perfect score! You\'re a Bible champion!';
3037    } else if (percentage >= 80) {
3038        emoji = '⭐';
3039        message = 'Excellent! Keep learning God\'s word!';
3040    } else if (percentage >= 60) {
3041        emoji = '💪';
3042        message = 'Good effort! Keep studying the Bible!';
3043    } else if (percentage >= 40) {
3044        emoji = '🌱';
3045        message = 'Keep growing! Every day is a chance to learn!';
3046    }
3047    
3048    document.getElementById('finalScoreEmoji').textContent = emoji;
3049    document.getElementById('finalScoreMessage').textContent = message;
3050    
3051    modal.classList.remove('hidden');
3052    document.body.classList.add('overflow-hidden');
3053}
3054
3055function closeFinalScoreModal() {
3056    document.getElementById('finalScoreModal').classList.add('hidden');
3057    document.body.classList.remove('overflow-hidden');
3058}
3059
3060// ============================================
3061// ENHANCED CONFETTI TRIGGER
3062// ============================================
3063
3064function triggerConfetti() {
3065    if (typeof confetti !== 'undefined') {
3066        confetti({
3067            particleCount: 100,
3068            spread: 70,
3069            origin: { y: 0.6 },
3070            colors: ['#0ea5e9', '#10b981', '#f59e0b', '#f43f5e', '#8b5cf6']
3071        });
3072        
3073        setTimeout(() => {
3074            confetti({
3075                particleCount: 50,
3076                spread: 50,
3077                origin: { y: 0.5 },
3078                colors: ['#f472b6', '#60a5fa', '#fbbf24']
3079            });
3080        }, 250);
3081    }
3082}
3083
3084// ============================================
3085// ENHANCED STATUS NOTICE
3086// ============================================
3087
3088function showStatusNotice(title, desc) {
3089    const notice = document.getElementById('statusNotice');
3090    if (notice) {
3091        const titleEl = document.getElementById('statusTitle');
3092        const descEl = document.getElementById('statusDesc');
3093        if (titleEl) titleEl.innerText = title;
3094        if (descEl) descEl.innerText = desc;
3095        
3096        notice.classList.remove('hidden');
3097        notice.style.display = 'flex';
3098        
3099        clearTimeout(window.noticeTimeout);
3100        window.noticeTimeout = setTimeout(() => {
3101            notice.style.display = 'none';
3102        }, 4000);
3103    }
3104}
3105
3106// ============================================
3107// SHOW LOADING STATE
3108// ============================================
3109
3110function showLoading() {
3111    const quizContainer = document.getElementById('quizContainer');
3112    if (quizContainer) {
3113        quizContainer.innerHTML = `
3114            <div class="text-center py-8">
3115                <div class="inline-block animate-spin rounded-full h-12 w-12 border-4 border-white border-t-transparent"></div>
3116                <p class="mt-4 text-white font-bold">Loading Bible questions...</p>
3117            </div>
3118        `;
3119    }
3120}
3121
3122// Close modals on outside click
3123document.addEventListener('click', function(e) {
3124    const quizModal = document.getElementById('quizModal');
3125    const activityModal = document.getElementById('activityModal');
3126    const answerModal = document.getElementById('answerFeedbackModal');
3127    const finalModal = document.getElementById('finalScoreModal');
3128    
3129    if (e.target === quizModal) {
3130        closeQuizModal();
3131    }
3132    if (e.target === activityModal) {
3133        closeActivityModal();
3134    }
3135    if (e.target === answerModal) {
3136        closeFeedbackModal();
3137    }
3138    if (e.target === finalModal) {
3139        closeFinalScoreModal();
3140    }
3141});
3142
3143// Close modals on Escape key
3144document.addEventListener('keydown', function(e) {
3145    if (e.key === 'Escape') {
3146        closeQuizModal();
3147        closeActivityModal();
3148        closeFeedbackModal();
3149        closeFinalScoreModal();
3150    }
3151});
3152
3153// Initialize the quiz
3154document.addEventListener('DOMContentLoaded', function() {
3155    showLoading();
3156    loadQuizQuestions();
3157});
3158
3159// Keyboard navigation for main section
3160document.addEventListener('keydown', function(e) {
3161    if (!isQuizLoaded) return;
3162    
3163    const quizModal = document.getElementById('quizModal');
3164    if (quizModal && quizModal.classList.contains('hidden')) {
3165        if (e.key === 'ArrowRight' || e.key === ' ') {
3166            e.preventDefault();
3167            const nextBtn = document.getElementById('nextBtn');
3168            if (nextBtn && !nextBtn.disabled) {
3169                nextQuestion();
3170            }
3171        } else if (e.key === 'ArrowLeft') {
3172            e.preventDefault();
3173            const prevBtn = document.getElementById('prevBtn');
3174            if (prevBtn && !prevBtn.disabled) {
3175                previousQuestion();
3176            }
3177        } else if (e.key === 'r' || e.key === 'R') {
3178            resetMainQuiz();
3179        }
3180    }
3181});
3182
3183
3184
3185
3186
3187
3188
3189
3190
3191
3192
3193// ============================================
3194// BIBLE COLORING GAME
3195// ============================================
3196
3197// Coloring state
3198let coloringState = {
3199    currentScene: 0,
3200    selectedColor: '#3b82f6',
3201    brushSize: 8,
3202    isDrawing: false,
3203    lastX: 0,
3204    lastY: 0,
3205    canvas: null,
3206    ctx: null,
3207    isLoaded: false
3208};
3209
3210// Bible Coloring Scenes
3211const coloringScenes = [
3212    {
3213        id: 0,
3214        title: 'David the Shepherd',
3215        description: 'Color David as he watches over his sheep',
3216        verse: '"The Lord is my Shepherd" - Psalm 23:1',
3217        fact: 'David was a shepherd boy who became a great king! He wrote many Psalms praising God.',
3218        colors: ['#8B7355', '#4A7C59', '#C4A882', '#6B8E23', '#DEB887'],
3219        shapes: [
3220            { type: 'circle', x: 0.3, y: 0.4, r: 0.08, color: '#8B7355' }, // Head
3221            { type: 'rect', x: 0.25, y: 0.48, w: 0.1, h: 0.25, color: '#4A7C59' }, // Body
3222            { type: 'circle', x: 0.45, y: 0.35, r: 0.05, color: '#C4A882' }, // Sheep body
3223            { type: 'circle', x: 0.5, y: 0.32, r: 0.03, color: '#DEB887' }, // Sheep head
3224        ]
3225    },
3226    {
3227        id: 1,
3228        title: 'Noah\'s Ark',
3229        description: 'Color the big boat and all the animals!',
3230        verse: '"Noah did everything just as God commanded him" - Genesis 6:22',
3231        fact: 'Noah was 600 years old when the flood came! He built the ark for 120 years.',
3232        colors: ['#8B4513', '#D2691E', '#A0522D', '#CD853F', '#F4A460'],
3233        shapes: [
3234            { type: 'rect', x: 0.15, y: 0.3, w: 0.7, h: 0.5, color: '#8B4513' }, // Ark body
3235            { type: 'rect', x: 0.3, y: 0.2, w: 0.15, h: 0.1, color: '#D2691E' }, // Cabin
3236            { type: 'circle', x: 0.2, y: 0.3, r: 0.05, color: '#A0522D' }, // Window
3237            { type: 'circle', x: 0.35, y: 0.3, r: 0.05, color: '#A0522D' }, // Window
3238        ]
3239    },
3240    {
3241        id: 2,
3242        title: 'Jonah and the Whale',
3243        description: 'Color the big fish and the prophet!',
3244        verse: '"The Lord provided a great fish to swallow Jonah" - Jonah 1:17',
3245        fact: 'Jonah was inside the fish for three days and three nights before God made it vomit him out!',
3246        colors: ['#1E90FF', '#4169E1', '#000080', '#87CEEB', '#4682B4'],
3247        shapes: [
3248            { type: 'ellipse', x: 0.2, y: 0.5, rx: 0.35, ry: 0.2, color: '#1E90FF' }, // Fish body
3249            { type: 'triangle', x: 0.55, y: 0.3, size: 0.08, color: '#4169E1' }, // Tail
3250            { type: 'circle', x: 0.25, y: 0.45, r: 0.04, color: '#F
3250FFFFF' }, // Eye
3251            { type: 'ellipse', x: 0.35, y: 0.5, rx: 0.06, ry: 0.04, color: '#87CEEB' }, // Mouth
3252        ]
3253    },
3254    {
3255        id: 3,
3256        title: 'Daniel in the Lions\' Den',
3257        description: 'Color Daniel and the lions!',
3258        verse: '"God sent His angel to shut the mouths of the lions" - Daniel 6:22',
3259        fact: 'Daniel was thrown into the lion\'s den because he prayed to God instead of the king!',
3260        colors: ['#DAA520', '#B8860B', '#FFD700', '#CD853F', '#8B7355'],
3261        shapes: [
3262            { type: 'circle', x: 0.3, y: 0.4, r: 0.07, color: '#DAA520' }, // Daniel head
3263            { type: 'rect', x: 0.25, y: 0.47, w: 0.1, h: 0.2, color: '#B8860B' }, // Daniel body
3264            { type: 'ellipse', x: 0.6, y: 0.5, rx: 0.12, ry: 0.08, color: '#CD853F' }, // Lion
3265            { type: 'circle', x: 0.65, y: 0.45, r: 0.05, color: '#DAA520' }, // Lion head
3266        ]
3267    },
3268    {
3269        id: 4,
3270        title: 'Moses and the Burning Bush',
3271        description: 'Color the burning bush and Moses!',
3272        verse: '"The bush was on fire but did not burn up" - Exodus 3:2',
3273        fact: 'God spoke to Moses from a burning bush and told him to lead His people out of Egypt!',
3274        colors: ['#228B22', '#006400', '#32CD32', '#FF4500', '#FF6347'],
3275        shapes: [
3276            { type: 'rect', x: 0.4, y: 0.2, w: 0.05, h: 0.4, color: '#228B22' }, // Bush trunk
3277            { type: 'circle', x: 0.4, y: 0.2, r: 0.12, color: '#006400' }, // Bush top
3278            { type: 'circle', x: 0.45, y: 0.3, r: 0.08, color: '#FF4500' }, // Fire
3279            { type: 'circle', x: 0.35, y: 0.25, r: 0.06, color: '#F
3279F6347' }, // Fire
3280        ]
3281    },
3282    {
3283        id: 5,
3284        title: 'Jesus with Children',
3285        description: 'Color Jesus surrounded by happy children!',
3286        verse: '"Let the little children come to me" - Matthew 19:14',
3287        fact: 'Jesus loves all children and said that the kingdom of heaven belongs to them!',
3288        colors: ['#FFD700', '#DAA520', '#FF6347', '#FF4500', '#8B4513'],
3289        shapes: [
3290            { type: 'circle', x: 0.3, y: 0.35, r: 0.08, color: '#DAA520' }, // Jesus head
3291            { type: 'rect', x: 0.25, y: 0.43, w: 0.1, h: 0.25, color: '#FFD700' }, // Jesus body
3292            { type: 'circle', x: 0.55, y: 0.5, r: 0.06, color: '#FF6347' }, // Child head
3293            { type: 'rect', x: 0.5, y: 0.56, w: 0.1, h: 0.12, color: '#FF4500' }, // Child body
3294            { type: 'circle', x: 0.65, y: 0.45, r: 0.05, color: '#8B4513' }, // Child head
3295            { type: 'rect', x: 0.6, y: 0.5, w: 0.1, h: 0.15, color: '#DAA520' }, // Child body
3296        ]
3297    }
3298];
3299
3300// Initialize coloring canvas
3301function initColoring() {
3302    const canvas = document.getElementById('coloringCanvas');
3303    if (!canvas) return;
3304    
3305    const rect = canvas.getBoundingClientRect();
3306    const size = Math.min(rect.width, rect.height, 500);
3307    
3308    canvas.width = size * 2; // 2x for retina
3309    canvas.height = size * 2;
3310    canvas.style.width = size + 'px';
3311    canvas.style.height = size + 'px';
3312    
3313    coloringState.canvas = canvas;
3314    coloringState.ctx = canvas.getContext('2d');
3315    coloringState.isLoaded = true;
3316    
3317    // Scale context
3318    coloringState.ctx.scale(2, 2);
3319    
3320    // Load first scene
3321    loadColoringScene(0);
3322    
3323    // Set up event listeners
3324    setupCanvasEvents();
3325}
3326
3327// Set up canvas events for drawing
3328function setupCanvasEvents() {
3329    const canvas = document.getElementById('coloringCanvas');
3330    if (!canvas) return;
3331    
3332    // Mouse events
3333    canvas.addEventListener('mousedown', startDrawing);
3334    canvas.addEventListener('mousemove', draw);
3335    canvas.addEventListener('mouseup', stopDrawing);
3336    canvas.addEventListener('mouseleave', stopDrawing);
3337    
3338    // Touch events
3339    canvas.addEventListener('touchstart', handleTouchStart);
3340    canvas.addEventListener('touchmove', handleTouchMove);
3341    canvas.addEventListener('touchend', stopDrawing);
3342}
3343
3344// Get canvas coordinates from event
3345function getCanvasCoords(e) {
3346    const canvas = coloringState.canvas;
3347    const rect = canvas.getBoundingClientRect();
3348    const scaleX = canvas.width / 2 / rect.width;
3349    const scaleY = canvas.height / 2 / rect.height;
3350    
3351    let clientX, clientY;
3352    if (e.touches) {
3353        clientX = e.touches[0].clientX;
3354        clientY = e.touches[0].clientY;
3355        e.preventDefault();
3356    } else {
3357        clientX = e.clientX;
3358        clientY = e.clientY;
3359    }
3360    
3361    return {
3362        x: (clientX - rect.left) * scaleX,
3363        y: (clientY - rect.top) * scaleY
3364    };
3365}
3366
3367// Start drawing
3368function startDrawing(e) {
3369    const coords = getCanvasCoords(e);
3370    coloringState.isDrawing = true;
3371    coloringState.lastX = coords.x;
3372    coloringState.lastY = coords.y;
3373}
3374
3375// Draw
3376function draw(e) {
3377    if (!coloringState.isDrawing) return;
3378    
3379    const coords = getCanvasCoords(e);
3380    const ctx = coloringState.ctx;
3381    
3382    ctx.beginPath();
3383    ctx.moveTo(coloringState.lastX, coloringState.lastY);
3384    ctx.lineTo(coords.x, coords.y);
3385    ctx.strokeStyle = coloringState.selectedColor;
3386    ctx.lineWidth = coloringState.brushSize;
3387    ctx.lineCap = 'round';
3388    ctx.lineJoin = 'round';
3389    ctx.stroke();
3390    
3391    coloringState.lastX = coords.x;
3392    coloringState.lastY = coords.y;
3393    
3394    updateProgress();
3395}
3396
3397// Stop drawing
3398function stopDrawing() {
3399    coloringState.isDrawing = false;
3400}
3401
3402// Handle touch start
3403function handleTouchStart(e) {
3404    e.preventDefault();
3405    startDrawing(e);
3406}
3407
3408// Handle touch move
3409function handleTouchMove(e) {
3410    e.preventDefault();
3411    draw(e);
3412}
3413
3414// Select color
3415function selectColor(color) {
3416    coloringState.selectedColor = color;
3417    
3418    // Update UI
3419    document.querySelectorAll('.color-btn').forEach(btn => {
3420        btn.classList.remove('ring-2', 'ring-white', 'ring-offset-2', 'ring-offset-white/10');
3421        if (btn.dataset.color === color) {
3422            btn.classList.add('ring-2', 'ring-white', 'ring-offset-2', 'ring-offset-white/10');
3423        }
3424    });
3425}
3426
3427// Set brush size
3428function setBrushSize(size) {
3429    coloringState.brushSize = size;
3430    
3431    document.querySelectorAll('.brush-size-btn').forEach(btn => {
3432        btn.classList.remove('bg-white/20', 'border', 'border-white/20');
3433        btn.classList.add('bg-white/10');
3434        if (parseInt(btn.dataset.size) === size) {
3435            btn.classList.add('bg-white/20', 'border', 'border-white/20');
3436            btn.classList.remove('bg-white/10');
3437        }
3438    });
3439}
3440
3441// Load coloring scene
3442function loadColoringScene(index) {
3443    const scene = coloringScenes[index];
3444    if (!scene) return;
3445    
3446    coloringState.currentScene = index;
3447    
3448    // Update info
3449    document.getElementById('coloringTitle').textContent = scene.title;
3450    document.getElementById('coloringDescription').textContent = scene.description;
3451    document.getElementById('coloringVerse').textContent = scene.verse;
3452    document.getElementById('coloringFact').textContent = scene.fact;
3453    
3454    // Update scene buttons
3455    document.querySelectorAll('.scene-btn').forEach((btn, i) => {
3456        btn.classList.remove('bg-white/20', 'border-white/30');
3457        btn.classList.add('bg-white/10');
3458        if (i === index) {
3459            btn.classList.add('bg-white/20', 'border-white/30');
3460            btn.classList.remove('bg-white/10');
3461        }
3462    });
3463    
3464    // Draw the scene
3465    drawScene(scene);
3466    resetProgress();
3467}
3468
3469// Draw a coloring scene
3470function drawScene(scene) {
3471    const ctx = coloringState.ctx;
3472    const canvas = coloringState.canvas;
3473    
3474    // Clear canvas
3475    ctx.clearRect(0, 0, canvas.width / 2, canvas.height / 2);
3476    
3477    // Draw background
3478    ctx.fillStyle = '#f0f4f8';
3479    ctx.fillRect(0, 0, canvas.width / 2, canvas.height / 2);
3480    
3481    // Draw grid lines (like a coloring book)
3482    ctx.strokeStyle = '#94a3b8';
3483    ctx.lineWidth = 1;
3484    ctx.setLineDash([4, 4]);
3485    
3486    // Draw shapes
3487    scene.shapes.forEach(shape => {
3488        ctx.strokeStyle = '#1e293b';
3489        ctx.lineWidth = 2;
3490        ctx.setLineDash([]);
3491        
3492        switch(shape.type) {
3493            case 'circle':
3494                ctx.beginPath();
3495                ctx.arc(shape.x * canvas.width / 2, shape.y * canvas.height / 2, shape.r * canvas.width / 2, 0, Math.PI * 2);
3496                ctx.stroke();
3497                break;
3498            case 'rect':
3499                ctx.strokeRect(
3500                    shape.x * canvas.width / 2,
3501                    shape.y * canvas.height / 2,
3502                    shape.w * canvas.width / 2,
3503                    shape.h * canvas.height / 2
3504                );
3505                break;
3506            case 'ellipse':
3507                ctx.beginPath();
3508                ctx.ellipse(
3509                    shape.x * canvas.width / 2,
3510                    shape.y * canvas.height / 2,
3511                    shape.rx * canvas.width / 2,
3512                    shape.ry * canvas.height / 2,
3513                    0, 0, Math.PI * 2
3514                );
3515                ctx.stroke();
3516                break;
3517            case 'triangle':
3518                const size = shape.size * canvas.width / 2;
3519                ctx.beginPath();
3520                ctx.moveTo(shape.x * canvas.width / 2, (shape.y - size) * canvas.height / 2);
3521                ctx.lineTo((shape.x - size) * canvas.width / 2, (shape.y + size) * canvas.height / 2);
3522                ctx.lineTo((shape.x + size) * canvas.width / 2, (shape.y + size) * canvas.height / 2);
3523                ctx.closePath();
3524                ctx.stroke();
3525                break;
3526        }
3527    });
3528    
3529    // Add a cute border
3530    ctx.strokeStyle = '#1e293b';
3531    ctx.lineWidth = 3;
3532    ctx.setLineDash([]);
3533    ctx.strokeRect(5, 5, canvas.width / 2 - 10, canvas.height / 2 - 10);
3534}
3535
3536// Clear canvas (but keep the scene outline)
3537function clearCanvas() {
3538    if (confirm('Clear all colors and start over?')) {
3539        loadColoringScene(coloringState.currentScene);
3540        showStatusNotice('🔄 Canvas Cleared', 'Start coloring again!');
3541    }
3542}
3543
3544// Reset coloring
3545function resetColoring() {
3546    loadColoringScene(coloringState.currentScene);
3547    showStatusNotice('🔄 Reset Complete', 'Ready to color again!');
3548}
3549
3550// Random color
3551function randomColor() {
3552    const colors = ['#ef4444', '#f59e0b', '#eab308', '#22c55e', '#3b82f6', '#8b5cf6', '#ec4899', '#f97316', '#14b8a6'];
3553    const randomColor = colors[Math.floor(Math.random() * colors.length)];
3554    selectColor(randomColor);
3555    showStatusNotice('🎨 Random Color', 'Try this new color!');
3556}
3557
3558// Update coloring progress
3559function updateProgress() {
3560    const canvas = coloringState.canvas;
3561    const ctx = coloringState.ctx;
3562    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
3563    const data = imageData.data;
3564    
3565    let coloredPixels = 0;
3566    let totalPixels = 0;
3567    
3568    // Check for colored pixels (not white/transparent)
3569    for (let i = 3; i < data.length; i += 4) {
3570        totalPixels++;
3571        if (data[i] > 0) {
3572            coloredPixels++;
3573        }
3574    }
3575    
3576    const progress = Math.min(100, Math.round((coloredPixels / totalPixels) * 100));
3577    document.getElementById('coloringProgress').style.width = progress + '%';
3578    document.getElementById('coloringProgressText').textContent = progress + '%';
3579}
3580
3581// Reset progress
3582function resetProgress() {
3583    document.getElementById('coloringProgress').style.width = '0%';
3584    document.getElementById('coloringProgressText').textContent = '0%';
3585}
3586
3587// Download coloring
3588function downloadColoring() {
3589    const canvas = coloringState.canvas;
3590    const link = document.createElement('a');
3591    link.download = `bible-coloring-${coloringScenes[coloringState.currentScene].title.toLowerCase().replace(/\s/g, '-')}.png`;
3592    link.href = canvas.toDataURL('image/png');
3593    link.click();
3594    showStatusNotice('💾 Saved!', 'Your coloring has been downloaded!');
3595}
3596
3597// Initialize coloring when modal opens
3598document.addEventListener('DOMContentLoaded', function() {
3599    // Override openActivityModal to initialize coloring
3600    const originalOpen = openActivityModal;
3601    openActivityModal = function() {
3602        originalOpen();
3603        setTimeout(initColoring, 300);
3604    };
3605});
3606
3607    </script>
3607
3608
3609
3610<!-- Include the registration modal -->
3611
3612
3613<div class="modal fade" id="healingRegistrationModal" tabindex="-1" aria-labelledby="healingRegistrationModalLabel" aria-hidden="true">
3614    <div class="modal-dialog modal-lg">
3615        <div class="modal-content healing-modal">
3616            <!-- Header with Healing Theme -->
3617            <div class="modal-header healing-header">
3618                <h5 class="modal-title" id="healingRegistrationModalLabel">
3619                    <i class="fas fa-hands-praying me-2"></i>Join Healing Streams
3620                </h5>
3621                <button type="button" class="btn-close healing-close" data-bs-dismiss="modal" aria-label="Close"></button>
3622            </div>
3623
3624            <div class="modal-body">
3625                <!-- Tab Navigation -->
3626                <ul class="nav nav-tabs healing-tabs mb-4" id="registrationTab" role="tablist">
3627                    <li class="nav-item" role="presentation">
3628                        <button class="nav-link active" id="email-tab" data-bs-toggle="tab" data-bs-target="#email-tab-pane" type="button">
3629                            <i class="fas fa-envelope me-2"></i>Email Registration
3630                        </button>
3631                    </li>
3632                    <li class="nav-item" role="presentation">
3633                        <button class="nav-link" id="phone-tab" data-bs-toggle="tab" data-bs-target="#phone-tab-pane" type="button">
3634                            <i class="fas fa-phone-alt me-2"></i>Phone Registration
3635                        </button>
3636                    </li>
3637                </ul>
3638
3639                <!-- Form Content -->
3640                <form id="healingRegistrationForm" action="register.php" method="POST">
3641
3642                    <!-- Progress Bar -->
3643                    <div class="healing-progress mb-4">
3644                        <div class="healing-progress-bar" role="progressbar" style="width: 0%"></div>
3645                    </div>
3646
3647                    <!-- Tab Content -->
3648                    <div class="tab-content" id="registrationTabContent">
3649                        <!-- Email Tab -->
3650                        <div class="tab-pane fade show active" id="email-tab-pane" role="tabpanel">
3651                            <div class="mb-3">
3652                                <label for="email" class="form-label">Email Address</label>
3653                                <input type="email"  autocapitalize="off" spellcheck="false" autocomplete="email" class="form-control healing-input" id="email" name="email" placeholder="[email protected]">
3654                                <div class="invalid-feedback" id="email-error"></div>
3655                            </div>
3656                        </div>
3657
3658                        <!-- Phone Tab -->
3659                        <!-- Intl Tel Input CSS -->
3660                        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css">
3661                        <!-- Intl Tel Input JS -->
3662                        
3662<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
3662
3663
3664                        <div class="tab-pane fade" id="phone-tab-pane" role="tabpanel">
3665                            <div class="mb-3">
3666                                <label for="phone" class="form-label">Phone Number</label>
3667                                <input type="tel" class="form-control healing-input w-100" id="phone" name="phone">
3668                                <input type="hidden" id="country_code" name="country_code">
3669                                <div class="invalid-feedback" id="phone-error"></div>
3670                            </div>
3671                        </div>
3672
3673                        <!-- Optional CSS fix in case intl-tel-input overrides width -->
3674                        <style>
3675                            .iti {
3676                                width: 100%;
3677                            }
3678                        </style>
3679
3680                        
3680<script>
3681                            document.addEventListener("DOMContentLoaded", function() {
3682                                const phoneInput = document.querySelector("#phone");
3683                                const countryCodeInput = document.querySelector("#country_code");
3684
3685                                const iti = window.intlTelInput(phoneInput, {
3686                                    preferredCountries: ['ng', 'us', 'gb'],
3687                                    initialCountry: "ng",
3688                                    separateDialCode: true,
3689                                    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"
3690                                });
3691
3692                                phoneInput.addEventListener("input", function() {
3693                                    this.value = this.value.replace(/\D/g, '');
3694                                });
3695
3696                                phoneInput.addEventListener("countrychange", function() {
3697                                    countryCodeInput.value = iti.getSelectedCountryData().dialCode;
3698                                });
3699
3700                                // Initialize hidden field
3701                                countryCodeInput.value = iti.getSelectedCountryData().dialCode;
3702                            });
3703                        </script>
3703
3704
3705                    </div>
3706
3707                    <!-- Common Fields -->
3708                    <div class="mb-3">
3709                        <label for="fullname" class="form-label">Full Name</label>
3710                        <input type="text" class="form-control healing-input" id="fullname" name="fullname" placeholder="Your full name" required>
3711                    </div>
3712
3713                    <div class="mb-3" id="zone_field_wrapper" style="">
3714                        <label for="zone_id" class="form-label">Zone </label>
3715                        <select class="form-select healing-input" id="zone_id" name="zone_id" required style="display:inline;">
3716                            <option value="28892">Not Applicable</option>
3717                                                            <option value="1" >Australia and South Pacific</option>
3718                                                            <option value="2" >BLW KENYA ZONE</option>
3719                                                            <option value="3" >BLW SOUTH AFRICA ZONE D</option>
3720                                                            <option value="4" >BLW GHANA ZONE A</option>
3721                                                            <option value="5" >BLW GHANA ZONE B</option>
3722                                                            <option value="6" >BLW SOUTH AFRICA ZONE A</option>
3723                                                            <option value="7" >BLW UK ZONE A</option>
3724                                                            <option value="8" >BLW UK ZONE B</option>
3725                                                            <option value="9" >BLW SOUTH AFRICA ZONE B</option>
3726                                                            <option value="10" >BLW SOUTH AFRICA ZONE C</option>
3727                                                            <option value="11" >BLW USA GROUP 3</option>
3728                                                            <option value="12" >BLW SOUTH AFRICA ZONE E</option>
3729                                                            <option value="13" >BLW ZONE A</option>
3730                                                            <option value="14" >BLW ZONE B</option>
3731                                                            <option value="15" >BLW ZONE C</option>
3732                                                            <option value="16" >BLW ZONE D</option>
3733                                                            <option value="17" >BLW ZONE E</option>
3734                                                            <option value="18" >BLW ZONE F</option>
3735                                                            <option value="19" >BLW ZONE G </option>
3736                                                            <option value="20" >BLW ZONE H</option>
3737                                                            <option value="21" >BLW ZONE I</option>
3738                                                            <option value="22" >BLW ZONE J</option>
3739                                                            <option value="23" >BLW ZONE K</option>
3740                                                            <option value="24" >BLW ZONE L</option>
3741                                                            <option value="25" >Toronto Zone</option>
3742                                                            <option value="26" >
3742Quebec Zone</option>
3743                                                            <option value="27" >Abuja Zone</option>
3744                                                            <option value="28" >Accra Ghana Zone</option>
3745                                                            <option value="29" >Benin Zone 1</option>
3746                                                            <option value="30" >DSP UK Zone 1</option>
3747                                                            <option value="31" >DSP UK Zone 2</option>
3748                                                            <option value="32" >DSP UK Zone 3</option>
3749                                                            <option value="33" >DSP UK Zone 4</option>
3750                                                            <option value="34" >Kenya Zone</option>
3751                                                            <option value="35" >Lagos Virtual Zone</option>
3752                                                            <option value="36" >Lagos Zone 1</option>
3753                                                            <option value="37" >Lagos Zone 2</option>
3754                                                            <option value="38" >Lagos Zone 3</option>
3755                                                            <option value="39" >Lagos Zone 4</option>
3756                                                            <option value="40" >Lagos Zone 5</option>
3757                                                            <option value="41" >Midwest Zone</option>
3758                                                            <option value="42" >Onitsha Zone</option>
3759                                                            <option value="43" >Port Harcourt Zone 1</option>
3760                                                            <option value="44" >Port Harcourt Zone 2</option>
3761                                                            <option value="45" >Port Harcourt Zone 3</option>
3762                                                            <option value="46" >Southern Africa Zone 1</option>
3763                                                            <option value="47" >Southern Africa Zone 5</option>
3764                                                            <option value="48" >USA Region 3</option>
3765                                                            <option value="49" >USA Dallas Zone</option>
3766                                                            <option value="50" >Eastern Europe Region</option>
3767                                                            <option value="51" >Western Europe Zone 1</option>
3768                                                            <option value="52" >Western Europe Zone 2</option>
3769                                                            <option value="53" >Western Europe Zone 3</option>
3770                                                            <option value="54" >Western Europe Zone 4</option>
3771                                                            <option value="55" >EWCA Zone 1</option>
3772                                                            <option value="56" >EWCA Zone 2</option>
3773                                                            <option value="57" >EWCA Zone 3</option>
3774                                                            <option value="58" >EWCA Zone 4</option>
3775                                                            <option value="59" >EWCA Zone 5</option>
3776                                                            <option value="60" >EWCA Zone 6</option>
3777                                                            <option value="61" >Middle East Zone</option>
3778                                                            <option value="62" >Abeokuta Ministry Centre</option>
3779                                                            <option value="63" >Abuja Ministry Centre</option>
3780                                                            <option value="64" >Calabar Ministry Centre</option>
3781                                                            <option value="65" >Port Harcourt Ministry Centre</option>
3782                                                            <option value="66" >Warri Ministry Centre</option>
3783                                                            <option value="67" >Aba Zone</option>
3784                                                            <option value="68" >Benin Virtual Zone</option>
3785                                                            <option value="69" >Edo North & Central Zone</option>
3786                                                            <option value="70" >NSE Zone 1</option>
3787                                                            <option value="71" >NSE Zone 2</option>
3788                                                            <option value="72" >NSS Zone 1</option>
3789                                                            <option value="73" >NSS Zone 2</option>
3790                                                            <option value="74" >NSW Zone 1</option>
3791                                                            <option value="75" >NSW Zone 2</option>
3792                                                            <option value="76" >NSW Zone 3</option>
3793                                                            <option value="77" >NNC Zone 1</option>
3794                                                            <option value="78" >NNC Zone 2</option>
3795                                                            <option value="79" >NNE Zone 1</option>
3796                                                            <option value="80" >NNW Zone 1</option>
3797                                                            <option value="81" >NNW Zone 2</option>
3798                                                            <option value="82" >South America Region</option>
3799                                                            <option value="83" >Southern Africa Zone 2</option>
3800                                                            <option value="84" >Southern Africa Zone 3</option>
3801                                                            <option value="85" >Southern Africa Zone 4</option>
3802                                                            <option value="86" >USA Zone 1, Region 1</option>
3803                                                            <option value="87" >USA Zone 2, Region 1</option>
3804                                                            <option value="88" >USA Region 2</option>
3805                                                            <option value="89" >UK Zone 1, Region 2</option>
3806                                                            <option value="90" >UK Zone 2, Region 2</option>
3807                                                            <option value="91" >UK Zone 3, Region 2</option>
3808                                                            <option value="92" >UK Zone 4, Region 2</option>
3809                                                            <option value="93" >Ministers Network Team A</option>
3810                                                            <option value="94" >GYLF</option>
3811                                                            <option value="95" >Loveworld Medical Missions</option>
3812                                                            <option value="96" >Future Africa Leaders Foundation</option>
3813                                                            <option value="97" >Church Growth International</option>
3814                                                            <option value="98" >Online Publicity & Engagement</option>
3815                                                            <option value="99" >Volunteers Network</option>
3816                                                            <option value="100" >Healing School Cyber Church</option>
3817                                                            <option value="101" >Healing School Prayer Network</option>
3818                                                            <option value="102" >Healing School Ambassadors Network</option>
3819                                                            <option value="103" >Healing School Translators</option>
3820                                                            <option value="104" >Healing School Digital Evangelists</option>
3821                                                            <option value="105" >International School of Ministry</option>
3822                                                            <option value="106" >Healing School Digital Marketing</option>
3823                                                            <option value="107" >Healing School Response Centre</option>
3824                                                            <option value="108" >BLW 2nd Tier Zone</option>
3825                                                            <option value="109" >Healing Streams Ambassadors Network</option>
3826                                                            <option value="110" >CHRIST EMBASSY.ORG</option>
3827                                                            <option value="111" >PASTORCHRISONLINE</option>
3828                                                            <option value="112" >
3828LOVEWORLD SAT</option>
3829                                                            <option value="113" >LOVEWORLD XP</option>
3830                                                            <option value="114" >LOVEWORLD TV UK</option>
3831                                                            <option value="115" >CAMPUS MINISTRY</option>
3832                                                            <option value="116" >INNERCITY MISSIONS</option>
3833                                                            <option value="117" >LTM AND RADIO</option>
3834                                                            <option value="118" >LOVEWORLD USA</option>
3835                                                            <option value="119" >RHAPSODY</option>
3836                                                            <option value="132" >UK International Office</option>
3837                                                            <option value="133" >USA International Office</option>
3838                                                            <option value="134" >Canada International Office</option>
3839                                                            <option value="135" >LOVEWORLD CHURCH</option>
3840                                                            <option value="136" >BLW USA GROUP 1</option>
3841                                                            <option value="137" >BLW USA GROUP 2</option>
3842                                                            <option value="138" >EAST ASIA REGION</option>
3843                                                            <option value="139" >USA GROUP 4</option>
3844                                                            <option value="140" >Cameroon Group 1</option>
3845                                                            <option value="141" >Cameroon Group 2</option>
3846                                                            <option value="142" >Uganda Group</option>
3847                                                            <option value="143" >Ethiopia Group 1</option>
3848                                                            <option value="144" >Ethiopia Group 2</option>
3849                                                            <option value="145" >Canada Group</option>
3850                                                            <option value="146" >LOVEWORLD CANADA</option>
3851                                                            <option value="147" >LOVEWORLD PERSIA</option>
3852                                                            <option value="148" >LOVEWORLD INDIA</option>
3853                                                            <option value="149" >LOVEWORLD GRADUATE NETWORK</option>
3854                                                            <option value="150" >HEALING CENTRE MANAGERS</option>
3855                                                            <option value="151" >LOVEWORLD TEENS MINISTRY</option>
3856                                                            <option value="173" >TEAM A - ISM</option>
3857                                                            <option value="174" >TEAM B - ISM</option>
3858                                                            <option value="175" >TEAM C - ISM</option>
3859                                                            <option value="432" >HSLHS Student Groups</option>
3860                                                            <option value="450" >Loveworld Cell Ministry</option>
3861                                                            <option value="1714" >HEALING SCHOOL</option>
3862                                                            <option value="1915" >LOVEWORLD TEENS MINISTRY</option>
3863                                                            <option value="1916" >LOVEWORLD CHILDREN MINISTRY</option>
3864                                                            <option value="2087" >LOVEWORLD STAFF COMMUNITY</option>
3865                                                            <option value="2146" >LOVETOONS</option>
3866                                                            <option value="2722" >SA REGIONAL OFFICE</option>
3867                                                            <option value="2723" >Family Prayer Network</option>
3868                                                            <option value="3229" >Global Missions Mandate</option>
3869                                                            <option value="4142" >SSM ADVANCE</option>
3870                                                            <option value="5156" >CE PHILIPPINES</option>
3871                                                            <option value="5370" >Loveworld Impressions</option>
3872                                                            <option value="6841" >Healing Streams Live</option>
3873                                                            <option value="8282" >Lagos Zone 6</option>
3874                                                            <option value="8637" >Ottawa Zone, Canada</option>
3875                                                            <option value="8638" >NSE Zone 3</option>
3876                                                            <option value="8639" >Lagos Sub Zone A</option>
3877                                                            <option value="8640" >Lagos Sub Zone B</option>
3878                                                            <option value="8641" >Lagos Sub Zone C</option>
3879                                                            <option value="8642" >Ibadan Zone 1</option>
3880                                                            <option value="8742" >TEAM D - ISM</option>
3881                                                            <option value="8743" >ISM ONLINE SCHOOL</option>
3882                                                            <option value="10259" >C.E AMSTERDAM</option>
3883                                                            <option value="25313" >SONS OF MINISTRY</option>
3884                                                            <option value="26422" >VGSS LOVEWORLD</option>
3885                                                            <option value="26570" >BLW Namibia Group</option>
3886                                                            <option value="26571" >BLW Ireland Group</option>
3887                                                            <option value="26572" >BLW Cyprus Group</option>
3888                                                            <option value="26589" >METASPACE</option>
3889                                                            <option value="26679" >SPECIAL MINISTERS TEAM</option>
3890                                                            <option value="26861" >Institute of Strategic Leadership Training</option>
3891                                                            <option value="27565" >Web & Mobile Notification</option>
3892                                                            <option value="28554" >NETSHIFT DIGITAL</option>
3893                                                            <option value="28560" >Ministers Network Team B</option>
3894                                                            <option value="28561" >Nigeria South West Zone 4</option>
3895                                                            <option value="28562" >Nigeria South West Zone 5</option>
3896                                                            <option value="28563" >Strategic Services Management</option>
3897                                                            <option value="28564" >NSS Zone 3</option>
3898                                                            <option value="28565" >Cape Town Zone 1</option>
3899                                                            <option value="28566" >Cape Town Zone 2</option>
3900                                                            <option value="28569" >Durban, South Africa</option>
3901                                                            <option value="28590" >Healing School Southern Africa Office</option>
3902                                                            <option value="28592" >LN247</option>
3903                                                            <option value="28642" >INDIA ZONE</option>
3904                                                            <option value="28673" >BLW UK Sub Zone C</option>
3905                                                            <option value="28871" >DSC sub zone Delta State</option>
3906                                                            <option value="28873" >Ministers Network Team c</option>
3907                                                            <option value="28876" >Ministers Network Team D</option>
3908                                                            <option value="28879" >Healing School Translators</option>
3909                                                            <option value="28882" >SPREAD FAITH CAMPAIGN</option>
3910                                                            <option value="28885" >HS Global Response Center UK, Europe, Canada Region</option>
3911                                                            <option value="28888" >HS Global Response Center US Regions</option>
3912                                                            <option value="28891" >HS Global Response Center Africa Region</option>
3913                                                            <option value="28892" >Not Applicable</option>
3914                            
3915                        </select>
3916                        <div id="zone_auto_msg" class="form-text" style="display:none;margin-top:6px;color:#198754;">Zone set automatically from your link.</div>
3917                    </div>
3918
3919                    <div class="mb-3">
3920                        <label for="age" class="form-label"> Age : 1 - 12 years </label>
3921                        <input type="number" class="form-control healing-input" id="age" name="age" min="1" max="12" required>
3922                    </div>
3923                    
3923<script>
3924                        document.getElementById('age').addEventListener('input', function() {
3925                            let value = parseInt(this.value);
3926                            if (value > 12) this.value = 12;
3927                            if (value < 1) this.value = 1;
3928                        });
3929                    </script>
3929
3930
3931                    <!-- Location Fields -->
3932                    <div class="row g-3">
3933                        <div class="col-md-6">
3934                            <label for="country_id" class="form-label">Country</label>
3935                            <select class="form-select healing-input" id="country_id" name="country_id" required>
3936                                <option value="" disabled selected>Select country</option>
3937                                                                    <option value="1">Afghanistan</option>
3938                                                                    <option value="2">Aland Islands</option>
3939                                                                    <option value="3">Albania</option>
3940                                                                    <option value="4">Algeria</option>
3941                                                                    <option value="5">American Samoa</option>
3942                                                                    <option value="6">Andorra</option>
3943                                                                    <option value="7">Angola</option>
3944                                                                    <option value="8">Anguilla</option>
3945                                                                    <option value="9">Antarctica</option>
3946                                                                    <option value="10">Antigua And Barbuda</option>
3947                                                                    <option value="11">Argentina</option>
3948                                                                    <option value="12">Armenia</option>
3949                                                                    <option value="13">Aruba</option>
3950                                                                    <option value="14">Australia</option>
3951                                                                    <option value="15">Austria</option>
3952                                                                    <option value="16">Azerbaijan</option>
3953                                                                    <option value="17">The Bahamas</option>
3954                                                                    <option value="18">Bahrain</option>
3955                                                                    <option value="19">Bangladesh</option>
3956                                                                    <option value="20">Barbados</option>
3957                                                                    <option value="21">Belarus</option>
3958                                                                    <option value="22">Belgium</option>
3959                                                                    <option value="23">Belize</option>
3960                                                                    <option value="24">Benin</option>
3961                                                                    <option value="25">Bermuda</option>
3962                                                                    <option value="26">Bhutan</option>
3963                                                                    <option value="27">Bolivia</option>
3964                                                                    <option value="28">Bosnia and Herzegovina</option>
3965                                                                    <option value="29">Botswana</option>
3966                                                                    <option value="30">Bouvet Island</option>
3967                                                                    <option value="31">Brazil</option>
3968                                                                    <option value="32">British Indian Ocean Territory</option>
3969                                                                    <option value="33">Brunei</option>
3970                                                                    <option value="34">Bulgaria</option>
3971                                                                    <option value="35">Burkina Faso</option>
3972                                                                    <option value="36">Burundi</option>
3973                                                                    <option value="37">Cambodia</option>
3974                                                                    <option value="38">Cameroon</option>
3975                                                                    <option value="39">Canada</option>
3976                                                                    <option value="40">Cape Verde</option>
3977                                                                    <option value="41">Cayman Islands</option>
3978                                                                    <option value="42">Central African Republic</option>
3979                                                                    <option value="43">Chad</option>
3980                                                                    <option value="44">Chile</option>
3981                                                                    <option value="45">China</option>
3982                                                                    <option value="46">Christmas Island</option>
3983                                                                    <option value="47">Cocos (Keeling) Islands</option>
3984                                                                    <option value="48">Colombia</option>
3985                                                                    <option value="49">Comoros</option>
3986                                                                    <option value="50">Congo</option>
3987                                                                    <option value="51">Democratic Republic of the Congo</option>
3988                                                                    <option value="52">Cook Islands</option>
3989                                                                    <option value="53">Costa Rica</option>
3990                                                                    <option value="54">
3990Ivory Coast</option>
3991                                                                    <option value="55">Croatia</option>
3992                                                                    <option value="56">Cuba</option>
3993                                                                    <option value="57">Cyprus</option>
3994                                                                    <option value="58">Czech Republic</option>
3995                                                                    <option value="59">Denmark</option>
3996                                                                    <option value="60">Djibouti</option>
3997                                                                    <option value="61">Dominica</option>
3998                                                                    <option value="62">Dominican Republic</option>
3999                                                                    <option value="63">East Timor</option>
4000                                                                    <option value="64">Ecuador</option>
4001                                                                    <option value="65">Egypt</option>
4002                                                                    <option value="66">El Salvador</option>
4003                                                                    <option value="67">Equatorial Guinea</option>
4004                                                                    <option value="68">Eritrea</option>
4005                                                                    <option value="69">Estonia</option>
4006                                                                    <option value="70">Ethiopia</option>
4007                                                                    <option value="71">Falkland Islands</option>
4008                                                                    <option value="72">Faroe Islands</option>
4009                                                                    <option value="73">Fiji Islands</option>
4010                                                                    <option value="74">Finland</option>
4011                                                                    <option value="75">France</option>
4012                                                                    <option value="76">French Guiana</option>
4013                                                                    <option value="77">French Polynesia</option>
4014                                                                    <option value="78">French Southern Territories</option>
4015                                                                    <option value="79">Gabon</option>
4016                                                                    <option value="80">The Gambia</option>
4017                                                                    <option value="81">Georgia</option>
4018                                                                    <option value="82">Germany</option>
4019                                                                    <option value="83">Ghana</option>
4020                                                                    <option value="84">Gibraltar</option>
4021                                                                    <option value="85">Greece</option>
4022                                                                    <option value="86">Greenland</option>
4023                                                                    <option value="87">Grenada</option>
4024                                                                    <option value="88">Guadeloupe</option>
4025                                                                    <option value="89">Guam</option>
4026                                                                    <option value="90">Guatemala</option>
4027                                                                    <option value="91">Guernsey and Alderney</option>
4028                                                                    <option value="92">Guinea</option>
4029                                                                    <option value="93">Guinea-Bissau</option>
4030                                                                    <option value="94">Guyana</option>
4031                                                                    <option value="95">Haiti</option>
4032                                                                    <option value="96">Heard Island and McDonald Islands</option>
4033                                                                    <option value="97">Honduras</option>
4034                                                                    <option value="98">Hong Kong S.A.R.</option>
4035                                                                    <option value="99">Hungary</option>
4036                                                                    <option value="100">Iceland</option>
4037                                                                    <option value="101">India</option>
4038                                                                    <option value="102">Indonesia</option>
4039                                                                    <option value="103">Iran</option>
4040                                                                    <option value="104">Iraq</option>
4041                                                                    <option value="105">Ireland</option>
4042                                                                    <option value="106">Israel</option>
4043                                                                    <option value="107">Italy</option>
4044                                                                    <option value="108">Jamaica</option>
4045                                                                    <option value="109">Japan</option>
4046                                                                    <option value="110">Jersey</option>
4047                                                                    <option value="111">Jordan</option>
4048                                                                    <option value="112">Kazakhstan</option>
4049                                                                    <option value="113">Kenya</option>
4050                                                                    <option value="114">Kiribati</option>
4051                                                                    <option value="115">North Korea</option>
4052                                                                    <option value="116">South Korea</option>
4053                                                                    <option value="117">Kuwait</option>
4054                                                                    <option value="118">Kyrgyzstan</option>
4055                                                                    <option value="119">Laos</option>
4056                                                                    <option value="120">Latvia</option>
4057                                                                    <option value="121">Lebanon</option>
4058                                                                    <option value="122">Lesotho</option>
4059                                                                    <option value="123">Liberia</option>
4060                                                                    <option value="124">Libya</option>
4061                                                                    <option value="125">Liechtenstein</option>
4062                                                                    <option value="126">Lithuania</option>
4063                                                                    <option value="127">Luxembourg</option>
4064                                                                    <option value="128">Macau S.A.R.</option>
4065                                                                    <option value="129">Macedonia</option>
4066                                                                    <option value="130">Madagascar</option>
4067                                                                    <option value="131">Malawi</option>
4068                                                                    <option value="132">Malaysia</option>
4069                                                                    <option value="133">Maldives</option>
4070                                                                    <option value="134">Mali</option>
4071                                                                    <option value="135">Malta</option>
4072                                                                    <option value="136">Man (Isle of)</option>
4073                                                                    <option value="137">Marshall Islands</option>
4074                                                                    <option value="138">Martinique</option>
4075                                                                    <option value="139">Mauritania</option>
4076                                                                    <option value="140">Mauritius</option>
4077                                                                    <option value="141">Mayotte</option>
4078                                                                    <option value="142">Mexico</option>
4079                                                                    <option value="143">Micronesia</option>
4080                                                                    <option value="144">Moldova</option>
4081                                                                    <option value="145">Monaco</option>
4082                                                                    <option value="146">Mongolia</option>
4083                                                                    <option value="147">Montenegro</option>
4084                                                                    <option value="148">Montserrat</option>
4085                                                                    <option value="149">Morocco</option>
4086                                                                    <option value="150">Mozambique</option>
4087                                                                    <option value="151">Myanmar</option>
4088                                                                    <option value="152">Namibia</option>
4089                                                                    <option value="153">Nauru</option>
4090                                                                    <option value="154">Nepal</option>
4091                                                                    <option value="155">Bonaire, Sint Eustatius and Saba</option>
4092                                                                    <option value="156">Netherlands</option>
4093                                                                    <option value="157">New Caledonia</option>
4094                                                                    <option value="158">New Zealand</option>
4095                                                                    <option value="159">Nicaragua</option>
4096                                                                    <option value="160">Niger</option>
4097                                                                    <option value="161">Nigeria</option>
4098                                                                    <option value="162">Niue</option>
4099                                                                    <option value="163">Norfolk Island</option>
4100                                                                    <option value="164">Northern Mariana Islands</option>
4101                                                                    <option value="165">Norway</option>
4102                                                                    <option value="166">Oman</option>
4103                                                                    <option value="167">Pakistan</option>
4104                                                                    <option value="168">Palau</option>
4105                                                                    <option value="169">Palestine</option>
4106                                                                    <option value="170">Panama</option>
4107                                                                    <option value="171">Papua new Guinea</option>
4108                                                                    <option value="172">Paraguay</option>
4109                                                                    <option value="173">Peru</option>
4110                                                                    <option value="174">Philippines</option>
4111                                                                    <option value="175">Pitcairn Island</option>
4112                                                                    <option value="176">Poland</option>
4113                                                                    <option value="177">Portugal</option>
4114                                                                    <option value="178">Puerto Rico</option>
4115                                                                    <option value="179">Qatar</option>
4116                                                                    <option value="180">Reunion</option>
4117                                                                    <option value="181">Romania</option>
4118                                                                    <option value="182">Russia</option>
4119                                                                    <option value="183">Rwanda</option>
4120                                                                    <option value="184">Saint Helena</option>
4121                                                                    <option value="185">Saint Kitts And Nevis</option>
4122                                                                    <option value="186">Saint Lucia</option>
4123                                                                    <option value="187">Saint Pierre and Miquelon</option>
4124                                                                    <option value="188">Saint Vincent And The Grenadines</option>
4125                                                                    <option value="189">Saint-Barthelemy</option>
4126                                                                    <option value="190">Saint-Martin (French part)</option>
4127                                                                    <option value="191">Samoa</option>
4128                                                                    <option value="192">San Marino</option>
4129                                                                    <option value="193">Sao Tome and Principe</option>
4130                                                                    <option value="194">Saudi Arabia</option>
4131                                                                    <option value="195">Senegal</option>
4132                                                                    <option value="196">Serbia</option>
4133                                                                    <option value="197">Seychelles</option>
4134                                                                    <option value="198">Sierra Leone</option>
4135                                                                    <option value="199">Singapore</option>
4136                                                                    <option value="200">Slovakia</option>
4137                                                                    <option value="201">Slovenia</option>
4138                                                                    <option value="202">Solomon Islands</option>
4139                                                                    <option value="203">Somalia</option>
4140                                                                    <option value="204">South Africa</option>
4141                                                                    <option value="205">South Georgia</option>
4142                                                                    <option value="206">South Sudan</option>
4143                                           
4143                         <option value="207">Spain</option>
4144                                                                    <option value="208">Sri Lanka</option>
4145                                                                    <option value="209">Sudan</option>
4146                                                                    <option value="210">Suriname</option>
4147                                                                    <option value="211">Svalbard And Jan Mayen Islands</option>
4148                                                                    <option value="212">Swaziland</option>
4149                                                                    <option value="213">Sweden</option>
4150                                                                    <option value="214">Switzerland</option>
4151                                                                    <option value="215">Syria</option>
4152                                                                    <option value="216">Taiwan</option>
4153                                                                    <option value="217">Tajikistan</option>
4154                                                                    <option value="218">Tanzania</option>
4155                                                                    <option value="219">Thailand</option>
4156                                                                    <option value="220">Togo</option>
4157                                                                    <option value="221">Tokelau</option>
4158                                                                    <option value="222">Tonga</option>
4159                                                                    <option value="223">Trinidad And Tobago</option>
4160                                                                    <option value="224">Tunisia</option>
4161                                                                    <option value="225">Turkey</option>
4162                                                                    <option value="226">Turkmenistan</option>
4163                                                                    <option value="227">Turks And Caicos Islands</option>
4164                                                                    <option value="228">Tuvalu</option>
4165                                                                    <option value="229">Uganda</option>
4166                                                                    <option value="230">Ukraine</option>
4167                                                                    <option value="231">United Arab Emirates</option>
4168                                                                    <option value="232">United Kingdom</option>
4169                                                                    <option value="233">United States</option>
4170                                                                    <option value="234">United States Minor Outlying Islands</option>
4171                                                                    <option value="235">Uruguay</option>
4172                                                                    <option value="236">Uzbekistan</option>
4173                                                                    <option value="237">Vanuatu</option>
4174                                                                    <option value="238">Vatican City State (Holy See)</option>
4175                                                                    <option value="239">Venezuela</option>
4176                                                                    <option value="240">Vietnam</option>
4177                                                                    <option value="241">Virgin Islands (British)</option>
4178                                                                    <option value="242">Virgin Islands (US)</option>
4179                                                                    <option value="243">Wallis And Futuna Islands</option>
4180                                                                    <option value="244">Western Sahara</option>
4181                                                                    <option value="245">Yemen</option>
4182                                                                    <option value="246">Zambia</option>
4183                                                                    <option value="247">Zimbabwe</option>
4184                                                                    <option value="248">Kosovo</option>
4185                                                                    <option value="249">Curaçao</option>
4186                                                                    <option value="250">Sint Maarten (Dutch part)</option>
4187                                
4188                            </select>
4189                        </div>
4190                        <div class="col-md-6">
4191                            <label for="state_id" class="form-label">State</label>
4192                            <select class="form-select healing-input" id="state_id" name="state_id" disabled required>
4193                                <option value="" disabled selected>Select state</option>
4194                            </select>
4195                        </div>
4196                        <div class="col-12">
4197                            <label for="city" class="form-label">City</label>
4198                            <input type="text" class="form-control healing-input" id="city" name="city" required>
4199                        </div>
4200                    </div>
4201
4202                    <div class="d-grid mt-4">
4203                        <button type="submit" name="submit" class="btn healing-submit-btn">
4204                            <i class="fas fa-user-plus me-2"></i>Complete Registration
4205                        </button>
4206                    </div>
4207                </form>
4208
4209            </div>
4210        </div>
4211    </div>
4212</div>
4213
4214<style>
4215    .healing-modal {
4216        border-radius: 15px;
4217        overflow: hidden;
4218        border: none;
4219        box-shadow: 0 5px 20px rgba(0, 100, 150, 0.2);
4220    }
4221
4222    .healing-header {
4223        background: linear-gradient(135deg, #4a89dc, #3bafda);
4224        color: white;
4225        border-bottom: none;
4226        padding: 1.2rem;
4227    }
4228
4229    .healing-close {
4230        filter: brightness(0) invert(1);
4231        opacity: 0.8;
4232    }
4233
4234    .healing-tabs .nav-link {
4235        color: #6c757d;
4236        font-weight: 500;
4237        border: none;
4238        padding: 0.8rem 1.2rem;
4239    }
4240
4241    .healing-tabs .nav-link.active {
4242        color: #4a89dc;
4243        background: transparent;
4244        border-bottom: 3px solid #4a89dc;
4245    }
4246
4247    .healing-progress {
4248        height: 6px;
4249        background: #e9ecef;
4250        border-radius: 3px;
4251        overflow: hidden;
4252    }
4253
4254    .healing-progress-bar {
4255        height: 100%;
4256        background: linear-gradient(90deg, #4a89dc, #3bafda);
4257        transition: width 0.4s ease;
4258    }
4259
4260    .healing-input {
4261        border-radius: 8px;
4262        padding: 0.75rem 1rem;
4263        border: 1px solid #ced4da;
4264        transition: all 0.3s;
4265    }
4266
4267    .healing-input:focus {
4268        border-color: #4a89dc;
4269        box-shadow: 0 0 0 0.2rem rgba(74, 137, 220, 0.25);
4270    }
4271
4272    .healing-country-code {
4273        border-top-right-radius: 0;
4274        border-bottom-right-radius: 0;
4275    }
4276
4277    .healing-submit-btn {
4278        background: linear-gradient(135deg, #4a89dc, #3bafda);
4279        color: white;
4280        border: none;
4281        padding: 0.8rem;
4282        border-radius: 8px;
4283        font-weight: 500;
4284        transition: all 0.3s;
4285    }
4286
4287    .healing-submit-btn:hover {
4288        background: linear-gradient(135deg, #3b7bc8, #2a9ac8);
4289        transform: translateY(-2px);
4290        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
4291    }
4292
4293    /* Action buttons styling */
4294    .healing-action-btn {
4295        padding: 0.6rem 1.2rem;
4296        border-radius: 8px;
4297        font-weight: 600;
4298        transition: all 0.3s;
4299        border: none;
4300        flex: 1;
4301        text-align: center;
4302        cursor: pointer;
4303        min-width: 120px;
4304        display: inline-flex;
4305        align-items: center;
4306        justify-content: center;
4307        gap: 8px;
4308    }
4309
4310    .healing-action-btn:hover {
4311        transform: translateY(-2px);
4312        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
4313    }
4314
4315    .healing-action-btn-primary {
4316        background: linear-gradient(135deg, #4a89dc, #3bafda);
4317        color: white;
4318    }
4319
4320    .healing-action-btn-primary:hover {
4321        background: linear-gradient(135deg, #3b7bc8, #2a9ac8);
4322        color: white;
4323    }
4324
4325    .healing-action-btn-success {
4326        background: linear-gradient(135deg, #28a745, #20c997);
4327        color: white;
4328    }
4329
4330    .healing-action-btn-success:hover {
4331        background: linear-gradient(135deg, #218838, #1aa179);
4332        color: white;
4333    }
4334
4335    .healing-action-btn-warning {
4336        background: linear-gradient(135deg, #ffc107, #fd7e14);
4337        color: #212529;
4338    }
4339
4340    .healing-action-btn-warning:hover {
4341        background: linear-gradient(135deg, #e0a800, #e06b00);
4342        color: #212529;
4343    }
4344
4345    .healing-action-btn-container {
4346        display: flex;
4347        flex-wrap: wrap;
4348        gap: 10px;
4349        margin-top: 15px;
4350        justify-content: center;
4351    }
4352
4353    @media (max-width: 576px) {
4354        .healing-action-btn {
4355            flex: 0 0 100%;
4356        }
4357    }
4358
4359    /* SweetAlert custom styles */
4360    .healing-swal-popup {
4361        max-width: 600px !important;
4362        padding: 20px !important;
4363    }
4364
4365    .healing-swal-html {
4366        width: 100% !important;
4367    }
4368</style>
4369
4370<script>
4371// Global function to scroll to sections - FIXED
4372window.scrollToSection = function(sectionId) {
4373    // Close SweetAlert first
4374    if (typeof Swal !== 'undefined') {
4375        Swal.close();
4376    }
4377    
4378    // Close the registration modal
4379    const modalElement = document.getElementById('healingRegistrationModal');
4380    if (modalElement && typeof bootstrap !== 'undefined' && bootstrap.Modal) {
4381        const modal = bootstrap.Modal.getInstance(modalElement);
4382        if (modal) {
4383            modal.hide();
4384        }
4385    }
4386    
4387    // Scroll to the section after a small delay to let modal close
4388    setTimeout(function() {
4389        // Clean the section ID - remove any URL parts
4390        let cleanId = sectionId;
4391        // If it contains a URL, extract just the fragment
4392        if (sectionId.includes('#')) {
4393            cleanId = sectionId.split('#').pop();
4394        }
4395        // Remove any leading # if present
4396        cleanId = cleanId.replace(/^#/, '');
4397        
4398        console.log('Looking for section with ID:', cleanId);
4399        
4400        // Try to find the section
4401        let section = document.getElementById(cleanId);
4402        
4403        if (section) {
4404            section.scrollIntoView({ 
4405                behavior: 'smooth',
4406                block: 'start'
4407            });
4408        } else {
4409            // Try to find by data attribute or class
4410            section = document.querySelector('[data-section="' + cleanId + '"]');
4411            if (section) {
4412                section.scrollIntoView({ 
4413                    behavior: 'smooth',
4414                    block: 'start'
4415                });
4416            } else {
4417                console.warn('Section not found with ID:', cleanId);
4418                // Fallback: try to find any section with a matching ID pattern
4419                const allSections = document.querySelectorAll('section');
4420                for (let el of allSections) {
4421                    if (el.id && el.id.toLowerCase().includes(cleanId.toLowerCase())) {
4422                        el.scrollIntoView({ 
4423                            behavior: 'smooth',
4424                            block: 'start'
4425                        });
4426                        return;
4427                    }
4428                }
4429            }
4430        }
4431    }, 400);
4432};
4433
4434// Function to reload page for "Register Other Kids"
4435window.registerOtherKids = function() {
4436    if (typeof Swal !== 'undefined') {
4437        Swal.close();
4438    }
4439    // Close the registration modal
4440    const modalElement = document.getElementById('healingRegistrationModal');
4441    if (modalElement && typeof bootstrap !== 'undefined' && bootstrap.Modal) {
4442        const modal = bootstrap.Modal.getInstance(modalElement);
4443        if (modal) {
4444            modal.hide();
4445        }
4446    }
4447    // Reload the page to reset the form
4448    setTimeout(function() {
4449        location.reload();
4450    }, 300);
4451};
4452
4453document.addEventListener('DOMContentLoaded', function() {
4454    // Safely get elements with null checks
4455    const form = document.getElementById('healingRegistrationForm');
4456    const emailTab = document.getElementById('email-tab');
4457    const phoneTab = document.getElementById('phone-tab');
4458    const emailInput = document.getElementById('email');
4459    const phoneInput = document.getElementById('phone');
4460
4461    // Only initialize TomSelect if the element exists
4462    let zoneTS = null;
4463    const zoneElement = document.getElementById('zone_id');
4464    if (zoneElement && typeof TomSelect !== 'undefined') {
4465        try {
4466            zoneTS = new TomSelect('#zone_id', {
4467                create: false,
4468                sortField: {
4469                    field: 'text',
4470                    direction: 'asc'
4471                },
4472                maxOptions: null,
4473            });
4474        } catch (e) {
4475            console.warn('TomSelect initialization failed for zone:', e);
4476        }
4477    }
4478
4479    // Zone ref handling from URL - only if zoneTS exists
4480    if (zoneTS) {
4481        try {
4482            const url = new URL(window.location.href);
4483            const ref = url.searchParams.get('ref') || (url.pathname.includes('/kids/ref/') ? url.pathname.split('/kids/ref/')[1] : null);
4484            if (ref) {
4485                fetch('data/zones.json')
4486                    .then(r => r.json())
4487                    .then(json => {
4488                        const items = Array.isArray(json) ? json : [];
4489                        let zonesData = [];
4490                        if (items.length) {
4491                            const table = items.find(i => i && i.type === 'table' && i.name === 'zones');
4492                            zonesData = (table && table.data) ? table.data : [];
4493                        }
4494                        const matched = zonesData.find(z => (z.ref || '').toLowerCase() === ref.toLowerCase());
4495                        if (matched && matched.zone_id) {
4496                            zoneTS.setValue(String(matched.zone_id), true);
4497                            const wrapper = document.getElementById('zone_field_wrapper');
4498                            const helper = document.getElementById('zone_auto_msg');
4499                            if (wrapper) {
4500                                wrapper.style.display = 'none';
4501                            }
4502                            if (helper) {
4503                                helper.style.display = 'block';
4504                            }
4505                        }
4506                    })
4507                    .catch(() => {});
4508            }
4509        } catch(e) {
4510            console.warn('Zone ref handling failed:', e);
4511        }
4512    }
4513
4514    // TomSelect instances for country and state
4515    let countryTS = null;
4516    let stateTS = null;
4517
4518    if (typeof TomSelect !== 'undefined') {
4519        try {
4520            const countryElement = document.getElementById('country_id');
4521            if (countryElement) {
4522                countryTS = new TomSelect('#country_id', {
4523                    create: false,
4524                    sortField: { field: 'text', direction: 'asc' },
4525                    maxOptions: null,
4526                });
4527            }
4528
4529            const stateElement = document.getElementById('state_id');
4530            if (stateElement) {
4531                stateTS = new TomSelect('#state_id', {
4532                    create: false,
4533                    sortField: { field: 'text', direction: 'asc' },
4534                    maxOptions: null,
4535                });
4536            }
4537        } catch (e) {
4538            console.warn('TomSelect initialization failed:', e);
4539        }
4540    }
4541
4542    // Country change handler using TomSelect
4543    if (countryTS && stateTS) {
4544        countryTS.on('change', function(value) {
4545            if (!value) {
4546                stateTS.clearOptions();
4547                stateTS.disable();
4548                stateTS.addOption({value: '', text: 'Select country first'});
4549                stateTS.refreshOptions();
4550                return;
4551            }
4552
4553            stateTS.clearOptions();
4554            stateTS.disable();
4555            stateTS.addOption({value: '', text: 'Loading states...'});
4556            stateTS.refreshOptions();
4557
4558            fetch(`api/states.php?country_id=${encodeURIComponent(value)}`)
4559                .then(r => {
4560                    if (!r.ok) throw new Error('Failed');
4561                    return r.json();
4562                })
4563                .then(data => {
4564                    stateTS.clearOptions();
4565                    if (Array.isArray(data) && data.length > 0) {
4566                        stateTS.addOption({value: '', text: 'Select a state'});
4567                        data.forEach(s => {
4568                            stateTS.addOption({
4569                                value: s.state_id,
4570                                text: s.state_name
4571                            });
4572                        });
4573                        stateTS.enable();
4574                    } else {
4575                        stateTS.addOption({value: '', text: 'No states available'});
4576                    }
4577                    stateTS.refreshOptions();
4578                    if (typeof updateProgress === 'function') updateProgress();
4579                })
4580                .catch(err => {
4581                    console.error(err);
4582                    stateTS.clearOptions();
4583                    stateTS.addOption({value: '', text: 'Error loading states'});
4584                    stateTS.refreshOptions();
4585                });
4586        });
4587    }
4588
4589    // Tab click handlers with null checks
4590    if (emailTab) {
4591        emailTab.addEventListener('click', function() {
4592            if (phoneInput) {
4593                phoneInput.value = '';
4594                phoneInput.classList.remove('is-invalid');
4595            }
4596            const phoneError = document.getElementById('phone-error');
4597            if (phoneError) phoneError.textContent = '';
4598            if (typeof updateProgress === 'function') updateProgress();
4599        });
4600    }
4601
4602    if (phoneTab) {
4603        phoneTab.addEventListener('click', function() {
4604            if (emailInput) {
4605                emailInput.value = '';
4606                emailInput.classList.remove('is-invalid');
4607            }
4608            const emailError = document.getElementById('email-error');
4609            if (emailError) emailError.textContent = '';
4610            if (typeof updateProgress === 'function') updateProgress();
4611        });
4612    }
4613
4614    // Progress update function
4615    function updateProgress() {
4616        if (!form) return;
4617        const inputs = form.querySelectorAll('input, select');
4618        let filled = 0;
4619        let total = 0;
4620        inputs.forEach(input => {
4621            if (!input.disabled) {
4622                total++;
4623                if (input.value && input.value.trim() !== '') filled++;
4624            }
4625        });
4626        const progress = total > 0 ? (filled / total) * 100 : 0;
4627        const progressBar = document.querySelector('.healing-progress-bar');
4628        if (progressBar) {
4629            progressBar.style.width = `${Math.min(progress, 100)}%`;
4630        }
4631    }
4632
4633    // Add event listeners for progress
4634    if (form) {
4635        form.querySelectorAll('input, select').forEach(input => {
4636            input.addEventListener('input', updateProgress);
4637            input.addEventListener('change', updateProgress);
4638        });
4639    }
4640
4641    // Function to show action buttons in SweetAlert
4642    function showActionButtons(regId, isEmail, isSuccess, errorMsg) {
4643        // Build the action buttons HTML with onclick handlers
4644        const actionButtonsHtml = `
4645            <div class="healing-action-btn-container">
4646                <button onclick="window.registerOtherKids()" class="healing-action-btn healing-action-btn-primary">
4647                    <i class="fas fa-user-plus me-2"></i>Register Other Kids
4648                </button>
4649                <button onclick="window.scrollToSection('magazine')" class="healing-action-btn healing-action-btn-success">
4650                    <i class="fas fa-book-open me-2"></i>Sponsor Kiddies Magazine
4651                </button>
4652                <button onclick="window.scrollToSection('garden')" class="healing-action-btn healing-action-btn-warning">
4653                    <i class="fas fa-hand-holding-heart me-2"></i>Give for the Program
4654                </button>
4655            </div>
4656        `;
4657
4658        // Show SweetAlert with action buttons
4659        Swal.fire({
4660            icon: isSuccess ? 'success' : 'error',
4661            title: isSuccess ? 'Registration Completed!' : 'Registration Failed',
4662            html: `
4663                ${isSuccess ? `
4664                    <p>Thank you for registering!</p>
4665                    ${regId ? `<p style="font-size: 0.9rem; color: #6c757d;">Registration ID: ${regId}</p>` : ''}
4666                    <a href="#" id="download-link" style="color: #4a89dc; font-weight: bold; text-decoration: underline; display: inline-block; margin: 10px 0;">
4667                        📘 Download Your Free Magazine for Kids Here
4668                    </a>
4669                ` : `
4670                    <p>${errorMsg || 'Please correct the errors and try again.'}</p>
4671                `}
4672                ${actionButtonsHtml}
4673            `,
4674            showConfirmButton: false,
4675            allowOutsideClick: true,
4676            customClass: {
4677                popup: 'healing-swal-popup',
4678                htmlContainer: 'healing-swal-html'
4679            },
4680            didOpen: function() {
4681                // Attach download event if it's a success
4682                if (isSuccess) {
4683                    setTimeout(() => {
4684                        const downloadLink = document.getElementById('download-link');
4685                        if (downloadLink && regId) {
4686                            downloadLink.addEventListener('click', function(e) {
4687                                e.preventDefault();
4688                                
4689                                const magazineUrl = "https:\/\/hsch.ceflixcdn.com\/magazine\/pdf\/HTTN_Magazine_For_Kids_September_2026_WEBSITE.pdf";
4690                                const magazineTitle = "Healing_to_the_Nations_for_Kids-_September_2026.pdf";
4691
4692                                // Track download
4693                                fetch('track_download.php', {
4694                                    method: 'POST',
4695                                    body: JSON.stringify({
4696                                        id: regId,
4697                                        is_email: isEmail
4698                                    }),
4699                                    headers: {
4700                                        'Content-Type': 'application/json'
4701                                    }
4702                                }).catch(e => console.error('Tracking failed:', e));
4703
4704                                // Trigger actual file download
4705                                const a = document.createElement('a');
4706                                a.href = magazineUrl;
4707                                a.download = magazineTitle;
4708                                document.body.appendChild(a);
4709                                a.click();
4710                                document.body.removeChild(a);
4711                            });
4712                        }
4713                    }, 100);
4714                }
4715            }
4716        });
4717    }
4718
4719    // Form submission handler
4720    if (form) {
4721        form.addEventListener('submit', async function(e) {
4722            e.preventDefault();
4723            
4724            // Remove existing error states
4725            form.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid'));
4726
4727            const emailTabActive = emailTab ? emailTab.classList.contains('active') : true;
4728            let hasErrors = false;
4729
4730            // Validate email
4731            if (emailTabActive && emailInput && !emailInput.value.trim()) {
4732                emailInput.classList.add('is-invalid');
4733                const emailError = document.getElementById('email-error');
4734                if (emailError) emailError.textContent = 'Please enter your email address';
4735                hasErrors = true;
4736            }
4737
4738            // Validate phone
4739            if (!emailTabActive && phoneInput && !phoneInput.value.trim()) {
4740                phoneInput.classList.add('is-invalid');
4741                const phoneError = document.getElementById('phone-error');
4742                if (phoneError) phoneError.textContent = 'Please enter your phone number';
4743                hasErrors = true;
4744            }
4745
4746            // Validate phone format
4747            if (!emailTabActive && phoneInput && phoneInput.value.trim()) {
4748                const phone = phoneInput.value.trim();
4749                const phoneRegex = /^\d{8,15}$/;
4750                if (!phoneRegex.test(phone)) {
4751                    phoneInput.classList.add('is-invalid');
4752                    const phoneError = document.getElementById('phone-error');
4753                    if (phoneError) phoneError.textContent = 'Invalid phone number format';
4754                    hasErrors = true;
4755                }
4756            }
4757
4758            // Validate fullname
4759            const fullnameInput = document.getElementById('fullname');
4760            if (fullnameInput && !fullnameInput.value.trim()) {
4761                fullnameInput.classList.add('is-invalid');
4762                hasErrors = true;
4763            }
4764
4765            // Validate age
4766            const ageInput = document.getElementById('age');
4767            if (ageInput && (!ageInput.value || parseInt(ageInput.value) < 1 || parseInt(ageInput.value) > 12)) {
4768                ageInput.classList.add('is-invalid');
4769                hasErrors = true;
4770            }
4771
4772            // Validate country
4773            const countrySelect = document.getElementById('country_id');
4774            if (countrySelect && !countrySelect.value) {
4775                countrySelect.classList.add('is-invalid');
4776                hasErrors = true;
4777            }
4778
4779            // Validate city
4780            const cityInput = document.getElementById('city');
4781            if (cityInput && !cityInput.value.trim()) {
4782                cityInput.classList.add('is-invalid');
4783                hasErrors = true;
4784            }
4785
4786            if (hasErrors) {
4787                // Show error using SweetAlert if available
4788                if (typeof Swal !== 'undefined') {
4789                    showActionButtons(null, null, false, 'Please check the form for errors and try again.');
4790                }
4791                return;
4792            }
4793
4794            // Submit the form
4795            const submitBtn = form.querySelector('button[type="submit"]');
4796            const originalBtnText = submitBtn ? submitBtn.innerHTML : 'Submit';
4797            if (submitBtn) {
4798                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Processing...';
4799                submitBtn.disabled = true;
4800            }
4801
4802            try {
4803                const formData = new FormData(form);
4804                const response = await fetch('register.php', {
4805                    method: 'POST',
4806                    body: formData,
4807                    headers: {
4808                        'Accept': 'application/json',
4809                        'X-Requested-With': 'XMLHttpRequest'
4810                    }
4811                });
4812
4813                const rawText = await response.text();
4814                let result;
4815                try {
4816                    result = JSON.parse(rawText);
4817                } catch (jsonError) {
4818                    console.error('JSON parse error:', jsonError);
4819                    throw new Error("Invalid response from server");
4820                }
4821
4822                if (response.ok && result.registration_id) {
4823                    const regId = result.registration_id;
4824                    const isEmail = emailTabActive;
4825
4826                    // Show success with action buttons
4827                    if (typeof Swal !== 'undefined') {
4828                        showActionButtons(regId, isEmail, true, null);
4829                        form.reset();
4830                        updateProgress();
4831                    } else {
4832                        // Fallback if SweetAlert not available
4833                        alert('Registration completed successfully! You can now download the magazine.');
4834                        form.reset();
4835                        updateProgress();
4836                    }
4837                } else {
4838                    // Handle errors
4839                    let errorMsg = 'Please correct the errors and try again.';
4840                    if (result.message && result.message.errors) {
4841                        for (const [field, message] of Object.entries(result.message.errors)) {
4842                            const input = form.querySelector(`[name="${field}"]`) || form.querySelector(`#${field}`);
4843                            if (input) {
4844                                input.classList.add('is-invalid');
4845                                const errorElement = document.getElementById(`${field}
4845-error`) || input.parentElement.querySelector('.invalid-feedback');
4846                                if (errorElement) errorElement.textContent = message;
4847                            }
4848                        }
4849                        if (result.message.message) {
4850                            errorMsg = result.message.message;
4851                        }
4852                    } else if (result.message && result.message.message) {
4853                        errorMsg = result.message.message;
4854                    }
4855
4856                    if (typeof Swal !== 'undefined') {
4857                        showActionButtons(null, null, false, errorMsg);
4858                    } else {
4859                        alert('Registration failed: ' + errorMsg);
4860                    }
4861                }
4862            } catch (error) {
4863                console.error('Submission Error:', error);
4864                if (typeof Swal !== 'undefined') {
4865                    showActionButtons(null, null, false, error.message || 'An error occurred while processing your request');
4866                } else {
4867                    alert('An error occurred: ' + error.message);
4868                }
4869            } finally {
4870                if (submitBtn) {
4871                    submitBtn.innerHTML = originalBtnText;
4872                    submitBtn.disabled = false;
4873                }
4874            }
4875        });
4876    }
4877
4878    // Auto-open modal from hash
4879    if (window.location.hash === '#healingRegistrationModal') {
4880        const modalElement = document.getElementById('healingRegistrationModal');
4881        if (modalElement && typeof bootstrap !== 'undefined' && bootstrap.Modal) {
4882            const modal = new bootstrap.Modal(modalElement);
4883            modal.show();
4884        }
4885    }
4886});
4887
4888// Auto-capitalize helper
4889document.addEventListener('DOMContentLoaded', function () {
4890    const inputs = ['email', 'fullname', 'phone', 'city'];
4891    inputs.forEach(id => {
4892        const el = document.getElementById(id);
4893        if (el) {
4894            el.setAttribute('autocapitalize', id === 'fullname' || id === 'city' ? 'words' : 'off');
4895            el.setAttribute('spellcheck', 'false');
4896        }
4897    });
4898});
4899</script>
4899
4900
4901
4902
4903<!-- ============================================ -->
4904<!-- MODAL 1: BIBLE QUIZ MODAL -->
4905<!-- ============================================ -->
4906<div id="quizModal" class="fixed inset-0 z-[9999] bg-black/80 backdrop-blur-md hidden flex items-center justify-center p-4">
4907    <div class="bg-gradient-to-br from-indigo-900 via-purple-900 to-sky-900 rounded-[3rem] shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-hidden border-4 border-white/20 relative animate-fade-in flex flex-col">
4908        
4909        <!-- Modal Header - Fixed height -->
4910        <div class="flex items-center justify-between p-4 border-b border-white/10 bg-white/5 backdrop-blur-sm flex-shrink-0">
4911            <div class="flex items-center gap-3">
4912                <span class="text-2xl">📖</span>
4913                <div>
4914                    <h3 class="text-lg font-black text-white">Bible Quiz Challenge</h3>
4915                    <p class="text-xs text-white/60 font-semibold">Test your Bible knowledge!</p>
4916                </div>
4917            </div>
4918            <button onclick="closeQuizModal()" 
4919                    class="w-8 h-8 rounded-full bg-white/10 hover:bg-white/20 text-white font-bold transition-all hover:scale-110 flex items-center justify-center">
4920                <i class="fa-solid fa-xmark text-lg"></i>
4921            </button>
4922        </div>
4923
4924        <!-- Modal Body - Scrollable with max height -->
4925        <div class="p-4 overflow-y-auto flex-1" style="max-height: calc(90vh - 140px);">
4926            <!-- Quiz Container -->
4927            <div id="quizModalContainer" class="space-y-4">
4928                <div class="flex items-center justify-between mb-3">
4929                    <span class="px-3 py-1.5 rounded-full bg-white/10 text-white font-black text-xs tracking-wider border border-white/10">
4930                        <i class="fa-solid fa-question-circle mr-1"></i>
4931                        <span id="quizModalCounter">Loading...</span>
4932                    </span>
4933                    <span id="quizModalScore" class="px-3 py-1.5 rounded-full bg-white/10 text-white font-black text-xs tracking-wider border border-white/10">
4934                        <i class="fa-solid fa-star mr-1 text-brand-banana"></i>
4935                        <span id="quizScoreDisplay">0/0</span>
4936                    </span>
4937                </div>
4938                
4939                <div id="quizModalContent">
4940                    <!-- Quiz content rendered by JavaScript -->
4941                    <div class="text-center py-8">
4942                        <div class="inline-block animate-spin rounded-full h-10 w-10 border-4 border-white border-t-transparent"></div>
4943                        <p class="mt-3 text-white font-bold text-sm">Loading Bible questions...</p>
4944                    </div>
4945                </div>
4946            </div>
4947        </div>
4948
4949        <!-- Modal Footer - Fixed height at bottom -->
4950        <div class="flex items-center justify-between gap-3 p-3 border-t border-white/10 bg-white/5 backdrop-blur-sm flex-shrink-0">
4951            <div class="flex gap-2">
4952                <button onclick="modalPreviousQuestion()" id="quizPrevBtn" 
4953                        class="px-4 py-2 bg-white/10 hover:bg-white/20 text-white font-bold rounded-xl transition-all disabled:opacity-40 disabled:cursor-not-allowed text-sm">
4954                    <i class="fa-solid fa-arrow-left mr-1"></i> Prev
4955                </button>
4956                <button onclick="modalNextQuestion()" id="quizNextBtn" 
4957                        class="px-4 py-2 bg-white/10 hover:bg-white/20 text-white font-bold rounded-xl transition-all disabled:opacity-40 disabled:cursor-not-allowed text-sm">
4958                    Next <i class="fa-solid fa-arrow-right ml-1"></i>
4959                </button>
4960            </div>
4961            <button onclick="resetModalQuiz()" 
4962                    class="px-4 py-2 bg-white/5 hover:bg-white/10 text-white/60 hover:text-white font-bold rounded-xl transition-all text-sm border border-white/10">
4963                <i class="fa-solid fa-rotate-right mr-1"></i> Restart
4964            </button>
4965        </div>
4966    </div>
4967</div>
4968
4969
4970
4971
4972<!-- ============================================ -->
4973<!-- ANSWER FEEDBACK TOAST - Top Right Corner -->
4974<!-- ============================================ -->
4975<div id="answerFeedbackToast" class="fixed top-4 right-4 z-[9999] hidden w-80 max-w-full">
4976    <div id="feedbackToastContent" class="bg-white rounded-2xl shadow-2xl overflow-hidden border-4 animate-slide-in-right">
4977        <!-- Header -->
4978        <div id="toastHeader" class="px-4 py-3 text-white flex items-center gap-3">
4979            <span id="toastIcon" class="text-2xl">✅</span>
4980            <div>
4981                <h4 id="toastTitle" class="font-black text-sm">Correct!</h4>
4982                <p id="toastSubtitle" class="text-xs opacity-90">Great job!</p>
4983            </div>
4984            <button onclick="closeFeedbackToast()" class="ml-auto text-white/70 hover:text-white transition-colors">
4985                <i class="fa-solid fa-times"></i>
4986            </button>
4987        </div>
4988        
4989        <!-- Body -->
4990        <div class="px-4 py-3 bg-white">
4991            <p id="toastMessage" class="text-sm font-semibold text-gray-800">Amazing work!</p>
4992            <p id="toastExplanation" class="text-xs text-gray-600 mt-1"></p>
4993            
4994            <!-- Progress Bar -->
4995            <div class="mt-2 w-full bg-gray-200 rounded-full h-1.5">
4996                <div id="toastProgress" class="bg-gradient-to-r from-brand-sky to-brand-purple h-1.5 rounded-full transition-all duration-500" style="width: 0%"></div>
4997            </div>
4998            <p id="toastProgressText" class="text-[10px] text-gray-400 mt-0.5 font-semibold text-right">Question 1 of 15</p>
4999        </div>
5000    </div>
5001</div>
5002
5003
5004<!-- ============================================ -->
5005<!-- FINAL SCORE MODAL -->
5006<!-- ============================================ -->
5007<div id="finalScoreModal" class="fixed inset-0 z-[9999] bg-black/70 backdrop-blur-sm hidden flex items-center justify-center p-4">
5008    <div class="bg-white rounded-3xl shadow-2xl w-full max-w-md overflow-hidden border-4 border-brand-purple/30 animate-fade-in">
5009        <div class="bg-gradient-to-r from-brand-sky via-brand-purple to-brand-bubblegum p-8 text-center text-white">
5010            <div class="text-6xl mb-3 animate-bounce">🏆</div>
5011            <h2 class="text-2xl font-black">Quiz Complete!</h2>
5012            <p class="text-white/80 mt-1">Here's how you did</p>
5013        </div>
5014        <div class="p-6 text-center">
5015            <div class="w-24 h-24 rounded-full bg-brand-purple/10 flex items-center justify-center mx-auto mb-4">
5016                <span id="finalScoreEmoji" class="text-5xl">⭐</span>
5017            </div>
5018            <h3 class="font-black text-3xl text-gray-800">
5019                <span id="finalScoreCorrect">0</span>/<span id="finalScoreTotal">0</span>
5020            </h3>
5021            <p class="text-gray-600 text-sm mt-2">
5022                <span id="finalScorePercentage">0%</span> - <span id="finalScoreMessage">Keep learning!</span>
5023            </p>
5024            <div class="mt-4 w-full bg-gray-200 rounded-full h-3">
5025                <div id="finalScoreBar" class="bg-gradient-to-r from-brand-sky to-brand-purple h-3 rounded-full transition-all duration-1000" style="width: 0%"></div>
5026            </div>
5027            <div class="flex gap-3 mt-6">
5028                <button onclick="closeFinalScoreModal()" class="flex-1 px-6 py-3 bg-gray-200 text-gray-700 font-black rounded-xl hover:bg-gray-300 transition-all">
5029                    Close
5030                </button>
5031                <button onclick="resetMainQuiz(); closeFinalScoreModal();" class="flex-1 px-6 py-3 bg-gradient-to-r from-brand-sky to-brand-purple text-white font-black rounded-xl hover:shadow-lg transition-all">
5032                    <i class="fa-solid fa-rotate-right mr-2"></i> Try Again
5033                </button>
5034            </div>
5035        </div>
5036    </div>
5037</div>
5038
5039
5040
5041
5042<!-- ============================================ -->
5043<!-- MODAL 2: BIBLE COLORING GAME -->
5044<!-- ============================================ -->
5045<div id="activityModal" class="fixed inset-0 z-[9999] bg-black/80 backdrop-blur-md hidden flex items-center justify-center p-4">
5046    <div class="bg-gradient-to-br from-emerald-900 via-teal-900 to-cyan-900 rounded-[3rem] shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-hidden border-4 border-white/20 relative animate-fade-in flex flex-col">
5047        
5048        <!-- Modal Header -->
5049        <div class="flex items-center justify-between p-4 border-b border-white/10 bg-white/5 backdrop-blur-sm flex-shrink-0">
5050            <div class="flex items-center gap-3">
5051                <span class="text-2xl">🎨</span>
5052                <div>
5053                    <h3 class="text-lg font-black text-white">Bible Coloring Game</h3>
5054                    <p class="text-xs text-white/60 font-semibold">Color Bible stories and characters!</p>
5055                </div>
5056            </div>
5057            <button onclick="closeActivityModal()" 
5058                    class="w-8 h-8 rounded-full bg-white/10 hover:bg-white/20 text-white font-bold transition-all hover:scale-110 flex items-center justify-center">
5059                <i class="fa-solid fa-xmark text-lg"></i>
5060            </button>
5061        </div>
5062
5063        <!-- Modal Body - Scrollable -->
5064        <div class="p-4 overflow-y-auto flex-1" style="max-height: calc(90vh - 140px);">
5065            
5066            <!-- Coloring Toolbar -->
5067            <div class="bg-white/10 rounded-2xl p-4 mb-4 backdrop-blur-sm border border-white/10">
5068                <div class="flex flex-wrap items-center gap-3">
5069                    <!-- Color Palette -->
5070                    <div class="flex items-center gap-2">
5071                        <span class="text-white text-xs font-bold">Colors:</span>
5072                        <div class="flex gap-1.5 flex-wrap">
5073                            <button onclick="selectColor('#ef4444')" class="color-btn w-7 h-7 rounded-full border-2 border-white/30 hover:border-white transition-all" style="background: #ef4444;" data-color="#ef4444"></button>
5074                            <button onclick="selectColor('#f59e0b')" class="color-btn w-7 h-7 rounded-full border-2 border-white/30 hover:border-white transition-all" style="background: #f59e0b;" data-color="#f59e0b"></button>
5075                            <button onclick="selectColor('#eab308')" class="color-btn w-7 h-7 rounded-full border-2 border-white/30 hover:border-white transition-all" style="background: #eab308;" data-color="#eab308"></button>
5076                            <button onclick="selectColor('#22c55e')" class="color-btn w-7 h-7 rounded-full border-2 border-white/30 hover:border-white transition-all" style="background: #22c55e;" data-color="#22c55e"></button>
5077                            <button onclick="selectColor('#3b82f6')" class="color-btn w-7 h-7 rounded-full border-2 border-white/30 hover:border-white transition-all" style="background: #3b82f6;" data-color="#3b82f6"></button>
5078                            <button onclick="selectColor('#8b5cf6')" class="color-btn w-7 h-7 rounded-full border-2 border-white/30 hover:border-white transition-all" style="background: #8b5cf6;" data-color="#8b5cf6"></button>
5079                            <button onclick="selectColor('#ec4899')" class="color-btn w-7 h-7 rounded-full border-2 border-white/30 hover:border-white transition-all" style="background: #ec4899;" data-color="#ec4899"></button>
5080                            <button onclick="selectColor('#f97316')" class="color-btn w-7 h-7 rounded-full border-2 border-white/30 hover:border-white transition-all" style="background: #f97316;" data-color="#f97316"></button>
5081                            <button onclick="selectColor('#14b8a6')" class="color-btn w-7 h-7 rounded-full border-2 border-white/30 hover:border-white transition-all" style="background: #14b8a6;" data-color="#14b8a6"></button>
5082                            <button onclick="selectColor('#ffffff')" class="color-btn w-7 h-7 rounded-full border-2 border-white/30 hover:border-white transition-all" style="background: #ffffff;" data-color="#ffffff"></button>
5083                            <button onclick="selectColor('#1e293b')" class="color-btn w-7 h-7 rounded-full border-2 border-white/30 hover:border-white transition-all" style="background: #1e293b;" data-color="#1e293b"></button>
5084                        </div>
5085                    </div>
5086                    
5087                    <div class="w-px h-8 bg-white/20"></div>
5088                    
5089                    <!-- Brush Size -->
5090                    <div class="flex items-center gap-2">
5091                        <span class="text-white text-xs font-bold">Size:</span>
5092                        <div class="flex gap-1">
5093                            <button onclick="setBrushSize(4)" class="brush-size-btn px-2 py-1 rounded-lg bg-white/10 hover:bg-white/20 text-white text-xs font-bold transition-all" data-size="4">S</button>
5094                            <button onclick="setBrushSize(8)" class="brush-size-btn px-2 py-1 rounded-lg bg-white/20 hover:bg-white/30 text-white text-xs font-bold transition-all border border-white/20" data-size="8">M</button>
5095                            <button onclick="setBrushSize(14)" class="brush-size-btn px-2 py-1 rounded-lg bg-white/10 hover:bg-white/20 text-white text-xs font-bold transition-all" data-size="14">L</button>
5096                        </div>
5097                    </div>
5098                    
5099                    <div class="w-px h-8 bg-white/20"></div>
5100                    
5101                    <!-- Actions -->
5102                    <div class="flex gap-2">
5103                        <button onclick="clearCanvas()" class="px-3 py-1.5 bg-red-500/20 hover:bg-red-500/30 text-white text-xs font-bold rounded-lg transition-all border border-red-500/30">
5104                            <i class="fa-solid fa-eraser mr-1"></i> Clear
5105                        </button>
5106                        <button onclick="downloadColoring()" class="px-3 py-1.5 bg-green-500/20 hover:bg-green-500/30 text-white text-xs font-bold rounded-lg transition-all border border-green-500/30">
5107                            <i class="fa-solid fa-download mr-1"></i> Save
5108                        </button>
5109                    </div>
5110                </div>
5111            </div>
5112
5113            <!-- Coloring Canvas Area -->
5114            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
5115                <!-- Canvas -->
5116                <div class="lg:col-span-2 bg-white/5 rounded-2xl p-3 border border-white/10">
5117                    <div class="relative aspect-square max-h-[500px] mx-auto">
5118                        <canvas id="coloringCanvas" class="w-full h-full rounded-xl shadow-lg cursor-pointer" style="touch-action: none;"></canvas>
5119                        
5120                        <!-- Bible Verse Overlay -->
5121                        <div class="absolute bottom-3 left-1/2 transform -translate-x-1/2 bg-black/50 backdrop-blur-sm px-4 py-2 rounded-full border border-white/10">
5122                            <p id="coloringVerse" class="text-white text-xs font-semibold text-center">"The Lord is my Shepherd" - Psalm 23:1</p>
5123                        </div>
5124                    </div>
5125                </div>
5126                
5127                <!-- Coloring Info Panel -->
5128                <div class="lg:col-span-1 space-y-3">
5129                    <!-- Current Image Info -->
5130                    <div class="bg-white/10 rounded-2xl p-4 border border-white/10">
5131                        <h4 class="text-white font-black text-sm mb-2">📖 Bible Scene</h4>
5132                        <p id="coloringTitle" class="text-white/80 text-sm font-semibold">David the Shepherd</p>
5133                        <p id="coloringDescription" class="text-white/50 text-xs mt-1">Color David as he watches over his sheep</p>
5134                        
5135                        <div class="mt-3 flex items-center gap-2">
5136                            <span class="text-white/50 text-xs">Progress:</span>
5137                            <div class="flex-1 h-1.5 bg-white/10 rounded-full overflow-hidden">
5138                                <div id="coloringProgress" class="h-full bg-gradient-to-r from-emerald-400 to-cyan-400 rounded-full transition-all duration-500" style="width: 0%"></div>
5139                            </div>
5140                            <span id="coloringProgressText" class="text-white/60 text-xs font-bold">0%</span>
5141                        </div>
5142                    </div>
5143                    
5144                    <!-- Scene Selector -->
5145                    <div class="bg-white/10 rounded-2xl p-4 border border-white/10">
5146                        <h4 class="text-white font-black text-sm mb-2">🖼️ Choose Scene</h4>
5147                        <div class="grid grid-cols-2 gap-2">
5148                            <button onclick="loadColoringScene(0)" class="scene-btn px-3 py-2 rounded-xl bg-white/10 hover:bg-white/20 text-white text-xs font-bold transition-all border border-white/10 text-center active-scene">
5149                                🐑 David
5150                            </button>
5151                            <button onclick="loadColoringScene(1)" class="scene-btn px-3 py-2 rounded-xl bg-white/10 hover:bg-white/20 text-white text-xs font-bold transition-all border border-white/10 text-center">
5152                                ⛵ Noah
5153                            </button>
5154                            <button onclick="loadColoringScene(2)" class="scene-btn px-3 py-2 rounded-xl bg-white/10 hover:bg-white/20 text-white text-xs font-bold transition-all border border-white/10 text-center">
5155                                🐟 Jonah
5156                            </button>
5157                            <button onclick="loadColoringScene(3)" class="scene-btn px-3 py-2 rounded-xl bg-white/10 hover:bg-white/20 text-white text-xs font-bold transition-all border border-white/10 text-center">
5158                                ⭐ Daniel
5159                            </button>
5160                            <button onclick="loadColoringScene(4)" class="scene-btn px-3 py-2 rounded-xl bg-white/10 hover:bg-white/20 text-white text-xs font-bold transition-all border border-white/10 text-center">
5161                                🏛️ Moses
5162                            </button>
5163                            <button onclick="loadColoringScene(5)" class="scene-btn px-3 py-2 rounded-xl bg-white/10 hover:bg-white/20 text-white text-xs font-bold transition-all border border-white/10 text-center">
5164                                👼 Jesus
5165                            </button>
5166                        </div>
5167                    </div>
5168                    
5169                    <!-- Fun Fact -->
5170                    <div class="bg-white/10 rounded-2xl p-4 border border-white/10">
5171                        <div class="flex items-start gap-2">
5172                            <span class="text-lg">💡</span>
5173                            <div>
5174                                <p class="text-white/70 text-xs font-semibold">Did you know?</p>
5175                                <p id="coloringFact" class="text-white/50 text-[10px] mt-0.5">David was a shepherd boy who became a great king! He wrote many Psalms praising God.</p>
5176                            </div>
5177                        </div>
5178                    </div>
5179                </div>
5180            </div>
5181        </div>
5182
5183        <!-- Modal Footer -->
5184        <div class="flex items-center justify-between p-3 border-t border-white/10 bg-white/5 backdrop-blur-sm flex-shrink-0">
5185            <div class="flex gap-2">
5186                <button onclick="resetColoring()" class="px-4 py-2 bg-white/10 hover:bg-white/20 text-white font-bold rounded-xl transition-all text-sm">
5187                    <i class="fa-solid fa-rotate-right mr-1"></i> Reset
5188                </button>
5189                <button onclick="randomColor()" class="px-4 py-2 bg-white/10 hover:bg-white/20 text-white font-bold rounded-xl transition-all text-sm">
5190                    <i class="fa-solid fa-dice mr-1"></i> Random
5191                </button>
5192            </div>
5193            <div class="flex gap-2">
5194                <button onclick="closeActivityModal()" 
5195                        class="px-5 py-2 bg-white/10 hover:bg-white/20 text-white font-bold rounded-xl transition-all text-sm">
5196                    Close
5197                </button>
5198            </div>
5199        </div>
5200    </div>
5201</div>
5202
5203
5204
5205
5206    <!-- Healing Stream.org - Notification Widget -->
5207<script src="https://api.httn.org/Notification/widget/loader.js" 
5208        data-site-id="hslhs-kids"
5209        data-site-name="HSLHS for Kids"
5210        data-logo-url="https://api.httn.org/Notification/assets/Healing School image.png"
5211        data-title="Healing Streams with Pastor Chris"
5212        data-message="Get updates about events and announcements."
5213        data-button-text="Allow"
5214        data-delay="3000">
5215</script>
5215
5216
5217
5218<!-- 
5219
5220  <div id="unifiedPopup" class="show">
5221        <div class="w-full max-w-lg modal-entrance my-auto">
5222            <div class="glass-card rounded-[2.5rem] overflow-hidden flex flex-col max-h-[92vh] border border-white/90 shadow-2xl">
5223
5224               
5225                <button onclick="closePopup()" class="absolute top-4 right-4 z-30 p-2.5 bg-white/90 hover:bg-slate-100 text-slate-600 rounded-full shadow-md transition-all border border-slate-200/80 hover:scale-105 active:scale-95 focus:outline-none" aria-label="Close modal">
5226                    <i class="fa-solid fa-xmark w-4 h-4 flex items-center justify-center"></i>
5227                </button>
5228
5229               
5230                <div class="scroll-container overflow-y-auto p-5 sm:p-7 pt-6">
5231                    
5232             
5233                    <div class="flex flex-col items-center mb-5 text-center">
5234                        <div class="flex flex-wrap justify-center gap-2 mb-3">
5235                            <span class="px-3.5 py-1.5 bg-amber-500/10 text-amber-800 text-[10px] font-black uppercase tracking-wider rounded-full border border-amber-300/80 flex items-center gap-2 shadow-xs">
5236                                <span class="h-2 w-2 rounded-full bg-amber-500 inline-block animate-ping"></span>
5237                                <i class="fa-solid fa-bolt text-amber-600"></i>
5238                                SEASON 16 IS LIVE
5239                            </span>
5240                            <span class="px-3.5 py-1.5 bg-blue-500/10 text-blue-800 text-[10px] font-black uppercase tracking-wider rounded-full border border-blue-300/80 flex items-center gap-1.5 shadow-xs">
5241                                <i class="fa-solid fa-crown text-blue-600"></i>
5242                                GLOBAL CELEBRATION
5243                            </span>
5244                        </div>
5245                        
5246                        <h1 class="text-2xl sm:text-3xl font-black text-slate-900 leading-tight tracking-tight px-1">
5247                            Healing Streams<br>
5248                            <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 via-indigo-600 to-amber-600 font-black">Festival of Miracles Season 16</span>
5249                        </h1>
5250                        <p class="text-xs font-semibold text-slate-500 mt-1 uppercase tracking-wider">July 27 – August 9, 2026</p>
5251                    </div>
5252
5253                    <div class="mb-6">
5254                        <div class="flex items-center justify-between mb-2.5 px-1">
5255                            <h2 class="text-xs font-black uppercase tracking-wider text-slate-700 flex items-center gap-1.5">
5256                                <i class="fa-solid fa-circle-play text-blue-600 animate-pulse"></i>
5257                                Ad Video
5258                            </h2>
5259                            <span class="text-[10px] font-black text-amber-800 bg-amber-100 px-2.5 py-0.5 rounded-full border border-amber-200 shadow-xs flex items-center gap-1">
5260                                <span class="w-1.5 h-1.5 rounded-full bg-amber-500 animate-ping"></span>
5261                                HD VIDEO
5262                            </span>
5263                        </div>
5264
5265                        <div class="relative w-full rounded-[2rem] overflow-hidden border border-slate-200/90 shadow-xl bg-slate-950 flex flex-col items-center justify-center group cursor-pointer" onclick="forcePlayVideo()">
5266                            
5267                           
5268                            <div class="w-full relative min-h-[200px] sm:min-h-[250px] flex items-center justify-center bg-slate-950">
5269                              
5270                                <video id="fomVideoPlayer" class="w-full h-auto max-h-[300px] object-cover rounded-[2rem]" autoplay muted loop playsinline controls preload="auto" poster="https://hsch.ceflixcdn.com/hsrc/images/FOM-season-16.jpg">
5271                                    <source src="https://hsch.ceflixcdn.com/hsrc/images/FOM%23.mp4" type="video/mp4">
5272                                    Your browser does not support HTML5 video playback.
5273                                </video>
5274
5275                              
5276                                <div id="playOverlay" class="absolute inset-0 bg-slate-950/60 backdrop-blur-xs flex flex-col items-center justify-center text-center p-4 transition-opacity duration-300 pointer-events-none">
5277                                    <div class="w-14 h-14 rounded-full bg-blue-600/90 text-white flex items-center justify-center shadow-lg mb-2 animate-bounce">
5278                                        <i class="fa-solid fa-play text-xl ml-1"></i>
5279                                    </div>
5280                                    <span class="text-xs font-bold text-white uppercase tracking-wider bg-slate-900/80 px-3 py-1 rounded-full border border-white/20">
5281                                        Click / Tap to Play
5282                                    </span>
5283                                </div>
5284
5285                               
5286                                <div class="absolute top-3 left-3 pointer-events-none bg-slate-900/80 backdrop-blur-md px-3 py-1 rounded-full text-[10px] font-black text-white uppercase border border-white/20 flex items-center gap-1.5">
5287                                    <span class="w-2 h-2 rounded-full bg-red-500 animate-pulse"></span>
5288                                    Season 16 Official Video
5289                                </div>
5290                            </div>
5291
5292                        </div>
5293                    </div>
5294
5295                    <div class="mb-5 bg-gradient-to-br from-slate-900 to-slate-800 text-white p-4 rounded-2xl border border-slate-700/60 shadow-md">
5296                        <div class="flex items-center justify-between mb-2.5 border-b border-slate-700/80 pb-2">
5297                            <span class="text-xs font-extrabold uppercase tracking-wider text-amber-400 flex items-center gap-1.5">
5298                                <i class="fa-solid fa-clock text-amber-400"></i>
5299                                Viewing Times
5300                            </span>
5301                            <span class="text-[10px] font-bold text-slate-300 bg-slate-700/60 px-2.5 py-0.5 rounded-full uppercase tracking-wider">
5302                                Global Broadcast
5303                            </span>
5304                        </div>
5305
5306                        <div class="grid grid-cols-2 gap-2.5 text-left">
5307                         
5308                            <div class="bg-slate-800/80 p-2.5 rounded-xl border border-slate-700/50">
5309                                <div class="text-[11px] font-black text-blue-400 uppercase tracking-wide flex items-center gap-1 mb-1.5">
5310                                    🗓️ WEEKDAYS
5311                                </div>
5312                                <ul class="text-[11px] font-semibold text-slate-200 space-y-1">
5313                                    <li class="flex items-center gap-1.5"><i class="fa-regular fa-clock text-[9px] text-slate-400"></i> 12:00 PM <span class="text-[9px] text-slate-400 font-normal">(GMT+1)</span></li>
5314                                    <li class="flex items-center gap-1.5"><i class="fa-regular fa-clock text-[9px] text-slate-400"></i> 6:00 PM <span class="text-[9px] text-slate-400 font-normal">(GMT+1)</span></li>
5315                                    <li class="flex items-center gap-1.5"><i class="fa-regular fa-clock text-[9px] text-slate-400"></i> 7:00 PM <span class="text-[9px] text-slate-400 font-normal">(EST)</span></li>
5316                                </ul>
5317                            </div>
5318
5319                           
5320                            <div class="bg-slate-800/80 p-2.5 rounded-xl border border-slate-700/50">
5321                                <div class="text-[11px] font-black text-amber-400 uppercase tracking-wide flex items-center gap-1 mb-1.5">
5322                                    🎉 WEEKENDS
5323                                </div>
5324                                <ul class="text-[11px] font-semibold text-slate-200 space-y-1">
5325                                    <li class="flex items-center gap-1.5"><i class="fa-regular fa-clock text-[9px] text-slate-400"></i> 12:00 PM <span class="text-[9px] text-slate-400 font-normal">(GMT+1)</span></li>
5326                                    <li class="flex items-center gap-1.5"><i class="fa-regular fa-clock text-[9px] text-slate-400"></i> 4:00 PM <span class="text-[9px] text-slate-400 font-normal">(GMT+1)</span></li>
5327                                    <li class="flex items-center gap-1.5"><i class="fa-regular fa-clock text-[9px] text-slate-400"></i> 7:00 PM <span class="text-[9px] text-slate-400 font-normal">(EST)</span></li>
5328                                </ul>
5329                            </div>
5330                        </div>
5331                    </div>
5332
5333                    <div class="space-y-3">
5334                    
5335                        <a href="https://herald.healingstreams.tv/vc/" target="_blank" class="glow-shimmer w-full py-3.5 px-6 rounded-2xl text-white font-extrabold text-sm uppercase tracking-wider flex items-center justify-center gap-2.5 shadow-lg shadow-blue-500/25 transition transform active:scale-98">
5336                            <i class="fa-solid fa-circle-play text-xs animate-bounce"></i>
5337                            <span>Participate Live Now</span>
5338                        </a>
5339
5340                    
5341                        <div class="grid grid-cols-1 sm:grid-cols-3 gap-2">
5342                            <a href="https://healingstreams.tv/testify/" target="_blank" class="card-hover-effect py-2.5 px-2 bg-white hover:bg-slate-50 text-slate-800 border border-slate-200/90 rounded-2xl text-[11px] font-bold text-center flex items-center justify-center gap-1.5 shadow-sm">
5343                                <i class="fa-solid fa-bullhorn text-amber-500"></i>
5344                                <span>Share Testimony</span>
5345                            </a>
5346
5347                            <a href="https://herald.healingstreams.tv/home/create-campaign" target="_blank" class="card-hover-effect py-2.5 px-2 bg-white hover:bg-slate-50 text-slate-800 border border-slate-200/90 rounded-2xl text-[11px] font-bold text-center flex items-center justify-center gap-1.5 shadow-sm">
5348                                <i class="fa-solid fa-earth-americas text-blue-600"></i>
5349                                <span>Amplify Center</span>
5350                            </a>
5351
5352                            <a href="https://herald.healingstreams.tv/mlm/" target="_blank" class="card-hover-effect py-2.5 px-2 bg-white hover:bg-slate-50 text-slate-800 border border-slate-200/90 rounded-2xl text-[11px] font-bold text-center flex items-center justify-center gap-1.5 shadow-sm">
5353                                <i class="fa-solid fa-gem text-purple-600"></i>
5354                                <span>Herald Earn</span>
5355                            </a>
5356                        </div>
5357                    </div>
5358
5359                    <div class="mt-6 pt-4 border-t border-slate-200/80 text-center">
5360                        <p class="text-[11px] font-semibold text-slate-500 flex flex-wrap items-center justify-center gap-1.5">
5361                            <i class="fa-solid fa-headset text-blue-600"></i>
5362                            Need Help? Call <span class="text-slate-800 font-bold">+234 201 330 0167</span> or email <a href="mailto:[email protected]" class="text-blue-600 underline font-bold">[email protected]</a>
5363                        </p>
5364                        <p class="text-[10px] text-slate-400 mt-1 font-medium">KingsChat: <a href="https://kingschat.online/user/hslhs" target="_blank" class="text-blue-500 underline font-semibold">@hslhs</a></p>
5365                    </div>
5366
5367                </div>
5368            </div>
5369        </div>
5370    </div>
5371
5372    <div id="toastMessage" class="fixed bottom-5 left-1/2 -translate-x-1/2 z-50 bg-slate-900 text-white text-xs font-bold px-5 py-3 rounded-xl shadow-2xl opacity-0 transition-all pointer-events-none transform translate-y-4">
5373        Festival modal closed. Refresh page to view again.
5374    </div>
5375
5376    
5376<script>
5377        // Initialize Video Player Autoplay with Fallback
5378        function initVideoPlayer() {
5379            const video = document.getElementById('fomVideoPlayer');
5380            const overlay = document.getElementById('playOverlay');
5381
5382            if (video) {
5383                video.muted = true; // Required by browsers for initial autoplay
5384                const playPromise = video.play();
5385
5386                if (playPromise !== undefined) {
5387                    playPromise.then(() => {
5388                        // Autoplay succeeded
5389                        if (overlay) overlay.style.opacity = '0';
5390                    }).catch(error => {
5391                        console.log("Autoplay prevented by browser policy. Waiting for user tap:", error);
5392                        if (overlay) overlay.style.opacity = '1';
5393                    });
5394                }
5395            }
5396        }
5397
5398        // Force video play on user click/tap
5399        function forcePlayVideo() {
5400            const video = document.getElementById('fomVideoPlayer');
5401            const overlay = document.getElementById('playOverlay');
5402            if (video) {
5403                video.play().then(() => {
5404                    if (overlay) overlay.style.opacity = '0';
5405                }).catch(err => console.log('Playback error:', err));
5406            }
5407        }
5408
5409        // Global touch/click gesture handler to unlock autoplay automatically on first interaction
5410        document.addEventListener('click', function unlockAutoplay() {
5411            forcePlayVideo();
5412            document.removeEventListener('click', unlockAutoplay);
5413        }, { once: true });
5414
5415        // Close Popup with Smooth Animation & Toast Notice
5416        function closePopup() {
5417            const popup = document.getElementById('unifiedPopup');
5418            const toast = document.getElementById('toastMessage');
5419
5420            if (popup) {
5421                popup.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
5422                popup.style.opacity = '0';
5423                popup.style.transform = 'scale(0.95)';
5424                setTimeout(() => {
5425                    popup.style.display = 'none';
5426                }, 300);
5427            }
5428
5429            if (toast) {
5430                toast.classList.remove('opacity-0', 'pointer-events-none', 'translate-y-4');
5431                toast.classList.add('opacity-100', 'translate-y-0');
5432                setTimeout(() => {
5433                    toast.classList.add('opacity-0', 'pointer-events-none', 'translate-y-4');
5434                }, 3500);
5435            }
5436        }
5437
5438        // Initialize Application on Page Load
5439        window.onload = function() {
5440            initVideoPlayer();
5441        };
5442
5443
5444
5445        function showPopup() {
5446            const popup = document.getElementById('unifiedPopup');
5447            if (popup) {
5448                popup.classList.add('show');
5449                popup.style.display = 'flex';
5450                // Small delay for smooth transition
5451                setTimeout(() => {
5452                    popup.style.opacity = '1';
5453                }, 50);
5454            }
5455        }
5456
5457        function closePopup() {
5458            const popup = document.getElementById('unifiedPopup');
5459            if (popup) {
5460                popup.classList.remove('show');
5461                popup.style.display = 'none';
5462                const toast = document.getElementById('toastMessage');
5463                if (toast) {
5464                    toast.classList.remove('opacity-0', 'pointer-events-none', 'translate-y-4');
5465                    toast.classList.add('opacity-100', 'translate-y-0');
5466                    setTimeout(() => {
5467                        toast.classList.add('opacity-0', 'pointer-events-none', 'translate-y-4');
5468                    }, 3500);
5469                }
5470            }
5471        }
5472
5473        // Update window.onload
5474        window.onload = function() {
5475            initVideoPlayer();
5476            showPopup();
5477        };
5478
5479
5480
5481        // Just add this code after your existing JavaScript
5482        document.addEventListener('DOMContentLoaded', function() {
5483            const popup = document.getElementById('unifiedPopup');
5484            
5485            if (popup) {
5486                popup.addEventListener('click', function(event) {
5487                    // Check if the click was on the backdrop (the popup container itself)
5488                    if (event.target === this) {
5489                        closePopup();
5490                    }
5491                });
5492            }
5493        });
5494
5495    </script>
5495 -->
5496
5497
5498
5499
5500</body>
5501</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.