Test

/* Main Styles */ .cuet-container { background-color: #f7f9fd; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; padding: 0; margin: 0; } .header-main { background: #ffffff; padding: 10px; border-bottom: 2px solid #eb8a2b; margin-bottom: 20px; } .section-header { background: #eb8a2b; color: white; padding: 15px 20px; border-radius: 5px; margin-bottom: 20px; } .logo-container { width: 300px; height: 300px; display: flex; align-items: center; justify-content: center; margin-bottom: 25px; padding: 15px; background: #ffffff; border-radius: 12px; overflow: hidden; position: relative; box-shadow: 0 2px 8px rgba(0,0,0,0.05); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .logo-container:hover { transform: scale(1.02); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .university-logo { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; object-position: center; opacity: 0; transition: opacity 0.3s, transform 0.3s; } .university-logo.loaded { opacity: 1; } .placeholder-letter { width: 95%; height: 95%; display: flex; align-items: center; justify-content: center; font-size: 64px; color: #6c757d; font-weight: bold; background: #f8f9fa; border-radius: 8px; } .university-card { background: white; border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.25); margin-bottom: 30px; padding: 30px 25px; transition: all 0.3s ease, box-shadow 0.4s; display: flex; flex-direction: column; align-items: center; min-height: 400px; position: relative; text-decoration: none; color: inherit; } .university-card:hover { transform: translateY(-5px); box-shadow: 0 9px 18px rgba(0,0,0,0.25); text-decoration: none; color: inherit; } .university-card:hover .university-logo { transform: scale(1.05); } .university-name { text-align: center; margin: 0; font-size: 1.4rem; line-height: 1.5; font-weight: 500; color: #2c3e50; padding: 0 15px; margin-top: 20px; } .search-container { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 30px; position: sticky; top: 0; z-index: 100; } .search-input { border: 2px solid #e9ecef; padding: 12px 20px; /* Increased padding (top/bottom, left/right) */ font-size: 1.2rem; /* Increased font size */ width: 100%; min-height: 50px; /* Added minimum height */ border-radius: 8px; /* Optional: slightly rounded corners */ } .search-input::placeholder { font-size: 1.2rem; color: #6c757d; } .search-input:focus { border-color: #eb8a2b; box-shadow: none; } .filter-container { background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); position: sticky; top: 100px; padding: 20px; margin-bottom: 20px; } .filter-header { display: flex; align-items: center; gap: 10px; padding-bottom: 15px; margin-bottom: 15px; border-bottom: 2px solid #eb8a2b; font-weight: 600; font-size: 1.6rem; } .university-icon { font-size: 1.6rem; } .filter-options { display: flex; flex-direction: column; gap: 10px; } .filter-option { padding: 12px 15px; border-radius: 8px; background: #f8f9fa; cursor: pointer; transition: all 0.3s ease; font-size: 1.4rem; border: 1px solid #e9ecef; } .filter-option:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); background: #fff; border-color: #eb8a2b; } .filter-option.active { background: #eb8a2b; color: white; border-color: #eb8a2b; } /* Added for scroll padding */ html { scroll-padding-top: 120px; /* Adjust based on your header height */ } /* Bootstrap-like grid system */ .cuet-container * { box-sizing: border-box; } .cuet-row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } .cuet-col-md-3, .cuet-col-md-4, .cuet-col-md-6, .cuet-col-md-8, .cuet-col-md-9 { position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } @media (min-width: 768px) { .cuet-col-md-3 { flex: 0 0 25%; max-width: 25%; } .cuet-col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; } .cuet-col-md-6 { flex: 0 0 50%; max-width: 50%; } .cuet-col-md-8 { flex: 0 0 66.666667%; max-width: 66.666667%; } .cuet-col-md-9 { flex: 0 0 75%; max-width: 75%; } .cuet-mx-auto { margin-left: auto; margin-right: auto; } .cuet-text-center { text-align: center; } .cuet-py-4 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .logo-container { width: 220px; height: 220px; } .university-card { min-height: 350px; padding: 25px 20px; } } @media (max-width: 1200px) { .logo-container { width: 200px; height: 200px; } .university-card { min-height: 380px; } } @media (max-width: 768px) { .logo-container { width: 220px; height: 220px; } .university-card { min-height: 340px; } .university-name { font-size: 0.95rem; } .filter-container { position: static; margin-bottom: 30px; } } @media (max-width: 576px) { .logo-container { width: 200px; height: 200px; } .university-card { min-height: 320px; padding: 20px 15px; } .university-name { font-size: 1rem; } }

Loading universities...

${type}

${universities.map((uni, index) => `

${index + 1}. ${uni.name}

`).join('')}

`; } function displayUniversities(data) { document.getElementById('loading').style.display = 'none'; const container = document.getElementById('universitiesList'); let html = ''; ["Central University", "State University", "Deemed University", "Private University", "Other Government Institutions"].forEach(type => { if (data[type] && data[type].length > 0) { html += createUniversitySection(type, data[type]); } }); container.innerHTML = html; } // Search functionality let searchTimeout; document.getElementById('searchInput').addEventListener('input', function(e) { clearTimeout(searchTimeout); document.getElementById('loading').style.display = 'block'; document.getElementById('universitiesList').style.display = 'none'; searchTimeout = setTimeout(() => { const query = e.target.value.toLowerCase(); if (!query) { document.getElementById('universitiesList').style.display = 'block'; displayUniversities(universitiesData); return; } const filteredData = {}; Object.keys(universitiesData).forEach(type => { const filtered = universitiesData[type].filter(uni => uni.name.toLowerCase().includes(query) ); if (filtered.length > 0) { filteredData[type] = filtered; } }); document.getElementById('universitiesList').style.display = 'block'; displayUniversities(filteredData); }, 300); }); // Filter functionality document.querySelectorAll('.filter-option').forEach(option => { option.addEventListener('click', function() { // Update active state document.querySelectorAll('.filter-option').forEach(opt => opt.classList.remove('active')); this.classList.add('active'); const selectedType = this.getAttribute('data-type'); if (selectedType === 'ALL') { displayUniversities(universitiesData); // Scroll to the top of the list window.scrollTo({ top: document.getElementById('universitiesList').offsetTop - 120, behavior: 'smooth' }); } else { const filteredData = {}; if (universitiesData[selectedType]) { filteredData[selectedType] = universitiesData[selectedType]; } displayUniversities(filteredData); // Wait a moment for the DOM to update before scrolling setTimeout(() => { // Scroll to the specific section const sectionId = `section-${selectedType.replace(/\s+/g, '-').toLowerCase()}`; const sectionElement = document.getElementById(sectionId); if (sectionElement) { // Using window.scrollTo for more precise scrolling window.scrollTo({ top: sectionElement.offsetTop - 120, // Offset to account for header and search bar behavior: 'smooth' }); } }, 100); } }); }); // Initialize the display when the DOM is loaded document.addEventListener('DOMContentLoaded', function() { displayUniversities(universitiesData); }); })();