# Website Ucapan Ulang Tahun - Vanisa 🎉 Website ucapan ulang tahun interaktif dengan animasi dan permainan yang menarik. ## 📁 Struktur File ``` Vanisa/ ├── index.html # File HTML utama ├── style.css # File CSS untuk styling ├── script.js # File JavaScript untuk interaktivitas ├── images/ # Folder untuk gambar/GIF & background │ ├── pusn3.gif │ ├── pusn2.gif │ ├── terlope2.gif │ ├── panah.gif │ └── wpnime.jpeg # Gambar background ├── photos/ # Folder untuk foto kenangan │ └── README.txt # Instruksi untuk menambah foto ├── music/ # Folder untuk musik background │ └── README.txt # Instruksi untuk menambah musik └── README.md # File dokumentasi ini ``` ## ✨ Fitur 1. **Halaman Selamat Datang** - Ucapan awal dengan stiker animasi 2. **Animasi Amplop** - Amplop yang bisa dibuka dengan animasi hati & kilauan 3. **Input Tahun Lahir** - Slider interaktif untuk input tahun lahir 4. **Permainan Memori** - Permainan mencocokkan kartu dengan animasi kelopak bunga (posisi acak setiap kali!) 5. **Galeri Foto Kenangan** - Slideshow foto dengan navigasi & indikator titik 6. **Pesan Akhir** - Pesan ulang tahun dengan efek mengetik dan kembang api 7. **Musik Background** - Pemutar musik dengan tombol toggle (🔇/🔊) 8. **Gambar Background** - Gambar background bergaya anime yang cantik ## 🎨 Peningkatan dari Versi Asli ### Struktur yang Lebih Baik - ✅ **Kode terpisah**: HTML, CSS, dan JavaScript dalam file terpisah - ✅ **Pemeliharaan lebih mudah**: Setiap komponen mudah dimodifikasi - ✅ **Kode lebih bersih**: Tidak ada inline styles atau scripts ### Performa yang Lebih Lancar - ✅ **Animasi lebih halus**: Menggunakan cubic-bezier easing - ✅ **Optimasi canvas**: Frame rate lebih stabil - ✅ **Transisi mulus**: Semua transisi menggunakan CSS transitions optimal ### Kualitas Kode Lebih Baik - ✅ **Penanganan error**: Validasi elemen sebelum digunakan - ✅ **Komentar jelas**: Setiap bagian kode dijelaskan - ✅ **Desain responsif**: Menyesuaikan berbagai ukuran layar - ✅ **Tanpa script redirect**: Menghapus script redirect yang tidak perlu ## 🚀 Cara Menggunakan 1. **Persiapan**: - Tambahkan foto kenangan ke folder `photos/` (photo1.jpg, photo2.jpg, photo3.jpg) - Tambahkan musik MP3 ke folder `music/` (bg-music.mp3) - Baca instruksi di README.txt di setiap folder 2. **Menjalankan**: - Buka file `index.html` di browser - Klik tombol musik (🔇) untuk memutar musik background - Klik tombol "Mulai" untuk memulai - Buka amplop dengan klik tombol "Buka" - Pilih tahun lahir dengan slider - Selesaikan permainan memori (posisi kartu diacak setiap kali!) - Lihat slideshow foto kenangan (navigasi dengan tombol ❮ ❯) - Nikmati pesan ulang tahun dengan animasi kembang api! ## 🎯 Cara Kustomisasi ### Ubah Pesan Edit bagian ini di `script.js` (fungsi `mulaiHal6`): ```javascript const txtDoa = `Selamat Ulang Tahun yang ke-${usiaKamu}! 🎉🎂`; const txtPesanAkhir = "Pesan Anda di sini..."; const txtLucu = "Pesan tambahan..."; ``` ### Ubah Warna Edit variabel CSS di `style.css`: ```css :root { --color-flap: #d46a84; --color-env: #f8e1e9; --color-env2: #D4AFB8; --color-heart: #ff6f91; --color-sparkle: #ffd1dc; } ``` ### Ubah Background Ganti URL background di `index.html`: ```html

``` ### Ubah Gambar Stiker Ganti file GIF di folder `images/` dengan gambar Anda sendiri (gunakan nama yang sama atau update path di `index.html`). ### Tambah Foto Kenangan 1. Siapkan 3 foto (atau lebih) 2. Rename: photo1.jpg, photo2.jpg, photo3.jpg 3. Tambahkan ke folder `photos/` 4. Edit caption di `index.html` di bagian `

` ### Tambah Musik Background **Lagu yang Direkomendasikan:** Lauv - Paris in the Rain 1. Download dari YouTube: https://www.youtube.com/watch?v=H7HmzwI67ec - Gunakan converter: https://ytmp3.nu/ atau https://y2mate.com/ - Format: MP3 (128kbps atau 192kbps) 2. Rename file: bg-music.mp3 3. Tambahkan ke folder `music/` 4. Musik akan otomatis loop ketika tombol musik diklik (🔇 → 🔊) ## 🌐 Dukungan Browser - ✅ Chrome/Edge (Direkomendasikan) - ✅ Firefox - ✅ Safari - ✅ Browser mobile ## 📱 Responsif Website ini responsif dan dapat diakses dari: - 💻 Desktop - 📱 Tablet - 📱 Mobile ## 🎨 Dependensi - **TypeIt** - Library untuk efek animasi mengetik - **Google Fonts** - Itim, Handlee, Sriracha ## 💡 Tips - Untuk hasil terbaik, buka di Chrome atau Edge - Pastikan koneksi internet untuk load font dan library - File gambar harus ada di folder `images/` ## 🐛 Troubleshooting **Animasi tidak bekerja?** - Pastikan JavaScript diaktifkan di browser - Cek console browser untuk pesan error **Gambar tidak muncul?** - Pastikan semua file GIF ada di folder `images/` - Cek path gambar di `index.html` **Kembang api tidak muncul?** - Hapus cache browser dan refresh - Pastikan canvas didukung oleh browser --- Dibuat dengan ❤️ oleh Claude Code # Birtday