Site Builder
Editing:
promptinator-landing-WordPress.html
writable 0666
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Promptinator × WordPress | TinyMCE “[P]” Guide</title> <!-- ===== shared palette / glass ======================= --> <style> :root{ --bg-1:#0e0f14; --bg-2:#14151d; --brand:#865bfd; --txt:#ecf0ff; --accent:#12d6ff; --glass:rgba(255,255,255,.05); --blur:blur(14px); --step-0:clamp(.96rem,1vw + .78rem,1.22rem); --step-1:clamp(1.28rem,1vw +1.1rem,1.58rem); --step-2:clamp(1.7rem,1vw +1.6rem,2.25rem); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} body{ font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif; color:var(--txt); background:linear-gradient(135deg,var(--bg-1),var(--bg-2)); min-height:100vh; display:flex; flex-direction:column; } h1{font-size:var(--step-2);font-weight:900;text-align:center;margin:6rem 0 1.5rem;} h2{font-size:var(--step-1);margin:.5rem 0 1rem;color:var(--accent);} p {font-size:var(--step-0);line-height:1.55;margin:.65rem 0;} section{width:min(90ch,90%);margin-inline:auto;padding:3.5rem 0;} ol{margin-left:1.3em;padding-left:.3em;} li{margin:.5em 0;} .grid{display:grid;gap:2.5rem;}@media(min-width:900px){.grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}} .card{ background:var(--glass); backdrop-filter:var(--blur); border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:1.7rem; } pre{background:rgba(255,255,255,.04);padding:.8rem 1rem;border-radius:12px;font-size:.83rem;overflow:auto;} /* Promptinator styling tweaks */ .Promptinator{padding:1rem;border-radius:12px;border:1px dashed var(--brand);background:rgba(255,255,255,.04);line-height:1.55;margin-top:.8rem;} .Promptinator .e-btn{background:var(--brand);color:#fff;border:none;padding:.35em .9em;border-radius:6px;} .ai-buttons a{font-size:.9rem;} footer{margin-top:auto;padding:2rem 0;text-align:center;font-size:.85rem;color:#8b91b8;} footer a{color:var(--accent);text-decoration:none;} </style> </head> <body> <h1>Promptinator for WordPress Editors</h1> <section> <p style="text-align:center;max-width:65ch;margin-inline:auto;"> Use the TinyMCE <strong>[P]</strong> button to wrap any block of text in a <code><div class="Promptinator"></code>, choose whether readers can <em>edit</em> the prompt and/or see instant <em>AI</em> buttons, and manage multiple Promptinators per post— all without leaving the WordPress editor. </p> </section> <!-- ========================================================= --> <!-- STEP‑BY‑STEP GUIDE --> <!-- ========================================================= --> <section class="grid"> <!-- INSERT ------------------------------------------------- --> <article class="card"> <h2>① Insert a new Promptinator</h2> <ol> <li>Select the text that should become the prompt (can include shortcodes).</li> <li>Click the <strong>[P]</strong> button in the toolbar.<br> <em>(First time you’ll see it to the far‑right—drag it where you like.)</em></li> <li>In the dialog:<br> <ul> <li><strong>Prompt HTML</strong>: edit or leave your selection as‑is.</li> <li><strong>Show Editor</strong> (<code>data‑edit</code>): “Yes” lets visitors click ✏️ and rewrite the prompt.</li> <li><strong>Connect AI</strong> (<code>data‑think</code>): “Yes” shows ChatGPT / Copilot / Perplexity buttons when no <code>[E]</code> token is present.</li> </ul> </li> <li>Click **Insert**. WordPress wraps your text in:<br> <pre><div class="Promptinator" data-edit="1" data-think="1">…</div></pre> </li> </ol> </article> <!-- MANAGE ------------------------------------------------- --> <article class="card"> <h2>② Edit or Remove a wrapper</h2> <ol> <li>Place your cursor <em>inside the green‑bordered Promptinator box</em>.</li> <li>Click **[P]** again. The plugin detects you’re in an existing wrapper.</li> <li>Choose <strong>Edit</strong> or <strong>Remove</strong> from the dropdown.<br> • **Edit** re‑opens the same dialog with current HTML + attribute values.<br> • **Remove** simply unwraps the div but keeps the inner text.</li> </ol> <p><strong>Tip:</strong> You can nest several Promptinators in one article—repeat the steps above for each block.</p> </article> <!-- ATTRIBUTE QUICK REF ------------------------------------ --> <article class="card"> <h2>③ Attribute quick‑reference</h2> <table style="width:100%;font-size:.9rem;border-collapse:collapse;"> <tr><th style="text-align:left;">Attribute</th><th style="text-align:left;">Values</th><th style="text-align:left;">Effect</th></tr> <tr><td><code>data-edit</code></td><td><code>1</code> (default) / <code>0</code></td><td>Show or hide the in‑page ✏️ editor.</td></tr> <tr><td><code>data-think</code></td><td><code>1</code> (default) / <code>0</code></td><td>Show AI‑handoff buttons when no <code>[E]</code>.</td></tr> </table> </article> </section> <!-- ========================================================= --> <!-- LIVE EXAMPLE BOX --> <!-- ========================================================= --> <section> <h2>🛠️ Live TinyMCE‑style example</h2> <p>This mini prompt shows how the attributes behave. Click ✏️ to edit, or toggle AI buttons by flipping <code>data‑think</code>.</p> <div id="demo" class="Promptinator" data-edit="1" data-think="1"> Your Name: [-name-~Jane Doe~] Mood: [B-mood-|😊 Happy|😐 Neutral|😔 Sad|~😊 Happy~] [E-Send-~hello@example.com~] </div> </section> <!-- ========================================================= --> <!-- TROUBLESHOOTING --> <!-- ========================================================= --> <section> <h2>❓ Troubleshooting & Tips</h2> <ul> <li><strong>[P] button missing?</strong> Verify the “Promptinator” plugin is active under <em>Plugins → Installed Plugins</em> in WP‑Admin.</li> <li><strong>Shortcodes render as plain text in the editor?</strong> That’s expected—Promptinator parses the tokens on the front‑end. Use Preview or View Post to test.</li> <li><strong>Need different default <code>data‑edit</code> values?</strong> Change the pre‑selected option in the insert dialog; your choice is stored per wrapper.</li> <li><strong>Multiple Promptinators collide?</strong> Each wrapper processes its own tokens independently—no special IDs needed.</li> </ul> </section> <footer> © 2025 Melanie AI • <a href="prompt-landing-page.html">Back to main site</a> </footer> <!-- ========================================================= --> <!-- Core engine & demo boot --> <!-- ========================================================= --> <script src="promptinator.js"></script> <script> Promptinator.init({ mount: document.getElementById('demo') }); </script> </body> </html>
Save changes
Create folder
writable 0777
Create
Cancel