THE WEDDING OF
Erin & Rohman
19 - 20 April 2026
Kepada Yth. Bapak/Ibu/Saudara/i
Tamu Undangan
" 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
Dengan tidak mengurangi rasa hormat, perkenankan kami mengundang Bapak/Ibu/Saudara/i untuk dapat hadir dalam acara pernikahan kami:
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 :
Minggu - Senin | 19 - 20 April 2026
- 00Hari
- 00Jam
- 00Menit
- 00Detik
Akad Nikah
Minggu, 19 April 2026
Pukul: 09.00 WIB - Selesai
Kediaman Mempelai Wanita
Kp. Babakan, Cijayanti 1, RT. 03/01 Blok Cicerewed, Desa Cijayanti, Kec. Babakan Madang, Kab. Bogor
Resepsi Nikah
Minggu - Senin | 19 - 20 April 2026
Pukul: 10.00 WIB - Selesai
Kediaman Mempelai Wanita
Kp. Babakan, Cijayanti 1, Blok Cicerewed RT. 03/01 , Desa Cijayanti, Kec. Babakan Madang, Kab. Bogor
Our Moment
Wedding Gallery
Beri Doa & Ucapan Terbaikmu
Untuk Kedua Mempelai
Tinggalkan kami doa terbaik anda untuk momen bahagia kami
Hadiah
Amplop Digital
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.
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,
Erin & Rohman
Hormat Kami yang Mengundang:
Bapak Edim Sukmana, S.Pd dan Ibu Upin Sumiati
Bapak Maman dan Ibu Enur
/* ====== 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); }
}