Bari Samaj – Community Portal<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\" rel=\"stylesheet\">\n \n \n <script src=\"https:\/\/www.gstatic.com\/firebasejs\/8.10.1\/firebase-app.js\"><\/script>\n <script src=\"https:\/\/www.gstatic.com\/firebasejs\/8.10.1\/firebase-database.js\"><\/script>\n\n <style>\n :root { --primary: #15803d; --secondary: #db2777; }\n .text-primary { color: var(--primary); }\n .bg-primary { background-color: var(--primary); }\n .view-section { display: none; animation: fadeIn 0.4s ease-in-out; }\n .view-section.active { display: block; }\n @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }\n .nav-link.active-nav { font-weight: bold; border-bottom: 3px solid var(--primary); color: var(--primary); }\n .nav-link.active-matrimony { font-weight: bold; border-bottom: 3px solid var(--secondary); color: var(--secondary); }\n <\/style>\n<\/head>\n<body class=\"bg-gray-50 font-sans flex flex-col min-h-screen\">\n\n <datalist id=\"gotraList\">\n <option value=\"Bari\"><option value=\"Pandit\"><option value=\"Rawat\"><option value=\"Chauhan\">\n <\/datalist>\n\n \n <nav class=\"bg-white shadow-md sticky top-0 z-50\">\n <div class=\"container mx-auto px-4 py-3 flex justify-between items-center\">\n <h1 class=\"text-2xl font-bold text-primary cursor-pointer\" onclick=\"switchTab('home')\">\n <i class=\"fas fa-om text-orange-500\"><\/i> BariSamaj.in\n <\/h1>\n <div class=\"space-x-4 hidden lg:flex items-center text-sm font-medium text-gray-600\">\n <button onclick=\"switchTab('home')\" class=\"nav-link active-nav pb-2\">Home<\/button>\n <button onclick=\"switchTab('regGeneral')\" class=\"nav-link pb-2\">Member Reg.<\/button>\n <button onclick=\"switchTab('regMatrimony')\" class=\"nav-link pb-2 hover:text-pink-600\">Matrimony Reg.<\/button>\n <button onclick=\"switchTab('directory')\" class=\"nav-link pb-2\">Directory<\/button>\n <button onclick=\"switchTab('matrimonial')\" class=\"nav-link pb-2 hover:text-pink-600\">Find Matches <i class=\"fas fa-heart text-pink-500\"><\/i><\/button>\n <\/div>\n <button id=\"mobileMenuBtn\" class=\"lg:hidden text-gray-600\"><i class=\"fas fa-bars text-2xl\"><\/i><\/button>\n <\/div>\n <div id=\"mobileMenu\" class=\"hidden lg:hidden flex-col space-y-3 px-4 pb-4 bg-white shadow border-t pt-4\">\n <button onclick=\"switchTab('home')\" class=\"text-left w-full\">Home<\/button>\n <button onclick=\"switchTab('regGeneral')\" class=\"text-left w-full\">Member Reg.<\/button>\n <button onclick=\"switchTab('regMatrimony')\" class=\"text-left w-full text-pink-600\">Matrimony Reg.<\/button>\n <button onclick=\"switchTab('directory')\" class=\"text-left w-full\">Directory<\/button>\n <button onclick=\"switchTab('matrimonial')\" class=\"text-left w-full text-pink-600\">Find Matches<\/button>\n <\/div>\n <\/nav>\n\n <div class=\"flex-grow\">\n \n <div id=\"home\" class=\"view-section active\">\n <header class=\"bg-primary text-white py-16 px-4 text-center\">\n <h2 class=\"text-3xl md:text-5xl font-bold mb-4\">Official Database of Bari Samaj<\/h2>\n <p class=\"text-lg opacity-90 max-w-2xl mx-auto mb-8\">Uniting our community globally.<\/p>\n <div class=\"flex flex-col sm:flex-row justify-center gap-4\">\n <button onclick=\"switchTab('regGeneral')\" class=\"bg-white text-primary font-bold py-3 px-8 rounded-full\">Join Directory<\/button>\n <button onclick=\"switchTab('regMatrimony')\" class=\"bg-pink-600 text-white font-bold py-3 px-8 rounded-full\">Register Matrimony<\/button>\n <\/div>\n <\/header>\n <\/div>\n\n \n <div id=\"regGeneral\" class=\"view-section py-10 px-4 container mx-auto max-w-4xl\">\n <div class=\"bg-white p-8 rounded-xl shadow-lg border-t-4 border-primary\">\n <h2 class=\"text-2xl font-bold mb-6\"><i class=\"fas fa-user-plus text-primary\"><\/i> General Registration<\/h2>\n <form id=\"generalForm\" class=\"space-y-6\" onsubmit=\"handleGeneralSubmit(event)\">\n <div class=\"grid md:grid-cols-2 gap-4\">\n <div><label class=\"block text-sm font-medium mb-1\">Profile Photo<\/label><input type=\"file\" id=\"g_photo\" accept=\"image\/*\" class=\"w-full p-2 border rounded\"><\/div>\n <div><label class=\"block text-sm font-medium mb-1\">Full Name *<\/label><input type=\"text\" id=\"g_name\" required class=\"w-full p-2 border rounded\"><\/div>\n <div><label class=\"block text-sm font-medium mb-1\">Father’s Name *<\/label><input type=\"text\" id=\"g_fname\" required class=\"w-full p-2 border rounded\"><\/div>\n <div><label class=\"block text-sm font-medium mb-1\">Gotra *<\/label><input list=\"gotraList\" id=\"g_gotra\" required class=\"w-full p-2 border rounded\"><\/div>\n <div><label class=\"block text-sm font-medium mb-1\">City & State *<\/label><input type=\"text\" id=\"g_city\" required class=\"w-full p-2 border rounded\"><\/div>\n <div><label class=\"block text-sm font-medium mb-1\">Mobile Number *<\/label><input type=\"tel\" id=\"g_phone\" required class=\"w-full p-2 border rounded\"><\/div>\n <\/div>\n <button type=\"submit\" id=\"g_btn\" class=\"w-full bg-primary text-white font-bold py-3 rounded-lg shadow-md\">Save Data<\/button>\n <\/form>\n <div id=\"g_success\" class=\"hidden text-center py-8 text-green-600 font-bold text-xl\">Member Added Successfully!<\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"regMatrimony\" class=\"view-section py-10 px-4 container mx-auto max-w-5xl\">\n <div class=\"bg-white p-8 rounded-xl shadow-lg border-t-4 border-pink-500\">\n <h2 class=\"text-2xl font-bold mb-6\"><i class=\"fas fa-rings text-pink-500\"><\/i> Matrimonial Registration<\/h2>\n <form id=\"matrimonyForm\" class=\"space-y-6\" onsubmit=\"handleMatrimonySubmit(event)\">\n <div class=\"grid md:grid-cols-3 gap-4\">\n <div><label class=\"block text-xs font-bold text-gray-600\">Upload Photo *<\/label><input type=\"file\" id=\"m_photo\" accept=\"image\/*\" required class=\"w-full p-1.5 border rounded\"><\/div>\n <div><label class=\"block text-xs font-bold text-gray-600\">Full Name *<\/label><input type=\"text\" id=\"m_name\" required class=\"w-full p-2 border rounded\"><\/div>\n <div><label class=\"block text-xs font-bold text-gray-600\">Gender *<\/label><select id=\"m_gender\" required class=\"w-full p-2 border rounded\"><option>Male<\/option><option>Female<\/option><\/select><\/div>\n <div><label class=\"block text-xs font-bold text-gray-600\">Date of Birth *<\/label><input type=\"date\" id=\"m_dob\" required class=\"w-full p-2 border rounded\"><\/div>\n <div><label class=\"block text-xs font-bold text-gray-600\">Gotra *<\/label><input list=\"gotraList\" id=\"m_gotra\" required class=\"w-full p-2 border rounded\"><\/div>\n <div><label class=\"block text-xs font-bold text-gray-600\">City & State *<\/label><input type=\"text\" id=\"m_city\" required class=\"w-full p-2 border rounded\"><\/div>\n <div><label class=\"block text-xs font-bold text-gray-600\">Education *<\/label><input type=\"text\" id=\"m_edu\" required class=\"w-full p-2 border rounded\"><\/div>\n <div><label class=\"block text-xs font-bold text-gray-600\">Job\/Profession *<\/label><input type=\"text\" id=\"m_job\" required class=\"w-full p-2 border rounded\"><\/div>\n <div><label class=\"block text-xs font-bold text-gray-600\">Phone Number *<\/label><input type=\"tel\" id=\"m_phone\" required class=\"w-full p-2 border rounded\"><\/div>\n <\/div>\n <button type=\"submit\" id=\"m_btn\" class=\"w-full bg-pink-600 text-white font-bold py-3 rounded-lg shadow-md\">Create Matrimony Profile<\/button>\n <\/form>\n <div id=\"m_success\" class=\"hidden text-center py-8 text-pink-600 font-bold text-xl\">Profile Created Successfully!<\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"directory\" class=\"view-section py-10 px-4 container mx-auto\">\n <h2 class=\"text-3xl font-bold text-center mb-8\">Community Directory<\/h2>\n <div id=\"directoryContainer\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n <p class=\"text-center col-span-full\">Loading data…<\/p>\n <\/div>\n <\/div>\n\n \n <div id=\"matrimonial\" class=\"view-section py-10 px-4 container mx-auto\">\n <h2 class=\"text-3xl font-bold text-center text-pink-600 mb-8\"><i class=\"fas fa-heart\"><\/i> Find Matches<\/h2>\n <div id=\"matrimonialContainer\" class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6\">\n <p class=\"text-center col-span-full\">Loading data…<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ ========================================================\n \/\/ \u26a0\ufe0f YAHA APNA FIREBASE CONFIG CODE PASTE KAREIN (STEP 1 SE)\n \/\/ ========================================================\n \/\/ Import the functions you need from the SDKs you need\n import { initializeApp } from \"https:\/\/www.gstatic.com\/firebasejs\/12.11.0\/firebase-app.js\";\n \/\/ TODO: Add SDKs for Firebase products that you want to use\n \/\/ https:\/\/firebase.google.com\/docs\/web\/setup#available-libraries\n\n \/\/ Your web app's Firebase configuration\n const firebaseConfig = {\n apiKey: \"AIzaSyCq9iMFtYGZ7d1-1m6GjMUQ_DQGBcub-RI\",\n authDomain: \"barisamaj-fb478.firebaseapp.com\",\n projectId: \"barisamaj-fb478\",\n storageBucket: \"barisamaj-fb478.firebasestorage.app\",\n messagingSenderId: \"939136200649\",\n appId: \"1:939136200649:web:fd62496139b8d6af4b8218\"\n };\n };\n \/\/ Initialize Firebase\n firebase.initializeApp(firebaseConfig);\n const database = firebase.database();\n \/\/ ========================================================\n\n let membersData = [];\n\n \/\/ Realtime Data Fetching from Database\n database.ref('samaj_members').on('value', (snapshot) => {\n const data = snapshot.val();\n membersData = [];\n for (let id in data) { membersData.push(data[id]); }\n renderDirectory();\n renderMatrimonial();\n });\n\n \/\/ Tab Switching Logic\n function switchTab(tabId) {\n document.querySelectorAll('.view-section').forEach(sec => sec.classList.remove('active'));\n document.getElementById(tabId).classList.add('active');\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }\n\n document.getElementById('mobileMenuBtn').addEventListener('click', () => {\n document.getElementById('mobileMenu').classList.toggle('hidden');\n });\n\n \/\/ Image Compressor (To save DB space)\n function compressImage(file) {\n return new Promise((resolve) => {\n if(!file) { resolve(null); return; }\n const reader = new FileReader();\n reader.readAsDataURL(file);\n reader.onload = (event) => {\n const img = new Image();\n img.src = event.target.result;\n img.onload = () => {\n const canvas = document.createElement('canvas');\n const MAX_WIDTH = 400; \/\/ Small size for fast loading\n const scaleSize = MAX_WIDTH \/ img.width;\n canvas.width = MAX_WIDTH;\n canvas.height = img.height * scaleSize;\n const ctx = canvas.getContext('2d');\n ctx.drawImage(img, 0, 0, canvas.width, canvas.height);\n resolve(canvas.toDataURL('image\/jpeg', 0.6)); \/\/ Compress to 60% quality\n }\n }\n });\n }\n\n \/\/ Form Submit: General\n async function handleGeneralSubmit(e) {\n e.preventDefault();\n document.getElementById('g_btn').innerHTML = \"Saving to Server...\";\n \n const file = document.getElementById('g_photo').files[0];\n const compressedPhoto = await compressImage(file);\n\n const data = {\n type: 'general',\n photo: compressedPhoto,\n name: document.getElementById('g_name').value,\n fname: document.getElementById('g_fname').value,\n gotra: document.getElementById('g_gotra').value,\n city: document.getElementById('g_city').value,\n phone: document.getElementById('g_phone').value,\n timestamp: Date.now()\n };\n\n database.ref('samaj_members').push(data).then(() => {\n document.getElementById('generalForm').classList.add('hidden');\n document.getElementById('g_success').classList.remove('hidden');\n setTimeout(() => { document.getElementById('generalForm').reset(); document.getElementById('g_btn').innerHTML = \"Save Data\"; document.getElementById('generalForm').classList.remove('hidden'); document.getElementById('g_success').classList.add('hidden'); }, 3000);\n });\n }\n\n \/\/ Form Submit: Matrimony\n async function handleMatrimonySubmit(e) {\n e.preventDefault();\n document.getElementById('m_btn').innerHTML = \"Uploading Profile...\";\n \n const file = document.getElementById('m_photo').files[0];\n const compressedPhoto = await compressImage(file);\n\n const data = {\n type: 'matrimony',\n photo: compressedPhoto,\n name: document.getElementById('m_name').value,\n gender: document.getElementById('m_gender').value,\n dob: document.getElementById('m_dob').value,\n gotra: document.getElementById('m_gotra').value,\n city: document.getElementById('m_city').value,\n edu: document.getElementById('m_edu').value,\n job: document.getElementById('m_job').value,\n phone: document.getElementById('m_phone').value,\n timestamp: Date.now()\n };\n\n database.ref('samaj_members').push(data).then(() => {\n document.getElementById('matrimonyForm').classList.add('hidden');\n document.getElementById('m_success').classList.remove('hidden');\n setTimeout(() => { document.getElementById('matrimonyForm').reset(); document.getElementById('m_btn').innerHTML = \"Create Matrimony Profile\"; document.getElementById('matrimonyForm').classList.remove('hidden'); document.getElementById('m_success').classList.add('hidden'); }, 3000);\n });\n }\n\n \/\/ Render Cards\n function renderDirectory() {\n const container = document.getElementById('directoryContainer');\n if(membersData.length === 0) { container.innerHTML = `<p class=\"col-span-full text-center\">No records found.<\/p>`; return; }\n \n \/\/ Sort by newest first\n let sortedData = membersData.sort((a,b) => b.timestamp - a.timestamp);\n \n container.innerHTML = sortedData.map(m => `\n <div class=\"bg-white rounded-xl shadow border-l-4 ${m.type==='matrimony'?'border-pink-500':'border-primary'} p-5 flex items-center space-x-4\">\n ${m.photo ? `<img decoding=\"async\" src=\"${m.photo}\" class=\"w-16 h-16 rounded-full object-cover\">` : `<div class=\"w-16 h-16 rounded-full bg-gray-200 flex items-center justify-center\"><i class=\"fas fa-user\"><\/i><\/div>`}\n <div>\n <h3 class=\"font-bold text-lg text-gray-800\">${m.name}<\/h3>\n <p class=\"text-sm text-gray-600\"><i class=\"fas fa-om text-orange-400 w-4\"><\/i> ${m.gotra}<\/p>\n <p class=\"text-sm text-gray-600\"><i class=\"fas fa-map-marker-alt text-blue-400 w-4\"><\/i> ${m.city}<\/p>\n <p class=\"text-sm text-green-600 font-bold\"><i class=\"fas fa-phone\"><\/i> ${m.phone}<\/p>\n <\/div>\n <\/div>`).join('');\n }\n\n function renderMatrimonial() {\n const container = document.getElementById('matrimonialContainer');\n let data = membersData.filter(m => m.type === 'matrimony').sort((a,b) => b.timestamp - a.timestamp);\n if(data.length === 0) { container.innerHTML = `<p class=\"col-span-full text-center\">No profiles yet.<\/p>`; return; }\n \n container.innerHTML = data.map(m => `\n <div class=\"bg-white rounded-xl shadow-lg overflow-hidden border\">\n ${m.photo ? `<img decoding=\"async\" src=\"${m.photo}\" class=\"w-full h-48 object-cover object-top\">` : `<div class=\"w-full h-48 bg-gray-200\"><\/div>`}\n <div class=\"p-4\">\n <h3 class=\"font-bold text-xl\">${m.name}<\/h3>\n <p class=\"text-xs text-pink-600 font-bold mb-2\">${m.gender} \u2022 ${new Date().getFullYear() - parseInt(m.dob.substring(0,4))} Yrs<\/p>\n <div class=\"text-sm space-y-1 text-gray-700\">\n <p><strong>Gotra:<\/strong> ${m.gotra}<\/p>\n <p><strong>Edu:<\/strong> ${m.edu}<\/p>\n <p><strong>Job:<\/strong> ${m.job}<\/p>\n <p><strong>City:<\/strong> ${m.city}<\/p>\n <\/div>\n <\/div>\n <button onclick=\"alert('Phone Number: ${m.phone}')\" class=\"w-full bg-pink-50 text-pink-600 p-2 font-bold border-t\"><i class=\"fas fa-phone\"><\/i> Contact<\/button>\n <\/div>`).join('');\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Bari Samaj – Community Portal BariSamaj.in Home Member Reg. Matrimony Reg. Directory Find Matches Home Member Reg. Matrimony Reg. Directory Find Matches Official Database of Bari Samaj Uniting our community globally. Join Directory Register Matrimony General Registration Profile Photo Full Name * Father’s Name * Gotra * City & State * Mobile Number * Save […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"footnotes":""},"class_list":["post-358","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/barisamaj.in\/index.php?rest_route=\/wp\/v2\/pages\/358","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/barisamaj.in\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/barisamaj.in\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/barisamaj.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/barisamaj.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=358"}],"version-history":[{"count":4,"href":"https:\/\/barisamaj.in\/index.php?rest_route=\/wp\/v2\/pages\/358\/revisions"}],"predecessor-version":[{"id":488,"href":"https:\/\/barisamaj.in\/index.php?rest_route=\/wp\/v2\/pages\/358\/revisions\/488"}],"wp:attachment":[{"href":"https:\/\/barisamaj.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=358"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":358,"date":"2025-08-18T09:09:40","date_gmt":"2025-08-18T09:09:40","guid":{"rendered":"https:\/\/barisamaj.in\/?page_id=358"},"modified":"2026-03-31T12:58:37","modified_gmt":"2026-03-31T12:58:37","slug":"directory","status":"publish","type":"page","link":"https:\/\/barisamaj.in\/?page_id=358","title":{"rendered":"Directory"},"content":{"rendered":"\n\n\n\n \n \n Bari Samaj – Community Portal<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <link href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\" rel=\"stylesheet\">\n \n \n <script src=\"https:\/\/www.gstatic.com\/firebasejs\/8.10.1\/firebase-app.js\"><\/script>\n <script src=\"https:\/\/www.gstatic.com\/firebasejs\/8.10.1\/firebase-database.js\"><\/script>\n\n <style>\n :root { --primary: #15803d; --secondary: #db2777; }\n .text-primary { color: var(--primary); }\n .bg-primary { background-color: var(--primary); }\n .view-section { display: none; animation: fadeIn 0.4s ease-in-out; }\n .view-section.active { display: block; }\n @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }\n .nav-link.active-nav { font-weight: bold; border-bottom: 3px solid var(--primary); color: var(--primary); }\n .nav-link.active-matrimony { font-weight: bold; border-bottom: 3px solid var(--secondary); color: var(--secondary); }\n <\/style>\n<\/head>\n<body class=\"bg-gray-50 font-sans flex flex-col min-h-screen\">\n\n <datalist id=\"gotraList\">\n <option value=\"Bari\"><option value=\"Pandit\"><option value=\"Rawat\"><option value=\"Chauhan\">\n <\/datalist>\n\n \n <nav class=\"bg-white shadow-md sticky top-0 z-50\">\n <div class=\"container mx-auto px-4 py-3 flex justify-between items-center\">\n <h1 class=\"text-2xl font-bold text-primary cursor-pointer\" onclick=\"switchTab('home')\">\n <i class=\"fas fa-om text-orange-500\"><\/i> BariSamaj.in\n <\/h1>\n <div class=\"space-x-4 hidden lg:flex items-center text-sm font-medium text-gray-600\">\n <button onclick=\"switchTab('home')\" class=\"nav-link active-nav pb-2\">Home<\/button>\n <button onclick=\"switchTab('regGeneral')\" class=\"nav-link pb-2\">Member Reg.<\/button>\n <button onclick=\"switchTab('regMatrimony')\" class=\"nav-link pb-2 hover:text-pink-600\">Matrimony Reg.<\/button>\n <button onclick=\"switchTab('directory')\" class=\"nav-link pb-2\">Directory<\/button>\n <button onclick=\"switchTab('matrimonial')\" class=\"nav-link pb-2 hover:text-pink-600\">Find Matches <i class=\"fas fa-heart text-pink-500\"><\/i><\/button>\n <\/div>\n <button id=\"mobileMenuBtn\" class=\"lg:hidden text-gray-600\"><i class=\"fas fa-bars text-2xl\"><\/i><\/button>\n <\/div>\n <div id=\"mobileMenu\" class=\"hidden lg:hidden flex-col space-y-3 px-4 pb-4 bg-white shadow border-t pt-4\">\n <button onclick=\"switchTab('home')\" class=\"text-left w-full\">Home<\/button>\n <button onclick=\"switchTab('regGeneral')\" class=\"text-left w-full\">Member Reg.<\/button>\n <button onclick=\"switchTab('regMatrimony')\" class=\"text-left w-full text-pink-600\">Matrimony Reg.<\/button>\n <button onclick=\"switchTab('directory')\" class=\"text-left w-full\">Directory<\/button>\n <button onclick=\"switchTab('matrimonial')\" class=\"text-left w-full text-pink-600\">Find Matches<\/button>\n <\/div>\n <\/nav>\n\n <div class=\"flex-grow\">\n \n <div id=\"home\" class=\"view-section active\">\n <header class=\"bg-primary text-white py-16 px-4 text-center\">\n <h2 class=\"text-3xl md:text-5xl font-bold mb-4\">Official Database of Bari Samaj<\/h2>\n <p class=\"text-lg opacity-90 max-w-2xl mx-auto mb-8\">Uniting our community globally.<\/p>\n <div class=\"flex flex-col sm:flex-row justify-center gap-4\">\n <button onclick=\"switchTab('regGeneral')\" class=\"bg-white text-primary font-bold py-3 px-8 rounded-full\">Join Directory<\/button>\n <button onclick=\"switchTab('regMatrimony')\" class=\"bg-pink-600 text-white font-bold py-3 px-8 rounded-full\">Register Matrimony<\/button>\n <\/div>\n <\/header>\n <\/div>\n\n \n <div id=\"regGeneral\" class=\"view-section py-10 px-4 container mx-auto max-w-4xl\">\n <div class=\"bg-white p-8 rounded-xl shadow-lg border-t-4 border-primary\">\n <h2 class=\"text-2xl font-bold mb-6\"><i class=\"fas fa-user-plus text-primary\"><\/i> General Registration<\/h2>\n <form id=\"generalForm\" class=\"space-y-6\" onsubmit=\"handleGeneralSubmit(event)\">\n <div class=\"grid md:grid-cols-2 gap-4\">\n <div><label class=\"block text-sm font-medium mb-1\">Profile Photo<\/label><input type=\"file\" id=\"g_photo\" accept=\"image\/*\" class=\"w-full p-2 border rounded\"><\/div>\n <div><label class=\"block text-sm font-medium mb-1\">Full Name *<\/label><input type=\"text\" id=\"g_name\" required class=\"w-full p-2 border rounded\"><\/div>\n <div><label class=\"block text-sm font-medium mb-1\">Father’s Name *<\/label><input type=\"text\" id=\"g_fname\" required class=\"w-full p-2 border rounded\"><\/div>\n <div><label class=\"block text-sm font-medium mb-1\">Gotra *<\/label><input list=\"gotraList\" id=\"g_gotra\" required class=\"w-full p-2 border rounded\"><\/div>\n <div><label class=\"block text-sm font-medium mb-1\">City & State *<\/label><input type=\"text\" id=\"g_city\" required class=\"w-full p-2 border rounded\"><\/div>\n <div><label class=\"block text-sm font-medium mb-1\">Mobile Number *<\/label><input type=\"tel\" id=\"g_phone\" required class=\"w-full p-2 border rounded\"><\/div>\n <\/div>\n <button type=\"submit\" id=\"g_btn\" class=\"w-full bg-primary text-white font-bold py-3 rounded-lg shadow-md\">Save Data<\/button>\n <\/form>\n <div id=\"g_success\" class=\"hidden text-center py-8 text-green-600 font-bold text-xl\">Member Added Successfully!<\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"regMatrimony\" class=\"view-section py-10 px-4 container mx-auto max-w-5xl\">\n <div class=\"bg-white p-8 rounded-xl shadow-lg border-t-4 border-pink-500\">\n <h2 class=\"text-2xl font-bold mb-6\"><i class=\"fas fa-rings text-pink-500\"><\/i> Matrimonial Registration<\/h2>\n <form id=\"matrimonyForm\" class=\"space-y-6\" onsubmit=\"handleMatrimonySubmit(event)\">\n <div class=\"grid md:grid-cols-3 gap-4\">\n <div><label class=\"block text-xs font-bold text-gray-600\">Upload Photo *<\/label><input type=\"file\" id=\"m_photo\" accept=\"image\/*\" required class=\"w-full p-1.5 border rounded\"><\/div>\n <div><label class=\"block text-xs font-bold text-gray-600\">Full Name *<\/label><input type=\"text\" id=\"m_name\" required class=\"w-full p-2 border rounded\"><\/div>\n <div><label class=\"block text-xs font-bold text-gray-600\">Gender *<\/label><select id=\"m_gender\" required class=\"w-full p-2 border rounded\"><option>Male<\/option><option>Female<\/option><\/select><\/div>\n <div><label class=\"block text-xs font-bold text-gray-600\">Date of Birth *<\/label><input type=\"date\" id=\"m_dob\" required class=\"w-full p-2 border rounded\"><\/div>\n <div><label class=\"block text-xs font-bold text-gray-600\">Gotra *<\/label><input list=\"gotraList\" id=\"m_gotra\" required class=\"w-full p-2 border rounded\"><\/div>\n <div><label class=\"block text-xs font-bold text-gray-600\">City & State *<\/label><input type=\"text\" id=\"m_city\" required class=\"w-full p-2 border rounded\"><\/div>\n <div><label class=\"block text-xs font-bold text-gray-600\">Education *<\/label><input type=\"text\" id=\"m_edu\" required class=\"w-full p-2 border rounded\"><\/div>\n <div><label class=\"block text-xs font-bold text-gray-600\">Job\/Profession *<\/label><input type=\"text\" id=\"m_job\" required class=\"w-full p-2 border rounded\"><\/div>\n <div><label class=\"block text-xs font-bold text-gray-600\">Phone Number *<\/label><input type=\"tel\" id=\"m_phone\" required class=\"w-full p-2 border rounded\"><\/div>\n <\/div>\n <button type=\"submit\" id=\"m_btn\" class=\"w-full bg-pink-600 text-white font-bold py-3 rounded-lg shadow-md\">Create Matrimony Profile<\/button>\n <\/form>\n <div id=\"m_success\" class=\"hidden text-center py-8 text-pink-600 font-bold text-xl\">Profile Created Successfully!<\/div>\n <\/div>\n <\/div>\n\n \n <div id=\"directory\" class=\"view-section py-10 px-4 container mx-auto\">\n <h2 class=\"text-3xl font-bold text-center mb-8\">Community Directory<\/h2>\n <div id=\"directoryContainer\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n <p class=\"text-center col-span-full\">Loading data…<\/p>\n <\/div>\n <\/div>\n\n \n <div id=\"matrimonial\" class=\"view-section py-10 px-4 container mx-auto\">\n <h2 class=\"text-3xl font-bold text-center text-pink-600 mb-8\"><i class=\"fas fa-heart\"><\/i> Find Matches<\/h2>\n <div id=\"matrimonialContainer\" class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6\">\n <p class=\"text-center col-span-full\">Loading data…<\/p>\n <\/div>\n <\/div>\n <\/div>\n\n <script>\n \/\/ ========================================================\n \/\/ \u26a0\ufe0f YAHA APNA FIREBASE CONFIG CODE PASTE KAREIN (STEP 1 SE)\n \/\/ ========================================================\n \/\/ Import the functions you need from the SDKs you need\n import { initializeApp } from \"https:\/\/www.gstatic.com\/firebasejs\/12.11.0\/firebase-app.js\";\n \/\/ TODO: Add SDKs for Firebase products that you want to use\n \/\/ https:\/\/firebase.google.com\/docs\/web\/setup#available-libraries\n\n \/\/ Your web app's Firebase configuration\n const firebaseConfig = {\n apiKey: \"AIzaSyCq9iMFtYGZ7d1-1m6GjMUQ_DQGBcub-RI\",\n authDomain: \"barisamaj-fb478.firebaseapp.com\",\n projectId: \"barisamaj-fb478\",\n storageBucket: \"barisamaj-fb478.firebasestorage.app\",\n messagingSenderId: \"939136200649\",\n appId: \"1:939136200649:web:fd62496139b8d6af4b8218\"\n };\n };\n \/\/ Initialize Firebase\n firebase.initializeApp(firebaseConfig);\n const database = firebase.database();\n \/\/ ========================================================\n\n let membersData = [];\n\n \/\/ Realtime Data Fetching from Database\n database.ref('samaj_members').on('value', (snapshot) => {\n const data = snapshot.val();\n membersData = [];\n for (let id in data) { membersData.push(data[id]); }\n renderDirectory();\n renderMatrimonial();\n });\n\n \/\/ Tab Switching Logic\n function switchTab(tabId) {\n document.querySelectorAll('.view-section').forEach(sec => sec.classList.remove('active'));\n document.getElementById(tabId).classList.add('active');\n window.scrollTo({ top: 0, behavior: 'smooth' });\n }\n\n document.getElementById('mobileMenuBtn').addEventListener('click', () => {\n document.getElementById('mobileMenu').classList.toggle('hidden');\n });\n\n \/\/ Image Compressor (To save DB space)\n function compressImage(file) {\n return new Promise((resolve) => {\n if(!file) { resolve(null); return; }\n const reader = new FileReader();\n reader.readAsDataURL(file);\n reader.onload = (event) => {\n const img = new Image();\n img.src = event.target.result;\n img.onload = () => {\n const canvas = document.createElement('canvas');\n const MAX_WIDTH = 400; \/\/ Small size for fast loading\n const scaleSize = MAX_WIDTH \/ img.width;\n canvas.width = MAX_WIDTH;\n canvas.height = img.height * scaleSize;\n const ctx = canvas.getContext('2d');\n ctx.drawImage(img, 0, 0, canvas.width, canvas.height);\n resolve(canvas.toDataURL('image\/jpeg', 0.6)); \/\/ Compress to 60% quality\n }\n }\n });\n }\n\n \/\/ Form Submit: General\n async function handleGeneralSubmit(e) {\n e.preventDefault();\n document.getElementById('g_btn').innerHTML = \"Saving to Server...\";\n \n const file = document.getElementById('g_photo').files[0];\n const compressedPhoto = await compressImage(file);\n\n const data = {\n type: 'general',\n photo: compressedPhoto,\n name: document.getElementById('g_name').value,\n fname: document.getElementById('g_fname').value,\n gotra: document.getElementById('g_gotra').value,\n city: document.getElementById('g_city').value,\n phone: document.getElementById('g_phone').value,\n timestamp: Date.now()\n };\n\n database.ref('samaj_members').push(data).then(() => {\n document.getElementById('generalForm').classList.add('hidden');\n document.getElementById('g_success').classList.remove('hidden');\n setTimeout(() => { document.getElementById('generalForm').reset(); document.getElementById('g_btn').innerHTML = \"Save Data\"; document.getElementById('generalForm').classList.remove('hidden'); document.getElementById('g_success').classList.add('hidden'); }, 3000);\n });\n }\n\n \/\/ Form Submit: Matrimony\n async function handleMatrimonySubmit(e) {\n e.preventDefault();\n document.getElementById('m_btn').innerHTML = \"Uploading Profile...\";\n \n const file = document.getElementById('m_photo').files[0];\n const compressedPhoto = await compressImage(file);\n\n const data = {\n type: 'matrimony',\n photo: compressedPhoto,\n name: document.getElementById('m_name').value,\n gender: document.getElementById('m_gender').value,\n dob: document.getElementById('m_dob').value,\n gotra: document.getElementById('m_gotra').value,\n city: document.getElementById('m_city').value,\n edu: document.getElementById('m_edu').value,\n job: document.getElementById('m_job').value,\n phone: document.getElementById('m_phone').value,\n timestamp: Date.now()\n };\n\n database.ref('samaj_members').push(data).then(() => {\n document.getElementById('matrimonyForm').classList.add('hidden');\n document.getElementById('m_success').classList.remove('hidden');\n setTimeout(() => { document.getElementById('matrimonyForm').reset(); document.getElementById('m_btn').innerHTML = \"Create Matrimony Profile\"; document.getElementById('matrimonyForm').classList.remove('hidden'); document.getElementById('m_success').classList.add('hidden'); }, 3000);\n });\n }\n\n \/\/ Render Cards\n function renderDirectory() {\n const container = document.getElementById('directoryContainer');\n if(membersData.length === 0) { container.innerHTML = `<p class=\"col-span-full text-center\">No records found.<\/p>`; return; }\n \n \/\/ Sort by newest first\n let sortedData = membersData.sort((a,b) => b.timestamp - a.timestamp);\n \n container.innerHTML = sortedData.map(m => `\n <div class=\"bg-white rounded-xl shadow border-l-4 ${m.type==='matrimony'?'border-pink-500':'border-primary'} p-5 flex items-center space-x-4\">\n ${m.photo ? `<img decoding=\"async\" src=\"${m.photo}\" class=\"w-16 h-16 rounded-full object-cover\">` : `<div class=\"w-16 h-16 rounded-full bg-gray-200 flex items-center justify-center\"><i class=\"fas fa-user\"><\/i><\/div>`}\n <div>\n <h3 class=\"font-bold text-lg text-gray-800\">${m.name}<\/h3>\n <p class=\"text-sm text-gray-600\"><i class=\"fas fa-om text-orange-400 w-4\"><\/i> ${m.gotra}<\/p>\n <p class=\"text-sm text-gray-600\"><i class=\"fas fa-map-marker-alt text-blue-400 w-4\"><\/i> ${m.city}<\/p>\n <p class=\"text-sm text-green-600 font-bold\"><i class=\"fas fa-phone\"><\/i> ${m.phone}<\/p>\n <\/div>\n <\/div>`).join('');\n }\n\n function renderMatrimonial() {\n const container = document.getElementById('matrimonialContainer');\n let data = membersData.filter(m => m.type === 'matrimony').sort((a,b) => b.timestamp - a.timestamp);\n if(data.length === 0) { container.innerHTML = `<p class=\"col-span-full text-center\">No profiles yet.<\/p>`; return; }\n \n container.innerHTML = data.map(m => `\n <div class=\"bg-white rounded-xl shadow-lg overflow-hidden border\">\n ${m.photo ? `<img decoding=\"async\" src=\"${m.photo}\" class=\"w-full h-48 object-cover object-top\">` : `<div class=\"w-full h-48 bg-gray-200\"><\/div>`}\n <div class=\"p-4\">\n <h3 class=\"font-bold text-xl\">${m.name}<\/h3>\n <p class=\"text-xs text-pink-600 font-bold mb-2\">${m.gender} \u2022 ${new Date().getFullYear() - parseInt(m.dob.substring(0,4))} Yrs<\/p>\n <div class=\"text-sm space-y-1 text-gray-700\">\n <p><strong>Gotra:<\/strong> ${m.gotra}<\/p>\n <p><strong>Edu:<\/strong> ${m.edu}<\/p>\n <p><strong>Job:<\/strong> ${m.job}<\/p>\n <p><strong>City:<\/strong> ${m.city}<\/p>\n <\/div>\n <\/div>\n <button onclick=\"alert('Phone Number: ${m.phone}')\" class=\"w-full bg-pink-50 text-pink-600 p-2 font-bold border-t\"><i class=\"fas fa-phone\"><\/i> Contact<\/button>\n <\/div>`).join('');\n }\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Bari Samaj – Community Portal BariSamaj.in Home Member Reg. Matrimony Reg. Directory Find Matches Home Member Reg. Matrimony Reg. Directory Find Matches Official Database of Bari Samaj Uniting our community globally. Join Directory Register Matrimony General Registration Profile Photo Full Name * Father’s Name * Gotra * City & State * Mobile Number * Save […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"footnotes":""},"class_list":["post-358","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/barisamaj.in\/index.php?rest_route=\/wp\/v2\/pages\/358","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/barisamaj.in\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/barisamaj.in\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/barisamaj.in\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/barisamaj.in\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=358"}],"version-history":[{"count":4,"href":"https:\/\/barisamaj.in\/index.php?rest_route=\/wp\/v2\/pages\/358\/revisions"}],"predecessor-version":[{"id":488,"href":"https:\/\/barisamaj.in\/index.php?rest_route=\/wp\/v2\/pages\/358\/revisions\/488"}],"wp:attachment":[{"href":"https:\/\/barisamaj.in\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=358"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}