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>
<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}
  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}
  #editor-wrap {background:#f7f7fc; border:1px solid #ddd; border-radius:7px; margin-bottom:2.2rem;}
  #editor-link {font-size:1.08em; color:#5c3bff; text-decoration:underline; cursor:pointer;}
  #editor-form textarea {width:100%; font-family:monospace; min-height:120px;}
  #editor-form {padding:1.1rem 1.2rem;}
  #editor-form .row {display:flex; gap:1em; justify-content:flex-end;}
</style>

<h1>🔧 Everything‑token bedtime‑story prompt</h1>
<div id="editor-wrap">
  <div style="padding:0.7rem 1.2rem 0.4rem">
    <span id="editor-link">✏️ Edit prompt</span>
  </div>
  <form id="editor-form" style="display:none">
    <textarea id="prompt-edit"></textarea>
    <div class="row">
      <button type="submit" style="margin-top:0.6rem">Save & Update</button>
    </div>
  </form>
  <div id="editor-preview" style="display:none; padding:.3rem 1.2rem .6rem; font-family:monospace; color:#222; background:#f4f4fa; border-radius:5px;">
    <b>Raw prompt:</b><br>
    <span id="prompt-raw" style="white-space:pre-wrap"></span>
  </div>
</div>

<div id="app"></div>
<dialog id="dlg"></dialog>
<script id="seed" type="application/json"><?=json_encode($prompts) ?></script>
<script type="module">
const RX=/\[(?:([A-DI]?)-)?([^~|\-\]]+)(?:-([^~\]]+))?(?:~([^~]+)~)?\]/ig;
const seed = JSON.parse(document.getElementById('seed').textContent);
let promptRaw = seed[0];

// --- DOM refs
const editorLink = document.getElementById('editor-link'),
      editorForm = document.getElementById('editor-form'),
      editorPreview = document.getElementById('editor-preview'),
      promptEdit = document.getElementById('prompt-edit'),
      promptRawSpan = document.getElementById('prompt-raw'),
      app = document.getElementById('app'), dlg = document.getElementById('dlg');

// --- editor open/close
let editorOpen = false;
editorLink.onclick = ()=>{
  editorOpen = !editorOpen;
  editorForm.style.display = editorOpen ? '' : 'none';
  editorPreview.style.display = editorOpen ? '' : 'none';
  if(editorOpen) promptEdit.value = promptRaw;
  promptRawSpan.textContent = promptRaw;
  editorLink.textContent = editorOpen ? '▲ Hide editor' : '✏️ Edit prompt';
};
promptRawSpan.textContent = promptRaw;

// --- submit edits
editorForm.onsubmit = e => {
  e.preventDefault();
  promptRaw = promptEdit.value.trim();
  editorOpen = false;
  editorForm.style.display = 'none';
  editorPreview.style.display = 'none';
  editorLink.textContent = '✏️ Edit prompt';
  updatePromptDisplay();
};

// --- Initial mount
promptEdit.value = promptRaw;
updatePromptDisplay();

// ---- Render function for prompt
function updatePromptDisplay() {
  app.innerHTML = '';
  // All the below is your original code, but works on new `promptRaw`
  const tpl = promptRaw;
  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');
  });
}

// ---- Popup factory unchanged
dlg.addEventListener('click',e=>{ if(e.target===dlg) dlg.close();});
dlg.addEventListener('cancel',e=>{e.preventDefault(); dlg.close();});

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();
}
</script>

Site Builder

Editing: prompter.php

Site Builder