@drunkcoding/agents-and-skills 0.0.45 → 0.0.46

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

@@ -1,557 +0,0 @@
-<!--
-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>