From 3ab46cbb7222fdeffc48b00f5829cbe15f436436 Mon Sep 17 00:00:00 2001
From: moanos <julian-samuel@gebuehr.net>
Date: Sun, 13 Apr 2025 19:10:27 +0200
Subject: [PATCH] feat: Add basis for how many rats calculator

---
 public/index.html | 64 +++++++++++++++++++++++++++++++++++++++++++++--
 src/main.scss     |  2 +-
 2 files changed, 63 insertions(+), 3 deletions(-)

diff --git a/public/index.html b/public/index.html
index 2a9ce44..879bcd1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -56,7 +56,67 @@
 
 <div id="tab-content">
     <div class="is-active" data-content-id="1">
-        <p>Here you can check how many rats could fit in your cage.</p>
+        <div class="card">
+            <div class="card-content">
+                <h2 class="title is-4"><label data-i18n="cage-measurements"
+                                              for="form-cage-measurements">Käfigmaße</label></h2>
+                <form>
+                    <label for="num-rats-width" class="label" data-i18n="width-cm">Breite (cm)</label>
+                    <p class="control has-icons-left">
+                        <input class="input" type="number" id="num-rats-width" placeholder="100 cm">
+                        <span class="icon is-small is-left">
+                              <i class="fas fa-ruler-horizontal"></i>
+                            </span>
+                    </p>
+
+                    <label for="num-rats-depth" class="label" data-i18n="depth-cm">Tiefe (cm)</label>
+                    <p class="control has-icons-left">
+                        <input class="input" type="number" id="num-rats-depth" placeholder="50 cm">
+                        <span class="icon is-small is-left">
+                              <i class="fas fa-ruler"></i>
+                            </span>
+                    </p>
+
+                    <label for="num-rats-height" class="label" data-i18n="height-cm">Höhe (cm)</label>
+                    <p class="control has-icons-left">
+                        <input class="input" type="number" id="num-rats-height" placeholder="120 cm">
+                        <span class="icon is-small is-left">
+                              <i class="fas fa-ruler-vertical"></i>
+                            </span>
+                    </p>
+
+                    <div class="columns">
+                        <div class="column">
+                            <label for="num-rats-numFullFloors" class="label"
+                                   data-i18n="full-floors">Vollebenen</label>
+                            <span data-tooltip="Als Vollebenen zählen alle Ebenen die größer als 0.5m² sind, inklusive des Käfigbodens.">
+                            <svg class="text-grey-dark" width="18" height="18" viewBox="0 0 18 18" fill="none"
+                                 stroke="currentColor">
+                    <path d="M9.00026 12.6C9.00026 12.6 9.00026 12.1224 9.00026 11.5333V8.86666C9.00026 8.57211 8.76148 8.33333 8.46693 8.33333H7.93359"
+                          stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <path d="M8.73346 5.26666C8.58619 5.26666 8.4668 5.38605 8.4668 5.53333C8.4668 5.68061 8.58619 5.8 8.73346 5.8C8.88074 5.8 9.00013 5.68061 9.00013 5.53333C9.00013 5.38605 8.88074 5.26666 8.73346 5.26666V5.26666"
+                          stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <path fill-rule="evenodd" clip-rule="evenodd"
+                          d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z"
+                          stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                </svg>
+                        </span>
+                            <input type="number" id="num-rats-numFullFloors" value="3" step="1">
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+        <div class="card-footer is-fullwidth">
+            <div class="card result-card" id="num-rats-result-card">
+                <div class="card-header">
+                    <h2 class="card-header-title is-3 is-centered" data-i18n="result">Ergebnis</h2>
+                </div>
+                <div class="card-content">
+                    <div id="num-rats-resultsDiv"></div>
+                </div>
+            </div>
+        </div>
     </div>
     <div class="" data-content-id="2">
         <p>Here is a list of cages you can get.</p>
@@ -121,7 +181,7 @@
             </div>
         </div>
         <div class="card-footer is-fullwidth">
-            <div class="card" id="result-card">
+            <div class="card result-card" id="result-card">
                 <div class="card-header">
                     <h2 class="card-header-title is-3 is-centered" data-i18n="result">Ergebnis</h2>
                 </div>
diff --git a/src/main.scss b/src/main.scss
index 6e049bb..95b6902 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -28,7 +28,7 @@ body {
   padding: 5px;
 }
 
-#result-card {
+.result-card {
   width: 100%;
 }