Campus map.html

[aayush009796-sketch]

<title>IGNTU Campus Navigator</title> <script src="https://cdn.tailwindcss.com"></script>

<!-- Header -->
<header class="bg-emerald-800 text-white shadow-lg sticky top-0 z-50">
    <div class="max-w-6xl mx-auto px-4 py-4 flex flex-col md:flex-row justify-between items-center gap-2">
        <div class="flex items-center gap-3">
            <i class="fa-solid font-bold text-2xl fa-compass text-emerald-300"></i>
            <div>
                <h1 class="text-xl font-bold leading-tight">IGNTU Campus Navigator</h1>
                <p class="text-xs text-emerald-200">Indira Gandhi National Tribal University, Amarkantak</p>
            </div>
        </div>
        <a href="https://igntu.ac.in" target="_blank" class="text-xs bg-emerald-700 hover:bg-emerald-600 px-3 py-1.5 rounded-full transition">
            Official IGNTU Website <i class="fa-solid fa-arrow-up-right-from-square ml-1"></i>
        </a>
    </div>
</header>

<!-- Main Content -->
<main class="max-w-6xl mx-auto px-4 py-6 flex-1 w-full grid grid-cols-1 lg:grid-cols-3 gap-6">

    <!-- Sidebar / Search & List Controls -->
    <div class="lg:col-span-1 space-y-4">
        <!-- Search Bar -->
        <div class="bg-white p-4 rounded-xl shadow-md border border-slate-200">
            <label for="searchInput" class="block text-sm font-semibold mb-2 text-slate-700">Search Building or Department</label>
            <div class="relative">
                <input type="text" id="searchInput" placeholder="e.g. Central Library, Hostel..." class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500 border-slate-300 text-sm">
                <i class="fa-solid fa-magnifying-glass absolute left-3 top-3 text-slate-400"></i>
            </div>
        </div>

        <!-- Category Filters -->
        <div class="bg-white p-4 rounded-xl shadow-md border border-slate-200">
            <h3 class="text-sm font-semibold mb-3 text-slate-700">Filter by Category</h3>
            <div class="flex flex-wrap gap-2" id="filterContainer">
                <button onclick="filterCategory('All')" class="filter-btn active-btn bg-emerald-800 text-white text-xs px-3 py-1.5 rounded-full font-medium shadow-sm transition">All</button>
                <button onclick="filterCategory('Academic')" class="filter-btn bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs px-3 py-1.5 rounded-full font-medium transition">Academic</button>
                <button onclick="filterCategory('Hostels')" class="filter-btn bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs px-3 py-1.5 rounded-full font-medium transition">Hostels</button>
                <button onclick="filterCategory('Admin')" class="filter-btn bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs px-3 py-1.5 rounded-full font-medium transition">Admin</button>
                <button onclick="filterCategory('Amenities')" class="filter-btn bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs px-3 py-1.5 rounded-full font-medium transition">Amenities</button>
            </div>
        </div>

        <!-- Locations List -->
        <div class="bg-white p-4 rounded-xl shadow-md border border-slate-200 max-h-[450px] overflow-y-auto">
            <h3 class="text-sm font-semibold mb-3 text-slate-700">Landmarks (<span id="locationCount">0</span>)</h3>
            <div id="locationsList" class="space-y-2">
                <!-- Populated by JavaScript -->
            </div>
        </div>
    </div>

    <!-- Map & Landmark Detail Panel -->
    <div class="lg:col-span-2 space-y-4 flex flex-col">
        <!-- Selected Landmark Details -->
        <div id="detailCard" class="bg-white p-5 rounded-xl shadow-md border border-slate-200">
            <div class="flex justify-between items-start">
                <div>
                    <span id="cardCategory" class="text-xs uppercase tracking-wider font-semibold bg-emerald-100 text-emerald-800 px-2 py-0.5 rounded">Category</span>
                    <h2 id="cardTitle" class="text-xl font-bold text-slate-800 mt-1">Select a Location</h2>
                    <p id="cardDesc" class="text-sm text-slate-600 mt-1">Click any location on the left list or map pin to view directions and details.</p>
                </div>
                <a id="navBtn" href="#" target="_blank" class="hidden bg-emerald-700 hover:bg-emerald-800 text-white text-xs px-4 py-2.5 rounded-lg font-semibold flex items-center gap-2 shadow transition">
                    <i class="fa-solid fa-diamond-turn-right text-base"></i> Get Directions
                </a>
            </div>
        </div>

        <!-- Map View Container -->
        <div class="bg-white p-2 rounded-xl shadow-md border border-slate-200 flex-1 min-h-[380px] relative">
            <iframe 
                id="mapIframe"
                class="w-full h-full min-h-[380px] rounded-lg border-0" 
                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d14717.387920800888!2d81.7513364!3d22.684164!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3983226db92b9bd5%3A0x6b45053eec00cdd6!2sIndira%20Gandhi%20National%20Tribal%20University!5e0!3m2!1sen!2sin!4v1700000000000!5m2!1sen!2sin" 
                allowfullscreen="" 
                loading="lazy">
            </iframe>
        </div>
    </div>

</main>

<!-- Footer -->
<footer class="bg-slate-800 text-slate-400 py-4 text-center text-xs mt-auto">
    <p>© IGNTU Community Navigation Helper • Built for Students & Visitors</p>
</footer>

<!-- JavaScript Data and Logic -->
<script>
    const campusLocations = [
        {
            id: 1,
            name: "Mekal Sadan (Main Admin Block)",
            category: "Admin",
            description: "Main administrative office block containing Vice-Chancellor's Office, Registrar, Admissions, and Finance Departments.",
            mapUrl: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3680.0!2d81.7513!3d22.6841!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3983226db92b9bd5%3A0x6b45053eec00cdd6!2sIndira%20Gandhi%20National%20Tribal%20University!5e0!3m2!1sen!2sin",
            dirUrl: "https://maps.google.com/?q=IGNTU+Mekal+Sadan+Amarkantak"
        },
        {
            id: 2,
            name: "Prof. Ram Dayal Munda Central Library",
            category: "Academic",
            description: "Central automated library equipped with Wi-Fi, thousands of print books, journals, e-resources, and study reading halls.",
            mapUrl: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3680.0!2d81.7513!3d22.6841!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3983226db92b9bd5%3A0x6b45053eec00cdd6!2sIndira%20Gandhi%20National%20Tribal%20University!5e0!3m2!1sen!2sin",
            dirUrl: "https://maps.google.com/?q=IGNTU+Central+Library+Amarkantak"
        },
        {
            id: 3,
            name: "Faculty of Science & Computer Science Dept",
            category: "Academic",
            description: "Houses Computer Science, Mathematics, Physics, Chemistry, Biotechnology, and Botany departments and lab facilities.",
            mapUrl: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3680.0!2d81.7513!3d22.6841!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3983226db92b9bd5%3A0x6b45053eec00cdd6!2sIndira%20Gandhi%20National%20Tribal%20University!5e0!3m2!1sen!2sin",
            dirUrl: "https://maps.google.com/?q=IGNTU+Faculty+of+Science"
        },
        {
            id: 4,
            name: "Boys Hostels Campus",
            category: "Hostels",
            description: "On-campus residential facilities for UG, PG, and PhD male students with mess and recreational amenities.",
            mapUrl: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3680.0!2d81.7513!3d22.6841!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3983226db92b9bd5%3A0x6b45053eec00cdd6!2sIndira%20Gandhi%20National%20Tribal%20University!5e0!3m2!1sen!2sin",
            dirUrl: "https://maps.google.com/?q=IGNTU+Boys+Hostel"
        },
        {
            id: 5,
            name: "Girls Hostels Campus",
            category: "Hostels",
            description: "Secure residential hostels for female undergraduate, postgraduate, and research scholars.",
            mapUrl: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3680.0!2d81.7513!3d22.6841!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3983226db92b9bd5%3A0x6b45053eec00cdd6!2sIndira%20Gandhi%20National%20Tribal%20University!5e0!3m2!1sen!2sin",
            dirUrl: "https://maps.google.com/?q=IGNTU+Girls+Hostel"
        },
        {
            id: 6,
            name: "University Canteen & Cafeteria",
            category: "Amenities",
            description: "Central dining facility providing meals, snacks, and refreshments to students, visitors, and staff.",
            mapUrl: "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3680.0!2d81.7513!3d22.6841!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3983226db92b9bd5%3A0x6b45053eec00cdd6!2sIndira%20Gandhi%20National%20Tribal%20University!5e0!3m2!1sen!2sin",
            dirUrl: "https://maps.google.com/?q=IGNTU+Amarkantak"
        }
    ];

    let currentCategory = "All";

    function renderLocations() {
        const searchVal = document.getElementById('searchInput').value.toLowerCase();
        const container = document.getElementById('locationsList');
        container.innerHTML = '';

        const filtered = campusLocations.filter(loc => {
            const matchesCat = currentCategory === "All" || loc.category === currentCategory;
            const matchesSearch = loc.name.toLowerCase().includes(searchVal) || loc.description.toLowerCase().includes(searchVal);
            return matchesCat && matchesSearch;
        });

        document.getElementById('locationCount').innerText = filtered.length;

        if (filtered.length === 0) {
            container.innerHTML = `<p class="text-xs text-slate-400 py-4 text-center">No locations found.</p>`;
            return;
        }

        filtered.forEach(loc => {
            const card = document.createElement('div');
            card.className = "p-3 rounded-lg border border-slate-200 hover:border-emerald-500 hover:bg-emerald-50/50 cursor-pointer transition flex items-center justify-between group";
            card.onclick = () => selectLocation(loc);
            card.innerHTML = `
                <div>
                    <h4 class="text-xs font-bold text-slate-800 group-hover:text-emerald-800">${loc.name}</h4>
                    <span class="text-[10px] text-slate-500">${loc.category}</span>
                </div>
                <i class="fa-solid fa-chevron-right text-xs text-slate-300 group-hover:text-emerald-600"></i>
            `;
            container.appendChild(card);
        });
    }

    function selectLocation(loc) {
        document.getElementById('cardTitle').innerText = loc.name;
        document.getElementById('cardCategory').innerText = loc.category;
        document.getElementById('cardDesc').innerText = loc.description;
        
        const navBtn = document.getElementById('navBtn');
        navBtn.href = loc.dirUrl;
        navBtn.classList.remove('hidden');

        document.getElementById('mapIframe').src = loc.mapUrl;
    }

    function filterCategory(cat) {
        currentCategory = cat;
        
        // Highlight button
        const buttons = document.querySelectorAll('.filter-btn');
        buttons.forEach(btn => {
            if (btn.innerText.trim() === cat) {
                btn.className = "filter-btn active-btn bg-emerald-800 text-white text-xs px-3 py-1.5 rounded-full font-medium shadow-sm transition";
            } else {
                btn.className = "filter-btn bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs px-3 py-1.5 rounded-full font-medium transition";
            }
        });

        renderLocations();
    }

    document.getElementById('searchInput').addEventListener('input', renderLocations);

    // Initial render
    renderLocations();
    // Default select first item
    selectLocation(campusLocations[0]);
</script>