2024-07-18 17:51:24 +00:00
<!DOCTYPE html>
2024-07-21 20:23:54 +00:00
< html lang = "en" xmlns = "http://www.w3.org/1999/html" xmlns = "http://www.w3.org/1999/html" >
2024-07-18 17:51:24 +00:00
< head >
< meta charset = "UTF-8" >
2024-07-21 09:36:05 +00:00
< title > Käfigrechner< / title >
2024-07-18 17:51:24 +00:00
< link rel = "stylesheet" href = "assets/css/style.css" >
< script src = "assets/calculator.js" > < / script >
2024-07-21 21:25:22 +00:00
< link rel = "apple-touch-icon" sizes = "180x180" href = "assets/favicon/apple-touch-icon.png" >
< link rel = "icon" type = "image/png" sizes = "32x32" href = "assets/favicon/favicon-32x32.png" >
< link rel = "icon" type = "image/png" sizes = "16x16" href = "assets/favicon/favicon-16x16.png" >
2024-07-18 17:51:24 +00:00
< / head >
< body >
2024-07-21 21:12:39 +00:00
< div class = "navigation-sticky" >
< a href = "https://notfellchen.org" >
2024-07-30 06:20:43 +00:00
< b data-i18n-key = "back-to-home" > zurück zur Homepage< / b >
2024-07-21 21:12:39 +00:00
< / a >
< / div >
2024-07-18 21:22:31 +00:00
2024-07-18 21:43:57 +00:00
< div class = "content" >
2024-07-30 06:20:43 +00:00
< h1 data-i18n-key = "app-name" > Käfigrechner< / h1 >
2024-07-18 21:43:57 +00:00
< div class = "container-form" >
2024-07-21 20:23:54 +00:00
< div class = "cards" >
< div class = "card" id = "card-SavicSuiteRoyaleXL" >
< label for = "SavicSuiteRoyaleXL" >
2024-07-20 06:47:41 +00:00
< input type = "checkbox" id = "SavicSuiteRoyaleXL" / >
2024-07-21 20:23:54 +00:00
< div class = "card-photo" >
2024-07-18 22:50:23 +00:00
< img src = "assets/img/savic-xl.jpeg" >
< / div >
2024-07-21 20:23:54 +00:00
< div class = "info-container" >
2024-07-21 21:25:47 +00:00
< h4 > < b > Savic Suite Royale XL< / b > < / h4 >
2024-07-21 20:23:54 +00:00
< / div >
< / label >
2024-07-18 22:50:23 +00:00
< / div >
2024-07-21 20:23:54 +00:00
< div class = "card" id = "card-SavicSuiteRoyale95Double" >
< label for = "SavicSuiteRoyale95Double" >
2024-07-20 06:47:41 +00:00
< input type = "checkbox" id = "SavicSuiteRoyale95Double" / >
2024-07-21 20:23:54 +00:00
< div class = "card-photo" >
< div >
< img src = "assets/img/savic-95-double.jpg" >
< / div >
< div class = "info-container" >
2024-07-21 21:25:47 +00:00
< h4 > < b > Savic Suite Royale 95 Double< / b > < / h4 >
2024-07-21 20:23:54 +00:00
< / div >
2024-07-18 22:50:23 +00:00
< / div >
2024-07-21 20:23:54 +00:00
< / label >
2024-07-18 22:50:23 +00:00
< / div >
2024-07-21 20:23:54 +00:00
< div class = "card" id = "card-TiakiKleintierkäfigEtagere" >
< label for = "TiakiKleintierkäfigEtagere" >
2024-07-20 06:47:41 +00:00
< input type = "checkbox" id = "TiakiKleintierkäfigEtagere" / >
2024-07-21 20:23:54 +00:00
< div class = "card-photo" >
2024-07-18 22:50:23 +00:00
< img src = "assets/img/tiaki.jpeg" >
< / div >
2024-07-21 20:23:54 +00:00
< div class = "info-container" >
< h4 > < b > TIAKI Kleintierkäfig Étagère< / b > < / h4 >
< / div >
< / label >
2024-07-18 22:24:38 +00:00
< / div >
2024-07-21 20:55:10 +00:00
< div class = "card" id = "card-ManualMeasurements" >
2024-07-21 20:23:54 +00:00
< label for = "form-cage-measurements" > Käfigmaße< / label >
< form id = "form-cage-measurements" class = "form-measurements" >
< div class = "input-measurement" >
2024-07-30 06:20:43 +00:00
< label for = "width" data-i18n-key = "width-cm" > Breite (cm)< / label >
2024-07-21 20:23:54 +00:00
< input class = "measurement" type = "number" id = "width" >
< / div >
< div class = "input-measurement" >
2024-07-30 06:20:43 +00:00
< label for = "depth" data-i18n-key = "depth-cm" > Tiefe (cm)< / label >
2024-07-21 20:23:54 +00:00
< input class = "measurement" type = "number" id = "depth" >
< / div >
< div class = "input-measurement" >
2024-07-30 06:20:43 +00:00
< label for = "height" data-i18n-key = "height-cm" > Höhe (cm)< / label >
2024-07-21 20:23:54 +00:00
< input class = "measurement" type = "number" id = "height" >
< / div >
< / form >
2024-07-18 22:24:38 +00:00
< / div >
< / div >
2024-07-21 20:23:54 +00:00
< / div >
2024-07-21 21:05:08 +00:00
< div class = "container-inputs" >
< div class = "input-element" >
2024-07-30 06:20:43 +00:00
< label for = "numFullFloors" data-i18n-key = "full-floors" > Vollebenen< / label >
2024-07-21 21:37:27 +00:00
< 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 >
2024-07-30 06:20:43 +00:00
< 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 >
2024-07-21 21:37:27 +00:00
< / div >
2024-07-21 21:05:08 +00:00
< div class = "ncontainer" >
< div class = "input-group" >
< button onclick = "decreaseFloorNum()" > -< / button >
< input type = "text" id = "numFullFloors" value = "3" readonly >
< button onclick = "increaseFloorNum()" > +< / button >
< / div >
< / div >
2024-07-18 21:58:42 +00:00
< / div >
2024-07-18 21:43:57 +00:00
2024-07-21 21:05:08 +00:00
< div class = "input-element" >
< div class = "slidecontainer" >
2024-07-30 06:20:43 +00:00
< label for = "numRats" id = "labelNumRats" data-i18n-key = "number-of-rats" > Anzahl an Ratten ?< / label >
2024-07-21 21:05:08 +00:00
< input type = "range" min = "3" max = "15" value = "4" class = "slider" id = "numRats" >
2024-07-18 21:43:57 +00:00
< / div >
2024-07-18 21:58:42 +00:00
< / div >
2024-07-18 21:22:31 +00:00
< / div >
2024-07-21 21:05:08 +00:00
2024-07-21 20:23:54 +00:00
< div class = "container output-element" id = "resultsDiv" >
< / div >
< / div >
2024-07-19 21:46:37 +00:00
< / div >
< script >
2024-07-18 17:51:24 +00:00
2024-07-20 06:20:43 +00:00
const inputWidth = document.getElementById("width");
2024-07-21 20:55:10 +00:00
inputWidth.onchange = updateViaManualMeasurements;
2024-07-20 06:20:43 +00:00
const inputDepth = document.getElementById("depth");
2024-07-21 20:55:10 +00:00
inputDepth.onchange = updateViaManualMeasurements;
2024-07-20 06:20:43 +00:00
const inputHeight = document.getElementById("height");
2024-07-21 20:55:10 +00:00
inputHeight.onchange = updateViaManualMeasurements;
2024-07-20 06:20:43 +00:00
2024-07-20 06:47:41 +00:00
const selectSavicSuiteRoyaleXL = document.getElementById("SavicSuiteRoyaleXL");
const selectSavicSuiteRoyale95Double = document.getElementById("SavicSuiteRoyale95Double");
const selectTiakiKleintierkäfigEtagere = document.getElementById("TiakiKleintierkäfigEtagere");
2024-07-20 06:20:43 +00:00
2024-07-21 20:55:10 +00:00
const cardSavicSuiteRoyaleXL = document.getElementById("card-SavicSuiteRoyaleXL");
const cardSavicSuiteRoyale95Double = document.getElementById("card-SavicSuiteRoyale95Double");
const cardTiakiKleintierkäfigEtagere = document.getElementById("card-TiakiKleintierkäfigEtagere");
function markActiveCage(cageName) {
cardSavicSuiteRoyaleXL.classList.remove("card-active");
cardSavicSuiteRoyale95Double.classList.remove("card-active");
cardTiakiKleintierkäfigEtagere.classList.remove("card-active");
if (cageName != "") {
const activeCage = document.getElementById("card-" + cageName);
activeCage.classList.add("card-active")
}
}
2024-07-20 06:47:41 +00:00
function updateCage(event) {
selectSavicSuiteRoyaleXL.checked = false;
selectSavicSuiteRoyale95Double.checked = false;
2024-07-20 06:20:43 +00:00
selectTiakiKleintierkäfigEtagere.checked = false;
2024-07-20 06:47:41 +00:00
const selectedCage = event.currentTarget
2024-07-20 06:20:43 +00:00
selectedCage.checked = true;
const cageName = selectedCage.id;
2024-07-20 06:47:41 +00:00
console.log(cageName);
var dim = getCageDimensions(cageName);
2024-07-20 06:20:43 +00:00
inputWidth.value = dim.width;
inputDepth.value = dim.depth;
inputHeight.value = dim.height;
2024-07-21 20:55:10 +00:00
markActiveCage(cageName);
2024-07-20 06:47:41 +00:00
update();
2024-07-20 06:20:43 +00:00
}
2024-07-20 06:47:41 +00:00
selectSavicSuiteRoyaleXL.onchange = updateCage;
selectSavicSuiteRoyale95Double.onchange = updateCage;
selectTiakiKleintierkäfigEtagere.onchange = updateCage;
2024-07-20 06:20:43 +00:00
2024-07-19 21:46:37 +00:00
var labelNumRats = document.getElementById("labelNumRats");
2024-07-18 17:51:24 +00:00
2024-07-19 21:46:37 +00:00
var ratSlider = document.getElementById("numRats");
2024-07-18 17:51:24 +00:00
2024-07-19 21:46:37 +00:00
labelNumRats.innerHTML = `Anzahl an Ratten: ` + ratSlider.value;
2024-07-18 21:43:57 +00:00
2024-07-19 21:46:37 +00:00
ratSlider.oninput = function () {
labelNumRats.innerHTML = `Anzahl an Ratten: ` + this.value;
update();
}
2024-07-18 17:51:24 +00:00
2024-07-19 21:46:37 +00:00
// Full floor functions
var fullFloorNum = document.getElementById("numFullFloors");
2024-07-18 17:51:24 +00:00
2024-07-20 06:20:43 +00:00
function getCageDimensions(cageName) {
2024-07-20 06:47:41 +00:00
console.log(cageName);
2024-07-20 06:20:43 +00:00
if (cageName == "SavicSuiteRoyaleXL") {
2024-07-20 06:47:41 +00:00
return new Dimensions(115, 67.5, 153);
2024-07-20 06:20:43 +00:00
}
if (cageName == "SavicSuiteRoyale95Double") {
2024-07-20 06:47:41 +00:00
return new Dimensions(95, 63, 120);
2024-07-20 06:20:43 +00:00
}
if (cageName == "TiakiKleintierkäfigEtagere") {
2024-07-20 06:47:41 +00:00
return new Dimensions(93.5, 63, 141.2);
2024-07-20 06:20:43 +00:00
}
}
2024-07-19 21:46:37 +00:00
function getResultFromChecks(checks) {
console.log(checks.length)
if (Object.keys(checks).length > 0) {
const ul = document.createElement('ul');
for (const key in checks) {
const li = document.createElement('li');
li.textContent = `❌` + checks[key];
ul.appendChild(li);
}
return ul;
} else {
const p = document.createElement('p');
p.innerHTML = "✅ Der Käfig erfüllt alle Kriterien!"
return p;
2024-07-18 17:51:24 +00:00
}
2024-07-19 21:46:37 +00:00
}
2024-07-18 17:51:24 +00:00
2024-07-21 21:05:08 +00:00
function updateViaManualMeasurements() {
2024-07-21 20:55:10 +00:00
markActiveCage("ManualMeasurements");
update();
}
2024-07-21 21:05:08 +00:00
2024-07-19 21:46:37 +00:00
function update() {
2024-07-20 06:47:41 +00:00
const width = inputWidth.value
const depth = inputDepth.value
const height = inputHeight.value
2024-07-21 09:36:33 +00:00
const dimensions = new Dimensions(width / 100, depth / 100, height / 100);
2024-07-20 06:47:41 +00:00
const failed_checks = cageCheck(dimensions, ratSlider.value, fullFloorNum.value);
console.log(failed_checks);
let resultsDiv = document.getElementById("resultsDiv");
2024-07-19 21:46:37 +00:00
resultsDiv.innerHTML = `< strong > Ergebnis< / strong > `;
2024-07-18 17:51:24 +00:00
2024-07-19 21:46:37 +00:00
const result = getResultFromChecks(failed_checks);
2024-07-18 21:59:08 +00:00
2024-07-19 21:46:37 +00:00
resultsDiv.appendChild(result);
}
2024-07-18 21:59:08 +00:00
2024-07-19 21:46:37 +00:00
function decreaseFloorNum() {
var input = document.getElementById('numFullFloors');
var value = parseInt(input.value);
if (value > 0) {
input.value = value - 1;
2024-07-18 21:22:31 +00:00
}
2024-07-19 21:46:37 +00:00
update();
}
2024-07-18 21:22:31 +00:00
2024-07-19 21:46:37 +00:00
function increaseFloorNum() {
var input = document.getElementById('numFullFloors');
var value = parseInt(input.value);
input.value = value + 1;
2024-07-18 21:22:31 +00:00
update();
2024-07-19 21:46:37 +00:00
}
update();
< / script >
2024-07-18 17:51:24 +00:00
< / body >
< / html >
