Site Builder

Editing: prom1p.html

writable 0666

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Everything-token bedtime-story prompt</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>
</head>
<body>

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

<div id="prompt-app"
       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~].

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>

<script type="module">
  // ── super-thin prompt runtime ────────────────────
  import Promptify from './promptify.js';

document.addEventListener('DOMContentLoaded', () => {
    const app   = document.getElementById('prompt-app');
    const tpl   = app.dataset.prompt;
    Promptify.init({ template: tpl, mount: app });
  });
  </script>

</body>
</html>

Site Builder

Editing: prom1p.html

Site Builder