SPPG Batam - Website Profil MBG

Website statis untuk profil SPPG Batam dalam mendukung Program Makan Bergizi Gratis (MBG). Tampilan dibuat responsif, interaktif, dan cocok sebagai halaman informasi publik.

• https://warrenku.github.io/sppg/

Fitur

• Navbar responsif dengan hamburger menu.
• Mode gelap dan terang dengan efek liquid glass.
• Welcome loading screen.
• Animasi typing, reveal on scroll, highlight blok teks, slot/wheel spinning, dan smooth QnA.
• Section pengenalan SPPG dan Program MBG.
• Informasi pelaksanaan MBG dan anggaran nasional.
• Kartu layanan dengan gambar.
• Form kritik dan saran.
• Form lowongan pekerjaan.
• QnA interaktif.
• Kontak Batam.
• Footer sumber resmi dan media sosial.

Struktur File

sppg/
├── index.html
├── styles.css
├── script.js
├── sppg.md
└── README.md

Cara Menjalankan

Buka langsung file index.html di browser, atau jalankan server lokal:

python -m http.server 4173

Lalu buka:

http://127.0.0.1:4173/index.html

Data dan Sumber

Beberapa informasi utama yang digunakan:

• MBG mulai dilaksanakan bertahap pada 6 Januari 2025.
• Anggaran MBG dalam APBN 2025 sebesar Rp71 triliun.
• Acuan gizi mengikuti standar resmi seperti AKG dan prinsip gizi seimbang.

Sumber resmi:

• Badan Gizi Nasional
• Media Keuangan Kemenkeu

Aset

Logo dan favicon menggunakan aset dari:

https://raw.githubusercontent.com/WarrenKu/SPPG/refs/heads/main/file_0000000022b87208a618bb45371f4140.png

Beberapa gambar lain diambil dari URL publik yang dipasang langsung di index.html.

Catatan Pengembangan

Form kritik/saran dan form lowongan kerja masih berjalan di sisi frontend. Saat submit, halaman hanya menampilkan status visual dan belum menyimpan data ke database.

Untuk produksi, tambahkan:

• Backend untuk menyimpan aspirasi dan lamaran.
• Validasi server-side.
• Link media sosial resmi.
• Alamat kantor SPPG Batam yang benar-benar final.

Kredit

Created by Warrenku
Powered by ChatGPT