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 => {