Site Builder

Editing: indexokkkk.php

writable 0666

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ultimate Prompt Playground v6 (Full)</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
  <style>
    body { max-width:900px; margin:2rem auto; font-family:system-ui,sans-serif; }
    h1  { text-align:center; margin-bottom:1.5rem; }

/* BUSINESS PROFILE CARD */
    .biz-card {
      background: #f9fafb;
      border: 1px solid #ccc;
      border-radius: 6px;
      padding: 1rem;
      margin-bottom: 1.5rem;
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    .biz-card h2 { margin: 0; font-size: 1.5rem; }
    .biz-details { display: flex; flex-direction: column; gap: .25rem; }
    .biz-details p { margin: 0; font-size: 1rem; }
    .biz-icon { font-size: 1.5rem; color: #6c48ff; }

/* PROMPT CARD */
    .prompt-card {
      position:relative;
      background:#fff;
      border:1px solid #ddd;
      border-radius:8px;
      padding:1rem;
      margin-bottom:1.5rem;
    }

/* PROMPT TEXT – no more flex! */
    .prompt-text {
      /* let it flow inline and wrap on whitespace */
      white-space: normal;
      line-height:1.6;
    }

/* TOKENS */
    .token {
      display:inline-flex;
      background:#e8e0ff;
      color:#5c3bff;
      padding:.3rem .6rem;
      border-radius:4px;
      cursor:pointer;
      user-select:none;
      flex:0 1 auto;
      min-width:0;
      white-space:normal;
      overflow-wrap:break-word;
      word-break:break-word;
      margin-bottom:.3rem;
    }
    .token.placeholder { opacity:.6; }

/* TOOLBAR */
    .toolbar {
      position:absolute;
      background:#fff;
      border:1px solid #ccc;
      border-radius:6px;
      box-shadow:0 2px 12px rgba(0,0,0,.1);
      padding:.8rem;
      display:flex;
      flex-direction:column;
      gap:.6rem;
      z-index:10;
      width:300px;
    }
    .toolbar label { font-size:.9rem; font-weight:600; margin-bottom:.3rem; }
    .toolbar input[type="text"], .toolbar select, .toolbar textarea {
      width:100%; padding:.4rem; border:1px solid #999; border-radius:4px; font-size:1rem;
    }
    .toolbar select { max-height:200px; overflow:auto; }
    .toolbar textarea { resize:vertical; }

/* CHECKBOX LIST */
    .checkbox-list {
      display:flex; flex-direction:column; gap:.4rem;
      max-height:200px; overflow:auto; padding-right:.2rem;
    }
    .checkbox-list label {
      display:flex; align-items:center; gap:.6rem;
      padding:.4rem .6rem; background:#f0f4ff; border-radius:4px;
      cursor:pointer; transition:background .2s;
    }
    .checkbox-list label:hover { background:#e0e8ff; }
    .checkbox-list input[type="checkbox"] { accent-color:#3b82f6; width:1.2em; height:1.2em; flex-shrink:0; }

/* AI BUTTONS */
    .ai-btns { display:flex; gap:.6rem; margin-top:1rem; }
    .ai-btns a {
      flex:1; text-align:center; padding:.7rem; border-radius:6px;
      color:#fff; text-decoration:none; font-weight:600;
    }
    .ai-btns a.chatgpt    { background:#6c48ff; }
    .ai-btns a.perplexity { background:#1ca7ec; }
    .ai-btns a.copilot    { background:#00c853; color:#173E22; }
    .ai-btns a:hover      { filter:brightness(1.1); }
  </style>
</head>
<body>
  <h1>Ultimate Prompt Playground v6 (Full)</h1>

<div id="biz-profile" class="biz-card" hidden>
    <div class="biz-icon">🏢</div>
    <div class="biz-details">
      <h2></h2>
      <p>📍 <span class="biz-address"></span></p>
      <p>📞 <span class="biz-phone"></span></p>
    </div>
  </div>

// Load business data
    const params = new URLSearchParams(location.search);
    const ph = params.get('ph') || '';
    let biz = {};
    try { biz = await fetch(`/ph/${ph}/business.json`).then(r=>r.json()); } catch{}

function formatPhone(num) {
      const d = (num||'').replace(/\D/g,'');
      return d.length===10
        ? `(${d.slice(0,3)}) ${d.slice(3,6)}-${d.slice(6)}`
        : num;
    }

// Populate business profile
    const profile = document.getElementById('biz-profile');
    if(biz.name) {
      profile.querySelector('h2').textContent    = biz.name;
      profile.querySelector('.biz-address').textContent = biz.address || '';
      profile.querySelector('.biz-phone').textContent   = formatPhone(biz.phone);
      profile.hidden = false;
    }

// Load prompts
    let prompts = [];
    try { prompts = await fetch('prompts.json')
                     .then(r=>r.json())
                     .then(a=>a.map(o=>o.prompt)); }
    catch{}

const app = document.getElementById('app');

function placeToolbar(tb,tok) {
      const card = tok.closest('.prompt-card');
      const tr = tok.getBoundingClientRect(), cr = card.getBoundingClientRect();
      tb.style.top  = (tr.bottom - cr.top)+'px';
      tb.style.left = (tr.left   - cr.left)+'px';
    }

for(const tpl of prompts){
      const meta=[], state={};
      ['name','slogan','description','address','city','state','zip','phone','website']
        .forEach(k=>state[k]=biz[k]||'');
      state.service  = Array.isArray(biz.tags)?biz.tags.slice(0,1):[];
      state.location = Array.isArray(biz.location_tags)?biz.location_tags.slice(0,1):[];

tpl.replace(RX,(m,cmd='',lab,ops='',def='')=>{
        lab=lab.trim(); let opts=[];
        if(cmd==='C'){
          if(lab==='service') opts=[...biz.tags||[]];
          else if(lab==='location') opts=[...biz.location_tags||[]];
          else opts=ops.split('|').filter(Boolean);
          state[lab]=def
            ? def.split(',').map(v=>v.trim())
            : (opts.length?[opts[0]]:[]);
        }
        else if(cmd==='B'){
          opts=ops.split('|').filter(Boolean);
          state[lab]=def||opts[0]||'';
        }
        else if(cmd==='D'){
          if(ops.includes('|')){
            opts=ops.split('|').filter(Boolean);
            state[lab]=def||opts[0]||'';
          } else {
            state[lab]=def||state[lab]||'';
          }
        }
        else if(cmd==='I'){
          opts=ops.split('|').filter(Boolean);
          state[lab]=def||state[lab]||'';
        }
        else {
          state[lab]=def||state[lab]||'';
        }
        meta.push({cmd:cmd||'A',lab,opts,rawOps:ops,defaultVal:def});
        return '';
      });

const card=document.createElement('div'); card.className='prompt-card';
      card.innerHTML=`
        <div class="prompt-text"></div>
        <div class="ai-btns">
          <a class="chatgpt"    data-base="https://chatgpt.com/?prompt=">ChatGPT</a>
          <a class="perplexity" data-base="https://www.perplexity.ai/search?q=">Perplexity</a>
          <a class="copilot"    data-base="https://copilot.microsoft.com/?q=">Copilot</a>
        </div>`;
      app.append(card);

const tb=document.createElement('div');
      tb.className='toolbar';
      tb.style.display='none';
      card.append(tb);

function rebuild(){
        renderText();
        const out=tpl.replace(RX,(m,cmd='',lab)=>{
          const v=state[lab.trim()];
          return cmd==='C' ? (v||[]).join(SEP) : v||'';
        });
        card.querySelectorAll('.ai-btns a')
            .forEach(a=>a.href=a.dataset.base+encodeURIComponent(out));
      }

renderText();
      rebuild();

function onTokenClick(e){
        const tok=e.currentTarget, idx=+tok.dataset.i;
        const {cmd,lab,opts,rawOps,defaultVal}=meta[idx];
        tb.innerHTML='';
        placeToolbar(tb,tok);
        tb.style.display='flex';

document.addEventListener('mousedown', function off(ev){
          if(!tb.contains(ev.target) && ev.target!==tok){
            tb.style.display='none';
            document.removeEventListener('mousedown',off);
          }
        });

const labelEl=document.createElement('label');
        labelEl.textContent=lab.replace(/_/g,' ');
        tb.append(labelEl);

if(cmd==='C'){
          const list=document.createElement('div');
          list.className='checkbox-list';
          opts.forEach(o=>{
            const lb=document.createElement('label');
            const cb=document.createElement('input');
            cb.type='checkbox';
            cb.value=o;
            cb.checked=(state[lab]||[]).includes(o);
            cb.onchange=()=>{
              state[lab]=[...list.querySelectorAll('input:checked')].map(i=>i.value);
              rebuild();
            };
            lb.append(cb,' ',o);
            list.append(lb);
          });
          tb.append(list);
        }
        else if(cmd==='B'){
          opts.forEach(o=>{
            const lb=document.createElement('label');
            const rd=document.createElement('input');
            rd.type='radio';
            rd.name=lab;
            rd.value=o;
            rd.checked=(state[lab]===o);
            rd.onchange=()=>{
              state[lab]=o;
              rebuild();
              tb.style.display='none';
            };
            lb.append(rd,' ',o);
            tb.append(lb);
          });
        }
        else if(cmd==='D'){
          const sel=document.createElement('select');
          if(opts.length){
            opts.forEach(o=>{
              const op=document.createElement('option');
              op.value=o; op.textContent=o;
              if(o===state[lab]) op.selected=true;
              sel.append(op);
            });
          }
          else if(/^[0-9]+$/.test(rawOps||defaultVal)){
            const max=parseInt(rawOps||defaultVal,10)||0;
            for(let i=1;i<=max;i++){
              const op=document.createElement('option');
              op.value=String(i); op.textContent=String(i);
              if(String(i)===state[lab]) op.selected=true;
              sel.append(op);
            }
          }
          sel.onchange=()=>{
            state[lab]=sel.value;
            rebuild();
            tb.style.display='none';
          };
          tb.append(sel);
        }
        else if(cmd==='I'){
          if(opts.length){
            const select=document.createElement('select');
            const placeholder=document.createElement('option');
            placeholder.disabled=true;
            placeholder.selected=true;
            placeholder.textContent=state[lab]||'Select…';
            select.append(placeholder);
            opts.forEach(url=>{
              const op=document.createElement('option');
              op.value=url; op.textContent=url;
              select.append(op);
            });
            const iframe=document.createElement('iframe');
            iframe.hidden=true;
            iframe.style.width='100%';
            iframe.style.height='200px';
            const btn=document.createElement('button');
            btn.textContent='Use site';
            btn.style.marginTop='.6rem';
            select.onchange=()=>{ iframe.hidden=false; iframe.src=select.value; };
            btn.onclick=()=>{
              state[lab]=select.value;
              rebuild();
              tb.style.display='none';
            };
            tb.append(select, iframe, btn);
          } else {
            const inp=document.createElement('input');
            inp.type='number';
            inp.value=state[lab]||'';
            inp.oninput=()=>{
              state[lab]=inp.value;
              rebuild();
            };
            tb.append(inp);
          }
        }
        else { // A or default
          const inpOrTa = (cmd==='A')
            ? (()=>{ const t=document.createElement('textarea'); t.rows=4; return t; })()
            : (()=>{ const i=document.createElement('input'); i.type='text'; return i; })();

inpOrTa.value = state[lab]||'';
          inpOrTa.oninput=()=>{
            state[lab]=inpOrTa.value;
            rebuild();
          };
          tb.append(inpOrTa);
        }
      }
    }

// Tutorial Section
    const tuto=document.createElement('section');
    tuto.style.cssText='margin-top:2rem;padding:1rem;border-top:1px solid #ddd;';
    tuto.innerHTML=`
      <h2>Shortcode Tutorial</h2>
      <ul>
        <li><strong>A-tokens (Free Text)</strong>: <code>[A-key-~default~]</code> → textarea preset.</li>
        <li><strong>B-tokens (Single Choice)</strong>: <code>[B-key-|opt1|opt2|~default~]</code> → radio buttons.</li>
        <li><strong>C-tokens (Multi-Select)</strong>: <code>[C-key-|opt1|opt2|]</code> or dynamic <code>[C-service-]</code>,<code>[C-location-]</code> → checkboxes.</li>
        <li><strong>D-tokens (Dropdown)</strong>: <code>[D-key-5~3~]</code> → numeric 1…5 dropdown default 3; <code>[D-key-|a|b|~b~]</code> → text dropdown.</li>
        <li><strong>I-tokens (Iframe Preview)</strong>: <code>[I-key-|url1|url2|…]</code> → URL select + iframe preview + button.</li>
      </ul>`;
    app.append(tuto);
  })();
  </script>
</body>
</html>

Site Builder

Editing: indexokkkk.php

Site Builder