അംഗനവാടികള്‍

<!DOCTYPE html>

<head>

<title>തിടനാട് ഗ്രാമപഞ്ചായത്ത് - അംഗൻവാടി പോർട്ടൽ</title>

tailwind.config = {

theme: {

extend: {

colors: {

kerala: {

800: '#064e3b',

700: '#0d5c3a',

600: '#15803d',

500: '#16a34a',

100: '#dcfce7',

50: '#f0fdf4',

gold: {

500: '#eab308',

600: '#ca8a04',

100: '#fef9c3',

}

fontFamily: {

malayalam: ['"Noto Sans Malayalam"', '"Manjari"', 'sans-serif'],

}

</script>

<style>

body {

font-family: 'Noto Sans Malayalam', 'Manjari', sans-serif;

background-color: #f4f7f4;

}

/* Print Specific Styles */

@media print {

.no-print {

display: none !important;

}

.print-only {

display: block !important;

}

body {

background: white !important;

color: black !important;

}

.card-grid {

display: grid !important;

grid-template-columns: repeat(2, 1fr) !important;

gap: 1rem !important;

}

.page-break {

page-break-inside: avoid;

}

.custom-scrollbar::-webkit-scrollbar {

width: 6px;

}

.custom-scrollbar::-webkit-scrollbar-track {

background: #f1f1f1;

}

.custom-scrollbar::-webkit-scrollbar-thumb {

background: #0d5c3a;

border-radius: 4px;

}

</style>

</head>

<span class="block text-[8px] font-bold uppercase tracking-tighter text-gold-600">തിടനാട്</span>

</div>

കോട്ടയം ജില്ല • ഈരാറ്റുപേട്ട ബ്ലോക്ക്

</span>

തിടനാട് ഗ്രാമപഞ്ചായത്ത്

</h1>

സ്ത്രീ - ശിശു വികസന വകുപ്പ് • ഐ.സി.ഡി.എസ് പദ്ധതി അംഗൻവാടികളുടെ പട്ടിക

</p>

</div>

</button>

</button>

</button>

</div>

</header>

<div>

<p class="text-xs font-semibold text-gray-500 uppercase tracking-wider">ആകെ അംഗൻവാടികൾ</p>

</div>

</div>

<div>

<p class="text-xs font-semibold text-gray-500 uppercase tracking-wider">പഞ്ചായത്ത് പരിധി</p>

<p class="text-base font-bold text-gray-800">തിടനാട് (Thidanad)</p>

</div>

</div>

<div>

<p class="text-base font-bold text-gray-800">ഈരാറ്റുപേട്ട പ്രോജക്ട്</p>

</div>

</div>

<div>

<p class="text-xs font-semibold text-gray-500 uppercase tracking-wider">പ്രധാന സേവനങ്ങൾ</p>

<p class="text-xs font-bold text-gray-700">പോഷകാഹാരം • പ്രീ-സ്കൂൾ • മാതൃപരിപാലനം</p>

</div>

</div>

</div>

<input type="text" id="searchInput" oninput="filterAnganwadi()"

placeholder="പേരോ നമ്പറോ തിരയുക (ഉദാ: 66, തിടനാട്)..."

class="w-full pl-10 pr-4 py-2.5 bg-gray-50 border border-gray-300 rounded-lg text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-kerala-600 focus:bg-white transition-all">

</div>

കാണിക്കുന്നത്: <strong id="visible-count" class="text-kerala-800">20</strong> / 20

</span>

<i class="fa-solid fa-rotate-left mr-1"></i> റീസെറ്റ്

</button>

</div>

<h1 class="text-2xl font-bold text-gray-900">തിടനാട് ഗ്രാമപഞ്ചായത്ത് - അംഗൻവാടികളുടെ പട്ടിക</h1>

<p class="text-sm text-gray-600">സ്ത്രീ - ശിശു വികസന വകുപ്പ് | ഐ.സി.ഡി.എസ് ഓഫീസ്, ഈരാറ്റുപേട്ട</p>

<p class="text-xs text-gray-500 mt-1">അച്ചടിച്ച തീയതി: <span id="print-date"></span></p>

</div>

</div>

<thead>

<th class="py-3 px-4 text-center w-28">അംഗൻവാടി നം.</th>

<th class="py-3 px-4">അംഗൻവാടിയുടെ പേര്</th>

<th class="py-3 px-4 text-center no-print">വിശദാംശങ്ങൾ</th>

</tr>

</thead>

</tbody>

</table>

</div>

</div>

<h3 class="text-base font-bold text-gray-700">അംഗൻവാടി കണ്ടെത്തിയില്ല</h3>

<p class="text-xs text-gray-500 mt-1">നിങ്ങൾ നൽകിയ വാക്കുകൾക്ക് അനുയോജ്യമായ വിവരങ്ങൾ പട്ടികയിൽ ലഭ്യമല്ല.</p>

പൂർണ്ണ പട്ടിക കാണുക

</button>

</div>

</main>

</button>

അംഗൻവാടി നം: --

</div>

<h3 class="text-xl font-bold" id="modal-center-name">അംഗൻവാടിയുടെ പേര്</h3>

<p class="text-xs text-kerala-100 mt-0.5">തിടനാട് ഗ്രാമപഞ്ചായത്ത്</p>

</div>

</div>

<div>

</div>

<span class="font-bold text-gray-800">ഈരാറ്റുപേട്ട</span>

</div>

</div>

<i class="fa-solid fa-circle-info text-amber-600"></i> ഐ.സി.ഡി.എസ് വിവരങ്ങൾ:

</p>

കുട്ടികളുടെ പ്രീ-സ്കൂൾ വിദ്യാഭ്യാസം, പോഷകാഹാര വിതരണം, വാക്സിനേഷൻ മാർഗ്ഗനിർദ്ദേശം എന്നിവ നൽകുന്നു.

</p>

</div>

അടയ്ക്കുക

</button>

</div>

<p class="font-bold text-sm text-white">തിടനാട് ഗ്രാമപഞ്ചായത്ത് ഓഫീസ്</p>

<p>പിണ്ണാക്കനാട് പി. ഒ., കോട്ടയം ജില്ല, കേരളം - 686536</p>

</div>

<p>© തിടനാട് ഗ്രാമപഞ്ചായത്ത് - എല്ലാ അവകാശങ്ങളും സംരക്ഷിതം</p>

<p class="text-kerala-100/70 text-[10px] mt-0.5">സ്ത്രീ - ശിശു വികസന വകുപ്പ് ഐ.സി.ഡി.എസ് സംരംഭം</p>

</div>

</footer>

// Official Anganwadi List Data

const anganwadiData = [

{ slNo: 1, number: "62", name: "അമ്പാറനിരപ്പേൽ" },

{ slNo: 2, number: "63", name: "കൊണ്ടൂർ" },

{ slNo: 3, number: "64", name: "പാതാഴ" },

{ slNo: 4, number: "65", name: "പാക്കയം" },

{ slNo: 5, number: "66", name: "തിടനാട്" },

{ slNo: 6, number: "67", name: "പൊന്തനാൽ" },

{ slNo: 7, number: "68", name: "ചെമ്മലമറ്റം" },

{ slNo: 8, number: "69", name: "വാര്യാനിക്കാട്" },

{ slNo: 9, number: "70", name: "മൈലാടി" },

{ slNo: 10, number: "71", name: "പിണ്ണാക്കനാട് സെന്റർ" },

{ slNo: 11, number: "72", name: "ചേരാനി" },

{ slNo: 12, number: "74", name: "കുന്നുംപുറം" },

{ slNo: 13, number: "75", name: "തണ്ണീനാൽ" },

{ slNo: 14, number: "76", name: "പൂവത്തോട്" },

{ slNo: 15, number: "77", name: "ചേറ്റൂതോട്" },

{ slNo: 16, number: "117", name: "പിണ്ണാക്കനാട്" },

{ slNo: 17, number: "118", name: "പൂവാങ്കൽ" },

{ slNo: 18, number: "119", name: "കരിമ്പനോലി" },

{ slNo: 19, number: "120", name: "കാവുംകുളം" },

{ slNo: 20, number: "139", name: "കാളകെട്ടി" }

];

let activeView = 'grid';

// Render Cards and Table Rows on Load

window.onload = function() {

renderCards(anganwadiData);

renderTable(anganwadiData);

// Set current print date

const today = new Date();

const dateStr = today.toLocaleDateString('ml-IN', { year: 'numeric', month: 'long', day: 'numeric' });

document.getElementById('print-date').innerText = dateStr;

};

// Render Grid View Cards

function renderCards(data) {

const gridContainer = document.getElementById('grid-view-container');

gridContainer.innerHTML = '';

data.forEach((item) => {

const card = document.createElement('div');

card.className = "bg-white rounded-xl shadow-md hover:shadow-xl transition-all duration-300 border border-gray-100 hover:border-kerala-500 overflow-hidden flex flex-col justify-between group page-break cursor-pointer";

card.onclick = () => openModal(item);

card.innerHTML = `

അങ്കണവാടി നം. ${item.number}

</span>

</div>

${item.name}

</h3>

<i class="fa-solid fa-location-dot text-kerala-600"></i> തിടനാട് ഗ്രാമപഞ്ചായത്ത്

</p>

</div>

<span>വിശദവിവരങ്ങൾ</span>

</div>

gridContainer.appendChild(card);

});

}

// Render Table View Rows

function renderTable(data) {

const tableBody = document.getElementById('table-body');

tableBody.innerHTML = '';

data.forEach((item, index) => {

const tr = document.createElement('tr');

tr.className = index % 2 === 0 ? 'bg-white hover:bg-gray-50' : 'bg-gray-50/50 hover:bg-gray-100';

tr.innerHTML = `

${item.number}

</span>

</td>

<td class="py-3.5 px-4 text-gray-600 text-xs">തിടനാട് ഗ്രാമപഞ്ചായത്ത്</td>

<i class="fa-solid fa-eye mr-1"></i> നോക്കുക

</button>

</td>

tableBody.appendChild(tr);

});

}

// Search & Filter Logic

function filterAnganwadi() {

const query = document.getElementById('searchInput').value.trim().toLowerCase();

const filtered = anganwadiData.filter(item => {

return item.name.toLowerCase().includes(query) || item.number.toLowerCase().includes(query);

});

renderCards(filtered);

renderTable(filtered);

// Update result counter

document.getElementById('visible-count').innerText = filtered.length;

// Toggle No Results Message

const noResults = document.getElementById('no-results');

const gridView = document.getElementById('grid-view-container');

const tableView = document.getElementById('table-view-container');

if (filtered.length === 0) {

noResults.classList.remove('hidden');

gridView.classList.add('hidden');

tableView.classList.add('hidden');

} else {

noResults.classList.add('hidden');

if (activeView === 'grid') {

gridView.classList.remove('hidden');

} else {

tableView.classList.remove('hidden');

}

// Reset Search Input

function resetSearch() {

document.getElementById('searchInput').value = '';

filterAnganwadi();

}

// Switch View Modes (Grid / Table)

function toggleView(view) {

activeView = view;

const gridContainer = document.getElementById('grid-view-container');

const tableContainer = document.getElementById('table-view-container');

const btnGrid = document.getElementById('btn-grid-view');

const btnTable = document.getElementById('btn-table-view');

if (view === 'grid') {

gridContainer.classList.remove('hidden');

tableContainer.classList.add('hidden');

btnGrid.classList.replace('bg-kerala-800', 'bg-kerala-600');

btnTable.classList.replace('bg-kerala-600', 'bg-kerala-800');

} else {

gridContainer.classList.add('hidden');

tableContainer.classList.remove('hidden');

btnTable.classList.replace('bg-kerala-800', 'bg-kerala-600');

btnGrid.classList.replace('bg-kerala-600', 'bg-kerala-800');

}

// Modal Box Functions

function openModal(item) {

document.getElementById('modal-center-no').innerText = `അംഗൻവാടി നം: ${item.number}`;

document.getElementById('modal-center-name').innerText = `${item.number} - ${item.name}`;

document.getElementById('modal-location').innerText = `${item.name}, തിടനാട്`;

const modal = document.getElementById('detailModal');

const content = document.getElementById('modalContent');

modal.classList.remove('hidden');

setTimeout(() => {

content.classList.remove('scale-95', 'opacity-0');

content.classList.add('scale-100', 'opacity-100');

}, 10);

}

function closeModal() {

const modal = document.getElementById('detailModal');

const content = document.getElementById('modalContent');

content.classList.remove('scale-100', 'opacity-100');

content.classList.add('scale-95', 'opacity-0');

setTimeout(() => {

modal.classList.add('hidden');

}, 200);

}

// Close Modal on clicking outside

document.getElementById('detailModal').addEventListener('click', function(e) {

if (e.target === this) {

closeModal();

}

});

</script>

</body>

</html>

തിടനാട് ഗ്രാമ പഞ്ചായത്ത്

അംഗനവാടികള്‍

നിയമപരമായ മുന്നറിയിപ്പ്

പകർപ്പവകാശ നയം

തിടനാട്
ഗ്രാമ പഞ്ചായത്ത്