Site Builder

Editing: business-promptinator-demo.php

writable 0666

<!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>
<?

$ph          = $_GET['ph'] ?? '';

// Business JSON
$bizPath     = $_SERVER['DOCUMENT_ROOT'] . "/ph/{$ph}/business.json";
$biz         = is_readable($bizPath) ? json_decode(file_get_contents($bizPath), true) : [];
?>

<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>
    
    
    <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>
    
    
    <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>

<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>

<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 &copy; <?=date('Y')?> John Coates | <a href="https://bestdealon.com/" style="color:#4a76de;">BestDealOn.com</a>
    </div>
  </div>
</body>
</html>

Site Builder

Editing: business-promptinator-demo.php

Site Builder