Site Builder

Editing: play1.php

writable 0666

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Everything-token bedtime-story prompt</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
  <style>
    body{max-width:860px;margin:3rem auto}
    .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 #ccd; 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) }
    dialog{border:none;border-radius:10px;max-width:440px;padding:0}
    dialog::backdrop{background:#0004}
    .popup-body{background:#fff;padding:1.3rem 1.6rem;border-radius:12px;box-shadow:0 4px 26px #0002}
    fieldset{border:1px solid #ccd;border-radius:8px;padding:.8rem 1rem;background:#fff}
    iframe{border:1px solid #ccd;width:100%;min-height:340px;margin-top:.6rem}
  </style>
</head>
<body>
<h1>🔧 Everything-token bedtime-story prompt</h1>
<div id="app"></div>
<dialog id="dlg" aria-labelledby="dlgTitle"></dialog>

// close on backdrop or ESC
dlg.addEventListener('click', e => { if (e.target === dlg) dlg.close(); });
dlg.addEventListener('cancel', e => { e.preventDefault(); dlg.close(); });

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

// render initial tokens
  const html = tpl.replace(RX, (_, cmd='', lab, ops='', def='') => {
    const opts = ops.split('|').map(s=>s.trim()).filter(Boolean);
    meta.push({ cmd, lab, opts, def });
    state[lab] = def;
    // token includes lab tooltip
    return `<span class="token" data-i="${meta.length-1}">` +
             `[${state[lab]}]` +
             `<span class="tooltip">${lab.replace(/[-_]/g,' ')}</span>` +
           `</span>`;
  });

// build card
  const card = document.createElement('article');
  card.innerHTML = `<p>${html.replace(/\n/g,'<br>')}</p>
    <footer>
      <button data-ai="ChatGPT">ChatGPT</button>
      <button data-ai="Perplexity">Perplexity</button>
      <button data-ai="Copilot">Copilot</button>
    </footer>`;
  app.append(card);

// handle token click → popup
  card.addEventListener('click', e => {
    const tok = e.target.closest('.token');
    if (!tok) return;
    const m = meta[ tok.dataset.i ];
    showPopup(m, state[m.lab], v => {
      state[m.lab] = v;
      // update just that token’s text
      tok.textContent = `[${v}]`;
    });
  });

// handle AI buttons
  card.querySelectorAll('footer button').forEach(btn => {
    btn.addEventListener('click', () => {
      const base = {
        ChatGPT:   'https://chatgpt.com/?prompt=',
        Perplexity:'https://www.perplexity.ai/search?q=',
        Copilot:   'https://copilot.microsoft.com/?q='
      }[btn.dataset.ai];
      // rebuild final prompt from state
      const final = tpl.replace(RX, (_, __, lab) => encodeURIComponent(state[lab]));
      window.open(base + final, '_blank');
    });
  });
});

function showPopup(meta, cur, done) {
  dlg.innerHTML = '<div class="popup-body"></div>';
  const box = dlg.firstChild;
  const title = meta.lab.replace(/[-_]/g,' ').replace(/\b\w/g,l=>l.toUpperCase());
  const commit = v => { done(v); dlg.close(); };
  dlg.setAttribute('role','dialog');

switch(meta.cmd) {
    case 'A': {
      box.innerHTML = `<label id="dlgTitle">${title}
        <textarea rows="4">${cur}</textarea>
      </label>`;
      const ta = box.querySelector('textarea');
      ta.onkeydown = e => {
        if(e.key==='Enter' && !e.shiftKey) {
          e.preventDefault();
          commit(ta.value);
        }
      };
      dlg.addEventListener('focusout', e => {
        if(!dlg.contains(e.relatedTarget)) dlg.close();
      }, { once:true });
      ta.focus();
      break;
    }
    case 'B': {
      box.innerHTML = `<fieldset>
          <legend id="dlgTitle">${title}</legend>
          ${meta.opts.map(o =>
            `<label><input type="radio" name="r" value="${o}" ${o===cur?'checked':''}> ${o}</label>`
          ).join('<br>')}
        </fieldset>`;
      box.onclick = e => {
        if(e.target.name==='r') commit(e.target.value);
      };
      break;
    }
    case 'C': {
      box.innerHTML = `<fieldset>
          <legend id="dlgTitle">${title}</legend>
          ${meta.opts.map(o =>
            `<label><input type="checkbox" value="${o}" ${cur.split(SEP).includes(o)?'checked':''}> ${o}</label>`
          ).join('<br>')}
        </fieldset>
        <button>Done</button>`;
      box.querySelector('button').onclick = () => {
        const sel = [...box.querySelectorAll('input:checked')].map(i=>i.value);
        commit(sel.length?sel.join(SEP):cur);
      };
      break;
    }
    case 'D': {
      // numeric auto-range?
      let opts = meta.opts.slice();
      if(opts.length && opts.every(o=>/^\d+$/.test(o))) {
        const max = Math.max(...opts.map(Number));
        opts = Array.from({length:max},(_,i)=>''+(i+1));
      }
      box.innerHTML = `<label id="dlgTitle">${title}
        <select>${opts.map(o=>`<option ${o===cur?'selected':''}>${o}</option>`)}</select>
      </label>`;
      box.querySelector('select').onchange = e => commit(e.target.value);
      break;
    }
    case 'I': {
      box.innerHTML = `<label id="dlgTitle">${title}
        <select><option disabled selected>${cur}</option>
          ${meta.opts.map(u=>`<option>${u}</option>`).join('')}
        </select>
      </label>
      <iframe hidden></iframe>
      <button style="margin-top:.6rem">Use site</button>`;
      const sel = box.querySelector('select'), fr = box.querySelector('iframe');
      sel.onchange = () => { fr.hidden=false; fr.src = sel.value; };
      box.querySelector('button').onclick = () => {
        commit(sel.value||cur);
      };
      break;
    }
    default: {
      box.innerHTML = `<label id="dlgTitle">${title}
        <input value="${cur}">
      </label>`;
      const inp = box.querySelector('input');
      inp.onkeydown = e => {
        if(e.key==='Enter') commit(inp.value);
      };
      dlg.addEventListener('focusout', e => {
        if(!dlg.contains(e.relatedTarget)) dlg.close();
      }, { once:true });
      inp.focus();
    }
  }

dlg.showModal();
}
</script>
</body>
</html>

Site Builder

Editing: play1.php

Site Builder