formha/templates/z_comps/boton_chat.html

<style>
  .floating-btn {
  position: fixed;
  width: 60px;
  height: 60px;
  background-color: #ffffff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: move;
  user-select: none;
  z-index: 1000;
  transition:
    background-color 0.3s,
    left 0.3s ease,
    right 0.3s ease,
    top 0.3s ease;
}

.floating-btn:active {
  cursor: grabbing;
}

@keyframes spin-right {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotating {
  animation: spin-right 4s linear infinite;
}


</style>

<div class="floating-btn border border-light shadow-lg" id="floatingBtn">
  <a id="floatingBtnLink" target="_blank" href="https://chatgpt.com/g/g-6828126fba608191a2803ac89f54f504-formha-rh-para-pymes">
    <img src="{{ url_for('static', filename='y_img/logos/circulo_logo.png') }}"
     alt="logo"
     class="img-fluid rounded-circle rotating"
     style="width: 100%; height: 100%;">

  </a>
</div>


<script>
  document.addEventListener('DOMContentLoaded', function () {
  const btn = document.getElementById('floatingBtn');
  const link = document.getElementById('floatingBtnLink');
  let offsetX, offsetY;
  let isDragging = false;
  let hasMoved = false;

  const savedPosition = localStorage.getItem('floatingBtnPosition');
  if (savedPosition) {
    const { x, y } = JSON.parse(savedPosition);
    btn.style.left = x;
    btn.style.top = y;
    setTimeout(() => stickToNearestSide(parseInt(x), parseInt(y)), 10);
  } else {
    btn.style.right = '20px';
    btn.style.top = '20px';
  }

  btn.addEventListener('mousedown', startDrag);
  link.addEventListener('click', function (e) {
    if (hasMoved) {
      e.preventDefault();
      hasMoved = false;
    }
  });

  function startDrag(e) {
    isDragging = true;
    hasMoved = false;

    const rect = btn.getBoundingClientRect();
    offsetX = e.clientX - rect.left;
    offsetY = e.clientY - rect.top;

    btn.style.cursor = 'grabbing';
    btn.style.left = `${rect.left}px`;
    btn.style.top = `${rect.top}px`;
    btn.style.right = 'auto';

    document.addEventListener('mousemove', drag);
    document.addEventListener('mouseup', stopDrag);

    e.preventDefault();
  }

  function drag(e) {
    if (!isDragging) return;

    const x = e.clientX - offsetX;
    const y = e.clientY - offsetY;

    btn.style.left = `${x}px`;
    btn.style.top = `${y}px`;

    hasMoved = true;
  }

  function stopDrag(e) {
    if (!isDragging) return;

    isDragging = false;
    btn.style.cursor = 'move';

    const rect = btn.getBoundingClientRect();
    const x = rect.left;
    const y = rect.top;

    stickToNearestSide(x, y);
    savePosition(x, y);

    document.removeEventListener('mousemove', drag);
    document.removeEventListener('mouseup', stopDrag);
  }

  function stickToNearestSide(x, y) {
    const windowWidth = window.innerWidth;
    const btnWidth = btn.offsetWidth;

    if (x < windowWidth / 2) {
      btn.style.left = '10px';
      btn.style.right = 'auto';
    } else {
      btn.style.left = 'auto';
      btn.style.right = '10px';
    }

    const windowHeight = window.innerHeight;
    const btnHeight = btn.offsetHeight;

    if (y < 0) {
      btn.style.top = '10px';
    } else if (y + btnHeight > windowHeight) {
      btn.style.top = `${windowHeight - btnHeight - 10}px`;
    } else {
      btn.style.top = `${y}px`;
    }
  }

  function savePosition(x, y) {
    localStorage.setItem('floatingBtnPosition', JSON.stringify({
      x: btn.style.left,
      y: btn.style.top
    }));
  }

  window.addEventListener('resize', function () {
    const savedPosition = localStorage.getItem('floatingBtnPosition');
    if (savedPosition) {
      const { x, y } = JSON.parse(savedPosition);
      stickToNearestSide(parseInt(x), parseInt(y));
    }
  });
});

</script>