ui/src/components/App.svelte

@@ -1,8 +1,11 @@
+<header>
+    Arbeitszeiten
+</header>
 <Nav {active} />
-
 <main>
     <svelte:component this={Route} {params} />
 </main>
+<footer><p>© Torsten Lücke 2021</p></footer>
 
 <script>
 	import Navaid from 'navaid';

ui/src/routes/Views.svelte

@@ -6,9 +6,12 @@
 	<title>{params.title}</title>
 </svelte:head>
 
-<h1>{params.title}</h1>
+<section id="list-records">
-
+    <header>
-<table>
+        <h1>{params.title}</h1>
+    </header>
+    <article>
+        <table>
             <thead>
             <tr>
                 <th>Zeitraum</th>
@@ -27,4 +30,6 @@
                 </tr>
             {/each}
             </tbody>
-</table>
+        </table>
+    </article>
+</section>

ui/src/routes/WorkingHours.svelte

@@ -13,10 +13,13 @@
     <title>{title}</title>
 </svelte:head>
 
-<h1>{title}</h1>
-
 {#if activeRecord === null}
-<table>
+    <section id="list-records">
+        <header>
+            <h1>{title}</h1>
+        </header>
+        <article>
+            <table>
                 <thead>
                 <tr>
                     <th>Datum</th>
@@ -36,10 +39,17 @@
                     </tr>
                 {/each}
                 </tbody>
-</table>
+            </table>
+        </article>
+    </section>
 {:else}
-<!--suppress HtmlUnknownTarget -->
+    <section id="edit-record">
-<form action="/working-hours" name="editRecord">
+        <header>
+            <h1>{title}</h1>
+        </header>
+        <article>
+            <!--suppress HtmlUnknownTarget -->
+            <form action="/working-hours" name="editRecord">
                 <fieldset name="record-data">
                     <div>
                         <label for="workingDay">Arbeitstag</label>
@@ -56,5 +66,7 @@
                     <button>Übernehmen <IconifyIcon icon={checkIcon} color="green" /></button>
                     <button>Abbrechen <IconifyIcon icon={xIcon} /></button>
                 </fieldset>
-</form>
+            </form>
+        </article>
+    </section>
 {/if}