Site Builder

Editing: 3perfect.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; }

/* CARD AND PROMPT TEXT */
    .prompt-card {
      position:relative;
      background:#fff;
      border:1px solid #ddd;
      border-radius:8px;
      padding:1rem;
      margin-bottom:1.5rem;
    }
    .prompt-text {
      display:flex;
      flex-wrap:wrap;
      gap:.3rem;
      align-items:flex-start;
      line-height:1.6;
      white-space:normal;
      min-width:0;
    }

/* 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="app"></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{}

// 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 = {};
      // initialize fields
      ['name','slogan','description','address','city','state','zip','phone','website'].forEach(k=> state[k] = biz[k]||'');
      state.service  = biz.tags && Array.isArray(biz.tags) ? biz.tags.slice(0,1) : [];
      state.location = biz.location_tags && Array.isArray(biz.location_tags) ? biz.location_tags.slice(0,1) : [];

// build metadata
      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 {
          // A
          state[lab] = def || state[lab] || '';
        }
        meta.push({cmd:cmd||'A', lab, opts, rawOps:ops, defaultVal:def});
        return '';
      });

// helper to render prompt-text
      function renderText() {
        const container = card.querySelector('.prompt-text');
        let html = tpl.replace(RX,(m,cmd='',lab)=>{
          const label = lab.trim();
          const idx = meta.findIndex(x=>x.lab===label);
          if (cmd==='C') {
            const arr = state[label] || [];
            return arr.map(tag=> `<span class="token" data-i="${idx}">${tag}</span>`).join(' ');
          }
          const val = state[label] || '';
          return `<span class="token" data-i="${idx}">${val}</span>`;
        });
        container.innerHTML = html.replace(/\n/g,'<br>');
        container.querySelectorAll('.token').forEach(t=> t.onclick = onTokenClick);
      }

// build card
      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);
      const rebuild = () => {
        renderText();
        const out = tpl.replace(RX,(m,cmd='',lab)=> {
          const lbl=lab.trim(); const val= state[lbl];
          return cmd==='C' ? (val||[]).join(SEP) : (val|| '');
        });
        card.querySelectorAll('.ai-btns a').forEach(a=> a.href = a.dataset.base + encodeURIComponent(out));
      };
      rebuild();

// token click handler
      function onTokenClick(e) {
        const tok = e.currentTarget; const 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 if(cmd==='A') {
          const ta=document.createElement('textarea'); ta.rows=4; ta.value=state[lab]||'';
          ta.oninput=()=>{ state[lab]=ta.value; rebuild(); };
          tb.append(ta);

} else {
          const inp=document.createElement('input'); inp.type='text'; inp.value=state[lab]||'';
          inp.oninput=()=>{ state[lab]=inp.value; rebuild(); };
          tb.append(inp);
        }
      }
    }
  })();
  </script>
</body>
</html>

Site Builder

Editing: 3perfect.php

Site Builder