Site Builder
Editing:
demo.php
writable 0666
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Promptinator Demo</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"> <style> .token { color:#5c3bff; font-weight:600; cursor:pointer; } dialog { border:none; border-radius:10px; max-width:440px; padding:0; } dialog::backdrop { background:rgba(0,0,0,0.4); } .popup-body { background:#fff; padding:1.3rem 1.6rem; border-radius:12px; box-shadow:0 4px 26px rgba(0,0,0,0.2); } fieldset { border:1px solid #ccd; border-radius:8px; padding:.8rem 1rem; background:#fff; margin-bottom:1rem; } iframe { border:1px solid #ccd; width:100%; min-height:340px; margin-top:.6rem; } </style> <script type="module"> import Promptinator from './promptinator.js'; document.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('.Promptinator').forEach(div => { Promptinator.init({ mount: div }); }); }); </script> </head> <body> <h1>Promptinator Demo</h1> <div class="Promptinator" data-prompt="Write a bedtime story titled [A-story_title-~Magical Night Adventure~] for a [D-child_gender-|girl|boy|~girl~] named child_name~Melanie~]. 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. Provide exactly [D-paragraphs-5~3~] paragraphs. (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~]"> </div> <div class="Promptinator" edit=0 think=1 data-prompt="Write a bedtime story titled [A-title-~Adventure~] for a [B-type-|girl|boy|~girl~]."></div> <div class="Promptinator" data-prompt="Prompt 2: [B-choice-|Alpha|Beta|~Alpha~]"></div> <div class="Promptinator" data-prompt="Prompt 2: [B-choice-|Alpha|Beta|~Alpha~]"></div> <div class="Promptinator" data-prompt="Prompt 3: [C-things-|X|Y|~X~]"></div> <!-- Hide both edit and AI buttons --> <div class="Promptinator" edit="0" think="0" data-prompt="Only tokens editable [A-x-~try me~]"></div> <!-- Show only tokens + AI buttons (no prompt editing) --> <div class="Promptinator" edit="0" think="1" data-prompt="AI buttons, but not prompt edit [A-x-~token~]"></div> <!-- Show both edit and AI (default) --> <div class="Promptinator" data-prompt="Everything enabled [B-y-|yes|no|~yes~]"></div> this <div class="Promptinator"> Generate a headline for [A-topic-~innovation~] using [C-channel-|SEO|PPC|Email|~Email~]. </div> </body> </html>
Save changes
Create folder
writable 0777
Create
Cancel