Site Builder

Editing: play3.php

writable 0666

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sliding In-Place Token Editor</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; position: relative; }
    h1 { text-align: center; margin-bottom: 2rem; }
    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; padding-bottom: 1.5rem;
    }
    .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; font-weight: normal;
    }
    .editor-panel .body button {
      position: sticky; bottom: .5rem; margin-top: 1rem;
      padding: .5rem .8rem; background: #5c3bff; color: #fff;
      border: none; border-radius: 4px; cursor: pointer;
    }
  </style>
</head>
<body>

<h1>Interactive Prompt Playground</h1>
<div id="app"></div>

prompts.forEach((tpl, pi) => {
    const meta = [], state = {};

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

card.querySelectorAll('.token').forEach(tok => {
      tok.addEventListener('click', () => {
        const mi = +tok.dataset.i;
        const m = meta[mi];
        const cur = state[m.lab];
        const panel = card.querySelector('.editor-panel');
        const body = panel.querySelector('.body');

body.innerHTML =
          `<strong>${m.lab.replace(/[-_]/g,' ')}</strong>` +
          fieldHTML +
          `<button>Save</button>`;

panel.classList.add('open');

body.querySelector('button').onclick = () => {
          let v;
          if (m.cmd === 'C') {
            v = [...body.querySelectorAll('input[type=checkbox]:checked')]
                 .map(i=>i.value).join(SEP) || cur;
          } else if (m.cmd === 'B') {
            const sel = body.querySelector('input[type=radio]:checked');
            v = sel ? sel.value : cur;
          } else {
            v = body.querySelector('textarea, input[type=text], select').value;
          }
          state[m.lab] = v;
          tok.firstChild.nodeValue = `[${v}]`;
          panel.classList.remove('open');
        };
      });
    });
  });
})();
</script>

</body>
</html>

Site Builder

Editing: play3.php

Site Builder