Site Builder

Editing: promptz.php

writable 0666

<!doctype html>
<meta charset="utf-8">
<title>Prompt‑Builder · 2025 edition</title>
<style>
/* ─── Design tokens (easy theming) ───────────────────────────── */
:root{
  --accent:#5c3bff;         /* brand colour */
  --radius:10px;
  font-family:system-ui,sans-serif;
  color-scheme:light dark;  /* auto‑switches in dark mode */
}
/* ─── Layout ─────────────────────────────────────────────────── */
body{max-width:860px;margin:3rem auto;padding:0 1rem;line-height:1.55;}
h1{font-size:clamp(1.8rem,3vw,2.4rem)}
#preview{margin:2rem 0;font:1rem/1.5 monospace;white-space:pre-wrap;background:#0001;border-radius:var(--radius);padding:1rem}

/* ─── Token chip ─────────────────────────────────────────────── */
prompt-token{
  display:inline-block;margin:0 .15em;padding:.1em .3em .15em;
  border-radius:.4em;background:var(--accent);color:#fff;font-weight:600;
  cursor:pointer;transition:filter .15s;
}
prompt-token:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
prompt-token:hover{filter:brightness(1.1)}

/* ─── Popover panel ──────────────────────────────────────────── */
.pop{popover}
.pop{margin:0;padding:1rem;min-width:260px;border:none;border-radius:var(--radius);
     box-shadow:0 6px 24px rgba(0,0,0,.25);background:Canvas;color:CanvasText;
     transform:translateY(-4px);opacity:0;transition:.25s ease}
.pop:popover-open{transform:none;opacity:1}
.pop fieldset{border:1px solid CanvasText;border-radius:8px;padding:.6rem .9rem;margin:0}
.pop legend{padding:0 .3rem;font-weight:700}
.pop label{display:block;margin:.25rem 0}
.pop button{margin-top:.8rem}

/* ─── CTA buttons ────────────────────────────────────────────── */
footer{margin-top:1.8rem;display:flex;gap:.6rem;flex-wrap:wrap}
footer a{padding:.55em 1.2em;border-radius:var(--radius);text-decoration:none;
         background:var(--accent);color:#fff;font-weight:600;transition:.15s}
footer a:hover{filter:brightness(1.1)}
</style>

<h1>🔧 Everything‑token bedtime‑story prompt</h1>

<footer>
  <a id="gpt" href="#" target="_blank">Open in ChatGPT</a>
  <a id="plx" href="#" target="_blank">Open in Perplexity</a>
  <a id="cop" href="#" target="_blank">Open in Copilot</a>
</footer>

/* show / build popover only on demand */
  show(){
    let pop = this.pop || this.buildPopover();
    pop.togglePopover();
  }
  buildPopover(){
    const pop = document.createElement('div');
    pop.className='pop'; pop.id=`pop-${crypto.randomUUID()}`; this.pop=pop;
    /* build inner UI by cmd */
    const pretty = (this.getAttribute('label')||'').replace(/[_\-]/g,' ').replace(/\b\w/g,l=>l.toUpperCase());
    switch(this.cmd){
      case 'B':{ // radio
        pop.innerHTML = `<fieldset><legend>${pretty}</legend>${
          this.opts.map(o=>`<label><input type=radio name=op value="${o}" ${o===this.value?'checked':''}>${o}</label>`).join('')
        }</fieldset>`;
        pop.addEventListener('change',e=>{this.value=e.target.value;this.render();update();});
      }break;

case 'C':{ // multi‑select
        pop.innerHTML = `<fieldset><legend>${pretty}</legend>${
          this.opts.map(o=>`<label><input type=checkbox value="${o}" ${this.value.split(' • ').includes(o)?'checked':''}>${o}</label>`).join('')
        }</fieldset><button>Done</button>`;
        pop.querySelector('button').onclick=()=>{this.value=[...pop.querySelectorAll('input:checked')]
            .map(c=>c.value).join(' • ')||this.value;this.render();update();pop.hidePopover()};
      }break;

case 'D':{ // numeric dropdown
        pop.innerHTML=`<label>${pretty}
          <select>${this.opts.map(o=>`<option${o==this.value?' selected':''}>${o}</option>`).join('')}</select></label>`;
        pop.querySelector('select').onchange=e=>{this.value=e.target.value;this.render();update();};
      }break;

case 'I':{ // reference site
        pop.innerHTML=`<label>${pretty}
            <select><option disabled selected>${this.value}</option>${this.opts.map(u=>`<option>${u}</option>`).join('')}</select></label>
            <iframe hidden style="border:1px solid #ccc;width:100%;height:260px;margin-top:.6rem"></iframe>
            <button>Use site</button>`;
        const sel=pop.querySelector('select'),fr=pop.querySelector('iframe');
        sel.onchange=()=>{fr.hidden=false;fr.src=sel.value;}
        pop.querySelector('button').onclick=()=>{this.value=sel.value;this.render();update();pop.hidePopover()};
      }break;

default:{ // free text
        pop.innerHTML=`<label>${pretty}<input value="${this.value}"></label>`;
        pop.querySelector('input').onkeydown=e=>{if(e.key==='Enter'){this.value=e.target.value;this.render();update();pop.hidePopover();}};
      }
    }
    document.body.append(pop);
    pop.setAttribute('anchor',this);           // keeps position if container scrolls
    return pop;
  }
}
customElements.define('prompt-token', PromptToken);

/* ───────────────────────── 2. Parse template to tokens ─────── */
const rx=/\[(?:([A-DI]?)-)?([^~|\-\]]+)(?:-([^~\]]+))?(?:~([^~]+)~)?\]/ig,
      tpl=document.getElementById('tpl');
const orig=tpl.innerHTML;
tpl.innerHTML=orig.replace(rx,(m,cmd='',lab,ops='',def='')=>{
  const opts=(ops||'').split('|').filter(Boolean).join('|');
  return `<prompt-token cmd="${cmd}" label="${lab}" opts="${opts}" value="${def||lab}"></prompt-token>`;
});

/* ───────────────────────── 3. Live preview & link builders ─── */
const preview=document.getElementById('preview'),
      gpt=document.getElementById('gpt'),
      plx=document.getElementById('plx'),
      cop=document.getElementById('cop');
update();
function update(){
  const txt = tpl.textContent;          // resolved prompt
  preview.textContent = txt;
  gpt.href='https://chatgpt.com/?prompt='+encodeURIComponent(txt);
  plx.href='https://www.perplexity.ai/search?q='+encodeURIComponent(txt);
  cop.href='https://copilot.microsoft.com/?q='+encodeURIComponent(txt);
}
</script>

Site Builder

Editing: promptz.php

Site Builder