From 583b0fb49f1a001a267b02c0379f9bc67507e7e6 Mon Sep 17 00:00:00 2001
From: moanos <julian-samuel@gebuehr.net>
Date: Fri, 19 Jul 2024 00:50:23 +0200
Subject: [PATCH] feat: improve selector

---
 src/assets/css/style.css | 37 +++++++++++++++++++++++----
 src/index.html           | 55 ++++++++++++++++++++++++++++++++--------
 2 files changed, 77 insertions(+), 15 deletions(-)

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index 4d0e5a0..0149ea5 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -47,6 +47,7 @@ h1, h2 {
 
 label {
     font-weight: bold;
+    word-break: break-word;;
 
 }
 
@@ -115,15 +116,34 @@ label {
     height: 36px;
 }
 
+.cage-selector{
+    gap: 15px;
+}
+
+.card {
+    text-align: center;
+    color: var(--text-two);
+}
 .card-photo {
-    flex: 5 16%;
-    margin: 10px;
+    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 {
-    max-width: 100%;
-    max-height: 200px;
-    border-radius: 10%;
+    width: 70%;
+    height: 95%;
+    position: absolute;
+    margin: auto;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    cursor: pointer;
 }
 
 .cage-selector {
@@ -150,4 +170,11 @@ input[type="checkbox"]:checked:after {
     font-weight: 900;
     content: "X";
     color: #478bfb;
+}
+
+.form-measurements {
+    max-height: 90%;
+}
+input.measurement {
+    margin-top: 5%;
 }
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 7baedcb..4e19f89 100644
--- a/src/index.html
+++ b/src/index.html
@@ -12,20 +12,55 @@
 <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 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-photo">
-                <input type="checkbox" id="savic-95"/>
-                <label for="savic-95">
-                    <img src="assets/img/savic-95-double.jpg">
-                </label>
+            <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="slidecontainer">