@drunkcoding/agents-and-skills 0.0.13 → 0.0.15

package/plugins/html-effectiveness/templates/06-component-variants.html.tmpl

@@ -0,0 +1,557 @@
+<!--
+template: 06-component-variants
+upstream: 06-component-variants.html
+slots:
+  title: string  # replaces first <h1> innerHTML
+-->
+<div class="page">
+
+  <header>
+    <h1>{{title}}</h1>
+    <p>Six structural treatments of the Acme <code style="font-family:var(--mono);font-size:13px">&lt;Card /&gt;</code> component. Adjust density and emphasis with the controls, hover a variant to see its prop combo.</p>
+  </header>
+
+  <!-- ---------- Toolbar ---------- -->
+  <div class="toolbar">
+    <div class="control">
+      <span class="control-label">Padding</span>
+      <input id="ctl-pad" type="range" min="12" max="32" value="20" step="2">
+      <span class="control-value" id="pad-out">20px</span>
+    </div>
+
+    <div class="control">
+      <span class="control-label">Border</span>
+      <div class="radio-group">
+        <label><input type="radio" name="border" value="none"><span>none</span></label>
+        <label><input type="radio" name="border" value="hairline" checked><span>hairline</span></label>
+        <label><input type="radio" name="border" value="solid"><span>solid</span></label>
+      </div>
+    </div>
+
+    <div class="control">
+      <label class="check">
+        <input id="ctl-shadow" type="checkbox" checked>
+        Show shadow
+      </label>
+    </div>
+  </div>
+
+  <!-- ---------- Grid ---------- -->
+  <div class="grid" id="grid">
+
+    <!-- A: Flat -->
+    <div class="cell">
+      <span class="variant-label">A &middot; Flat</span>
+      <div class="card v-flat"
+           data-snippet='<Card variant="flat" padding={PAD}>
+  <Card.Header avatar title="Weekly planning" subtitle="12 tasks &middot; due Friday" />
+  <Card.Meta tags={["Q2", "Roadmap"]} />
+  <Button variant="ghost">Open</Button>
+</Card>'>
+        <div class="card-head">
+          <div class="avatar">WP</div>
+          <div class="card-titles">
+            <p class="card-title">Weekly planning</p>
+            <p class="card-sub">12 tasks &middot; due Friday</p>
+          </div>
+        </div>
+        <div class="chips">
+          <span class="chip">Q2</span>
+          <span class="chip olive">Roadmap</span>
+        </div>
+        <button class="ghost-btn">Open</button>
+      </div>
+      <p class="variant-note">best for: dense lists on tinted backgrounds</p>
+    </div>
+
+    <!-- B: Outlined -->
+    <div class="cell">
+      <span class="variant-label">B &middot; Outlined</span>
+      <div class="card v-outlined"
+           data-snippet='<Card variant="outlined" padding={PAD} border="BORDER">
+  <Card.Header avatar title="Weekly planning" subtitle="12 tasks &middot; due Friday" />
+  <Card.Meta tags={["Q2", "Roadmap"]} />
+  <Button variant="ghost">Open</Button>
+</Card>'>
+        <div class="card-head">
+          <div class="avatar">WP</div>
+          <div class="card-titles">
+            <p class="card-title">Weekly planning</p>
+            <p class="card-sub">12 tasks &middot; due Friday</p>
+          </div>
+        </div>
+        <div class="chips">
+          <span class="chip">Q2</span>
+          <span class="chip olive">Roadmap</span>
+        </div>
+        <button class="ghost-btn">Open</button>
+      </div>
+      <p class="variant-note">best for: default content cards on ivory</p>
+    </div>
+
+    <!-- C: Elevated -->
+    <div class="cell">
+      <span class="variant-label">C &middot; Elevated</span>
+      <div class="card v-elevated"
+           data-snippet='<Card variant="elevated" padding={PAD} shadow="md">
+  <Card.Header avatar title="Weekly planning" subtitle="12 tasks &middot; due Friday" />
+  <Card.Meta tags={["Q2", "Roadmap"]} />
+  <Button variant="ghost">Open</Button>
+</Card>'>
+        <div class="card-head">
+          <div class="avatar">WP</div>
+          <div class="card-titles">
+            <p class="card-title">Weekly planning</p>
+            <p class="card-sub">12 tasks &middot; due Friday</p>
+          </div>
+        </div>
+        <div class="chips">
+          <span class="chip">Q2</span>
+          <span class="chip olive">Roadmap</span>
+        </div>
+        <button class="ghost-btn">Open</button>
+      </div>
+      <p class="variant-note">best for: draggable items, popovers</p>
+    </div>
+
+    <!-- D: Accent stripe -->
+    <div class="cell">
+      <span class="variant-label">D &middot; Accent stripe</span>
+      <div class="card v-stripe"
+           data-snippet='<Card variant="outlined" accent="clay" padding={PAD} border="BORDER">
+  <Card.Header avatar title="Weekly planning" subtitle="12 tasks &middot; due Friday" />
+  <Card.Meta tags={["Q2", "Roadmap"]} />
+  <Button variant="ghost">Open</Button>
+</Card>'>
+        <div class="card-head">
+          <div class="avatar">WP</div>
+          <div class="card-titles">
+            <p class="card-title">Weekly planning</p>
+            <p class="card-sub">12 tasks &middot; due Friday</p>
+          </div>
+        </div>
+        <div class="chips">
+          <span class="chip">Q2</span>
+          <span class="chip olive">Roadmap</span>
+        </div>
+        <button class="ghost-btn">Open</button>
+      </div>
+      <p class="variant-note">best for: pinned or priority items</p>
+    </div>
+
+    <!-- E: Inset / filled -->
+    <div class="cell">
+      <span class="variant-label">E &middot; Inset</span>
+      <div class="card v-inset"
+           data-snippet='<Card variant="filled" tone="oat" padding={PAD}>
+  <Card.Header avatar title="Weekly planning" subtitle="12 tasks &middot; due Friday" />
+  <Card.Meta tags={["Q2", "Roadmap"]} />
+  <Button variant="ghost">Open</Button>
+</Card>'>
+        <div class="card-head">
+          <div class="avatar">WP</div>
+          <div class="card-titles">
+            <p class="card-title">Weekly planning</p>
+            <p class="card-sub">12 tasks &middot; due Friday</p>
+          </div>
+        </div>
+        <div class="chips">
+          <span class="chip">Q2</span>
+          <span class="chip olive">Roadmap</span>
+        </div>
+        <button class="ghost-btn">Open</button>
+      </div>
+      <p class="variant-note">best for: nested cards inside white panels</p>
+    </div>
+
+    <!-- F: Horizontal / compact -->
+    <div class="cell">
+      <span class="variant-label">F &middot; Horizontal</span>
+      <div class="card v-horizontal"
+           data-snippet='<Card variant="outlined" layout="row" padding={PAD} border="BORDER">
+  <Card.Header avatar title="Weekly planning" />
+  <Card.Meta tags={["Q2", "Roadmap"]} />
+  <Button variant="ghost">Open</Button>
+</Card>'>
+        <div class="card-head">
+          <div class="avatar">WP</div>
+          <div class="card-titles">
+            <p class="card-title">Weekly planning</p>
+            <p class="card-sub">12 tasks &middot; due Friday</p>
+          </div>
+        </div>
+        <div class="chips">
+          <span class="chip">Q2</span>
+          <span class="chip olive">Roadmap</span>
+        </div>
+        <button class="ghost-btn">Open</button>
+      </div>
+      <p class="variant-note">best for: compact row lists, sidebars</p>
+    </div>
+
+  </div>
+
+  <!-- ---------- Snippet ---------- -->
+  <div class="snippet-panel">
+    <div class="snippet-head">JSX &mdash; hover a variant above</div>
+    <pre id="snippet">// hover a card to preview its props</pre>
+  </div>
+
+</div>
+
+<style>
+* { box-sizing: border-box; }
+.page {
+    max-width: 1100px;
+    margin: 0 auto;
+    padding: 0 28px 80px;
+  }
+header {
+    padding: 48px 0 20px;
+  }
+header h1 {
+    font-family: var(--serif);
+    font-weight: 500;
+    font-size: 36px;
+    letter-spacing: -0.01em;
+    margin: 0 0 6px;
+  }
+header p {
+    color: var(--gray-500);
+    font-size: 14px;
+    margin: 0;
+    max-width: 640px;
+  }
+/* ---------- Toolbar ---------- */
+  .toolbar {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 28px;
+    padding: 16px 20px;
+    margin: 24px 0 36px;
+    background: var(--white);
+    border: 1.5px solid var(--gray-300);
+    border-radius: 12px;
+  }
+.control {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+.control-label {
+    font-family: var(--mono);
+    font-size: 12px;
+    color: var(--gray-700);
+  }
+.control-value {
+    font-family: var(--mono);
+    font-size: 12px;
+    color: var(--gray-500);
+    min-width: 36px;
+  }
+input[type="range"] {
+    appearance: none;
+    width: 140px;
+    height: 4px;
+    background: var(--gray-300);
+    border-radius: 2px;
+    outline: none;
+  }
+input[type="range"]::-webkit-slider-thumb {
+    appearance: none;
+    width: 16px; height: 16px;
+    background: var(--clay);
+    border-radius: 50%;
+    cursor: pointer;
+  }
+input[type="range"]::-moz-range-thumb {
+    width: 16px; height: 16px;
+    background: var(--clay);
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+  }
+.radio-group {
+    display: inline-flex;
+    border: 1.5px solid var(--gray-300);
+    border-radius: 8px;
+    overflow: hidden;
+  }
+.radio-group label {
+    padding: 6px 12px;
+    font-size: 13px;
+    cursor: pointer;
+    user-select: none;
+    color: var(--gray-700);
+    border-right: 1px solid var(--gray-300);
+  }
+.radio-group label:last-child { border-right: none; }
+.radio-group input { display: none; }
+.radio-group input:checked + span {
+    color: var(--slate);
+  }
+.radio-group label:has(input:checked) {
+    background: var(--gray-100);
+  }
+.check {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 13px;
+    cursor: pointer;
+    user-select: none;
+  }
+.check input {
+    appearance: none;
+    width: 16px; height: 16px;
+    border: 1.5px solid var(--gray-300);
+    border-radius: 4px;
+    margin: 0;
+    cursor: pointer;
+    position: relative;
+  }
+.check input:checked {
+    background: var(--clay);
+    border-color: var(--clay);
+  }
+.check input:checked::after {
+    content: "";
+    position: absolute;
+    left: 4px; top: 0;
+    width: 4px; height: 9px;
+    border: solid var(--white);
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+  }
+/* ---------- Grid ---------- */
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 28px;
+  }
+@media (max-width: 960px) {
+    .grid { grid-template-columns: repeat(2, 1fr); }
+  }
+@media (max-width: 640px) {
+    .grid { grid-template-columns: 1fr; }
+  }
+.cell {}
+.variant-label {
+    display: inline-flex;
+    align-items: center;
+    height: 22px;
+    padding: 0 9px;
+    font-family: var(--mono);
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--gray-700);
+    background: var(--gray-100);
+    border-radius: 999px;
+    margin-bottom: 10px;
+  }
+.variant-note {
+    font-size: 12px;
+    color: var(--gray-500);
+    margin-top: 10px;
+  }
+/* ---------- Card base ---------- */
+  .card {
+    border-radius: 12px;
+    padding: var(--card-pad);
+    transition: padding 0.15s ease, box-shadow 0.15s ease, border 0.15s ease;
+    cursor: pointer;
+  }
+.card:hover { outline: 2px solid var(--clay); outline-offset: 2px; }
+.card-head {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 12px;
+  }
+.avatar {
+    width: 36px; height: 36px;
+    border-radius: 50%;
+    background: var(--oat);
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--gray-700);
+  }
+.card-titles { min-width: 0; }
+.card-title {
+    font-family: var(--serif);
+    font-size: 17px;
+    font-weight: 500;
+    margin: 0 0 2px;
+    line-height: 1.3;
+  }
+.card-sub {
+    font-size: 13px;
+    color: var(--gray-500);
+    margin: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+.chips {
+    display: flex;
+    gap: 6px;
+    margin-bottom: 14px;
+  }
+.chip {
+    display: inline-flex;
+    align-items: center;
+    height: 20px;
+    padding: 0 8px;
+    font-size: 11px;
+    font-weight: 500;
+    border-radius: 999px;
+    background: var(--gray-100);
+    color: var(--gray-700);
+  }
+.chip.olive { background: rgba(120,140,93,0.16); color: var(--olive); }
+.ghost-btn {
+    display: inline-flex;
+    align-items: center;
+    height: 30px;
+    padding: 0 12px;
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--gray-700);
+    background: transparent;
+    border: 1.5px solid var(--gray-300);
+    border-radius: 8px;
+    cursor: pointer;
+  }
+.ghost-btn:hover { background: var(--gray-100); }
+/* ---------- Variant treatments ---------- */
+  .v-flat {
+    background: var(--white);
+    border: none;
+    box-shadow: none;
+  }
+.v-outlined {
+    background: var(--white);
+    border: var(--card-border);
+    box-shadow: none;
+  }
+.v-elevated {
+    background: var(--white);
+    border: none;
+    box-shadow: var(--card-shadow);
+  }
+.v-stripe {
+    background: var(--white);
+    border: var(--card-border);
+    box-shadow: none;
+    position: relative;
+    overflow: hidden;
+  }
+.v-stripe::before {
+    content: "";
+    position: absolute;
+    left: 0; right: 0; top: 0;
+    height: 4px;
+    background: var(--clay);
+  }
+.v-inset {
+    background: var(--oat);
+    border: none;
+    box-shadow: none;
+  }
+.v-inset .chip { background: rgba(255,255,255,0.6); }
+.v-inset .ghost-btn { border-color: rgba(20,20,19,0.15); }
+.v-inset .avatar { background: var(--white); }
+.v-horizontal {
+    background: var(--white);
+    border: var(--card-border);
+    box-shadow: none;
+    display: flex;
+    align-items: center;
+    gap: 14px;
+  }
+.v-horizontal .card-head { margin: 0; flex: 1; min-width: 0; }
+.v-horizontal .chips { margin: 0; }
+.v-horizontal .card-sub { display: none; }
+.v-horizontal .ghost-btn { flex-shrink: 0; }
+/* ---------- Snippet panel ---------- */
+  .snippet-panel {
+    margin-top: 40px;
+    border: 1.5px solid var(--gray-300);
+    border-radius: 12px;
+    overflow: hidden;
+  }
+.snippet-head {
+    padding: 10px 16px;
+    font-family: var(--mono);
+    font-size: 12px;
+    color: var(--gray-500);
+    background: var(--gray-100);
+    border-bottom: 1px solid var(--gray-300);
+  }
+pre#snippet {
+    margin: 0;
+    padding: 20px;
+    background: var(--slate);
+    color: var(--ivory);
+    font-family: var(--mono);
+    font-size: 13px;
+    line-height: 1.6;
+    overflow-x: auto;
+    min-height: 120px;
+  }
+</style>
+
+<script>
+(function () {
+    var root = document.documentElement;
+    var pad = document.getElementById('ctl-pad');
+    var padOut = document.getElementById('pad-out');
+    var shadow = document.getElementById('ctl-shadow');
+    var snippet = document.getElementById('snippet');
+    var currentBorder = 'hairline';
+
+    var borderMap = {
+      none: 'none',
+      hairline: '1px solid var(--gray-300)',
+      solid: '1.5px solid var(--gray-300)'
+    };
+
+    function applyPad() {
+      root.style.setProperty('--card-pad', pad.value + 'px');
+      padOut.textContent = pad.value + 'px';
+    }
+    function applyBorder(v) {
+      currentBorder = v;
+      root.style.setProperty('--card-border', borderMap[v]);
+    }
+    function applyShadow() {
+      root.style.setProperty('--card-shadow',
+        shadow.checked ? '0 4px 14px rgba(20,20,19,0.08)' : 'none');
+    }
+
+    pad.addEventListener('input', applyPad);
+    shadow.addEventListener('change', applyShadow);
+    document.querySelectorAll('input[name="border"]').forEach(function (r) {
+      r.addEventListener('change', function () { applyBorder(r.value); });
+    });
+
+    document.querySelectorAll('.card').forEach(function (card) {
+      card.addEventListener('mouseenter', function () {
+        var raw = card.getAttribute('data-snippet') || '';
+        snippet.textContent = raw
+          .replace(/PAD/g, pad.value)
+          .replace(/BORDER/g, currentBorder);
+      });
+    });
+
+    applyPad(); applyBorder('hairline'); applyShadow();
+  })();
+</script>