watapi
Version:
API for WhatsApp using Baileys
86 lines (73 loc) • 2.25 kB
HTML
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>QR Code WhatsApp</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
font-family: Arial, sans-serif;
}
#qr {
width: 300px;
height: 300px;
border: 2px solid #333;
display: none;
}
#status {
margin-top: 20px;
}
#btn {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<img id="qr" src="" alt="QR Code" />
<div id="status">Clique no botão abaixo para carregar o QR Code</div>
<button id="btn">Carregar QR Code</button>
<script>
async function carregarQRCode() {
const status = document.getElementById("status");
const img = document.getElementById("qr");
status.innerText = "Carregando QR Code...";
try {
const response = await fetch("http://localhost:3000/status", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ name: "TigoCode" })
});
const data = await response.json();
console.log("RESPOSTA DA API:", data); // 👈 IMPORTANTE: veja no DevTools
if (data.qrcode) {
img.src = data.qrcode;
img.style.display = "block";
status.innerText = "Escaneie o QR Code com o WhatsApp";
} else if (data.status === 'connected') {
img.style.display = "none";
status.innerText = `Já conectado: ${data.phone}`;
} else if (data.status === 'pending') {
status.innerText = "Aguardando geração do QR Code... tente novamente em alguns segundos.";
} else {
status.innerText = "QR Code ainda não gerado. Tente novamente.";
}
} catch (err) {
img.style.display = "none";
status.innerText = "Erro ao carregar QR Code.";
console.error(err);
}
}
document.getElementById("btn").addEventListener("click", carregarQRCode);
</script>
</body>
</html>