Protocolo de Ingreso Técnico
Complete la información del vehículo para generar su solicitud de diagnóstico clínico.
Estado: Esperando conexión…
Complete la información del vehículo para generar su solicitud de diagnóstico clínico.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WhatsApp CRM Funcional</title>
<script src="/socket.io/socket.io.js"></script>
<style>
body { font-family: 'Segoe UI', Tahoma, sans-serif; background-color: #f0f2f5; margin: 0; padding: 20px; color: #333; }
header { display: flex; justify-content: space-between; align-items: center; background-color: #075e54; color: white; padding: 15px 25px; border-radius: 8px; margin-bottom: 20px; }
.qr-section { background: white; padding: 15px; border-radius: 8px; text-align: center; color: black; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.qr-placeholder { min-width: 150px; min-height: 150px; background-color: #e0e0e0; border: 2px dashed #999; margin: 10px auto; display: flex; align-items: center; justify-content: center; }
.board { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 10px; }
.column { background-color: #e4e6eb; min-width: 300px; border-radius: 8px; padding: 15px; display: flex; flex-direction: column; gap: 10px; min-height: 400px; }
.column h3 { margin-top: 0; font-size: 16px; color: #054c44; border-bottom: 2px solid #25d366; padding-bottom: 5px; }
.card { background-color: white; padding: 15px; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); cursor: grab; border-left: 4px solid #25d366; }
.card:active { cursor: grabbing; }
.card-title { font-weight: bold; margin-bottom: 5px; color: #075e54; }
.card-msg { font-size: 14px; color: #666; }
</style>
</head>
<body>
<header>
<h2>Mi WhatsApp CRM</h2>
<div class="qr-section">
<p style="margin: 0; font-size: 14px;"><strong>Estado:</strong> Esperando conexión...</p>
<div class="qr-placeholder" id="qr-container">
Cargando el motor...
</div>
</div>
</header>
<div class="board">
<div class="column" id="nuevos" ondrop="drop(event)" ondragover="allowDrop(event)">
<h3>Nuevos Mensajes (Llegan en vivo)</h3>
</div>
<div class="column" id="proceso" ondrop="drop(event)" ondragover="allowDrop(event)">
<h3>En Proceso (Armando Pedido)</h3>
</div>
<div class="column" id="despachados" ondrop="drop(event)" ondragover="allowDrop(event)">
<h3>Despachados / Finalizados</h3>
</div>
</div>
<script>
// Conexión con el servidor
const socket = io();
const qrContainer = document.getElementById('qr-container');
const boardNuevos = document.getElementById('nuevos');
// Mostrar el código QR
socket.on('qr', (url) => {
qrContainer.innerHTML = `<img src="${url}" alt="QR de WhatsApp" style="width: 150px; height: 150px;">`;
});
// Mensaje de éxito al vincular
socket.on('ready', (msg) => {
qrContainer.innerHTML = `<span style="color: #075e54; font-weight: bold; font-size: 18px;">${msg}</span>`;
});
// Crear una tarjeta nueva cuando llega un mensaje de WhatsApp
socket.on('message', (data) => {
const card = document.createElement('div');
card.className = 'card';
card.draggable = true;
card.id = 'msg-' + Date.now(); // ID único para arrastrar
card.ondragstart = drag;
card.innerHTML = `
<div class="card-title">${data.from}</div>
<div class="card-msg">${data.body}</div>
`;
boardNuevos.appendChild(card);
});
// Funciones Drag & Drop (Arrastrar y Soltar)
function allowDrop(ev) { ev.preventDefault(); }
function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); }
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
var draggedElement = document.getElementById(data);
if (ev.target.classList.contains('column')) {
ev.target.appendChild(draggedElement);
} else if (ev.target.closest('.column')) {
ev.target.closest('.column').appendChild(draggedElement);
}
}
</script>
</body>
</html>