Site Builder

Editing: prompt-test.php

writable 0666

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Promptinator Minimal Test</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
  <style>
    body { max-width: 650px; margin: 2rem auto; }
    .Promptinator { margin: 2.4rem 0; }
  </style>
</head>
<body>
  <h1>Minimal Promptinator Test</h1>
  
  <div>
    <span id="edit-toggle" style="color:#5c3bff;cursor:pointer;text-decoration:underline;">✏️ Edit prompt</span>
    <form id="edit-form" style="display:none; margin-top:1em;">
      <textarea id="prompt-edit" style="width:100%;min-height:100px;font-family:monospace;"></textarea>
      <div style="text-align:right; margin-top:0.9em;">
        <button type="submit">Save & Update Prompt</button>
      </div>
    </form>
  </div>
  <div class="Promptinator" id="promptinator-1"></div>
  <script src="/Promptinator.js"></script>
  <script>
    // --- 1. Default prompt
    const defaultPrompt = `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~]`;

// --- 2. Edit form logic
    const editToggle = document.getElementById('edit-toggle');
    const editForm = document.getElementById('edit-form');
    const promptEdit = document.getElementById('prompt-edit');
    let editorOpen = false;

editToggle.onclick = function() {
      editorOpen = !editorOpen;
      editForm.style.display = editorOpen ? '' : 'none';
      promptEdit.value = window.piInstance ? window.piInstance.promptRaw : defaultPrompt;
      editToggle.textContent = editorOpen ? '▲ Hide editor' : '✏️ Edit prompt';
    };

// --- 3. Init Promptinator (after DOM loaded)
    document.addEventListener('DOMContentLoaded', function() {
      const promptDiv = document.getElementById('promptinator-1');
      promptDiv.textContent = '';
      window.piInstance = new Promptinator(promptDiv, { prompt: defaultPrompt, editable: false });
    });

// --- 4. On edit/save
    editForm.onsubmit = function(e) {
      e.preventDefault();
      window.piInstance.promptRaw = promptEdit.value.trim();
      window.piInstance.renderPrompt();
      editForm.style.display = 'none';
      editorOpen = false;
      editToggle.textContent = '✏️ Edit prompt';
    };
  </script>
</body>
</html>

Site Builder

Editing: prompt-test.php

Site Builder