Sistem Kasir Kantin UMKM<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;600;700;900&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n body {\r\n font-family: 'Montserrat', sans-serif;\r\n \/* Background image with bright, dramatic daylight lighting *\/\r\n background-image: url('https:\/\/images.unsplash.com\/photo-1497366216548-37526070297c?q=80&w=2569&auto=format&fit=crop');\r\n background-size: cover;\r\n background-position: center;\r\n background-attachment: fixed;\r\n background-color: #f8f9fa;\r\n -webkit-tap-highlight-color: transparent;\r\n }\r\n \r\n \/* Bright overlay to ensure negative space and monochrome text readability *\/\r\n .bg-overlay {\r\n background: linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(245,240,255,0.88) 100%);\r\n }\r\n\r\n \/* Glassmorphism panel - Light Theme *\/\r\n .glass-panel {\r\n background: rgba(255, 255, 255, 0.7);\r\n backdrop-filter: blur(24px);\r\n -webkit-backdrop-filter: blur(24px);\r\n border: 1px solid rgba(139, 92, 246, 0.25);\r\n box-shadow: 0 25px 50px -12px rgba(139, 92, 246, 0.1);\r\n }\r\n\r\n \/* Custom Scrollbar for sleek look on Desktop *\/\r\n @media (min-width: 1024px) {\r\n ::-webkit-scrollbar {\r\n width: 6px;\r\n }\r\n ::-webkit-scrollbar-track {\r\n background: rgba(0, 0, 0, 0.03);\r\n border-radius: 4px;\r\n }\r\n ::-webkit-scrollbar-thumb {\r\n background: rgba(139, 92, 246, 0.4);\r\n border-radius: 4px;\r\n }\r\n ::-webkit-scrollbar-thumb:hover {\r\n background: rgba(139, 92, 246, 0.7);\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"text-gray-800 min-h-[100dvh] relative antialiased pb-20 lg:pb-0\">\r\n \r\n <div class=\"absolute inset-0 bg-overlay pointer-events-none z-0 fixed\"><\/div>\r\n\r\n <div class=\"relative z-10 container mx-auto px-4 py-6 md:py-10 min-h-[100dvh] flex flex-col\">\r\n \r\n <header class=\"mb-8 md:mb-10 text-center md:text-left\">\r\n <h1 class=\"text-3xl md:text-5xl font-black tracking-tight text-gray-900 mb-2\">\r\n Kantin <span class=\"text-purple-600\">Digital.<\/span>\r\n <\/h1>\r\n <p class=\"text-gray-500 font-medium text-base md:text-lg tracking-wide\">Kelola pesanan UMKM Anda dengan cepat.<\/p>\r\n <\/header>\r\n\r\n \r\n <div class=\"flex-1 grid grid-cols-1 lg:grid-cols-3 gap-6 md:gap-8 items-start\">\r\n \r\n \r\n <div class=\"lg:col-span-2 glass-panel rounded-3xl p-5 md:p-8\">\r\n <div class=\"flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6 md:mb-8\">\r\n <h2 class=\"text-xl md:text-2xl font-bold text-gray-900 flex items-center gap-3\">\r\n <i data-lucide=\"layout-grid\" class=\"text-purple-600 w-6 h-6\"><\/i>\r\n Menu Kantin\r\n <\/h2>\r\n <div class=\"text-xs md:text-sm text-purple-700 font-bold bg-purple-100\/80 px-4 py-2 rounded-full border border-purple-200 whitespace-nowrap shadow-sm\">\r\n Harga Diskon 40%\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"products-container\" class=\"grid grid-cols-1 sm:grid-cols-2 gap-3 md:gap-4 lg:max-h-[60vh] lg:overflow-y-auto lg:pr-3 pb-4\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"cart-section\" class=\"glass-panel rounded-3xl p-5 md:p-8 lg:sticky lg:top-8 scroll-mt-6\">\r\n <h2 class=\"text-xl md:text-2xl font-bold text-gray-900 flex items-center gap-3 mb-6 border-b border-gray-200\/80 pb-4\">\r\n <i data-lucide=\"receipt\" class=\"text-purple-600 w-6 h-6\"><\/i>\r\n Detail Pesanan\r\n <\/h2>\r\n\r\n \r\n <div id=\"empty-cart\" class=\"py-10 md:py-12 text-center text-gray-400 flex flex-col items-center\">\r\n <i data-lucide=\"shopping-cart\" class=\"w-14 h-14 md:w-16 md:h-16 mb-4 opacity-40 text-purple-300\"><\/i>\r\n <p class=\"font-medium text-sm md:text-base\">Belum ada pesanan terpilih.<\/p>\r\n <\/div>\r\n\r\n \r\n <div id=\"cart-container\" class=\"space-y-4 mb-6 max-h-[40vh] lg:max-h-[35vh] overflow-y-auto pr-2\">\r\n \r\n <\/div>\r\n\r\n \r\n <div id=\"cart-footer\" class=\"hidden border-t border-gray-200\/80 pt-6 mt-auto\">\r\n <div class=\"mb-5\">\r\n <label for=\"customer-name\" class=\"block text-sm font-bold text-gray-700 mb-2\">Nama Pelanggan <span class=\"text-purple-600\">*<\/span><\/label>\r\n <input type=\"text\" id=\"customer-name\" placeholder=\"Ketik nama pelanggan...\" class=\"w-full bg-white\/80 border border-gray-300 focus:border-purple-500 focus:ring-2 focus:ring-purple-200 rounded-xl px-4 py-3 text-base text-gray-900 placeholder-gray-400 outline-none transition-all shadow-sm\">\r\n <\/div>\r\n <div class=\"flex justify-between items-center mb-6 border-t border-gray-100 pt-5\">\r\n <span class=\"text-gray-600 font-bold\">Total Pembayaran<\/span>\r\n <span id=\"grand-total\" class=\"text-2xl md:text-3xl font-black text-gray-900 tracking-tight\">Rp 0<\/span>\r\n <\/div>\r\n <button onclick=\"checkout()\" class=\"w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-4 rounded-xl transition-all duration-300 transform active:scale-95 shadow-[0_8px_20px_rgba(139,92,246,0.25)] flex items-center justify-center gap-2 text-base md:text-lg\">\r\n <i data-lucide=\"check-circle\" class=\"w-5 h-5\"><\/i>\r\n Selesaikan Pesanan\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"mobile-cart-bar\" class=\"lg:hidden fixed bottom-0 left-0 right-0 p-4 bg-white\/95 backdrop-blur-xl border-t border-gray-200 transform translate-y-full transition-transform duration-300 z-50 rounded-t-3xl shadow-[0_-10px_40px_rgba(0,0,0,0.1)]\">\r\n <div class=\"flex justify-between items-center gap-4 max-w-md mx-auto\">\r\n <div class=\"flex-1\">\r\n <p class=\"text-xs text-gray-500 font-bold mb-0.5\">Total Belanja<\/p>\r\n <p id=\"mobile-grand-total\" class=\"text-lg font-black text-gray-900 tracking-tight\">Rp 0<\/p>\r\n <\/div>\r\n <button onclick=\"scrollToCart()\" class=\"bg-purple-600 active:bg-purple-700 text-white font-bold py-3 px-6 rounded-xl transition-all active:scale-95 shadow-[0_4px_15px_rgba(139,92,246,0.3)] flex items-center gap-2 text-sm\">\r\n <i data-lucide=\"shopping-bag\" class=\"w-4 h-4\"><\/i>\r\n Lihat Kasir\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Initialize Icons\r\n lucide.createIcons();\r\n\r\n \/\/ Data Produk Terbaru (Update Terakhir)\r\n const products = [\r\n \/\/ --- Kategori Makanan ---\r\n { id: 1, name: \"Chitato Sapi Panggang\", price: 1044, category: 'makanan' },\r\n { id: 2, name: \"Chitato Lite 14gr\", price: 1044, category: 'makanan' },\r\n { id: 3, name: \"Smax Ring\", price: 1020, category: 'makanan' },\r\n { id: 4, name: \"Chiki twist\", price: 1014, category: 'makanan' }, \/\/ Harga diupdate\r\n { id: 5, name: \"Saltchese\", price: 540, category: 'makanan' }, \/\/ Harga diupdate\r\n { id: 6, name: \"Tictac sapi panggang\", price: 1020, category: 'makanan' },\r\n { id: 9, name: \"Nabati Keju AH\", price: 510, category: 'makanan' },\r\n { id: 10, name: \"Better\", price: 1005, category: 'makanan' },\r\n { id: 16, name: \"Pilus Garuda\", price: 510, category: 'makanan' },\r\n { id: 17, name: \"Roma Malkist Abon\", price: 540, category: 'makanan' },\r\n { id: 18, name: \"Rosta Pedas\", price: 1020, category: 'makanan' },\r\n { id: 19, name: \"Sosis Kenzler Hot\", price: 5100, category: 'makanan' },\r\n { id: 20, name: \"Slai Olay\", price: 875, category: 'makanan' },\r\n { id: 24, name: \"Roma Malkist Coklat\", price: 540, category: 'makanan' },\r\n { id: 25, name: \"Roma Malkist Crackers\", price: 540, category: 'makanan' },\r\n { id: 26, name: \"Astor\", price: 540, category: 'makanan' },\r\n { id: 32, name: \"Taro\", price: 1002, category: 'makanan' }, \/\/ Produk Baru\r\n { id: 33, name: \"Mie gelas all variant\", price: 534, category: 'makanan' }, \/\/ Produk Baru\r\n { id: 34, name: \"Pocky\", price: 5700, category: 'makanan' }, \/\/ Produk Baru\r\n\r\n \/\/ --- Kategori Minuman ---\r\n { id: 7, name: \"Ultramilk strawberry\", price: 3900, category: 'minuman' }, \/\/ Harga diupdate\r\n { id: 8, name: \"Milo\", price: 2790, category: 'minuman' }, \/\/ Harga diupdate\r\n { id: 11, name: \"Teh Kotak Less Sugar\", price: 2220, category: 'minuman' },\r\n { id: 12, name: \"Teh Kotak Melati\", price: 2220, category: 'minuman' }, \/\/ Nama dan harga diupdate\r\n { id: 13, name: \"Hydrococo\", price: 3600, category: 'minuman' }, \/\/ Harga diupdate\r\n { id: 14, name: \"Larutan Badak melon\", price: 3600, category: 'minuman' }, \/\/ Nama dan harga diupdate\r\n { id: 15, name: \"Yakult\", price: 1320, category: 'minuman' },\r\n { id: 21, name: \"Ultramilk Coklat\", price: 3780, category: 'minuman' },\r\n { id: 22, name: \"Teh Kotak Blackcurrent\", price: 2220, category: 'minuman' },\r\n { id: 23, name: \"Ultramilk Fullcream\", price: 3000, category: 'minuman' },\r\n { id: 27, name: \"Teh Kotak Leci\", price: 2220, category: 'minuman' },\r\n { id: 28, name: \"Teh Kotak Mango\", price: 2220, category: 'minuman' },\r\n { id: 29, name: \"Larutan jeruk\", price: 3240, category: 'minuman' },\r\n { id: 30, name: \"Cimory Mantcha\", price: 3300, category: 'minuman' },\r\n { id: 31, name: \"Cimory Coklat Almond\", price: 3300, category: 'minuman' },\r\n { id: 36, name: \"Teh kotak sosro\", price: 1500, category: 'minuman' }, \/\/ Produk Baru\r\n { id: 35, name: \"Cimory Coklat Hazelnut\", price: 3480, category: 'minuman' } \/\/ Produk Baru\r\n ];\r\n\r\n \/\/ Definisi Kategori\r\n const categories = [\r\n { id: 'makanan', label: 'Makanan Ringan', icon: 'utensils' },\r\n { id: 'minuman', label: 'Minuman Segar', icon: 'cup-soda' }\r\n ];\r\n\r\n \/\/ State Cart\r\n let cart = {};\r\n\r\n \/\/ Format Currency IDR\r\n const formatRupiah = (number) => {\r\n return new Intl.NumberFormat('id-ID', {\r\n style: 'currency',\r\n currency: 'IDR',\r\n minimumFractionDigits: 0,\r\n maximumFractionDigits: 0\r\n }).format(number);\r\n };\r\n\r\n \/\/ Scroll to Cart function for mobile\r\n window.scrollToCart = () => {\r\n document.getElementById('cart-section').scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n setTimeout(() => {\r\n document.getElementById('customer-name').focus();\r\n }, 500);\r\n };\r\n\r\n \/\/ Render Products List with Categories\r\n const renderProducts = () => {\r\n const container = document.getElementById('products-container');\r\n container.innerHTML = '';\r\n\r\n categories.forEach(cat => {\r\n const catProducts = products.filter(p => p.category === cat.id);\r\n if (catProducts.length === 0) return;\r\n\r\n \/\/ Category Header\r\n const catHeader = document.createElement('div');\r\n catHeader.className = 'col-span-full mt-6 mb-2 first:mt-0 flex items-center gap-2 text-gray-900 font-black text-lg md:text-xl border-b border-gray-200\/60 pb-2';\r\n catHeader.innerHTML = `<i data-lucide=\"${cat.icon}\" class=\"w-5 h-5 md:w-6 md:h-6 text-purple-600\"><\/i> ${cat.label}`;\r\n container.appendChild(catHeader);\r\n\r\n \/\/ Products for this category\r\n catProducts.forEach(product => {\r\n const qty = cart[product.id] || 0;\r\n \r\n const card = document.createElement('div');\r\n card.className = `p-3 md:p-4 rounded-2xl border transition-all duration-300 flex items-center justify-between shadow-sm ${qty > 0 ? 'bg-purple-50\/90 border-purple-400 shadow-[0_4px_15px_rgba(139,92,246,0.1)]' : 'bg-white\/80 border-gray-200 hover:border-purple-300 hover:shadow-md'}`;\r\n \r\n card.innerHTML = `\r\n <div class=\"flex-1 min-w-0 pr-2\">\r\n <h3 class=\"font-bold text-gray-900 text-sm md:text-base mb-1 truncate\">${product.name}<\/h3>\r\n <p class=\"text-purple-700 font-bold text-xs md:text-sm\">${formatRupiah(product.price)}<\/p>\r\n <\/div>\r\n <div class=\"flex items-center gap-2 md:gap-3 bg-white p-1 md:p-1.5 rounded-full border border-gray-200 shrink-0 shadow-sm\">\r\n <button onclick=\"updateCart(${product.id}, -1)\" class=\"w-7 h-7 md:w-8 md:h-8 flex items-center justify-center rounded-full ${qty > 0 ? 'bg-gray-100 text-gray-800 hover:bg-gray-200' : 'bg-gray-50 text-gray-300'} transition-colors active:scale-90\" ${qty === 0 ? 'disabled' : ''}>\r\n <i data-lucide=\"minus\" class=\"w-3 h-3 md:w-4 md:h-4\"><\/i>\r\n <\/button>\r\n <span class=\"w-4 md:w-6 text-center font-black text-gray-900 text-xs md:text-sm\">${qty}<\/span>\r\n <button onclick=\"updateCart(${product.id}, 1)\" class=\"w-7 h-7 md:w-8 md:h-8 flex items-center justify-center rounded-full bg-purple-600 text-white hover:bg-purple-700 transition-colors active:scale-90 shadow-[0_2px_8px_rgba(139,92,246,0.4)]\">\r\n <i data-lucide=\"plus\" class=\"w-3 h-3 md:w-4 md:h-4\"><\/i>\r\n <\/button>\r\n <\/div>\r\n `;\r\n container.appendChild(card);\r\n });\r\n });\r\n\r\n \/\/ Re-init newly added icons\r\n lucide.createIcons();\r\n };\r\n\r\n \/\/ Render Cart Summary\r\n const renderCart = () => {\r\n const container = document.getElementById('cart-container');\r\n const emptyState = document.getElementById('empty-cart');\r\n const footer = document.getElementById('cart-footer');\r\n const grandTotalEl = document.getElementById('grand-total');\r\n \r\n \/\/ Mobile Floating elements\r\n const mobileCartBar = document.getElementById('mobile-cart-bar');\r\n const mobileGrandTotalEl = document.getElementById('mobile-grand-total');\r\n \r\n container.innerHTML = '';\r\n let total = 0;\r\n let hasItems = false;\r\n\r\n products.forEach(product => {\r\n const qty = cart[product.id];\r\n if (qty > 0) {\r\n hasItems = true;\r\n const subtotal = qty * product.price;\r\n total += subtotal;\r\n\r\n const itemEl = document.createElement('div');\r\n itemEl.className = 'flex justify-between items-center py-3 border-b border-gray-100 last:border-0';\r\n itemEl.innerHTML = `\r\n <div class=\"flex-1 pr-2\">\r\n <p class=\"text-sm font-bold text-gray-900 truncate\">${product.name}<\/p>\r\n <p class=\"text-xs text-gray-500 font-medium mt-0.5\">${qty} x ${formatRupiah(product.price)}<\/p>\r\n <\/div>\r\n <div class=\"text-right shrink-0\">\r\n <p class=\"font-black text-purple-700 text-sm md:text-base\">${formatRupiah(subtotal)}<\/p>\r\n <\/div>\r\n `;\r\n container.appendChild(itemEl);\r\n }\r\n });\r\n\r\n if (hasItems) {\r\n emptyState.classList.add('hidden');\r\n footer.classList.remove('hidden');\r\n grandTotalEl.innerText = formatRupiah(total);\r\n \r\n \/\/ Show Mobile Bar\r\n mobileGrandTotalEl.innerText = formatRupiah(total);\r\n mobileCartBar.classList.remove('translate-y-full');\r\n } else {\r\n emptyState.classList.remove('hidden');\r\n footer.classList.add('hidden');\r\n \r\n \/\/ Hide Mobile Bar\r\n mobileCartBar.classList.add('translate-y-full');\r\n }\r\n };\r\n\r\n \/\/ Update Cart Logic\r\n window.updateCart = (productId, change) => {\r\n if (!cart[productId]) cart[productId] = 0;\r\n \r\n cart[productId] += change;\r\n \r\n if (cart[productId] < 0) cart[productId] = 0;\r\n \r\n renderProducts();\r\n renderCart();\r\n };\r\n\r\n \/\/ Checkout function\r\n window.checkout = () => {\r\n const customerNameInput = document.getElementById('customer-name');\r\n const customerName = customerNameInput.value.trim();\r\n \r\n \/\/ Validasi nama kosong\r\n if (!customerName) {\r\n customerNameInput.classList.add('border-red-500', 'ring-2', 'ring-red-200');\r\n customerNameInput.focus();\r\n setTimeout(() => customerNameInput.classList.remove('border-red-500', 'ring-2', 'ring-red-200'), 2000);\r\n return;\r\n }\r\n\r\n \/\/ Susun Format Pesan WhatsApp\r\n let waMessage = `*Halo, ada pesanan baru dari Kantin!*%0A%0A`;\r\n waMessage += `*Nama Pelanggan:* ${customerName}%0A`;\r\n waMessage += `*Detail Pesanan:*%0A`;\r\n \r\n let total = 0;\r\n products.forEach(product => {\r\n const qty = cart[product.id];\r\n if (qty > 0) {\r\n const subtotal = qty * product.price;\r\n total += subtotal;\r\n waMessage += `- ${qty}x ${product.name} (Rp ${subtotal.toLocaleString('id-ID')})%0A`;\r\n }\r\n });\r\n\r\n waMessage += `%0A*Total Belanja:* Rp ${total.toLocaleString('id-ID')}%0A`;\r\n waMessage += `%0AMohon segera disiapkan, terima kasih!`;\r\n\r\n \/\/ Buka Link WA \r\n const waNumber = \"6282322538017\";\r\n const waUrl = `https:\/\/wa.me\/${waNumber}?text=${waMessage}`;\r\n window.open(waUrl, '_blank');\r\n \r\n \/\/ Tampilkan Pesan Sukses Visual (Light Theme Modal)\r\n const message = document.createElement('div');\r\n message.className = 'fixed inset-0 z-[60] flex items-center justify-center bg-black\/40 backdrop-blur-md opacity-0 transition-opacity duration-300 p-4';\r\n message.innerHTML = `\r\n <div class=\"bg-white p-6 md:p-8 rounded-3xl max-w-sm w-full text-center transform scale-95 transition-transform duration-300 shadow-2xl border border-gray-100\">\r\n <div class=\"w-16 h-16 md:w-20 md:h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-6\">\r\n <i data-lucide=\"send\" class=\"w-8 h-8 md:w-10 md:h-10 text-purple-600\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl md:text-2xl font-black text-gray-900 mb-2\">Meneruskan ke WA...<\/h3>\r\n <p class=\"text-sm md:text-base text-gray-500 font-medium mb-8\">Pesanan Kak ${customerName} sedang dikirim ke dapur Anda.<\/p>\r\n <button id=\"close-msg\" class=\"w-full bg-gray-900 text-white font-bold py-4 rounded-xl hover:bg-gray-800 transition-colors text-sm md:text-base shadow-lg\">\r\n Selesai & Buat Pesanan Baru\r\n <\/button>\r\n <\/div>\r\n `;\r\n \r\n document.body.appendChild(message);\r\n lucide.createIcons();\r\n \r\n setTimeout(() => {\r\n message.classList.remove('opacity-0');\r\n message.children[0].classList.remove('scale-95');\r\n }, 10);\r\n\r\n document.getElementById('close-msg').addEventListener('click', () => {\r\n cart = {};\r\n customerNameInput.value = '';\r\n renderProducts();\r\n renderCart();\r\n message.classList.add('opacity-0');\r\n setTimeout(() => message.remove(), 300);\r\n });\r\n };\r\n\r\n \/\/ Initial Render\r\n renderProducts();\r\n renderCart();\r\n\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Sistem Kasir Kantin UMKM Kantin Digital. Kelola pesanan UMKM Anda dengan cepat. Menu Kantin Harga Diskon 40% Detail Pesanan Belum ada pesanan terpilih. Nama Pelanggan * Total Pembayaran Rp 0 Selesaikan Pesanan Total Belanja Rp 0 Lihat Kasir<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-756","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/agamanand.com\/id\/wp-json\/wp\/v2\/pages\/756","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agamanand.com\/id\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/agamanand.com\/id\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/agamanand.com\/id\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/agamanand.com\/id\/wp-json\/wp\/v2\/comments?post=756"}],"version-history":[{"count":37,"href":"https:\/\/agamanand.com\/id\/wp-json\/wp\/v2\/pages\/756\/revisions"}],"predecessor-version":[{"id":816,"href":"https:\/\/agamanand.com\/id\/wp-json\/wp\/v2\/pages\/756\/revisions\/816"}],"wp:attachment":[{"href":"https:\/\/agamanand.com\/id\/wp-json\/wp\/v2\/media?parent=756"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Sistem Kasir Kantin UMKM<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@300;400;500;600;700;900&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n body {\r\n font-family: 'Montserrat', sans-serif;\r\n \/* Background image with bright, dramatic daylight lighting *\/\r\n background-image: url('https:\/\/images.unsplash.com\/photo-1497366216548-37526070297c?q=80&w=2569&auto=format&fit=crop');\r\n background-size: cover;\r\n background-position: center;\r\n background-attachment: fixed;\r\n background-color: #f8f9fa;\r\n -webkit-tap-highlight-color: transparent;\r\n }\r\n \r\n \/* Bright overlay to ensure negative space and monochrome text readability *\/\r\n .bg-overlay {\r\n background: linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(245,240,255,0.88) 100%);\r\n }\r\n\r\n \/* Glassmorphism panel - Light Theme *\/\r\n .glass-panel {\r\n background: rgba(255, 255, 255, 0.7);\r\n backdrop-filter: blur(24px);\r\n -webkit-backdrop-filter: blur(24px);\r\n border: 1px solid rgba(139, 92, 246, 0.25);\r\n box-shadow: 0 25px 50px -12px rgba(139, 92, 246, 0.1);\r\n }\r\n\r\n \/* Custom Scrollbar for sleek look on Desktop *\/\r\n @media (min-width: 1024px) {\r\n ::-webkit-scrollbar {\r\n width: 6px;\r\n }\r\n ::-webkit-scrollbar-track {\r\n background: rgba(0, 0, 0, 0.03);\r\n border-radius: 4px;\r\n }\r\n ::-webkit-scrollbar-thumb {\r\n background: rgba(139, 92, 246, 0.4);\r\n border-radius: 4px;\r\n }\r\n ::-webkit-scrollbar-thumb:hover {\r\n background: rgba(139, 92, 246, 0.7);\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"text-gray-800 min-h-[100dvh] relative antialiased pb-20 lg:pb-0\">\r\n \r\n <div class=\"absolute inset-0 bg-overlay pointer-events-none z-0 fixed\"><\/div>\r\n\r\n <div class=\"relative z-10 container mx-auto px-4 py-6 md:py-10 min-h-[100dvh] flex flex-col\">\r\n \r\n <header class=\"mb-8 md:mb-10 text-center md:text-left\">\r\n <h1 class=\"text-3xl md:text-5xl font-black tracking-tight text-gray-900 mb-2\">\r\n Kantin <span class=\"text-purple-600\">Digital.<\/span>\r\n <\/h1>\r\n <p class=\"text-gray-500 font-medium text-base md:text-lg tracking-wide\">Kelola pesanan UMKM Anda dengan cepat.<\/p>\r\n <\/header>\r\n\r\n \r\n <div class=\"flex-1 grid grid-cols-1 lg:grid-cols-3 gap-6 md:gap-8 items-start\">\r\n \r\n \r\n <div class=\"lg:col-span-2 glass-panel rounded-3xl p-5 md:p-8\">\r\n <div class=\"flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6 md:mb-8\">\r\n <h2 class=\"text-xl md:text-2xl font-bold text-gray-900 flex items-center gap-3\">\r\n <i data-lucide=\"layout-grid\" class=\"text-purple-600 w-6 h-6\"><\/i>\r\n Menu Kantin\r\n <\/h2>\r\n <div class=\"text-xs md:text-sm text-purple-700 font-bold bg-purple-100\/80 px-4 py-2 rounded-full border border-purple-200 whitespace-nowrap shadow-sm\">\r\n Harga Diskon 40%\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"products-container\" class=\"grid grid-cols-1 sm:grid-cols-2 gap-3 md:gap-4 lg:max-h-[60vh] lg:overflow-y-auto lg:pr-3 pb-4\">\r\n \r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"cart-section\" class=\"glass-panel rounded-3xl p-5 md:p-8 lg:sticky lg:top-8 scroll-mt-6\">\r\n <h2 class=\"text-xl md:text-2xl font-bold text-gray-900 flex items-center gap-3 mb-6 border-b border-gray-200\/80 pb-4\">\r\n <i data-lucide=\"receipt\" class=\"text-purple-600 w-6 h-6\"><\/i>\r\n Detail Pesanan\r\n <\/h2>\r\n\r\n \r\n <div id=\"empty-cart\" class=\"py-10 md:py-12 text-center text-gray-400 flex flex-col items-center\">\r\n <i data-lucide=\"shopping-cart\" class=\"w-14 h-14 md:w-16 md:h-16 mb-4 opacity-40 text-purple-300\"><\/i>\r\n <p class=\"font-medium text-sm md:text-base\">Belum ada pesanan terpilih.<\/p>\r\n <\/div>\r\n\r\n \r\n <div id=\"cart-container\" class=\"space-y-4 mb-6 max-h-[40vh] lg:max-h-[35vh] overflow-y-auto pr-2\">\r\n \r\n <\/div>\r\n\r\n \r\n <div id=\"cart-footer\" class=\"hidden border-t border-gray-200\/80 pt-6 mt-auto\">\r\n <div class=\"mb-5\">\r\n <label for=\"customer-name\" class=\"block text-sm font-bold text-gray-700 mb-2\">Nama Pelanggan <span class=\"text-purple-600\">*<\/span><\/label>\r\n <input type=\"text\" id=\"customer-name\" placeholder=\"Ketik nama pelanggan...\" class=\"w-full bg-white\/80 border border-gray-300 focus:border-purple-500 focus:ring-2 focus:ring-purple-200 rounded-xl px-4 py-3 text-base text-gray-900 placeholder-gray-400 outline-none transition-all shadow-sm\">\r\n <\/div>\r\n <div class=\"flex justify-between items-center mb-6 border-t border-gray-100 pt-5\">\r\n <span class=\"text-gray-600 font-bold\">Total Pembayaran<\/span>\r\n <span id=\"grand-total\" class=\"text-2xl md:text-3xl font-black text-gray-900 tracking-tight\">Rp 0<\/span>\r\n <\/div>\r\n <button onclick=\"checkout()\" class=\"w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-4 rounded-xl transition-all duration-300 transform active:scale-95 shadow-[0_8px_20px_rgba(139,92,246,0.25)] flex items-center justify-center gap-2 text-base md:text-lg\">\r\n <i data-lucide=\"check-circle\" class=\"w-5 h-5\"><\/i>\r\n Selesaikan Pesanan\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"mobile-cart-bar\" class=\"lg:hidden fixed bottom-0 left-0 right-0 p-4 bg-white\/95 backdrop-blur-xl border-t border-gray-200 transform translate-y-full transition-transform duration-300 z-50 rounded-t-3xl shadow-[0_-10px_40px_rgba(0,0,0,0.1)]\">\r\n <div class=\"flex justify-between items-center gap-4 max-w-md mx-auto\">\r\n <div class=\"flex-1\">\r\n <p class=\"text-xs text-gray-500 font-bold mb-0.5\">Total Belanja<\/p>\r\n <p id=\"mobile-grand-total\" class=\"text-lg font-black text-gray-900 tracking-tight\">Rp 0<\/p>\r\n <\/div>\r\n <button onclick=\"scrollToCart()\" class=\"bg-purple-600 active:bg-purple-700 text-white font-bold py-3 px-6 rounded-xl transition-all active:scale-95 shadow-[0_4px_15px_rgba(139,92,246,0.3)] flex items-center gap-2 text-sm\">\r\n <i data-lucide=\"shopping-bag\" class=\"w-4 h-4\"><\/i>\r\n Lihat Kasir\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Initialize Icons\r\n lucide.createIcons();\r\n\r\n \/\/ Data Produk Terbaru (Update Terakhir)\r\n const products = [\r\n \/\/ --- Kategori Makanan ---\r\n { id: 1, name: \"Chitato Sapi Panggang\", price: 1044, category: 'makanan' },\r\n { id: 2, name: \"Chitato Lite 14gr\", price: 1044, category: 'makanan' },\r\n { id: 3, name: \"Smax Ring\", price: 1020, category: 'makanan' },\r\n { id: 4, name: \"Chiki twist\", price: 1014, category: 'makanan' }, \/\/ Harga diupdate\r\n { id: 5, name: \"Saltchese\", price: 540, category: 'makanan' }, \/\/ Harga diupdate\r\n { id: 6, name: \"Tictac sapi panggang\", price: 1020, category: 'makanan' },\r\n { id: 9, name: \"Nabati Keju AH\", price: 510, category: 'makanan' },\r\n { id: 10, name: \"Better\", price: 1005, category: 'makanan' },\r\n { id: 16, name: \"Pilus Garuda\", price: 510, category: 'makanan' },\r\n { id: 17, name: \"Roma Malkist Abon\", price: 540, category: 'makanan' },\r\n { id: 18, name: \"Rosta Pedas\", price: 1020, category: 'makanan' },\r\n { id: 19, name: \"Sosis Kenzler Hot\", price: 5100, category: 'makanan' },\r\n { id: 20, name: \"Slai Olay\", price: 875, category: 'makanan' },\r\n { id: 24, name: \"Roma Malkist Coklat\", price: 540, category: 'makanan' },\r\n { id: 25, name: \"Roma Malkist Crackers\", price: 540, category: 'makanan' },\r\n { id: 26, name: \"Astor\", price: 540, category: 'makanan' },\r\n { id: 32, name: \"Taro\", price: 1002, category: 'makanan' }, \/\/ Produk Baru\r\n { id: 33, name: \"Mie gelas all variant\", price: 534, category: 'makanan' }, \/\/ Produk Baru\r\n { id: 34, name: \"Pocky\", price: 5700, category: 'makanan' }, \/\/ Produk Baru\r\n\r\n \/\/ --- Kategori Minuman ---\r\n { id: 7, name: \"Ultramilk strawberry\", price: 3900, category: 'minuman' }, \/\/ Harga diupdate\r\n { id: 8, name: \"Milo\", price: 2790, category: 'minuman' }, \/\/ Harga diupdate\r\n { id: 11, name: \"Teh Kotak Less Sugar\", price: 2220, category: 'minuman' },\r\n { id: 12, name: \"Teh Kotak Melati\", price: 2220, category: 'minuman' }, \/\/ Nama dan harga diupdate\r\n { id: 13, name: \"Hydrococo\", price: 3600, category: 'minuman' }, \/\/ Harga diupdate\r\n { id: 14, name: \"Larutan Badak melon\", price: 3600, category: 'minuman' }, \/\/ Nama dan harga diupdate\r\n { id: 15, name: \"Yakult\", price: 1320, category: 'minuman' },\r\n { id: 21, name: \"Ultramilk Coklat\", price: 3780, category: 'minuman' },\r\n { id: 22, name: \"Teh Kotak Blackcurrent\", price: 2220, category: 'minuman' },\r\n { id: 23, name: \"Ultramilk Fullcream\", price: 3000, category: 'minuman' },\r\n { id: 27, name: \"Teh Kotak Leci\", price: 2220, category: 'minuman' },\r\n { id: 28, name: \"Teh Kotak Mango\", price: 2220, category: 'minuman' },\r\n { id: 29, name: \"Larutan jeruk\", price: 3240, category: 'minuman' },\r\n { id: 30, name: \"Cimory Mantcha\", price: 3300, category: 'minuman' },\r\n { id: 31, name: \"Cimory Coklat Almond\", price: 3300, category: 'minuman' },\r\n { id: 36, name: \"Teh kotak sosro\", price: 1500, category: 'minuman' }, \/\/ Produk Baru\r\n { id: 35, name: \"Cimory Coklat Hazelnut\", price: 3480, category: 'minuman' } \/\/ Produk Baru\r\n ];\r\n\r\n \/\/ Definisi Kategori\r\n const categories = [\r\n { id: 'makanan', label: 'Makanan Ringan', icon: 'utensils' },\r\n { id: 'minuman', label: 'Minuman Segar', icon: 'cup-soda' }\r\n ];\r\n\r\n \/\/ State Cart\r\n let cart = {};\r\n\r\n \/\/ Format Currency IDR\r\n const formatRupiah = (number) => {\r\n return new Intl.NumberFormat('id-ID', {\r\n style: 'currency',\r\n currency: 'IDR',\r\n minimumFractionDigits: 0,\r\n maximumFractionDigits: 0\r\n }).format(number);\r\n };\r\n\r\n \/\/ Scroll to Cart function for mobile\r\n window.scrollToCart = () => {\r\n document.getElementById('cart-section').scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n setTimeout(() => {\r\n document.getElementById('customer-name').focus();\r\n }, 500);\r\n };\r\n\r\n \/\/ Render Products List with Categories\r\n const renderProducts = () => {\r\n const container = document.getElementById('products-container');\r\n container.innerHTML = '';\r\n\r\n categories.forEach(cat => {\r\n const catProducts = products.filter(p => p.category === cat.id);\r\n if (catProducts.length === 0) return;\r\n\r\n \/\/ Category Header\r\n const catHeader = document.createElement('div');\r\n catHeader.className = 'col-span-full mt-6 mb-2 first:mt-0 flex items-center gap-2 text-gray-900 font-black text-lg md:text-xl border-b border-gray-200\/60 pb-2';\r\n catHeader.innerHTML = `<i data-lucide=\"${cat.icon}\" class=\"w-5 h-5 md:w-6 md:h-6 text-purple-600\"><\/i> ${cat.label}`;\r\n container.appendChild(catHeader);\r\n\r\n \/\/ Products for this category\r\n catProducts.forEach(product => {\r\n const qty = cart[product.id] || 0;\r\n \r\n const card = document.createElement('div');\r\n card.className = `p-3 md:p-4 rounded-2xl border transition-all duration-300 flex items-center justify-between shadow-sm ${qty > 0 ? 'bg-purple-50\/90 border-purple-400 shadow-[0_4px_15px_rgba(139,92,246,0.1)]' : 'bg-white\/80 border-gray-200 hover:border-purple-300 hover:shadow-md'}`;\r\n \r\n card.innerHTML = `\r\n <div class=\"flex-1 min-w-0 pr-2\">\r\n <h3 class=\"font-bold text-gray-900 text-sm md:text-base mb-1 truncate\">${product.name}<\/h3>\r\n <p class=\"text-purple-700 font-bold text-xs md:text-sm\">${formatRupiah(product.price)}<\/p>\r\n <\/div>\r\n <div class=\"flex items-center gap-2 md:gap-3 bg-white p-1 md:p-1.5 rounded-full border border-gray-200 shrink-0 shadow-sm\">\r\n <button onclick=\"updateCart(${product.id}, -1)\" class=\"w-7 h-7 md:w-8 md:h-8 flex items-center justify-center rounded-full ${qty > 0 ? 'bg-gray-100 text-gray-800 hover:bg-gray-200' : 'bg-gray-50 text-gray-300'} transition-colors active:scale-90\" ${qty === 0 ? 'disabled' : ''}>\r\n <i data-lucide=\"minus\" class=\"w-3 h-3 md:w-4 md:h-4\"><\/i>\r\n <\/button>\r\n <span class=\"w-4 md:w-6 text-center font-black text-gray-900 text-xs md:text-sm\">${qty}<\/span>\r\n <button onclick=\"updateCart(${product.id}, 1)\" class=\"w-7 h-7 md:w-8 md:h-8 flex items-center justify-center rounded-full bg-purple-600 text-white hover:bg-purple-700 transition-colors active:scale-90 shadow-[0_2px_8px_rgba(139,92,246,0.4)]\">\r\n <i data-lucide=\"plus\" class=\"w-3 h-3 md:w-4 md:h-4\"><\/i>\r\n <\/button>\r\n <\/div>\r\n `;\r\n container.appendChild(card);\r\n });\r\n });\r\n\r\n \/\/ Re-init newly added icons\r\n lucide.createIcons();\r\n };\r\n\r\n \/\/ Render Cart Summary\r\n const renderCart = () => {\r\n const container = document.getElementById('cart-container');\r\n const emptyState = document.getElementById('empty-cart');\r\n const footer = document.getElementById('cart-footer');\r\n const grandTotalEl = document.getElementById('grand-total');\r\n \r\n \/\/ Mobile Floating elements\r\n const mobileCartBar = document.getElementById('mobile-cart-bar');\r\n const mobileGrandTotalEl = document.getElementById('mobile-grand-total');\r\n \r\n container.innerHTML = '';\r\n let total = 0;\r\n let hasItems = false;\r\n\r\n products.forEach(product => {\r\n const qty = cart[product.id];\r\n if (qty > 0) {\r\n hasItems = true;\r\n const subtotal = qty * product.price;\r\n total += subtotal;\r\n\r\n const itemEl = document.createElement('div');\r\n itemEl.className = 'flex justify-between items-center py-3 border-b border-gray-100 last:border-0';\r\n itemEl.innerHTML = `\r\n <div class=\"flex-1 pr-2\">\r\n <p class=\"text-sm font-bold text-gray-900 truncate\">${product.name}<\/p>\r\n <p class=\"text-xs text-gray-500 font-medium mt-0.5\">${qty} x ${formatRupiah(product.price)}<\/p>\r\n <\/div>\r\n <div class=\"text-right shrink-0\">\r\n <p class=\"font-black text-purple-700 text-sm md:text-base\">${formatRupiah(subtotal)}<\/p>\r\n <\/div>\r\n `;\r\n container.appendChild(itemEl);\r\n }\r\n });\r\n\r\n if (hasItems) {\r\n emptyState.classList.add('hidden');\r\n footer.classList.remove('hidden');\r\n grandTotalEl.innerText = formatRupiah(total);\r\n \r\n \/\/ Show Mobile Bar\r\n mobileGrandTotalEl.innerText = formatRupiah(total);\r\n mobileCartBar.classList.remove('translate-y-full');\r\n } else {\r\n emptyState.classList.remove('hidden');\r\n footer.classList.add('hidden');\r\n \r\n \/\/ Hide Mobile Bar\r\n mobileCartBar.classList.add('translate-y-full');\r\n }\r\n };\r\n\r\n \/\/ Update Cart Logic\r\n window.updateCart = (productId, change) => {\r\n if (!cart[productId]) cart[productId] = 0;\r\n \r\n cart[productId] += change;\r\n \r\n if (cart[productId] < 0) cart[productId] = 0;\r\n \r\n renderProducts();\r\n renderCart();\r\n };\r\n\r\n \/\/ Checkout function\r\n window.checkout = () => {\r\n const customerNameInput = document.getElementById('customer-name');\r\n const customerName = customerNameInput.value.trim();\r\n \r\n \/\/ Validasi nama kosong\r\n if (!customerName) {\r\n customerNameInput.classList.add('border-red-500', 'ring-2', 'ring-red-200');\r\n customerNameInput.focus();\r\n setTimeout(() => customerNameInput.classList.remove('border-red-500', 'ring-2', 'ring-red-200'), 2000);\r\n return;\r\n }\r\n\r\n \/\/ Susun Format Pesan WhatsApp\r\n let waMessage = `*Halo, ada pesanan baru dari Kantin!*%0A%0A`;\r\n waMessage += `*Nama Pelanggan:* ${customerName}%0A`;\r\n waMessage += `*Detail Pesanan:*%0A`;\r\n \r\n let total = 0;\r\n products.forEach(product => {\r\n const qty = cart[product.id];\r\n if (qty > 0) {\r\n const subtotal = qty * product.price;\r\n total += subtotal;\r\n waMessage += `- ${qty}x ${product.name} (Rp ${subtotal.toLocaleString('id-ID')})%0A`;\r\n }\r\n });\r\n\r\n waMessage += `%0A*Total Belanja:* Rp ${total.toLocaleString('id-ID')}%0A`;\r\n waMessage += `%0AMohon segera disiapkan, terima kasih!`;\r\n\r\n \/\/ Buka Link WA \r\n const waNumber = \"6282322538017\";\r\n const waUrl = `https:\/\/wa.me\/${waNumber}?text=${waMessage}`;\r\n window.open(waUrl, '_blank');\r\n \r\n \/\/ Tampilkan Pesan Sukses Visual (Light Theme Modal)\r\n const message = document.createElement('div');\r\n message.className = 'fixed inset-0 z-[60] flex items-center justify-center bg-black\/40 backdrop-blur-md opacity-0 transition-opacity duration-300 p-4';\r\n message.innerHTML = `\r\n <div class=\"bg-white p-6 md:p-8 rounded-3xl max-w-sm w-full text-center transform scale-95 transition-transform duration-300 shadow-2xl border border-gray-100\">\r\n <div class=\"w-16 h-16 md:w-20 md:h-20 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-6\">\r\n <i data-lucide=\"send\" class=\"w-8 h-8 md:w-10 md:h-10 text-purple-600\"><\/i>\r\n <\/div>\r\n <h3 class=\"text-xl md:text-2xl font-black text-gray-900 mb-2\">Meneruskan ke WA...<\/h3>\r\n <p class=\"text-sm md:text-base text-gray-500 font-medium mb-8\">Pesanan Kak ${customerName} sedang dikirim ke dapur Anda.<\/p>\r\n <button id=\"close-msg\" class=\"w-full bg-gray-900 text-white font-bold py-4 rounded-xl hover:bg-gray-800 transition-colors text-sm md:text-base shadow-lg\">\r\n Selesai & Buat Pesanan Baru\r\n <\/button>\r\n <\/div>\r\n `;\r\n \r\n document.body.appendChild(message);\r\n lucide.createIcons();\r\n \r\n setTimeout(() => {\r\n message.classList.remove('opacity-0');\r\n message.children[0].classList.remove('scale-95');\r\n }, 10);\r\n\r\n document.getElementById('close-msg').addEventListener('click', () => {\r\n cart = {};\r\n customerNameInput.value = '';\r\n renderProducts();\r\n renderCart();\r\n message.classList.add('opacity-0');\r\n setTimeout(() => message.remove(), 300);\r\n });\r\n };\r\n\r\n \/\/ Initial Render\r\n renderProducts();\r\n renderCart();\r\n\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Sistem Kasir Kantin UMKM Kantin Digital. Kelola pesanan UMKM Anda dengan cepat. Menu Kantin Harga Diskon 40% Detail Pesanan Belum ada pesanan terpilih. Nama Pelanggan * Total Pembayaran Rp 0 Selesaikan Pesanan Total Belanja Rp 0 Lihat Kasir<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-756","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/agamanand.com\/id\/wp-json\/wp\/v2\/pages\/756","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/agamanand.com\/id\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/agamanand.com\/id\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/agamanand.com\/id\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/agamanand.com\/id\/wp-json\/wp\/v2\/comments?post=756"}],"version-history":[{"count":37,"href":"https:\/\/agamanand.com\/id\/wp-json\/wp\/v2\/pages\/756\/revisions"}],"predecessor-version":[{"id":816,"href":"https:\/\/agamanand.com\/id\/wp-json\/wp\/v2\/pages\/756\/revisions\/816"}],"wp:attachment":[{"href":"https:\/\/agamanand.com\/id\/wp-json\/wp\/v2\/media?parent=756"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}