Initial commit

Lts/Tools/THP-overview/thp.html

@@ -0,0 +1,64 @@
+<!doctype html>
+<html lang="en-US">
+  <head>
+    <title data-tr>Take Home Package - Overview</title>
+    <meta charset="utf-8">
+    <meta name="author" content="Mike Wille, ESZS, 2024-02-29">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <script src="lib/thp.js"></script>
+    <link href="lib/thp.css" rel="stylesheet" blocking rel="preload">
+    <script src="scripts/scripts.js" defer></script>
+  </head>
+  <body>
+    <header>
+      <div class="container container-row">
+        <span class="title">Take Home Package</span>
+        <img class="legatus" src="lib/legatus.png"/>
+        <img class="rme" src="lib/rheinmetall.png"/>
+      </div>      
+    </header>
+
+    <main>
+      <div class="floater">
+        <div class="container container-col">        
+          <span class="title m-a" data-tr>Overview</span>
+          <table id="table" class="stripe">
+            <thead>
+              <tr>
+                <th>scriptId</th>
+                <th data-tr>Script</th>
+                <th data-tr>Exercise</th>
+                <th data-tr>Created at</th>
+              </tr>
+            </thead>
+          </table>
+        </div>
+      </div>
+    </main>
+
+    <footer>
+      <em data-tr>Language</em>
+      <button id="changeLang_DE" class="button-img">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 3">
+          <rect id="black_stripe" width="5" height="3" y="0" x="0" fill="#000"/>
+          <rect id="red_stripe" width="5" height="2" y="1" x="0" fill="#D00"/>
+          <rect id="gold_stripe" width="5" height="1" y="2" x="0" fill="#FFCE00"/>
+        </svg>
+      </button>
+      <button id="changeLang_EN" class="button-img">
+        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1083 650">
+          <defs>
+            <polygon id="pt" points="-0.1624598481164531,0 0,-0.5 0.1624598481164531,0" transform="scale(0.0616)" fill="#FFF"/>
+            <g id="star"><use xlink:href="#pt" transform="rotate(-144)"/><use xlink:href="#pt" transform="rotate(-72)"/><use xlink:href="#pt"/><use xlink:href="#pt" transform="rotate(72)"/><use xlink:href="#pt" transform="rotate(144)"/></g>
+            <g id="s5"><use xlink:href="#star" x="-0.252"/><use xlink:href="#star" x="-0.126"/><use xlink:href="#star"/><use xlink:href="#star" x="0.126"/><use xlink:href="#star" x="0.252"/></g>
+            <g id="s6"><use xlink:href="#s5" x="-0.063"/><use xlink:href="#star" x="0.315"/></g>
+            <g id="x4"><use xlink:href="#s6"/><use xlink:href="#s5" y="0.054"/><use xlink:href="#s6" y="0.108"/><use xlink:href="#s5" y="0.162"/></g>
+            <g id="u"><use xlink:href="#x4" y="-0.216"/><use xlink:href="#x4"/><use xlink:href="#s6" y="0.216"/></g>
+            <rect id="stripe" width="1235" height="50" fill="#B22234"/>
+          </defs>
+          <rect width="1235" height="650" fill="#FFF"/><use xlink:href="#stripe"/><use xlink:href="#stripe" y="100"/><use xlink:href="#stripe" y="200"/><use xlink:href="#stripe" y="300"/><use xlink:href="#stripe" y="400"/><use xlink:href="#stripe" y="500"/><use xlink:href="#stripe" y="600"/><rect width="494" height="350" fill="#3C3B6E"/><use xlink:href="#u" transform="translate(247,175) scale(650)"/>
+        </svg>
+      </button>
+    </footer>
+  </body>
+</html>