Site Builder

Editing: shortcode-help.html

writable 0666

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Promptinator – Shortcode Helper (v2)</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
/* Promptinator Shortcode Helper — tight‑popup styles */
body            { font-family:system-ui,sans-serif; background:#f6f7fb; margin:0;
                  padding:1rem; display:flex; justify-content:center; }
#sc-helper      { max-width:480px; width:100%; background:#fff;
                  border:3px solid #ffc85e; border-radius:20px;
                  box-shadow:0 6px 20px #f2dbb26b;
                  padding:1.25rem 1rem; box-sizing:border-box; }

#sc-helper h2   { margin:.25rem 0 1rem; font-size:1.25rem; color:#0d4ca2; }

label           { font-weight:600; margin:.75rem 0 .3rem; display:block; }

.input-wrap     { position:relative; }
.input-wrap input,
.input-wrap select{
  width:100%; box-sizing:border-box;
  font-size:1rem; line-height:1.35;
  padding:.45rem 2.2rem .45rem .7rem;
  border:1px solid #ccd; border-radius:8px;
}
.input-wrap select{ padding-right:.7rem; }          /* no mic inside <select> */

.mic-btn{
  position:absolute; right:.5rem; top:50%; translate:0 -50%;
  border:none; background:transparent; cursor:pointer;
  font-size:1.15rem; opacity:.55; transition:opacity .15s;
}
.mic-btn:hover   { opacity:.8; }
.mic-btn.listening{ color:#e31515; opacity:1; }

#ai-buttons     { display:none; margin-top:1.25rem;
                  gap:.55em; flex-wrap:wrap; }
#ai-buttons a   { display:inline-flex; align-items:center; gap:.35em;
                  padding:.42em 1.1em; font-size:.95rem;
                  font-weight:600; color:#fff; border-radius:7px;
                  text-decoration:none; white-space:nowrap; }
a.chatgpt       { background:#5c3bff; }
a.perplexity    { background:#22a8e5; }
a.copilot       { background:#10c775; }

/* ——  narrow pop‑ups (≤ 400 px) —— */
@media (max-width:400px){
  #sc-helper{ padding:1rem .8rem; }
  label      { margin:.6rem 0 .25rem; font-size:.9rem; }
  .input-wrap input,
  .input-wrap select{ font-size:.92rem; padding:.4rem 2rem .4rem .6rem; }
  #ai-buttons{ margin-top:1rem; }
  #ai-buttons a{ padding:.35em .9em; font-size:.88rem; }
}
</style>
</head>
<body>

<section id="sc-helper">
  <h2>Shortcode helper</h2>

<label for="sc-type">Shortcode type</label>
  <div class="input-wrap">
    <select id="sc-type">
      <option value="plain_input">Plain input</option>
      <option value="textarea_a">Textarea (A)</option>
      <option value="radio_b">Radio buttons (B)</option>
      <option value="checkbox_c">Checkbox group (C)</option>
      <option value="dropdown_num_d">Dropdown numeric (D)</option>
      <option value="dropdown_txt_d">Dropdown text (D)</option>
      <option value="url_picker_i">URL picker + preview (I)</option>
      <option value="email_submit_e">Email submit (E)</option>
      <option value="form_post_e">Form‑POST submit (E)</option>
    </select>
  </div>

<label for="sc-topic">Topic / label</label>
  <div class="input-wrap">
    <input id="sc-topic" type="text" placeholder="e.g. favourite fruit">
    <button class="mic-btn" aria-label="Dictate topic" hidden>🎤</button>
  </div>

<label for="sc-default">Default / example value</label>
  <div class="input-wrap">
    <input id="sc-default" type="text" placeholder="e.g. Apple">
    <button class="mic-btn" aria-label="Dictate default value" hidden>🎤</button>
  </div>

<label for="sc-align">Option alignment (describe what the options should represent)</label>
  <div class="input-wrap">
    <input id="sc-align" type="text" placeholder="e.g. list popular fruits">
    <button class="mic-btn" aria-label="Dictate option guidance" hidden>🎤</button>
  </div>

<label for="sc-count">Desired number of options <small>(if applicable)</small></label>
  <div class="input-wrap">
    <input id="sc-count" type="number" min="2" max="10" step="1" value="3" style="padding-right:.8rem">
  </div>

<div id="ai-buttons">
    <a class="chatgpt"    target="_blank">🧠 ChatGPT</a>
    <a class="perplexity" target="_blank">🔎 Perplexity</a>
    <a class="copilot"    target="_blank">🤖 Copilot</a>
  </div>
</section>

/* --- skeletons ---------------------------------------------------- */
  const SKELETON = {
    plain_input      : '[-{label}-~{default}~]',
    textarea_a       : '[A-{label}-~{default}~]',
    radio_b          : '[B-{label}-|{ops}|~{default}~]',
    checkbox_c       : '[C-{label}-|{ops}|~{default}~]',
    dropdown_num_d   : '[D-{label}-10~{default}~]',
    dropdown_txt_d   : '[D-{label}-|{ops}|~{default}~]',
    url_picker_i     : '[I-{label}-|https://example1.com|example2.com|~{default}~]',
    email_submit_e   : '[E-{label}-~{default}~]',
    form_post_e      : '[E-{label}-~{defaultEndpoint}~]'
  };

/* --- refs --------------------------------------------------------- */
  const els = {
    type : document.getElementById('sc-type'),
    topic: document.getElementById('sc-topic'),
    def  : document.getElementById('sc-default'),
    align: document.getElementById('sc-align'),
    count: document.getElementById('sc-count'),
    box  : document.getElementById('ai-buttons'),
    cGPT : document.querySelector('#ai-buttons .chatgpt'),
    cPpx : document.querySelector('#ai-buttons .perplexity'),
    cCop : document.querySelector('#ai-buttons .copilot')
  };

/* --- build AI links when any input changes ------------------------ */
  [els.type, els.topic, els.def, els.align, els.count]
    .forEach(el => el.addEventListener('input', build));

function build() {
    const key   = els.type.value;
    const topic = els.topic.value.trim();
    const def   = els.def.value.trim();
    const align = els.align.value.trim();
    const nOps  = Math.max(2, Math.min(10, Number(els.count.value || 3)));

if (!topic || !def) { els.box.style.display = 'none'; return; }

const makeOps = () => Array.from({ length:nOps }, (_, i) => `{opt${i+1}}`).join('|');

let skeleton = SKELETON[key]
      .replace('{label}', topic.replace(/\s+/g,'-'))
      .replace(/\{default(Endpoint)?\}/g, def)
      .replace('{ops}', makeOps());

const typeNice = els.type.options[els.type.selectedIndex].textContent;

const aiPrompt = `
You are an expert Promptinator shortcode creator.

Return **one** fully-formed Promptinator shortcode and nothing else.

• Shortcode type    : ${typeNice}
• Topic / label     : ${topic}
• Desired options   : ${nOps} (if applicable)
• Default value     : "${def}"${align ? `\n• Option guidance  : ${align}` : ''}

Follow this skeleton structure; replace placeholders with real, topic‑appropriate values, ensuring the default is flagged as pre‑selected if supported:

${skeleton}`.trim();

const enc = encodeURIComponent(aiPrompt);
    els.cGPT.href = 'https://chat.openai.com/?prompt='    + enc;
    els.cPpx.href = 'https://www.perplexity.ai/search?q=' + enc;
    els.cCop.href = 'https://copilot.microsoft.com/?q='   + enc;

els.box.style.display = 'flex';
  }

/* --- microphone support ------------------------------------------ */
  const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
  if (SR) {
    document.querySelectorAll('.mic-btn').forEach(btn => btn.hidden = false);

document.addEventListener('click', e => {
      if (!e.target.classList.contains('mic-btn')) return;

const inp = e.target.previousElementSibling;   // the <input>
      if (!inp) return;

// toggle logic: stop any existing
      if (e.target._rec) {
        e.target._rec.stop();
        return;
      }

const rec = new SR();
      rec.lang = 'en-US';
      rec.interimResults = false;
      rec.maxAlternatives = 1;
      e.target._rec = rec;

rec.onresult = ev => {
        const txt = ev.results[0][0].transcript.trim();
        inp.value = txt;
        inp.dispatchEvent(new Event('input'));
      };
      rec.onend = () => {
        e.target.classList.remove('listening');
        e.target._rec = null;
      };
      rec.onerror = () => rec.onend();

e.target.classList.add('listening');
      rec.start();
    });
  }
})();
</script>
</body>
</html>

Site Builder

Editing: shortcode-help.html

Site Builder