diff --git a/index.html b/index.html index ddaf386..52837e8 100644 --- a/index.html +++ b/index.html @@ -267,6 +267,62 @@ font-size: 1em; color: #ff0; } + + /* ====== Responsive mobile ====== */ + @media (max-width: 900px) { + body { + flex-direction: column; + align-items: center; + height: auto; + overflow-y: auto; + padding: 20px; + } + + .colonne { + width: 100%; + } + + #entrees, + #poids { + transform: scale(0.8); + transform-origin: top center; + } + + h2 { + font-size: 1.2em; + } + + #poids { + grid-template-columns: repeat(8, 40px); + grid-template-rows: repeat(8, 55px); + gap: 4px; + } + + .led { + width: 30px; + height: 30px; + margin: 2px; + } + + #training-controls { + gap: 12px; + } + + #training-controls button { + font-size: 0.9em; + padding: 5px 10px; + } + + #ampoule { + width: 60px; + height: 60px; + } + + #jauge { + width: 100px; + height: 50px; + } + } @@ -579,6 +635,33 @@ document.body.style.cursor = 'grabbing'; }); + knob.addEventListener('touchstart', (e) => { + dragging = true; + knob.classList.add('active'); + startY = e.touches[0].clientY; + startAngle = angle; + e.preventDefault(); + }, { passive: false }); + + window.addEventListener('touchend', () => { + if (dragging) { + dragging = false; + knob.classList.remove('active'); + } + }); + + window.addEventListener('touchmove', (e) => { + if (!dragging) return; + const dy = startY - e.touches[0].clientY; + angle = Math.max(minAngle, Math.min(maxAngle, startAngle + dy)); + const val = angleToValue(angle); + hiddenRange.value = val.toFixed(2); + label.textContent = val.toFixed(2); + knob.style.transform = `rotate(${angle}deg)`; + majHaloIndex(i); + majSortie(); + }, { passive: false }); + window.addEventListener('mouseup', () => { if (dragging) { dragging = false; @@ -740,28 +823,47 @@ } // Souris + // Souris + tactile let dragging = false, startY = 0, startAngle = 0; - knob.addEventListener('mousedown', e => { + + function startDrag(y) { dragging = true; knob.classList.add('active'); - startY = e.clientY; + startY = y; startAngle = angle; document.body.style.cursor = 'grabbing'; - }); - window.addEventListener('mouseup', () => { + } + function moveDrag(y) { + if (!dragging) return; + const dy = startY - y; + angle = Math.max(minAngle, Math.min(maxAngle, startAngle + dy)); + value = angleToValue(angle); + majAffichage(); + } + function stopDrag() { if (dragging) { dragging = false; knob.classList.remove('active'); document.body.style.cursor = ''; } - }); - window.addEventListener('mousemove', e => { - if (!dragging) return; - const dy = startY - e.clientY; - angle = Math.max(minAngle, Math.min(maxAngle, startAngle + dy)); - value = angleToValue(angle); - majAffichage(); - }); + } + + // Événements souris + knob.addEventListener('mousedown', e => startDrag(e.clientY)); + window.addEventListener('mousemove', e => moveDrag(e.clientY)); + window.addEventListener('mouseup', stopDrag); + + // Événements tactiles + knob.addEventListener('touchstart', e => { + e.preventDefault(); + startDrag(e.touches[0].clientY); + }, { passive: false }); + window.addEventListener('touchmove', e => { + e.preventDefault(); + moveDrag(e.touches[0].clientY); + }, { passive: false }); + window.addEventListener('touchend', stopDrag); + // Molette knob.addEventListener('wheel', e => {