Site Builder

Editing: modules-promptsookk.php

writable 0666

<?php
/**************************************************************************
 *  PROMPTS MODULE – Pico‑styled Promptinator
 **************************************************************************/

/* ---------- 1. Load prompts.json ---------- */
$path = dirname(__DIR__, 2) . '/prompts.json';
$raw  = is_readable($path) ? file_get_contents($path) : '[]';
$arr  = json_decode($raw, true) ?: [];
$prompts = array_values(array_filter($arr, fn($p)=>!empty($p['prompt'])));
if (!$prompts) return;

/* helper: short label */
$label = fn(string $t)=> preg_replace('/\s+/', ' ',
            implode(' ', array_slice(explode(' ', trim($t)), 0, 4))) . '…';
?>

<section class="pi-shell">
  
  <?php static $picoLoaded=false;
    if(!$picoLoaded){
      echo '<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">';
      $picoLoaded=true;
    } ?>

<label for="piSelect" class="contrast">Choose a prompt:</label>
  <select id="piSelect" class="contrast">
    <?php foreach($prompts as $i=>$p): ?>
      <option value="<?= $i ?>"><?= htmlspecialchars($label($p['prompt'])) ?></option>
    <?php endforeach; ?>
  </select>

max-width: clamp(480px, 70vw, 720px);   /* NEW: fluid width 480‑720 px   */
  width: 100%;       
}
.pi-shell .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,.4)}
.popup-body{background:#fff;padding:1.3rem 1.6rem;border-radius:12px;
            box-shadow:0 4px 26px rgba(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>

<?php static $piScript=false;
if(!$piScript){ echo '<link rel="modulepreload" href="/socialPromptinator.js">'; $piScript=true;} ?>

function render(i=0){
    holder.innerHTML =
      '<div class="Promptinator" edit="1" think="1" data-prompt>'
      + (prompts[i]||'') + '</div>';
    const boot = P=>P.init({mount:holder.firstElementChild});
    window.Promptinator?.init ? boot(window.Promptinator)
                              : import('/socialPromptinator.js')
                                  .then(m=>boot(m.default||m.Promptinator));
  }
  render(+sel.value);
  sel.addEventListener('change',()=>render(+sel.value));
})();
</script>

Site Builder

Editing: modules-promptsookk.php

Site Builder