Nexus Manager
Local Host Mode
.well-known
..
eiin-finder
Editing index.php
index.php
Cancel
Save Changes
<?php require_once 'config/core.php'; ?> <!DOCTYPE html> <html lang="bn" class="light scroll-smooth"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>নাম দিয়ে ইআইআইএন খুঁজুন | EIIN Directory</title> <!-- Google Fonts: Hind Siliguri --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <!-- Tailwind CSS (CDN for Demo/Dev) --> <script src="https://cdn.tailwindcss.com"></script> <!-- Lucide Icons --> <script src="https://unpkg.com/lucide@latest"></script> <!-- Tailwind Config for Rose Theme --> <script> tailwind.config = { darkMode: 'class', theme: { extend: { fontFamily: { sans: ['"Hind Siliguri"', 'sans-serif'], }, colors: { brand: { 50: '#fff1f2', 100: '#ffe4e6', 200: '#fecdd3', 300: '#fda4af', 400: '#fb7185', 500: '#f43f5e', /* Vibrant Rose */ 600: '#e11d48', 700: '#be123c', 800: '#9f1239', 900: '#881337', 950: '#4c0519', } }, animation: { 'fade-in': 'fadeIn 0.5s ease-out', 'slide-up': 'slideUp 0.6s ease-out forwards', 'toast': 'toastSlide 3s ease-in-out forwards', }, keyframes: { fadeIn: { '0%': { opacity: '0' }, '100%': { opacity: '1' }, }, slideUp: { '0%': { opacity: '0', transform: 'translateY(20px)' }, '100%': { opacity: '1', transform: 'translateY(0)' }, }, toastSlide: { '0%': { transform: 'translateY(100px)', opacity: '0' }, '10%': { transform: 'translateY(0)', opacity: '1' }, '90%': { transform: 'translateY(0)', opacity: '1' }, '100%': { transform: 'translateY(100px)', opacity: '0' }, } } } } } </script> <style> body { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } html.transition-theme, html.transition-theme *, html.transition-theme *:before, html.transition-theme *:after { transition: all 0.3s ease-in-out !important; transition-delay: 0 !important; } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #fda4af; border-radius: 10px; } .dark ::-webkit-scrollbar-thumb { background: #374151; } .corner-cutout-badge { position: absolute; top: 0; right: 0; border-bottom-left-radius: 1rem; padding: 0.35rem 1rem; font-size: 0.75rem; font-weight: 700; display: flex; align-items: center; gap: 0.25rem; box-shadow: -2px 2px 10px rgba(0,0,0,0.05); z-index: 20; } #mainContent { display: none; opacity: 0; transition: opacity 0.5s ease; } </style> </head> <body class="bg-brand-50/40 dark:bg-gray-950 text-gray-800 dark:text-gray-100 min-h-screen flex flex-col font-sans transition-colors duration-300"> <!-- Config Variables to JS --> <script> const BASE_URL = "<?= BASE_URL ?? '' ?>"; </script> <!-- Initial Page Skeleton Loader --> <div id="pageLoader" class="fixed inset-0 z-50 bg-white dark:bg-gray-950 flex flex-col items-center justify-center p-6 transition-opacity duration-500"> <div class="animate-pulse flex flex-col items-center w-full max-w-4xl"> <div class="w-full h-16 bg-brand-100/50 dark:bg-gray-900 rounded-2xl mb-12"></div> <div class="w-20 h-20 bg-brand-200/50 dark:bg-gray-800 rounded-full mb-6"></div> <div class="h-8 bg-brand-100/50 dark:bg-gray-900 rounded-lg w-3/4 sm:w-1/2 mb-4"></div> <div class="w-full max-w-xl h-14 bg-brand-200/50 dark:bg-gray-800 rounded-full mb-12"></div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full"> <div class="h-48 bg-brand-50 dark:bg-gray-900 rounded-2xl"></div> <div class="h-48 bg-brand-50 dark:bg-gray-900 rounded-2xl hidden md:block"></div> <div class="h-48 bg-brand-50 dark:bg-gray-900 rounded-2xl hidden lg:block"></div> </div> </div> </div> <!-- Main Wrapper --> <div id="mainContent" class="flex-grow flex flex-col relative overflow-x-hidden"> <!-- Ambient Background glow --> <div class="absolute top-[-10%] right-[-10%] w-[500px] h-[500px] bg-brand-300/20 dark:bg-brand-600/10 rounded-full blur-[120px] pointer-events-none -z-10"></div> <div class="absolute top-[30%] left-[-10%] w-[300px] h-[300px] bg-pink-300/20 dark:bg-pink-700/10 rounded-full blur-[100px] pointer-events-none -z-10"></div> <!-- Navigation Bar --> <nav class="sticky top-0 z-40 w-full backdrop-blur-xl bg-white/70 dark:bg-gray-950/80 border-b border-brand-100/80 dark:border-gray-800 transition-colors duration-300"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex justify-between h-16 items-center"> <!-- Logo --> <div class="flex-shrink-0 flex items-center gap-2.5 cursor-pointer" onclick="window.scrollTo(0,0)"> <div class="bg-gradient-to-br from-brand-400 to-brand-600 text-white p-2 rounded-xl shadow-md shadow-brand-500/20"> <i data-lucide="library" class="w-5 h-5"></i> </div> <span class="font-bold text-xl tracking-tight text-gray-900 dark:text-white">ইডিইউ<span class="text-brand-500">ইনফো</span></span> </div> <!-- Desktop Links --> <div class="hidden md:flex space-x-8 items-center"> <a href="#home" class="text-gray-600 hover:text-brand-600 dark:text-gray-300 dark:hover:text-brand-400 font-medium transition-colors">অনুসন্ধান</a> <a href="#features" class="text-gray-600 hover:text-brand-600 dark:text-gray-300 dark:hover:text-brand-400 font-medium transition-colors">বৈশিষ্ট্য</a> <a href="#how-it-works" class="text-gray-600 hover:text-brand-600 dark:text-gray-300 dark:hover:text-brand-400 font-medium transition-colors">কীভাবে কাজ করে</a> </div> <!-- Theme Toggle --> <div class="flex items-center"> <button id="themeToggle" class="p-2.5 rounded-full bg-brand-50 dark:bg-gray-900 border border-brand-200 dark:border-gray-800 text-brand-600 dark:text-brand-400 hover:bg-brand-100 dark:hover:bg-gray-800 shadow-sm transition-all focus:outline-none"> <i data-lucide="moon" id="moonIcon" class="w-4 h-4 hidden dark:block"></i> <i data-lucide="sun" id="sunIcon" class="w-4 h-4 block dark:hidden"></i> </button> </div> </div> </div> </nav> <main class="flex-grow"> <!-- Hero & Search Section --> <section id="home" class="pt-10 pb-12 px-4 sm:px-6 flex flex-col items-center"> <div class="text-center w-full max-w-3xl mb-8 opacity-0 animate-slide-up" style="animation-delay: 0.1s;"> <h1 class="text-3xl sm:text-4xl md:text-5xl font-extrabold text-gray-900 dark:text-white mb-4 tracking-tight"> <span class="text-transparent bg-clip-text bg-gradient-to-r from-brand-500 to-pink-500">নাম দিয়ে</span> শিক্ষাপ্রতিষ্ঠান খুঁজুন </h1> <p class="text-gray-600 dark:text-gray-400 text-sm sm:text-base max-w-lg mx-auto leading-relaxed"> স্কুল, কলেজ বা মাদ্রাসার নাম লিখে অনুসন্ধান করুন এবং সহজেই প্রতিষ্ঠানের ইআইআইএন (EIIN) নম্বরটি কপি করে নিন। </p> </div> <!-- Search Box --> <div class="w-full max-w-3xl relative group z-10 opacity-0 animate-slide-up" style="animation-delay: 0.2s;"> <div class="absolute inset-y-0 left-0 pl-6 flex items-center pointer-events-none"> <i data-lucide="search" class="w-5 h-5 text-gray-400 group-focus-within:text-brand-500 transition-colors"></i> </div> <input type="text" id="nameInput" placeholder="প্রতিষ্ঠানের নাম লিখুন (যেমন: ঢাকা মডেল)" class="block w-full pl-14 pr-[130px] py-4 bg-white dark:bg-gray-900 border-2 border-brand-100 dark:border-gray-800 focus:border-brand-400 dark:focus:border-brand-500 rounded-full shadow-lg shadow-brand-100/30 dark:shadow-none outline-none text-base sm:text-lg text-gray-900 dark:text-white placeholder-gray-400 transition-all"> <div class="absolute inset-y-0 right-2 flex items-center"> <button id="searchBtn" class="bg-gradient-to-r from-brand-500 to-brand-600 hover:from-brand-600 hover:to-brand-700 text-white px-5 sm:px-8 py-2 sm:py-2.5 rounded-full font-semibold shadow-md shadow-brand-500/30 transition-all active:scale-95 flex items-center gap-2"> <span>খুঁজুন</span> </button> </div> </div> <!-- Error/Message Box --> <div id="messageBox" class="hidden w-full max-w-3xl mt-6 p-4 rounded-2xl flex items-start gap-3 border transition-all animate-fade-in bg-white dark:bg-gray-900 mx-auto shadow-sm"> <i data-lucide="info" id="messageIcon" class="w-5 h-5 mt-0.5 flex-shrink-0"></i> <p id="messageText" class="text-sm sm:text-base font-medium"></p> </div> </section> <!-- Results Section --> <section class="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-16"> <!-- Skeleton Grid Loader --> <div id="skeletonLoader" class="hidden grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-full animate-pulse mt-4"> <div class="bg-white dark:bg-gray-900 rounded-2xl p-6 border border-brand-50 dark:border-gray-800"><div class="h-5 bg-brand-100/50 dark:bg-gray-800 rounded w-3/4 mb-4"></div><div class="h-10 bg-brand-50 dark:bg-gray-800 rounded-lg w-full mb-4"></div></div> <div class="bg-white dark:bg-gray-900 rounded-2xl p-6 border border-brand-50 dark:border-gray-800 hidden sm:block"><div class="h-5 bg-brand-100/50 dark:bg-gray-800 rounded w-2/3 mb-4"></div><div class="h-10 bg-brand-50 dark:bg-gray-800 rounded-lg w-full mb-4"></div></div> <div class="bg-white dark:bg-gray-900 rounded-2xl p-6 border border-brand-50 dark:border-gray-800 hidden lg:block"><div class="h-5 bg-brand-100/50 dark:bg-gray-800 rounded w-full mb-4"></div><div class="h-10 bg-brand-50 dark:bg-gray-800 rounded-lg w-full mb-4"></div></div> </div> <div id="resultCount" class="hidden text-sm font-semibold text-gray-500 dark:text-gray-400 mb-4 px-2"></div> <!-- Results Grid --> <div id="resultsGrid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"></div> </section> <!-- Features Section --> <section id="features" class="py-16 bg-gradient-to-b from-brand-50/50 to-white dark:from-gray-900 dark:to-gray-950 border-t border-brand-100 dark:border-gray-800"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-12"> <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">কেন এই সাইটটি সেরা?</h2> <div class="w-16 h-1 bg-brand-500 mx-auto rounded-full mb-4"></div> <p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">নাম দিয়ে খোঁজার জন্য এটি সবচেয়ে দ্রুত এবং নির্ভরযোগ্য প্ল্যাটফর্ম।</p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="bg-white dark:bg-gray-900 p-8 rounded-3xl border border-brand-100 dark:border-gray-800 shadow-sm hover:-translate-y-1 hover:shadow-lg hover:shadow-brand-100/50 dark:hover:shadow-none transition-all duration-300"> <div class="w-14 h-14 bg-brand-50 dark:bg-gray-800 text-brand-500 rounded-2xl flex items-center justify-center mb-6 border border-brand-100 dark:border-gray-700"> <i data-lucide="copy" class="w-7 h-7"></i> </div> <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">১-ক্লিক কপি</h3> <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">প্রতিষ্ঠানের কার্ড থেকে শুধু একটি ক্লিকেই EIIN নম্বরটি কপি করে নিতে পারবেন কোনো ঝামেলা ছাড়াই।</p> </div> <div class="bg-white dark:bg-gray-900 p-8 rounded-3xl border border-brand-100 dark:border-gray-800 shadow-sm hover:-translate-y-1 hover:shadow-lg hover:shadow-brand-100/50 dark:hover:shadow-none transition-all duration-300"> <div class="w-14 h-14 bg-brand-50 dark:bg-gray-800 text-brand-500 rounded-2xl flex items-center justify-center mb-6 border border-brand-100 dark:border-gray-700"> <i data-lucide="layout-grid" class="w-7 h-7"></i> </div> <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">স্মার্ট গ্রিড লেআউট</h3> <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">একাধিক ফলাফল একসাথে দেখতে সুন্দর এবং আধুনিক কার্ড লেআউট ডিজাইন করা হয়েছে।</p> </div> <div class="bg-white dark:bg-gray-900 p-8 rounded-3xl border border-brand-100 dark:border-gray-800 shadow-sm hover:-translate-y-1 hover:shadow-lg hover:shadow-brand-100/50 dark:hover:shadow-none transition-all duration-300"> <div class="w-14 h-14 bg-brand-50 dark:bg-gray-800 text-brand-500 rounded-2xl flex items-center justify-center mb-6 border border-brand-100 dark:border-gray-700"> <i data-lucide="shield" class="w-7 h-7"></i> </div> <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">সম্পূর্ণ সুরক্ষিত</h3> <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">আমাদের নিজস্ব ব্যাকএন্ড প্রক্সি ব্যবহার করায় এটি অত্যন্ত দ্রুত এবং ডেটা স্ক্র্যাপিং থেকে সুরক্ষিত।</p> </div> </div> </div> </section> <!-- How It Works Section --> <section id="how-it-works" class="py-16 bg-white dark:bg-gray-950 border-t border-brand-100 dark:border-gray-800 relative"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-14"> <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-4">কীভাবে খুঁজবেন?</h2> <div class="w-16 h-1 bg-brand-500 mx-auto rounded-full"></div> </div> <div class="flex flex-col md:flex-row items-center justify-center gap-8 relative"> <!-- Connecting Line for Desktop --> <div class="hidden md:block absolute top-1/2 left-[20%] right-[20%] h-0.5 bg-brand-100 dark:bg-gray-800 -z-10"></div> <div class="bg-brand-50 dark:bg-gray-900 p-8 rounded-3xl w-full max-w-sm text-center border border-brand-100 dark:border-gray-800 relative shadow-sm"> <div class="w-12 h-12 bg-brand-500 text-white rounded-full flex items-center justify-center font-bold text-xl absolute -top-6 left-1/2 -translate-x-1/2 border-4 border-white dark:border-gray-950">১</div> <i data-lucide="edit-3" class="w-10 h-10 mx-auto text-brand-400 mt-2 mb-4"></i> <h4 class="font-bold text-gray-900 dark:text-white mb-2 text-lg">নাম লিখুন</h4> <p class="text-sm text-gray-500 dark:text-gray-400">স্কুল বা কলেজের নামের অন্তত ৩টি অক্ষর লিখুন।</p> </div> <div class="bg-brand-50 dark:bg-gray-900 p-8 rounded-3xl w-full max-w-sm text-center border border-brand-100 dark:border-gray-800 relative shadow-sm"> <div class="w-12 h-12 bg-brand-500 text-white rounded-full flex items-center justify-center font-bold text-xl absolute -top-6 left-1/2 -translate-x-1/2 border-4 border-white dark:border-gray-950">২</div> <i data-lucide="search-check" class="w-10 h-10 mx-auto text-brand-400 mt-2 mb-4"></i> <h4 class="font-bold text-gray-900 dark:text-white mb-2 text-lg">সার্চ করুন</h4> <p class="text-sm text-gray-500 dark:text-gray-400">বাটনে ক্লিক করুন, তালিকা আপনার সামনে চলে আসবে।</p> </div> <div class="bg-brand-50 dark:bg-gray-900 p-8 rounded-3xl w-full max-w-sm text-center border border-brand-100 dark:border-gray-800 relative shadow-sm"> <div class="w-12 h-12 bg-brand-500 text-white rounded-full flex items-center justify-center font-bold text-xl absolute -top-6 left-1/2 -translate-x-1/2 border-4 border-white dark:border-gray-950">৩</div> <i data-lucide="copy" class="w-10 h-10 mx-auto text-brand-400 mt-2 mb-4"></i> <h4 class="font-bold text-gray-900 dark:text-white mb-2 text-lg">কপি করুন</h4> <p class="text-sm text-gray-500 dark:text-gray-400">আপনার কাঙ্ক্ষিত প্রতিষ্ঠানের EIIN নম্বরটি কপি বাটনে চাপ দিয়ে কপি করে নিন।</p> </div> </div> </div> </section> </main> <!-- Toast Notification (For Copying) --> <div id="toast" class="fixed bottom-6 left-1/2 -translate-x-1/2 bg-gray-900 dark:bg-white text-white dark:text-gray-900 px-6 py-3 rounded-full shadow-2xl flex items-center gap-3 z-50 pointer-events-none opacity-0 transition-opacity"> <i data-lucide="check-circle-2" class="w-5 h-5 text-brand-400 dark:text-brand-500"></i> <span class="font-semibold text-sm">EIIN নম্বর কপি করা হয়েছে!</span> </div> <!-- Extended Developer Footer --> <footer class="bg-brand-50/50 dark:bg-gray-950 pt-16 pb-8 border-t border-brand-100 dark:border-gray-900"> <div class="max-w-7xl mx-auto px-4 sm:px-6"> <div class="grid grid-cols-1 md:grid-cols-3 gap-10 mb-12"> <!-- Brand Area --> <div class="flex flex-col items-center md:items-start text-center md:text-left"> <div class="flex items-center gap-2 mb-4"> <div class="bg-brand-500 text-white p-2 rounded-lg shadow-sm"> <i data-lucide="library" class="w-6 h-6"></i> </div> <span class="font-bold text-2xl text-gray-900 dark:text-white">ইডিইউ<span class="text-brand-500">ইনফো</span></span> </div> <p class="text-gray-500 dark:text-gray-400 text-sm leading-relaxed max-w-xs"> বাংলাদেশের যেকোনো শিক্ষাপ্রতিষ্ঠানের নাম লিখে সহজেই ইআইআইএন (EIIN) খুঁজে বের করার সেরা মাধ্যম। </p> </div> <!-- Quick Links --> <div class="flex flex-col items-center md:items-start text-center md:text-left"> <h4 class="text-gray-900 dark:text-white font-bold text-lg mb-4">প্রয়োজনীয় লিংক</h4> <ul class="space-y-2 text-gray-500 dark:text-gray-400 text-sm"> <li><a href="#home" class="hover:text-brand-500 transition-colors">অনুসন্ধান করুন</a></li> <li><a href="#features" class="hover:text-brand-500 transition-colors">আমাদের বিশেষত্ব</a></li> <li><a href="#how-it-works" class="hover:text-brand-500 transition-colors">নির্দেশিকা</a></li> </ul> </div> <!-- Developer Info & Social Links --> <div class="flex flex-col items-center md:items-start text-center md:text-left"> <h4 class="text-gray-900 dark:text-white font-bold text-lg mb-4">কানেক্টেড থাকুন</h4> <p class="text-gray-500 dark:text-gray-400 text-sm mb-4"> Developed & Designed with ❤️ by <span class="font-bold text-gray-800 dark:text-gray-200">Kabir</span> </p> <!-- Social Icons --> <div class="flex items-center gap-3"> <a href="https://facebook.com/" target="_blank" class="w-10 h-10 flex items-center justify-center bg-white dark:bg-gray-800 text-brand-600 dark:text-gray-300 rounded-full hover:bg-brand-500 hover:text-white dark:hover:bg-brand-500 transition-all border border-brand-100 dark:border-gray-700 shadow-sm"> <i data-lucide="facebook" class="w-5 h-5"></i> </a> <a href="https://instagram.com/" target="_blank" class="w-10 h-10 flex items-center justify-center bg-white dark:bg-gray-800 text-brand-600 dark:text-gray-300 rounded-full hover:bg-brand-500 hover:text-white dark:hover:bg-brand-500 transition-all border border-brand-100 dark:border-gray-700 shadow-sm"> <i data-lucide="instagram" class="w-5 h-5"></i> </a> <a href="https://github.com/" target="_blank" class="w-10 h-10 flex items-center justify-center bg-white dark:bg-gray-800 text-brand-600 dark:text-gray-300 rounded-full hover:bg-brand-500 hover:text-white dark:hover:bg-brand-500 transition-all border border-brand-100 dark:border-gray-700 shadow-sm"> <i data-lucide="github" class="w-5 h-5"></i> </a> <a href="https://kabir.pages.dev" target="_blank" title="Developer Portfolio" class="w-10 h-10 flex items-center justify-center bg-white dark:bg-gray-800 text-brand-600 dark:text-gray-300 rounded-full hover:bg-brand-500 hover:text-white dark:hover:bg-brand-500 transition-all border border-brand-100 dark:border-gray-700 shadow-sm"> <i data-lucide="globe" class="w-5 h-5"></i> </a> </div> </div> </div> <!-- Bottom Copyright --> <div class="border-t border-brand-100 dark:border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center gap-4"> <p class="text-sm text-gray-500 dark:text-gray-400 text-center md:text-left"> © 2026 EduInfo Directory. All rights reserved. </p> <p class="text-sm text-gray-500 dark:text-gray-400 flex items-center gap-1.5"> <i data-lucide="code-2" class="w-4 h-4 text-brand-500"></i> by <a href="https://kabir.pages.dev" target="_blank" class="font-bold text-brand-600 dark:text-brand-400 hover:text-brand-700 transition-colors">Kabir</a> </p> </div> </div> </footer> </div> <script> document.addEventListener("DOMContentLoaded", () => { lucide.createIcons(); setTimeout(() => { const loader = document.getElementById('pageLoader'); const content = document.getElementById('mainContent'); loader.style.opacity = '0'; setTimeout(() => { loader.style.display = 'none'; content.style.display = 'flex'; void content.offsetWidth; content.style.opacity = '1'; }, 500); }, 800); }); const themeToggleBtn = document.getElementById('themeToggle'); const htmlElement = document.documentElement; if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) { htmlElement.classList.add('dark'); } else { htmlElement.classList.remove('dark'); } themeToggleBtn.addEventListener('click', () => { htmlElement.classList.add('transition-theme'); if (htmlElement.classList.contains('dark')) { htmlElement.classList.remove('dark'); localStorage.theme = 'light'; } else { htmlElement.classList.add('dark'); localStorage.theme = 'dark'; } setTimeout(() => { htmlElement.classList.remove('transition-theme'); }, 300); }); const searchBtn = document.getElementById('searchBtn'); const nameInput = document.getElementById('nameInput'); const skeletonLoader = document.getElementById('skeletonLoader'); const resultsGrid = document.getElementById('resultsGrid'); const resultCount = document.getElementById('resultCount'); const messageBox = document.getElementById('messageBox'); const messageText = document.getElementById('messageText'); const messageIcon = document.getElementById('messageIcon'); const toast = document.getElementById('toast'); function showMessage(type, text) { messageBox.className = 'w-full max-w-3xl mt-6 p-4 rounded-2xl flex items-start gap-3 border transition-all animate-fade-in bg-white dark:bg-gray-900 shadow-sm mx-auto'; if (type === 'error') { messageBox.classList.add('text-red-800', 'border-red-200', 'dark:text-red-400', 'dark:border-red-900/50'); messageIcon.setAttribute('data-lucide', 'circle-x'); messageIcon.classList.add('text-red-500'); } else if (type === 'warning') { messageBox.classList.add('text-amber-800', 'border-amber-200', 'dark:text-amber-400', 'dark:border-amber-900/50'); messageIcon.setAttribute('data-lucide', 'triangle-alert'); messageIcon.classList.add('text-amber-500'); } messageText.innerText = text; messageBox.classList.remove('hidden'); lucide.createIcons(); } function toggleLoading(isLoading) { if (isLoading) { resultsGrid.innerHTML = ''; resultCount.classList.add('hidden'); messageBox.classList.add('hidden'); skeletonLoader.classList.remove('hidden'); searchBtn.disabled = true; searchBtn.innerHTML = '<i data-lucide="loader-circle" class="w-5 h-5 animate-spin"></i><span>খুঁজছি...</span>'; lucide.createIcons(); } else { skeletonLoader.classList.add('hidden'); searchBtn.disabled = false; searchBtn.innerHTML = '<span>খুঁজুন</span>'; lucide.createIcons(); } } function copyEIIN(eiin) { const textarea = document.createElement('textarea'); textarea.value = eiin; document.body.appendChild(textarea); textarea.select(); try { document.execCommand('copy'); toast.style.animation = 'none'; toast.offsetHeight; toast.style.animation = 'toastSlide 3s ease-in-out forwards'; } catch (err) { alert('কপি করা সম্ভব হয়নি।'); } document.body.removeChild(textarea); } function createInstituteCard(data) { const name = data.instituteNameBn || data.instituteName || "নাম পাওয়া যায়নি"; const eiin = data.eiinNo; const type = data.instituteTypeNameBn || "অজানা ধরন"; let badgeHTML = ''; if (data.isGovt === true) { badgeHTML = `<div class="corner-cutout-badge bg-brand-500 text-white border-b border-l border-brand-600 dark:border-brand-600"><i data-lucide="check-circle-2" class="w-3 h-3"></i> সরকারি</div>`; } else { badgeHTML = `<div class="corner-cutout-badge bg-gray-500 text-white border-b border-l border-gray-600 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300"><i data-lucide="building" class="w-3 h-3"></i> বেসরকারি</div>`; } let addressArr = []; if(data.thanaNameBn) addressArr.push(data.thanaNameBn); if(data.districtNameBn) addressArr.push(data.districtNameBn); const address = addressArr.length > 0 ? addressArr.join(', ') : "ঠিকানা নেই"; return ` <div class="bg-white dark:bg-gray-900 rounded-3xl p-6 border border-brand-100 dark:border-gray-800 hover:shadow-xl hover:shadow-brand-100/50 dark:hover:shadow-none transition-all duration-300 relative overflow-hidden group"> ${badgeHTML} <div class="pr-16 mb-5"> <h3 class="font-bold text-lg leading-snug text-gray-900 dark:text-white line-clamp-2" title="${name}">${name}</h3> <p class="text-xs text-brand-600 dark:text-brand-400 font-medium mt-1.5 flex items-center gap-1.5"><i data-lucide="book-open" class="w-3.5 h-3.5"></i> ${type}</p> </div> <div class="bg-brand-50/50 dark:bg-gray-800 rounded-2xl p-3.5 flex justify-between items-center mb-4 border border-brand-100/50 dark:border-gray-700"> <div> <p class="text-[10px] uppercase tracking-widest text-gray-500 dark:text-gray-400 font-bold mb-0.5">EIIN নম্বর</p> <p class="font-mono text-xl font-bold text-gray-900 dark:text-white">${eiin}</p> </div> <button onclick="copyEIIN('${eiin}')" class="w-10 h-10 bg-white dark:bg-gray-700 rounded-xl flex items-center justify-center text-brand-500 dark:text-brand-400 shadow-sm border border-brand-100 dark:border-gray-600 hover:bg-brand-500 hover:text-white dark:hover:bg-brand-500 dark:hover:border-brand-500 transition-colors focus:outline-none" title="EIIN কপি করুন"> <i data-lucide="copy" class="w-5 h-5"></i> </button> </div> <div class="flex items-start gap-2 text-sm text-gray-600 dark:text-gray-400"> <i data-lucide="map-pin" class="w-4 h-4 mt-0.5 flex-shrink-0 text-gray-400"></i> <span class="line-clamp-1">${address}</span> </div> </div> `; } async function searchInstitutes() { const query = nameInput.value.trim(); if (!query || query.length < 3) { showMessage('warning', 'সঠিক ফলাফল পেতে অন্তত ৩টি অক্ষর লিখুন।'); return; } toggleLoading(true); try { // Call the secure PHP proxy mapped to the '?search=' endpoint const requestUrl = `api/search_institute.php?name=${encodeURIComponent(query)}`; const response = await fetch(requestUrl); let json = {}; try { json = await response.json(); } catch(e) { throw new Error('সার্ভার থেকে সঠিক ডাটা পাওয়া যায়নি।'); } if (!response.ok) { throw new Error(json.message || `সার্ভার এরর: HTTP ${response.status}`); } if (json.status === "success" && json.data && json.data.length > 0) { resultCount.innerHTML = `<span class="text-brand-600 dark:text-brand-400 font-bold">${json.data.length}</span> টি প্রতিষ্ঠান পাওয়া গেছে`; resultCount.classList.remove('hidden'); let cardsHTML = ''; json.data.forEach(inst => { cardsHTML += createInstituteCard(inst); }); resultsGrid.innerHTML = cardsHTML; lucide.createIcons(); document.getElementById('resultCount').scrollIntoView({ behavior: 'smooth', block: 'center' }); } else { showMessage('error', json.message || 'আপনার খোঁজা নামের কোনো প্রতিষ্ঠান ডেটাবেসে পাওয়া যায়নি।'); } } catch (error) { console.error("Fetch API Error:", error); showMessage('error', error.message || 'সার্ভারে সংযোগ করা যাচ্ছে না। দয়া করে ইন্টারনেট চেক করুন।'); } finally { toggleLoading(false); } } searchBtn.addEventListener('click', searchInstitutes); nameInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') searchInstitutes(); }); </script> </body> </html>
New Folder
Folder Name
Cancel
Create
New File
File Name
Cancel
Create