ilham
/
sekolah_adiwiyata
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

main
Ilham Wara Nugroho 2026-02-02 13:34:35 +07:00
parent 3cdd94800b
commit 13ee09a322
1 changed files with 188 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

233
resources/views/index.blade.php
View File

@ -35,8 +35,8 @@
<p class="text-xs font-medium text-emerald-300 uppercase">Predikat Mandiri</p> <p class="text-xs font-medium text-emerald-300 uppercase">Predikat Mandiri</p>
</div> </div>
<div class="text-white"> <div class="text-white">
<p class="text-3xl font-bold">31+</p> <p class="text-3xl font-bold">5</p>
<p class="text-xs font-medium text-emerald-300 uppercase">Provinsi Terhubung</p> <p class="text-xs font-medium text-emerald-300 uppercase">Wilayah Terhubung</p>
</div> </div>
</div> </div>
</div> </div>
@ -124,7 +124,7 @@
<span class="px-3 py-1 rounded-full bg-emerald-500 text-[10px] font-bold uppercase mb-6 inline-block">Regional</span> <span class="px-3 py-1 rounded-full bg-emerald-500 text-[10px] font-bold uppercase mb-6 inline-block">Regional</span>
<h4 class="text-2xl font-bold mb-4">Adiwiyata Kota</h4> <h4 class="text-2xl font-bold mb-4">Adiwiyata Kota</h4>
<p class="text-sm text-slate-400 leading-relaxed mb-6">Penerapan awal Gerakan PBLHS di tingkat wilayah administratif (Jakarta Pusat, Barat, Timur, Selatan, Utara, &amp; Kepulauan Seribu).</p> <p class="text-sm text-slate-400 leading-relaxed mb-6">Penerapan awal Gerakan PBLHS di tingkat wilayah administratif (Jakarta Pusat, Barat, Timur, Selatan, Utara, &amp; Kepulauan Seribu).</p>
<div class="pt-6 border-t border-white/10 text-xs font-semibold text-emerald-400">Target Skor: ≥ 80%</div> <div class="pt-6 border-t border-white/10 text-xs font-semibold text-emerald-400">Target Skor: ≥ 70%</div>
</div> </div>
<!-- Stage 2 --> <!-- Stage 2 -->
@ -156,56 +156,51 @@
</div> </div>
</div> </div>
</section> </section>
<section id="peta" class="py-24 bg-slate-50"> <section class="py-20 bg-slate-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center"> <div class="grid lg:grid-cols-3 gap-12 items-center">
<div> <div class="lg:col-span-1">
<h2 class="text-sm font-bold text-emerald-600 uppercase tracking-widest mb-4">DISTRIBUSI DATA</h2> <h3 class="text-3xl font-extrabold text-slate-900 mb-6">Sebaran Sekolah Adiwiyata</h3>
<h3 class="text-4xl font-extrabold text-slate-900 mb-8 leading-tight">Persebaran Sekolah <br> Adiwiyata di Jakarta</h3> <p class="text-slate-600 mb-8">Peta interaktif distribusi sekolah peraih penghargaan Adiwiyata di 5 Wilayah Kota Administrasi dan 1 Kabupaten Administrasi DKI Jakarta.</p>
<div class="space-y-4">
<div class="space-y-6"> <div class="flex justify-between items-center p-4 bg-white rounded-2xl shadow-sm">
<div class="bg-white p-6 rounded-2xl shadow-sm stats-card" style="opacity: 0;"> <span class="text-sm font-semibold text-slate-700">Jakarta Timur</span>
<div class="flex justify-between items-center mb-2"> <span class="bg-emerald-100 text-emerald-700 px-3 py-1 rounded-full text-xs font-bold">24 Sekolah</span>
<span class="font-bold text-slate-700">Jakarta Timur</span>
<span class="text-emerald-600 font-bold">210 Sekolah</span>
</div>
<div class="w-full bg-slate-100 h-2 rounded-full overflow-hidden">
<div class="bg-emerald-500 h-full" style="width: 85%"></div>
</div>
</div> </div>
<div class="bg-white p-6 rounded-2xl shadow-sm stats-card" style="opacity: 0;"> <div class="flex justify-between items-center p-4 bg-white rounded-2xl shadow-sm">
<div class="flex justify-between items-center mb-2"> <span class="text-sm font-semibold text-slate-700">Jakarta Selatan</span>
<span class="font-bold 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="text-emerald-600 font-bold">185 Sekolah</span>
</div>
<div class="w-full bg-slate-100 h-2 rounded-full overflow-hidden">
<div class="bg-emerald-500 h-full" style="width: 75%"></div>
</div>
</div> </div>
<div class="bg-white p-6 rounded-2xl shadow-sm stats-card" style="opacity: 0;"> <div class="flex justify-between items-center p-4 bg-white rounded-2xl shadow-sm">
<div class="flex justify-between items-center mb-2"> <span class="text-sm font-semibold text-slate-700">Jakarta Pusat</span>
<span class="font-bold 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="text-emerald-600 font-bold">142 Sekolah</span>
</div>
<div class="w-full bg-slate-100 h-2 rounded-full overflow-hidden">
<div class="bg-emerald-500 h-full" style="width: 60%"></div>
</div>
</div> </div>
<div class="bg-white p-6 rounded-2xl shadow-sm stats-card border-l-emerald-300 opacity-60" style="opacity: 0;"> <div class="flex justify-between items-center p-4 bg-white rounded-2xl shadow-sm">
<p class="text-xs text-slate-400 italic">*Data update per Januari 2026</p> <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>
</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>
</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>
</div> </div>
</div> </div>
</div> </div>
<div class="relative"> <div class="lg:col-span-2">
<div class="absolute -inset-4 bg-emerald-200/50 rounded-[40px] blur-2xl"></div> <div class="relative">
<div class="relative bg-white p-4 rounded-[32px] shadow-2xl overflow-hidden"> <div class="absolute -inset-4 bg-emerald-200/50 rounded-[40px] blur-2xl"></div>
<img src="{{asset('img1.png')}}" alt="Visual Achievement" class="w-full rounded-2xl" style=""> <div class="relative bg-white p-4 rounded-[32px] shadow-2xl overflow-hidden">
<div class="absolute bottom-10 left-10 p-6 glass rounded-2xl max-w-xs border-emerald-100"> <img src="{{asset('img1.png')}}" alt="Visual Achievement" class="w-full rounded-2xl" style="">
<div class="flex items-center gap-2 mb-2"> <div class="absolute bottom-10 left-10 p-6 glass rounded-2xl max-w-xs border-emerald-100">
<span class="material-symbols-outlined text-emerald-600">verified</span> <div class="flex items-center gap-2 mb-2">
<span class="text-xs font-bold text-emerald-800">PRESTASI TERBARU</span> <span class="material-symbols-outlined text-emerald-600">verified</span>
<span class="text-xs font-bold text-emerald-800">PRESTASI TERBARU</span>
</div>
<p class="text-sm font-semibold text-slate-700">SMAN 42 Jakarta terpilih sebagai sekolah terinspiratif PBLHS 2025.</p>
</div> </div>
<p class="text-sm font-semibold text-slate-700">SMAN 42 Jakarta terpilih sebagai sekolah terinspiratif PBLHS 2025.</p>
</div> </div>
</div> </div>
</div> </div>
@ -279,4 +274,152 @@
</div> </div>
</div> </div>
</section> </section>
@endsection
@section('js')
<script>
const schoolsData = [
{ name: "SMAN 62 JAKARTA", city: "Jakarta Timur", year: 2025, level: "Nasional", score: 89.9 },
{ name: "SMAN 9 JAKARTA", city: "Jakarta Timur", year: 2025, level: "Provinsi", score: 84.5 },
{ name: "SDS Merpati", city: "Jakarta Pusat", year: 2026, level: "Kota", score: 78.2 },
{ name: "MAN 4 JAKARTA", city: "Jakarta Selatan", year: 2025, level: "Nasional", score: 91.2 },
{ name: "SDN Rambutan 03 Pagi", city: "Jakarta Timur", year: 2024, level: "Mandiri", score: 95.0 },
{ name: "SMPN 23 JAKARTA", city: "Jakarta Utara", year: 2023, level: "Provinsi", score: 82.1 },
{ name: "SMAN 42 JAKARTA", city: "Jakarta Timur", year: 2025, level: "Nasional", score: 88.4 },
{ name: "SDN 01 Grogol", city: "Jakarta Barat", year: 2025, level: "Kota", score: 75.6 },
{ name: "SMAN 1 JAKARTA", city: "Jakarta Pusat", year: 2024, level: "Provinsi", score: 83.9 }
];
function getLevelColor(level) {
switch(level) {
case 'Mandiri': return 'bg-indigo-100 text-indigo-700';
case 'Nasional': return 'bg-amber-100 text-amber-700';
case 'Provinsi': return 'bg-blue-100 text-blue-700';
default: return 'bg-emerald-100 text-emerald-700';
}
}
function renderSchools(filter = { name: '', city: 'All', level: 'All' }) {
const grid = document.getElementById('schoolGrid');
grid.innerHTML = '';
const filtered = schoolsData.filter(s => {
const nameMatch = s.name.toLowerCase().includes(filter.name.toLowerCase());
const cityMatch = filter.city === 'All' || s.city === filter.city;
const levelMatch = filter.level === 'All' || s.level === filter.level;
return nameMatch && cityMatch && levelMatch;
});
if (filtered.length === 0) {
grid.innerHTML = `<div class="col-span-full py-20 text-center text-slate-400">Tidak ada sekolah yang ditemukan.</div>`;
return;
}
filtered.forEach(s => {
const card = document.createElement('div');
card.className = 'school-card bg-white p-6 rounded-3xl border border-slate-100 shadow-sm hover:shadow-xl';
card.innerHTML = `
<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 ${getLevelColor(s.level)}">
${s.level}
</span>
<span class="text-slate-300 material-symbols-outlined">more_vert</span>
</div>
<h4 class="font-bold text-lg text-slate-800 mb-1">${s.name}</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> ${s.city}
</p>
<div class="pt-4 border-t border-slate-50">
<div class="flex justify-between text-xs font-bold mb-2">
<span class="text-slate-400">Skor Terakhir</span>
<span class="text-emerald-600">${s.score}%</span>
</div>
<div class="w-full bg-slate-100 h-2 rounded-full overflow-hidden">
<div class="bg-emerald-500 h-full adiwiyata-level-bar" style="width: ${s.score}%"></div>
</div>
<div class="mt-4 flex justify-between items-center">
<span class="text-[10px] text-slate-400 font-medium">Update: Des 2025</span>
<button class="text-xs font-bold text-emerald-600 hover:underline">Lihat Detail</button>
</div>
</div>
`;
grid.appendChild(card);
});
}
async function initMap() {
const { Map, InfoWindow } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
const map = new Map(document.getElementById("map"), {
center: { lat: -6.2146, lng: 106.8451 }, // Jakarta Center
zoom: 11,
mapId: 'DEMO_MAP_ID',
gestureHandling: 'greedy',
clickableIcons: false,
disableDefaultUI: true
});
// Sample Markers for distribution
const locations = [
{ name: "SMAN 62 Jakarta", pos: { lat: -6.3243, lng: 106.8654 }, level: "Nasional" },
{ name: "MAN 4 Jakarta", pos: { lat: -6.2862, lng: 106.7725 }, level: "Nasional" },
{ name: "SDS Merpati", pos: { lat: -6.1823, lng: 106.8322 }, level: "Kota" },
{ name: "SDN Rambutan 03", pos: { lat: -6.3012, lng: 106.8821 }, level: "Mandiri" }
];
locations.forEach(loc => {
const glyph = document.createElement("span");
glyph.className = "material-symbols-outlined";
glyph.textContent = 'school';
glyph.style.color = 'white';
const pin = new PinElement({
glyph: glyph,
scale: 1.5,
background: loc.level === 'Mandiri' ? "#4f46e5" : "#10b981",
borderColor: "#ffffff",
});
const marker = new AdvancedMarkerElement({
map,
position: loc.pos,
content: pin.element
});
const header = document.createElement('span');
header.className = 'font-bold text-slate-800 p-2';
header.textContent = loc.name;
const content = document.createElement('div');
content.className = 'p-3 text-xs leading-relaxed';
content.innerHTML = `<p>Status: <b>${loc.level}</b></p><p>Lokasi: DKI Jakarta</p>`;
const infoWindow = new InfoWindow({ headerContent: header, content: content });
marker.addListener('click', () => infoWindow.open(map, marker));
});
}
document.addEventListener('DOMContentLoaded', () => {
renderSchools();
initMap();
const searchInput = document.getElementById('schoolSearch');
const cityFilter = document.getElementById('filterCity');
const levelFilter = document.getElementById('filterLevel');
const handleFilterChange = () => {
renderSchools({
name: searchInput.value,
city: cityFilter.value,
level: levelFilter.value
});
};
searchInput.addEventListener('input', handleFilterChange);
cityFilter.addEventListener('change', handleFilterChange);
levelFilter.addEventListener('change', handleFilterChange);
});
</script>
@endsection @endsection