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

feat: restyle cage cards

Browse Source
This commit is contained in:
moanos [he/him]
2024-07-21 22:23:54 +02:00
parent ecd7027bdd
commit 9341c58dba
4 changed files with 95 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
src/index.html
View File

@@ -1,5 +1,5 @@
<!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>
<meta charset="UTF-8">
<title>Käfigrechner</title>
@@ -11,81 +11,84 @@
<h1>Käfigrechner</h1>
<div class="content">
<div class="container-form">
<div class="cage-selector">
<div class="card">
<div class="card-photo">
<div class="cards">
<div class="card" id="card-SavicSuiteRoyaleXL">
<label for="SavicSuiteRoyaleXL">
<input type="checkbox" id="SavicSuiteRoyaleXL"/>
<div>
<div class="card-photo">
<img src="assets/img/savic-xl.jpeg">
</div>
</div>
<label for="SavicSuiteRoyaleXL"> Savic Suite Royale XL</label>
</div>
<div class="card">
<div class="card-photo">
<input type="checkbox" id="SavicSuiteRoyale95Double"/>
<div>
<img src="assets/img/savic-95-double.jpg">
<div class="info-container">
<h4><b>Savic XL</b></h4>
</div>
</div>
<label for="SavicSuiteRoyale95Double">Savic Suite Royale 95 Double</label>
</label>
</div>
<div class="card" id="card-SavicSuiteRoyale95Double">
<label for="SavicSuiteRoyale95Double">
<input type="checkbox" id="SavicSuiteRoyale95Double"/>
<div class="card-photo">
<div>
<img src="assets/img/savic-95-double.jpg">
</div>
<div class="info-container">
<h4><b>95 Double</b></h4>
</div>
</div>
</label>
</div>
<div class="card">
<div class="card-photo">
<div class="card" id="card-TiakiKleintierkäfigEtagere">
<label for="TiakiKleintierkäfigEtagere">
<input type="checkbox" id="TiakiKleintierkäfigEtagere"/>
<div>
<div class="card-photo">
<img src="assets/img/tiaki.jpeg">
</div>
</div>
<label for="TiakiKleintierkäfigEtagere">TIAKI Kleintierkäfig Étagère</label>
<div class="info-container">
<h4><b>TIAKI Kleintierkäfig Étagère</b></h4>
</div>
</label>
</div>
<div class="card">
<div class="card-photo">
<label for="form-cage-measurements">Käfigmaße</label>
<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>
<label for="form-cage-measurements">Käfigmaße</label>
<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 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="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 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="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>
<script>