Minor styling adjustments

HHMagnus · HHMagnus · commit 78e915ce3124 · 2026-01-22T20:24:11.000+01:00
diff --git a/example/src/main/resources/templates/index.html b/example/src/main/resources/templates/index.html
@@ -1,35 +1,28 @@
 <!DOCTYPE html>
 <html xmlns:th="http://www.thymeleaf.org" lang="en">
 <head>
-    <title>Import / Export Example</title>
+    <title>Cloner example</title>
     <style>
         body { font-family: sans-serif; margin: 0; }
-        header {
-            padding: 10px;
-            background: #f5f5f5;
-            display: flex;
-            gap: 10px;
-            border-bottom: 1px solid #ddd;
-        }
-        main { padding: 20px; }
-        ul { padding-left: 20px; }
+        main { padding: 5px; }
     </style>
 </head>
 <body>
 
-<header>
-    <form th:action="@{/import}" method="post" enctype="multipart/form-data">
-        <input type="file" name="file" required />
-        <button type="submit">Import</button>
-    </form>
+<main>
+    <h1>Cloner example</h1>
+    <div style="display: flex; gap: 10px; align-items: center;">
+        <p>Modify loaded data: </p>
+        <form th:action="@{/insert-random}" method="post">
+            <button type="submit">Insert Random Data</button>
+        </form>
 
-    <form th:action="@{/insert-random}" method="post">
-        <button type="submit">Insert Random</button>
-    </form>
-</header>
+        <form th:action="@{/clear}" method="post">
+            <button type="submit">Clear all</button>
+        </form>
+    </div>
 
-<main>
-    <h2>Elements</h2>
+    <h3>Elements</h3>
 
     <form th:action="@{/export}" method="post">
 
@@ -47,9 +40,10 @@ <h2>Elements</h2>
             </thead>
 
             <tbody>
-            <tr th:each="el : ${elements}">
+            <tr th:each="el, elStat : ${elements}">
                 <td>
-                    <input type="checkbox" name="selectedIds" th:value="${el.id}" />
+                    <input type="checkbox" name="selectedIds" th:value="${el.id}" th:if="${elStat.index == 0}" required />
+                    <input type="checkbox" name="selectedIds" th:value="${el.id}" th:unless="${elStat.index == 0}" />
                 </td>
                 <td th:text="${el.name}"></td>
                 <td>
@@ -59,7 +53,7 @@ <h2>Elements</h2>
                 <td th:text="${#temporals.format(el.date, 'yyyy-MM-dd')}"></td>
                 <td th:text="${#temporals.format(el.dateTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
                 <td>
-                    <span th:each="sub,iterStat : ${el.elements}">
+                    <span th:each="sub, iterStat : ${el.elements}">
                         <span th:text="${sub.sample}"></span>
                         (<input type="checkbox" disabled="disabled" th:checked="${sub.tested}" />)
                         <span th:if="${!iterStat.last}">, </span>
@@ -76,8 +70,16 @@ <h2>Elements</h2>
 
     <br />
 
-    <form th:action="@{/clear}" method="post">
-        <button type="submit">Clear all</button>
+    <hr />
+
+    <br />
+
+    <form th:action="@{/import}" method="post" enctype="multipart/form-data">
+        <label for="file">After exporting from a different environment, the entities can be imported here:</label>
+        <br />
+        <br />
+        <input id="file" type="file" name="file" required />
+        <button type="submit">Import</button>
     </form>
 </main>
 
