diff --git a/sorting_visualization.html b/sorting_visualization.html index 22ae361..b68d759 100644 --- a/sorting_visualization.html +++ b/sorting_visualization.html @@ -2,7 +2,8 @@ - + + Sortier-Algorithmen Visualisierung @@ -57,7 +58,12 @@ } /* ── Viewport-relative Fonts ── */ - body { font-size: clamp(14px, 1.6vw, 16px); } + html, body { + touch-action: manipulation; + -webkit-tap-highlight-color: transparent; + overscroll-behavior: contain; + } + body { font-size: clamp(14px, 1.6vw, 16px); overflow-x: hidden; } .title-text { font-size: clamp(1.25rem, 3.5vw, 2.25rem); } .stat-value { font-size: clamp(1.5rem, 4vw, 2.25rem); } .label-text { font-size: clamp(9px, 1.2vw, 11px); } @@ -74,23 +80,6 @@ touch-action: none; } - /* ── Slider Tooltip ── */ - .slider-tooltip { - position: fixed; - background: var(--c-surface2, #1e2235); - border: 1px solid var(--c-border, #2a2d3d); - border-radius: 6px; - padding: 3px 8px; - font-size: 11px; - font-family: monospace; - color: var(--c-accent, #4a7cff); - pointer-events: none; - opacity: 0; - transition: opacity 0.15s ease; - z-index: 9999; - white-space: nowrap; - } - .slider-tooltip.visible { opacity: 1; } input[type="range"]::-webkit-slider-runnable-track { height: 6px; background: var(--c-surface2); @@ -215,7 +204,7 @@

- Sortier-Algorithmen v0.2.9 + Sortier-Algorithmen v0.2.10

Interaktive Visualisierung mit schrittweiser Animation

@@ -338,9 +327,6 @@ - -
-
@@ -2976,49 +2962,6 @@ makeTouchSlider($sizeSlider); makeTouchSlider($speedSlider); makeTouchSlider($threadSlider); -// ================================================================ -// Slider Tooltip on Hover -// ================================================================ - -const $sliderTooltip = document.getElementById('sliderTooltip'); -const $allSliders = [$sizeSlider, $speedSlider, $threadSlider].filter(Boolean); - -$allSliders.forEach(function(slider) { - slider.addEventListener('mouseenter', function() { - updateSliderTooltip(slider); - $sliderTooltip.classList.add('visible'); - }); - slider.addEventListener('mousemove', function(e) { - updateSliderTooltipPosition(e.clientX, e.clientY); - }); - slider.addEventListener('mouseleave', function() { - $sliderTooltip.classList.remove('visible'); - }); -}); - -function updateSliderTooltip(slider) { - if (slider.id === 'sizeSlider') { - $sliderTooltip.textContent = slider.value + ' Elemente'; - } else if (slider.id === 'speedSlider') { - const ms = Math.round(1000 * Math.pow(0.001, (parseInt(slider.value) - 1) / 99)); - $sliderTooltip.textContent = ms + ' ms/Schritt'; - } else if (slider.id === 'threadSlider') { - $sliderTooltip.textContent = slider.value + ' Thread(s)'; - } -} - -function updateSliderTooltipPosition(x, y) { - const tw = $sliderTooltip.offsetWidth; - const th = $sliderTooltip.offsetHeight; - let left = x - tw / 2; - let top = y - th - 12; - if (left < 8) left = 8; - if (left + tw > window.innerWidth - 8) left = window.innerWidth - tw - 8; - if (top < 8) top = y + 16; - $sliderTooltip.style.left = left + 'px'; - $sliderTooltip.style.top = top + 'px'; -} - // ================================================================ // URL State Persistence // ================================================================