Hindari Fatal Error: Panduan Lengkap Struktur File & Integrasi JS Laxy Motions!

Struktur template Laxy Motions memisahkan data konten, desain visual, dan sistem animasi scroll secara modular. Pemahaman mengenai berkas mana yang boleh dimodifikasi (seperti data.json) dan yang harus dihindari (seperti core engine) sangat penting untuk mencegah malafungsi pada perhitungan vProg dan scroll-snap.

---

🛠️ Panduan Segmentasi File & Folder Template

Untuk memudahkan pemeliharaan dan kustomisasi, ikuti panduan klasifikasi berkas berikut untuk mengetahui berkas mana saja yang boleh disentuh dan yang harus dihindari.

Langkah 1: Mengidentifikasi Berkas yang Boleh & Dilarang Diedit

Nama Berkas / Folder	Status Edit	Alasan & Panduan Kustomisasi
data.json	Boleh Diedit	Menampung seluruh data teks mempelai, galeri, bank, lagu, dan konfigurasi toggle. Gunakan Data Editor untuk meminimalkan salah ketik format JSON.
assets/js/theme-injector.js	Boleh Diedit (Kustomisasi)	Mengontrol seluruh visual tema seperti palet warna global, kepekatan gradasi overlay foto, ukuran tipografi, dan padding section via objek TEMPLATE_THEME.
assets/js/style-injector.js	Boleh Diedit (Kustomisasi)	Mengatur skala dan posisi gambar cover, cover penutup, foto couple, dan couple outro, durasi serta kehalusan autoscroll, dan ukuran semak via objek TEMPLATE_STYLE. Edit hanya objek tersebut; kode di bawah garis pemisah adalah mesin internal.
assets/css/parallax.css	Boleh Diedit (Terbatas)	Hanya ubah style kustom tambahan jika diperlukan. Hindari mengubah style animasi inti (keyframe) dan properti variabel warna yang sudah ditangani oleh theme-injector.js.
assets/img/	Boleh Diedit (Aset)	Tempat menyimpan file gambar (cover, background, foto couple, ornamen). Ganti gambar dengan nama file yang sama untuk kustomisasi instan.
index.html	Dilarang Keras	Struktur HTML terikat langsung ke parallax-engine.js. Menghapus tag kontainer, class ornamen, atau ID section akan merusak fungsi scroll-snap dan render data.
assets/js/	Dilarang Keras (Terbatas)	Folder modul javascript yang menjalankan engine, pengolah data, dan rsvp client. Berkas di folder ini yang boleh Anda edit hanyalah objek TEMPLATE_THEME di theme-injector.js, objek TEMPLATE_STYLE di style-injector.js, dan blok CONFIG di atas file parallax-engine.js. Perhatikan bahwa nilai CONFIG untuk skala cover, couple, outro, dan autoscroll ditimpa oleh style-injector.js saat halaman dimulai, sehingga nilai tersebut harus diatur lewat TEMPLATE_STYLE. Nilai skala dan durasi opening juga dibaca ulang dari variabel CSS --open-bg-* di parallax.css. Nilai CONFIG lain (misalnya backgroundStages, cards, mouseParallax) tetap diatur di parallax-engine.js.
assets/js/protection.js	Boleh Diedit (Terbatas)	Modul proteksi klik kanan, shortcut DevTools, dan layar kunci. Dimuat paling awal di dalam <head> index.html. Cukup ubah warna latar layar kunci jika perlu. Detailnya ada di Keamanan & Proteksi Kode.
.htaccess	Boleh Diedit (Daftar Domain)	Menolak akses langsung ke file JS dan CSS (error 403) dari domain yang tidak terdaftar. Tambahkan domain hosting Anda pada daftar RewriteCond, lihat Daftarkan Domain di .htaccess.
_backend/	Tidak Diupload ke Hosting	Bahan setup RSVP: Code.gs (script yang di-paste ke Google Apps Script; isi UNDANGAN_ID di objek CONFIG), RSVP_SheetTemplate.xlsx (template Google Sheet siap pakai), sheet-structure.md (referensi kolom tiap tab sheet), dan PANDUAN_BACKEND.md (panduan setup backend langkah demi langkah).
PANDUAN.md	Referensi	Catatan teknis bawaan berisi peta folder dan peran tiap modul. Tidak dimuat oleh halaman undangan.

Langkah 2: Memahami Alur Integrasi File JavaScript

Di dalam folder assets/js/, terdapat file-file modular yang saling berkolaborasi saat halaman pertama kali dimuat. Berikut adalah peran masing-masing berkas:

1. protection.js (Proteksi Kode): Dimuat paling awal di dalam <head>, terpisah dari modul lain. Memblokir klik kanan dan shortcut DevTools, lalu menampilkan layar kunci jika DevTools terdeteksi terbuka.
2. data-loader.js (Pemuat Data): Mengambil file data.json secara asinkronus (fetch API), lalu menggabungkannya (deep merge) dengan objek override inline window.LAXY_OVERRIDE di index.html. Nilai di override menimpa nilai dari data.json. Jika data.json gagal dimuat dan override kosong, halaman menampilkan pesan "Data undangan tidak tersedia."
3. extractors.js (Transformator Teks): Menyediakan fungsi utility untuk memformat tanggal akad/resepsi menjadi string bahasa Indonesia, membentuk inisial nama, membuat link Google Calendar dan WhatsApp, serta menentukan section mana yang tampil berdasarkan isi data dan toggle show.
4. style-injector.js (Injektor Skala & Posisi): Menerapkan nilai objek TEMPLATE_STYLE. Ukuran dan posisi gambar cover, skala cover penutup, serta ukuran semak ditulis sebagai variabel CSS di :root, sedangkan skala dan offset foto couple, couple outro, skala cover, dan durasi autoscroll ditulis ke CONFIG parallax-engine.js. Berkas ini dipanggil oleh parallax-engine.js saat inisialisasi.
5. theme-injector.js (Injektor Tema Parallax): Mengontrol seluruh aspek visual tema secara fleksibel tanpa menyentuh CSS inti. Berkas ini menginjeksikan properti variabel warna (latar belakang, teks, aksen, garis pembatas), ketebalan overlay gradasi gelap di atas foto, ukuran huruf cover, splash, section title, body teks, hingga padding area section melalui objek TEMPLATE_THEME.
6. rsvp-client.js (Klien API RSVP): Bertugas menangani interaksi submit formulir konfirmasi kehadiran dan pengiriman ucapan restu. Mengatur pengiriman AJAX POST/GET menuju URL Google Apps Script dan mengembalikan status respon ke UI.
7. parallax-engine.js (Mesin Parallax 3D): Mengontrol intersep scroll, menghitung nilai kemajuan vProg secara halus, serta mengatur skala perbesaran, rotasi, dan translasi 3D pada elemen visual berdasarkan nilai target scroll.
8. app.js (Orkestrator Utama): Bootloader yang memanggil data-loader di awal, menjalankan extractors untuk menginjeksikan teks ke dalam HTML, mengaktifkan audio lagu latar, menginisialisasi hitung mundur, dan terakhir mengaktifkan parallax-engine.