update
Ilham Wara Nugroho
parent
13ee09a322
commit
769a4b3771
File diff suppressed because it is too large
Load Diff
|
|
@ -16,20 +16,17 @@
|
|||
Mewujudkan Sekolah <span class="text-emerald-600">Ramah Lingkungan</span> di Jakarta.
|
||||
</h2>
|
||||
<p class="text-slate-600 text-lg mb-8 leading-relaxed">
|
||||
Akses portal digital resmi penilaian Adiwiyata. Bergabunglah dengan 979+ sekolah yang berkomitmen menjaga kelestarian lingkungan hidup dan edukasi iklim.
|
||||
<a href="https://en.antaranews.com/news/396088/minister-asks-sekolah-rakyat-schools-to-adopt-climate-aware-education" target="_blank" class="text-emerald-600 inline-block align-middle ml-1">
|
||||
<span class="material-symbols-outlined text-sm">link</span>
|
||||
</a>
|
||||
Akses portal digital resmi penilaian Adiwiyata. Bergabunglah dengan 1385+ sekolah yang berkomitmen menjaga kelestarian lingkungan hidup dan edukasi iklim.
|
||||
</p>
|
||||
|
||||
<!-- Achievement Stats -->
|
||||
<div class="grid grid-cols-3 gap-4 mb-10">
|
||||
<div class="p-4 bg-white rounded-2xl shadow-sm border border-slate-100">
|
||||
<p class="text-2xl font-bold text-emerald-600">46</p>
|
||||
<p class="text-2xl font-bold text-emerald-600">481</p>
|
||||
<p class="text-xs text-slate-500 font-semibold uppercase tracking-wider">Award 2025</p>
|
||||
</div>
|
||||
<div class="p-4 bg-white rounded-2xl shadow-sm border border-slate-100">
|
||||
<p class="text-2xl font-bold text-emerald-600">28K+</p>
|
||||
<p class="text-2xl font-bold text-emerald-600">89</p>
|
||||
<p class="text-xs text-slate-500 font-semibold uppercase tracking-wider">Nasional</p>
|
||||
</div>
|
||||
<div class="p-4 bg-white rounded-2xl shadow-sm border border-slate-100">
|
||||
|
|
|
|||
|
|
@ -27,15 +27,15 @@
|
|||
<p class="text-xs font-medium text-emerald-300 uppercase">Sekolah Terdaftar</p>
|
||||
</div>
|
||||
<div class="text-white border-r border-white/10">
|
||||
<p class="text-3xl font-bold">789</p>
|
||||
<p class="text-3xl font-bold">1385</p>
|
||||
<p class="text-xs font-medium text-emerald-300 uppercase">Sekolah Adiwiyata</p>
|
||||
</div>
|
||||
<div class="text-white border-r border-white/10">
|
||||
<p class="text-3xl font-bold">258</p>
|
||||
<p class="text-3xl font-bold">89</p>
|
||||
<p class="text-xs font-medium text-emerald-300 uppercase">Predikat Mandiri</p>
|
||||
</div>
|
||||
<div class="text-white">
|
||||
<p class="text-3xl font-bold">5</p>
|
||||
<p class="text-3xl font-bold">6</p>
|
||||
<p class="text-xs font-medium text-emerald-300 uppercase">Wilayah Terhubung</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -165,27 +165,27 @@
|
|||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-center p-4 bg-white rounded-2xl shadow-sm">
|
||||
<span class="text-sm font-semibold text-slate-700">Jakarta Timur</span>
|
||||
<span class="bg-emerald-100 text-emerald-700 px-3 py-1 rounded-full text-xs font-bold">24 Sekolah</span>
|
||||
<span class="bg-emerald-100 text-emerald-700 px-3 py-1 rounded-full text-xs font-bold">328 Sekolah</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center p-4 bg-white rounded-2xl shadow-sm">
|
||||
<span class="text-sm font-semibold text-slate-700">Jakarta Selatan</span>
|
||||
<span class="bg-emerald-100 text-emerald-700 px-3 py-1 rounded-full text-xs font-bold">18 Sekolah</span>
|
||||
<span class="bg-emerald-100 text-emerald-700 px-3 py-1 rounded-full text-xs font-bold">224 Sekolah</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center p-4 bg-white rounded-2xl shadow-sm">
|
||||
<span class="text-sm font-semibold text-slate-700">Jakarta Pusat</span>
|
||||
<span class="bg-emerald-100 text-emerald-700 px-3 py-1 rounded-full text-xs font-bold">18 Sekolah</span>
|
||||
<span class="bg-emerald-100 text-emerald-700 px-3 py-1 rounded-full text-xs font-bold">324 Sekolah</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center p-4 bg-white rounded-2xl shadow-sm">
|
||||
<span class="text-sm font-semibold text-slate-700">Jakarta Barat</span>
|
||||
<span class="bg-emerald-100 text-emerald-700 px-3 py-1 rounded-full text-xs font-bold">18 Sekolah</span>
|
||||
<span class="bg-emerald-100 text-emerald-700 px-3 py-1 rounded-full text-xs font-bold">327 Sekolah</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center p-4 bg-white rounded-2xl shadow-sm">
|
||||
<span class="text-sm font-semibold text-slate-700">Jakarta Utara</span>
|
||||
<span class="bg-emerald-100 text-emerald-700 px-3 py-1 rounded-full text-xs font-bold">18 Sekolah</span>
|
||||
<span class="bg-emerald-100 text-emerald-700 px-3 py-1 rounded-full text-xs font-bold">172 Sekolah</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center p-4 bg-white rounded-2xl shadow-sm">
|
||||
<span class="text-sm font-semibold text-slate-700">Lainnya</span>
|
||||
<span class="bg-slate-100 text-slate-600 px-3 py-1 rounded-full text-xs font-bold">31 Sekolah</span>
|
||||
<span class="text-sm font-semibold text-slate-700">Kepulauan Seribu</span>
|
||||
<span class="bg-emerald-100 text-emerald-700 px-3 py-1 rounded-full text-xs font-bold">10 Sekolah</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@
|
|||
<option value="Jakarta Selatan">Jakarta Selatan</option>
|
||||
<option value="Jakarta Utara">Jakarta Utara</option>
|
||||
<option value="Jakarta Barat">Jakarta Barat</option>
|
||||
<option value="Kepulauan Seribu">Kepulauan Seribu</option>
|
||||
</select>
|
||||
<select id="filterLevel" class="flex-1 lg:w-48 px-4 py-3.5 bg-white border border-slate-200 rounded-2xl outline-none">
|
||||
<option value="All">Semua Jenjang</option>
|
||||
|
|
@ -36,112 +37,131 @@
|
|||
</div>
|
||||
|
||||
<!-- School Grid -->
|
||||
<div id="schoolGrid" class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"><div class="school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="inline-block px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-amber-100 text-amber-700">
|
||||
Nasional
|
||||
</span>
|
||||
</div>
|
||||
<h4 class="font-bold text-lg text-slate-800 mb-1">SMAN 62 JAKARTA</h4>
|
||||
<p class="text-sm text-slate-500 flex items-center gap-1 mb-4">
|
||||
<span class="material-symbols-outlined text-sm">location_on</span> Jakarta Timur
|
||||
</p>
|
||||
</div>
|
||||
<div class="school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="inline-block px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-blue-100 text-blue-700">
|
||||
Provinsi
|
||||
</span>
|
||||
</div>
|
||||
<h4 class="font-bold text-lg text-slate-800 mb-1">SMAN 9 JAKARTA</h4>
|
||||
<p class="text-sm text-slate-500 flex items-center gap-1 mb-4">
|
||||
<span class="material-symbols-outlined text-sm">location_on</span> Jakarta Timur
|
||||
</p>
|
||||
</div>
|
||||
<div class="school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="inline-block px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-emerald-100 text-emerald-700">
|
||||
Kota
|
||||
</span>
|
||||
</div>
|
||||
<h4 class="font-bold text-lg text-slate-800 mb-1">SDS Merpati</h4>
|
||||
<p class="text-sm text-slate-500 flex items-center gap-1 mb-4">
|
||||
<span class="material-symbols-outlined text-sm">location_on</span> Jakarta Pusat
|
||||
</p>
|
||||
</div>
|
||||
<div class="school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="inline-block px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-amber-100 text-amber-700">
|
||||
Nasional
|
||||
</span>
|
||||
</div>
|
||||
<h4 class="font-bold text-lg text-slate-800 mb-1">MAN 4 JAKARTA</h4>
|
||||
<p class="text-sm text-slate-500 flex items-center gap-1 mb-4">
|
||||
<span class="material-symbols-outlined text-sm">location_on</span> Jakarta Selatan
|
||||
</p>
|
||||
</div>
|
||||
<div class="school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="inline-block px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-indigo-100 text-indigo-700">
|
||||
Mandiri
|
||||
</span>
|
||||
</div>
|
||||
<h4 class="font-bold text-lg text-slate-800 mb-1">SDN Rambutan 03 Pagi</h4>
|
||||
<p class="text-sm text-slate-500 flex items-center gap-1 mb-4">
|
||||
<span class="material-symbols-outlined text-sm">location_on</span> Jakarta Timur
|
||||
</p>
|
||||
</div>
|
||||
<div class="school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="inline-block px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-blue-100 text-blue-700">
|
||||
Provinsi
|
||||
</span>
|
||||
</div>
|
||||
<h4 class="font-bold text-lg text-slate-800 mb-1">SMPN 23 JAKARTA</h4>
|
||||
<p class="text-sm text-slate-500 flex items-center gap-1 mb-4">
|
||||
<span class="material-symbols-outlined text-sm">location_on</span> Jakarta Utara
|
||||
</p>
|
||||
</div>
|
||||
<div class="school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="inline-block px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-amber-100 text-amber-700">
|
||||
Nasional
|
||||
</span>
|
||||
</div>
|
||||
<h4 class="font-bold text-lg text-slate-800 mb-1">SMAN 42 JAKARTA</h4>
|
||||
<p class="text-sm text-slate-500 flex items-center gap-1 mb-4">
|
||||
<span class="material-symbols-outlined text-sm">location_on</span> Jakarta Timur
|
||||
</p>
|
||||
</div>
|
||||
<div class="school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="inline-block px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-emerald-100 text-emerald-700">
|
||||
Kota
|
||||
</span>
|
||||
</div>
|
||||
<h4 class="font-bold text-lg text-slate-800 mb-1">SDN 01 Grogol</h4>
|
||||
<p class="text-sm text-slate-500 flex items-center gap-1 mb-4">
|
||||
<span class="material-symbols-outlined text-sm">location_on</span> Jakarta Barat
|
||||
</p>
|
||||
</div>
|
||||
<div class="school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="inline-block px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest bg-blue-100 text-blue-700">
|
||||
Provinsi
|
||||
</span>
|
||||
</div>
|
||||
<h4 class="font-bold text-lg text-slate-800 mb-1">SMAN 1 JAKARTA</h4>
|
||||
<p class="text-sm text-slate-500 flex items-center gap-1 mb-4">
|
||||
<span class="material-symbols-outlined text-sm">location_on</span> Jakarta Pusat
|
||||
</p>
|
||||
</div>
|
||||
<div id="schoolGrid" class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
</div>
|
||||
|
||||
<div class="mt-12 text-center">
|
||||
<button class="px-8 py-3 bg-slate-100 text-slate-600 rounded-full font-bold hover:bg-slate-200 transition-colors">Tampilkan Lebih Banyak</button>
|
||||
<button id="btnLoadMore" class="px-8 py-3 bg-slate-100 text-slate-600 rounded-full font-bold hover:bg-slate-200 transition-colors">Tampilkan Lebih Banyak</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@endsection
|
||||
@section('js')
|
||||
<script src="{{asset('assets/js/vendors.bundle.js')}}"></script>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
|
||||
let allData = [];
|
||||
let filteredData = [];
|
||||
let visibleCount = 6;
|
||||
let currentIndex = 0;
|
||||
const perPage = 6;
|
||||
|
||||
// Load JSON
|
||||
$.getJSON('{{asset("dataadiwiyata.json")}}', function (data) {
|
||||
allData = data;
|
||||
filteredData = allData;
|
||||
renderData();
|
||||
});
|
||||
|
||||
function renderData(reset = true) {
|
||||
|
||||
if (reset) {
|
||||
$('#schoolGrid').html('');
|
||||
currentIndex = 0;
|
||||
}
|
||||
|
||||
let nextData = filteredData.slice(
|
||||
currentIndex,
|
||||
currentIndex + perPage
|
||||
);
|
||||
|
||||
$.each(nextData, function (i, item) {
|
||||
$('#schoolGrid').append(generateCard(item));
|
||||
});
|
||||
|
||||
currentIndex += perPage;
|
||||
|
||||
// hide tombol jika data habis
|
||||
if (currentIndex >= filteredData.length) {
|
||||
$('#btnLoadMore').hide();
|
||||
} else {
|
||||
$('#btnLoadMore').show();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function generateCard(item) {
|
||||
console.log(item);
|
||||
let badgeColor = {
|
||||
Nasional: 'bg-amber-100 text-amber-700',
|
||||
Provinsi: 'bg-blue-100 text-blue-700',
|
||||
Kota: 'bg-emerald-100 text-emerald-700',
|
||||
Mandiri: 'bg-indigo-100 text-indigo-700'
|
||||
};
|
||||
|
||||
let percent = item.skor ?? 0;
|
||||
|
||||
return `
|
||||
<div class="school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="inline-block px-3 py-1 rounded-full text-[10px] font-black uppercase tracking-widest ${badgeColor[item.penghargaan] || 'bg-slate-100 text-slate-600'}">
|
||||
${item.penghargaan}
|
||||
</span>
|
||||
<span class="text-slate-300 material-symbols-outlined">more_vert</span>
|
||||
</div>
|
||||
|
||||
<h4 class="font-bold text-lg text-slate-800 mb-1">${item.sekolah}</h4>
|
||||
<p class="text-sm text-slate-500 flex items-center gap-1 mb-4">
|
||||
<span class="material-symbols-outlined text-sm">location_on</span>
|
||||
${item.wilayah} - ${item.tahun}
|
||||
</p>
|
||||
|
||||
<div class="pt-4 border-t border-slate-50 hidden">
|
||||
<div class="flex justify-between text-xs font-bold mb-2">
|
||||
<span class="text-slate-400">Skor Terakhir</span>
|
||||
<span class="text-emerald-600">${percent}%</span>
|
||||
</div>
|
||||
<div class="w-full bg-slate-100 h-2 rounded-full overflow-hidden">
|
||||
<div class="bg-emerald-500 h-full" style="width:${percent}%"></div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex justify-between items-center">
|
||||
<span class="text-[10px] text-slate-400 font-medium">
|
||||
Update: ${item.update ?? '-'}
|
||||
</span>
|
||||
<button class="text-xs font-bold text-emerald-600 hover:underline">
|
||||
Lihat Detail
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function applyFilter() {
|
||||
let keyword = $('#schoolSearch').val().toLowerCase();
|
||||
let city = $('#filterCity').val();
|
||||
let level = $('#filterLevel').val();
|
||||
|
||||
filteredData = allData.filter(item => {
|
||||
let matchName = item.sekolah.toLowerCase().includes(keyword);
|
||||
let matchCity = city === 'All' || item.wilayah === city;
|
||||
let matchLevel = level === 'All' || item.penghargaan === level;
|
||||
|
||||
return matchName && matchCity && matchLevel;
|
||||
});
|
||||
|
||||
renderData(true);
|
||||
}
|
||||
|
||||
// Event listeners
|
||||
$('#schoolSearch').on('keyup', applyFilter);
|
||||
$('#filterCity, #filterLevel').on('change', applyFilter);
|
||||
|
||||
$('#btnLoadMore').on('click', function () {
|
||||
visibleCount += perPage;
|
||||
renderData(false);
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
@endsection
|
||||
Loading…
Reference in New Issue