Compare commits
2 Commits
ecd7027bdd
...
e3e065af16
Author | SHA1 | Date | |
---|---|---|---|
e3e065af16 | |||
9341c58dba |
@ -48,7 +48,6 @@ h1, h2 {
|
|||||||
label {
|
label {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
word-break: break-word;;
|
word-break: break-word;;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.slidecontainer {
|
.slidecontainer {
|
||||||
@ -92,7 +91,6 @@ label {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.input-group {
|
.input-group {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -116,47 +114,46 @@ label {
|
|||||||
height: 36px;
|
height: 36px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cage-selector{
|
.cards {
|
||||||
gap: 15px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
text-align: center;
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
|
||||||
color: var(--text-two);
|
transition: 0.3s;
|
||||||
flex: 1 25%;
|
margin: 0.4em;
|
||||||
}
|
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;
|
||||||
}
|
}
|
||||||
@ -167,32 +164,18 @@ label {
|
|||||||
}
|
}
|
||||||
|
|
||||||
input[type="checkbox"] {
|
input[type="checkbox"] {
|
||||||
-webkit-appearance: none;
|
display: 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
Normal file
BIN
src/assets/img/checked.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 11 KiB |
BIN
src/assets/img/unchecked.png
Normal file
BIN
src/assets/img/unchecked.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 639 B |
@ -1,5 +1,5 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en" xmlns="http://www.w3.org/1999/html">
|
<html lang="en" xmlns="http://www.w3.org/1999/html" 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,42 +11,46 @@
|
|||||||
<h1>Käfigrechner</h1>
|
<h1>Käfigrechner</h1>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="container-form">
|
<div class="container-form">
|
||||||
<div class="cage-selector">
|
<div class="cards">
|
||||||
<div class="card">
|
<div class="card" id="card-SavicSuiteRoyaleXL">
|
||||||
<div class="card-photo">
|
<label for="SavicSuiteRoyaleXL">
|
||||||
<input type="checkbox" id="SavicSuiteRoyaleXL"/>
|
<input type="checkbox" id="SavicSuiteRoyaleXL"/>
|
||||||
<div>
|
<div class="card-photo">
|
||||||
<img src="assets/img/savic-xl.jpeg">
|
<img src="assets/img/savic-xl.jpeg">
|
||||||
</div>
|
</div>
|
||||||
|
<div class="info-container">
|
||||||
|
<h4><b>Savic XL</b></h4>
|
||||||
</div>
|
</div>
|
||||||
<label for="SavicSuiteRoyaleXL"> Savic Suite Royale XL</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="card" id="card-SavicSuiteRoyale95Double">
|
||||||
<div class="card">
|
<label for="SavicSuiteRoyale95Double">
|
||||||
<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>
|
||||||
|
<div class="info-container">
|
||||||
|
<h4><b>95 Double</b></h4>
|
||||||
</div>
|
</div>
|
||||||
<label for="SavicSuiteRoyale95Double">Savic Suite Royale 95 Double</label>
|
</div>
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="card" id="card-TiakiKleintierkäfigEtagere">
|
||||||
<div class="card">
|
<label for="TiakiKleintierkäfigEtagere">
|
||||||
<div class="card-photo">
|
|
||||||
<input type="checkbox" id="TiakiKleintierkäfigEtagere"/>
|
<input type="checkbox" id="TiakiKleintierkäfigEtagere"/>
|
||||||
<div>
|
<div class="card-photo">
|
||||||
<img src="assets/img/tiaki.jpeg">
|
<img src="assets/img/tiaki.jpeg">
|
||||||
</div>
|
</div>
|
||||||
|
<div class="info-container">
|
||||||
|
<h4><b>TIAKI Kleintierkäfig Étagère</b></h4>
|
||||||
</div>
|
</div>
|
||||||
<label for="TiakiKleintierkäfigEtagere">TIAKI Kleintierkäfig Étagère</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card">
|
<div class="card" id="card-ManualMeasurements">
|
||||||
<div class="card-photo">
|
|
||||||
|
|
||||||
<label for="form-cage-measurements">Käfigmaße</label>
|
<label for="form-cage-measurements">Käfigmaße</label>
|
||||||
<form id="form-cage-measurements" class="form-measurements">
|
<form id="form-cage-measurements" class="form-measurements">
|
||||||
<div class="input-measurement">
|
<div class="input-measurement">
|
||||||
@ -64,7 +68,6 @@
|
|||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="input-element">
|
<div class="input-element">
|
||||||
<div class="slidecontainer">
|
<div class="slidecontainer">
|
||||||
@ -85,24 +88,40 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="container output-element" id="resultsDiv">
|
<div class="container output-element" id="resultsDiv">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
const inputWidth = document.getElementById("width");
|
const inputWidth = document.getElementById("width");
|
||||||
inputWidth.onchange = update;
|
inputWidth.onchange = updateViaManualMeasurements;
|
||||||
const inputDepth = document.getElementById("depth");
|
const inputDepth = document.getElementById("depth");
|
||||||
inputDepth.onchange = update;
|
inputDepth.onchange = updateViaManualMeasurements;
|
||||||
const inputHeight = document.getElementById("height");
|
const inputHeight = document.getElementById("height");
|
||||||
inputHeight.onchange = update;
|
inputHeight.onchange = updateViaManualMeasurements;
|
||||||
|
|
||||||
|
|
||||||
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;
|
||||||
@ -116,6 +135,8 @@
|
|||||||
inputDepth.value = dim.depth;
|
inputDepth.value = dim.depth;
|
||||||
inputHeight.value = dim.height;
|
inputHeight.value = dim.height;
|
||||||
|
|
||||||
|
markActiveCage(cageName);
|
||||||
|
|
||||||
update();
|
update();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -169,6 +190,10 @@
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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
|
||||||
|
Loading…
Reference in New Issue
Block a user