Monitor so weit erstmal "verbessert" nicht Perfekt

leitstelle/templates/leitstelle/create.html

@@ -24,7 +24,7 @@
                     <select class="form-select" name="stichwort" id="sw_select" onchange="checkSW()" aria-label="Default select example" required>
                         <option selected value="0">Stichwort wählen...</option>
                         {% for sw in sw %}
-                        <option value="{{sw.0}}">{{sw.1}}</option>
+                        <option value="1">{{sw.1}}</option>
                         {% endfor %}
                     </select>
                 </div>

monitor/templates/monitor/index.html

@@ -10,12 +10,12 @@
     }, 5000);
 </script>
 
-<div class="container-fluid row justify-content-between mb-5" style="padding: 0rem; margin-top: 2rem;" onload="startTime()">
+<div class="container-fluid row justify-content-between mb-5" style="padding: 0rem; margin-top: 1rem;" onload="startTime()">
-    <div class="col-4 text-center row" style="height: 15vh; align-items: center; border-radius: 1rem; box-shadow: 0rem 0rem 2rem rgb(97, 97, 97);">
+    <div class="col-4 text-center row" style="height: 5rem; width: 18rem; align-items: center; border-radius: 1rem; box-shadow: 0rem 0rem 2rem rgb(97, 97, 97);">
-        <h1 id="date-time" style="font-size: clamp(1rem, 5vw, 10rem); text-align: center;"></h1>
+        <h1 id="date-time" style="font-size: clamp(1rem, 3rem, 4rem); text-align: center;"></h1>
     </div>
     {% if alarm is not None %}
-    <div class="col-4 text-center"><img class="blink" width="150rem" style="" src="{% static 'img/alarm.png' %}" alt="User"></div>
+    <div class="col-1 text-center"><img class="blink" width="100rem" style="margin-top: -2rem;" src="{% static 'img/alarm.png' %}" alt="User"></div>
     {% endif %}
     <div class="col-4"></div>
 </div>
@@ -33,32 +33,34 @@
 {% endif %}
 
 <div class="row mb-2">
-    <div class="text-center row shadow_blink" style="height: 60vh; align-items: top; border-radius: 1rem;">
+    <div class="text-center row shadow_blink" style="height: 50rem; align-items: top; border-radius: 1rem;">
-        <h1 style="font-size: clamp(1rem, 5vw, 10rem); text-align: center; color: red; margin-top:2rem;">NEUER EINSATZ</h1>
+        <h1 style="font-size: clamp(1rem, 3vw, 8rem); text-align: center; color: red; margin-top:2rem;">NEUER EINSATZ</h1>
-        <div class="row" style="margin-top: 0rem;">
+        <div class="" style="margin-top: 0rem;">
-            <div class="col-3 offset-1 text-start mb-5">
+            <div class="text-start" style="float: left; margin-left: 2rem; border-radius: 1rem; height: 15rem; width: 40%; padding: 1rem; background-color: rgb(235, 234, 234);">
                 <h3>Stichwort:</h3>
-                <h1 style="font-size: 3rem;"><b>{{ alarm.2 }}</b></h1>
+                <h1><b>{{ alarm.2 }}</b></h1>
             </div>
-            <div class="col-8 text-start">
+            <div class="text-start" style="float: right; margin-right: 2rem; border-radius: 1rem; height: 15rem; width: 40%; padding: 1rem; background-color: rgb(235, 234, 234);">
                 <h3>Infos:</h3>
                 <h1><b>{{ alarm.3 }}</b></h1>
             </div>
         </div>
-        <div class="row" style="margin-top: -2rem;">
+        <div class="text-center" style="margin-top: 0rem; margin:2rem; border-radius: 1rem; height: 20rem; max-width: 95%; padding: 1rem; background-color: rgb(235, 234, 234)">
+            <div>
                 <div class="col-3 offset-1 text-start">
                     <h3><b>Fahrzeuge:</b></h3>
                 </div>
             </div>
-        <div class="row" style="margin-top: -4rem;">
+            <div class="row" style="margin-top: 1rem;">
                 {% for fz in alarm.4 %}
-            <div class="col-2 offset-1 row justify-content-center" style="box-shadow: 0 0 1rem gray; height: 5vh; border-radius: 1rem; align-items:center; margin-top: -3">
+                <div class="col-2 offset-1 row justify-content-center" style="box-shadow: 0 0 1rem gray; height: clamp(1rem, 5vw, 5rem); border-radius: 1rem; align-items:center; margin-top: 1rem">
-                <b style="font-size: 1.175rem;">{{ fz }}</b>
+                    <b style="font-size: clamp(0.75rem,1vw,1.75rem);">{{ fz }}</b>
                 </div>
                 {% endfor %}
             </div>
         </div>
     </div>
+</div>
 
 {% endif %}