rewritten after codex recommendations

templates/create.html

@@ -1,35 +1,23 @@
 {% extends "common.html" %}
-
-{% block headandmenu %}
-<div class="header">
-    <div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed">
-        <a class="pure-menu-heading" href="">Flowers</a>
-
-    </div>
-</div>
-{% endblock headandmenu %}
-
+{% block title %}Create a vault · Flowers{% endblock %}
+{% block menuoptions %}<a class="text-link" href="{{ url_for('flower_vase.index') }}">Sign in</a>{% endblock %}
 {% block content %}
-<div class="splash-container">
-    <div class="splash">
-        <form class="pure-form pure-form-aligned" action="{{ url_for('flower_vase.create') }}" method="post">
-            <fieldset>
-                <div class="pure-control-group">
-                    <input maxlength="32" name="name" type="text" placeholder="make up your username">
-                </div>
-
-                <div class="pure-control-group">
-                    <input maxlength="10" name="password" type="password" placeholder="make up you password, the longer the better">
-                </div>
-
-                <div class="pure-controls">
-                    <button type="submit" class="pure-button pure-button-primary">Create Vase</button>
-                </div>
-            </fieldset>
-        </form>
-        {{ message }}
-
-    </div>
-</div>
-
-{% endblock content %}
+<section class="auth-layout">
+  <div class="intro">
+    <p class="eyebrow">A vase of your own</p>
+    <h1>Create a vault.</h1>
+    <p>This uses the existing Flowers database structure so it remains readable by compatible installations.</p>
+  </div>
+  <form class="card form-card" action="{{ url_for('flower_vase.create') }}" method="post">
+    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
+    <h2>New vault</h2>
+    {% if message %}<p class="field-error">{{ message }}</p>{% endif %}
+    <label for="name">Username</label>
+    <input maxlength="31" id="name" name="name" type="text" pattern="[A-Za-z0-9_]+" autocomplete="username" required>
+    <label for="password">Password</label>
+    <input maxlength="43" id="password" name="password" type="password" pattern="[A-Za-z0-9_+/-]+" autocomplete="new-password" required>
+    <p class="field-help">Use Base64-compatible characters for legacy encryption compatibility.</p>
+    <button class="button primary" type="submit">Create vault</button>
+  </form>
+</section>
+{% endblock %}