eddie/new_ai_mailer
1
0
Fork 0
generated from eddie/corp_base
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
c0e05bfd81b63b52914e76b4161d5f01d13bbf8a
new_ai_mailer/rss/php/templates/index.php
eddie c0e05bfd81 Initial commit
2025-10-10 18:24:12 -04:00

697 lines
34 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<div class="container">
<!-- ====================================================================== -->
<!-- Typography -->
<!-- ====================================================================== -->
<section class="card p-3 stack-2 my-2">
<h2 class="text-xl fw-semibold">Typography</h2>
<p class="text-sm">Type scale, weight, alignment & transforms — each example followed by its code.</p>
<!-- Example: Type scale -->
<div class="card p-3 stack-2">
<h3 class="text-lg fw-medium">Type scale</h3>
<div class="border rounded p-3 bg-accent-white stack-1">
<div class="text-xxl fw-bold lh-heading">Heading XXL</div>
<div class="text-xl fw-semibold lh-heading">Heading XL</div>
<div class="text-lg fw-medium lh-heading">Heading LG</div>
<div class="text-base">Body Base</div>
<div class="text-sm text-muted">Small muted text</div>
<div class="text-xs text-uppercase">Extra small uppercase</div>
</div>
<pre class="border rounded p-2 bg-accent-white text-sm"><code>&lt;div class="text-xxl fw-bold lh-heading"&gt;Heading XXL&lt;/div&gt;
&lt;div class="text-xl fw-semibold lh-heading"&gt;Heading XL&lt;/div&gt;
&lt;div class="text-lg fw-medium lh-heading"&gt;Heading LG&lt;/div&gt;
&lt;div class="text-base"&gt;Body Base&lt;/div&gt;
&lt;div class="text-sm text-muted"&gt;Small muted text&lt;/div&gt;
&lt;div class="text-xs text-uppercase"&gt;Extra small uppercase&lt;/div&gt;</code></pre>
</div>
<!-- Example: Alignment -->
<div class="card p-3 stack-2">
<h3 class="text-lg fw-medium">Alignment</h3>
<div class="border rounded p-3 bg-accent-white stack-1">
<div class="text-left">Left aligned</div>
<div class="text-center">Center aligned</div>
<div class="text-right">Right aligned</div>
</div>
<pre class="border rounded p-2 bg-accent-white text-sm"><code>&lt;div class="text-left"&gt;Left aligned&lt;/div&gt;
&lt;div class="text-center"&gt;Center aligned&lt;/div&gt;
&lt;div class="text-right"&gt;Right aligned&lt;/div&gt;</code></pre>
</div>
<!-- Example: Weights & transforms -->
<div class="card p-3 stack-2">
<h3 class="text-lg fw-medium">Weights &amp; transforms</h3>
<div class="border rounded p-3 bg-accent-white stack-1">
<div class="fw-light">Light</div>
<div class="fw-normal">Normal</div>
<div class="fw-semibold">Semibold</div>
<div class="fw-bold text-uppercase">Uppercase bold</div>
<div class="text-underline">Underline</div>
<div class="text-line-through">Line-through</div>
<div class="text-no-decoration">No decoration</div>
</div>
<pre class="border rounded p-2 bg-accent-white text-sm"><code>&lt;div class="fw-light"&gt;Light&lt;/div&gt;
&lt;div class="fw-normal"&gt;Normal&lt;/div&gt;
&lt;div class="fw-semibold"&gt;Semibold&lt;/div&gt;
&lt;div class="fw-bold text-uppercase"&gt;Uppercase bold&lt;/div&gt;
&lt;div class="text-underline"&gt;Underline&lt;/div&gt;
&lt;div class="text-line-through"&gt;Line-through&lt;/div&gt;
&lt;div class="text-no-decoration"&gt;No decoration&lt;/div&gt;</code></pre>
</div>
</section>
<!-- ====================================================================== -->
<!-- Color Utilities -->
<!-- ====================================================================== -->
<section class="card p-3 stack-2 my-2">
<h2 class="text-xl fw-semibold">Color Utilities</h2>
<p class="text-sm">Text, background, border &amp; spinner colors.</p>
<!-- Example: Text colors -->
<div class="card p-3 stack-2">
<h3 class="text-lg fw-medium">Text</h3>
<div class="border rounded p-3 bg-accent-white grid grid-cols-3 gap-2">
<div class="text-primary">Primary</div>
<div class="text-success">Success</div>
<div class="text-danger">Danger</div>
<div class="text-info">Info</div>
<div class="text-gray">Gray</div>
<div class="text-muted">Muted</div>
</div>
<pre class="border rounded p-2 bg-accent-white text-sm"><code>&lt;div class="text-primary"&gt;Primary&lt;/div&gt;
&lt;div class="text-success"&gt;Success&lt;/div&gt;
&lt;div class="text-danger"&gt;Danger&lt;/div&gt;
&lt;div class="text-info"&gt;Info&lt;/div&gt;
&lt;div class="text-gray"&gt;Gray&lt;/div&gt;
&lt;div class="text-muted"&gt;Muted&lt;/div&gt;</code></pre>
</div>
<!-- Example: Background colors -->
<div class="card p-3 stack-2">
<h3 class="text-lg fw-medium">Background</h3>
<div class="border rounded p-3 bg-accent-white grid grid-cols-4 gap-2">
<div class="p-2 bg-primary text-white rounded-sm text-center">Primary</div>
<div class="p-2 bg-success text-white rounded-sm text-center">Success</div>
<div class="p-2 bg-warning rounded-sm text-center">Warning</div>
<div class="p-2 bg-danger text-white rounded-sm text-center">Danger</div>
</div>
<pre class="border rounded p-2 bg-accent-white text-sm"><code>&lt;div class="p-2 bg-primary text-white rounded-sm"&gt;Primary&lt;/div&gt;
&lt;div class="p-2 bg-success text-white rounded-sm"&gt;Success&lt;/div&gt;
&lt;div class="p-2 bg-warning rounded-sm"&gt;Warning&lt;/div&gt;
&lt;div class="p-2 bg-danger text-white rounded-sm"&gt;Danger&lt;/div&gt;</code></pre>
</div>
<!-- Example: Border colors -->
<div class="card p-3 stack-2">
<h3 class="text-lg fw-medium">Border</h3>
<div class="border rounded p-3 bg-accent-white grid grid-cols-3 gap-2">
<div class="p-2 border border-primary rounded-sm text-center">Primary</div>
<div class="p-2 border border-success rounded-sm text-center">Success</div>
<div class="p-2 border border-danger rounded-sm text-center">Danger</div>
</div>
<pre class="border rounded p-2 bg-accent-white text-sm"><code>&lt;div class="p-2 border border-primary rounded-sm"&gt;Primary&lt;/div&gt;
&lt;div class="p-2 border border-success rounded-sm"&gt;Success&lt;/div&gt;
&lt;div class="p-2 border border-danger rounded-sm"&gt;Danger&lt;/div&gt;</code></pre>
</div>
<!-- Example: Spinner colors -->
<div class="card p-3 stack-2">
<h3 class="text-lg fw-medium">Spinner</h3>
<div class="border rounded p-3 bg-accent-white flex items-center gap-3">
<span class="spinner spinner-primary"></span>
<span class="spinner spinner-success"></span>
<span class="spinner spinner-danger"></span>
<span class="spinner spinner-info"></span>
</div>
<pre class="border rounded p-2 bg-accent-white text-sm"><code>&lt;span class="spinner spinner-primary"&gt;&lt;/span&gt;
&lt;span class="spinner spinner-success"&gt;&lt;/span&gt;
&lt;span class="spinner spinner-danger"&gt;&lt;/span&gt;
&lt;span class="spinner spinner-info"&gt;&lt;/span&gt;</code></pre>
</div>
</section>
<!-- ====================================================================== -->
<!-- Spacing & Sizing -->
<!-- ====================================================================== -->
<section class="card p-3 stack-2 my-2">
<h2 class="text-xl fw-semibold">Spacing &amp; Sizing</h2>
<p class="text-sm">Margin/padding utilities and width/height tokens.</p>
<!-- Example: Margin & Padding -->
<div class="card p-3 stack-2">
<h3 class="text-lg fw-medium">Margin &amp; Padding</h3>
<div class="border rounded p-3 bg-accent-white grid grid-cols-4 gap-2">
<div class="bg-accent-white border rounded p-2 m-1 text-center">m-1 p-2</div>
<div class="bg-accent-white border rounded p-3 mx-2 my-1 text-center">mx-2 my-1</div>
<div class="bg-accent-white border rounded px-4 py-2 text-center">px-4 py-2</div>
<div class="bg-accent-white border rounded pt-5 pb-1 text-center">pt-5 pb-1</div>
</div>
<pre class="border rounded p-2 bg-accent-white text-sm"><code>&lt;div class="m-1 p-2"&gt;...&lt;/div&gt;
&lt;div class="mx-2 my-1 p-3"&gt;...&lt;/div&gt;
&lt;div class="px-4 py-2"&gt;...&lt;/div&gt;
&lt;div class="pt-5 pb-1"&gt;...&lt;/div&gt;</code></pre>
</div>
<!-- Example: Percentage widths -->
<div class="card p-3 stack-2">
<h3 class="text-lg fw-medium">Percentage widths</h3>
<div class="border rounded p-3 bg-accent-white grid grid-cols-4 gap-2 items-center">
<div class="bg-info rounded text-center text-sm p-1 w-25">w-25</div>
<div class="bg-info rounded text-center text-sm p-1 w-50">w-50</div>
<div class="bg-info rounded text-center text-sm p-1 w-75">w-75</div>
<div class="bg-info rounded text-center text-sm p-1 w-100">w-100</div>
</div>
<pre class="border rounded p-2 bg-accent-white text-sm"><code>&lt;div class="w-25"&gt;...&lt;/div&gt;
&lt;div class="w-50"&gt;...&lt;/div&gt;
&lt;div class="w-75"&gt;...&lt;/div&gt;
&lt;div class="w-100"&gt;...&lt;/div&gt;</code></pre>
</div>
<!-- Example: Fixed & viewport sizes -->
<div class="card p-3 stack-2">
<h3 class="text-lg fw-medium">Fixed &amp; viewport sizes</h3>
<div class="border rounded p-3 bg-accent-white grid grid-cols-4 gap-2 items-center">
<div class="bg-warning rounded text-center text-sm p-1 wpx-64">wpx-64</div>
<div class="bg-warning rounded text-center text-sm p-1 wrem-4">wrem-4</div>
<div class="bg-warning rounded text-center text-sm p-1 wvw-25">wvw-25</div>
<div class="bg-warning rounded text-center text-sm p-1 hvh-25">hvh-25</div>
</div>
<pre class="border rounded p-2 bg-accent-white text-sm"><code>&lt;div class="wpx-64"&gt;...&lt;/div&gt;
&lt;div class="wrem-4"&gt;...&lt;/div&gt;
&lt;div class="wvw-25"&gt;...&lt;/div&gt;
&lt;div class="hvh-25"&gt;...&lt;/div&gt;</code></pre>
</div>
</section>
<!-- ====================================================================== -->
<!-- Layout (Containers, Flex Grid, CSS Grid) -->
<!-- ====================================================================== -->
<section class="card p-3 stack-2 my-2">
<h2 class="text-xl fw-semibold">Layout</h2>
<p class="text-sm">Containers, flex row/cols, and CSS grid helpers.</p>
<!-- Example: Containers -->
<div class="card p-3 stack-2">
<h3 class="text-lg fw-medium">Containers</h3>
<div class="border rounded p-3 bg-accent-white stack-1">
<div class="container-narrow border rounded p-2">.container-narrow</div>
<div class="container-wide border rounded p-2">.container-wide</div>
</div>
<pre class="border rounded p-2 bg-accent-white text-sm"><code>&lt;div class="container-narrow"&gt;...&lt;/div&gt;
&lt;div class="container-wide"&gt;...&lt;/div&gt;</code></pre>
</div>
<!-- Example: Flex grid -->
<div class="card p-3 stack-2">
<h3 class="text-lg fw-medium">Flex grid (.row / .col)</h3>
<div class="border rounded p-3 bg-accent-white">
<div class="row">
<div class="col-4 p-2"><div class="border rounded p-2 text-center">col-4</div></div>
<div class="col-4 p-2"><div class="border rounded p-2 text-center">col-4</div></div>
<div class="col-4 p-2"><div class="border rounded p-2 text-center">col-4</div></div>
</div>
</div>
<pre class="border rounded p-2 bg-accent-white text-sm"><code>&lt;div class="row"&gt;
&lt;div class="col-4"&gt;...&lt;/div&gt;
&lt;div class="col-4"&gt;...&lt;/div&gt;
&lt;div class="col-4"&gt;...&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
<!-- Example: CSS Grid -->
<div class="card p-3 stack-2">
<h3 class="text-lg fw-medium">CSS Grid</h3>
<div class="border rounded p-3 bg-accent-white grid grid-cols-3 gap-2">
<div class="border rounded p-2 text-center">1</div>
<div class="border rounded p-2 text-center">2</div>
<div class="border rounded p-2 text-center">3</div>
</div>
<pre class="border rounded p-2 bg-accent-white text-sm"><code>&lt;div class="grid grid-cols-3 gap-2"&gt;
&lt;div&gt;1&lt;/div&gt;
&lt;div&gt;2&lt;/div&gt;
&lt;div&gt;3&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</section>
<!-- ====================================================================== -->
<!-- Flexbox: Alignment & Justify -->
<!-- ====================================================================== -->
<section class="card p-3 stack-2">
<h2 class="text-xl fw-semibold">Flexbox: Alignment &amp; Justify</h2>
<p class="text-sm text-muted">Use <code>.flex-*</code>, <code>.items-*</code>, and <code>.justify-*</code> to control layout.</p>
<!-- Live example -->
<div class="card p-3 stack-2">
<div class="fw-semibold">Center both axes</div>
<div class="border rounded p-3 bg-accent-white" style="height:120px;">
<div class="flex items-center justify-center h-100">
<span class="pill">.flex .items-center .justify-center</span>
</div>
</div>
<div class="fw-semibold">Space between horizontally, start vertically</div>
<div class="border rounded p-3 bg-accent-white">
<div class="flex items-start justify-between gap-2">
<span class="pill">A</span><span class="pill">B</span><span class="pill">C</span>
</div>
</div>
<div class="fw-semibold">Column + center</div>
<div class="border rounded p-3 bg-accent-white">
<div class="flex-column items-center gap-1">
<span class="pill">1</span><span class="pill">2</span><span class="pill">3</span>
</div>
</div>
</div>
<!-- Code -->
<pre class="border rounded p-2 bg-accent-white text-sm"><code>&lt;div class="flex items-center justify-center"&gt;...&lt;/div&gt;
&lt;div class="flex items-start justify-between"&gt;...&lt;/div&gt;
&lt;div class="flex-column items-center"&gt;...&lt;/div&gt;</code></pre>
</section>
<!-- ====================================================================== -->
<!-- Grid: Item Placement (Span & Order) -->
<!-- ====================================================================== -->
<section class="card p-3 stack-2">
<h2 class="text-xl fw-semibold">Grid: Item Placement</h2>
<p class="text-sm text-muted">Span columns/rows and reorder visually when needed.</p>
<div class="card p-3 stack-2">
<div class="border rounded p-3 bg-accent-white grid grid-cols-4 gap-2">
<div class="card p-2">1</div>
<div class="card p-2" style="grid-column: span 2;">2 spans 2 cols</div>
<div class="card p-2">3</div>
<div class="card p-2" style="grid-column: 1 / -1;">4 full row</div>
</div>
</div>
<pre class="border rounded p-2 bg-accent-white text-sm"><code>&lt;div class="grid grid-cols-4"&gt;
&lt;div&gt;1&lt;/div&gt;
&lt;div style="grid-column: span 2;"&gt;2&lt;/div&gt;
&lt;div&gt;3&lt;/div&gt;
&lt;div style="grid-column: 1 / -1;"&gt;4&lt;/div&gt;
&lt;/div&gt;</code></pre>
</section>
<!-- ====================================================================== -->
<!-- Responsive Flex vs Grid (When to use which) -->
<!-- ====================================================================== -->
<section class="card p-3 stack-2">
<h2 class="text-xl fw-semibold">Flex vs Grid (Quick Patterns)</h2>
<p class="text-sm text-muted">Use flex for 1-dimensional alignment; use grid for true 2-D layouts.</p>
<div class="grid grid-cols-2 gap-3">
<div class="card p-3 stack-2">
<div class="fw-semibold">Nav bar (Flex)</div>
<div class="border rounded p-2 bg-accent-white flex items-center justify-between">
<span class="pill">Logo</span>
<div class="flex gap-1">
<span class="pill">Link</span><span class="pill">Link</span><span class="pill">Link</span>
</div>
</div>
<pre class="border rounded p-2 bg-accent-white text-sm"><code>&lt;div class="flex items-center justify-between"&gt;...&lt;/div&gt;</code></pre>
</div>
<div class="card p-3 stack-2">
<div class="fw-semibold">Card gallery (Grid)</div>
<div class="border rounded p-2 bg-accent-white grid grid-auto-fit-md gap-2">
<article class="card p-2">Card</article>
<article class="card p-2">Card</article>
<article class="card p-2">Card</article>
</div>
<pre class="border rounded p-2 bg-accent-white text-sm"><code>&lt;div class="grid grid-auto-fit-md gap-2"&gt;...&lt;/div&gt;</code></pre>
</div>
</div>
</section>
<!-- ====================================================================== -->
<!-- Borders, Radius, Shadows -->
<!-- ====================================================================== -->
<section class="card p-3 stack-2 my-2">
<h2 class="text-xl fw-semibold">Borders, Radius, Shadows</h2>
<p class="text-sm">Border widths, corner radii, and shadow levels.</p>
<!-- Example: Borders & Radius -->
<div class="card p-3 stack-2">
<h3 class="text-lg fw-medium">Borders &amp; radius</h3>
<div class="border rounded p-3 bg-accent-white grid grid-cols-3 gap-2">
<div class="border rounded-sm p-2 text-center">.border .rounded-sm</div>
<div class="border-2 rounded-lg p-2 text-center">.border-2 .rounded-lg</div>
<div class="border-3 rounded-xl p-2 text-center">.border-3 .rounded-xl</div>
</div>
<pre class="border rounded p-2 bg-accent-white text-sm"><code>&lt;div class="border rounded-sm"&gt;...&lt;/div&gt;
&lt;div class="border-2 rounded-lg"&gt;...&lt;/div&gt;
&lt;div class="border-3 rounded-xl"&gt;...&lt;/div&gt;</code></pre>
</div>
<!-- Example: Card shadows -->
<div class="card p-3 stack-2">
<h3 class="text-lg fw-medium">Card shadows</h3>
<div class="border rounded p-3 bg-accent-white grid grid-cols-3 gap-2">
<article class="card p-2">.card</article>
<article class="card card-shadow-4 p-2">.card .card-shadow-4</article>
<article class="card shadow-none p-2">.card .shadow-none</article>
</div>
<pre class="border rounded p-2 bg-accent-white text-sm"><code>&lt;article class="card"&gt;...&lt;/article&gt;
&lt;article class="card card-shadow-4"&gt;...&lt;/article&gt;
&lt;article class="card shadow-none"&gt;...&lt;/article&gt;</code></pre>
</div>
</section>
<!-- ====================================================================== -->
<!-- Controls (Inputs & Buttons) -->
<!-- ====================================================================== -->
<section class="card p-3 stack-2 my-2">
<h2 class="text-xl fw-semibold">Controls</h2>
<p class="text-sm">Shared blueprint, sizes, and variants.</p>
<!-- Example: Inputs -->
<div class="card p-3 stack-2">
<h3 class="text-lg fw-medium">Inputs</h3>
<div class="border rounded p-3 bg-accent-white stack-1">
<input class="input input-sm" placeholder="Small" />
<input class="input input-md" placeholder="Medium" />
<input class="input input-lg" placeholder="Large" />
<input class="input input-xl" placeholder="XL" />
</div>
<pre class="border rounded p-2 bg-accent-white text-sm"><code>&lt;input class="input input-sm" placeholder="Small" /&gt;
&lt;input class="input input-md" placeholder="Medium" /&gt;
&lt;input class="input input-lg" placeholder="Large" /&gt;
&lt;input class="input input-xl" placeholder="XL" /&gt;</code></pre>
</div>
<!-- Example: Buttons -->
<div class="card p-3 stack-2">
<h3 class="text-lg fw-medium">Buttons</h3>
<div class="border rounded p-3 bg-accent-white stack-1">
<button class="btn btn-sm btn-primary">Primary</button>
<button class="btn btn-md btn-success">Success</button>
<button class="btn btn-lg btn-outline-danger">Outline Danger</button>
<button class="btn btn-xl btn-ghost-info">Ghost Info</button>
<button class="btn btn-md" disabled>Disabled</button>
</div>
<pre class="border rounded p-2 bg-accent-white text-sm"><code>&lt;button class="btn btn-sm btn-primary"&gt;Primary&lt;/button&gt;
&lt;button class="btn btn-md btn-success"&gt;Success&lt;/button&gt;
&lt;button class="btn btn-lg btn-outline-danger"&gt;Outline Danger&lt;/button&gt;
&lt;button class="btn btn-xl btn-ghost-info"&gt;Ghost Info&lt;/button&gt;
&lt;button class="btn btn-md" disabled&gt;Disabled&lt;/button&gt;</code></pre>
</div>
</section>
<!-- ====================================================================== -->
<!-- Alerts -->
<!-- ====================================================================== -->
<section class="card p-3 stack-2 my-2">
<h2 class="text-xl fw-semibold">Alerts</h2>
<p class="text-sm">Contextual feedback banners.</p>
<div class="card p-3 stack-2">
<h3 class="text-lg fw-medium">Variants</h3>
<div class="border rounded p-3 bg-accent-white stack-1">
<div class="alert">Base alert</div>
<div class="alert alert-primary">Primary alert</div>
<div class="alert alert-success">Success alert</div>
<div class="alert alert-warning">Warning alert</div>
<div class="alert alert-danger">Danger alert</div>
<div class="alert alert-info">Info alert</div>
</div>
<pre class="border rounded p-2 bg-accent-white text-sm"><code>&lt;div class="alert"&gt;Base alert&lt;/div&gt;
&lt;div class="alert alert-primary"&gt;Primary alert&lt;/div&gt;
&lt;div class="alert alert-success"&gt;Success alert&lt;/div&gt;
&lt;div class="alert alert-warning"&gt;Warning alert&lt;/div&gt;
&lt;div class="alert alert-danger"&gt;Danger alert&lt;/div&gt;
&lt;div class="alert alert-info"&gt;Info alert&lt;/div&gt;</code></pre>
</div>
</section>
<!-- ====================================================================== -->
<!-- Cards -->
<!-- ====================================================================== -->
<section class="card p-3 stack-2 my-2">
<h2 class="text-xl fw-semibold">Cards</h2>
<p class="text-sm">Surface container with border/shadow variants.</p>
<div class="card p-3 stack-2">
<h3 class="text-lg fw-medium">Examples</h3>
<div class="border rounded p-3 bg-accent-white grid grid-cols-3 gap-2">
<article class="card p-2">Default card</article>
<article class="card card-border-primary p-2">Bordered (primary)</article>
<article class="card card-shadow-4 p-2">Shadow level 4</article>
</div>
<pre class="border rounded p-2 bg-accent-white text-sm"><code>&lt;article class="card"&gt;...&lt;/article&gt;
&lt;article class="card card-border-primary"&gt;...&lt;/article&gt;
&lt;article class="card card-shadow-4"&gt;...&lt;/article&gt;</code></pre>
</div>
</section>
<!-- ====================================================================== -->
<!-- Tabs & Tooltips -->
<!-- ====================================================================== -->
<section class="card p-3 stack-2 my-2">
<h2 class="text-xl fw-semibold">Tabs (With Panels)</h2>
<p class="text-sm text-muted">
Each tab points to a content panel by <code>href="#panel-id"</code>.
The JS shows the matching panel and hides the others.
</p>
<!-- Live example -->
<div class="card p-3 stack-2">
<div class="tabs">
<a class="tab active" href="#tab-panel-1">One</a>
<a class="tab" href="#tab-panel-2">Two</a>
<a class="tab" href="#tab-panel-3">Three</a>
</div>
<div class="stack-2 mt-2">
<div class="tab-panel card p-2" id="tab-panel-1">Content for tab one.</div>
<div class="tab-panel card p-2" id="tab-panel-2" hidden>Content for tab two.</div>
<div class="tab-panel card p-2" id="tab-panel-3" hidden>Content for tab three.</div>
</div>
</div>
<!-- Copy-paste code -->
<pre class="border rounded p-2 bg-accent-white text-sm"><code>&lt;div class="tabs"&gt;
&lt;a class="tab active" href="#tab-panel-1"&gt;One&lt;/a&gt;
&lt;a class="tab" href="#tab-panel-2"&gt;Two&lt;/a&gt;
&lt;a class="tab" href="#tab-panel-3"&gt;Three&lt;/a&gt;
&lt;/div&gt;
&lt;div class="stack-2 mt-2"&gt;
&lt;div class="tab-panel card p-2" id="tab-panel-1"&gt;Content for tab one.&lt;/div&gt;
&lt;div class="tab-panel card p-2" id="tab-panel-2" hidden&gt;Content for tab two.&lt;/div&gt;
&lt;div class="tab-panel card p-2" id="tab-panel-3" hidden&gt;Content for tab three.&lt;/div&gt;
&lt;/div&gt;</code></pre>
<ul class="text-sm text-muted stack-1">
<li>Make sure each tab’s <code>href</code> matches a panel’s <code>id</code>.</li>
<li>Only one panel should be visible — the others have <code>hidden</code>.</li>
<li>Keep classes exactly as shown: <code>.tabs</code>, <code>.tab</code>, <code>.tab-panel</code>.</li>
</ul>
</section>
<!-- ====================================================================== -->
<!-- Modal -->
<!-- ====================================================================== -->
<section class="card p-3 stack-2 my-2">
<h2 class="text-xl fw-semibold">Modal</h2>
<p class="text-sm text-muted">
Click the button to open a modal. Close it by clicking the overlay or the ✕ button.
Works with the class-based JS you added (looks for <code>.modal-open</code>, <code>.modal__overlay</code>, <code>.modal__close</code>).
</p>
<!-- Live example -->
<div class="card p-3 stack-2">
<button class="btn btn-md btn-primary modal-open" href="#demoModal">Open demo modal</button>
<div class="modal" id="demoModal" aria-hidden="true" role="dialog" aria-modal="true">
<div class="modal__overlay"></div>
<div class="modal__dialog stack-2" role="document">
<div class="modal__header">
<h3 class="modal__title">Demo modal</h3>
<button class="modal__close" aria-label="Close">✕</button>
</div>
<div class="stack-2">
<p>Put your content here.</p>
<div class="flex items-center gap-2">
<input class="input input-md" placeholder="Your name" />
<button class="btn btn-md btn-success">Save</button>
</div>
</div>
</div>
</div>
</div>
<!-- Copy-paste code -->
<pre class="border rounded p-2 bg-accent-white text-sm"><code>&lt;button class="btn btn-md btn-primary modal-open" href="#demoModal"&gt;Open demo modal&lt;/button&gt;
&lt;div class="modal" id="demoModal" aria-hidden="true" role="dialog" aria-modal="true"&gt;
&lt;div class="modal__overlay"&gt;&lt;/div&gt;
&lt;div class="modal__dialog" role="document"&gt;
&lt;div class="modal__header"&gt;
&lt;h3 class="modal__title"&gt;Demo modal&lt;/h3&gt;
&lt;button class="modal__close" aria-label="Close"&gt;✕&lt;/button&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;p&gt;Put your content here.&lt;/p&gt;
&lt;div class="flex items-center gap-2"&gt;
&lt;input class="input input-md" placeholder="Your name" /&gt;
&lt;button class="btn btn-md btn-success"&gt;Save&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>
<!-- Tips -->
<ul class="text-sm text-muted stack-1">
<li>Trigger: <code>.modal-open</code> on a button/link. Use <code>href="#modalId"</code> or <code>data-target="#modalId"</code>.</li>
<li>Close: add <code>.modal__close</code> to a button or click the <code>.modal__overlay</code>.</li>
<li>Only change the <code>id</code> and the content — keep the classes the same.</li>
</ul>
</section>
<!-- ====================================================================== -->
<!-- Utilities -->
<!-- ====================================================================== -->
<section class="card p-3 stack-2 my-2">
<h2 class="text-xl fw-semibold">Utilities</h2>
<p class="text-sm">Motion, overflow, ratio, cursors &amp; opacity.</p>
<!-- Example: Motion & text -->
<div class="card p-3 stack-2">
<h3 class="text-lg fw-medium">Motion &amp; text</h3>
<div class="border rounded p-3 bg-accent-white grid grid-cols-3 gap-2">
<div class="p-2 border rounded hover-raise text-center">.hover-raise</div>
<div class="p-2 border rounded hover-glow text-center">.hover-glow</div>
<div class="p-2 border rounded truncate w-50">This is a very long line that will be truncated.</div>
</div>
<pre class="border rounded p-2 bg-accent-white text-sm"><code>&lt;div class="hover-raise"&gt;...&lt;/div&gt;
&lt;div class="hover-glow"&gt;...&lt;/div&gt;
&lt;div class="truncate w-50"&gt;Long long text...&lt;/div&gt;</code></pre>
</div>
<!-- Example: Effects, overflow, ratios -->
<div class="card p-3 stack-2">
<h3 class="text-lg fw-medium">Effects, overflow, ratios</h3>
<div class="border rounded p-3 bg-accent-white grid grid-cols-3 gap-2">
<div class="p-2 border rounded opacity-50 text-center">.opacity-50</div>
<div class="p-2 border rounded cursor-not-allowed text-center">.cursor-not-allowed</div>
<div class="p-2 border rounded overflow-scroll" style="max-height:3rem">
.overflow-scroll<br/>Line 2<br/>Line 3<br/>Line 4
</div>
<div class="p-2 border rounded ratio ratio-16x9"><img class="object-cover" src="https://picsum.photos/640/360" alt=""></div>
<div class="p-2 border rounded ratio ratio-1x1"><img class="object-contain" src="https://picsum.photos/512" alt=""></div>
<div class="p-2 border rounded blur-sm text-center">.blur-sm</div>
</div>
<pre class="border rounded p-2 bg-accent-white text-sm"><code>&lt;div class="opacity-50"&gt;...&lt;/div&gt;
&lt;div class="cursor-not-allowed"&gt;...&lt;/div&gt;
&lt;div class="overflow-scroll"&gt;...&lt;/div&gt;
&lt;div class="ratio ratio-16x9"&gt;&lt;img class="object-cover" ... /&gt;&lt;/div&gt;
&lt;div class="ratio ratio-1x1"&gt;&lt;img class="object-contain" ... /&gt;&lt;/div&gt;
&lt;div class="blur-sm"&gt;...&lt;/div&gt;</code></pre>
</div>
</section>
<!-- ====================================================================== -->
<!-- JavaScript Helpers (Reference) -->
<!-- ====================================================================== -->
<section class="card p-3 stack-2 my-2">
<h2 class="text-xl fw-semibold">JavaScript Helpers (Reference)</h2>
<p class="text-sm">
Lightweight utilities used across the docs and components. Keep logic simple and colocated.
This card describes the functions and expected usage; copy snippets as needed.
</p>
<!-- HTTP -->
<div class="card p-3 stack-2">
<h3 class="text-lg fw-medium">HTTP</h3>
<p class="text-sm">Post JSON-ish data via <code>FormData</code> to the PHP handler.</p>
<div class="stack-1">
<div>
<div class="fw-semibold">_post(formObj, target, func)</div>
<p class="text-sm text-gray">Builds a <code>FormData</code> payload and POSTs to <code>/rss/php/handler.php</code>, returning JSON.</p>
<pre class="border rounded p-2 bg-accent-white text-sm"><code>// Example
const res = await _post(
{ name: 'Ada', roles: ['admin','editor'] },
'users',
'create'
);
// res → parsed JSON (or { ok:false, error:"..." } on failure)</code></pre>
</div>
<div>
<div class="fw-semibold">createFormData(data, target, func)</div>
<p class="text-sm text-gray">Converts plain objects/arrays into <code>FormData</code> and appends <code>target</code>/<code>function</code>.</p>
<pre class="border rounded p-2 bg-accent-white text-sm"><code>// Example
const fd = await createFormData({ tags: ['a','b'], avatar: file }, 'profile', 'update');</code></pre>
</div>
</div>
</div>
<!-- ====================================================================== -->
<!-- DOM -->
<!-- ====================================================================== -->
<section class="card p-3 stack-2 my-2">
<h3 class="text-lg fw-medium">DOM</h3>
<p class="text-sm text-muted">Small helpers to create elements and IDs.</p>
<div class="stack-2">
<div class="card p-3 stack-1">
<div class="fw-semibold">createEl(tag, classArr?, text?, dataAttrs?)</div>
<p class="text-sm text-gray">Create an element, add classes, text, and <code>data-*</code> attributes.</p>
<pre class="border rounded p-2 bg-accent-white text-sm"><code>// Example
const btn = createEl('button', ['btn','btn-md','btn-primary'], 'Save', { action: 'save' });
document.body.append(btn);</code></pre>
</div>
<div class="card p-3 stack-1">
<div class="fw-semibold">getRandomID()</div>
<p class="text-sm text-gray">Generates a unique id (uses <code>crypto.randomUUID()</code> if available).</p>
<pre class="border rounded p-2 bg-accent-white text-sm"><code>// Example
const id = getRandomID(); // "c1c0f33a-..." or base36 fallback</code></pre>
</div>
</div>
</section>
<!-- ====================================================================== -->
<!-- Alerts -->
<!-- ====================================================================== -->
<section class="card p-3 stack-2 my-2">
<h3 class="text-lg fw-medium">Alerts</h3>
<p class="text-sm text-muted">Create and remove framework-styled alerts using <code>.alert</code> and <code>.alert-{color}</code>.</p>
<div class="card p-3 stack-2">
<div class="fw-semibold">generateAlert(type, text, options?) → HTMLElement</div>
<p class="text-sm text-gray">
Types align with your color tokens: <code>primary</code>, <code>success</code>, <code>warning</code>, <code>danger</code>, <code>info</code>, etc.
</p>
<pre class="border rounded p-2 bg-accent-white text-sm"><code>// Create and insert
const alertEl = await generateAlert('warning', 'Heads up!', { withClose: true, dismissAfter: 4000 });
document.querySelector('#alertHost').append(alertEl);
// Common types
await generateAlert('success', 'Saved!');
await generateAlert('danger', 'Something went wrong', { role: 'alert' });</code></pre>
<div class="fw-semibold">removeAlert(scope?)</div>
<p class="text-sm text-gray">Remove all alerts in <code>scope</code> (default: <code>document</code>).</p>
<pre class="border rounded p-2 bg-accent-white text-sm"><code>// Example
removeAlert(); // or removeAlert(document.querySelector('#alertHost'));</code></pre>
</div>
</section>
Reference in New Issue View Git Blame Copy Permalink