AkurAI-Framework / site/frontend/components.html

Latest change 4052fe38094b95ffabeaa0959c653900e383f343 - feat: markdown engine + authentic framework site (landing/docs/changelog/components) by Ólafur Búi Ólafsson

{% include "header" %}
    <main class="container components">
      <header class="page-head">
        <span class="eyebrow">Component library</span>
        <h1>Components</h1>
        <p class="lede">The built-in UI primitives, by category. Everything here is plain
        server-rendered HTML + CSS — no framework runtime, no build step.</p>
      </header>

      <section class="comp-cat" id="buttons">
        <h2>Buttons</h2>
        <div class="comp-demo">
          <a class="btn btn-primary" href="#buttons">Primary</a>
          <a class="btn btn-secondary" href="#buttons">Secondary</a>
          <a class="btn btn-ghost" href="#buttons">Ghost</a>
          <a class="btn btn-primary btn-sm" href="#buttons">Small</a>
          <button class="btn btn-secondary" disabled>Disabled</button>
        </div>
      </section>

      <section class="comp-cat" id="forms">
        <h2>Form controls</h2>
        <div class="comp-demo form-grid">
          <label>Text input<input type="text" placeholder="Ada Lovelace" /></label>
          <label>Email<input type="email" placeholder="ada@example.com" /></label>
          <label>Password<input type="password" placeholder="••••••••" /></label>
          <label>Select<select><option>One</option><option>Two</option></select></label>
          <label class="span-2">Textarea<textarea rows="3" placeholder="Notes…"></textarea></label>
          <fieldset>
            <legend>Radio</legend>
            <label class="inline"><input type="radio" name="r" checked /> A</label>
            <label class="inline"><input type="radio" name="r" /> B</label>
          </fieldset>
          <div class="stack">
            <label class="inline"><input type="checkbox" checked /> Checkbox</label>
            <label>Range<input type="range" min="0" max="100" value="60" /></label>
          </div>
        </div>
      </section>

      <section class="comp-cat" id="cards">
        <h2>Cards</h2>
        <div class="comp-demo grid-3">
          {% for c in cards %}
          <div class="card">
            <h3>{{ c.title }}</h3>
            <p class="muted">{{ c.body }}</p>
          </div>
          {% endfor %}
        </div>
      </section>

      <section class="comp-cat" id="alerts">
        <h2>Alerts</h2>
        <div class="comp-demo stack">
          {% for a in alerts %}
          <div class="alert alert-{{ a.kind }}"><strong>{{ a.title }}</strong> <span>{{ a.text }}</span></div>
          {% endfor %}
        </div>
      </section>

      <section class="comp-cat" id="badges">
        <h2>Badges</h2>
        <div class="comp-demo">
          {% for b in badges %}<span class="badge badge-{{ b.kind }}">{{ b.label }}</span>{% endfor %}
        </div>
      </section>

      <section class="comp-cat" id="table">
        <h2>Data table</h2>
        <div class="comp-demo">
          <table class="table">
            <thead><tr>{% for col in table.columns %}<th>{{ col }}</th>{% endfor %}</tr></thead>
            <tbody>{% for row in table.rows %}<tr>{% for cell in row %}<td>{{ cell }}</td>{% endfor %}</tr>{% endfor %}</tbody>
          </table>
        </div>
      </section>

      <section class="comp-cat" id="disclosure">
        <h2>Disclosure</h2>
        <div class="comp-demo">
          <details><summary>What is a disclosure?</summary><p class="muted">A native expandable section — zero JavaScript.</p></details>
        </div>
      </section>
    </main>
{% include "footer" %}