Site Builder

Editing: play-json.php

writable 0666

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Interactive Prompt Playground</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: 860px; margin: 3rem auto; font-family: sans-serif; }
    h1 { text-align: center; margin-bottom: 2rem; }
    .selector { margin-bottom: 1.5rem; text-align: center; }
    .selector select { padding: .5rem; font-size: 1rem; }
    article.prompt-card {
      background: #fff; border: 1px solid #ddd; border-radius: 8px;
      padding: 1rem; margin-bottom: 1.5rem;
    }
    .prompt-text { line-height: 1.6; }
    .token { color: #5c3bff; font-weight: 600; cursor: pointer; position: relative; }
    .token .tooltip {
      position: absolute; bottom: 100%; left: 0;
      background: #fff; color: #000; padding: .2rem .4rem;
      border: 1px solid #ccc; border-radius: 4px;
      font-size: .8rem; white-space: nowrap;
      opacity: 0; transform: translateY(4px);
      transition: opacity .2s, transform .2s; pointer-events: none;
    }
    .token:hover .tooltip { opacity: 1; transform: translateY(0); }
    .editor-panel {
      max-height: 0; overflow: hidden; opacity: 0;
      transition: max-height .3s ease, opacity .2s ease;
      margin-top: 1rem;
    }
    .editor-panel.open { max-height: 600px; opacity: 1; overflow-y: auto; }
    .editor-panel .body {
      background: #f9f9f9; border: 1px solid #ccc; border-radius: 6px;
      padding: .8rem;
    }
    .editor-panel .body input[type="text"],
    .editor-panel .body textarea,
    .editor-panel .body select {
      width: 100%; margin-top: .5rem; padding: .4rem;
      border: 1px solid #999; border-radius: 4px; font-size: 1rem;
    }
    .editor-panel .body label { display: block; margin-top: .5rem; }
    .ai-btns { margin-top: 1rem; display: flex; gap: .7rem; }
    .ai-btns a { display: inline-block; padding: .5em 1em; 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>Interactive Prompt Playground</h1>
<div class="selector">
  <label for="promptSelect">Choose a prompt:</label>
  <select id="promptSelect"><option>Loading...</option></select>
</div>
<div id="app"></div>

const select = document.getElementById('promptSelect');
  // Populate selector
  select.innerHTML = prompts.map((p,i) =>
    `<option value="${i}">Prompt ${i+1}</option>`
  ).join('');

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

const card = document.createElement('article');
    card.className = 'prompt-card';
    card.innerHTML =
      `<p class="prompt-text">${tokenized.replace(/\n/g,'<br>')}</p>` +
      `<div class="editor-panel"><div class="body"></div></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);

function rebuild() {
      let res = tpl;
      res = res.replace(RX, (_, __, lab) => state[lab] || '');
      card.querySelectorAll('.ai-btns a').forEach(a => {
        a.href = a.dataset.base + encodeURIComponent(res);
      });
    }
    rebuild();

card.querySelectorAll('.token').forEach(tok => {
      tok.addEventListener('click', () => {
        const mi = +tok.dataset.i; const { cmd, lab, opts } = meta[mi];
        const cur = state[lab];
        const panel = card.querySelector('.editor-panel');
        const body = panel.querySelector('.body');
        panel.classList.add('open'); body.innerHTML = `<strong>${lab}</strong><br>`;

let inputEl;
        if (cmd==='A') {
          inputEl = document.createElement('textarea'); inputEl.rows=3; inputEl.value = cur;
          inputEl.addEventListener('input', () => { state[lab]=inputEl.value; tok.firstChild.nodeValue=`[${inputEl.value}]`; rebuild(); });
        } else if (cmd==='B') {
          inputEl = document.createElement('div'); opts.forEach(o=>{
            const lbl = document.createElement('label'), r=document.createElement('input');
            r.type='radio'; r.name=`r${pi}${mi}`; r.value=o; if(o===cur) r.checked=true;
            r.addEventListener('change',()=>{ state[lab]=o; tok.firstChild.nodeValue=`[${o}]`; rebuild(); panel.classList.remove('open'); });
            lbl.append(r,' ',o); inputEl.append(lbl);
          });
        } else if (cmd==='C') {
          inputEl = document.createElement('div'); opts.forEach(o=>{
            const lbl=document.createElement('label'), c=document.createElement('input');
            c.type='checkbox'; c.value=o; c.checked=state[lab].split(SEP).includes(o);
            c.addEventListener('change',()=>{ const sel=[...inputEl.querySelectorAll('input:checked')].map(i=>i.value); state[lab]=sel.join(SEP); tok.firstChild.nodeValue=`[${state[lab]}]`; rebuild(); });
            lbl.append(c,' ',o); inputEl.append(lbl);
          });
        } else if (cmd==='D') {
          inputEl=document.createElement('select'); let list=opts;
          if(opts.every(o=>/^\d+$/.test(o))){ const max=Math.max(...opts.map(Number)); list=Array.from({length:max},(_,i)=>''+(i+1)); }
          list.forEach(o=>{ const optEl=document.createElement('option'); optEl.textContent=o; if(o===cur)optEl.selected=true; inputEl.append(optEl); });
          inputEl.addEventListener('change',()=>{ state[lab]=inputEl.value; tok.firstChild.nodeValue=`[${inputEl.value}]`; rebuild(); panel.classList.remove('open'); });
        } else if (cmd==='I') {
          inputEl=document.createElement('select'); const ph=document.createElement('option'); ph.textContent=cur; ph.disabled=true; ph.selected=true; inputEl.append(ph);
          opts.forEach(u=>{ const optEl=document.createElement('option'); optEl.textContent=u; inputEl.append(optEl); });
          inputEl.addEventListener('change',()=>{ state[lab]=inputEl.value; tok.firstChild.nodeValue=`[${inputEl.value}]`; rebuild(); panel.classList.remove('open'); });
        } else {
          inputEl=document.createElement('input'); inputEl.type='text'; inputEl.value=cur;
          inputEl.addEventListener('input',()=>{ state[lab]=inputEl.value; tok.firstChild.nodeValue=`[${inputEl.value}]`; rebuild(); });
        }
        if(inputEl) body.append(inputEl);

const onDocClick=e=>{ if(!panel.contains(e.target)&&!tok.contains(e.target)){ panel.classList.remove('open'); document.removeEventListener('mousedown',onDocClick);} };
        document.addEventListener('mousedown',onDocClick);
      });
    });
  }

// initial render
  renderPrompt(prompts[0], 0);

// change prompt
  select.addEventListener('change',()=> renderPrompt(prompts[select.value], select.value));
})();
</script>

</body>
</html>

Site Builder

Editing: play-json.php

Site Builder