Site Builder

Editing: prompt-js.php

writable 0666

<?php
/* ─── Prompt list (could be loaded 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" aria-labelledby="dlgTitle"></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='')=>{
      const opList = ops.split('|').map(s=>s.trim()).filter(Boolean); // trim & drop blanks
      meta.push({cmd,lab,ops:opList,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();};
  dlg.setAttribute('role','dialog');

switch(meta.cmd){
    case 'A': // long text
      box.innerHTML=`<label id="dlgTitle">${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);} };
      dlg.addEventListener('focusout',e=>{ if(!dlg.contains(e.relatedTarget)) dlg.close(); },{once:true});
      ta.focus();
      break;

case 'B': // radio single
      box.innerHTML=`<fieldset><legend id="dlgTitle">${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': // checkbox multi
      box.innerHTML=`<fieldset><legend id="dlgTitle">${pretty}</legend>${
          meta.ops.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=()=>commit([...box.querySelectorAll('input:checked')]
          .map(c=>c.value).join(SEP)||cur);
      break;

case 'D': { // select dropdown
      let ops=meta.ops;
      // auto-range if all numeric
      if(ops.length>0 && ops.every(o=>/^\d+$/.test(o))){
        const max=Math.max(...ops.map(Number));
        ops=Array.from({length:max},(_,i)=>''+(i+1));
      }
      box.innerHTML=`<label id="dlgTitle">${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': { // reference site picker with preview
      box.innerHTML=`<label id="dlgTitle">${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);
          sel.selectedIndex=[...sel.options].findIndex(o=>o.value===sel.value);
      };
      break;
    }

default: // simple input
      box.innerHTML=`<label id="dlgTitle">${pretty}<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();
}

/* ---------------------------------------------------------- */
/*  Streamlined from earlier melanie-*.js suite               */
</script>

Site Builder

Editing: prompt-js.php

Site Builder