Siteβ―Builder
Editing:
prompt-test.php
writable 0666
<? $ph = $_GET['ph'] ?? ''; // Business JSON $bizPath = $_SERVER['DOCUMENT_ROOT'] . "/ph/{$ph}/business.json"; $biz = is_readable($bizPath) ? json_decode(file_get_contents($bizPath), true) : []; ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Promptinator Demo Gallery | BestDealOn.com</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2.*/pico.min.css"> <style> body { background:#f6f8fb; font-family:system-ui,Arial,sans-serif; margin:0; color:#22344d;} .header { padding:1.25em 0 .65em 0; background:#fff; text-align:center; border-bottom:1px solid #e3e7f4;} .logo { font-weight:900; font-size:1.24em; color:#5016A8; } .logo .d { color:#00c853; } .logo .o{ color:#ff1744; } h1 { font-size:1.16em; color:#176edc; margin:.2em 0 .7em 0;} .container { max-width:700px; margin:2.2em auto 2.2em auto; background:#fff; border-radius:22px; box-shadow:0 2px 16px #bfcdfd23; padding:2.1em 1.6em 1.5em;} .demo-block { margin-bottom:2.5em; border-bottom:1px solid #eaecef; padding-bottom:2.3em;} .demo-block:last-child { border-bottom:none; } .demo-header { font-size:1.12em; font-weight:700; color:#0d4ca2; margin-bottom:.33em;} .demo-desc { color:#3d5469; font-size:.97em; margin-bottom:1.4em;} .Promptinator { margin-bottom:1em; } .note { color:#8ca0bc; font-size:.96em; margin:.7em 0 0 0; } .ai-buttons a, .ai-btns a { font-size:.97em;} .token { color:#5c3bff; font-weight:600; cursor:pointer;} dialog { border:none; border-radius:10px; max-width:440px; padding:0; } dialog::backdrop { background:rgba(0,0,0,0.4); } .popup-body { background:#fff; padding:1.3rem 1.6rem; border-radius:12px; box-shadow:0 4px 26px rgba(0,0,0,0.2);} fieldset { border:1px solid #ccd; border-radius:8px; padding:.8rem 1rem; background:#fff; margin-bottom:1rem;} iframe { border:1px solid #ccd; width:100%; min-height:220px; margin-top:.6rem; } @media (max-width:700px) { .container{max-width:99vw;padding:1.1em .6em 1.4em;} } </style> <script>window.businessData = <?= json_encode($biz, JSON_UNESCAPED_SLASHES) ?>;</script> <script type="module"> import Promptinator from './businessPromptinator.js'; document.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('.Promptinator').forEach(div => { Promptinator.init({ mount: div }); }); }); </script> </head> <body> <div class="header"> <span class="logo">BEST <span class="d">DEAL</span> <span class="o">ON</span></span> <span style="color:#8ea3b9;font-size:.97em;font-weight:400;margin-left:.7em;">Promptinator Demo Gallery</span> </div> <div class="container"> <h1>Promptinator Demo Gallery</h1> <div style="color:#2a487b;font-size:1.08em;line-height:1.45;margin-bottom:2em;"> <b>Welcome!</b> This page shows off every Promptinator shortcode feature.<br> Each section is a live demoβedit tokens, see AI buttons, and even try different edit/think controls.<br> <span style="color:#798ca7;font-size:.98em;">(All examples use the same JS you can drop on any WordPress or static site.)</span> </div> <!-- DEMO 1: Business Field Autoinject --> <div class="demo-block"> <div class="demo-header">Business Profile Tokens (autofill from profile)</div> <div class="demo-desc"> These tokens pull live data from your business or user profile. <br><span class="note">No edit button is shown (edit=0). AI buttons are enabled (think=1).</span> </div> <div class="Promptinator" edit=0 think=1> <b>[name]</b><br> [slogan]<br> <span style="color:#457eaf;">[description]</span><br> <b>Contact:</b> [phone], [website], [email]<br> <b>Location:</b> [address], [city], [state] [zip] </div> </div> <!-- DEMO 2: Services/Location Checkboxes --> <div class="demo-block"> <div class="demo-header">Business Services & Locations (Dynamic Checkboxes)</div> <div class="demo-desc"> See how your service and area tags become instant multi-select options.<br> <span class="note">Edit is off (edit=0), AI buttons hidden (think=0).</span> </div> <div class="Promptinator" edit=0 think=0> Select your service(s):<br>[C-service-]<br> Area(s):<br>[C-location-] </div> </div> <!-- DEMO 3: Text, Radios, Checkboxes, Dropdowns, URL Picker --> <div class="demo-block"> <div class="demo-header">All Static Elements (Text, Radios, Checkboxes, Dropdowns, URL)</div> <div class="demo-desc"> This prompt shows every Promptinator field type.<br> <span class="note">Edit and AI both enabled (edit=1, think=1, default)</span> </div> <div class="Promptinator"> Project Title: [A-title-~Amazing AI Website~]<br> Type: [B-type-|Business|Personal|Nonprofit|~Business~]<br> Channels: [C-channels-|SEO|PPC|Email|Social Media|~Email~]<br> Package: [D-package-|Basic|Pro|Enterprise|~Pro~]<br> Page count: [D-pages-10~3~]<br> Reference site: [I-ref-|https://www.perplexity.ai/|https://chat.openai.com/|~Pick a site~] </div> </div> <!-- DEMO 4: Quote/Order Prompt, Only AI Buttons --> <div class="demo-block"> <div class="demo-header">Dynamic Quote / Order Prompt (AI Only, No Edit)</div> <div class="demo-desc"> A prompt for instant quotes or orders.<br> <span class="note">Edit prompt is disabled (edit=0). Only AI search buttons available (think=1).</span> </div> <div class="Promptinator" edit=0 think=1> Please quote me on: [C-service-] for [D-qty-10~1~] items in [C-location-].<br> Preferred contact: [B-contact_method-|Email|Phone|Text|~Email~] </div> </div> <!-- DEMO 5: Fill-in Contact Form (Editable, No AI Buttons) --> <div class="demo-block"> <div class="demo-header">Contact/Feedback Form (Edit Prompt, No AI)</div> <div class="demo-desc"> Here, you can edit the full prompt structure.<br> <span class="note">Edit is enabled, AI buttons are hidden (think=0).</span> </div> <div class="Promptinator" edit=1 think=0> Name: [A-name-~Your Name~]<br> Subject: [A-subject-~Feedback~]<br> How did you hear about us? [B-referrer-|Friend|Web|Ad|Other|~Web~]<br> Message: [A-message-~Write your feedback here~] </div> </div> <!-- DEMO 6: Everything at Once! --> <div class="demo-block"> <div class="demo-header">Full Survey/Discovery (All Features)</div> <div class="demo-desc"> A prompt using <b>every type of token</b>, with editing and AI enabled.<br> <span class="note">Great for onboarding, proposals, or lead forms!</span> </div> <div class="Promptinator"> Business Name: [name]<br> Contact Email: [email]<br> Service(s) needed: [C-service-]<br> Area(s): [C-location-]<br> Budget: [D-budget-5~3~] (1=Small, 5=Large)<br> Project Type: [B-type-|Website|App|Marketing|Other|~Website~]<br> Preferred Channel: [C-channels-|SEO|Email|Social Media|~Email~]<br> Reference: [I-reference-|https://www.perplexity.ai/|https://www.gutenberg.org/|~Pick a site~]<br> Anything else? [A-notes-~Additional info~] </div> </div> <div style="text-align:center;color:#8ca0bc;margin-top:2.5em;font-size:.98em;"> Promptinator.js © <?=date('Y')?> John Coates | <a href="https://bestdealon.com/" style="color:#4a76de;">BestDealOn.com</a> </div> </div> </body> </html>
Save changes
Create folder
writable 0777
Create
Cancel