Site Builder

Editing: prompter.php

writable 0666

<?php
/* ─── Prompt list (you can load from JSON later) ───────────── */
$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>

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

dlg.addEventListener('click',e=>{ if(e.target===dlg) dlg.close();});
dlg.addEventListener('cancel',e=>{e.preventDefault(); dlg.close();});

/* ── 1. render each prompt ───────────────────────────────── */
prompts.forEach(tpl=>{
  const state={}, meta=[];
  const html=tpl.replace(RX,(m,cmd='',lab,ops='',def='')=>{
      meta.push({cmd,lab,ops:ops.split('|').filter(Boolean),def});
      state[lab]=def||lab;
      return `<span class="token" data-i="${meta.length-1}">[${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 pretty=meta.lab.replace(/[-_]/g,' ').replace(/\b\w/g,l=>l.toUpperCase());
  const commit=v=>{done(v); dlg.close();};

switch(meta.cmd){
    case 'A': box.innerHTML=`<label>${pretty}<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;

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

case 'C': box.innerHTML=`<fieldset><legend>${pretty}</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;

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>${pretty}<select>${ops.map(o=>`<option${o==cur?' selected':''}>${o}</option>`).join('')}</select></label>`;
      box.querySelector('select').onchange=e=>commit(e.target.value);
      break;
    }

case 'I': box.innerHTML=`<label>${pretty}<select><option disabled selected>${cur}</option>${
        meta.ops.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>${pretty}<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();
}

/* ---------------------------------------------------------- */
/*  Original helper ideas came from your    melanie‑*.js suite
    streamlined into one lean module here:                    */
/*  – placeholder parser, widget patterns, update logic:      */
 /*  */
</script>

Site Builder

Editing: prompter.php

Site Builder