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" >
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
2024-07-31 16:48:23 +00:00
< div class = "top-navigation" >
< div class = "homebutton" >
2024-08-25 17:45:13 +00:00
< a href = "https://vdrd.de" >
2024-07-31 16:48:23 +00:00
< b data-i18n-key = "back-to-home" > zurück zur Homepage< / b >
< / a >
< / div >
2024-07-18 21:22:31 +00:00
2024-07-31 16:48:23 +00:00
< div class = "language-switcher" >
2024-07-31 17:48:29 +00:00
< label aria-hidden = "false" style = "display: none" data-i18n-key = "change-language" > < / label >
< select data-i18n-switcher class = "locale-switcher" id = "locale-switcher" >
2024-07-31 16:48:23 +00:00
< option value = "en" > English< / option >
< option value = "de" > Deutsch< / option >
< / select >
< / div >
< / div >
2024-07-30 18:02:37 +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-31 17:20:46 +00:00
< img alt-i18n-key = "alt-savic-xl" src = "assets/img/savic-xl.jpeg" >
2024-07-18 22:50:23 +00:00
< / 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 >
2024-07-31 17:20:46 +00:00
< img alt-i18n-key = "alt-savic-95-double" src = "assets/img/savic-95-double.jpg" >
2024-07-21 20:23:54 +00:00
< / 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-31 17:20:46 +00:00
< img alt-i18n-key = "alt-tiaki" src = "assets/img/tiaki.jpeg" >
2024-07-18 22:50:23 +00:00
< / 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-31 17:17:01 +00:00
< label data-i18n-key = "cage-measurements" for = "form-cage-measurements" > Käfigmaße< / label >
2024-07-21 20:23:54 +00:00
< 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" >
2024-07-31 16:48:23 +00:00
< 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" >
2024-07-30 18:02:37 +00:00
< button id = "decreaseFloorNum" > -< / button >
2024-07-21 21:05:08 +00:00
< input type = "text" id = "numFullFloors" value = "3" readonly >
2024-07-30 18:02:37 +00:00
< button id = "increaseFloorNum" > +< / button >
2024-07-21 21:05:08 +00:00
< / 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-31 17:38:59 +00:00
< label for = "numRats" id = "labelNumRats" > < / 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-31 17:57:29 +00:00
< div class = "container output-element" >
2024-07-31 17:51:28 +00:00
< strong data-i18n-key = "result" > Ergebnis< / strong >
2024-07-31 17:57:29 +00:00
< div id = "resultsDiv" > < / div >
2024-07-21 20:23:54 +00:00
< / div >
< / div >
2024-07-19 21:46:37 +00:00
2024-07-30 18:02:37 +00:00
< script src = "./bundle.js" > < / script >
2024-07-18 17:51:24 +00:00
< / body >
< / html >
