{"id":21,"date":"2026-04-21T09:03:03","date_gmt":"2026-04-21T09:03:03","guid":{"rendered":"https:\/\/kabarnikahan.my.id\/eptes\/?page_id=21"},"modified":"2026-04-21T09:17:31","modified_gmt":"2026-04-21T09:17:31","slug":"tes","status":"publish","type":"page","link":"https:\/\/kabarnikahan.my.id\/eptes\/tes\/","title":{"rendered":"tes"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"21\" class=\"elementor elementor-21\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-92f16cc elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"92f16cc\" data-element_type=\"section\" data-e-type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-bced958\" data-id=\"bced958\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-62bed6e elementor-widget elementor-widget-html\" data-id=\"62bed6e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,500;1,400&family=DM+Sans:wght@300;400;500&display=swap\" rel=\"stylesheet\" \/>\r\n\r\n<style>\r\n.rsvp-wrap * { box-sizing: border-box; margin: 0; padding: 0; }\r\n.rsvp-wrap {\r\n  font-family: 'DM Sans', sans-serif;\r\n  background: #f5ede0;\r\n  border-radius: 16px;\r\n  padding: 2rem 1.25rem 2.5rem;\r\n  max-width: 480px;\r\n  margin: 0 auto;\r\n}\r\n.rsvp-ornament {\r\n  font-family: 'Playfair Display', serif;\r\n  font-size: 12px;\r\n  letter-spacing: 4px;\r\n  color: #a07850;\r\n  text-transform: uppercase;\r\n  text-align: center;\r\n  margin-bottom: 6px;\r\n}\r\n.rsvp-title {\r\n  font-family: 'Playfair Display', serif;\r\n  font-size: 26px;\r\n  font-weight: 400;\r\n  color: #5c3d1e;\r\n  text-align: center;\r\n  margin-bottom: 4px;\r\n}\r\n.rsvp-count {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 7px;\r\n  font-size: 13px;\r\n  color: #8a6545;\r\n  margin-bottom: 1.5rem;\r\n}\r\n.rsvp-badge {\r\n  background: #c9956a;\r\n  color: #fff8f0;\r\n  border-radius: 20px;\r\n  padding: 2px 10px;\r\n  font-size: 12px;\r\n  font-weight: 500;\r\n}\r\n.rsvp-card {\r\n  background: rgba(255,252,248,0.9);\r\n  border: 1px solid #e8d5be;\r\n  border-radius: 14px;\r\n  padding: 1.25rem;\r\n  margin-bottom: 1.5rem;\r\n}\r\n.rsvp-toast {\r\n  background: #d4ead0;\r\n  color: #3a6e34;\r\n  border: 1px solid #b5d9b0;\r\n  border-radius: 10px;\r\n  padding: 10px 14px;\r\n  font-size: 13px;\r\n  margin-bottom: 12px;\r\n  display: none;\r\n}\r\n.rsvp-toast.show { display: block; }\r\n.rsvp-group { margin-bottom: 12px; }\r\n.rsvp-group input,\r\n.rsvp-group select,\r\n.rsvp-group textarea {\r\n  width: 100%;\r\n  padding: 11px 14px;\r\n  border: 1px solid #ddc9b0;\r\n  border-radius: 10px;\r\n  background: #fffdf8;\r\n  font-family: 'DM Sans', sans-serif;\r\n  font-size: 14px;\r\n  color: #5c3d1e;\r\n  outline: none;\r\n  transition: border-color 0.2s, box-shadow 0.2s;\r\n}\r\n.rsvp-group input:focus,\r\n.rsvp-group select:focus,\r\n.rsvp-group textarea:focus {\r\n  border-color: #c9956a;\r\n  box-shadow: 0 0 0 3px rgba(201,149,106,0.15);\r\n}\r\n.rsvp-group input::placeholder,\r\n.rsvp-group textarea::placeholder { color: #bba888; }\r\n.rsvp-group select {\r\n  appearance: none;\r\n  -webkit-appearance: none;\r\n  background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c9956a' stroke-width='1.5' fill='none' stroke-linecap='round'\/%3E%3C\/svg%3E\");\r\n  background-repeat: no-repeat;\r\n  background-position: right 14px center;\r\n  background-color: #fffdf8;\r\n  padding-right: 36px;\r\n  cursor: pointer;\r\n}\r\n.rsvp-group textarea {\r\n  resize: vertical;\r\n  min-height: 90px;\r\n  line-height: 1.6;\r\n}\r\n.rsvp-btn {\r\n  width: 100%;\r\n  padding: 12px;\r\n  background: #c9956a;\r\n  color: #fff8f0;\r\n  border: none;\r\n  border-radius: 10px;\r\n  font-family: 'DM Sans', sans-serif;\r\n  font-size: 14px;\r\n  font-weight: 500;\r\n  cursor: pointer;\r\n  letter-spacing: 0.5px;\r\n  transition: background 0.2s, transform 0.1s;\r\n}\r\n.rsvp-btn:hover { background: #b5804f; }\r\n.rsvp-btn:active { transform: scale(0.98); }\r\n.rsvp-btn:disabled { background: #d4b89a; cursor: default; }\r\n.rsvp-divider {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n  margin-bottom: 1.25rem;\r\n  color: #b09070;\r\n  font-size: 12px;\r\n  letter-spacing: 1.5px;\r\n  text-transform: uppercase;\r\n}\r\n.rsvp-divider::before,\r\n.rsvp-divider::after {\r\n  content: '';\r\n  flex: 1;\r\n  border-top: 1px solid #ddc9b0;\r\n}\r\n.rsvp-list { display: flex; flex-direction: column; gap: 10px; }\r\n.rsvp-item {\r\n  background: rgba(255,252,248,0.85);\r\n  border: 1px solid #e8d5be;\r\n  border-radius: 14px;\r\n  padding: 14px 15px;\r\n  animation: rsvpFade 0.35s ease both;\r\n}\r\n@keyframes rsvpFade {\r\n  from { opacity: 0; transform: translateY(8px); }\r\n  to   { opacity: 1; transform: none; }\r\n}\r\n.rsvp-item-header {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n  margin-bottom: 8px;\r\n}\r\n.rsvp-avatar {\r\n  width: 36px; height: 36px;\r\n  border-radius: 50%;\r\n  background: #c9956a;\r\n  color: #fff8f0;\r\n  font-size: 13px;\r\n  font-weight: 500;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n}\r\n.rsvp-info { flex: 1; min-width: 0; }\r\n.rsvp-name {\r\n  font-weight: 500;\r\n  font-size: 14px;\r\n  color: #5c3d1e;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n}\r\n.rsvp-pill {\r\n  display: inline-block;\r\n  font-size: 11px;\r\n  padding: 2px 9px;\r\n  border-radius: 20px;\r\n  font-weight: 500;\r\n  margin-top: 3px;\r\n}\r\n.pill-hadir { background: #d4ead0; color: #3a6e34; }\r\n.pill-tidak { background: #f5ddd8; color: #8a3626; }\r\n.pill-ragu  { background: #f0e8d5; color: #7a5e28; }\r\n.rsvp-time {\r\n  font-size: 11px;\r\n  color: #b09070;\r\n  white-space: nowrap;\r\n  flex-shrink: 0;\r\n}\r\n.rsvp-msg {\r\n  font-size: 13.5px;\r\n  color: #6b4c2a;\r\n  line-height: 1.65;\r\n}\r\n.rsvp-empty {\r\n  text-align: center;\r\n  padding: 2rem 1rem;\r\n  color: #b09070;\r\n  font-family: 'Playfair Display', serif;\r\n  font-style: italic;\r\n  font-size: 15px;\r\n}\r\n<\/style>\r\n\r\n<div class=\"rsvp-wrap\">\r\n  <div class=\"rsvp-ornament\">\u2726 &nbsp; Buku Tamu &nbsp; \u2726<\/div>\r\n  <div class=\"rsvp-title\">Ucapan & Doa<\/div>\r\n  <div class=\"rsvp-count\" id=\"rsvp-count\"><span>Memuat...<\/span><\/div>\r\n\r\n  <div class=\"rsvp-card\">\r\n    <div class=\"rsvp-toast\" id=\"rsvp-toast\">Ucapan kamu berhasil terkirim! Terima kasih \ud83e\udd0d<\/div>\r\n    <div class=\"rsvp-group\">\r\n      <input type=\"text\" id=\"rsvp-nama\" placeholder=\"Nama kamu\" maxlength=\"60\" \/>\r\n    <\/div>\r\n    <div class=\"rsvp-group\">\r\n      <select id=\"rsvp-status\">\r\n        <option value=\"\">Konfirmasi Kehadiran<\/option>\r\n        <option value=\"hadir\">Hadir<\/option>\r\n        <option value=\"tidak\">Tidak Hadir<\/option>\r\n        <option value=\"ragu\">Masih Ragu-ragu<\/option>\r\n      <\/select>\r\n    <\/div>\r\n    <div class=\"rsvp-group\">\r\n      <textarea id=\"rsvp-ucapan\" placeholder=\"Tulis ucapan atau doa...\" maxlength=\"300\"><\/textarea>\r\n    <\/div>\r\n    <button class=\"rsvp-btn\" id=\"rsvp-btn\" onclick=\"rsvpKirim()\">Kirim<\/button>\r\n  <\/div>\r\n\r\n  <div class=\"rsvp-divider\">Ucapan Tamu<\/div>\r\n  <div class=\"rsvp-list\" id=\"rsvp-list\">\r\n    <div class=\"rsvp-empty\">Memuat ucapan...<\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function() {\r\n\r\n  var API = 'https:\/\/kabarnikahan.my.id\/eptes\/wp-json\/rsvp\/v1\/ucapan';\r\n\r\n  function esc(s) {\r\n    return String(s).replace(\/&\/g,'&amp;').replace(\/<\/g,'&lt;').replace(\/>\/g,'&gt;');\r\n  }\r\n  function initials(n) {\r\n    return n.trim().split(' ').slice(0,2).map(function(w){ return w[0]; }).join('').toUpperCase();\r\n  }\r\n  function timeAgo(ts) {\r\n    var d = Date.now() - ts, m = Math.floor(d\/60000), h = Math.floor(m\/60), dd = Math.floor(h\/24);\r\n    if (m < 1)  return 'Baru saja';\r\n    if (m < 60) return m + ' menit lalu';\r\n    if (h < 24) return h + ' jam lalu';\r\n    return dd + ' hari lalu';\r\n  }\r\n  function pillClass(v) {\r\n    return v==='hadir' ? 'pill-hadir' : v==='tidak' ? 'pill-tidak' : 'pill-ragu';\r\n  }\r\n  function pillLabel(v) {\r\n    return v==='hadir' ? 'Hadir' : v==='tidak' ? 'Tidak Hadir' : 'Ragu-ragu';\r\n  }\r\n\r\n  function render(list) {\r\n    var n       = list.length;\r\n    var countEl = document.getElementById('rsvp-count');\r\n    var listEl  = document.getElementById('rsvp-list');\r\n\r\n    countEl.innerHTML = n === 0\r\n      ? '<span>Belum ada ucapan<\/span>'\r\n      : '<span class=\"rsvp-badge\">' + n + '<\/span><span>Ucapan Tamu<\/span>';\r\n\r\n    if (n === 0) {\r\n      listEl.innerHTML = '<div class=\"rsvp-empty\">Jadilah yang pertama memberikan ucapan \u2728<\/div>';\r\n      return;\r\n    }\r\n\r\n    listEl.innerHTML = list.slice().reverse().map(function(item, i) {\r\n      return '<div class=\"rsvp-item\" style=\"animation-delay:' + (i * 0.05) + 's\">'\r\n        + '<div class=\"rsvp-item-header\">'\r\n        + '<div class=\"rsvp-avatar\">' + initials(item.nama) + '<\/div>'\r\n        + '<div class=\"rsvp-info\">'\r\n        + '<div class=\"rsvp-name\">' + esc(item.nama) + '<\/div>'\r\n        + '<span class=\"rsvp-pill ' + pillClass(item.status) + '\">' + pillLabel(item.status) + '<\/span>'\r\n        + '<\/div>'\r\n        + '<span class=\"rsvp-time\">' + timeAgo(item.ts) + '<\/span>'\r\n        + '<\/div>'\r\n        + '<div class=\"rsvp-msg\">' + esc(item.ucapan) + '<\/div>'\r\n        + '<\/div>';\r\n    }).join('');\r\n  }\r\n\r\n  function fetchData() {\r\n    fetch(API)\r\n      .then(function(r) { return r.json(); })\r\n      .then(function(list) { render(Array.isArray(list) ? list : []); })\r\n      .catch(function() {\r\n        document.getElementById('rsvp-list').innerHTML =\r\n          '<div class=\"rsvp-empty\">Gagal memuat ucapan. Coba refresh halaman.<\/div>';\r\n      });\r\n  }\r\n\r\n  window.rsvpKirim = function() {\r\n    var nama   = document.getElementById('rsvp-nama').value.trim();\r\n    var status = document.getElementById('rsvp-status').value;\r\n    var ucapan = document.getElementById('rsvp-ucapan').value.trim();\r\n    var btn    = document.getElementById('rsvp-btn');\r\n    var toast  = document.getElementById('rsvp-toast');\r\n\r\n    if (!nama)   { alert('Mohon isi nama kamu ya!'); return; }\r\n    if (!status) { alert('Pilih konfirmasi kehadiran dulu ya!'); return; }\r\n    if (!ucapan) { alert('Tuliskan ucapan atau doamu ya!'); return; }\r\n\r\n    btn.disabled    = true;\r\n    btn.textContent = 'Mengirim...';\r\n\r\n    fetch(API, {\r\n      method: 'POST',\r\n      headers: { 'Content-Type': 'application\/json' },\r\n      body: JSON.stringify({ nama: nama, status: status, ucapan: ucapan })\r\n    })\r\n    .then(function(r) { return r.json(); })\r\n    .then(function(res) {\r\n      if (res.success) {\r\n        document.getElementById('rsvp-nama').value   = '';\r\n        document.getElementById('rsvp-status').value = '';\r\n        document.getElementById('rsvp-ucapan').value = '';\r\n        toast.classList.add('show');\r\n        setTimeout(function() { toast.classList.remove('show'); }, 3500);\r\n        fetchData();\r\n      } else {\r\n        alert('Gagal mengirim, coba lagi ya.');\r\n      }\r\n      btn.disabled    = false;\r\n      btn.textContent = 'Kirim';\r\n    })\r\n    .catch(function() {\r\n      btn.disabled    = false;\r\n      btn.textContent = 'Kirim';\r\n      alert('Gagal mengirim, coba lagi ya.');\r\n    });\r\n  };\r\n\r\n  fetchData();\r\n  setInterval(fetchData, 30000);\r\n\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u2726 &nbsp; Buku Tamu &nbsp; \u2726 Ucapan &#038; Doa Memuat&#8230; Ucapan kamu berhasil terkirim! Terima kasih \ud83e\udd0d Konfirmasi KehadiranHadirTidak HadirMasih [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-21","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/kabarnikahan.my.id\/eptes\/wp-json\/wp\/v2\/pages\/21","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kabarnikahan.my.id\/eptes\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kabarnikahan.my.id\/eptes\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kabarnikahan.my.id\/eptes\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kabarnikahan.my.id\/eptes\/wp-json\/wp\/v2\/comments?post=21"}],"version-history":[{"count":10,"href":"https:\/\/kabarnikahan.my.id\/eptes\/wp-json\/wp\/v2\/pages\/21\/revisions"}],"predecessor-version":[{"id":32,"href":"https:\/\/kabarnikahan.my.id\/eptes\/wp-json\/wp\/v2\/pages\/21\/revisions\/32"}],"wp:attachment":[{"href":"https:\/\/kabarnikahan.my.id\/eptes\/wp-json\/wp\/v2\/media?parent=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}