The Wedding of
Lukman & Ajeng
Sabtu, 3 Januari 2026
Kepada yth: Bpk/Ibu/Saudara/i
Tamu Undangan
*) Mohon maaf apabila ada kesalahan penulisan nama/gelar
" Dan di antara tanda-tanda kekuasaan-Nya diciptakan-Nya untukmu pasangan hidup dari jenismu sendiri supaya kamu dapat ketenangan hati dan dijadikannya kasih sayang di antara kamu. Sesungguhnya yang demikian menjadi tanda-tanda kebesaran-Nya bagi orang-orang yang berpikir".
Q.S. Ar-Rum: 21
Tanpa mengurangi rasa hormat, perkenankan kami mengundang Bapak/Ibu/Saudara/i Tamu Undangan serta kerabat sekalian, untuk menghadiri acara pernikahan kami:
Candra Lukman Ma’arif
Putra Pertama dari Keluarga
Bapak Chariri & Ibu Siti Arifah
Ajeng Ayu Manggali S.Pd.
Putri Kedua dari Keluarga
Bapak Kariyono & Ibu Rahmawati
Wedding Event
Bergabunglah bersama Kami menyaksikan sekaligus merayakan terbentuknya ikatan suci ini. Kami ingin Anda menjadi bagian dari hari istimewa kami.
yang Insya Allah akan dilaksanakan pada :
Sabtu, 3 Januari 2026
- 00Hari
- 00Jam
- 00Menit
- 00Detik
Akad Nikah
Sabtu, 3 Januari 2026
Pukul 06:00 WIB
Masjid Nurul Iman Desa Kenanti
Acara Resepsi
Sabtu, 3 Januari 2026
Pukul 13:00 WIB s.d Selesai
Gedung OKE Tambakboyo
Perjalanan
Cinta Kami
“Tak ada yang kebetulan dalam hidup ini. Setiap pertemuan sudah digariskan oleh Tuhan dengan cara dan waktu yang paling indah. Kadang tak disangka, seseorang yang dulu hanya lewat, kini menjadi bagian terpenting dalam hidup kita.”
AWAL PERTEMUAN
Tidak ada yang kebetulan di dunia ini. Semua sudah tersusun dengan sangat rapi oleh sang Maha Kuasa. Kita tidak bisa memilih kepada siapa kita akan jatuh cinta. Kami bertemu tanpa sengaja pada tahun 2020.
PROSES PENDEKATAN
Katanya cinta dapat tumbuh dengan kebersamaan. Seiring berjalannya waktu, kami semakin dekat dan memutuskan menjalin hubungan lebih dari sekedar pertemanan.
ACARA LAMARAN
Kehendaknya menuntun kami pada sebuah pertemuan yang tak pernah disangka, hingga akhirnya pada 19 April 2025 membawa kami pada sebuah ikatan yang di Rindhoi-Nya.
PERNIKAHAN
Bukan karena bertemu lalu berjodoh, tapi karena berjodoh lah kami bisa bertemu. Kami memutuskan untuk mengikrarkan janji suci pernikahan pada tanggal 3 Januari 2026. Sebagaimana yang pernah dikatakan oleh Ali Bin Abu Tholib: "Apa yang menjadi takdirmu akan menemukan jalannya untuk menemukan mu".
Our Moment
Wedding Gallery
Beri Doa & Ucapan Terbaikmu
Untuk Kedua Mempelai
Tinggalkan kami doa terbaik anda untuk momen bahagia kami
Hope to see you soon, Stay safe and healthy!
Hadiah
Pernikahan
Kehadiran Bapak/Ibu/Saudara/i Tamu Undangan merupakan sebuah do'a serta rasa syukur bagi kami, namun jika memberi adalah bentuk Do'a & cinta kasih bagi Anda, Anda dapat memberi kado secara cashless dan kami akan senang hati menerimanya dan tentu semakin melengkapi kebahagiaan kami.
Kirim Kado:
TERIMA KASIH
Atas Kehadiran & Doa Restunya
Merupakan suatu kehormatan dan kebahagiaan bagi kami sekeluarga apabila Bapak/Ibu/Saudara/i Tamu Undangan berkenan hadir untuk memberikan doa restu kepada kedua mempelai. Atas kehadiran serta doa restu, kami ucapkan terima kasih.
Sampai Jumpa di Hari Bahagia Kami,
Lukman & Ajeng
Keluarga Besar
Mempelai Pria
Bapak Chariri & Ibu Siti Arifah
Keluarga Besar
Mempelai Wanita
Bapak Kariyono & Ibu Rahmawati
/* ====== WDP: Lock Cover + Audio (All-in-One, no ESC) ====== */
(() => {
// Inject CSS langsung via JS
const css = `
body.scroll-lock {
position: fixed; inset: 0; width: 100%; overflow: hidden;
top: var(--lock-top, 0);
}
#section-cover.cover-full { width: 100vw; }
#tombol-buka[hidden] { display: none !important; }
`;
const styleEl = document.createElement('style');
styleEl.id = 'wdp-lock-css';
styleEl.appendChild(document.createTextNode(css));
document.head.appendChild(styleEl);
// Scroll ke atas saat load & matikan auto restore browser
if ('scrollRestoration' in history) history.scrollRestoration = 'manual';
window.addEventListener('load', () => { window.scrollTo(0, 0); });
let isSectionLocked = true;
let savedScrollY = 0;
window.addEventListener('DOMContentLoaded', () => {
const cover = document.getElementById('section-cover');
const btnOpen = document.getElementById('tombol-buka');
const songEl = document.getElementById('song'); // opsional
if (!btnOpen) { console.warn('[lock] #tombol-buka tidak ditemukan'); return; }
// Lock saat awal
lockSection(cover);
// Klik buka
btnOpen.addEventListener('click', async () => {
await unlockSection(cover, btnOpen, songEl);
}, { once: true });
});
function lockSection(cover) {
savedScrollY = window.scrollY || document.documentElement.scrollTop || 0;
document.body.style.setProperty('--lock-top', `-${savedScrollY}px`);
document.body.classList.add('scroll-lock');
if (cover) cover.classList.add('cover-full');
isSectionLocked = true;
}
async function unlockSection(cover, btnOpen, songEl) {
document.body.classList.remove('scroll-lock');
document.body.style.removeProperty('--lock-top');
window.scrollTo(0, savedScrollY);
if (cover) cover.classList.remove('cover-full');
if (btnOpen) btnOpen.hidden = true;
isSectionLocked = false;
await playAudioSafe(songEl);
}
async function playAudioSafe(songEl) {
// HTML
/* ===========================
ATURAN UMUM
=========================== */
.wdpal-fade-in,
.wdpal-muncul-atas,
.wdpal-muncul-bawah,
.wdpal-muncul-kiri,
.wdpal-muncul-kanan,
.wdpal-rotate-in,
.wdpal-flip-x,
.wdpal-flip-y,
.wdpal-zoom-in,
.wdpal-zoom-out {
opacity: 0;
transition-property: transform, opacity;
transition-timing-function: ease;
position: relative;
z-index: 1;
}
.wdpal-fade-in.active,
.wdpal-muncul-atas.active,
.wdpal-muncul-bawah.active,
.wdpal-muncul-kiri.active,
.wdpal-muncul-kanan.active,
.wdpal-rotate-in.active,
.wdpal-flip-x.active,
.wdpal-flip-y.active,
.wdpal-zoom-in.active,
.wdpal-zoom-out.active {
opacity: 1;
}
/* ===========================
DURASI ANIMASI
=========================== */
.wdpal-fade-in,
.wdpal-muncul-atas,
.wdpal-muncul-bawah,
.wdpal-muncul-kiri,
.wdpal-muncul-kanan,
.wdpal-rotate-in,
.wdpal-flip-x,
.wdpal-flip-y,
.wdpal-zoom-in,
.wdpal-zoom-out {
transition-duration: 1.25s; /* Default: Smooth */
}
.very-slow {
transition-duration: 3s;
}
.slow {
transition-duration: 2s;
}
.fast {
transition-duration: 0.75s;
}
.very-fast {
transition-duration: 0.3s;
}
/* ===========================
EFEK FADE IN
=========================== */
.wdpal-fade-in {
transition-delay: 0.2s;
}
/* ===========================
EFEK MUNCUL ATAS
=========================== */
.wdpal-muncul-atas {
transform: translateY(50px);
opacity: 0;
transition-delay: 0.3s;
}
.wdpal-muncul-atas.active {
transform: translateY(0);
opacity: 1;
}
/* ===========================
EFEK MUNCUL BAWAH
=========================== */
.wdpal-muncul-bawah {
transform: translateY(-50px);
opacity: 0;
transition-delay: 0.3s;
}
.wdpal-muncul-bawah.active {
transform: translateY(0);
opacity: 1;
}
/* ===========================
EFEK MUNCUL KIRI
=========================== */
.wdpal-muncul-kiri {
transform: translateX(-50px) scale(0.95);
opacity: 0;
transition-delay: 0.4s;
}
.wdpal-muncul-kiri.active {
transform: translateX(0);
opacity: 1;
}
/* ===========================
EFEK MUNCUL KANAN
=========================== */
.wdpal-muncul-kanan {
transform: translateX(50px) scale(0.95);
opacity: 0;
transition-delay: 0.5s;
}
.wdpal-muncul-kanan.active {
transform: translateX(0);
opacity: 1;
}
/* ===========================
EFEK ROTATE IN
=========================== */
.wdpal-rotate-in {
transform: rotate(-180deg);
opacity: 0;
transition-delay: 0.5s;
}
.wdpal-rotate-in.active {
transform: rotate(0deg);
opacity: 1;
}
/* ===========================
EFEK FLIP X
=========================== */
.wdpal-flip-x {
transform: rotateX(90deg);
transform-style: preserve-3d;
backface-visibility: hidden;
visibility: hidden;
pointer-events: none;
transition-delay: 0.6s;
}
.wdpal-flip-x.active {
transform: rotateX(0deg);
visibility: visible;
pointer-events: auto;
}
/* ===========================
EFEK FLIP Y
=========================== */
.wdpal-flip-y {
transform: rotateY(90deg);
transform-style: preserve-3d;
backface-visibility: hidden;
visibility: hidden;
pointer-events: none;
transition-delay: 0.6s;
}
.wdpal-flip-y.active {
transform: rotateY(0deg);
visibility: visible;
pointer-events: auto;
}
/* ===========================
EFEK ZOOM IN
=========================== */
.wdpal-zoom-in {
transform: scale(0.7);
opacity: 0;
transition-delay: 0.2s;
}
.wdpal-zoom-in.active {
transform: scale(1);
opacity: 1;
}
/* ===========================
EFEK ZOOM OUT
=========================== */
.wdpal-zoom-out {
transform: scale(1.3);
opacity: 0;
transition-delay: 0.2s;
}
.wdpal-zoom-out.active {
transform: scale(1);
opacity: 1;
}
(function () {
// Fungsi utama untuk mengaktifkan animasi
function revealElements(selector) {
const elements = document.querySelectorAll(selector);
const windowHeight = window.innerHeight;
const elementVisible = 150;
elements.forEach(function(element) {
const elementTop = element.getBoundingClientRect().top;
if (elementTop {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("active");
} else {
entry.target.classList.remove("active");
}
});
};
const observer = new IntersectionObserver(observerCallback, observerOptions);
// Panggil fungsi revealElements untuk semua efek animasi
document.addEventListener("DOMContentLoaded", () => {
const selector = ".wdpal-fade-in, .wdpal-muncul-atas, .wdpal-muncul-bawah, .wdpal-muncul-kiri, .wdpal-muncul-kanan, .wdpal-rotate-in, .wdpal-flip-x, .wdpal-flip-y, .wdpal-zoom-in, .wdpal-zoom-out";
// Mengamati elemen dengan Intersection Observer
const elements = document.querySelectorAll(selector);
elements.forEach((element) => {
observer.observe(element);
});
// Panggil fungsi revealElements untuk menambahkan kelas active pada elemen yang sudah terlihat
revealElements(selector);
});
// Tambahkan event listener untuk scroll
window.addEventListener("scroll", () => {
revealElements(".wdpal-fade-in, .wdpal-muncul-atas, .wdpal-muncul-bawah, .wdpal-muncul-kiri, .wdpal-muncul-kanan, .wdpal-rotate-in, .wdpal-flip-x, .wdpal-flip-y, .wdpal-zoom-in, .wdpal-zoom-out");
});
})();
//* script show-hide by andy dari weddingpress — refactor *//
document.addEventListener("DOMContentLoaded", () => {
const btnAmplop = document.getElementById("btnAmplop");
const btnHide = document.getElementById("btn-hide");
const amplop = document.getElementById("amplop");
// Guard jika ada elemen yang tidak ditemukan
if (!btnAmplop || !btnHide || !amplop) {
console.warn("[show-hide] Elemen tidak lengkap: pastikan #btnAmplop, #btn-hide, dan #amplop ada.");
return;
}
// Initial state
btnHide.hidden = true;
amplop.hidden = true;
// ARIA untuk aksesibilitas
btnAmplop.setAttribute("aria-controls", "amplop");
btnAmplop.setAttribute("aria-expanded", "false");
btnHide.setAttribute("aria-controls", "amplop");
btnHide.setAttribute("aria-expanded", "false");
const showAmplop = () => {
btnHide.hidden = false;
btnAmplop.hidden = true;
amplop.hidden = false;
btnAmplop.setAttribute("aria-expanded", "true");
btnHide.setAttribute("aria-expanded", "true");
// Optional: fokuskan ke konten/section saat dibuka
// amplop.focus();
};
const hideAmplop = () => {
btnHide.hidden = true;
btnAmplop.hidden = false;
amplop.hidden = true;
btnAmplop.setAttribute("aria-expanded", "false");
btnHide.setAttribute("aria-expanded", "false");
// Kembalikan fokus ke pemicu agar navigasi keyboard enak
btnAmplop.focus();
};
btnAmplop.addEventListener("click", showAmplop);
btnHide.addEventListener("click", hideAmplop);
// Tutup dengan tombol Escape saat amplop terbuka
document.addEventListener("keydown", (e) => {
if (e.key === "Escape" && !amplop.hidden) {
hideAmplop();
}
});
});
/*!
WeddingPress Custom Nama Tamu (WDPCNT)
============================================
Description:
WeddingPress Custom Nama Tamu (WDPCNT) adalah script JavaScript yang digunakan untuk mengganti teks "Tamu Undangan" pada elemen dengan class `namatamu` berdasarkan parameter yang ada di URL.
Script ini mendukung beberapa parameter seperti `to`, `dear`, dan `kepada` untuk menyesuaikan nama penerima undangan.
Author: Andy dari WeddingPress
Website: https://weddingpress.net
Version: 1.1 (2025/03/01)
License: Anda diizinkan menggunakan script ini pada website Anda dan proyek klien. Tidak diperbolehkan menjual, membagikan, menempatkan codenya ditemplate yang dijual atau mendistribusikan ulang tanpa izin.
Copyright: © 2025 WeddingPress. All rights reserved.
Note:
Pastikan untuk teks 'Tamu Undangan' css classesnya sudah terisi: 'namatamu'
*/
(function () {
'use strict';
// =================================================================
// KONFIGURASI ⚙️
// =================================================================
const config = {
selector: '.namatamu',
urlParams: ['to', 'dear', 'kepada'],
defaultText: 'Tamu Undangan'
};
// =================================================================
/**
* Mengambil nama tamu dari URL.
* Dibuat tetap simpel untuk keamanan & keandalan, karena URLSearchParams
* sudah menangani semua decoding (+, %20, dll) sesuai standar.
*/
function getRecipientName(params, keys) {
for (const key of keys) {
const value = params.get(key);
if (value && value.trim()) {
return value.trim();
}
}
return '';
}
/**
* "Membersihkan" string agar aman digunakan di dalam Regular Expression.
* Mencegah error jika placeholder berisi karakter spesial Regex.
*/
function escapeRegExp(string) {
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
}
/**
* Fungsi rekursif untuk mencari dan mengganti konten teks
* tanpa merusak elemen HTML di sekitarnya.
*/
function replaceTextInNode(node, searchValue, replaceValue) {
if (node.nodeType === 1 || node.nodeType === 11) { // Element or Document Fragment
node.childNodes.forEach(child => {
if (child.nodeType === 3) { // Text node
// Gunakan escapeRegExp untuk memastikan searchValue aman.
const safeSearchValue = escapeRegExp(searchValue);
const regex = new RegExp(safeSearchValue, 'gi');
child.textContent = child.textContent.replace(regex, replaceValue);
} else {
replaceTextInNode(child, searchValue, replaceValue);
}
});
}
}
window.addEventListener('DOMContentLoaded', () => {
const params = new URLSearchParams(window.location.search);
const recipient = getRecipientName(params, config.urlParams);
const targets = document.querySelectorAll(config.selector);
if (targets.length === 0) {
console.warn(`WDPCNT: Tidak ditemukan elemen dengan selector '${config.selector}'.`);
return;
}
targets.forEach(element => {
if (recipient) {
replaceTextInNode(element, config.defaultText, recipient);
} else {
if (!element.textContent.trim()) {
element.textContent = config.defaultText;
}
}
});
});
})();
.wdp-bugoy-zoom {
animation-name: wdp-bugoy-zoom;
animation-duration: 1.75s;
transform-origin: center center;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
@keyframes wdp-bugoy-zoom {
0%, 100% {
transform: translate(0px, 0px) rotate(0deg) scale(1);
}
50% {
transform: translate(0px, 0px) rotate(0deg) scale(1.1);
}
}
.wdp-bugoy-01 {
animation-name: wdp-bugoy-01;
animation-duration: 1.2s;
transform-origin: center center;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
@keyframes wdp-bugoy-01 {
0%, 4.17% { transform: translate(0px, 0px) rotate(0deg) scale(1); }
100% { transform: translate(0px, 15px) rotate(-10deg) scale(1.05); }
}
.wdp-bugoy-02-kanan {
animation-name: wdp-bugoy-02-kanan;
animation-duration: 1.4s;
transform-origin: left bottom;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
@keyframes wdp-bugoy-02-kanan {
0%, 0.00% { transform: translate(0px, 0px) rotate(0deg) scale(1); }
100% { transform: translate(0px, 15px) rotate(15deg) scale(1); }
}
.wdp-bugoy-02-kiri {
animation-name: wdp-bugoy-02-kiri;
animation-duration: 1.4s;
transform-origin: right bottom;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
@keyframes wdp-bugoy-02-kiri {
0%, 0.00% { transform: translate(0px, 0px) rotate(0deg) scale(1); }
100% { transform: translate(0px, 15px) rotate(-15deg) scale(1); }
}
/* ====== WDP: Lock Cover + Audio (All-in-One, no ESC) ====== */
(() => {
// Inject CSS langsung via JS
const css = `
body.scroll-lock {
position: fixed; inset: 0; width: 100%; overflow: hidden;
top: var(--lock-top, 0);
}
#section-cover.cover-full { width: 100vw; }
#tombol-buka[hidden] { display: none !important; }
`;
const styleEl = document.createElement('style');
styleEl.id = 'wdp-lock-css';
styleEl.appendChild(document.createTextNode(css));
document.head.appendChild(styleEl);
// Scroll ke atas saat load & matikan auto restore browser
if ('scrollRestoration' in history) history.scrollRestoration = 'manual';
window.addEventListener('load', () => { window.scrollTo(0, 0); });
let isSectionLocked = true;
let savedScrollY = 0;
window.addEventListener('DOMContentLoaded', () => {
const cover = document.getElementById('section-cover');
const btnOpen = document.getElementById('tombol-buka');
const songEl = document.getElementById('song'); // opsional
if (!btnOpen) { console.warn('[lock] #tombol-buka tidak ditemukan'); return; }
// Lock saat awal
lockSection(cover);
// Klik buka
btnOpen.addEventListener('click', async () => {
await unlockSection(cover, btnOpen, songEl);
}, { once: true });
});
function lockSection(cover) {
savedScrollY = window.scrollY || document.documentElement.scrollTop || 0;
document.body.style.setProperty('--lock-top', `-${savedScrollY}px`);
document.body.classList.add('scroll-lock');
if (cover) cover.classList.add('cover-full');
isSectionLocked = true;
}
async function unlockSection(cover, btnOpen, songEl) {
document.body.classList.remove('scroll-lock');
document.body.style.removeProperty('--lock-top');
window.scrollTo(0, savedScrollY);
if (cover) cover.classList.remove('cover-full');
if (btnOpen) btnOpen.hidden = true;
isSectionLocked = false;
await playAudioSafe(songEl);
}
async function playAudioSafe(songEl) {
// HTML
/* ===========================
ATURAN UMUM
=========================== */
.wdpal-fade-in,
.wdpal-muncul-atas,
.wdpal-muncul-bawah,
.wdpal-muncul-kiri,
.wdpal-muncul-kanan,
.wdpal-rotate-in,
.wdpal-flip-x,
.wdpal-flip-y,
.wdpal-zoom-in,
.wdpal-zoom-out {
opacity: 0;
transition-property: transform, opacity;
transition-timing-function: ease;
position: relative;
z-index: 1;
}
.wdpal-fade-in.active,
.wdpal-muncul-atas.active,
.wdpal-muncul-bawah.active,
.wdpal-muncul-kiri.active,
.wdpal-muncul-kanan.active,
.wdpal-rotate-in.active,
.wdpal-flip-x.active,
.wdpal-flip-y.active,
.wdpal-zoom-in.active,
.wdpal-zoom-out.active {
opacity: 1;
}
/* ===========================
DURASI ANIMASI
=========================== */
.wdpal-fade-in,
.wdpal-muncul-atas,
.wdpal-muncul-bawah,
.wdpal-muncul-kiri,
.wdpal-muncul-kanan,
.wdpal-rotate-in,
.wdpal-flip-x,
.wdpal-flip-y,
.wdpal-zoom-in,
.wdpal-zoom-out {
transition-duration: 1.25s; /* Default: Smooth */
}
.very-slow {
transition-duration: 3s;
}
.slow {
transition-duration: 2s;
}
.fast {
transition-duration: 0.75s;
}
.very-fast {
transition-duration: 0.3s;
}
/* ===========================
EFEK FADE IN
=========================== */
.wdpal-fade-in {
transition-delay: 0.2s;
}
/* ===========================
EFEK MUNCUL ATAS
=========================== */
.wdpal-muncul-atas {
transform: translateY(50px);
opacity: 0;
transition-delay: 0.3s;
}
.wdpal-muncul-atas.active {
transform: translateY(0);
opacity: 1;
}
/* ===========================
EFEK MUNCUL BAWAH
=========================== */
.wdpal-muncul-bawah {
transform: translateY(-50px);
opacity: 0;
transition-delay: 0.3s;
}
.wdpal-muncul-bawah.active {
transform: translateY(0);
opacity: 1;
}
/* ===========================
EFEK MUNCUL KIRI
=========================== */
.wdpal-muncul-kiri {
transform: translateX(-50px) scale(0.95);
opacity: 0;
transition-delay: 0.4s;
}
.wdpal-muncul-kiri.active {
transform: translateX(0);
opacity: 1;
}
/* ===========================
EFEK MUNCUL KANAN
=========================== */
.wdpal-muncul-kanan {
transform: translateX(50px) scale(0.95);
opacity: 0;
transition-delay: 0.5s;
}
.wdpal-muncul-kanan.active {
transform: translateX(0);
opacity: 1;
}
/* ===========================
EFEK ROTATE IN
=========================== */
.wdpal-rotate-in {
transform: rotate(-180deg);
opacity: 0;
transition-delay: 0.5s;
}
.wdpal-rotate-in.active {
transform: rotate(0deg);
opacity: 1;
}
/* ===========================
EFEK FLIP X
=========================== */
.wdpal-flip-x {
transform: rotateX(90deg);
transform-style: preserve-3d;
backface-visibility: hidden;
visibility: hidden;
pointer-events: none;
transition-delay: 0.6s;
}
.wdpal-flip-x.active {
transform: rotateX(0deg);
visibility: visible;
pointer-events: auto;
}
/* ===========================
EFEK FLIP Y
=========================== */
.wdpal-flip-y {
transform: rotateY(90deg);
transform-style: preserve-3d;
backface-visibility: hidden;
visibility: hidden;
pointer-events: none;
transition-delay: 0.6s;
}
.wdpal-flip-y.active {
transform: rotateY(0deg);
visibility: visible;
pointer-events: auto;
}
/* ===========================
EFEK ZOOM IN
=========================== */
.wdpal-zoom-in {
transform: scale(0.7);
opacity: 0;
transition-delay: 0.2s;
}
.wdpal-zoom-in.active {
transform: scale(1);
opacity: 1;
}
/* ===========================
EFEK ZOOM OUT
=========================== */
.wdpal-zoom-out {
transform: scale(1.3);
opacity: 0;
transition-delay: 0.2s;
}
.wdpal-zoom-out.active {
transform: scale(1);
opacity: 1;
}
(function () {
// Fungsi utama untuk mengaktifkan animasi
function revealElements(selector) {
const elements = document.querySelectorAll(selector);
const windowHeight = window.innerHeight;
const elementVisible = 150;
elements.forEach(function(element) {
const elementTop = element.getBoundingClientRect().top;
if (elementTop {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("active");
} else {
entry.target.classList.remove("active");
}
});
};
const observer = new IntersectionObserver(observerCallback, observerOptions);
// Panggil fungsi revealElements untuk semua efek animasi
document.addEventListener("DOMContentLoaded", () => {
const selector = ".wdpal-fade-in, .wdpal-muncul-atas, .wdpal-muncul-bawah, .wdpal-muncul-kiri, .wdpal-muncul-kanan, .wdpal-rotate-in, .wdpal-flip-x, .wdpal-flip-y, .wdpal-zoom-in, .wdpal-zoom-out";
// Mengamati elemen dengan Intersection Observer
const elements = document.querySelectorAll(selector);
elements.forEach((element) => {
observer.observe(element);
});
// Panggil fungsi revealElements untuk menambahkan kelas active pada elemen yang sudah terlihat
revealElements(selector);
});
// Tambahkan event listener untuk scroll
window.addEventListener("scroll", () => {
revealElements(".wdpal-fade-in, .wdpal-muncul-atas, .wdpal-muncul-bawah, .wdpal-muncul-kiri, .wdpal-muncul-kanan, .wdpal-rotate-in, .wdpal-flip-x, .wdpal-flip-y, .wdpal-zoom-in, .wdpal-zoom-out");
});
})();
//* script show-hide by andy dari weddingpress — refactor *//
document.addEventListener("DOMContentLoaded", () => {
const btnAmplop = document.getElementById("btnAmplop");
const btnHide = document.getElementById("btn-hide");
const amplop = document.getElementById("amplop");
// Guard jika ada elemen yang tidak ditemukan
if (!btnAmplop || !btnHide || !amplop) {
console.warn("[show-hide] Elemen tidak lengkap: pastikan #btnAmplop, #btn-hide, dan #amplop ada.");
return;
}
// Initial state
btnHide.hidden = true;
amplop.hidden = true;
// ARIA untuk aksesibilitas
btnAmplop.setAttribute("aria-controls", "amplop");
btnAmplop.setAttribute("aria-expanded", "false");
btnHide.setAttribute("aria-controls", "amplop");
btnHide.setAttribute("aria-expanded", "false");
const showAmplop = () => {
btnHide.hidden = false;
btnAmplop.hidden = true;
amplop.hidden = false;
btnAmplop.setAttribute("aria-expanded", "true");
btnHide.setAttribute("aria-expanded", "true");
// Optional: fokuskan ke konten/section saat dibuka
// amplop.focus();
};
const hideAmplop = () => {
btnHide.hidden = true;
btnAmplop.hidden = false;
amplop.hidden = true;
btnAmplop.setAttribute("aria-expanded", "false");
btnHide.setAttribute("aria-expanded", "false");
// Kembalikan fokus ke pemicu agar navigasi keyboard enak
btnAmplop.focus();
};
btnAmplop.addEventListener("click", showAmplop);
btnHide.addEventListener("click", hideAmplop);
// Tutup dengan tombol Escape saat amplop terbuka
document.addEventListener("keydown", (e) => {
if (e.key === "Escape" && !amplop.hidden) {
hideAmplop();
}
});
});
/*!
WeddingPress Custom Nama Tamu (WDPCNT)
============================================
Description:
WeddingPress Custom Nama Tamu (WDPCNT) adalah script JavaScript yang digunakan untuk mengganti teks "Tamu Undangan" pada elemen dengan class `namatamu` berdasarkan parameter yang ada di URL.
Script ini mendukung beberapa parameter seperti `to`, `dear`, dan `kepada` untuk menyesuaikan nama penerima undangan.
Author: Andy dari WeddingPress
Website: https://weddingpress.net
Version: 1.1 (2025/03/01)
License: Anda diizinkan menggunakan script ini pada website Anda dan proyek klien. Tidak diperbolehkan menjual, membagikan, menempatkan codenya ditemplate yang dijual atau mendistribusikan ulang tanpa izin.
Copyright: © 2025 WeddingPress. All rights reserved.
Note:
Pastikan untuk teks 'Tamu Undangan' css classesnya sudah terisi: 'namatamu'
*/
(function () {
'use strict';
// =================================================================
// KONFIGURASI ⚙️
// =================================================================
const config = {
selector: '.namatamu',
urlParams: ['to', 'dear', 'kepada'],
defaultText: 'Tamu Undangan'
};
// =================================================================
/**
* Mengambil nama tamu dari URL.
* Dibuat tetap simpel untuk keamanan & keandalan, karena URLSearchParams
* sudah menangani semua decoding (+, %20, dll) sesuai standar.
*/
function getRecipientName(params, keys) {
for (const key of keys) {
const value = params.get(key);
if (value && value.trim()) {
return value.trim();
}
}
return '';
}
/**
* "Membersihkan" string agar aman digunakan di dalam Regular Expression.
* Mencegah error jika placeholder berisi karakter spesial Regex.
*/
function escapeRegExp(string) {
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
}
/**
* Fungsi rekursif untuk mencari dan mengganti konten teks
* tanpa merusak elemen HTML di sekitarnya.
*/
function replaceTextInNode(node, searchValue, replaceValue) {
if (node.nodeType === 1 || node.nodeType === 11) { // Element or Document Fragment
node.childNodes.forEach(child => {
if (child.nodeType === 3) { // Text node
// Gunakan escapeRegExp untuk memastikan searchValue aman.
const safeSearchValue = escapeRegExp(searchValue);
const regex = new RegExp(safeSearchValue, 'gi');
child.textContent = child.textContent.replace(regex, replaceValue);
} else {
replaceTextInNode(child, searchValue, replaceValue);
}
});
}
}
window.addEventListener('DOMContentLoaded', () => {
const params = new URLSearchParams(window.location.search);
const recipient = getRecipientName(params, config.urlParams);
const targets = document.querySelectorAll(config.selector);
if (targets.length === 0) {
console.warn(`WDPCNT: Tidak ditemukan elemen dengan selector '${config.selector}'.`);
return;
}
targets.forEach(element => {
if (recipient) {
replaceTextInNode(element, config.defaultText, recipient);
} else {
if (!element.textContent.trim()) {
element.textContent = config.defaultText;
}
}
});
});
})();
.wdp-bugoy-zoom {
animation-name: wdp-bugoy-zoom;
animation-duration: 1.75s;
transform-origin: center center;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
@keyframes wdp-bugoy-zoom {
0%, 100% {
transform: translate(0px, 0px) rotate(0deg) scale(1);
}
50% {
transform: translate(0px, 0px) rotate(0deg) scale(1.1);
}
}
.wdp-bugoy-01 {
animation-name: wdp-bugoy-01;
animation-duration: 1.2s;
transform-origin: center center;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
@keyframes wdp-bugoy-01 {
0%, 4.17% { transform: translate(0px, 0px) rotate(0deg) scale(1); }
100% { transform: translate(0px, 15px) rotate(-10deg) scale(1.05); }
}
.wdp-bugoy-02-kanan {
animation-name: wdp-bugoy-02-kanan;
animation-duration: 1.4s;
transform-origin: left bottom;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
@keyframes wdp-bugoy-02-kanan {
0%, 0.00% { transform: translate(0px, 0px) rotate(0deg) scale(1); }
100% { transform: translate(0px, 15px) rotate(15deg) scale(1); }
}
.wdp-bugoy-02-kiri {
animation-name: wdp-bugoy-02-kiri;
animation-duration: 1.4s;
transform-origin: right bottom;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
animation-direction: alternate;
}
@keyframes wdp-bugoy-02-kiri {
0%, 0.00% { transform: translate(0px, 0px) rotate(0deg) scale(1); }
100% { transform: translate(0px, 15px) rotate(-15deg) scale(1); }
}