Buatkan website pengumuman nilai ASAJ Kelas VI SDN 03 SARADAN 2025/2026 dengan fitur lengkap:
## STRUKTUR HALAMAN UTAMA
1. **Header** dengan:
- Logo/ikon buku dan judul "Pengumuman Nilai ASAJ"
- Nama sekolah "Kelas VI - SDN 03 Saradan | 2025/2026"
- Tombol Admin merah di kanan atas
2. **Menu Navigasi** (3 tab):
- 📊 Nilai Mapel (default)
- 🏆 Leaderboard
- 📋 Nilai Lengkap
## VIEW 1: NILAI MAPEL - Grid 9 tombol mapel dengan warna unik masing-masing: 1. Bahasa Indonesia (biru) 2. Pancasila (biru muda) 3. IPAS (hijau) 4. Matematika (kuning) 5. Seni Budaya (ungu) 6. Bahasa Jawa (oranye) 7. PAIBP (pink) 8. Bahasa Inggris (merah) 9. PJOK (cyan)
- Ketika mapel diklik, tampilkan tabel dengan kolom:
- No - Nama Siswa - Nilai (dalam badge: hijau jika ≥70, merah jika <70)
- Tampilkan statistik:
- Total siswa yang sudah nilai - Rata-rata nilai sekelas (warna merah, font besar)
## VIEW 2: LEADERBOARD - Tampilkan peringkat siswa berdasarkan rata-rata semua mapel
- Kartu ranking dengan: - Medal (🥇🥈🥉 atau nomor)
- Nama siswa
- Jumlah mapel yang sudah dinilai
- Rata-rata score (besar dan bold)
- Animasi stagger saat load (ranking 1-3 punya animasi khusus)
## VIEW 3: NILAI LENGKAP
- Tabel lengkap dengan kolom:
- No
- Nama siswa [MASUKKAN NAMA SISWA DI SINI]
- 9 kolom mapel (nilai dalam badge)
- Kolom Rata-rata (dengan warna gradasi)
- Alternatif warna baris (putih dan biru muda)
## PANEL ADMIN Modal dengan sistem login: - Username: **teacherkeder** - Password: **saradan3**
Setelah login, tampilkan form input per mapel:
- Dropdown untuk pilih mapel
- Daftar lengkap 26 siswa dalam tabel/list
- Kolom input nilai untuk setiap siswa
- Tombol "Simpan Mapel" untuk menyimpan sekaligus
- Pesan konfirmasi: "✅ X nilai berhasil disimpan!"
- Tombol Keluar ##
DATA & PENYIMPANAN - Gunakan **Canva Sheet (Data SDK)** untuk menyimpan semua data
- Schema: nama, no_urut, b_indo, pancasila, ipas, matematika, seni_budaya, b_jawa, paibp, b_inggris, pjok
- Pre-load 26 siswa awal dengan data B. Indonesia dan Pancasila
- Data tersimpan otomatis
## STYLING & DESAIN
- **Warna utama**: Putih, Biru (#1d4ed8), Merah (#dc2626)
- **Background**: Gradient biru-putih-merah lembut
- **Header**: Gradient biru-merah dengan shadow
- **Font**: Plus Jakarta Sans (professional & modern)
- **Animasi**: - Fade-in saat page load - Slide-in untuk leaderboard - Pop-in untuk ranking cards - Hover effects untuk tombol & tabel
## FOOTER Guru Kelas VI Edo Trie Hadi Saputra, S.Pd © 2025 SDN 03 Saradan
## RESPONSIF
- Mobile-first design
- Optimal untuk desktop 16:9
- Tabel scrollable di mobile
- Tombol mapel dalam grid responsive
## FITUR TAMBAHAN
- Edit panel untuk ubah judul website & nama sekolah
- Loading state saat submit form
- Pesan error/success inline (bukan alert())
- Sortable data berdasarkan peringkat
