feat: improve structure of first html pages

html-frontend/templates/index.gohtml

@@ -1,18 +1,29 @@
 {{ define "title" }}
-    Go-Drink - Home
+Go-Drink - Home
 {{end}}
 {{define "content"}}
-    <section>
-        <article>
-            <p>Go-Drink is the official Drink management of Port39!</p>
-            <h2>Login</h2>
-            <form up-submit action="/login/password" method="post">
-                <label for="username">username</label>
-                <input name="username"></input>
+<section>
+    <hgroup>
+        <h1>
+            Go-Drink - stay hydrated.
+        </h1>
+        <p>Go-Drink is the official Drink management of Port39!</p>
+    </hgroup>
+</section>
+<section>
+    <form up-submit action="/login/password" method="post">
+        <fieldset style="display: flex; gap: var(--length-2)">
+            <legend>Login</legend>
+            <div>
+                <label for="username">user name</label>
+                <input type="text" name="username"></input>
+            </div>
+            <div>
                 <label for="password">password</label>
-                <input name="password"></input>
-                <input type="submit">Login</input>
-            </form>
-        </article>
-    </section>
+                <input type="password" name="password"></input>
+            </div>
+            <button type="submit">Login</input>
+        </fieldset>
+    </form>
+</section>
 {{end}}

html-frontend/templates/items.gohtml

@@ -1,25 +1,31 @@
 {{ define "title" }}
-    GoDrink - Items
+GoDrink - Items
 {{end}}
 {{define "content"}}
-    <section>
-        <article>
-            <p>These are the items.</p>
-        <form up-submit method="post" action="/items/add">
+<section>
+    <h2>Add an item to the fridge</h2>
+    <form up-submit method="post" action="/items/add">
         <fieldset>
-        <label for="name">name</label>
-        <input name="name"></input>
-        <label for="price">price</label>
-        <input name="price"></input>
-        <label for="amount">amount</label>
-        <input name="amount"></input>
-        <button type="submit">Submit</button>
+            <label for="name">name</label>
+            <input name="name" type="text" />
+            <label for="price">price</label>
+            <input name="price" type="number" step="0.01" />
+            <label for="amount">amount</label>
+            <input name="amount" type="number" />
         </fieldset>
-        </form>
+        <button type="submit">Add item</button>
+    </form>
+</section>
+<section>
+    <h2>Current items</h2>
+    <p>These are the items currently stocked in the fridge.</p>
+    <ul>
         {{ range . }}
-        {{ .Name }}<br/>
-        {{ .Price }}
+        <li>
+            <p>{{ .Name }}</p>
+            <p>{{ .Price }}</p>
+        </li>
         {{ end }}
-        </article>
-    </section>
+    </ul>
+</section>
 {{end}}