Site Builder

Editing: guide.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 Field Reference | BestDealOn</title>

<style>
  :root{
    --brand: #5b36ff;       /* BestDealOn purple */
    --accent:#f5f5f7;
    --radius:.5rem;
    --logo-col-1:#551A8B;   /* B */
    --logo-col-2:#00c853;   /* D */
    --logo-col-3:#ff1744;   /* O */
  }
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
  body{
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    background:var(--accent);
    color:#222;
    line-height:1.55;
    padding-bottom:3rem;            /* leave room for footer shadow */
  }

/* ===== TOP BAR ===== */
  .top-bar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#eee;
    padding:.6rem 1rem;
    font-size:.875rem;
  }
  .logo{font-weight:900;letter-spacing:-.5px;text-decoration:none;line-height:1;}
  .logo span{display:inline-block;white-space:pre;}
  .logo .b{color:var(--logo-col-1);} .logo .d{color:var(--logo-col-2);} .logo .o{color:var(--logo-col-3);}

nav.site-nav ul{
    list-style:none;
    display:flex;
    gap:1.2rem;
  }
  nav.site-nav a{
    text-decoration:none;
    color:#0366d6;
    font-weight:600;
  }
  nav.site-nav a:hover{text-decoration:underline;}

/* ===== HERO ===== */
  header.hero{
    background:var(--brand);
    color:#fff;
    text-align:center;
    padding:2.2rem 1rem 2.6rem;
  }
  header.hero h1{font-size:clamp(1.8rem,5vw,2.6rem);margin-bottom:.35rem;}
  header.hero p{opacity:.9;font-weight:300;letter-spacing:.03em;}

/* ===== GUIDE GRID STYLES (original) ===== */
  .guide-section h3{
    margin:0;
    padding:.65rem 1.1rem;
    background:#40464d;       /* dark accent */
    color:#fff;
    font-size:1.1rem;
    border-radius:6px 6px 0 0;
    letter-spacing:.03em;
    font-weight:600;
  }
  .guide-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    border:1px solid #d0d3d6;
    border-top:none;          /* flush with heading */
    background:#fff;
  }
  .guide-grid div{
    padding:1rem .9rem;
    border-right:1px solid #e5e7ea;
    border-bottom:1px solid #e5e7ea;
    word-break:break-word;
  }
  .guide-grid div:nth-child(3n){border-right:none;}
  .item-title{font-weight:600;}
  code{
    background:#f0f1f3;
    padding:.15rem .35rem;
    border-radius:4px;
    font-size:.9rem;
    color:#a11492;
    white-space:nowrap;
  }
  @media(max-width:768px){
    .guide-grid{grid-template-columns:1fr;}
    .guide-grid div:nth-child(3n){border-right:1px solid #e5e7ea;}
  }
  </style>
</head>
<body>

<div class="top-bar">
  <a class="logo" href="./"><span class="b">BEST&nbsp;</span><span class="d">DEAL&nbsp;</span><span class="o">ON</span></a>
  <nav class="site-nav" aria-label="Primary">
    <ul>
      <li><a href="./">Code Builder</a></li>
      <li><a href="guide.html">Guide</a></li>
      <li><a href="demo-prompt.html">Demo</a></li>
    </ul>
  </nav>
</div>

<header class="hero">
  <h1>Promptinator Field Reference</h1>
  <p>Quick‑glance cheatsheet for Everything‑token shortcodes</p>
</header>

<main style="max-width:900px;margin:2.5rem auto;padding:0 1rem;">

<section class="guide-section" style="margin-bottom:1.6rem;">
  <h3>[A-details-~Textarea ~]</h3>
  <div class="guide-grid">
    <div class="item-title">Free-text</div>
    <div><code>[A-optionName-~default~]</code></div>
    <div>Text box (or textarea) with optional starting text</div>
  </div>
</section>

<section class="guide-section" style="margin-bottom:1.6rem;">
  <h3>[B-tone-|Formal|Casual|Energetic|~Energetic~]</h3>
  <div class="guide-grid">
    <div class="item-title">Radio buttons</div>
    <div><code>[B-optionName-|Choice&nbsp;1|Choice&nbsp;2|…|~Default~]</code></div>
    <div>Single-select group, default pre-selected</div>
  </div>
</section>

<section class="guide-section" style="margin-bottom:1.6rem;">
  <h3>[D-keyword_count-15~5~]</h3>
  <div class="guide-grid">
    <div class="item-title">Dropdown&nbsp;(numeric)</div>
    <div><code>[D-optionName-max~default~]</code></div>
    <div>1…max selector</div>
  </div>
</section>

<section class="guide-section" style="margin-bottom:1.6rem;">
  <h3>[D-package-|Basic|Pro|Enterprise|~Pro~]</h3>
  <div class="guide-grid">
    <div class="item-title">Dropdown&nbsp;(text)</div>
    <div><code>[D-optionName-|opt1|opt2|…|~opt2~]</code></div>
    <div>Choose from <em>text</em> list</div>
  </div>
</section>

<section class="guide-section" style="margin-bottom:1.6rem;">
  <h3>[I-reference-|https://www.rfsafe.com|https://www.bestdealon.com/|~Pick a site~]</h3>
  <div class="guide-grid">
    <div class="item-title">URL picker&nbsp;+ preview</div>
    <div><code>[I-optionName-|url1|url2|…|~Prompt~]</code></div>
    <div>Dropdown of URLs plus live iframe preview</div>
  </div>
</section>

</main>

<footer style="font-size:.8rem;text-align:center;color:#666;margin-top:2.5rem;">
  <em>© 2025 BestDealOn.com · Guide page auto‑generated for Promptinator users</em>
</footer>

</body>
</html>

Site Builder

Editing: guide.html

Site Builder