📋 PROMPT DETAIL: Website Hasil Nilai ASAT / ASAS

Perhatikan tulisan yang berwarna merah, tulisan tersebut dapat disesuaikan dengan kondisi masing-masing sekolah. Untuk penyesuaian lainnya bisa dibuat sesuai keinginan masing-masing. Hasil dari prompt ini tentu tidak akan sama persis, namun sebagian besar sama. Jadi, jika ada yang tidak sesuai bisa disesuaikan sendiri, ya.

CONTOH WEBSITE BISA KLIK DI SINI

Gunakan username: teacherkeder | password: saradan3 untuk mengakses fitur admin

👇👇👇

Buat website hasil nilai ASAT (Asesmen Sumatif Akhir Tahun) kelas VI SDN 03 Saradan tahun pelajaran 2025/2026 dengan spesifikasi berikut:

📊 DATA & TABEL NILAI

Data Siswa (jumlah siswa):

• MASUKKAN NAMA SISWA DENGAN BEBERAPA NILAI YANG SUDAH ADA (Contoh: matematika)

Mata Pelajaran (9 Mapel):

1. PAIBP
2. B. Indonesia
3. IPAS
4. Pendidikan Pancasila
5. Matematika
6. Seni Budaya
7. PJOK (Pendidikan Jasmani, Olahraga & Kesehatan)
8. B. Inggris
9. B. Jawa

Tabel Nilai:

• Kolom No, Nama Siswa, 9 Mapel, Rata-rata per Siswa
• Baris: 25 siswa + 1 baris rata-rata per mapel
• Sticky: No. dan Nama Siswa tetap terlihat saat scroll horizontal

🎨 SISTEM WARNA NILAI

Gunakan warna untuk setiap range nilai:

• Merah (bg-red-100, text-red-700): Nilai < 70
• Biru (bg-blue-100, text-blue-700): Nilai 70-79
• Ungu (bg-purple-100, text-purple-700): Nilai 80-89
• Hijau (bg-green-100, text-green-700): Nilai 90-100
• Gembok 🔒: Untuk mapel yang belum ada nilainya (nilai null)

📈 FITUR UTAMA

1. Header

• Judul: "📚 HASIL NILAI ASAT" dengan gradient warna
• Sub-judul: "Kelas VI - SDN 03 Saradan"
• Tahun Pelajaran: "2025/2026"
• Style: Background putih semi-transparan dengan rounded corners

2. Tabel Nilai

• Responsive horizontal scroll
• Header tabel dengan gradient background (biru-ungu)
• Baris berganti warna (gray-50 dan white)
• Sticky columns untuk No. dan Nama Siswa
• Nilai ditampilkan dalam badge/pill dengan warna sesuai range
• Footer tabel menampilkan rata-rata per mapel dengan highlight kuning-oranye

3. Leaderboard - Peringkat Siswa

• Judul: "🏆 LEADERBOARD - PERINGKAT SISWA"
• Tampilan Normal (Public):
  • Tampilkan 10 besar dengan ranking jelas
  • Ranking 1-3 dengan medal: 🥇 🥈 🥉
  • Ranking 4-10 dengan angka dalam lingkaran abu-abu
  • Setiap kartu menampilkan: Medal/Ranking, Nama Siswa, Rata-rata Nilai
  • Styling: Kartu dengan background gradient, border, shadow
• Tampilan Terkunci (Ranking 11-25):
  • Tampilkan pesan "🔒 Peringkat 11-25 terkunci"
  • Tombol "Lihat Selengkapnya" untuk membuka

4. Footer

• Tampilkan: "Guru Kelas VI"
• Garis pemisah
• Nama Guru: "Uya Kuya, S.Pd"
• Style: Background putih semi-transparan, centered, border rounded

🔐 SISTEM AUTENTIKASI

Admin Login:

• Tombol "🛡️ Admin" di pojok kanan atas (fixed position)
• Background gradient purple-indigo
• Klik tombol → modal login
• Username: bebas tentukan sendiri
• Password: bebas tentukan sendiri
• Error message: "Username atau password salah!"

Unlock Leaderboard:

• Tombol "Lihat Selengkapnya" di section leaderboard
• Klik tombol → modal unlock (auth sama dengan admin)
• Username: bebas tentukan sendiri
• Password: bebas tentukan sendiri
• Jika berhasil → tampilkan ranking 11-25 penuh

⚙️ PANEL ADMIN

Akses Admin Panel:

• Setelah login admin, tampilkan panel dengan title "⚙️ Panel Admin - Input Nilai"
• Panel berukuran besar (modal fullscreen yang bisa di-scroll)

Fitur Admin Panel:

1. Dropdown Mapel Selector
   • Pilihan: PAIBP, B. Indonesia, IPAS, Pend. Pancasila, Matematika, Seni Budaya, PJOK, B. Inggris, B. Jawa
   • Default: PAIBP
   • Saat dipilih → render input fields untuk semua siswa
2. Input Fields Dinamis
   • Untuk setiap siswa: No., Nama Siswa, Input Number (0-100)
   • Format: Baris dengan layout flex, background gray-50, rounded
   • Input bisa kosong (untuk mapel yang belum ada nilai)
3. Tombol Simpan
   • Button "💾 Simpan Nilai" full-width
   • Background gradient: green-emerald
   • Saat diklik → save ke localStorage dan update tabel + leaderboard
   • Success message: "✅ Nilai berhasil disimpan!" (muncul 2 detik)
4. Tombol Tutup
   • Button "✕ Tutup" di kanan atas modal
   • Warna red dengan hover effect

🎨 DESIGN & STYLING

Background:

• Gradient cerah: linear-gradient(135deg, #fef9c3 0%, #bbf7d0 30%, #bfdbfe 60%, #e9d5ff 100%)
• Kombinasi: kuning → hijau muda → biru muda → ungu muda

Typography:

• Font: Nunito (weight: 400, 600, 700, 800, 900)
• Ukuran responsive (desktop-first, mobile-friendly)

Components Styling:

• Semua card/container: bg-white/90 backdrop-blur rounded-2xl shadow-xl
• Buttons: Gradient background, shadow, hover effect
• Modals: Background black/50 overlay, centered, max-width dengan padding

Responsive:

• Mobile: Single column, font size lebih kecil
• Tablet: 2 columns untuk beberapa section
• Desktop: Full layout dengan horizontal scroll di tabel

💾 PENYIMPANAN DATA

• Gunakan canva sheet untuk menyimpan nilai
• Key: nilai_asat

🎯 FITUR KALKULASI

Rata-rata Siswa:

• Hitung dari semua mapel yang sudah ada nilainya
• Abaikan mapel dengan nilai null
• Format: 1 desimal (contoh: 87.5)

Rata-rata Mapel:

• Hitung dari semua siswa untuk mapel tertentu
• Tampilkan di baris footer tabel
• Format: 1 desimal, warna oranye-kuning

Leaderboard Ranking:

• Urutkan siswa berdasarkan rata-rata nilai semua mapel (descending)
• Jika nilai sama → tetap urutan sesuai input data

📝 EDITABLE ELEMENTS (via Canva Edit Panel)

• School Title: Judul Sekolah (default: "SDN 03 Saradan")
• Teacher Name: Nama Guru (default: "Uya Kuya, S.Pd")

✨ DETAIL EKSTRA

• Gunakan Lucide icons untuk: shield (admin), lock (terkunci), plus, check, dll
• Smooth transitions & hover effects
• Accessibility: Proper contrast, keyboard navigation
• No browser dialogs (alert/confirm/prompt) - gunakan inline UI
• Tidak ada loading spinner untuk submit (instant save)