Site Builder

Editing: modules-prompt2s.php

writable 0666

<?php
/**************************************************************************
 *  PROMPTS MODULE – Promptinator (helper‑based, unified styling)
 **************************************************************************/

if (!function_exists('get_prompts')) {
    require_once $_SERVER['DOCUMENT_ROOT'].'/pages/lib/helpers.php';
}
$prompts = get_prompts();
$profile = get_profile();
if (!$prompts) return;

$label = static function (string $txt, int $w = 4): string {
    $wds = preg_split('/\s+/', trim($txt));
    return implode(' ', array_slice($wds, 0, $w))
         . (count($wds) > $w ? '…' : '');
};
?>

<section class="pi-wrap">
  <label for="piSel" class="pi-lbl">Choose a prompt:</label>
  <select id="piSel" class="pi-sel">
    <?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;
}

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

Site Builder

Editing: modules-prompt2s.php

Site Builder