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.