feat: add initial i18n tags

src/index.html

@@ -14,12 +14,12 @@
 
 <div class="navigation-sticky">
     <a href="https://notfellchen.org">
-        <b>zurück zur Homepage</b>
+        <b data-i18n-key="back-to-home">zurück zur Homepage</b>
     </a>
 </div>
 
 <div class="content">
-    <h1>Käfigrechner</h1>
+    <h1 data-i18n-key="app-name">Käfigrechner</h1>
     <div class="container-form">
         <div class="cards">
             <div class="card" id="card-SavicSuiteRoyaleXL">
@@ -64,15 +64,15 @@
                 <label for="form-cage-measurements">Käfigmaße</label>
                 <form id="form-cage-measurements" class="form-measurements">
                     <div class="input-measurement">
-                        <label for="width">Breite (cm)</label>
+                        <label for="width" data-i18n-key="width-cm">Breite (cm)</label>
                         <input class="measurement" type="number" id="width">
                     </div>
                     <div class="input-measurement">
-                        <label for="depth">Tiefe (cm)</label>
+                        <label for="depth" data-i18n-key="depth-cm">Tiefe (cm)</label>
                         <input class="measurement" type="number" id="depth">
                     </div>
                     <div class="input-measurement">
-                        <label for="height">Höhe (cm)</label>
+                        <label for="height" data-i18n-key="height-cm">Höhe (cm)</label>
                         <input class="measurement" type="number" id="height">
                     </div>
                 </form>
@@ -82,10 +82,10 @@
 
     <div class="container-inputs">
         <div class="input-element">
-            <label for="numFullFloors">Vollebenen</label>
+            <label for="numFullFloors" data-i18n-key="full-floors">Vollebenen</label>
             <div class="tooltip">
                 <svg class="text-grey-dark" width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor"><path d="M9.00026 12.6C9.00026 12.6 9.00026 12.1224 9.00026 11.5333V8.86666C9.00026 8.57211 8.76148 8.33333 8.46693 8.33333H7.93359" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8.73346 5.26666C8.58619 5.26666 8.4668 5.38605 8.4668 5.53333C8.4668 5.68061 8.58619 5.8 8.73346 5.8C8.88074 5.8 9.00013 5.68061 9.00013 5.53333C9.00013 5.38605 8.88074 5.26666 8.73346 5.26666V5.26666" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
-                <span class="tooltiptext">Als Vollebenen zählen alle Ebenen die größer als 0.5m² sind, inklusive des Käfigbodens.</span>
+                <span class="tooltiptext" data-i18n-key="full-floors-tooltip">Als Vollebenen zählen alle Ebenen die größer als 0.5m² sind, inklusive des Käfigbodens.</span>
             </div>
             <div class="ncontainer">
                 <div class="input-group">
@@ -98,7 +98,7 @@
 
         <div class="input-element">
             <div class="slidecontainer">
-                <label for="numRats" id="labelNumRats">Anzahl an Ratten ?</label>
+                <label for="numRats" id="labelNumRats" data-i18n-key="number-of-rats">Anzahl an Ratten ?</label>
                 <input type="range" min="3" max="15" value="4" class="slider" id="numRats">
             </div>
         </div>