Site Builder

Editing: shortcode-helper.html

writable 0666

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Promptinator – Shortcode Helper</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">

<style>
    body            { font-family: system-ui, sans-serif; background:#f6f7fb; margin:0; padding:2.5rem 1rem; }
    #sc-helper      { max-width:440px; margin:auto; background:#fff; border:3px solid #ffc85e; border-radius:22px;
                      box-shadow:0 8px 28px #f2dbb26b; padding:1.7rem 1.4rem; }
    #sc-helper h2   { margin:.2rem 0 1.1rem; font-size:1.35rem; color:#0d4ca2; }
    #sc-helper label{ display:block; font-weight:600; margin:.9rem 0 .35rem; }
    #sc-helper input,
    #sc-helper select{ width:100%; padding:.55rem .8rem; font-size:1rem; border:1px solid #ccd; border-radius:8px; }
    #ai-buttons     { display:none; margin-top:1.6rem; gap:.65em; flex-wrap:wrap; }
    #ai-buttons a   { display:inline-flex; align-items:center; gap:.35em; color:#fff; font-weight:600;
                      border-radius:7px; padding:.46em 1.35em; text-decoration:none; }
    a.chatgpt       { background:#5c3bff; }
    a.perplexity    { background:#22a8e5; }
    a.copilot       { background:#10c775; }
  </style>
</head>
<body>

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

<label for="sc-type">Shortcode type</label>
  <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>

<label for="sc-topic">Topic / label</label>
  <input id="sc-topic" type="text" placeholder="e.g. favourite fruit">

<label for="sc-default">Default / example value</label>
  <input id="sc-default" type="text" placeholder="e.g. Apple">

<label for="sc-count">Desired number of options <small>(if applicable)</small></label>
  <input id="sc-count" type="number" min="2" max="10" step="1" value="3">

<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>

<script type="module">
(() => {

/* skeletons with placeholder tokens */
  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}~]'
  };

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

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

function build() {

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

/* need at least topic + default text */
    if (!topic || !defVal) {
      els.box.style.display = 'none';
      return;
    }

/* generate placeholder ops list if needed */
    const makeOps = () => Array.from({ length:nOps }, (_, i) => `{opt${i+1}}`).join('|');

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

/* human‑readable type */
    const typeNice = els.type.options[els.type.selectedIndex].textContent;

/* final prompt sent to AI */
    const aiPrompt =
`You are an expert Promptinator shortcode creator.

Please write **one** fully‑formed Promptinator shortcode and nothing else.

• Shortcode type   : ${typeNice}
• Topic / label    : ${topic}
• Desired options  : ${nOps} (if applicable)
• Default value    : "${defVal}"

Use this skeleton format as guidance and replace all brace placeholders with real, topic‑appropriate values, marking the default as pre‑selected if the shortcode allows it:

${skeleton}
`;

/* encode into URLs */
    const enc = encodeURIComponent(aiPrompt);
    els.cGPT.href  = 'https://chat.openai.com/?prompt='    + enc;
    els.cPplx.href = 'https://www.perplexity.ai/search?q=' + enc;
    els.cCpl.href  = 'https://copilot.microsoft.com/?q='   + enc;

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

})();
</script>
</body>
</html>

Site Builder

Editing: shortcode-helper.html

Site Builder