From e556883972a699f913c9cb8445169d83b1f7e503 Mon Sep 17 00:00:00 2001
From: Patryk Hegenberg <hegenberg@tixeltec.com>
Date: Mon, 4 Dec 2023 13:54:14 +0100
Subject: [PATCH] frontend: revise website to display form in a table

---
 templates/footer.html      |   2 +-
 templates/header.html      |   2 +-
 templates/main.html        |  22 ++--
 templates/monsterForm.html | 215 +++++++++++++++++--------------------
 4 files changed, 109 insertions(+), 132 deletions(-)

diff --git a/templates/footer.html b/templates/footer.html
index 696f204..ad776a9 100644
--- a/templates/footer.html
+++ b/templates/footer.html
@@ -1,7 +1,7 @@
 {{ define "footer" }}
 <footer class="footer footer-center p-4 bg-base-300 text-base-content">
   <aside>
-    <p class="text-gray-600">&copy; {{.Year}} Dungeons and Dragons. Alle Rechte vorbehalten.</p>
+    <p class="text-gray-600">&copy; {{.Year}} Dungeons and Dragons Monster Generator. Alle Rechte vorbehalten.</p>
   </aside>
 </footer>
 {{ end }}
diff --git a/templates/header.html b/templates/header.html
index ac4d34b..a2c91b3 100644
--- a/templates/header.html
+++ b/templates/header.html
@@ -8,7 +8,7 @@
   <div id="banner" class="banner bg-gray-800 p-8 text-white">
     <img src="/images/images/banner.jpg" alt="Dungeons-and-Dragons-Banner">
     <a href="https://dnd.wizards.com/resources/press-assets">image credits</a>
-    <h1 class="centered text-4xl font-bold">Dungeons and Dragons</h1>
+    <h1 class="centered text-4xl font-bold">Dungeons and Dragons Monster Generator</h1>
   </div>
 </header>
 {{ end }}
diff --git a/templates/main.html b/templates/main.html
index 460f17f..7ab043c 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -2,23 +2,17 @@
 <div class="card-body form-box w-4/5 h-full">
   <h2 class="card-title">Monster Form</h2>
   <form action="/submit" method="post" class="grid grid-columns-5 space-y-4 grid place-items-center">
-    <div class="grid grid-cols-2">
-      <label for="filename">Filename:</label>
-      <input type="text" name="filename" required placeholder="Dateiname"
-        class="input input-bordered w-full max-w-xs"><br>
-    </div>
+    <table>
+      <tr>
+        <td><label for="filename">Filename:</label></td>
+        <td><input type="text" name="filename" required placeholder="Dateiname"
+            class="input input-bordered w-full max-w-xs"><br></td>
+      </tr>
+    </table>
     <div class="grid grid-cols-1">
       <button type="button" hx-post="/addMonster" class="btn">Add Monster</button>
     </div>
-    <div class="collapse bg-base-200">
-      <input type="checkbox" />
-      <div class="collapse-title text-xl font-medium">
-        Monster
-      </div>
-      <div class="collapse-content">
-        {{ template "monsterform" . }}
-      </div>
-    </div>
+    {{ template "monsterform" . }}
     <input type="hidden" name="filename" value="{{.Filename}}">
     <div class="card-actions justify-end">
       <input type="submit" value="Submit" class="btn">
diff --git a/templates/monsterForm.html b/templates/monsterForm.html
index daf4951..9720971 100644
--- a/templates/monsterForm.html
+++ b/templates/monsterForm.html
@@ -1,118 +1,101 @@
 {{ define "monsterform" }}
-<div class="grid grid-cols-2">
-  <label for="name">Monster Name:</label>
-  <input type="text" name="name" required placeholder="Type here" class="input input-bordered w-full max-w-xs"><br>
-</div>
-<div class="grid grid-cols-2">
-  <label for="source">Monster Source:</label>
-  <input type="text" name="source" required class="input input-bordered w-full max-w-xs"><br>
-</div>
-<div class="grid grid-cols-2">
-  <label for="size">Size:</label>
-  <input type="text" name="size" required class="input input-bordered w-full max-w-xs"><br>
-</div>
-<div class="grid grid-cols-2">
-  <label for="type">Type:</label>
-  <input type="text" name="type" required class="input input-bordered w-full max-w-xs"><br>
-</div>
-<div class="grid grid-cols-2">
-  <label for="alignment">Alignment:</label>
-  <input type="text" name="alignment" required class="input input-bordered w-full max-w-xs"><br>
-</div>
-<div class="grid grid-cols-2">
-  <label for="ac">AC:</label>
-  <input type="number" name="ac" required class="input input-bordered w-full max-w-xs"><br>
-</div>
-<div class="grid grid-cols-2">
-  <label for="acFrom">AC From:</label>
-  <input type="text" name="acFrom" required class="input input-bordered w-full max-w-xs"><br>
-</div>
-<div class="grid grid-cols-2">
-  <label for="hpAverage">HP Average:</label>
-  <input type="number" name="hpAverage" required class="input input-bordered w-full max-w-xs"><br>
-</div>
-<div class="grid grid-cols-2">
-  <label for="hpFormula">HP Formula:</label>
-  <input type="text" name="hpFormula" required class="input input-bordered w-full max-w-xs"><br>
-</div>
-<div class="grid grid-cols-2">
-  <label for="speed">Speed:</label>
-  <input type="number" name="speed" required class="input input-bordered w-full max-w-xs"><br>
-</div>
-<div class="grid grid-cols-2">
-  <label for="str">Str:</label>
-  <input type="number" name="str" required class="input input-bordered w-full max-w-xs"><br>
-</div>
-<div class="grid grid-cols-2">
-  <label for="dex">Dex:</label>
-  <input type="number" name="dex" required class="input input-bordered w-full max-w-xs"><br>
-</div>
-<div class="grid grid-cols-2">
-  <label for="con">Con:</label>
-  <input type="number" name="con" required class="input input-bordered w-full max-w-xs"><br>
-</div>
-<div class="grid grid-cols-2">
-  <label for="int">Int:</label>
-  <input type="number" name="int" required class="input input-bordered w-full max-w-xs"><br>
-</div>
-<div class="grid grid-cols-2">
-  <label for="wis">Wis:</label>
-  <input type="number" name="wis" required class="input input-bordered w-full max-w-xs"><br>
-</div>
-<div class="grid grid-cols-2">
-  <label for="cha">Cha:</label>
-  <input type="number" name="cha" required class="input input-bordered w-full max-w-xs"><br>
-</div>
-<div class="grid grid-cols-2">
-  <label for="saveDex">Save Dex:</label>
-  <input type="text" name="saveDex" required class="input input-bordered w-full max-w-xs"><br>
-</div>
-<div class="grid grid-cols-2">
-  <label for="saveCon">Save Con:</label>
-  <input type="text" name="saveCon" required class="input input-bordered w-full max-w-xs"><br>
-</div>
-<div class="grid grid-cols-2">
-  <label for="saveWis">Save Wis:</label>
-  <input type="text" name="saveWis" required class="input input-bordered w-full max-w-xs"><br>
-</div>
-<div class="grid grid-cols-2">
-  <label for="perception">Perception:</label>
-  <input type="text" name="perception" required class="input input-bordered w-full max-w-xs"><br>
-</div>
-<div class="grid grid-cols-2">
-  <label for="stealth">Stealth:</label>
-  <input type="text" name="stealth" required class="input input-bordered w-full max-w-xs"><br>
-</div>
-<div class="grid grid-cols-2">
-  <label for="damageRes">Damage Resistances:</label>
-  <input type="text" name="damageRes" required class="input input-bordered w-full max-w-xs"><br>
-</div>
-<div class="grid grid-cols-2">
-  <label for="senses">Senses:</label>
-  <input type="text" name="senses" required class="input input-bordered w-full max-w-xs"><br>
-</div>
-<div class="grid grid-cols-2">
-  <label for="languages">Languages:</label>
-  <input type="text" name="languages" required class="input input-bordered w-full max-w-xs"><br>
-</div>
-<div class="grid grid-cols-2">
-  <label for="cr">CR:</label>
-  <input type="text" name="cr" required class="input input-bordered w-full max-w-xs"><br>
-</div>
-<div class="grid grid-cols-2">
-  <label for="traitName">Trait Name:</label>
-  <input type="text" name="traitName" required class="input input-bordered w-full max-w-xs"><br>
-</div>
-<div class="grid grid-cols-2">
-  <label for="traitEntry">Trait Entry:</label>
-  <input type="text" name="traitEntry" required class="input input-bordered w-full max-w-xs"><br>
-</div>
-<div class="grid grid-cols-2">
-  <label for="actionName">Action Name:</label>
-  <input type="text" name="actionName" required class="input input-bordered w-full max-w-xs"><br>
-</div>
-<div class="grid grid-cols-2">
-  <label for="actionEntry">Action Entry:</label>
-  <input type="text" name="actionEntry" required class="input input-bordered w-full max-w-xs"><br>
-</div>
+<table>
+  <tr>
+    <td><label for="name">Monster Name:</label></td>
+    <td><input type="text" name="name" required placeholder="Type here"
+        class="input input-bordered w-full max-w-xs"><br></td>
+    <td><label for="source">Monster Source:</label></td>
+    <td><input type="text" name="source" required class="input input-bordered w-full max-w-xs"><br></td>
+  </tr>
+  <tr>
+    <td><label for="size">Size:</label></td>
+    <td><input type="text" name="size" required class="input input-bordered w-full max-w-xs"><br></td>
+    <td><label for="type">Type:</label></td>
+    <td><input type="text" name="type" required class="input input-bordered w-full max-w-xs"><br></td>
+  </tr>
+  <tr>
+    <td><label for="alignment">Alignment:</label></td>
+    <td><input type="text" name="alignment" required class="input input-bordered w-full max-w-xs"><br></td>
+  </tr>
+  <tr>
+    <td><label for="ac">AC:</label></td>
+    <td><input type="number" name="ac" required class="input input-bordered w-full max-w-xs"><br></td>
+    <td><label for="acFrom">AC From:</label></td>
+    <td><input type="text" name="acFrom" required class="input input-bordered w-full max-w-xs"><br></td>
+  </tr>
+  <tr>
+    <td><label for="hpAverage">HP Average:</label></td>
+    <td><input type="number" name="hpAverage" required class="input input-bordered w-full max-w-xs"><br></td>
+    <td><label for="hpFormula">HP Formula:</label></td>
+    <td><input type="text" name="hpFormula" required class="input input-bordered w-full max-w-xs"><br></td>
+  </tr>
+  <tr>
+    <td><label for="speed">Speed:</label></td>
+    <td><input type="number" name="speed" required class="input input-bordered w-full max-w-xs"><br></td>
+  </tr>
+  <tr>
+    <td><label for="str">Str:</label></td>
+    <td><input type="number" name="str" required class="input input-bordered w-full max-w-xs"><br></td>
+    <td><label for="dex">Dex:</label></td>
+    <td><input type="number" name="dex" required class="input input-bordered w-full max-w-xs"><br></td>
+  </tr>
+  <tr>
+    <td><label for="con">Con:</label></td>
+    <td><input type="number" name="con" required class="input input-bordered w-full max-w-xs"><br></td>
+    <td><label for="int">Int:</label></td>
+    <td><input type="number" name="int" required class="input input-bordered w-full max-w-xs"><br></td>
+  </tr>
+  <tr>
+    <td><label for="wis">Wis:</label></td>
+    <td><input type="number" name="wis" required class="input input-bordered w-full max-w-xs"><br></td>
+    <td><label for="cha">Cha:</label></td>
+    <td><input type="number" name="cha" required class="input input-bordered w-full max-w-xs"><br></td>
+  </tr>
+  <tr>
+    <td><label for="saveDex">Save Dex:</label></td>
+    <td><input type="text" name="saveDex" required class="input input-bordered w-full max-w-xs"><br></td>
+    <td><label for="saveCon">Save Con:</label></td>
+    <td><input type="text" name="saveCon" required class="input input-bordered w-full max-w-xs"><br></td>
+  </tr>
+  <tr>
+    <td><label for="saveWis">Save Wis:</label></td>
+    <td><input type="text" name="saveWis" required class="input input-bordered w-full max-w-xs"><br></td>
+  </tr>
+  <tr>
+    <td><label for="perception">Perception:</label></td>
+    <td><input type="text" name="perception" required class="input input-bordered w-full max-w-xs"><br></td>
+  </tr>
+  <tr>
+    <td><label for="stealth">Stealth:</label></td>
+    <td><input type="text" name="stealth" required class="input input-bordered w-full max-w-xs"><br></td>
+  </tr>
+  <tr>
+    <td><label for="damageRes">Damage Resistances:</label></td>
+    <td><input type="text" name="damageRes" required class="input input-bordered w-full max-w-xs"><br></td>
+  </tr>
+  <tr>
+    <td><label for="senses">Senses:</label></td>
+    <td><input type="text" name="senses" required class="input input-bordered w-full max-w-xs"><br></td>
+  </tr>
+  <tr>
+    <td><label for="languages">Languages:</label></td>
+    <td><input type="text" name="languages" required class="input input-bordered w-full max-w-xs"><br></td>
+  </tr>
+  <tr>
+    <td><label for="cr">CR:</label></td>
+    <td><input type="text" name="cr" required class="input input-bordered w-full max-w-xs"><br></td>
+  </tr>
+  <tr>
+    <td><label for="traitName">Trait Name:</label></td>
+    <td><input type="text" name="traitName" required class="input input-bordered w-full max-w-xs"><br></td>
+    <td><label for="traitEntry">Trait Entry:</label></td>
+    <td><input type="text" name="traitEntry" required class="input input-bordered w-full max-w-xs"><br></td>
+  </tr>
+  <tr>
+    <td><label for="actionName">Action Name:</label></td>
+    <td><input type="text" name="actionName" required class="input input-bordered w-full max-w-xs"><br></td>
+    <td><label for="actionEntry">Action Entry:</label></td>
+    <td><input type="text" name="actionEntry" required class="input input-bordered w-full max-w-xs"><br></td>
+  </tr>
+</table>
 {{end}}