AkurAI-Framework / crates/cli/assets/index.html

Latest change efd5eb833824dca5c86104004c11bc6d39ff1a72 - feat(template): pure-std SSR template engine + component showcase by Ólafur Búi Ólafsson

{% include "header" %}
    <main class="container">
      <section class="hero">
        <span class="eyebrow">{{ hero.eyebrow }}</span>
        <h1>{{ hero.heading }}</h1>
        <p class="lede">{{ hero.sub }}</p>
        <div class="btn-row">
          <a class="btn btn-primary" href="#components">{{ hero.cta }}</a>
          <a class="btn btn-secondary" href="#components">Secondary</a>
          <a class="btn btn-ghost" href="/api/_meta">View API</a>
        </div>
        <div id="health" class="status" aria-live="polite">checking server…</div>
      </section>

      <section class="stats">
        {% for s in stats %}
        <div class="stat">
          <div class="stat-value">{{ s.value }}</div>
          <div class="stat-label">{{ s.label }}</div>
        </div>
        {% endfor %}
      </section>

      <section class="alerts">
        {% for a in alerts %}
        <div class="alert alert-{{ a.kind }}">
          <strong>{{ a.title }}</strong> <span>{{ a.text }}</span>
        </div>
        {% endfor %}
      </section>

      <section id="components" class="grid-2">
        <div class="card">
          <h2>Create account</h2>
          <p class="card-sub">Every common form control, styled.</p>
          <form class="form" id="signup">
            <label>Name
              <input type="text" name="name" placeholder="Ada Lovelace" />
            </label>
            <label>Email
              <input type="email" name="email" placeholder="ada@example.com" />
            </label>
            <label>Password
              <input type="password" name="password" placeholder="••••••••" />
            </label>
            <label>Plan
              <select name="plan">
                {% for p in plans %}<option>{{ p }}</option>{% endfor %}
              </select>
            </label>
            <label>About
              <textarea name="about" rows="3" placeholder="Tell us a little…"></textarea>
            </label>
            <fieldset>
              <legend>Notifications</legend>
              <label class="inline"><input type="radio" name="notify" checked /> Email</label>
              <label class="inline"><input type="radio" name="notify" /> SMS</label>
              <label class="inline"><input type="radio" name="notify" /> None</label>
            </fieldset>
            <label class="inline"><input type="checkbox" checked /> I agree to the terms</label>
            <label>Volume
              <input type="range" min="0" max="100" value="60" />
            </label>
            <div class="btn-row">
              <button class="btn btn-primary" type="submit">Create account</button>
              <button class="btn btn-ghost" type="reset">Reset</button>
            </div>
          </form>
        </div>

        <div class="card">
          <h2>Build status</h2>
          <p class="card-sub">Badges, a data table, and a disclosure.</p>
          <div class="badges">
            {% for b in badges %}<span class="badge badge-{{ b.kind }}">{{ b.label }}</span>{% endfor %}
          </div>
          <table class="table">
            <thead>
              <tr>{% for c in table.columns %}<th>{{ c }}</th>{% endfor %}</tr>
            </thead>
            <tbody>
              {% for row in table.rows %}
              <tr>{% for cell in row %}<td>{{ cell }}</td>{% endfor %}</tr>
              {% endfor %}
            </tbody>
          </table>
          <details>
            <summary>How is this page built?</summary>
            <p>One template, rendered server-side against a JSON context by the
            pure-Rust AkurAI engine — loops, conditionals, includes, no JS build.</p>
          </details>
          <div id="toast" class="toast" hidden>Account created (demo) ✓</div>
        </div>
      </section>
    </main>
{% include "footer" %}