cara membuat website pengumuman TKA menarik

Buka gemini

Aktifkan mode Canvas

Upload pdf hasil TKA

Masukan promp ini di gemini

Catatan: untuk membuka hasil TKA, prompt ini menggunakan metode pencarian NISN, bisa disesuaikan prompt nya jika ingin pakai metode lain, misal nama, username TKA, atau lainnya. Tinggal minta Gemini untuk memperbaiki promptnya

Bertindaklah sebagai Senior Front-End Developer dan UI/UX Designer expert. Saya baru saja mengunggah sebuah dokumen PDF bernama "DKHTKA" yang berisi tabel data nilai ujian siswa (Nama, NISN, Nilai Matematika, Nilai Bahasa Indonesia, beserta Predikat/Keterangan nilainya).

Tugas Anda adalah mengekstrak SELURUH data siswa yang ada di dokumen tersebut tanpa ada yang terlewat, lalu buatkan sebuah file kode tunggal "index.html" siap pakai.

Website ini harus dirancang dengan pendekatan Mobile-First Layout agar sangat enteng, responsif, dan terlihat estetik saat dibuka dari browser ponsel siswa.

Ikuti instruksi arsitektur, fitur, dan UI/UX secara ketat di bawah ini:

1. METODE PENGEMBANGAN KODE (ANTI-BUG & STABIL)

* Tulis seluruh kode secara mandiri (Single File HTML) di mana struktur HTML, CSS kustom, dan logika JavaScript digabung menjadi satu file.

* JANGAN GUNAKAN framework CSS eksternal seperti Tailwind CSS atau Bootstrap melalui CDN, karena rentan memicu bug rendering text kompilator (seperti text '[span]' atau '') pada beberapa aplikasi previewer ponsel (seperti Acode harian).

* Tulis semua visual, tata letak, dan efek kaca secara manual menggunakan Vanilla CSS di dalam tag <style>.

* JANGAN GUNAKAN emoji sebagai hiasan antarmuka atau ikon. Sebagai gantinya, gunakan pustaka ikon "Font-Awesome" melalui CDN link berikut di dalam tag <head> agar ikon ter-render stabil dan tajam sebagai grafik vektor SVG:

2. DESAIN ANTARMUKA (UI/UX - MATERIAL 3 EXPRESSIVE GLASS)

* Latar Belakang Layar: Menggunakan warna biru yang sangat tipis, bersih, dan super lembut (#f0f7ff) agar nyaman di mata siswa.

* Efek Kaca (Glassmorphism): Gunakan CSS kustom transparan putih yang kuat (background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.9);) dengan sudut melengkung Material 3 yang tegas (border-radius: 24px;) pada setiap panel box.

* Batasan Lebar: Batasi lebar konten maksimal 440px (container-mobile) agar proporsional di HP dan otomatis presisi berada di tengah-tengah layar ponsel.

3. SISTEM NAVIGASI NAVBAR & LAMAN DEFAULT

* Buat komponen Bottom Navbar bergaya mobile modern di bagian bawah layar dengan tinggi 64px dan posisi fixed, yang memiliki 2 menu utama:

a. "Home" (Menggunakan ikon fa-chart-simple)

b. "Nilaiku" (Menggunakan ikon fa-address-card)

* Saat aplikasi pertama kali dibuka (Laman Default), kunci tampilan secara otomatis pada menu "Nilaiku" (Menampilkan kotak pencarian nilai pribadi siswa).

4. LOGIKA DATA & PERINGKAT OTOMATIS (JAVASCRIPT)

* Di dalam tag <script>, ekstrak data dari PDF menjadi sebuah array objek JavaScript.

* Hitung nilai rata-rata kombinasi secara otomatis untuk setiap siswa dengan rumus: (Nilai Matematika + Nilai Bahasa Indonesia) / 2.

* Urutkan data dari rata-rata tertinggi ke terendah, lalu tetapkan nilai variabel peringkat ("rank") secara otomatis mulai dari nomor 1 hingga jumlah siswa terakhir sekelas.

5. KONTEN LAMAN 1: "HOME" (REKAPITULASI ANONIM)

* Jika menu "Home" diklik, sembunyikan kotak pencarian nilai dan tampilkan panel statistik rekapitulasi nilai kelas.

* JANGAN sebutkan nama siswa atau NISN mana pun di halaman ini (bersifat anonim).

* Tampilkan informasi: Rata-rata nilai kelas untuk Matematika dan Bahasa Indonesia.

* Tampilkan grafik batang persentase visual kustom (menggunakan div CSS manual) untuk distribusi jumlah siswa yang mendapatkan predikat "Baik", "Memadai", dan "Kurang" pada masing-masing mata pelajaran.

6. KONTEN LAMAN 2: "NILAIKU" (PENCARIAN BERBASIS NISN & SURPRISE EFFECT)

* Menampilkan kotak pencarian khusus berupa input nomor yang meminta siswa memasukkan **NISN (Nomor Induk Siswa Nasional)** mereka secara lengkap. Berikan placeholder atau petunjuk input yang jelas (contoh: "Masukkan 10 digit NISN Anda").

* Logika Pencarian: Siswa wajib mengetik digit NISN dengan tepat. Untuk kenyamanan pengguna, buat logika pencarian JavaScript yang fleksibel terhadap kecocokan karakter secara real-time (.includes() atau pencarian instan sewaktu tombol ditekan) namun tetap mengisolasi data agar akurat.

* Efek Loading Dramatis: Ketika tombol "Buka Amplop Nilai" diklik, munculkan animasi lingkaran berputar (Spinner Loading) selama 1,2 detik dengan teks animasi berdenyut untuk membangun ketegangan positif.

* Efek Kejutan (Surprise Bounce Effect): Setelah loading selesai, munculkan kartu hasil kelulusan siswa dengan efek animasi meloncat memantul menggunakan CSS kustom @keyframes cubic-bezier.

7. TATA LETAK & PEWARNAAN KARTU HASIL INDIVIDU (ANTI-NABRAK)

Susunan visual kartu hasil yang muncul setelah NISN berhasil ditemukan harus mengikuti aturan berikut:

* Jika siswa yang dicari berada di Rank 1 (Juara 1): Kartu otomatis berwarna gradasi Hijau Pastel Muda yang sejuk (kombinasi #d1fae5 dan #a7f3d0), memiliki border hijau tebal menyala (#34d399), efek glow, serta efek animasi sinar bergerak (shimmer) menggunakan keyframes background-position. Lencananya diberi ikon piala (Rank 1).

* Jika Juara 2: Kartu berwarna gradasi Biru Pastel Lembut (#dbaefe ke #bfdbfe) dengan lencana medali (Rank 2).

* Jika Juara 3: Kartu berwarna gradasi Perunggu/Oranye Pastel Hangat (#ffedd5 ke #fdbb74) dengan lencana medali (Rank 3).

* Jika Rank 4 Ke Bawah: Kartu menggunakan efek kaca putih transparan m3-glass standar dengan lencana abu-abu netral (#Rank).

* Kelurusan Baris Nilai (Layout Vertikal): Di dalam kartu, informasi mapel disusun per baris box. Teks Nama Mapel diletakkan di sisi kiri atas, Tag Kategori Nilai (Baik/Memadai/Kurang) diletakkan tepat di bawah nama mapel menggunakan CSS width: auto; (JANGAN gunakan pixel kaku) agar fleksibel. Sementara Nilai Angka dicetak besar (22px) di sisi kanan. Hal ini wajib dilakukan agar teks kategori nilai yang panjang TIDAK AKAN PERNAH MENABRAK nilai angkanya pada layar HP yang sempit.

* Bagian kaki kartu menampilkan nama siswa yang bersangkutan, NISN, serta info hasil "Rata-Rata Ujian Kombinasi" milik siswa tersebut secara jelas.

Ekstrak seluruh data dari dokumen yang saya lampirkan sekarang, dan hasilkan kode index.html final yang bersih, mewah, bebas bug, dan siap pakai!

Kalo udah punya HTML, tinggal aktifkan canvas dan bilang ke Gemini: eksekusi di canvas. Tunggu hasilnya hinggal muncul preview webnya .

Setelah previewnya muncul, klik titik tiga di kanan atas lalu pilih BAGIKAN

3. Salin link lalu bagikan ke siswa

Catatan: untuk menggunakan web ini, siswa harus terlebih dahulu login menggunakan akun Google yang sudah ada di hp siswa tersebut.

SELESAI

Silahkan bisa tanya tanya kalau masih ada kesulitan.

Oh iya, Kalau alamat webnya pingin dicustom, caranya berbeda. Yang mau komen aja ya.

MASOYIT

cara membuat website pengumuman TKA menarik

Menu Halaman Statis