update
Ilham Wara Nugroho
parent
3cdd94800b
commit
13ee09a322
|
|
@ -35,8 +35,8 @@
|
|||
<p class="text-xs font-medium text-emerald-300 uppercase">Predikat Mandiri</p>
|
||||
</div>
|
||||
<div class="text-white">
|
||||
<p class="text-3xl font-bold">31+</p>
|
||||
<p class="text-xs font-medium text-emerald-300 uppercase">Provinsi Terhubung</p>
|
||||
<p class="text-3xl font-bold">5</p>
|
||||
<p class="text-xs font-medium text-emerald-300 uppercase">Wilayah Terhubung</p>
|
||||
</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>
|
||||
<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, & 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>
|
||||
|
||||
<!-- Stage 2 -->
|
||||
|
|
@ -156,56 +156,51 @@
|
|||
</div>
|
||||
</div>
|
||||
</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="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||
<div>
|
||||
<h2 class="text-sm font-bold text-emerald-600 uppercase tracking-widest mb-4">DISTRIBUSI DATA</h2>
|
||||
<h3 class="text-4xl font-extrabold text-slate-900 mb-8 leading-tight">Persebaran Sekolah <br> Adiwiyata di Jakarta</h3>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="bg-white p-6 rounded-2xl shadow-sm stats-card" style="opacity: 0;">
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<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 class="grid lg:grid-cols-3 gap-12 items-center">
|
||||
<div class="lg:col-span-1">
|
||||
<h3 class="text-3xl font-extrabold text-slate-900 mb-6">Sebaran Sekolah Adiwiyata</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="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>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded-2xl shadow-sm stats-card" style="opacity: 0;">
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<span class="font-bold text-slate-700">Jakarta Selatan</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 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>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded-2xl shadow-sm stats-card" style="opacity: 0;">
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<span class="font-bold text-slate-700">Jakarta Barat</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 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>
|
||||
</div>
|
||||
<div class="bg-white p-6 rounded-2xl shadow-sm stats-card border-l-emerald-300 opacity-60" style="opacity: 0;">
|
||||
<p class="text-xs text-slate-400 italic">*Data update per Januari 2026</p>
|
||||
<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>
|
||||
</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 class="relative">
|
||||
<div class="absolute -inset-4 bg-emerald-200/50 rounded-[40px] blur-2xl"></div>
|
||||
<div class="relative bg-white p-4 rounded-[32px] shadow-2xl overflow-hidden">
|
||||
<img src="{{asset('img1.png')}}" alt="Visual Achievement" class="w-full rounded-2xl" style="">
|
||||
<div class="absolute bottom-10 left-10 p-6 glass rounded-2xl max-w-xs border-emerald-100">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="material-symbols-outlined text-emerald-600">verified</span>
|
||||
<span class="text-xs font-bold text-emerald-800">PRESTASI TERBARU</span>
|
||||
<div class="lg:col-span-2">
|
||||
<div class="relative">
|
||||
<div class="absolute -inset-4 bg-emerald-200/50 rounded-[40px] blur-2xl"></div>
|
||||
<div class="relative bg-white p-4 rounded-[32px] shadow-2xl overflow-hidden">
|
||||
<img src="{{asset('img1.png')}}" alt="Visual Achievement" class="w-full rounded-2xl" style="">
|
||||
<div class="absolute bottom-10 left-10 p-6 glass rounded-2xl max-w-xs border-emerald-100">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<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>
|
||||
<p class="text-sm font-semibold text-slate-700">SMAN 42 Jakarta terpilih sebagai sekolah terinspiratif PBLHS 2025.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -279,4 +274,152 @@
|
|||
</div>
|
||||
</div>
|
||||
</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
|
||||
Loading…
Reference in New Issue