Site Builder

Editing: promptinator-landing-elements.html

writable 0666

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Promptinator Input Cheat‑Sheet | Build Any Field with One Letter</title>

<style>
:root{
  --bg-1:#0e0f14; --bg-2:#14151d;
  --brand:#865bfd; --txt:#ecf0ff; --accent:#12d6ff;
  --glass:rgba(255,255,255,.05); --blur:blur(14px);
  --step-0:clamp(.95rem,1vw + .78rem,1.22rem);
  --step-1:clamp(1.25rem,1vw +1.1rem,1.55rem);
  --step-2:clamp(1.6rem,1vw +1.6rem,2.2rem);
  --step-3:clamp(2.4rem,1vw +2rem,3.2rem);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--txt); background:linear-gradient(135deg,var(--bg-1),var(--bg-2));
  min-height:100vh; display:flex; flex-direction:column;
}
h1{font-size:var(--step-3);font-weight:900;line-height:1.08;text-align:center;margin-top:6rem;}
h2{font-size:var(--step-2);margin-bottom:1rem;color:var(--accent);}
p {font-size:var(--step-0);line-height:1.55;margin:.7rem 0;}
section{width:min(92ch,90%);margin-inline:auto;padding:5rem 0;}
.grid{display:grid;gap:3rem;}@media(min-width:900px){.grid{grid-template-columns:repeat(auto-fit,minmax(330px,1fr));}}
.box{
  background:var(--glass);backdrop-filter:var(--blur);border:1px solid rgba(255,255,255,.08);
  border-radius:18px;padding:1.8rem;display:flex;flex-direction:column;gap:1.1rem;
}
pre{background:rgba(255,255,255,.04);padding:.9rem 1.2rem;border-radius:12px;font-size:.83rem;overflow:auto;}
/* Promptinator styling tweaks */
.Promptinator{padding:1rem;border-radius:12px;border:1px dashed var(--brand);background:rgba(255,255,255,.04);line-height:1.55;}
.Promptinator input[type="radio"]+label,
.Promptinator input[type="checkbox"]+label{filter:grayscale(100%) brightness(190%);transition:filter .2s;}
.Promptinator input:checked+label{filter:none;}
.Promptinator .e-btn{background:var(--brand);color:#fff;border:none;padding:.4em 1em;border-radius:7px;}
.ai-buttons a{font-size:.9rem;}
footer{margin-top:auto;padding:2rem 0;text-align:center;font-size:.85rem;color:#8b91b8;}
footer a{color:var(--accent);text-decoration:none;}
</style>
</head>
<body>

<h1>Promptinator Input Cheat‑Sheet</h1>

<section style="text-align:center;max-width:68ch;">
  <p>
    One letter = one control.<br>
    Swap <code>A</code> ↔ <code>B</code> ↔ <code>C</code> ↔ <code>D</code> or drop the letter entirely
    to morph from textarea → radio → checkboxes → dropdown → plain input — in seconds, no JS skills needed.
  </p>
</section>

<section>
  <div class="grid">

<div class="box">
      <h2>📝 Plain Text Input</h2>
      <p>Skip the letter entirely and you get a single‑line field. Great for names, emails, short titles.</p>
      <pre>Name: [-name-~Jane Doe~]</pre>
      <div id="ex-text" class="Promptinator" data-edit="1">Name: [-name-~Jane Doe~]</div>
    </div>

<div class="box">
      <h2>📄 Multiline Textarea (<code>A</code>)</h2>
      <p>Use <code>[A‑label‑~default~]</code> for longer answers or descriptions.</p>
      <pre>Story: [A-story-~Tell us everything…~]</pre>
      <div id="ex-a" class="Promptinator" data-edit="1">Story: [A-story-~Tell us everything…~]</div>
    </div>

<div class="box">
      <h2>☑️ Checkbox Group (<code>C</code>)</h2>
      <p>Let users tick multiple items. Works exactly like <code>B</code>—just change the letter.</p>
      <pre>Add‑ons: [C-adds-|SEO|PPC|Analytics|~SEO~]</pre>
      <div id="ex-c" class="Promptinator" data-edit="1">Add‑ons: [C-adds-|SEO|PPC|Analytics|~SEO~]</div>
    </div>

<div class="box">
      <h2>🔢 Numeric Dropdown (<code>D</code>)</h2>
      <p>Give a max and a default; Promptinator auto‑ranges 1…max.</p>
      <pre>Seats: [D-seats-50~5~]</pre>
      <div id="ex-d-num" class="Promptinator" data-edit="1">Seats: [D-seats-50~5~]</div>
    </div>

<div class="box">
      <h2>🌐 URL Picker + Preview (<code>I</code>)</h2>
      <p>Select a resource and instantly embed the site in an iframe—perfect for docs, references, or AI research.</p>
      <pre>[I-source-|https://example.com|https://wikipedia.org|~Choose a site~]</pre>
      <div id="ex-i" class="Promptinator" data-edit="1">[I-source-|https://example.com|https://wikipedia.org|~Choose a site~]</div>
    </div>

<div class="box">
      <h2>📧 / 📤 Smart Submit (<code>E</code>)</h2>
      <p><code>[E]</code> auto‑detects an email vs URL: mailto for quick messages or POST for server endpoints.</p>
      <pre>[E-Contact‑Us-~support@acme.com~]  
[E-JSON‑Submit-~https://api.acme.com/contact~]</pre>
      <div id="ex-e" class="Promptinator" data-edit="1">
        Name: [-n-~Jane~]  
        [E-Contact‑Us-~support@acme.com~]
      </div>
    </div>

</div>
</section>

<section>
  <h2>🔄 Change a Letter, Change the Field</h2>
  <p>
    Below is the <em>same</em> line rewritten three times. Toggle the pencil ✏️, swap the letter,
    hit “Save & Update” and watch the control morph in real time.
  </p>
  <pre id="swap-src">My option: [B-choice-|Alpha|Beta|Gamma|~Beta~]</pre>
  <div id="swap-demo" class="Promptinator" data-edit="1">My option: [B-choice-|Alpha|Beta|Gamma|~Beta~]</div>
</section>

<script src="promptinator.js"></script>
<script>
['ex-text','ex-a','ex-b','ex-c','ex-d-num','ex-d-text','ex-i','ex-e','swap-demo']
  .forEach(id=>Promptinator.init({ mount: document.getElementById(id) }));

/* keep markup snippet in sync with swap demo */
const src=document.getElementById('swap-src');
document.querySelector('#swap-demo .token').addEventListener('click',()=>src.textContent=
  document.querySelector('#swap-demo textarea')?.value.trim()||
  src.textContent);
</script>
</body>
</html>

Site Builder

Editing: promptinator-landing-elements.html

Site Builder