Site Builder

Editing: testss.php

writable 0666

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Promptinator Working Demo</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:800px; margin:2rem auto; font-family:system-ui,sans-serif; }
    .token { display:inline-flex; margin:.2rem .1rem; padding:.3rem .6rem; background:#e8e0ff; color:#5c3bff; border-radius:4px; cursor:pointer; user-select:none; }
    dialog[open] { border:none; border-radius:10px; box-shadow:0 4px 32px #0002; max-width:400px; }
    .popup-body { padding:1.1rem 1.4rem; }
    fieldset { border:1px solid #ccd; border-radius:8px; padding:.8rem 1rem; background:#fff; margin-bottom:.6rem; }
  </style>
</head>
<body>
<h2>Promptinator – Fully Working Minimal Demo</h2>
<div id="app"></div>
<dialog id="dlg"></dialog>

let meta = [], state = {};

// Render prompt with clickable tokens (by index)
  const html = tpl.replace(RX, (m, cmd='', lab, ops='', def='') => {
    const i = meta.findIndex((_, idx) => idx === meta.length);
    meta.length++;
    let idx = meta.length - 1;
    let val = state[idx];
    if (cmd==='C') {
      return (Array.isArray(val)?val:[val])
        .map(v=>`<span class="token" data-i="${idx}">${v}</span>`).join(', ');
    }
    return `<span class="token" data-i="${idx}">${val}</span>`;
  });

document.getElementById('app').innerHTML =
    `<div class="prompt-text">${html.replace(/\n/g,'<br>')}</div>`;

// Re-attach click events for tokens
  document.querySelectorAll('.token').forEach(token => {
    token.onclick = function() {
      const idx = +token.dataset.i;
      showPopup(idx, state[idx], v => {
        state[idx] = meta[idx].cmd === 'C'
          ? v.split(',').map(s=>s.trim()).filter(Boolean)
          : v;
        meta.length = 0; // reset for next render
        renderPrompt(initialPrompt);
      });
    };
  });
}

// The modal dialog, shown on click
function showPopup(idx, cur, done) {
  const {cmd, lab, opts, def} = meta[idx];
  let pretty = lab.replace(/[-_]/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
  let inner = '';
  switch(cmd) {
    case 'A':
      inner = `<label>${pretty}<textarea style="width:100%;font-size:1rem;" rows=4>${cur}</textarea></label>`;
      break;
    case 'B':
      inner = `<fieldset><legend>${pretty}</legend>` +
        opts.map(o => `<label><input type=radio name=r value="${o}" ${o===cur?'checked':''}> ${o}</label>`).join('') +
        `</fieldset>`;
      break;
    case 'C':
      inner = `<fieldset><legend>${pretty}</legend>` +
        opts.map(o => `<label><input type=checkbox value="${o}" ${Array.isArray(cur)&&cur.includes(o)?'checked':''}> ${o}</label>`).join('') +
        `</fieldset><button>Done</button>`;
      break;
    case 'D': {
      let choices = opts;
      if (opts.length === 1 && /^\d+$/.test(opts[0])) {
        choices = Array.from({length:+opts[0]}, (_,i)=>String(i+1));
      }
      inner = `<label>${pretty}<select>${choices.map(o =>
        `<option${o===cur?' selected':''}>${o}</option>`).join('')}</select></label>`;
      break;
    }
    default:
      inner = `<label>${pretty}<input type="text" style="width:100%;font-size:1rem;" value="${cur}"></label>`;
  }
  dlg.innerHTML = `<div class="popup-body">${inner}</div>`;
  dlg.showModal();
  const pb = dlg.querySelector('.popup-body');

// Auto-commit
  const commit = v => { done(v); dlg.close(); };

// A: textarea
  if (cmd === 'A') {
    const ta = pb.querySelector('textarea');
    ta.focus();
    ta.onblur = () => commit(ta.value);
  }
  // B: radio
  if (cmd === 'B') pb.onclick = e => { if (e.target.name === 'r') commit(e.target.value); };
  // C: checkbox multi
  if (cmd === 'C') pb.querySelector('button').onclick = () => {
    const vals = [...pb.querySelectorAll('input:checked')].map(i=>i.value);
    commit(vals.join(', ') || cur);
  };
  // D: dropdown
  if (cmd === 'D') pb.querySelector('select').onchange = e => commit(e.target.value);
  // Default: input text
  if (!/[A-D]/.test(cmd)) {
    const inp = pb.querySelector('input');
    inp.focus();
    inp.onblur = e => commit(inp.value);
    inp.onkeydown = e => { if (e.key === 'Enter') commit(inp.value); };
  }
}

renderPrompt(initialPrompt);
</script>
</body>
</html>

Site Builder

Editing: testss.php

Site Builder