{"id":4,"date":"2026-05-23T03:12:31","date_gmt":"2026-05-23T03:12:31","guid":{"rendered":"http:\/\/bigfoot.aquireautomateexit.com\/?page_id=4"},"modified":"2026-05-23T03:12:31","modified_gmt":"2026-05-23T03:12:31","slug":"demo","status":"publish","type":"page","link":"https:\/\/bigfoot.aquireautomateexit.com\/?page_id=4","title":{"rendered":"Bigfoot Directories \u2014 Live Demo"},"content":{"rendered":"        <div id=\"bigfoot-demo-root\" class=\"bf-demo\">\n          <div class=\"bf-demo__banner\">\n            <strong>\ud83e\uddea Live Demo<\/strong> \u2014 Your data is <em>not<\/em> saved. Try natural-language search and photo-to-listing AI below.\n            <span class=\"bf-demo__mode-pill\" id=\"bf-demo-mode-pill\">checking AI\u2026<\/span>\n          <\/div>\n\n          <header class=\"bf-demo__hero\">\n            <h1>See Bigfoot's AI in action<\/h1>\n            <p>Two features your current directory plugin can't touch: <strong>semantic search<\/strong> that understands intent, and <strong>photo&nbsp;\u2192&nbsp;listing<\/strong> that drafts an entire listing from a single image.<\/p>\n          <\/header>\n\n          <section class=\"bf-demo__panel\" aria-labelledby=\"bf-demo-search-h\">\n            <h2 id=\"bf-demo-search-h\">1. Semantic Search<\/h2>\n            <p class=\"bf-demo__hint\">Try things like <em>\"great pizza near downtown that's open late and family-friendly\"<\/em> or <em>\"romantic rooftop cocktail bar\"<\/em>.<\/p>\n            <form id=\"bf-demo-search-form\" class=\"bf-demo__searchbar\" autocomplete=\"off\">\n              <input type=\"text\" id=\"bf-demo-search-input\" placeholder=\"Describe what you're looking for\u2026\" maxlength=\"500\" required \/>\n              <button type=\"submit\" id=\"bf-demo-search-btn\">Search<\/button>\n            <\/form>\n            <div class=\"bf-demo__results\" id=\"bf-demo-search-results\" aria-live=\"polite\"><\/div>\n          <\/section>\n\n          <section class=\"bf-demo__panel\" aria-labelledby=\"bf-demo-photo-h\">\n            <h2 id=\"bf-demo-photo-h\">2. Photo \u2192 Listing<\/h2>\n            <p class=\"bf-demo__hint\">Drop a photo of any business (or storefront, restaurant, shop) \u2014 our AI generates the full listing draft.<\/p>\n            <div class=\"bf-demo__dropzone\" id=\"bf-demo-dropzone\">\n              <input type=\"file\" id=\"bf-demo-file\" accept=\"image\/jpeg,image\/png,image\/webp\" hidden \/>\n              <label for=\"bf-demo-file\" class=\"bf-demo__dropzone-label\">\n                <span class=\"bf-demo__dropzone-icon\">\ud83d\udcf8<\/span>\n                <span><strong>Click to upload<\/strong> or drag &amp; drop<\/span>\n                <span class=\"bf-demo__dropzone-hint\">JPG, PNG or WebP \u00b7 max 5MB<\/span>\n              <\/label>\n            <\/div>\n            <div class=\"bf-demo__photo-result\" id=\"bf-demo-photo-result\" aria-live=\"polite\"><\/div>\n          <\/section>\n\n          <footer class=\"bf-demo__cta\">\n            <h3>Like what you see?<\/h3>\n            <p>Start your own AI-powered directory in minutes \u2014 no AI experience required.<\/p>\n            <a href=\"https:\/\/bigfootdirectories.com\/get-started\" class=\"bf-demo__cta-btn\">Start Your Own Directory \u2192<\/a>\n          <\/footer>\n        <\/div>\n\n        <style>\n        .bf-demo { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; max-width: 980px; margin: 0 auto; padding: 24px 20px 60px; color:#1f2937; }\n        .bf-demo__banner { background: linear-gradient(135deg,#fef3c7 0%,#fde68a 100%); border-left: 4px solid #d97706; padding: 12px 18px; border-radius: 8px; margin-bottom: 28px; font-size: 14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }\n        .bf-demo__mode-pill { margin-left:auto; background:#fff; border:1px solid #d97706; color:#92400e; padding:2px 10px; border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }\n        .bf-demo__hero { text-align:center; margin: 30px 0 40px; }\n        .bf-demo__hero h1 { font-size: 38px; margin: 0 0 10px; background: linear-gradient(135deg,#4f46e5,#9333ea); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }\n        .bf-demo__hero p { font-size: 17px; color:#4b5563; max-width: 720px; margin: 0 auto; line-height: 1.55; }\n        .bf-demo__panel { background:#fff; border:1px solid #e5e7eb; border-radius: 14px; padding: 26px 28px; margin-bottom: 28px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }\n        .bf-demo__panel h2 { margin: 0 0 6px; font-size: 22px; color:#111827; }\n        .bf-demo__hint { color:#6b7280; font-size: 14px; margin: 0 0 18px; }\n        .bf-demo__searchbar { display: flex; gap: 10px; }\n        .bf-demo__searchbar input { flex:1; padding: 14px 16px; border:1px solid #d1d5db; border-radius: 10px; font-size: 16px; outline:none; transition: border-color .15s; }\n        .bf-demo__searchbar input:focus { border-color:#6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }\n        .bf-demo__searchbar button { padding: 14px 26px; background: linear-gradient(135deg,#4f46e5,#7c3aed); color:#fff; border:none; border-radius: 10px; font-size: 16px; font-weight:600; cursor:pointer; transition: transform .1s; }\n        .bf-demo__searchbar button:hover:not(:disabled) { transform: translateY(-1px); }\n        .bf-demo__searchbar button:disabled { opacity:.6; cursor:wait; }\n        .bf-demo__results { margin-top: 22px; display: grid; gap: 14px; }\n        .bf-demo__result { display:flex; gap:16px; padding: 14px; border:1px solid #e5e7eb; border-radius: 12px; background: #fafafa; }\n        .bf-demo__result img { width:120px; height:120px; object-fit:cover; border-radius: 8px; background:#e5e7eb; }\n        .bf-demo__result-body { flex:1; min-width:0; }\n        .bf-demo__result-body h3 { margin: 0 0 4px; font-size: 17px; color:#111827; }\n        .bf-demo__result-meta { font-size: 12px; color:#6b7280; margin-bottom:6px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }\n        .bf-demo__result-meta .bf-demo__score { background:#ecfeff; color:#0e7490; padding:2px 8px; border-radius:999px; font-weight:600; font-size:11px; }\n        .bf-demo__result-meta .bf-demo__rating { color:#b45309; font-weight:600; }\n        .bf-demo__result-body p { margin: 4px 0 8px; font-size: 14px; color:#374151; line-height: 1.5; }\n        .bf-demo__tags { display:flex; flex-wrap:wrap; gap: 6px; }\n        .bf-demo__tags span { background:#eef2ff; color:#3730a3; padding:3px 10px; border-radius: 999px; font-size: 11px; font-weight: 500; }\n        .bf-demo__dropzone { border: 2px dashed #c7d2fe; border-radius: 14px; padding: 36px; text-align:center; background: linear-gradient(135deg, #eef2ff 0%, #f5f3ff 100%); transition: all .15s; }\n        .bf-demo__dropzone.dragover { border-color:#6366f1; background: linear-gradient(135deg, #c7d2fe 0%, #e9d5ff 100%); }\n        .bf-demo__dropzone-label { cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:8px; color:#4338ca; }\n        .bf-demo__dropzone-icon { font-size: 42px; }\n        .bf-demo__dropzone-hint { font-size: 12px; color:#6b7280; }\n        .bf-demo__photo-result { margin-top: 20px; }\n        .bf-demo__photo-card { display:grid; grid-template-columns: 220px 1fr; gap: 22px; padding: 20px; background:#f9fafb; border:1px solid #e5e7eb; border-radius: 14px; }\n        .bf-demo__photo-card img { width:100%; height: auto; border-radius: 10px; object-fit:cover; }\n        .bf-demo__photo-card h3 { margin: 0 0 6px; font-size: 22px; color:#111827; }\n        .bf-demo__confidence { display:inline-block; background:#dcfce7; color:#15803d; padding:3px 10px; border-radius: 999px; font-size:12px; font-weight:600; margin-bottom:10px; }\n        .bf-demo__field { margin-bottom: 8px; font-size: 14px; }\n        .bf-demo__field strong { color:#6b7280; font-size:11px; text-transform: uppercase; letter-spacing:.05em; display:block; margin-bottom: 2px; }\n        .bf-demo__cta { background: linear-gradient(135deg,#4f46e5 0%,#9333ea 100%); color:#fff; border-radius: 16px; padding: 36px; text-align:center; margin-top: 36px; }\n        .bf-demo__cta h3 { margin: 0 0 8px; font-size: 26px; }\n        .bf-demo__cta p { margin: 0 0 18px; opacity: .95; font-size: 15px; }\n        .bf-demo__cta-btn { display:inline-block; background:#fff; color:#4f46e5; padding: 14px 32px; border-radius: 10px; text-decoration:none; font-weight:700; font-size: 16px; transition: transform .1s; }\n        .bf-demo__cta-btn:hover { transform: translateY(-2px); }\n        .bf-demo__error { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; border-radius:10px; padding:12px 16px; font-size:14px; }\n        .bf-demo__loading { color:#6b7280; font-size: 14px; padding: 14px; text-align:center; }\n        .bf-demo__loading::before { content: \"\u23f3\"; margin-right: 6px; }\n        @media (max-width: 640px) {\n          .bf-demo__hero h1 { font-size: 28px; }\n          .bf-demo__searchbar { flex-direction: column; }\n          .bf-demo__result { flex-direction: column; }\n          .bf-demo__result img { width:100%; height: 180px; }\n          .bf-demo__photo-card { grid-template-columns: 1fr; }\n        }\n        <\/style>\n\n        <script>\n        (function(){\n          var REST = \"https:\\\/\\\/bigfoot.aquireautomateexit.com\\\/index.php?rest_route=\\\/bigfoot\\\/v1\\\/demo\";\n          var REAL_AI = false;\n          var pill = document.getElementById('bf-demo-mode-pill');\n          if (pill) pill.textContent = REAL_AI ? 'Real AI \u2728' : 'Demo AI (mock)';\n\n          \/\/ ----- Search -----\n          var form = document.getElementById('bf-demo-search-form');\n          var input = document.getElementById('bf-demo-search-input');\n          var btn = document.getElementById('bf-demo-search-btn');\n          var resultsEl = document.getElementById('bf-demo-search-results');\n\n          function escapeHtml(s){ return String(s == null ? '' : s).replace(\/[&<>\"']\/g, function(c){return ({'&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;',\"'\":'&#39;'})[c];}); }\n\n          function renderResults(data){\n            if (data && data.code) {\n              resultsEl.innerHTML = '<div class=\"bf-demo__error\">' + escapeHtml(data.message || 'Something went wrong.') + '<\/div>';\n              return;\n            }\n            var results = (data && data.results) || [];\n            if (!results.length) {\n              resultsEl.innerHTML = '<div class=\"bf-demo__loading\">No results for that query.<\/div>';\n              return;\n            }\n            var modeBadge = data.cached ? '\u26a1 cached' : (data.ai_mode === 'real' ? '\u2728 AI-ranked' : '\ud83e\uddea demo-ranked');\n            var html = '<div style=\"font-size:12px;color:#6b7280;margin-bottom:6px;\">Showing top ' + results.length + ' \u00b7 ' + modeBadge + '<\/div>';\n            results.forEach(function(r){\n              html += '<article class=\"bf-demo__result\">';\n              if (r.image) html += '<img decoding=\"async\" src=\"' + escapeHtml(r.image) + '\" alt=\"\" loading=\"lazy\" referrerpolicy=\"no-referrer\" \/>';\n              html += '<div class=\"bf-demo__result-body\">';\n              html += '<h3>' + escapeHtml(r.title) + '<\/h3>';\n              html += '<div class=\"bf-demo__result-meta\">';\n              html += '<span>' + escapeHtml(r.category) + ' \u00b7 ' + escapeHtml(r.neighborhood || '') + '<\/span>';\n              if (r.rating) html += '<span class=\"bf-demo__rating\">\u2605 ' + escapeHtml(r.rating) + '<\/span>';\n              if (r.score != null) html += '<span class=\"bf-demo__score\">score ' + escapeHtml(r.score) + '<\/span>';\n              html += '<\/div>';\n              html += '<p>' + escapeHtml(r.description) + '<\/p>';\n              html += '<div class=\"bf-demo__tags\">' + (r.tags || []).map(function(t){return '<span>' + escapeHtml(t) + '<\/span>';}).join('') + '<\/div>';\n              html += '<\/div><\/article>';\n            });\n            resultsEl.innerHTML = html;\n          }\n\n          form.addEventListener('submit', function(e){\n            e.preventDefault();\n            var q = input.value.trim();\n            if (!q) return;\n            btn.disabled = true; btn.textContent = 'Searching\u2026';\n            resultsEl.innerHTML = '<div class=\"bf-demo__loading\">Asking the AI\u2026<\/div>';\n            fetch(REST + '\/search', {\n              method: 'POST',\n              headers: {'Content-Type':'application\/json','Accept':'application\/json'},\n              body: JSON.stringify({query: q}),\n              credentials: 'same-origin'\n            })\n            .then(function(r){ return r.json().then(function(j){ j.__status = r.status; return j; }); })\n            .then(function(d){ renderResults(d); })\n            .catch(function(err){ resultsEl.innerHTML = '<div class=\"bf-demo__error\">Network error: ' + escapeHtml(err.message) + '<\/div>'; })\n            .finally(function(){ btn.disabled = false; btn.textContent = 'Search'; });\n          });\n\n          \/\/ ----- Photo upload -----\n          var dz = document.getElementById('bf-demo-dropzone');\n          var fileInput = document.getElementById('bf-demo-file');\n          var photoResult = document.getElementById('bf-demo-photo-result');\n\n          ['dragenter','dragover'].forEach(function(ev){\n            dz.addEventListener(ev, function(e){ e.preventDefault(); e.stopPropagation(); dz.classList.add('dragover'); });\n          });\n          ['dragleave','drop'].forEach(function(ev){\n            dz.addEventListener(ev, function(e){ e.preventDefault(); e.stopPropagation(); dz.classList.remove('dragover'); });\n          });\n          dz.addEventListener('drop', function(e){\n            var f = e.dataTransfer && e.dataTransfer.files && e.dataTransfer.files[0];\n            if (f) uploadPhoto(f);\n          });\n          fileInput.addEventListener('change', function(){\n            if (fileInput.files && fileInput.files[0]) uploadPhoto(fileInput.files[0]);\n          });\n\n          function uploadPhoto(file){\n            if (file.size > 5 * 1024 * 1024) {\n              photoResult.innerHTML = '<div class=\"bf-demo__error\">That image is over 5MB \u2014 please pick a smaller one.<\/div>';\n              return;\n            }\n            photoResult.innerHTML = '<div class=\"bf-demo__loading\">Analyzing your photo\u2026 this usually takes 3\u20138 seconds.<\/div>';\n            var fd = new FormData();\n            fd.append('photo', file);\n            fetch(REST + '\/photo-to-listing', {\n              method: 'POST',\n              body: fd,\n              credentials: 'same-origin'\n            })\n            .then(function(r){ return r.json(); })\n            .then(function(d){\n              if (d && d.code) {\n                photoResult.innerHTML = '<div class=\"bf-demo__error\">' + escapeHtml(d.message || 'Could not analyze that photo.') + '<\/div>';\n                return;\n              }\n              renderPhotoResult(d, file);\n            })\n            .catch(function(err){\n              photoResult.innerHTML = '<div class=\"bf-demo__error\">Network error: ' + escapeHtml(err.message) + '<\/div>';\n            });\n          }\n\n          function renderPhotoResult(d, file){\n            var listing = d.listing || {};\n            var preview = URL.createObjectURL(file);\n            var conf = Math.round((listing.confidence_score || 0) * 100);\n            var modeBadge = d.cached ? '\u26a1 cached' : (d.ai_mode === 'real' ? '\u2728 Real AI Vision' : '\ud83e\uddea Demo AI (mock)');\n            var html = '<div class=\"bf-demo__photo-card\">';\n            html += '<div><img decoding=\"async\" src=\"' + preview + '\" alt=\"Uploaded preview\" \/><div style=\"text-align:center;font-size:11px;color:#6b7280;margin-top:6px;\">' + modeBadge + '<\/div><\/div>';\n            html += '<div>';\n            html += '<span class=\"bf-demo__confidence\">Confidence: ' + conf + '%<\/span>';\n            html += '<h3>' + escapeHtml(listing.title) + '<\/h3>';\n            html += '<div class=\"bf-demo__field\"><strong>Category<\/strong>' + escapeHtml(listing.category) + '<\/div>';\n            html += '<div class=\"bf-demo__field\"><strong>Description<\/strong>' + escapeHtml(listing.description) + '<\/div>';\n            if (listing.address) html += '<div class=\"bf-demo__field\"><strong>Address<\/strong>' + escapeHtml(listing.address) + '<\/div>';\n            if (listing.phone) html += '<div class=\"bf-demo__field\"><strong>Phone<\/strong>' + escapeHtml(listing.phone) + '<\/div>';\n            if (listing.hours) html += '<div class=\"bf-demo__field\"><strong>Hours<\/strong>' + escapeHtml(listing.hours) + '<\/div>';\n            html += '<div class=\"bf-demo__field\"><strong>Tags<\/strong><div class=\"bf-demo__tags\">' + (listing.tags || []).map(function(t){return '<span>' + escapeHtml(t) + '<\/span>';}).join('') + '<\/div><\/div>';\n            html += '<\/div><\/div>';\n            photoResult.innerHTML = html;\n          }\n        })();\n        <\/script>\n        \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":0,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-4","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bigfoot.aquireautomateexit.com\/index.php?rest_route=\/wp\/v2\/pages\/4","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bigfoot.aquireautomateexit.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bigfoot.aquireautomateexit.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"replies":[{"embeddable":true,"href":"https:\/\/bigfoot.aquireautomateexit.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4"}],"version-history":[{"count":0,"href":"https:\/\/bigfoot.aquireautomateexit.com\/index.php?rest_route=\/wp\/v2\/pages\/4\/revisions"}],"wp:attachment":[{"href":"https:\/\/bigfoot.aquireautomateexit.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}