Site Builder

Editing: tools-prompts.php

writable 0666

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

/* ---------- 1. Load prompts.json ---------- */
$prompts = get_prompts(); 
if (!$prompts) return;

/* 1) Load profile only if caller hasn’t supplied it */
if (!isset($profile) || !is_array($profile)) {
    $json = dirname(__DIR__, 2) . '/profile.json';
    $profile = is_readable($json) ? json_decode(file_get_contents($json), true) : [];
}

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

<section class="pi-shell">

<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>

/* existing styles … */
  background:#fff;
  border:3.5px solid #ffb63b;
  border-radius:27px;
  box-shadow:0 8px 26px rgba(0,0,0,.06);
  padding:1.8rem 1.6rem;
  font-family:system-ui,Arial,sans-serif;
}
/* ========== CARD FRAME (same as Hours / Coupons) ========== */
.pi-shell{
  box-sizing:border-box;
  max-width:clamp(280px,90vw,720px);   /* 280 px ⇢ 720 px */
  width:100%;
  margin:2.6rem auto;
  background:#fff;
  border:3.5px solid #ffb63b;
  border-radius:27px;
  box-shadow:0 8px 26px rgba(0,0,0,.06);
  padding:1.8rem 1.6rem;
  font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
@media(max-width:440px){.pi-shell{padding:1.5rem 1rem}}

.pi-shell label{display:block;margin:0 0 .6rem;font-weight:700;color:#0d4ca2}
.pi-shell select{
  width:100%;padding:.6rem .75rem;font-size:1rem;
  border:1px solid #ccd;border-radius:9px;background:#fcfdff;cursor:pointer;
  appearance:none;
}
.pi-lbl{display:block;margin:0 0 .6rem;font-weight:700;color:#0d4ca2}
.pi-sel{
  width:100%;padding:.6rem .75rem;font-size:1rem;
  border:1px solid #ccd;border-radius:9px;background:#fcfdff;cursor:pointer;
  appearance:none;
}
.pi-holder{margin-top:1.4rem}

/* ================= POP‑UP (dialog) ================= */
dialog::backdrop{background:rgba(0,0,0,.45)}
dialog{border:none;border-radius:12px;padding:0;max-width:500px}
dialog .popup-body{
  background:#fff;border:1px solid #e0e0e0;border-radius:12px;
  box-shadow:0 4px 20px rgba(0,0,0,.05);
  padding:1.5rem 1.6rem;display:inline-block;max-width:100%;
}
/* labels stacked */
dialog .popup-body > label{display:block;margin-bottom:.5rem;font-weight:500;color:#333}
/* full‑width controls */
dialog .popup-body > label + select,
dialog .popup-body > label + input[type="text"],
dialog .popup-body > label + textarea{
  display:block;width:100%;padding:.75rem;border:1px solid #ccd;border-radius:6px;
  font-size:1rem;line-height:1.4;box-sizing:border-box;margin-bottom:1.5rem;background:#fff
}
/* fieldsets with floating legend */
dialog .popup-body fieldset{
  position:relative;padding:1.5rem 1rem 1rem;margin-bottom:1rem;border:1px solid #ccd;
  border-radius:8px;background:#fff
}
dialog .popup-body fieldset legend{
  position:absolute;top:0;left:1rem;transform:translateY(-50%);
  padding:0 .5rem;background:#fff;font-weight:500;color:#333;line-height:1
}
dialog .popup-body fieldset > *:not(legend){margin-top:.5rem}
dialog .popup-body fieldset label{
  display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem
}

/* token colouring */
.Promptinator .token{color:#176edc;text-decoration:underline;cursor:pointer}
.Promptinator .token:hover{color:#0e56b3}

/* e‑buttons / AI buttons */
.e-btn,
.pi-btn,
dialog .popup-body button{
  background:#5c3bff;color:#fff !important;border:none;border-radius:8px;
  padding:.75rem 1.5rem;font-weight:600;cursor:pointer;transition:background .15s;
  min-width:140px;text-decoration:none;box-shadow:0 2px 4px rgba(0,0,0,.12)
}
.e-btn:hover,
.pi-btn:hover,
dialog .popup-body button:hover{background:#4a26b2}
.ai-buttons{flex-wrap:wrap}
.ai-buttons>a{flex:1 1 130px;text-align:center}
@media(max-width:440px){.ai-buttons>a{flex:1 1 calc(50% - .6em)}}
@media(max-width:320px){.ai-buttons>a{flex:1 1 100%}}
.Promptinator.promptinator--empty .ai-buttons{display:none!important}
/* helper banner */
.promptinator-helper{
  margin-top:1em;font-size:.9em;color:#555;background:#fff9c4;text-align:center;
  padding:.5em .8em;border-radius:5px
}
</style>
<script>
/* expose profile for Promptinator tokens */
window.profileData = <?= json_encode($profile,
                       JSON_UNESCAPED_UNICODE|JSON_UNESCAPED_SLASHES) ?>;
</script>

<?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: tools-prompts.php

Site Builder