রেলী – কো-অপারেটিভ সোসাইটি অ্যাপ
<!-- Header / Navbar --> <header class="bg-emerald-800 text-white shadow-lg sticky top-0 z-50"> <div class="max-w-7xl mx-auto px-4 py-3 flex justify-between items-center"> <div class="flex items-center space-x-3 space-x-reverse"> <div class="w-10 h-10 bg-amber-500 text-slate-900 rounded-lg flex items-center justify-center font-bold text-xl shadow"> <i class="fa-solid fa-r"></i> </div> <div> <h1 class="text-lg font-bold leading-none">রেলী অ্যাপ</h1> <p class="text-xs text-amber-300">কো-অপারেটিভ সোসাইটি লিঃ, ময়মনসিংহ</p> </div> </div> <div class="text-right text-xs text-emerald-100 hidden sm:block"> <p><i class="fa-solid fa-phone text-amber-400"></i> ০১৭১৯-৭৪৭৩৩০</p> </div> </div> </header> <!-- Main Layout --> <div class="max-w-7xl mx-auto px-4 py-4 grid grid-cols-1 md:grid-cols-4 gap-4"> <!-- Sidebar Navigation --> <aside class="md:col-span-1 bg-white p-3 rounded-xl shadow-md space-y-2 h-fit"> <h2 class="text-xs font-bold text-slate-400 uppercase tracking-wider mb-2 px-2">রেলী মেনু</h2> <button onclick="showSection('dashboard')" id="btn-dashboard" class="nav-btn w-full text-right px-4 py-2.5 rounded-lg font-semibold flex items-center justify-between bg-emerald-50 text-emerald-800 border-r-4 border-emerald-700"> <span><i class="fa-solid fa-chart-line ml-2"></i>ড্যাশবোর্ড</span> </button> <button onclick="showSection('committee')" id="btn-committee" class="nav-btn w-full text-right px-4 py-2.5 rounded-lg font-semibold flex items-center justify-between text-slate-700 hover:bg-slate-50"> <span><i class="fa-solid fa-users-gear ml-2"></i>পরিচালনা কমিটি</span> </button> <button onclick="showSection('members')" id="btn-members" class="nav-btn w-full text-right px-4 py-2.5 rounded-lg font-semibold flex items-center justify-between text-slate-700 hover:bg-slate-50"> <span><i class="fa-solid fa-user-group ml-2"></i>সদস্যবৃন্দ</span> </button> <button onclick="showSection('savings')" id="btn-savings" class="nav-btn w-full text-right px-4 py-2.5 rounded-lg font-semibold flex items-center justify-between text-slate-700 hover:bg-slate-50"> <span><i class="fa-solid fa-piggy-bank ml-2"></i>সঞ্চয় কালেক션</span> </button> <button onclick="showSection('loans')" id="btn-loans" class="nav-btn w-full text-right px-4 py-2.5 rounded-lg font-semibold flex items-center justify-between text-slate-700 hover:bg-slate-50"> <span><i class="fa-solid fa-hand-holding-dollar ml-2"></i>ঋণ ও কিস্তি আদায়</span> </button> </aside> <!-- Main Content --> <main class="md:col-span-3 space-y-4"> <!-- DASHBOARD --> <section id="dashboard" class="space-y-4"> <div class="grid grid-cols-1 sm:grid-cols-3 gap-3"> <div class="bg-white p-4 rounded-xl shadow-md border-r-4 border-emerald-600"> <p class="text-xs font-semibold text-slate-500">মোট সদস্য</p> <h3 class="text-xl font-bold text-slate-800 mt-1">১২ জন</h3> </div> <div class="bg-white p-4 rounded-xl shadow-md border-r-4 border-amber-500"> <p class="text-xs font-semibold text-slate-500">মোট সঞ্চয় জমা</p> <h3 class="text-xl font-bold text-slate-800 mt-1">৳ ৪,৫০,০০০</h3> </div> <div class="bg-white p-4 rounded-xl shadow-md border-r-4 border-teal-600"> <p class="text-xs font-semibold text-slate-500">বিতরণকৃত ঋণ</p> <h3 class="text-xl font-bold text-slate-800 mt-1">৳ ২,৮০,০০০</h3> </div> </div> <div class="bg-white p-5 rounded-xl shadow-md"> <h3 class="text-base font-bold text-emerald-800 mb-2 border-b pb-2"><i class="fa-solid fa-bullhorn text-amber-500 ml-2"></i>রেলী নোটিশ বোর্ড</h3> <p class="text-xs sm:text-sm text-slate-600 leading-relaxed"> রেলী কো-অপারেটিভ সোসাইটি লিঃ-এর সকল সদস্য ও কর্মকর্তাদের নিয়মিত সঞ্চয় ও কিস্তি কালেকশন আপডেট রাখার জন্য অনুরোধ করা যাচ্ছে। </p> </div> </section> <!-- COMMITTEE SECTION --> <section id="committee" class="hidden space-y-4"> <div class="bg-white p-5 rounded-xl shadow-md"> <div class="flex justify-between items-center mb-4"> <h3 class="text-base font-bold text-emerald-800"><i class="fa-solid fa-user-tie ml-2"></i>পরিচালনা কমিটি</h3> </div> <div class="overflow-x-auto"> <table class="w-full text-right border-collapse text-xs sm:text-sm"> <thead> <tr class="bg-emerald-50 text-emerald-900 border-b"> <th class="p-2.5">পদবি</th> <th class="p-2.5">নাম</th> <th class="p-2.5">মোবাইল নম্বর</th> </tr> </thead> <tbody class="divide-y divide-slate-100"> <tr> <td class="p-2.5 font-semibold text-emerald-800">সভাপতি</td> <td class="p-2.5 font-bold">মোঃ রফিকুল ইসলাম</td> <td class="p-2.5">০১৭১৯-৭৪৭৩৩০</td> </tr> <tr> <td class="p-2.5 font-semibold text-emerald-800">সহ-সভাপতি</td> <td class="p-2.5 font-bold">আলহাজ্ব মোঃ আমজাদ হোসেন</td> <td class="p-2.5">০১৯৭১-৬২৮২৩২</td> </tr> <tr> <td class="p-2.5 font-semibold text-emerald-800">সাধারণ সম্পাদক</td> <td class="p-2.5 font-bold">মোঃ লিটন মিঞা</td> <td class="p-2.5">০১৯৭১-৬২৮২৩২</td> </tr> <tr> <td class="p-2.5 font-semibold text-emerald-800">কোষাধ্যক্ষ</td> <td class="p-2.5 font-bold">মোঃ মাহমুদুল হাসান</td> <td class="p-2.5">০১৭০০-০০০০০২</td> </tr> </tbody> </table> </div> </div> </section> <!-- MEMBERS SECTION --> <section id="members" class="hidden space-y-4"> <div class="bg-white p-5 rounded-xl shadow-md"> <h3 class="text-base font-bold text-emerald-800 mb-4"><i class="fa-solid fa-users ml-2"></i>সদস্য তালিকা</h3> <div class="overflow-x-auto"> <table class="w-full text-right border-collapse text-xs sm:text-sm"> <thead> <tr class="bg-slate-100 text-slate-700 border-b"> <th class="p-2.5">আইডি</th> <th class="p-2.5">নাম</th> <th class="p-2.5">মোবাইল</th> </tr> </thead> <tbody class="divide-y divide-slate-100"> <tr> <td class="p-2.5 font-mono font-bold text-emerald-700">#RL-101</td> <td class="p-2.5 font-semibold">মোঃ আল-আমিন</td> <td class="p-2.5">০১৮১২-০০০১১১</td> </tr> <tr> <td class="p-2.5 font-mono font-bold text-emerald-700">#RL-102</td> <td class="p-2.5 font-semibold">মোছাঃ ফাতেমা বেগম</td> <td class="p-2.5">০১৮১২-০০০২২২</td> </tr> </tbody> </table> </div> </div> </section> <!-- SAVINGS COLLECTION --> <section id="savings" class="hidden space-y-4"> <div class="bg-white p-5 rounded-xl shadow-md"> <h3 class="text-base font-bold text-emerald-800 mb-4"><i class="fa-solid fa-piggy-bank ml-2"></i>সঞ্চয় কালেকশন এন্ট্রি</h3> <form onsubmit="handleCollection(event, 'সঞ্চয় জমা')" class="space-y-3"> <div> <label class="block text-xs font-semibold mb-1">সদস্য নির্বাচন</label> <select id="sav_member" class="w-full p-2 border rounded-lg text-xs sm:text-sm outline-none"> <option value="#RL-101 - মোঃ আল-আমিন">#RL-101 - মোঃ আল-আমিন</option> <option value="#RL-102 - মোছাঃ ফাতেমা বেগম">#RL-102 - মোছাঃ ফাতেমা বেগম</option> </select> </div> <div> <label class="block text-xs font-semibold mb-1">জমার পরিমাণ (টাকা)</label> <input type="number" id="sav_amount" placeholder="৫০০" class="w-full p-2 border rounded-lg text-xs sm:text-sm outline-none" required> </div> <button type="submit" class="w-full bg-emerald-700 hover:bg-emerald-800 text-white font-bold py-2.5 rounded-lg shadow text-xs sm:text-sm"> সঞ্চয় জমা দিন ও রশিদ তৈরি করুন </button> </form> </div> </section> <!-- LOANS SECTION --> <section id="loans" class="hidden space-y-4"> <div class="bg-white p-5 rounded-xl shadow-md border-t-4 border-amber-500"> <h3 class="text-base font-bold text-emerald-800 mb-3"><i class="fa-solid fa-calculator ml-2"></i>কিস্তি ক্যালকুলেটর</h3> <div class="grid grid-cols-3 gap-2 mb-3"> <div> <label class="block text-[10px] font-semibold mb-1">টাকা</label> <input type="number" id="calc_amount" placeholder="৫০০০০" class="w-full p-1.5 border rounded text-xs" oninput="calculateLoan()"> </div> <div> <label class="block text-[10px] font-semibold mb-1">মুনাফা %</label> <input type="number" id="calc_rate" value="10" class="w-full p-1.5 border rounded text-xs" oninput="calculateLoan()"> </div> <div> <label class="block text-[10px] font-semibold mb-1">মাস</label> <input type="number" id="calc_months" value="12" class="w-full p-1.5 border rounded text-xs" oninput="calculateLoan()"> </div> </div> <div id="calc_result" class="bg-emerald-50 p-3 rounded text-xs grid grid-cols-3 gap-1 font-semibold text-emerald-900 hidden"> <div>মাসিক কিস্তি: <span id="res_emi" class="text-amber-600">৳ ০</span></div> <div>মোট লাভ: <span id="res_interest">৳ ০</span></div> <div>সর্বমোট: <span id="res_total">৳ ০</span></div> </div> </div> <div class="bg-white p-5 rounded-xl shadow-md"> <h3 class="text-base font-bold text-emerald-800 mb-4"><i class="fa-solid fa-hand-holding-dollar ml-2"></i>ঋণের কিস্তি আদায়</h3> <form onsubmit="handleCollection(event, 'ঋণের কিস্তি আদায়')" class="space-y-3"> <div> <label class="block text-xs font-semibold mb-1">ঋণগ্রহীতা</label> <select id="loan_member" class="w-full p-2 border rounded-lg text-xs sm:text-sm outline-none"> <option value="#RL-101 - মোঃ আল-আমিন">#RL-101 - মোঃ আল-আমিন</option> <option value="#RL-102 - মোছাঃ ফাতেমা বেগম">#RL-102 - মোছাঃ ফাতেমা বেগম</option> </select> </div> <div> <label class="block text-xs font-semibold mb-1">আদায়কৃত কিস্তি (টাকা)</label> <input type="number" id="loan_amount" placeholder="২৫০০" class="w-full p-2 border rounded-lg text-xs sm:text-sm outline-none" required> </div> <button type="submit" class="w-full bg-amber-500 hover:bg-amber-600 text-slate-950 font-bold py-2.5 rounded-lg shadow text-xs sm:text-sm"> কিস্তি জমা নিন ও প্রিন্ট রসিদ </button> </form> </div> </section> </main> </div> <!-- Receipt Modal --> <div id="receiptModal" class="fixed inset-0 bg-slate-900/60 hidden items-center justify-center z-50 p-4"> <div class="bg-white rounded-xl shadow-xl max-w-sm w-full p-5 space-y-3" id="printable-receipt"> <div class="text-center border-b pb-2"> <h2 class="text-base font-bold text-emerald-800">রেলী কো-অপারেটিভ সোসাইটি লিঃ</h2> <p class="text-[10px] text-slate-500">পুরাতন ত্রিশাল বাসস্ট্যান্ড, ময়মনসিংহ</p> <p class="text-xs text-amber-600 font-semibold mt-1">রেলী মানি রিসিট / রশিদ</p> </div> <div class="text-xs space-y-1.5 text-slate-700"> <div class="flex justify-between"><span>তারিখ:</span> <span id="rec_date" class="font-semibold"></span></div> <div class="flex justify-between"><span>বিবরণ:</span> <span id="rec_type" class="font-bold text-emerald-700"></span></div> <div class="flex justify-between"><span>সদস্য:</span> <span id="rec_member" class="font-semibold"></span></div> <div class="flex justify-between text-sm border-t pt-1 font-bold"><span>পরিমাণ:</span> <span id="rec_amount" class="text-amber-600"></span></div> </div> <div class="flex justify-between pt-4 text-[10px] text-slate-400 border-t"> <span>আদায়কারী</span> <span>কর্তৃপক্ষ</span> </div> <div class="flex justify-end space-x-2 space-x-reverse pt-2 print:hidden"> <button onclick="toggleModal('receiptModal')" class="px-3 py-1 bg-slate-200 rounded text-xs font-semibold">বন্ধ</button> <button onclick="window.print()" class="px-3 py-1 bg-emerald-700 text-white rounded text-xs font-semibold"><i class="fa-solid fa-print ml-1"></i>প্রিন্ট</button> </div> </div> </div> <script> function showSection(sectionId) { ['dashboard', 'committee', 'members', 'savings', 'loans'].forEach(id => { document.getElementById(id).classList.add('hidden'); document.getElementById('btn-' + id).className = "nav-btn w-full text-right px-4 py-2.5 rounded-lg font-semibold flex items-center justify-between text-slate-700 hover:bg-slate-50"; }); document.getElementById(sectionId).classList.remove('hidden'); document.getElementById('btn-' + sectionId).className = "nav-btn w-full text-right px-4 py-2.5 rounded-lg font-semibold flex items-center justify-between bg-emerald-50 text-emerald-800 border-r-4 border-emerald-700"; } function toggleModal(modalId) { const modal = document.getElementById(modalId); modal.classList.toggle('hidden'); modal.classList.toggle('flex'); } function calculateLoan() { const P = parseFloat(document.getElementById('calc_amount').value) || 0; const R = parseFloat(document.getElementById('calc_rate').value) || 0; const N = parseFloat(document.getElementById('calc_months').value) || 0; if (P > 0 && N > 0) { const totalInterest = (P * R * (N / 12)) / 100; const totalAmount = P + totalInterest; const emi = totalAmount / N; document.getElementById('res_emi').innerText = '৳ ' + Math.round(emi); document.getElementById('res_interest').innerText = '৳ ' + Math.round(totalInterest); document.getElementById('res_total').innerText = '৳ ' + Math.round(totalAmount); document.getElementById('calc_result').classList.remove('hidden'); } } function handleCollection(e, type) { e.preventDefault(); const memberId = type === 'সঞ্চয় জমা' ? 'sav_member' : 'loan_member'; const amountId = type === 'সঞ্চয় জমা' ? 'sav_amount' : 'loan_amount'; const member = document.getElementById(memberId).value; const amount = document.getElementById(amountId).value; document.getElementById('rec_date').innerText = new Date().toLocaleDateString('bn-BD'); document.getElementById('rec_type').innerText = type; document.getElementById('rec_member').innerText = member; document.getElementById('rec_amount').innerText = '৳ ' + amount; toggleModal('receiptModal'); e.target.reset(); } </script>
…or
The XYZ Doohickey Companysomething like this: was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.