looking better and better

frontend/src/components/Container.svelte

@@ -61,7 +61,7 @@
 <div class="flex h-screen items-center justify-center">
   <div class="relative">
     <img
-      src="/scene_drawing.png"
+      src="/revy25_scene_psn_tekst.png"
       alt=""
       bind:this={image}
       class="max-w-screen max-h-screen"

frontend/src/components/Drag.svelte

@@ -75,7 +75,8 @@
   onpointerup={onPointerUp}
   onpointermove={onPointerMove}
   style={`transform: translate(${vis_x}px, ${vis_y}px)`}
-  class="absolute flex h-32 w-32 touch-none select-none items-center justify-center rounded-full border-red-400 bg-red-400"
+  class={`absolute flex h-24 w-24 touch-none select-none items-center justify-center rounded-full
+  ${selected === id ? 'bg-green-400 border-green-400' : 'bg-red-400 border-red-400'}`}
 >
   Tracker {id}
 </div>

frontend/src/components/Slider.svelte

@@ -30,16 +30,15 @@
     );
   };
 
-  let z_viz = $derived((trackers[selected].z * 2).toFixed(2))
+  let z_viz = $derived((trackers[selected].z).toFixed(2))
 </script>
 
-<div>
-  <label for="z">Z</label>
+<div class="slider-container">
   <input
     type="range"
     id="z"
     min="0"
-    max="1"
+    max="4"
     step="0.01"
     oninput="{onchange}"
     bind:value={trackers[selected].z}
@@ -48,12 +47,38 @@
 </div>
 
 <style>
+  .slider-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
   input {
     writing-mode: vertical-lr;
     direction: rtl;
-    appearance: slider-vertical;
-    width: 26px;
+    appearance: none;
+    width: 75px;
     height: 50%;
     vertical-align: bottom;
   }
+
+
+    /* WebKit Browsers (Chrome, Safari, Edge) */
+  input::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 50px; /* Larger size */
+    height: 50px;
+    background: red; /* Customize color */
+    margin-left: -22px; /* Center the thumb */
+    border-radius: 50%;
+    cursor: pointer;
+  }
+
+  input::-webkit-slider-runnable-track {
+    background: lightgray; /* Customize track */
+    width: 6px;
+    border-radius: 3px;
+  }
+
 </style>