bible

byYAKUBU MAGDALENE

MASTER BUILD PROMPT — BIBLE ACADEMY Build/refine this project as a polished responsive web app called BIBLE ACADEMY. USE THE UPLOADED LOGO EXACTLY AS THE OFFICIAL BRAND LOGO: - Do not redesign, redraw, recolor, distort or replace it. - Keep its blue/off-white identity. - Use it on login/onboarding, navbar, dashboard, loading screen and appropriate branding areas. - Tagline: LEARN • GROW • DISCOVER DESIGN: Modern, professional, educational + faith-focused. Mobile-first, responsive desktop/mobile. Deep blue + off-white palette based on logo. Clean cards, soft borders, subtle shadows and smooth animations. Do NOT make it childish or overly complicated. CORE SECTIONS: Home/Dashboard Bible Stories Bible Reading/Verses Bible Learning Quizzes Comics/Visual Lessons Voice Narration Progress AI Bible Assistant Admin Dashboard AI ASSISTANT: Create "ZION", the Bible Academy AI learning guide. Zion can answer Bible-learning questions, explain lessons, guide users around the app and help with quizzes. Keep answers educational, respectful and age-appropriate. Do not expose API keys in frontend code. VOICE ASSISTANT: Add a voice assistant UI similar in UX to our ESA ELSA assistant: - Floating on the side, NOT fullscreen. - Medium circular/luminous interface. - Blue/purple glow with subtle animated aura. - Idle = gentle breathing glow. - Listening = stronger pulse. - Speaking = smooth expanding/contracting glow. - Mobile = responsive floating assistant. - Never cover important content. - Show small status text: LISTENING / THINKING / SPEAKING. - Text chat fallback must always exist. For the TRIAL, do NOT require a paid voice provider. Use browser Web Speech API: SpeechRecognition for voice input where supported. SpeechSynthesis + SpeechSynthesisUtterance for voice output. Use available English device voice automatically. Fallback to text if voice recognition is unavailable. VOICE RESPONSE CODE: const synth=window.speechSynthesis; function speak(text){ if(!synth)return; synth.cancel(); const u=new SpeechSynthesisUtterance(text); u.lang="en-US";u.rate=.95;u.pitch=1; const v=synth.getVoices().find(x=>x.lang.startsWith("en")); if(v)u.voice=v; u.onstart=()=>document.body.classList.add("ai-speaking"); u.onend=()=>document.body.classList.remove("ai-speaking"); synth.speak(u); } speechSynthesis.onvoiceschanged=()=>speechSynthesis.getVoices(); VOICE INPUT: const SR=window.SpeechRecognition||window.webkitSpeechRecognition; if(SR){ const r=new SR(); r.lang="en-US";r.interimResults=false;r.continuous=false; r.onresult=e=>handleAIInput(e.results[0][0].transcript); } Connect handleAIInput() to the existing AI response system so every AI text response can also call speak(response). ADMIN SYSTEM: Create secure role-based administration. Roles: FULL_ADMINISTRATOR EDITOR/CONTENT_ADMIN USER FULL_ADMINISTRATOR has access to: - Dashboard - Students/users - Bible content - Stories - Lessons - Quizzes - Comics - Analytics - Reports - Settings - Admin management - Backups/recovery MULTI-ADMIN: More than one Full Administrator must be supported. An existing Full Administrator can invite another administrator by email. Invitation creates a secure invitation/token. The invited person creates/uses their own account. Never share passwords between administrators. Both admins access the same database/backend and see the same authorized data. Admin permissions must be enforced by the backend, not only hidden in the UI. Keep an audit log of important admin actions. ADMIN AI: Create private admin AI assistant "SAGE". SAGE exists ONLY inside the authenticated Admin Dashboard. SAGE can: - summarize dashboard activity - report online users - report registrations - report quiz/exam activity - find/search content - navigate admin sections - generate lesson/quiz drafts - help create reports - explain analytics - assist with routine admin work SAGE must NOT directly expose database credentials, API keys or secrets. SAGE must NOT perform destructive actions without explicit confirmation. Deletion, permission changes, backup overwrite/recovery and other sensitive actions require confirmation. Only backend-authorized tools/actions may execute. Show success only after backend confirmation. SAGE VOICE: Use the SAME floating glowing voice design described above. Side-positioned, blue/purple luminous, responsive, subtle and professional. Text + voice. Use browser SpeechSynthesis for the trial instead of requiring a paid TTS API. SECURITY: Keep all AI/API secrets server-side. Use environment variables/secrets. Never place API keys in HTML, CSS, frontend JavaScript or localStorage. Validate admin permissions server-side. Add basic rate limiting/input validation where possible. DATA: Use persistent database storage for users, roles, content, progress, quizzes and admin records. Do not rely on temporary in-memory data for important information. IMPORTANT: Preserve existing working features. Do not unnecessarily rebuild unrelated parts. Prioritize a working polished prototype over unnecessary complexity. If a requested external API is unavailable, use a safe browser-native fallback rather than leaving the feature broken. FINAL RESULT: Bible Academy should feel like a real professional international education/faith platform, with the uploaded logo as the core identity, Zion for learners and SAGE for administrators.