eddie/corp_base
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
f0c97861641fd5fd9d43a2d5e9d69357f4fd6f9e
corp_base/rss/php/templates/index.php

697 lines
34 KiB
PHP
Raw Normal View History

Init
2025-10-11 00:21:00 +02:00
<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 Copy Permalink