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

Compare commits

base: moanos:7167d275b64302ad5733dad21a1eab8d9acf9448
Branches Tags
moanos:main
moanos:translation
..
compare: moanos:583b0fb49f1a001a267b02c0379f9bc67507e7e6
Branches Tags
moanos:main
moanos:translation

2 Commits
7167d275b6 ... 583b0fb49f

Author SHA1 Message Date
moanos
583b0fb49f feat: improve selector
Some checks failed
ci/woodpecker/push/woodpecker Pipeline failed
Details
2024-07-19 00:50:23 +02:00
moanos
9e3c89f94d feat: Start selecting cages 2024-07-19 00:24:38 +02:00
5 changed files with 116 additions and 1 deletions
Show Stats Expand all files Collapse all files

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

@ -47,6 +47,7 @@ h1, h2 {
label { label {
font-weight: bold; font-weight: bold;
word-break: break-word;;
} }
@ -114,3 +115,66 @@ label {
background-color: var(--secondary-light-one); background-color: var(--secondary-light-one);
height: 36px; height: 36px;
} }
.cage-selector{
gap: 15px;
}
.card {
text-align: center;
color: var(--text-two);
}
.card-photo {
height: 200px;
width: 200px;
background-color: #ffffff;
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;
}
.cage-selector {
display: flex;
flex-wrap: wrap;
}
input[type="checkbox"] {
-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 {
max-height: 90%;
}
input.measurement {
margin-top: 5%;
}

BIN
src/assets/img/savic-95-double.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 MiB

BIN
src/assets/img/savic-xl.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
src/assets/img/tiaki.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 68 KiB

53
src/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en" xmlns="http://www.w3.org/1999/html">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Knastrechner</title> <title>Knastrechner</title>
@ -11,6 +11,57 @@
<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="card">
<div class="card-photo">
<input type="checkbox" id="savic-xl"/>
<div>
<img src="assets/img/savic-xl.jpeg">
</div>
</div>
<label for="savic-xl"> Savic Suite Royale XL</label>
</div>
<div class="card">
<div class="card-photo">
<input type="checkbox" id="savic-95"/>
<div>
<img src="assets/img/savic-95-double.jpg">
</div>
</div>
<label for="savic-95">Savic Suite Royale 95 Double</label>
</div>
<div class="card">
<div class="card-photo">
<input type="checkbox" id="tiaki"/>
<div>
<img src="assets/img/tiaki.jpeg">
</div>
</div>
<label>TIAKI Kleintierkäfig Étagère</label>
</div>
<div class="card">
<div class="card-photo">
<input type="checkbox" id="tiaki"/>
<form class="form-measurements">
<input class="measurement" type="number" id="width">
<label for="width">Breite</label>
<input class="measurement" type="number" id="depth">
<label for="depth">Tiefe</label>
<input class="measurement" type="number" id="height">
<label for="height">Höhe</label>
</form>
</div>
<label>Anderer Käfig</label>
</div>
</div>
<div class="input-element"> <div class="input-element">
<div class="slidecontainer"> <div class="slidecontainer">
<label for="numRats" id="labelNumRats">Anzahl an Ratten ?</label> <label for="numRats" id="labelNumRats">Anzahl an Ratten ?</label>