moanos/RattenheimRechner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: moanos:e3e065af1600131a4abc3ca5ddc1fae5ece66a1c
Branches Tags
moanos:main
moanos:translation
..
compare: moanos:ecd7027bdd51d37a90d1781d7871b34b74da323f
Branches Tags
moanos:main
moanos:translation

No commits in common. "e3e065af1600131a4abc3ca5ddc1fae5ece66a1c" and "ecd7027bdd51d37a90d1781d7871b34b74da323f" have entirely different histories.
e3e065af16 ... ecd7027bdd

4 changed files with 115 additions and 123 deletions
Show Stats Expand all files Collapse all files

89
src/assets/css/style.css
View File

@ -48,6 +48,7 @@ h1, h2 {
label { label {
font-weight: bold; font-weight: bold;
word-break: break-word;; word-break: break-word;;
} }
.slidecontainer { .slidecontainer {
@ -91,6 +92,7 @@ label {
} }
.input-group { .input-group {
display: flex; display: flex;
align-items: center; align-items: center;
@ -114,46 +116,47 @@ label {
height: 36px; height: 36px;
} }
.cards { .cage-selector{
gap: 15px;
display: flex; display: flex;
justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
} }
.card { .card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); text-align: center;
transition: 0.3s; color: var(--text-two);
margin: 0.4em; flex: 1 25%;
min-width: 300px; }
.card-photo {
height: 200px;
min-width: 200px;
background-color: var(--background-one);
box-shadow: 0 0 25px rgba(17, 1, 68, 0.08);
border-radius: 8px;
position: relative;
cursor: pointer;
}
.card-photo img {
width: 70%;
height: 95%;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
cursor: pointer;
}
.card-photo label {
color: var(--text-one);
padding: 10px; padding: 10px;
border-radius: 10px;
} }
@media screen and (min-width: 40em) {
flex: 0 1 calc(25% - 0.5em);
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.card-active {
border: 3px solid var(--highlight-two);
}
.info-container {
padding: 2px 16px;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
max-height: 200px;
}
.measurement { .measurement {
width: 100px; width: 100px;
} }
@ -164,18 +167,32 @@ img {
} }
input[type="checkbox"] { input[type="checkbox"] {
display: none; -webkit-appearance: none;
position: relative;
width: 100%;
cursor: pointer;
}
input[type="checkbox"]:after {
position: absolute;
font-weight: 400;
content: "0";
font-size: 18px;
color: #478bfb;
right: 10px;
top: -5px;
}
input[type="checkbox"]:checked:after {
font-weight: 900;
content: "X";
color: #478bfb;
} }
.form-measurements { .form-measurements {
max-height: 90%; max-height: 90%;
} }
.form-measurements input { .form-measurements input {
width: 70%; width: 70%;
} }
input.measurement { input.measurement {
margin-top: 5%; margin-top: 5%;
} }

BIN
src/assets/img/checked.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 11 KiB

BIN
src/assets/img/unchecked.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 639 B

149
src/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html"> <html lang="en" xmlns="http://www.w3.org/1999/html">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Käfigrechner</title> <title>Käfigrechner</title>
@ -11,117 +11,98 @@
<h1>Käfigrechner</h1> <h1>Käfigrechner</h1>
<div class="content"> <div class="content">
<div class="container-form"> <div class="container-form">
<div class="cards"> <div class="cage-selector">
<div class="card" id="card-SavicSuiteRoyaleXL"> <div class="card">
<label for="SavicSuiteRoyaleXL"> <div class="card-photo">
<input type="checkbox" id="SavicSuiteRoyaleXL"/> <input type="checkbox" id="SavicSuiteRoyaleXL"/>
<div class="card-photo"> <div>
<img src="assets/img/savic-xl.jpeg"> <img src="assets/img/savic-xl.jpeg">
</div> </div>
<div class="info-container"> </div>
<h4><b>Savic XL</b></h4> <label for="SavicSuiteRoyaleXL"> Savic Suite Royale XL</label>
</div>
</label>
</div> </div>
<div class="card" id="card-SavicSuiteRoyale95Double">
<label for="SavicSuiteRoyale95Double"> <div class="card">
<div class="card-photo">
<input type="checkbox" id="SavicSuiteRoyale95Double"/> <input type="checkbox" id="SavicSuiteRoyale95Double"/>
<div class="card-photo"> <div>
<div> <img src="assets/img/savic-95-double.jpg">
<img src="assets/img/savic-95-double.jpg">
</div>
<div class="info-container">
<h4><b>95 Double</b></h4>
</div>
</div> </div>
</label> </div>
<label for="SavicSuiteRoyale95Double">Savic Suite Royale 95 Double</label>
</div> </div>
<div class="card" id="card-TiakiKleintierkäfigEtagere">
<label for="TiakiKleintierkäfigEtagere"> <div class="card">
<div class="card-photo">
<input type="checkbox" id="TiakiKleintierkäfigEtagere"/> <input type="checkbox" id="TiakiKleintierkäfigEtagere"/>
<div class="card-photo"> <div>
<img src="assets/img/tiaki.jpeg"> <img src="assets/img/tiaki.jpeg">
</div> </div>
<div class="info-container"> </div>
<h4><b>TIAKI Kleintierkäfig Étagère</b></h4> <label for="TiakiKleintierkäfigEtagere">TIAKI Kleintierkäfig Étagère</label>
</div>
</label>
</div> </div>
<div class="card" id="card-ManualMeasurements"> <div class="card">
<label for="form-cage-measurements">Käfigmaße</label> <div class="card-photo">
<form id="form-cage-measurements" class="form-measurements">
<div class="input-measurement">
<label for="width">Breite (cm)</label>
<input class="measurement" type="number" id="width">
</div>
<div class="input-measurement">
<label for="depth">Tiefe (cm)</label>
<input class="measurement" type="number" id="depth">
</div>
<div class="input-measurement">
<label for="height">Höhe (cm)</label>
<input class="measurement" type="number" id="height">
</div>
</form>
</div>
</div>
</div>
<div class="input-element">
<div class="slidecontainer">
<label for="numRats" id="labelNumRats">Anzahl an Ratten ?</label>
<input type="range" min="1" max="20" value="4" class="slider" id="numRats">
</div>
</div>
<div class="input-element"> <label for="form-cage-measurements">Käfigmaße</label>
<label for="numFullFloors">Vollebenen</label> <form id="form-cage-measurements" class="form-measurements">
<div class="ncontainer"> <div class="input-measurement">
<div class="input-group"> <label for="width">Breite (cm)</label>
<button onclick="decreaseFloorNum()">-</button> <input class="measurement" type="number" id="width">
<input type="text" id="numFullFloors" value="3" readonly> </div>
<button onclick="increaseFloorNum()">+</button> <div class="input-measurement">
<label for="depth">Tiefe (cm)</label>
<input class="measurement" type="number" id="depth">
</div>
<div class="input-measurement">
<label for="height">Höhe (cm)</label>
<input class="measurement" type="number" id="height">
</div>
</form>
</div>
</div>
</div>
<div class="input-element">
<div class="slidecontainer">
<label for="numRats" id="labelNumRats">Anzahl an Ratten ?</label>
<input type="range" min="1" max="20" value="4" class="slider" id="numRats">
</div> </div>
</div> </div>
<div class="input-element">
<label for="numFullFloors">Vollebenen</label>
<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>
</div>
<div class="container output-element" id="resultsDiv">
</div>
</div> </div>
<div class="container output-element" id="resultsDiv">
</div>
</div>
</div> </div>
<script> <script>
const inputWidth = document.getElementById("width"); const inputWidth = document.getElementById("width");
inputWidth.onchange = updateViaManualMeasurements; inputWidth.onchange = update;
const inputDepth = document.getElementById("depth"); const inputDepth = document.getElementById("depth");
inputDepth.onchange = updateViaManualMeasurements; inputDepth.onchange = update;
const inputHeight = document.getElementById("height"); const inputHeight = document.getElementById("height");
inputHeight.onchange = updateViaManualMeasurements; inputHeight.onchange = update;
const selectSavicSuiteRoyaleXL = document.getElementById("SavicSuiteRoyaleXL"); const selectSavicSuiteRoyaleXL = document.getElementById("SavicSuiteRoyaleXL");
const selectSavicSuiteRoyale95Double = document.getElementById("SavicSuiteRoyale95Double"); const selectSavicSuiteRoyale95Double = document.getElementById("SavicSuiteRoyale95Double");
const selectTiakiKleintierkäfigEtagere = document.getElementById("TiakiKleintierkäfigEtagere"); const selectTiakiKleintierkäfigEtagere = document.getElementById("TiakiKleintierkäfigEtagere");
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")
}
}
function updateCage(event) { function updateCage(event) {
console.log("dada");
selectSavicSuiteRoyaleXL.checked = false; selectSavicSuiteRoyaleXL.checked = false;
selectSavicSuiteRoyale95Double.checked = false; selectSavicSuiteRoyale95Double.checked = false;
selectTiakiKleintierkäfigEtagere.checked = false; selectTiakiKleintierkäfigEtagere.checked = false;
@ -135,8 +116,6 @@
inputDepth.value = dim.depth; inputDepth.value = dim.depth;
inputHeight.value = dim.height; inputHeight.value = dim.height;
markActiveCage(cageName);
update(); update();
} }
@ -190,10 +169,6 @@
} }
function updateViaManualMeasurements () {
markActiveCage("ManualMeasurements");
update();
}
function update() { function update() {
const width = inputWidth.value const width = inputWidth.value
const depth = inputDepth.value const depth = inputDepth.value