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

feat: Start selecting cages

Browse Source
This commit is contained in:
moanos [he/him] 2024-07-19 00:24:38 +02:00
parent 7167d275b6
commit 9e3c89f94d
5 changed files with 54 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -113,4 +113,41 @@ label {
border: 1px solid #ccc;
background-color: var(--secondary-light-one);
height: 36px;
}
.card-photo {
flex: 5 16%;
margin: 10px;
}
.card-photo img {
max-width: 100%;
max-height: 200px;
border-radius: 10%;
}
.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;
}

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

18
src/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Knastrechner</title>
@ -11,6 +11,22 @@
<h1>Käfigrechner</h1>
<div class="content">
<div class="container-form">
<div class="cage-selector">
<div class="card-photo">
<input type="checkbox" id="savic-xl"/>
<label for="savic-95">
<img src="assets/img/savic-xl.jpeg">
</label>
</div>
<div class="card-photo">
<input type="checkbox" id="savic-95"/>
<label for="savic-95">
<img src="assets/img/savic-95-double.jpg">
</label>
</div>
</div>
<div class="input-element">
<div class="slidecontainer">
<label for="numRats" id="labelNumRats">Anzahl an Ratten ?</label>