dix/formha
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

intento 3

Browse Source
This commit is contained in:
David Itehua Xalamihua 2025-05-21 21:00:26 -06:00
parent de0c584f68
commit 52369e0479
1 changed files with 80 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

174
templates/z_comps/boton_chat.html
View File

@ -1,59 +1,50 @@
<style> <style>
.floating-btn { .floating-btn {
position: fixed; position: fixed;
width: 60px; width: 60px;
height: 60px; height: 60px;
background-color: #ffffff; background-color: #ffffff;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
cursor: move; cursor: move;
user-select: none; user-select: none;
z-index: 1000; z-index: 1000;
transition: transition:
background-color 0.3s, background-color 0.3s,
left 0.3s ease, left 0.3s ease,
right 0.3s ease, right 0.3s ease,
top 0.3s ease; top 0.3s ease;
}
.floating-btn:active {
cursor: grabbing;
}
@keyframes spin-right {
from {
transform: rotate(0deg);
} }
to {
transform: rotate(360deg); .floating-btn:active {
cursor: grabbing;
} }
}
.rotating {
animation: spin-right 4s linear infinite;
}
@keyframes spin-right {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotating {
animation: spin-right 4s linear infinite;
}
</style> </style>
<div class="floating-btn border border-light shadow-lg" id="floatingBtn"> <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"> <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') }}" <img src="{{ url_for('static', filename='y_img/logos/circulo_logo.png') }}"
alt="logo" alt="logo"
class="img-fluid rounded-circle rotating" class="img-fluid rounded-circle rotating"
style="width: 100%; height: 100%;"> style="width: 100%; height: 100%;">
</a> </a>
</div> </div>
<script> <script>
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
const btn = document.getElementById('floatingBtn'); const btn = document.getElementById('floatingBtn');
@ -61,8 +52,9 @@
let offsetX, offsetY; let offsetX, offsetY;
let isDragging = false; let isDragging = false;
let hasMoved = false; let hasMoved = false;
let touchStartX = 0; let touchStartTimer;
let touchStartY = 0; const tapThreshold = 200; // Tiempo en milisegundos para considerar un "tap"
const moveThreshold = 5; // Distancia en píxeles para considerar un "move"
const savedPosition = localStorage.getItem('floatingBtnPosition'); const savedPosition = localStorage.getItem('floatingBtnPosition');
if (savedPosition) { if (savedPosition) {
@ -75,17 +67,16 @@
btn.style.top = '20px'; btn.style.top = '20px';
} }
// MOUSE EVENTS // Eventos para mouse
btn.addEventListener('mousedown', startDrag); btn.addEventListener('mousedown', startDrag);
document.addEventListener('mousemove', drag); document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', stopDrag); document.addEventListener('mouseup', stopDrag);
// TOUCH EVENTS // Eventos para touch
btn.addEventListener('touchstart', startDragTouch, { passive: false }); btn.addEventListener('touchstart', startTouch, { passive: true });
document.addEventListener('touchmove', dragTouch, { passive: false }); document.addEventListener('touchmove', moveTouch, { passive: false });
document.addEventListener('touchend', stopDragTouch); document.addEventListener('touchend', endTouch);
// Evitar abrir link si se arrastró el botón
link.addEventListener('click', function (e) { link.addEventListener('click', function (e) {
if (hasMoved) { if (hasMoved) {
e.preventDefault(); e.preventDefault();
@ -121,7 +112,7 @@
hasMoved = true; hasMoved = true;
} }
function stopDrag(e) { function stopDrag() {
if (!isDragging) return; if (!isDragging) return;
isDragging = false; isDragging = false;
@ -135,60 +126,55 @@
savePosition(x, y); savePosition(x, y);
} }
function startDragTouch(e) { function startTouch(e) {
if (e.touches.length !== 1) return; if (e.touches.length !== 1) return;
isDragging = true;
hasMoved = false; hasMoved = false;
const touch = e.touches[0];
const startX = touch.clientX;
const startY = touch.clientY;
touchStartTimer = setTimeout(() => {
// Si el temporizador termina y no ha habido movimiento, consideramos un tap
link.click();
}, tapThreshold);
// Preparar para el movimiento
const rect = btn.getBoundingClientRect(); const rect = btn.getBoundingClientRect();
offsetX = e.touches[0].clientX - rect.left; offsetX = startX - rect.left;
offsetY = e.touches[0].clientY - rect.top; offsetY = startY - rect.top;
touchStartX = e.touches[0].clientX;
touchStartY = e.touches[0].clientY;
btn.style.cursor = 'grabbing';
btn.style.left = `${rect.left}px`;
btn.style.top = `${rect.top}px`;
btn.style.right = 'auto';
e.preventDefault();
} }
function dragTouch(e) { function moveTouch(e) {
if (!isDragging || e.touches.length !== 1) return; if (!touchStartTimer || e.touches.length !== 1) return;
const currentX = e.touches[0].clientX; const touch = e.touches[0];
const currentY = e.touches[0].clientY; const currentX = touch.clientX;
const currentY = touch.clientY;
const deltaX = Math.abs(currentX - touchStartX); // Verificar si el movimiento supera el umbral
const deltaY = Math.abs(currentY - touchStartY); if (Math.abs(currentX - (touch.clientX - offsetX)) > moveThreshold || Math.abs(currentY - (touch.clientY - offsetY)) > moveThreshold) {
clearTimeout(touchStartTimer); // Cancelar el temporizador si hay movimiento
if (deltaX > 5 || deltaY > 5) { isDragging = true;
hasMoved = true; hasMoved = true;
btn.style.cursor = 'grabbing';
btn.style.left = `${currentX - offsetX}px`;
btn.style.top = `${currentY - offsetY}px`;
btn.style.right = 'auto';
e.preventDefault(); // Evitar el scroll durante el arrastre
} }
const x = currentX - offsetX;
const y = currentY - offsetY;
btn.style.left = `${x}px`;
btn.style.top = `${y}px`;
e.preventDefault(); // evita scroll
} }
function stopDragTouch(e) { function endTouch(e) {
if (!isDragging) return; clearTimeout(touchStartTimer);
if (isDragging) {
isDragging = false; isDragging = false;
btn.style.cursor = 'move'; btn.style.cursor = 'move';
const rect = btn.getBoundingClientRect();
const rect = btn.getBoundingClientRect(); stickToNearestSide(rect.left, rect.top);
const x = rect.left; savePosition(rect.left, rect.top);
const y = rect.top; }
stickToNearestSide(x, y);
savePosition(x, y);
} }
function stickToNearestSide(x, y) { function stickToNearestSide(x, y) {
@ -230,4 +216,4 @@
} }
}); });
}); });
</script> </script>