Fine volume control (1% under 10%) and add credits

popup.css

@@ -215,3 +215,18 @@ input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.18); }
   padding-top: 2px;
 }
 .note.error { color: var(--danger); }
+
+/* ---------- Credits ---------- */
+.credits {
+  font-family: 'DM Mono', monospace;
+  font-size: 10px;
+  color: var(--text-dim);
+  text-align: center;
+  letter-spacing: .3px;
+  padding-top: 2px;
+  opacity: .85;
+}
+.credits .heart {
+  color: var(--danger);
+  margin-left: 1px;
+}

popup.html

@@ -33,7 +33,7 @@
 
     <!-- Slider -->
     <div class="slider-wrap">
-      <input type="range" id="slider" min="0" max="600" step="10" value="100" />
+      <input type="range" id="slider" min="0" max="600" step="1" value="100" />
       <div class="ticks">
         <span>0</span><span>100</span><span>300</span><span>600</span>
       </div>
@@ -87,6 +87,11 @@
     <!-- Fußzeile / Hinweis -->
     <p class="note" id="note">Über 100 % wird der Tab-Ton verstärkt.</p>
 
+    <!-- Credits -->
+    <footer class="credits">
+      Made by Tronax with <span class="heart" aria-label="love">♥</span>
+    </footer>
+
   </div>
   <script src="popup.js"></script>
 </body>

popup.js

@@ -13,8 +13,9 @@ const btnDown     = document.getElementById("btnDown");
 const btnMute     = document.getElementById("btnMute");
 const presets     = document.querySelectorAll(".preset");
 
-const STEP = 10;          // Schrittweite in %
+const STEP = 10;          // Standard-Schrittweite in %
 const MAX  = 600;
+const FINE_LIMIT = 10;    // Unterhalb dieses Werts wird in 1er-Schritten gesteuert
 let currentTab = null;
 let lastBeforeMute = 100; // Wert vor dem Stummschalten
 
@@ -63,9 +64,26 @@ function applyUI(value) {
   });
 }
 
+// ---- Wert an adaptives Raster anpassen ----
+// Oberhalb von FINE_LIMIT in 10er-Schritten, darunter in 1er-Schritten.
+function snapStep(value) {
+  value = Math.max(0, Math.min(MAX, Math.round(value)));
+  return value > FINE_LIMIT ? Math.round(value / STEP) * STEP : value;
+}
+
+// Adaptive Schrittweite für +/- Buttons und Pfeiltasten.
+// Im Feinbereich (<= FINE_LIMIT) wird in 1er-Schritten gearbeitet,
+// sodass die Steuerung auch am Übergang bei 10 % sanft verläuft.
+function stepUpFrom(value) {
+  return value < FINE_LIMIT ? 1 : STEP;
+}
+function stepDownFrom(value) {
+  return value <= FINE_LIMIT ? 1 : STEP;
+}
+
 // ---- Lautstärke setzen + an Worker senden ----
 function setVolume(value) {
-  value = Math.max(0, Math.min(MAX, value));
+  value = snapStep(Math.max(0, Math.min(MAX, value)));
   applyUI(value);
 
   if (!currentTab) return;
@@ -107,17 +125,20 @@ function setVolume(value) {
 
 // ---- Events ----
 slider.addEventListener("input", () => {
-  applyUI(Number(slider.value));
+  const raw = Number(slider.value);
+  const snapped = snapStep(raw);
+  if (snapped !== raw) slider.value = snapped; // Raster im Slider sichtbar halten
+  applyUI(snapped);
 });
 slider.addEventListener("change", () => {
   setVolume(Number(slider.value));
 });
 
 btnUp.addEventListener("click", () =>
-  setVolume(Number(slider.value) + STEP)
+  setVolume(Number(slider.value) + stepUpFrom(Number(slider.value)))
 );
 btnDown.addEventListener("click", () =>
-  setVolume(Number(slider.value) - STEP)
+  setVolume(Number(slider.value) - stepDownFrom(Number(slider.value)))
 );
 
 btnMute.addEventListener("click", () => {
@@ -136,8 +157,9 @@ presets.forEach((p) => {
 
 // Tastatur: Pfeile hoch/runter
 document.addEventListener("keydown", (e) => {
-  if (e.key === "ArrowUp")   { e.preventDefault(); setVolume(Number(slider.value) + STEP); }
+  const v = Number(slider.value);
-  if (e.key === "ArrowDown") { e.preventDefault(); setVolume(Number(slider.value) - STEP); }
+  if (e.key === "ArrowUp")   { e.preventDefault(); setVolume(v + stepUpFrom(v)); }
+  if (e.key === "ArrowDown") { e.preventDefault(); setVolume(v - stepDownFrom(v)); }
 });
 
 init();