{"id":10,"date":"2026-01-21T14:18:04","date_gmt":"2026-01-21T14:18:04","guid":{"rendered":"https:\/\/kiosknow.click\/?page_id=10"},"modified":"2026-01-21T14:18:04","modified_gmt":"2026-01-21T14:18:04","slug":"bnb-kiosk","status":"publish","type":"page","link":"https:\/\/kiosknow.click\/","title":{"rendered":"BNB Kiosk"},"content":{"rendered":"    <style>\n        #bn-kiosk{font-family:sans-serif; display:flex; flex-direction:column; height:92vh; background:#fff;}\n        .cat-bar{display:flex; background:#000; padding:15px; overflow-x:auto; gap:10px;}\n        .cat-tab{padding:12px 25px; background:#222; color:#fff; border-radius:30px; border:none; cursor:pointer; font-weight:bold; white-space:nowrap;}\n        .cat-tab.active{background:#27ae60;}\n        .main-container{display:flex; flex:1; overflow:hidden;}\n        .menu-grid-side{flex:3; padding:20px; overflow-y:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:15px; align-content:start;}\n        .cart-side{flex:1; background:#f9f9f9; border-left:2px solid #eee; display:flex; flex-direction:column; padding:20px;}\n        .item-card{background:#fff; border:1px solid #ddd; border-radius:12px; padding:15px; text-align:center; cursor:pointer; transition:0.15s;}\n        .item-card img{width:100%; height:140px; object-fit:cover; border-radius:8px; margin-bottom:10px;}\n        .modal-overlay{position:fixed; inset:0; background:rgba(0,0,0,0.85); display:none; align-items:center; justify-content:center; z-index:9999;}\n        .modal-box{background:#fff; width:90%; max-width:700px; border-radius:20px; padding:30px; position:relative; max-height:85vh; overflow-y:auto;}\n        .close-x{position:absolute; top:15px; right:15px; font-size:28px; cursor:pointer; background:#eee; border:none; width:45px; height:45px; border-radius:50%; display:flex; align-items:center; justify-content:center;}\n        .opt-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:10px;}\n        .opt-btn{padding:12px 5px; border:2px solid #eee; border-radius:10px; background:#fcfcfc; cursor:pointer; text-align:center; font-size:0.85em;}\n        .opt-btn.active{border-color:#27ae60; background:#e8f6ed; color:#27ae60; font-weight:bold;}\n        .action-btn{width:100%; padding:20px; background:#27ae60; color:#fff; border-radius:12px; font-size:1.2em; cursor:pointer; border:none; margin-top:20px; font-weight:bold;}\n        .search-row{display:flex; gap:10px; padding:10px 20px; border-bottom:1px solid #eee;}\n        .search-row input{flex:1; padding:12px 14px; border:1px solid #ddd; border-radius:12px; font-size:16px;}\n        .pill{padding:12px 14px; background:#eee; border:none; border-radius:12px; cursor:pointer; font-weight:bold;}\n    <\/style>\n\n    <div id=\"bn-kiosk\">\n        <div class=\"cat-bar\">\n            <button class=\"cat-tab active\" onclick=\"app.setCategory('topsellers', this)\">Top Sellers<\/button>\n            <button class=\"cat-tab\" onclick=\"app.setCategory('bagels', this)\">Bagels & Spreads<\/button>\n            <button class=\"cat-tab\" onclick=\"app.setCategory('grill', this)\">Grill \/ BEC<\/button>\n            <button class=\"cat-tab\" onclick=\"app.setCategory('deli', this)\">NY Deli<\/button>\n            <button class=\"cat-tab\" onclick=\"app.setCategory('coffee', this)\">Coffee & Drinks<\/button>\n            <button class=\"cat-tab\" onclick=\"app.setCategory('retail', this)\">On The Side<\/button>\n        <\/div>\n\n        <div class=\"search-row\">\n            <input id=\"bn-search\" placeholder=\"Search (e.g., lox, latte, scallion)\" oninput=\"app.setSearch(this.value)\" \/>\n            <button class=\"pill\" onclick=\"app.clearSearch()\">Clear<\/button>\n        <\/div>\n\n        <div class=\"main-container\">\n            <div class=\"menu-grid-side\" id=\"menu-display\">Loading...<\/div>\n            <div class=\"cart-side\">\n                <h2>My Order<\/h2>\n                <div id=\"cart-items-list\" style=\"flex:1; overflow-y:auto;\"><\/div>\n                <div style=\"border-top:2px solid #000; padding-top:10px;\">\n                    <div style=\"display:flex; justify-content:space-between;\">\n                        <span>Total:<\/span>\n                        <span id=\"order-total\" style=\"font-size:1.5em; font-weight:bold;\">$0.00<\/span>\n                    <\/div>\n                    <button class=\"action-btn\" onclick=\"app.checkout()\">PLACE ORDER<\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div id=\"item-modal-overlay\" class=\"modal-overlay\" onclick=\"if(event.target.id==='item-modal-overlay')app.closeModal()\">\n        <div class=\"modal-box\">\n            <button class=\"close-x\" onclick=\"app.closeModal()\">\u2715<\/button>\n            <h1 id=\"modal-item-name\"><\/h1>\n            <div id=\"modal-item-price\" style=\"font-size:18px; margin-top:6px; font-weight:bold;\"><\/div>\n            <div id=\"modal-modifier-groups\"><\/div>\n            <button class=\"action-btn\" style=\"background:#000;\" onclick=\"app.confirmItem()\">ADD TO ORDER<\/button>\n        <\/div>\n    <\/div>\n\n    <script>\n    const app = {\n        allData: [], cart: [], activeCat: 'topsellers', activeItem: null, q: '',\n        init(){\n            fetch('https:\/\/kiosknow.click\/?bn_api=get_menu')\n              .then(r=>r.json())\n              .then(d=>{ this.allData = d.items || []; this.renderMenu(); });\n        },\n        setCategory(cat, btn){\n            document.querySelectorAll('.cat-tab').forEach(t=>t.classList.remove('active'));\n            btn.classList.add('active');\n            this.activeCat = cat;\n            this.renderMenu();\n        },\n        setSearch(v){ this.q = (v||'').toLowerCase().trim(); this.renderMenu(); },\n        clearSearch(){ document.getElementById('bn-search').value=''; this.q=''; this.renderMenu(); },\n        getFiltered(){\n            let items = [];\n            if (this.activeCat === 'topsellers') {\n                items = this.allData.slice(0, 18);\n            } else if (this.activeCat === 'retail') {\n                \/\/ Retail = items explicitly named \"(1\/4 lb)\" OR category \"Toppings\" is excluded\n                items = this.allData.filter(i => (i.name || '').toLowerCase().includes('(1\/4 lb)'));\n            } else {\n                items = this.allData.filter(i => i.station === this.activeCat);\n            }\n\n            if (this.q) {\n                items = items.filter(i => (i.name||'').toLowerCase().includes(this.q) || (i.category||'').toLowerCase().includes(this.q));\n            }\n            return items;\n        },\n        renderMenu(){\n            const filtered = this.getFiltered();\n            const grid = document.getElementById('menu-display');\n            grid.innerHTML = filtered.length ? filtered.map(i => `\n                <div class=\"item-card\" onclick=\"app.pickItem(${i.id})\">\n                    ${i.img_path ? `<img decoding=\"async\" src=\"${i.img_path}\">` : '<div style=\"height:140px; background:#eee; border-radius:8px; margin-bottom:10px;\"><\/div>'}\n                    <h3>${i.name}<\/h3>\n                    <p style=\"color:#27ae60; font-weight:bold;\">$${parseFloat(i.price).toFixed(2)}<\/p>\n                    ${i.description ? `<small style=\"color:#555;\">${i.description}<\/small>` : ''}\n                <\/div>`).join('') : '<p>No items found.<\/p>';\n        },\n        pickItem(id){\n            const item = this.allData.find(x => x.id == id);\n            const hasMods = item.modifiers && Object.keys(item.modifiers).length;\n            if (!hasMods) {\n                \/\/ Zero-click add for speed when no modifiers\n                this.cart.push({ ...item, selectedMods: [], totalPrice: parseFloat(item.price) });\n                this.updateCartDisplay();\n                return;\n            }\n            this.openModifierModal(item);\n        },\n        openModifierModal(item){\n            this.activeItem = { ...item, selectedMods: [], basePrice: parseFloat(item.price) };\n            document.getElementById('modal-item-name').innerText = item.name;\n            document.getElementById('modal-item-price').innerText = '$' + this.activeItem.basePrice.toFixed(2);\n\n            const container = document.getElementById('modal-modifier-groups');\n            container.innerHTML = '';\n\n            for(let groupName in item.modifiers){\n                let html = `<div style=\"font-weight:bold; margin-top:15px;\">${groupName}<\/div><div class=\"opt-grid\">`;\n                item.modifiers[groupName].forEach(opt => {\n                    const priceLabel = opt.p > 0 ? `<br><small>+$${opt.p.toFixed(2)}<\/small>` : '<br><small>(No Charge)<\/small>';\n                    html += `<div class=\"opt-btn\" onclick=\"app.toggleModifier(this, '${groupName}', '${opt.n}', ${opt.p})\">${opt.n}${priceLabel}<\/div>`;\n                });\n                container.innerHTML += html + `<\/div>`;\n            }\n\n            document.getElementById('item-modal-overlay').style.display = 'flex';\n        },\n        toggleModifier(btn, group, name, price) {\n            const exclusive = ['Bagel Choice', 'Prep (No Charge Options)', 'Egg Style', 'Cheese', 'Bread Choice'];\n            if (exclusive.includes(group)) {\n                this.activeItem.selectedMods = this.activeItem.selectedMods.filter(m => m.g !== group);\n                Array.from(btn.parentNode.children).forEach(b => b.classList.remove('active'));\n            }\n            const idx = this.activeItem.selectedMods.findIndex(m => m.g===group && m.n === name);\n            if (idx > -1) { this.activeItem.selectedMods.splice(idx, 1); btn.classList.remove('active'); }\n            else { this.activeItem.selectedMods.push({g: group, n: name, p: price}); btn.classList.add('active'); }\n        },\n        confirmItem(){\n            const modTotal = this.activeItem.selectedMods.reduce((sum, m) => sum + m.p, 0);\n            this.cart.push({...this.activeItem, totalPrice: this.activeItem.basePrice + modTotal});\n            this.closeModal(); this.updateCartDisplay();\n        },\n        closeModal(){ document.getElementById('item-modal-overlay').style.display = 'none'; },\n        updateCartDisplay(){\n            document.getElementById('cart-items-list').innerHTML = this.cart.map((item, idx) => `\n                <div style=\"padding:10px; border-bottom:1px solid #eee;\">\n                    <div style=\"display:flex; justify-content:space-between; gap:10px;\">\n                        <div><b>${item.name}<\/b><br><small>${(item.selectedMods||[]).map(m => m.n).join(', ')}<\/small><\/div>\n                        <div style=\"text-align:right;\">\n                            $${parseFloat(item.totalPrice).toFixed(2)}<br>\n                            <button class=\"pill\" onclick=\"app.remove(${idx})\" style=\"padding:8px 10px; margin-top:6px;\">Remove<\/button>\n                        <\/div>\n                    <\/div>\n                <\/div>`).join('');\n            const total = this.cart.reduce((sum, i) => sum + parseFloat(i.totalPrice), 0);\n            document.getElementById('order-total').innerText = '$' + total.toFixed(2);\n        },\n        remove(idx){ this.cart.splice(idx,1); this.updateCartDisplay(); },\n        checkout(){\n            alert(\"Order Sent to Broad Nosh Printers!\");\n            this.cart = [];\n            this.updateCartDisplay();\n            location.reload();\n        }\n    };\n    app.init();\n    <\/script>\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>BNB Kiosk - Kiosk Now Solutions<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kiosknow.click\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"BNB Kiosk - Kiosk Now Solutions\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kiosknow.click\/\" \/>\n<meta property=\"og:site_name\" content=\"Kiosk Now Solutions\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kiosknow.click\/\",\"url\":\"https:\/\/kiosknow.click\/\",\"name\":\"BNB Kiosk - Kiosk Now Solutions\",\"isPartOf\":{\"@id\":\"https:\/\/kiosknow.click\/#website\"},\"datePublished\":\"2026-01-21T14:18:04+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/kiosknow.click\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kiosknow.click\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kiosknow.click\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kiosknow.click\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"BNB Kiosk\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kiosknow.click\/#website\",\"url\":\"https:\/\/kiosknow.click\/\",\"name\":\"Kiosk Now Solutions\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kiosknow.click\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"BNB Kiosk - Kiosk Now Solutions","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kiosknow.click\/","og_locale":"en_US","og_type":"article","og_title":"BNB Kiosk - Kiosk Now Solutions","og_url":"https:\/\/kiosknow.click\/","og_site_name":"Kiosk Now Solutions","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kiosknow.click\/","url":"https:\/\/kiosknow.click\/","name":"BNB Kiosk - Kiosk Now Solutions","isPartOf":{"@id":"https:\/\/kiosknow.click\/#website"},"datePublished":"2026-01-21T14:18:04+00:00","breadcrumb":{"@id":"https:\/\/kiosknow.click\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kiosknow.click\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kiosknow.click\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kiosknow.click\/"},{"@type":"ListItem","position":2,"name":"BNB Kiosk"}]},{"@type":"WebSite","@id":"https:\/\/kiosknow.click\/#website","url":"https:\/\/kiosknow.click\/","name":"Kiosk Now Solutions","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kiosknow.click\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/kiosknow.click\/index.php?rest_route=\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kiosknow.click\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kiosknow.click\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kiosknow.click\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kiosknow.click\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10"}],"version-history":[{"count":1,"href":"https:\/\/kiosknow.click\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":11,"href":"https:\/\/kiosknow.click\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions\/11"}],"wp:attachment":[{"href":"https:\/\/kiosknow.click\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}