Prompt Acak Bangku

🎲 Klik untuk melihat contoh Acak Bangku

Gunakan aplikasi interaktif ini untuk mengacak posisi duduk siswa secara otomatis. Praktis, cepat, dan bikin suasana kelas makin seru!

🚀 BUKA SEKARANG

 

PROMPT LENGKAP: "Let's Change Seats!" Website

Buatkan website interaktif bernama "Let's Change Seats!" dengan spesifikasi berikut: ### 🎨 DESAIN & VISUAL - Background: Langit biru gradient (dari #87CEEB ke #E0F6FF) dengan animasi awan putih yang bergerak dari kiri ke kanan secara kontinyu - Animasi awan: 4 awan berbeda ukuran dengan kecepatan float berbeda (20-35 detik per siklus) - Judul: "🎲 Let's Change Seats! 🎲" dengan font Fredoka One, warna biru tua, drop shadow - Typography: Font Nunito untuk body, Fredoka One untuk heading ### 📊 LAYOUT NAMA (Dua Kolom) **KOLOM CEWEK (👧):** - Background putih semi-transparan dengan blur effect - Header "👧 Cewek" dengan warna pink - Grid 3 kolom menampilkan 13 nama: NINDI, SALSA, NOVITA, ELI, KARIN, RESTI, KANAYA, JUWITA, SHAKILLA, NERISA, NURUS, AINAYA, WIDYA (BISA DIGANTI SESUAI NAMA SISWA BAPAK/IBU) - Setiap nama: padding, rounded corners, background pink muda, text pink tua **KOLOM COWOK (👦):** - Background putih semi-transparan dengan blur effect - Header "👦 Cowok" dengan warna biru - Grid 3 kolom menampilkan 13 nama: REHAN, RENDI, DAFFA, ARKAN, ARYA, VIKRI, FATAH, BAYU, NAZWAR, RISKI, RAFKA, PUTRA, FADIL (BISA DIGANTI SESUAI NAMA SISWA BAPAK/IBU) - Setiap nama: padding, rounded corners, background biru muda, text biru tua ### 🎲 TOMBOL & FUNGSIONALITAS **TOMBOL ACAK:** - Gradient biru ke ungu, hover scale up - Text: "🎰 ACAK 🎰" - Pulse animation (glow effect berulang) - Disabled ketika sedang shuffle **STATUS TEXT:** - Muncul di bawah tombol - Menampilkan: "🎲 Mengacak...", "✨ Pasangan pertama!", "✨ Pasangan #2!", dll - Ketika selesai: "🎊 Semua pasangan telah ditentukan! 🎊" ### ⚡ ANIMASI SHUFFLE (KLIK PERTAMA) **Durasi: 3 detik** - Nama-nama di kedua kolom menyala bergantian dengan cepat (interval 50ms) - Effect: highlight dengan gradient kuning-orange, scale 1.1, glow box-shadow - Highlight random secara acak di kedua kolom **Setelah Shuffle:** - Highlight dihapus - Muncul hasil pasangan pertama ### 👥 SISTEM PASANGAN **Konsep Pairing:** - Total 13 pasangan dari 13 cewek + 13 cowok - Pasangan 1-6: Cewek dengan Cewek (👧👧) - Pasangan 7-12: Cowok dengan Cowok (👦👦) - Pasangan 13 (Terakhir): Cewek dengan Cowok (👧👦)

**Randomisasi:** Setiap klik "Acak" menghasilkan urutan pasangan yang berbeda (shuffle array) ### 📱 HASIL CARD (Per Pasang) **Setiap Card Menampilkan:** - Emoji pasangan (👧👧, 👦👦, atau 👧👦) - Nama pertama | 🤝 | Nama kedua - Nomor urut (#1, #2, dst) di sudut kanan - Background gradient sesuai tipe: - Girl-Girl: pink gradient - Boy-Boy: biru gradient - Mixed: ungu-pink gradient - Pop-in animation (scale 0 → 1.1 → 1, 0.5 detik) - Text putih, rounded 2xl, shadow **Muncul Sequential:** Setiap klik "Pasangan Selanjutnya" → 1 card baru muncul dengan pop-in animation ### 🔄 FLOW INTERAKSI 1. **KLIK PERTAMA "ACAK":** - Shuffle animation 3 detik (nama menyala cepat) - Clear hasil sebelumnya (jika ada) - Shuffle array girls dan boys - Create 13 pasangan dengan logic yang benar - Tampilkan pasangan #1 dengan pop-in - Ubah text tombol → "🎰 PASANGAN SELANJUTNYA 🎰" - Mark nama yang keluar sebagai "selected" (highlight hijau) 2. **KLIK "PASANGAN SELANJUTNYA":** - Quick shuffle animation 1.5 detik (nama-nama non-selected menyala) - Tampilkan pasangan berikutnya dengan pop-in - Mark kedua nama sebagai "selected" - Ulangi sampai pasangan ke-13 3. **SETELAH PASANGAN KE-13:** - Tombol berubah: "🎉 SELESAI! 🎉" (disabled) - Status text: "🎊 Semua pasangan telah ditentukan! 🎊" - Muncul tombol "🔄 Mulai Ulang" dengan background merah-pink - Confetti animation (50 piece) jatuh dari atas 4. **KLIK "MULAI ULANG":** - Reset semua state (pairs, currentIndex, selected highlights) - Clear results container - Ubah tombol kembali ke "🎰 ACAK 🎰" - Tambahkan pulse animation kembali - Hide tombol reset - Siap untuk shuffle baru ### ✨ ANIMASI & EFFECTS **Highlight (Saat Shuffle):** - Gradient: linear-gradient(135deg, #FFD700, #FFA500) - Box-shadow: 0 0 20px rgba(255, 215, 0, 0.8) - Transform: scale(1.1) - Color: white - Transition: 0.1s ease **Selected (Nama Terpilih):** - Gradient: linear-gradient(135deg, #10B981, #059669) - Box-shadow: 0 0 15px rgba(16, 185, 129, 0.6) - Color: white - Transform: none (tetap normal size) **Pop-in (Result Card):** - @keyframes pop-in: scale(0) → scale(1.1) → scale(1) - Duration: 0.5s ease-out - Opacity: 0 → 1 **Pulse Button:** - Box-shadow pulse effect berulang - Glow dari biru ke transparent - Duration: 2s infinite **Confetti:** - 50 pieces - Warna random (merah, cyan, kuning, hijau, pink, ungu) - Jatuh dari atas ke bawah - Rotate 720° sambil jatuh - Duration: 3 detik ### 🛠️ TECH STACK - HTML5 - Tailwind CSS (3.4.17) - Vanilla JavaScript (no framework) - Custom CSS untuk animasi advanced - Responsive: desktop & mobile (md breakpoint untuk tablet) ### 📊 STATE MANAGEMENT ```javascript - shuffledGirls: array girls yang sudah di-shuffle - shuffledBoys: array boys yang sudah di-shuffle - currentPairIndex: index pasangan saat ini (0-12) - pairs: array berisi 13 object pasangan - isShuffling: boolean flag untuk prevent double click - allPairsRevealed: boolean untuk track completion

🎯 ERROR HANDLING & EDGE CASES

• Prevent double click saat shuffle (disabled state + isShuffling flag)
• Setiap random highlight dipilih dari range yang valid
• Ensure 13 nama cewek paired dengan 13 nama cowok (total 26 person)
• Confetti cleanup setelah 3 detik
• Element SDK integration untuk edit panel (judul bisa diedit)