prepare under twelve

css/style.css

@@ -1876,6 +1876,33 @@ form label {
   opacity: 0;
 }
 
+.undertwelve > input {
+  text-align: center;
+  padding: 0px;
+  height: 40px;
+  width: 40px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -o-appearance: none;
+  appearance: none;
+  border: 2px solid #34495E;
+  border-radius: 4px;
+  outline: none;
+  transition-duration: 0.3s;
+  background-color: #ffffff;
+  cursor: pointer;
+}
+
+.undertwelve > input:checked {
+  border: 2px solid #34495E;
+  background-color: #F14E95;
+}
+
+.undertwelve > input:active {
+  border: 3px solid #34495E;
+}
+
+
 .overnight {
   display: table; 
   text-align: center;

index.html

@@ -119,29 +119,49 @@
 								<div class="col-md-3 col-sm-3">
 									<div class="form-group">
 										<label for="firstname" class="sr-only">Vorname</label>
-										<input type="firstname" class="form-control js-form-input" id="firstname" data-i18n="firstname" data-i18n-attr="placeholder"
+										<input type="firstname" class="form-control js-form-input" id="firstname" data-i18n="firstname"
-											placeholder="Vorname">
+											data-i18n-attr="placeholder" placeholder="Vorname">
 									</div>
 								</div>
 								<div class="col-md-3 col-sm-3">
 									<div class="form-group">
 										<label for="lastname" class="sr-only">Nachname</label>
-										<input type="lastname" class="form-control js-form-input" id="lastname" data-i18n="lastname" data-i18n-attr="placeholder"
+										<input type="lastname" class="form-control js-form-input" id="lastname" data-i18n="lastname"
-											placeholder="Nachname">
+											data-i18n-attr="placeholder" placeholder="Nachname">
 									</div>
 								</div>
 								<div class="col-md-3 col-sm-3">
 									<div class="form-group">
 										<label for="tel" class="sr-only">Telefonnummer</label>
-										<input type="telephon" class="form-control js-form-input" id="tel" data-i18n="telephone_number" data-i18n-attr="placeholder"
+										<input type="telephon" class="form-control js-form-input" id="tel" data-i18n="telephone_number"
-											placeholder="Telefonnummer">
+											data-i18n-attr="placeholder" placeholder="Telefonnummer">
 									</div>
 								</div>
 								<div class="col-md-3 col-sm-3">
 									<div class="form-group">
 										<label for="email" class="sr-only">E-Mail Addresse</label>
-										<input type="email" class="form-control js-form-input" id="email" data-i18n="E-Mail" data-i18n-attr="placeholder"
+										<input type="email" class="form-control js-form-input" id="email" data-i18n="E-Mail"
-											placeholder="E-Mail">
+											data-i18n-attr="placeholder" placeholder="E-Mail">
+									</div>
+								</div>
+							</div>
+							<div style="padding-top: 20px;">
+								<div class="col-md-5 col-sm-6">
+									<div class="form-group">
+										<label for="firstname" class="sr-only">Vorname</label>
+										<input type="firstname" class="form-control js-form-input" id="firstname" placeholder="Vorname">
+									</div>
+								</div>
+								<div class="col-md-5 col-sm-6">
+									<div class="form-group">
+										<label for="lastname" class="sr-only">Nachname</label>
+										<input type="lastname" class="form-control js-form-input" id="lastname" placeholder="Nachname">
+									</div>
+								</div>
+								<div class="col-md-2 col-sm-2">
+									<div class="form-group undertwelve">
+										<label for="undertwelve">Unter 12 Jahre?</label>
+										<input class="js-undertwelve" type="checkbox" name="undertwelve" checked>
 									</div>
 								</div>
 							</div>

js/main.js

@@ -226,6 +226,8 @@
 			inputElement.classList.add('form-control');
 			inputElement.classList.add('js-form-input');
 			inputElement.setAttribute("id","firstname");
+			inputElement.setAttribute("data-i18n","firstname");
+			inputElement.setAttribute("data-i18n-attr","placeholder");
 			let firstname_placeholder = await translator.getTranslationByKey(document.documentElement.lang,"firstname");
 			inputElement.setAttribute("placeholder", firstname_placeholder);
 			formGroupDiv.appendChild(inputElement);
@@ -253,6 +255,8 @@
 			firstNameInputElement.classList.add('form-control');
 			firstNameInputElement.classList.add('js-form-input');
 			firstNameInputElement.setAttribute("id","lastname");
+			firstNameInputElement.setAttribute("data-i18n","lastname");
+			firstNameInputElement.setAttribute("data-i18n-attr","placeholder");
 			let lastname_placeholder = await translator.getTranslationByKey(document.documentElement.lang,"lastname");
 			firstNameInputElement.setAttribute("placeholder", lastname_placeholder);
 			lastnameFormGroupDiv.appendChild(firstNameInputElement);
@@ -324,13 +328,11 @@
 
 			if(document.documentElement.lang == "de")
 			{
-				console.log("Load hr!");
 				translator.load("hr");
 				$(".js-flag-image").attr("srcset","flags/4x3/de.svg");
 				$(".js-flag-image").attr("src","flags/4x3/de.svg");
 			} else
 			{
-				console.log("Load de!");
 				translator.load("de");
 				$(".js-flag-image").attr("srcset","flags/4x3/hr.svg");
 				$(".js-flag-image").attr("src","flags/4x3/hr.svg");
@@ -592,6 +594,8 @@ document.getElementById("js-submitbtn").addEventListener("click", async function
 	  if (!this._options.languages.includes(lang)) {
 		return;
 	  }
+
+	  this._elements = document.querySelectorAll("[data-i18n]");
 	  
 	  document.documentElement.lang = lang;
 
@@ -662,7 +666,7 @@ document.getElementById("js-submitbtn").addEventListener("click", async function
 		  });
 		}
 	  };
-  
+	  
 	  this._elements.forEach(replace);
 	}
   
@@ -695,8 +699,6 @@ else {
 	$(".js-flag-image").attr("src","flags/4x3/de.svg");
 }
 
-  
-
   var totalFieldCount = 0;