Nexus File Manager | Rose Theme

index.php

Cancel

<?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 Finder Portal</title>
    
    
    <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">
    
    
    <script src="https://cdn.tailwindcss.com"></script>
    
    
    <script src="https://unpkg.com/lucide@latest"></script>

<script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['"Hind Siliguri"', 'sans-serif'],
                    },
                    colors: {
                        brand: {
                            50: '#f0fdf4',
                            100: '#dcfce7',
                            200: '#bbf7d0',
                            300: '#86efac',
                            400: '#4ade80',
                            500: '#22c55e',
                            600: '#16a34a',
                            700: '#15803d',
                            800: '#166534',
                            900: '#14532d',
                        }
                    },
                    animation: {
                        'fade-in': 'fadeIn 0.5s ease-out',
                        'slide-up': 'slideUp 0.6s ease-out forwards',
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' },
                        },
                        slideUp: {
                            '0%': { opacity: '0', transform: 'translateY(20px)' },
                            '100%': { opacity: '1', transform: 'translateY(0)' },
                        }
                    }
                }
            }
        }
    </script>

/* Custom Scrollbar */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #bbf7d0; border-radius: 10px; }
        .dark ::-webkit-scrollbar-thumb { background: #374151; }

/* Corner Cutout Badge CSS */
        .corner-cutout-badge {
            position: absolute;
            top: 0;
            right: 0;
            border-bottom-left-radius: 1.5rem;
            padding: 0.5rem 1.25rem;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 0.375rem;
            box-shadow: -4px 4px 15px rgba(0,0,0,0.05);
            z-index: 20;
            backdrop-filter: blur(8px);
        }

.dark .corner-cutout-badge {
            box-shadow: -4px 4px 15px rgba(0,0,0,0.4);
        }

/* Hide content until initial loader finishes */
        #mainContent { display: none; opacity: 0; transition: opacity 0.5s ease; }
        
        /* Interactive Link Hover Effects */
        .interactive-link {
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.25rem;
        }
        .interactive-link:hover {
            transform: translateX(4px);
            color: #16a34a; /* brand-600 */
        }
        .dark .interactive-link:hover {
            color: #4ade80; /* brand-400 */
        }
    </style>
</head>
<body class="bg-brand-50/50 dark:bg-gray-950 text-gray-800 dark:text-gray-100 min-h-screen flex flex-col font-sans transition-colors duration-300">

<script>
        const BASE_URL = "<?= BASE_URL ?? '' ?>";
    </script>

<div id="pageLoader" class="fixed inset-0 z-50 bg-brand-50 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-24 h-24 bg-brand-200/50 dark:bg-gray-800 rounded-full mb-6"></div>
            <div class="h-10 bg-brand-100/50 dark:bg-gray-900 rounded-lg w-3/4 sm:w-1/2 mb-4"></div>
            <div class="h-6 bg-brand-100/50 dark:bg-gray-900 rounded-lg w-1/2 sm:w-1/3 mb-10"></div>
            <div class="w-full max-w-xl h-16 bg-brand-200/50 dark:bg-gray-800 rounded-full mb-12"></div>
        </div>
    </div>

<div id="mainContent" class="flex-grow flex flex-col relative overflow-x-hidden">
        
        
        <div class="absolute top-[-10%] left-[-10%] w-[500px] h-[500px] bg-brand-300/30 dark:bg-brand-500/10 rounded-full blur-[120px] pointer-events-none -z-10"></div>
        <div class="absolute top-[20%] right-[-10%] w-[400px] h-[400px] bg-teal-300/20 dark:bg-teal-500/10 rounded-full blur-[100px] pointer-events-none -z-10"></div>

<nav class="sticky top-0 z-40 w-full backdrop-blur-xl bg-white/70 dark:bg-gray-950/80 border-b border-brand-200/50 dark:border-gray-800 transition-colors duration-300">
            <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="flex justify-between h-16 items-center">
                    
                    <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="graduation-cap" 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>

<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>
                        <a href="#faq" class="text-gray-600 hover:text-brand-600 dark:text-gray-300 dark:hover:text-brand-400 font-medium transition-colors">জিজ্ঞাসা</a>
                    </div>

<div class="flex items-center">
                        <button id="themeToggle" class="p-2.5 rounded-full bg-brand-50 dark:bg-gray-800 border border-brand-200 dark:border-gray-700 text-brand-600 dark:text-brand-400 hover:bg-brand-100 dark:hover:bg-gray-700 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">
            
            <section id="home" class="pt-12 pb-20 px-4 sm:px-6 flex flex-col items-center relative">
                
                <div class="text-center w-full max-w-3xl mb-10 opacity-0 animate-slide-up" style="animation-delay: 0.1s;">
                    <div class="inline-flex items-center justify-center p-1.5 pr-4 bg-white dark:bg-gray-900 rounded-full mb-6 shadow-sm border border-brand-200 dark:border-gray-800 text-sm font-medium text-brand-600 dark:text-brand-400 gap-2">
                        <span class="bg-brand-100 dark:bg-gray-800 text-brand-700 dark:text-brand-300 px-3 py-1 rounded-full text-xs font-bold uppercase tracking-wider">সুরক্ষিত</span>
                        <span>ডেটাবেস সংযুক্ত</span>
                    </div>
                    <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold text-gray-900 dark:text-white mb-5 tracking-tight leading-[1.15]">
                        শিক্ষাপ্রতিষ্ঠান খুঁজুন <br class="hidden sm:block">
                        <span class="text-transparent bg-clip-text bg-gradient-to-r from-brand-500 to-teal-500">এক ক্লিকেই</span>
                    </h1>
                    <p class="text-gray-600 dark:text-gray-400 text-base sm:text-lg max-w-xl mx-auto leading-relaxed">
                        বাংলাদেশের যেকোনো শিক্ষা প্রতিষ্ঠানের ইআইআইএন (EIIN) নম্বর দিয়ে প্রতিষ্ঠানের সরকারি স্ট্যাটাস, অবস্থান এবং যোগাযোগের বিস্তারিত তথ্য জানুন।
                    </p>
                </div>

<div class="w-full max-w-2xl 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="hash" class="w-5 h-5 text-gray-400 group-focus-within:text-brand-500 transition-colors"></i>
                    </div>
                    <input type="number" id="eiinInput" placeholder="EIIN নম্বর লিখুন (যেমন: 112276)" 
                        class="block w-full pl-14 pr-[130px] py-4 sm:py-5 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-xl shadow-brand-100/40 dark:shadow-none dark:ring-1 dark:ring-gray-800 outline-none text-lg text-gray-900 dark:text-white placeholder-gray-400 transition-all font-mono">
                    <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-6 sm:px-8 py-2.5 sm:py-3.5 rounded-full font-semibold shadow-lg shadow-brand-500/30 transition-all active:scale-95 flex items-center gap-2">
                            <span>অনুসন্ধান</span>
                            <i data-lucide="arrow-right" class="w-4 h-4 hidden sm:block"></i>
                        </button>
                    </div>
                </div>

<div id="messageBox" class="hidden w-full max-w-2xl mt-6 p-4 rounded-2xl flex items-start gap-3 border transition-all animate-fade-in backdrop-blur-sm bg-white dark:bg-gray-900">
                    <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>

<div id="resultContainer" class="w-full flex flex-col items-center mt-4">
                    
                    
                    <div id="skeletonLoader" class="hidden w-full max-w-3xl mt-6 animate-pulse bg-white dark:bg-gray-900 rounded-[2rem] p-6 sm:p-8 shadow-xl dark:shadow-none border border-brand-100 dark:border-gray-800 relative overflow-hidden">
                        <div class="absolute top-0 right-0 w-32 h-10 bg-brand-50 dark:bg-gray-800 rounded-bl-3xl"></div>
                        <div class="flex items-center gap-5 mb-8 border-b border-brand-50 dark:border-gray-800 pb-6 mt-4">
                            <div class="w-16 h-16 bg-brand-100/50 dark:bg-gray-800 rounded-2xl"></div>
                            <div class="space-y-3 flex-grow">
                                <div class="h-6 bg-brand-100/50 dark:bg-gray-800 rounded-md w-3/4"></div>
                                <div class="h-4 bg-brand-100/50 dark:bg-gray-800 rounded-md w-1/3"></div>
                            </div>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                            <div class="space-y-2"><div class="h-4 bg-brand-100/50 dark:bg-gray-800 rounded w-1/4"></div><div class="h-5 bg-brand-100/50 dark:bg-gray-800 rounded w-full"></div></div>
                            <div class="space-y-2"><div class="h-4 bg-brand-100/50 dark:bg-gray-800 rounded w-1/4"></div><div class="h-5 bg-brand-100/50 dark:bg-gray-800 rounded w-3/4"></div></div>
                            <div class="space-y-2"><div class="h-4 bg-brand-100/50 dark:bg-gray-800 rounded w-1/4"></div><div class="h-5 bg-brand-100/50 dark:bg-gray-800 rounded w-full"></div></div>
                            <div class="space-y-2"><div class="h-4 bg-brand-100/50 dark:bg-gray-800 rounded w-1/4"></div><div class="h-5 bg-brand-100/50 dark:bg-gray-800 rounded w-1/2"></div></div>
                        </div>
                    </div>

<div id="resultCard" class="hidden w-full max-w-3xl mt-6 bg-white dark:bg-gray-900 rounded-[2rem] p-6 sm:p-8 shadow-2xl shadow-brand-100/50 dark:shadow-none border border-brand-200/80 dark:border-gray-800 transform transition-all animate-fade-in relative overflow-hidden group/card">
                        
                        
                        <div id="resGovtBadge" class="corner-cutout-badge transition-colors"></div>

<div class="absolute -top-10 -left-10 w-32 h-32 bg-brand-500/10 dark:bg-brand-500/5 rounded-full blur-2xl -z-0"></div>

<div class="flex items-center gap-5 mb-8 border-b border-gray-100 dark:border-gray-800 pb-6 relative z-10 pt-6 sm:pt-2">
                            <div class="w-16 h-16 bg-brand-100 text-brand-600 dark:bg-gray-800 dark:text-brand-400 rounded-2xl flex items-center justify-center flex-shrink-0 border border-brand-200 dark:border-gray-700 shadow-sm group-hover/card:scale-105 transition-transform duration-300">
                                <i data-lucide="building-2" class="w-8 h-8"></i>
                            </div>
                            <div>
                                <h2 id="resName" class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900 dark:text-white leading-tight mb-2"></h2>
                                <div class="flex flex-wrap items-center gap-2 sm:gap-3 text-sm">
                                    <span class="bg-brand-50 text-gray-700 dark:bg-gray-800 dark:text-gray-300 px-2.5 py-1 rounded-md font-bold font-mono tracking-wider shadow-inner border border-brand-100 dark:border-gray-700" id="resEiin"></span>
                                    <span class="hidden sm:inline text-gray-300 dark:text-gray-600">•</span>
                                    <span id="resType" class="flex items-center gap-1.5 text-brand-700 dark:text-brand-400 font-medium bg-brand-100/50 dark:bg-gray-800 px-2.5 py-1 rounded-md">
                                        <i data-lucide="book-open" class="w-4 h-4"></i> <span></span>
                                    </span>
                                </div>
                            </div>
                        </div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-y-8 gap-x-10 relative z-10">
                            
                            
                            <div class="flex items-start gap-4">
                                <div class="mt-1 p-2.5 bg-brand-50 dark:bg-gray-800 rounded-xl text-brand-500 shadow-sm border border-brand-100 dark:border-gray-700">
                                    <i data-lucide="map-pin" class="w-5 h-5"></i>
                                </div>
                                <div>
                                    <p class="text-[11px] sm:text-xs text-gray-500 dark:text-gray-400 font-bold mb-1 uppercase tracking-widest">ঠিকানা ও অবস্থান</p>
                                    <p id="resAddress" class="text-gray-800 dark:text-gray-200 font-medium leading-snug"></p>
                                    <p id="resMouza" class="text-gray-500 dark:text-gray-400 text-sm mt-1"></p>
                                </div>
                            </div>

<div class="flex items-start gap-4">
                                <div class="mt-1 p-2.5 bg-brand-50 dark:bg-gray-800 rounded-xl text-brand-600 dark:text-brand-400 shadow-sm border border-brand-100 dark:border-gray-700">
                                    <i data-lucide="shield-check" class="w-5 h-5"></i>
                                </div>
                                <div>
                                    <p class="text-[11px] sm:text-xs text-gray-500 dark:text-gray-400 font-bold mb-1 uppercase tracking-widest">জরিপ ও যাচাইকরণ</p>
                                    <div class="flex flex-col gap-1.5 mt-1.5">
                                        <div class="flex items-center gap-2">
                                            <span class="text-xs text-gray-500 dark:text-gray-400 w-16">জরিপ:</span>
                                            <span id="resSubmission" class="text-sm font-semibold text-gray-800 dark:text-gray-200"></span>
                                        </div>
                                        <div class="flex items-center gap-2">
                                            <span class="text-xs text-gray-500 dark:text-gray-400 w-16">যাচাই:</span>
                                            <span id="resVerification" class="text-sm font-semibold text-gray-800 dark:text-gray-200"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>

<div class="flex items-start gap-4">
                                <div class="mt-1 p-2.5 bg-brand-50 dark:bg-gray-800 rounded-xl text-brand-500 shadow-sm border border-brand-100 dark:border-gray-700">
                                    <i data-lucide="phone-call" class="w-5 h-5"></i>
                                </div>
                                <div>
                                    <p class="text-[11px] sm:text-xs text-gray-500 dark:text-gray-400 font-bold mb-1 uppercase tracking-widest">মোবাইল (কল করতে ক্লিক করুন)</p>
                                    <div id="resPhone" class="flex flex-col gap-1 font-mono text-base font-semibold mt-1.5">
                                        
                                    </div>
                                </div>
                            </div>

<div class="flex items-start gap-4">
                                <div class="mt-1 p-2.5 bg-brand-50 dark:bg-gray-800 rounded-xl text-brand-500 shadow-sm border border-brand-100 dark:border-gray-700">
                                    <i data-lucide="mail-open" class="w-5 h-5"></i>
                                </div>
                                <div class="w-full overflow-hidden">
                                    <p class="text-[11px] sm:text-xs text-gray-500 dark:text-gray-400 font-bold mb-1 uppercase tracking-widest">ইমেইল (মেইল করতে ক্লিক করুন)</p>
                                    <div id="resEmail" class="mt-1.5">
                                        
                                    </div>
                                </div>
                            </div>

</div>
                    </div>
                </div>
            </section>

<section id="features" class="py-16 bg-gradient-to-b from-brand-100/40 to-brand-50/20 dark:from-gray-900 dark:to-gray-950 border-t border-brand-200/50 dark:border-gray-800 relative">
                <div class="max-w-6xl 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 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 hover:-translate-y-1 hover:shadow-xl 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 shadow-sm">
                                <i data-lucide="mouse-pointer-click" 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 hover:-translate-y-1 hover:shadow-xl 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 shadow-sm">
                                <i data-lucide="shield-check" 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">আমাদের নিজস্ব সিকিউরড API প্রক্সি দিয়ে সরকারি সার্ভার থেকে নির্ভুল ডেটা আনা হয়।</p>
                        </div>
                        <div class="bg-white dark:bg-gray-900 p-8 rounded-3xl border border-brand-100 dark:border-gray-800 hover:-translate-y-1 hover:shadow-xl 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 shadow-sm">
                                <i data-lucide="smartphone" class="w-7 h-7"></i>
                            </div>
                            <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">সেরা ইউআই (Best UI)</h3>
                            <p class="text-gray-600 dark:text-gray-400 text-sm leading-relaxed">সবুজ সতেজ থিম, পিওর ডার্ক মোড এবং রেসপন্সিভ ডিজাইনের মাধ্যমে মোবাইল অ্যাপের অনুভূতি।</p>
                        </div>
                    </div>
                </div>
            </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 overflow-hidden">
                <div class="max-w-6xl 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 md:gap-12 relative">
                        
                        <div class="hidden md:block absolute top-1/2 left-[20%] right-[20%] h-0.5 bg-brand-200 dark:bg-gray-800 -z-10"></div>
                        
                        
                        <div class="bg-brand-50 dark:bg-gray-900 p-8 rounded-[2rem] w-full max-w-xs 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 shadow-lg border-4 border-white dark:border-gray-950">১</div>
                            <i data-lucide="keyboard" class="w-10 h-10 mx-auto text-brand-400 dark:text-brand-500 mt-4 mb-4"></i>
                            <h4 class="font-bold text-gray-900 dark:text-white mb-2 text-lg">EIIN নম্বর দিন</h4>
                            <p class="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">বক্সে আপনার কাঙ্ক্ষিত ৬ ডিজিটের নম্বরটি লিখুন।</p>
                        </div>
                        
                        <div class="bg-brand-50 dark:bg-gray-900 p-8 rounded-[2rem] w-full max-w-xs 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 shadow-lg border-4 border-white dark:border-gray-950">২</div>
                            <i data-lucide="mouse-pointer-click" class="w-10 h-10 mx-auto text-brand-400 dark:text-brand-500 mt-4 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 leading-relaxed">বাটনে ক্লিক করুন বা কীবোর্ডে এন্টার চাপুন।</p>
                        </div>
                        
                        <div class="bg-brand-50 dark:bg-gray-900 p-8 rounded-[2rem] w-full max-w-xs 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 shadow-lg border-4 border-white dark:border-gray-950">৩</div>
                            <i data-lucide="file-check-2" class="w-10 h-10 mx-auto text-brand-400 dark:text-brand-500 mt-4 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 leading-relaxed">প্রতিষ্ঠানটির বিস্তারিত সব তথ্য আপনার স্ক্রিনে।</p>
                        </div>
                    </div>
                </div>
            </section>

<section id="faq" class="py-16 bg-brand-50/50 dark:bg-gray-900/50 border-t border-brand-100 dark:border-gray-800">
                <div class="max-w-3xl mx-auto px-4 sm:px-6">
                    <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"></div>
                    </div>
                    <div class="space-y-4">
                        <div class="bg-white dark:bg-gray-900 border border-brand-200/60 dark:border-gray-800 rounded-2xl p-6 shadow-sm">
                            <h4 class="font-bold text-gray-900 dark:text-white flex items-center gap-2 text-lg"><i data-lucide="help-circle" class="w-5 h-5 text-brand-500"></i> প্রতিষ্ঠানটি সরকারি না বেসরকারি কীভাবে বুঝব?</h4>
                            <p class="text-gray-600 dark:text-gray-400 text-sm mt-3 ml-7 leading-relaxed">ফলাফল কার্ডের একদম ওপরের ডানদিকের কর্নারে একটি সুন্দর ব্যাজ (Corner Badge) দেখতে পাবেন, যা স্পষ্টভাবে নির্দেশ করবে প্রতিষ্ঠানটি সরকারি নাকি বেসরকারি।</p>
                        </div>
                        <div class="bg-white dark:bg-gray-900 border border-brand-200/60 dark:border-gray-800 rounded-2xl p-6 shadow-sm">
                            <h4 class="font-bold text-gray-900 dark:text-white flex items-center gap-2 text-lg"><i data-lucide="help-circle" class="w-5 h-5 text-brand-500"></i> সরাসরি কল করার সুবিধাটি কীভাবে কাজ করে?</h4>
                            <p class="text-gray-600 dark:text-gray-400 text-sm mt-3 ml-7 leading-relaxed">ফলাফলে দেখানো মোবাইল নম্বরগুলোর ওপর ট্যাপ বা ক্লিক করলেই আপনার ফোনের ডায়ালপ্যাড ওপেন হয়ে যাবে এবং সরাসরি কল করতে পারবেন। ইমেইলের ক্ষেত্রেও একই সুবিধা রয়েছে।</p>
                        </div>
                    </div>
                </div>
            </section>

</main>

<footer class="bg-white dark:bg-gray-950 pt-16 pb-8 border-t border-brand-200 dark:border-gray-900">
            <div class="max-w-6xl mx-auto px-4 sm:px-6">
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-10 mb-12">
                    
                    <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="graduation-cap" 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">
                            বাংলাদেশের সকল শিক্ষা প্রতিষ্ঠানের সঠিক এবং নির্ভুল তথ্য সরবরাহ করার বিশ্বস্ত প্ল্যাটফর্ম।
                        </p>
                    </div>

<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="#faq" class="hover:text-brand-500 transition-colors">সাধারণ জিজ্ঞাসা</a></li>
                        </ul>
                    </div>

<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>
                        
                        <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-brand-50 text-brand-600 dark:bg-gray-800 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-brand-50 text-brand-600 dark:bg-gray-800 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-brand-50 text-brand-600 dark:bg-gray-800 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-brand-50 text-brand-600 dark:bg-gray-800 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>

<div class="border-t border-gray-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">
                        &copy; 2026 EduInfo Portal. 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>

// Theme Toggle Logic
        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);
        });

// DOM Elements
        const searchBtn = document.getElementById('searchBtn');
        const eiinInput = document.getElementById('eiinInput');
        
        const skeletonLoader = document.getElementById('skeletonLoader');
        const resultCard = document.getElementById('resultCard');
        
        const messageBox = document.getElementById('messageBox');
        const messageText = document.getElementById('messageText');
        const messageIcon = document.getElementById('messageIcon');

// Result Elements
        const resName = document.getElementById('resName');
        const resEiin = document.getElementById('resEiin');
        const resType = document.querySelector('#resType span');
        const resGovtBadge = document.getElementById('resGovtBadge');
        
        const resAddress = document.getElementById('resAddress');
        const resMouza = document.getElementById('resMouza');
        const resSubmission = document.getElementById('resSubmission');
        const resVerification = document.getElementById('resVerification');
        const resPhone = document.getElementById('resPhone');
        const resEmail = document.getElementById('resEmail');

async function fetchEIINData() {
            const eiin = eiinInput.value.trim();
            
            if (!eiin || eiin.length < 4) {
                showMessage('warning', 'দয়া করে একটি সঠিক ইআইআইএন (EIIN) নম্বর লিখুন।');
                return;
            }

toggleLoading(true);

try {
                // Calls the Secure PHP Proxy
                const requestUrl = `${BASE_URL}/api/fetch_institute.php?eiin=${eiin}`;
                const response = await fetch(requestUrl);
                
                if (!response.ok) throw new Error('Network Issue');
                
                const json = await response.json();

if (json.status === "success" && json.data && json.data.length > 0) {
                    const data = json.data[0];
                    
                    // Basic Data
                    resName.innerText = data.instituteNameBn || data.instituteName || "নাম পাওয়া যায়নি";
                    resEiin.innerText = `EIIN: ${data.eiinNo}`;
                    resType.innerText = data.instituteTypeNameBn || "অজানা ধরন";
                    
                    // --- CORNER BADGE LOGIC (Govt / Non-Govt) ---
                    if (data.isGovt === true) {
                        resGovtBadge.innerHTML = '<i data-lucide="check-circle-2" class="w-4 h-4"></i> সরকারি';
                        resGovtBadge.className = 'corner-cutout-badge bg-brand-500 text-white border-b border-l border-brand-600 dark:border-brand-600';
                    } else {
                        resGovtBadge.innerHTML = '<i data-lucide="building" class="w-4 h-4"></i> বেসরকারি';
                        resGovtBadge.className = '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';
                    }
                    
                    // --- ADDRESS HIERARCHY ---
                    let addressArr = [];
                    if(data.thanaNameBn) addressArr.push(data.thanaNameBn);
                    if(data.districtNameBn) addressArr.push(data.districtNameBn);
                    if(data.divisionNameBn) addressArr.push(data.divisionNameBn);
                    resAddress.innerText = addressArr.length > 0 ? addressArr.join(', ') : "ঠিকানা দেওয়া নেই";
                    resMouza.innerText = data.mouzaNameBn ? `মৌজা: ${data.mouzaNameBn}` : "";

// --- SURVEY & VERIFICATION ---
                    resSubmission.innerText = data.submissionStatus || "অজানা";
                    resSubmission.className = data.submissionStatus === "Submitted" ? "text-sm font-bold text-brand-600 dark:text-brand-400" : "text-sm font-semibold text-gray-800 dark:text-gray-200";
                    
                    resVerification.innerText = data.verification || "অজানা";
                    resVerification.className = data.verification === "Verified" ? "text-sm font-bold text-blue-600 dark:text-blue-400" : "text-sm font-semibold text-gray-800 dark:text-gray-200";

// --- CLICKABLE PHONE LOGIC ---
                    resPhone.innerHTML = '';
                    if (data.mobile) {
                        const numbers = data.mobile.split(',');
                        numbers.forEach(num => {
                            const cleanNum = num.trim();
                            if(cleanNum) {
                                resPhone.innerHTML += `
                                    <a href="tel:${cleanNum}" class="interactive-link text-gray-800 dark:text-gray-200">
                                        <span>${cleanNum}</span>
                                        <i data-lucide="external-link" class="w-3 h-3 opacity-50"></i>
                                    </a>`;
                            }
                        });
                    } else {
                        resPhone.innerHTML = '<span class="text-sm font-normal text-gray-500 dark:text-gray-400">নম্বর সংযুক্ত নেই</span>';
                    }

// --- CLICKABLE EMAIL LOGIC ---
                    if (data.email) {
                        resEmail.innerHTML = `
                            <a href="mailto:${data.email}" class="interactive-link text-gray-800 dark:text-gray-200 font-medium font-mono text-sm sm:text-base break-all">
                                <span>${data.email}</span>
                                <i data-lucide="external-link" class="w-3 h-3 opacity-50 flex-shrink-0"></i>
                            </a>`;
                    } else {
                        resEmail.innerHTML = '<span class="text-sm font-normal text-gray-500 dark:text-gray-400">ইমেইল সংযুক্ত নেই</span>';
                    }

// Render Result
                    resultCard.classList.remove('hidden');
                    lucide.createIcons(); // Refresh injected icons
                    
                    // Scroll to card smoothly
                    setTimeout(() => {
                        document.getElementById('resultContainer').scrollIntoView({ behavior: 'smooth', block: 'center' });
                    }, 100);

} else {
                    showMessage('error', 'দুঃখিত, এই নম্বরের কোনো শিক্ষাপ্রতিষ্ঠান ডেটাবেসে পাওয়া যায়নি।');
                }

} catch (error) {
                console.error("API Error:", error);
                showMessage('error', 'সার্ভারে সংযোগ করা যাচ্ছে না। দয়া করে ইন্টারনেট চেক করুন।');
            } finally {
                toggleLoading(false);
            }
        }

// Event Listeners
        searchBtn.addEventListener('click', fetchEIINData);
        eiinInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') fetchEIINData();
        });

</script>
</body>
</html>

New Folder

New File