layout

christian2denker · christian2denker · commit 160e3f5bcba6 · 2024-10-08T11:19:33.000+02:00
diff --git a/index.html b/index.html
@@ -15,6 +15,9 @@
             font-family: Arial, Helvetica, sans-serif;
             -webkit-user-select: none;
             user-select: none;
+            width: 100vw;
+            height: 100vh;
+            overflow: hidden;
         }
 
         .container {
@@ -26,7 +29,7 @@
             justify-content: center;
             background-color: #ffffff;
             aspect-ratio: 5 / 4; /* Aspect ratio 4:3 */
-
+            height: 100%;
         }
 
         /* vertical stacked: */
@@ -36,16 +39,12 @@
             font-size: 2vw;
             text-align: center; /* Center text within each label */
             font-weight: 300;
-            position: relative;
-            top: 2vw;
             display: flex;
 
         }
         .questionHeader {
             /* height: 20vh; */
             font-size:4vw;
-            position: relative;
-            top: 6vw;
             text-align: center; /* Center text within each label */
             font-weight: 600;
             margin: 0 5vw 0 5vw;
@@ -104,13 +103,17 @@
         #answer2 {
             text-align: right;
         }
+        #liveIndicator {
+            width: 32px;
+            height: 32px;
+        }
     </style>
 </head>
 <body>
     <div class="container">
         <div  class="numberOfResults">
             LIVE ABSTIMMUNG 
-            <svg width="12.5%" height="12.5%" xmlns="http://www.w3.org/2000/svg" overflow="visible">
+            <svg id="liveIndicator" xmlns="http://www.w3.org/2000/svg" overflow="visible">
                 <circle fill="#24B9D6" cx="50%" cy="50%" r="22.5%">
                     <animate
                         attributeName="r"
@@ -147,7 +150,7 @@
            <span id="question"></span>
         </div>
     <div class="slider-container">
-        <svg id="sliderSVG" viewBox="0 0 300 150" preserveAspectRatio="xMidYMid meet" width="100%" height="100%" overflow="visible"> 
+        <svg id="sliderSVG" viewBox="0 0 300 150" preserveAspectRatio="xMidYMid meet" overflow="visible"> 
             <!-- Curved slider path -->
             <path id="sliderPath" d="M 50 150 A 100 100 0 0 1 250 150" class="slider"></path>
 
@@ -223,6 +226,7 @@
         document.addEventListener('pointermove', onDrag);
         document.addEventListener('pointerup', endDrag);
 
+
         function startDrag(e) {
             e.preventDefault();
             if (typeof pollyMessageListener !== 'undefined' && pollyMessageListener !== null) {
