Site Builder

Editing: play-jsonv6.php

writable 0666

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ultimate Prompt Playground v6 (Delegated, Wider Toolbar)</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; }
    .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: .2rem;
      align-items: flex-start;
      line-height: 1.6;
      white-space: normal;
    }
    .token {
      display: inline-flex;
      flex: 0 1 auto;
      min-width: 0;
      background: #e8e0ff;
      color: #5c3bff;
      padding: .2rem .5rem;
      border-radius: 4px;
      cursor: pointer;
      margin: .2rem .2rem .2rem 0;
      white-space: normal;
      overflow-wrap: anywhere;
    }
    .token:hover { background: #d4c6ff; }
    .toolbar {
      position: absolute;
      background: #fff;
      border: 1px solid #ccc;
      border-radius: 6px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      padding: .6rem;
      z-index: 10;
      display: flex;
      flex-direction: column;
      gap: .5rem;
      width: 280px;             /* increased width */
    }
    .toolbar label { font-size: .9rem; margin-bottom: .2rem; }
    .toolbar input[type="text"], .toolbar textarea, .toolbar select {
      width: 100%; padding: .3rem; border: 1px solid #999; border-radius: 4px; font-size: 1rem;
    }
    .toolbar select { max-height: 200px; }   /* increased height */
    .toolbar textarea { resize: vertical; }
    .toolbar .checkbox-list {
      display: flex;
      flex-direction: column;
      gap: .3rem;
      max-height: 180px;       /* increased height */
      overflow: auto;
    }
    .ai-btns { margin-top: 1rem; display: flex; gap: .6rem; }
    .ai-btns a { flex: 1; text-align: center; background: #6c48ff; color: #fff; padding: .6rem; border-radius: 6px; text-decoration: none; font-weight: 600; }
    .ai-btns a.perplexity { background: #1ca7ec; }
    .ai-btns a.copilot { background: #00c853; color: #173E22; }
  </style>
</head>
<body>

<h1>Ultimate Prompt Playground v6 (Delegated, Wider Toolbar)</h1>
<div id="app"></div>

function positionToolbar(toolbar, tok) {
    const card = tok.closest('.prompt-card');
    const tokRect = tok.getBoundingClientRect();
    const cardRect = card.getBoundingClientRect();
    toolbar.style.top = (tokRect.bottom - cardRect.top) + 'px';
    toolbar.style.left = (tokRect.left - cardRect.left) + 'px';
  }

data.forEach(item => {
    const tpl = item.prompt;
    const meta = [];
    const state = {};

const card = document.createElement('div');
    card.className = 'prompt-card';
    card.innerHTML = `
      <div class="prompt-text">${tokenized.replace(/\n/g, '<br>')}</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 toolbar = document.createElement('div');
    toolbar.className = 'toolbar';
    toolbar.style.display = 'none';
    card.append(toolbar);

card.addEventListener('click', e => {
      const tok = e.target.closest('.token');
      if (!tok) return;
      const mi = Number(tok.dataset.i);
      const { cmd, lab, opts } = meta[mi];
      toolbar.innerHTML = '';
      positionToolbar(toolbar, tok);
      toolbar.style.display = 'flex';

const onDocClick = ev => {
        if (!toolbar.contains(ev.target) && ev.target !== tok) {
          toolbar.style.display = 'none';
          document.removeEventListener('mousedown', onDocClick);
        }
      };
      document.addEventListener('mousedown', onDocClick);

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

if (cmd === 'A') {
        const ta = document.createElement('textarea'); ta.rows = 4; ta.value = state[lab];
        ta.oninput = () => { state[lab] = ta.value; tok.textContent = ta.value; rebuild(); };
        toolbar.append(ta);

} else if (cmd === 'B') {
        opts.forEach(o => {
          const lb = document.createElement('label');
          const r = document.createElement('input'); r.type = 'radio'; r.name = lab; r.value = o;
          r.checked = (o === state[lab]);
          r.onchange = () => { state[lab] = o; tok.textContent = o; rebuild(); toolbar.style.display = 'none'; };
          lb.append(r, ' ', o);
          toolbar.append(lb);
        });

} else if (cmd === 'C') {
        const list = document.createElement('div'); list.className = 'checkbox-list';
        opts.forEach(o => {
          const lb = document.createElement('label');
          const c = document.createElement('input'); c.type = 'checkbox'; c.value = o;
          c.checked = (state[lab] || []).includes(o);
          c.onchange = () => {
            state[lab] = Array.from(list.querySelectorAll('input:checked')).map(i=>i.value);
            const textDiv = card.querySelector('.prompt-text');
            const html = tpl.replace(RX, (m2, c2, l2) =>
              c2 === 'C'
                ? (state[l2]||[]).map(v=>`<span class="token" data-i="${meta.findIndex(x=>x.lab===l2)}">${v}</span>`).join(' ')
                : `<span class="token" data-i="${meta.findIndex(x=>x.lab===l2)}">${state[l2]||''}</span>`
            );
            textDiv.innerHTML = html.replace(/\n/g,'<br>');
            rebuild();
          };
          lb.append(c,' ',o);
          list.append(lb);
        });
        toolbar.append(list);

} else if (cmd === 'D' || cmd === 'I') {
        const sel = document.createElement('select');
        const choices = cmd==='D' && opts.every(x=>/^\d+$/.test(x))
          ? Array.from({length: Math.max(...opts.map(n=>+n))},(_,i)=>''+(i+1))
          : opts;
        choices.forEach(o=>{
          const op = document.createElement('option'); op.value=o; op.textContent=o;
          if(o===state[lab]) op.selected=true;
          sel.append(op);
        });
        sel.onchange = () => { state[lab]=sel.value; tok.textContent=sel.value; rebuild(); toolbar.style.display='none'; };
        toolbar.append(sel);

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

</body>
</html>

Site Builder

Editing: play-jsonv6.php

Site Builder