Fellowship Convention Hymns
Prostut KuldipBuild a complete Church Hymnal web app using HTML, CSS, and vanilla JavaScript with Firebase Firestore as the database. Do NOT add any songs yourself — the songs will be added manually by the admin later. --- ## TECH STACK - HTML + CSS + Vanilla JavaScript (single index.html file) - Firebase v9 (compat mode) for Firestore database - No frameworks, no npm — just CDN links --- ## DESIGN — GLASSMORPHISM - Background: deep gradient — use this exact CSS: background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); min-height: 100vh; - All cards and panels: glass effect: background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 20px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); - Glass Buttons: background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50px; color: white; padding: 10px 24px; backdrop-filter: blur(10px); transition: all 0.3s ease; cursor: pointer; On hover: background: rgba(255,255,255,0.22); transform: translateY(-2px); - Active/selected button: background: rgba(100, 160, 255, 0.35); border-color: rgba(100, 160, 255, 0.6); - All text: white or rgba(255,255,255,0.75) - Font: 'Segoe UI', 'Noto Sans Devanagari', sans-serif (supports Hindi, English, Assamese) - Smooth transitions on everything: transition: all 0.3s ease; - Subtle floating orbs in background for depth (CSS only, 2-3 blurred circles, position fixed, z-index -1) --- ## LANGUAGE SYSTEM 3 languages — user can switch anytime: 1. Hindi (हिंदी) 🇮🇳 2. English 🇬🇧 3. Assamese (অসমীয়া) 🏔️ Language switcher: 3 glass pill buttons at top of screen. Selected language highlighted in blue glass. Switching language instantly changes all song titles and lyrics shown on screen. Each song in Firestore has this structure: { number: 1, // hymn number category: "Praise", titles: { hindi: "यीशु मेरा प्यारा है", english: "Jesus My Beloved", assamese: "যীচু মোৰ প্ৰিয়" }, lyrics: { hindi: "full hindi lyrics here", english: "full english lyrics here", assamese: "full assamese lyrics here" } } --- ## SCREENS / PAGES (Single Page App — no page reload) ### 1. HOME SCREEN - App name: "Church Hymnal" with a ✝ cross icon, centered, large - Subtext: "चर्च भजन संग्रह · Song Book" - Language switcher (3 glass pill buttons) - Stats row: "800+ Songs", "3 Languages", "₹50 Only" — glass cards - Unlock banner (if not paid): glass card with "Unlock 800+ Songs — ₹50 one time" - Recent/Featured hymns list (first 8 from Firestore) - "View All Songs →" glass button ### 2. SONGS LIST SCREEN - Search bar at top — glass input field with 🔍 icon - Search works by: hymn number, title in current language, any language title - Real-time filtering as user types (no button press needed) - Smooth fade animation when results change - Category filter chips (glass pills): All, Praise, Worship, Devotional, Prayer, Congregational, Easter, Holy Spirit, Invitation, Trust - Song count shown: "245 भजन" - Song rows: hymn number badge (glass) | title in selected language | subtitle in hindi | category tag | ♡ favorite button - Infinite scroll or load all (Firestore) ### 3. SONG DETAIL SCREEN - Back button (glass) top left - Hymn number + category badge - Title in selected language (large) - Language tab switcher (3 tabs): click to switch lyrics language instantly - Font size controls: A− and A+ glass buttons - Full lyrics displayed, pre-line whitespace preserved, good line-height (1.9) - Favorite ♥ button (red when saved) - Smooth slide-in animation when screen opens ### 4. FAVORITES SCREEN - All hearted songs listed - Stored in localStorage - Same HymnRow style as list --- ## SEARCH FEATURE (important) - Input is always visible at top of Songs screen - On every keystroke: filter Firestore results in memory (load all songs once, filter client-side) - Search matches: hymn number, title in ALL 3 languages (so searching "Jesus" also works in Hindi mode) - If 0 results: show "कोई भजन नहीं मिला 🔍" message - Clear (✕) button inside search field when text is present --- ## PAYMENT / UNLOCK - App loads with isPaid = false (check localStorage for "hymnal_paid") - If not paid: show only first 15 songs, rest blurred/locked - Unlock banner always visible if not paid - On click "Pay ₹50": show a glass modal bottom sheet: - Title: "Full Access Unlock" - Price: ₹50 in large blue text - Features list with ✓ checkmarks - Button: "₹50 UPI से Pay करें" (for now just simulate: set localStorage hymnal_paid=true and reload) - After unlock: show all 800+ songs, green "✅ Full Access" banner --- ## BOTTOM NAVIGATION Fixed at bottom, glass bar: - 🏠 Home - 🎵 Songs - ♥ Saved - Active tab highlighted with blue glass --- ## FIREBASE SETUP Use Firebase v9 compat CDN: <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-app-compat.js"></script> <script src="https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore-compat.js"></script> Firestore collection name: "hymns" Query: db.collection("hymns").orderBy("number") to get songs in order. Load all songs once on app start, store in memory array, then filter client-side for search. Leave Firebase config object empty with a comment: // TODO: Replace with your Firebase project config const firebaseConfig = { apiKey: "YOUR_API_KEY", authDomain: "YOUR_AUTH_DOMAIN", projectId: "YOUR_PROJECT_ID", ... }; --- ## ANIMATIONS - Screen transitions: fade + slight translateY(10px) → translateY(0) - Song row hover: glass card lifts slightly (transform: translateY(-1px)) - Language switch: lyrics fade out and fade in - Search results: smooth opacity transition - Modal: slide up from bottom --- ## IMPORTANT RULES 1. Do NOT add any songs to the code or Firestore — songs will be added by admin separately 2. Single HTML file — all CSS and JS inside one index.html 3. No frameworks (no React, no Vue) — plain HTML/CSS/JS only 4. Must work on mobile (max-width 480px centered) 5. All 3 language lyrics must display correctly (Hindi Devanagari, English, Assamese script) 6. localStorage keys: "hymnal_paid", "hymnal_favs", "hymnal_lang"
Comments (0)
Sign in to leave a comment
Sacred Hymns, Beautifully Organized
Experience the complete hymnal collection in Hindi, English, and Assamese. Search by number or title, save your favorites, and follow along during worship — all in one place.
Hover & click a page to explore
Everything You Need for Worship
A complete hymnal experience designed for congregations, choirs, and personal devotion.
Multi-Language Support
Switch seamlessly between Hindi, English, and Assamese hymns with a single tap during any service.
Smart Search
Find hymns instantly by number, title, or category with real-time filtering as you type.
Personal Favorites
Save your most-loved hymns to a personal collection for quick access during worship.
Full Hymn Collection
Unlock the complete hymnal library — every hymn in three languages — for just ₹50, forever.
Three Steps to Spiritual Harmony
Browse Hymns
Explore our curated collection of sacred hymns. Preview free selections or search by title and category.
Unlock Access
Make a one-time payment of ₹50 to unlock the entire hymn library across all three languages.
Sing Together
Follow along with beautifully formatted lyrics, adjust font size, and save favorites for every service.
One Hymn, Three Languages
Switch between Hindi, English, and Assamese instantly while viewing any hymn.
"हे प्रभु, तेरा नाम कितना महान है!"
— भजन संहिता 8:1
"O Lord, our Lord, how majestic is your name in all the earth!"
— Psalm 8:1
"হে প্ৰভু, তোমাৰ নাম কিমান মহতীয়া!"
— গীতসংহিতা ৮:১
Ready to Begin Your Journey?
Join thousands of worshippers who have unlocked the complete hymnal collection. One payment of ₹50 grants you lifetime access to every hymn in three languages.
No comments yet. Be the first!