Site Builder

Editing: prompter1.php

writable 0666

<?php
/* -------------  ONLY needed if you keep it as .php  --------- */
$prompts = [
  "Write a bedtime story titled [A-story_title- ~Magical Night Adventure~] "
 ."for a [D-child_gender- |girl|boy| ~girl~] named [child_name~Melanie~].\n\n"
 ."The plot must feature [C-themes- |unicorns|spaceships|fairy tales|dragons| "
 ."~unicorns, fairy tales~] and be told in a [B-tone- |gentle|funny|adventurous| "
 ."~gentle~] tone.\n\nProvide exactly [D-paragraphs-5~3~] paragraphs.\n\n"
 ."(If you need inspiration open the reference site below.) "
 ."[I-reference- |https://en.wikipedia.org/wiki/Bedtime_story|https://www.gutenberg.org/| "
 ."~Pick a site~]"
];
?>
<!doctype html><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">

<h1>🔧 Everything‑token bedtime‑story prompt</h1>
<div id="app"></div>
<dialog id="dlg"></dialog>

<script id="seed" type="application/json">
<?= json_encode($prompts ?? []) /* remove this line if you use .html */ ?>
</script>

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

/* ---------- 1. render every prompt ------------------------ */
prompts.forEach(tpl=>{
  const state={}, meta=[];
  const html=tpl.replace(RX,(m,cmd='',lab,ops='',def='')=>{
      const i=meta.push({cmd,lab,ops:ops.split('|').filter(Boolean),def})-1;
      state[lab]=def||lab;
      return `<span class="token" data-i="${i}">[${state[lab]}]</span>`;
  });
  const card=document.createElement('article');
  card.innerHTML=`<p>${html.replace(/\n/g,'<br>')}</p>
    <footer><button>ChatGPT</button><button>Perplexity</button><button>Copilot</button></footer>`;
  app.append(card);

/* token click => popup */
  card.addEventListener('click',e=>{
    if(!e.target.matches('.token')) return;
    const p=meta[e.target.dataset.i];
    popup(p,state[p.lab],v=>{state[p.lab]=v; e.target.textContent='['+v+']';});
  });

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

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

switch(meta.cmd){
    /* --- A  textarea --------------------------------- */
    case 'A': box.innerHTML=`<label>${nice}<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);} };
              ta.onblur =()=>dlg.close(); ta.focus(); break;

/* --- B  radio ------------------------------------ */
    case 'B': box.innerHTML=`<fieldset><legend>${nice}</legend>${
        meta.ops.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;

/* --- C  checkbox --------------------------------- */
    case 'C': box.innerHTML=`<fieldset><legend>${nice}</legend>${
        meta.ops.map(o=>`<label><input type=checkbox value="${o}" ${cur.split(', ').includes(o)?'checked':''}>${o}</label>`).join('<br>')}
        </fieldset><button>Done</button>`;
              box.querySelector('button').onclick=()=>commit([...box.querySelectorAll('input:checked')].map(c=>c.value).join(', ')||cur); break;

/* --- D  dropdown --------------------------------- */
    case 'D': {
      let ops=meta.ops.map(s=>s.trim()).filter(Boolean);
      if(ops.length===1&&/^\d+$/.test(ops[0])) ops=Array.from({length:+ops[0]},(_,i)=>''+(i+1));
      box.innerHTML=`<label>${nice}<select>${ops.map(o=>`<option${o==cur?' selected':''}>${o}</option>`).join('')}</select></label>`;
      box.querySelector('select').onchange=e=>commit(e.target.value);
      break;
    }

/* --- I  iframe picker ----------------------------- */
    case 'I': box.innerHTML=`<label>${nice}<select><option disabled selected>${cur}</option>${
        meta.ops.map(u=>`<option>${u}</option>`).join('')}</select></label><iframe hidden></iframe><button>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 plain text --------------------------- */
    default : box.innerHTML=`<label>${nice}<input value="${cur}"></label>`;
              const inp=box.querySelector('input');
              inp.onkeydown=e=>{if(e.key==='Enter')commit(inp.value);};
              inp.onblur =()=>dlg.close(); inp.focus();
  }
  dlg.showModal();
}
</script>

Site Builder

Editing: prompter1.php

Site Builder