AkurAI-Framework / site/frontend/guestbook.html

Latest change 69a2606c7ff3e89d2f50090fa59a15f14171a37a - feat: HTTP request bodies + form actions (guestbook demo, progressive enhancement) by Ólafur Búi Ólafsson

{% include "header" %}
    <main class="container">
      <header class="page-head">
        <span class="eyebrow">Form actions demo</span>
        <h1>Guestbook</h1>
        <p class="lede">A plain HTML <code>&lt;form method="post"&gt;</code> that the server
        validates, stores, and redirects back from (Post/Redirect/Get) — all server-side, and
        it works with JavaScript disabled. Entries are in-memory and reset on restart;
        durable storage in the embedded database is the next slice.</p>
      </header>

      {% if error %}<div class="alert alert-danger" style="margin-bottom:18px"><strong>{{ error }}</strong></div>{% endif %}

      <form method="post" action="/guestbook" class="card stack" style="margin-bottom:28px">
        <label>Name<input type="text" name="name" value="{{ form_name }}" placeholder="Ada Lovelace" required /></label>
        <label>Message<textarea name="message" rows="3" placeholder="Say hello…" required>{{ form_message }}</textarea></label>
        <div><button class="btn btn-primary" type="submit">Sign the guestbook</button></div>
      </form>

      <h2 class="comp-group" id="g-entries">{{ count }} {% if count %}signature(s){% else %}signatures yet{% endif %}</h2>
      <div class="stack">
        {% for e in entries %}
        <article class="card">
          <strong>{{ e.name }}</strong>
          <p class="muted" style="margin:5px 0 0">{{ e.message }}</p>
        </article>
        {% endfor %}
      </div>
    </main>
{% include "footer" %}