ForceAnalysisInteger - Explain Science

<!DOCTYPE html>
<html lang="el">
<head>
<meta charset="UTF-8">
<style>
  body { margin:0; display:flex; justify-content:center; align-items:center; height:100vh; font-family:'Segoe UI',sans-serif; overflow:hidden; background:#fff; user-select:none; touch-action:none; }
  
  #app { 
    position:relative; width:650px; height:600px; background:#fff; 
    border:1px solid #ccc; border-radius:8px; box-shadow:0 4px 15px rgba(0,0,0,0.1);
    background-image:linear-gradient(#e0e0e0 1px, transparent 1px), linear-gradient(90deg, #e0e0e0 1px, transparent 1px);
    background-size:25px 25px; background-position:-1px -1px;
  }

.el { position:absolute; transform-origin:0 50%; pointer-events:none; z-index:10; opacity:0; transition:opacity 0.2s; }
  
  .vec { height:6px; z-index:20; display:flex; align-items:center; }
  .vec::after { content:""; position:absolute; right:-10px; top:-5px; border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:12px solid; }
  .vb { background:#1976d2; opacity:1; } .vb::after { border-left-color:#1976d2; }
  .vr { background:#d32f2f; } .vr::after { border-left-color:#d32f2f; }
  
  .ax { height:2px; background:#333; z-index:5; }
  .ax::after { content:""; position:absolute; right:-8px; top:-4px; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:8px solid #333; }
  .dash { height:0; border-top:2px dashed #555; z-index:8; transform-origin:0 0; }
  
  /* HANDLE */
  #hnd { 
    position:absolute; z-index:1000; cursor:grab; pointer-events:auto; 
    width:60px; height:60px; background:rgba(0,0,0,0); border-radius:50%; 
    transform:translate(-50%, -50%); 
  }
  #hnd:active { cursor:grabbing; }

/* HAND ANIMATION */
  #hand { position:absolute; width:130px; z-index:2000; display:none; pointer-events:none; }
  
  /* LABELS */
  .lbl { position:absolute; font-weight:bold; font-size:16px; z-index:30; pointer-events:none; opacity:0; transition:opacity 0.2s; text-shadow:2px 2px 0 #fff; white-space:nowrap; }
  .v { opacity:1; }
  .lb { color:#1976d2; } .lr { color:#d32f2f; } 
  .lx { color:#000; font-style:italic; font-family:serif; font-size:22px; }
  
  /* THETA LABEL */
  #lbl-th {
      position: absolute; font-family: serif; font-style: italic; font-size: 18px; color: #444; z-index: 4;
      pointer-events: none;
  }

/* INFO & CALC */
  .inf { position:absolute; top:15px; left:20px; font-family:monospace; font-size:16px; color:#333; background:rgba(255,255,255,0.95); padding:8px 12px; border:1px solid #ccc; border-radius:4px; pointer-events:none; }
  
  #calc-box {
      position: absolute; top: 60px; left: 20px; 
      background: #fff; border: 2px solid #ff9800; border-radius: 8px;
      padding: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.2);
      font-family: 'Segoe UI', sans-serif; font-size: 15px; color: #333;
      display: none; z-index: 500; min-width: 220px;
  }
  .cl { margin-bottom: 6px; border-bottom: 1px solid #eee; padding-bottom: 4px; }
  .cr { font-weight: bold; color: #d32f2f; margin-bottom: 10px; }

/* CONTROLS */
  .ctl { position:absolute; bottom:15px; left:0; width:100%; display:flex; justify-content:center; gap:10px; z-index:2000; pointer-events:auto; }
  .btn { padding:0 20px; height:40px; border:none; border-radius:6px; font-size:15px; font-weight:600; cursor:pointer; box-shadow:0 3px 5px rgba(0,0,0,0.2); color:#fff; display:flex; align-items:center; justify-content:center; }
  .bb { background:#1976d2; } .bg { background:#43a047; } .bn { width:40px; padding:0; background:#fb8c00; }
  .bo { background: #ff9800; display: none; } /* Calc Button */
  .btn:active { transform:translateY(2px); }
  
  .ar { width:0; height:0; border-top:7px solid transparent; border-bottom:7px solid transparent; border-left:10px solid #fff; }
  .al { width:0; height:0; border-top:7px solid transparent; border-bottom:7px solid transparent; border-right:10px solid #fff; }
</style>
</head>
<body>
<div id="app">
  <div style="position:absolute; left:50px; top:465px; width:8px; height:8px; background:#333; border-radius:50%; transform:translate(-50%,-50%); z-index:5;"></div>
  
  <svg width="100" height="100" style="position:absolute; left:50px; top:465px; pointer-events:none; overflow:visible; z-index:3;">
    <path id="ang-path" d="" fill="rgba(0,0,0,0.08)" stroke="#555" stroke-width="1" stroke-dasharray="2,2"/>
  </svg>
  <div id="lbl-th">θ</div>

<div id="vf" class="el vec vb" style="opacity:1;"></div> <div id="lf" class="lbl lb v">F</div>
  <div id="hnd"></div>
  
  <img decoding="async" id="hand" src="/wp-content/uploads/2026/01/myHand.png" alt="Hand">
  <div id="inf" class="inf"></div>
  <div id="calc-box"></div>
  
  <div class="ctl">
    <button id="br" class="btn bb" style="display:none;">Επαναφορά</button>
    <button id="bs" class="btn bg">Ανάλυση</button>
    <button id="bc" class="btn bo">Υπολογισμοί</button>
    <button id="bp" class="btn bn" style="display:none;"><div class="al"></div></button>
    <button id="bn" class="btn bn" style="display:none;"><div class="ar"></div></button>
  </div>
</div>

function setVec(el, x, y, w, d, instant) {
    el.style.left = x+'px'; el.style.top = y+'px';
    el.style.width = w+'px'; el.style.transform = 'rotate('+(-d)+'deg)';
    el.style.transition = instant ? 'none' : 'width 0.1s linear, transform 0.1s linear';
  }

function onMove(clientX, clientY) {
    if(!isDrag) return;
    var rect = document.getElementById('app').getBoundingClientRect();
    var rx = (clientX - rect.left - OX)/U;
    var ry = (OY - (clientY - rect.top))/U;
    
    // FREE DRAG (No integer snap)
    // Constrain to positive quadrant mostly, or let it free.
    // Let's constrain to positive X, positive Y for simplicity of visualization
    if(rx < 0.5) rx = 0.5;
    if(ry < 0.5) ry = 0.5;
    
    // Update cx, cy directly
    cx = rx; cy = ry;
    
    updateMainF(true);
  }

hnd.onmousedown = function(e) { e.preventDefault(); isDrag=true; };
  hnd.ontouchstart = function(e) { e.preventDefault(); isDrag=true; };
  window.addEventListener('mouseup', function() { isDrag=false; });
  window.addEventListener('touchend', function() { isDrag=false; });
  window.addEventListener('mousemove', function(e) { onMove(e.clientX, e.clientY); });
  window.addEventListener('touchmove', function(e) { 
      var t=e.touches[0]; onMove(t.clientX, t.clientY); 
  }, {passive:false});

bs.onclick=start; br.onclick=resetAll; bn.onclick=next; bp.onclick=prev; bc.onclick=toggleCalc;
  
  updateMainF(true);
};
</script>