2025-05-06 08:51:13 +00:00
|
|
|
<!DOCTYPE html>
|
2025-05-06 10:12:55 +00:00
|
|
|
<html lang="fr">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
2025-05-06 13:55:59 +00:00
|
|
|
<title>Connexion WhatsApp & Envoi Interactif</title>
|
|
|
|
|
<style>
|
|
|
|
|
body { font-family: Arial, sans-serif; max-width: 600px; margin: auto; padding: 20px; }
|
|
|
|
|
h1, h2 { text-align: center; }
|
|
|
|
|
#qrcode { text-align: center; margin-bottom: 20px; }
|
|
|
|
|
form { display: flex; flex-direction: column; gap: 10px; }
|
|
|
|
|
label { display: flex; flex-direction: column; font-weight: bold; }
|
|
|
|
|
input { padding: 8px; font-size: 1rem; }
|
|
|
|
|
button { padding: 10px; font-size: 1rem; cursor: pointer; }
|
|
|
|
|
#result { margin-top: 15px; font-weight: bold; }
|
|
|
|
|
hr { margin: 30px 0; }
|
|
|
|
|
</style>
|
2025-05-06 10:12:55 +00:00
|
|
|
</head>
|
2025-05-06 08:51:13 +00:00
|
|
|
<body>
|
2025-05-06 10:12:55 +00:00
|
|
|
<h1>Scanne le QR Code WhatsApp</h1>
|
|
|
|
|
<div id="qrcode">Chargement...</div>
|
|
|
|
|
|
2025-05-06 13:55:59 +00:00
|
|
|
<hr>
|
|
|
|
|
|
|
|
|
|
<h2>Envoyer du message interactif avec image</h2>
|
|
|
|
|
<form id="interactiveForm">
|
|
|
|
|
<label>
|
|
|
|
|
Téléphone (sans +, ex: 33612345678):
|
|
|
|
|
<input type="text" name="phone" required placeholder="33612345678">
|
|
|
|
|
</label>
|
|
|
|
|
<label>
|
|
|
|
|
Caption:
|
|
|
|
|
<input type="text" name="caption" placeholder="Description par défaut">
|
|
|
|
|
</label>
|
|
|
|
|
<label>
|
|
|
|
|
Title:
|
|
|
|
|
<input type="text" name="title" placeholder="Titre par défaut">
|
|
|
|
|
</label>
|
|
|
|
|
<label>
|
|
|
|
|
Subtitle:
|
|
|
|
|
<input type="text" name="subtitle" placeholder="Sous-titre">
|
|
|
|
|
</label>
|
|
|
|
|
<label>
|
|
|
|
|
Footer:
|
|
|
|
|
<input type="text" name="footer" placeholder="Pied de page">
|
|
|
|
|
</label>
|
|
|
|
|
<label>
|
|
|
|
|
URL Proposition:
|
|
|
|
|
<input type="url" name="propositionUrl" placeholder="https://exemple.com/prop.pdf" required>
|
|
|
|
|
</label>
|
|
|
|
|
<label>
|
|
|
|
|
URL Spec Machine:
|
|
|
|
|
<input type="url" name="specUrl" placeholder="https://exemple.com/spec.pdf" required>
|
|
|
|
|
</label>
|
|
|
|
|
<button type="submit">Envoyer le message</button>
|
|
|
|
|
</form>
|
|
|
|
|
<div id="result"></div>
|
|
|
|
|
|
2025-05-06 08:51:13 +00:00
|
|
|
<script>
|
2025-05-06 13:55:59 +00:00
|
|
|
// Vérification du QR code et statut de connexion
|
2025-05-06 10:12:55 +00:00
|
|
|
async function checkQR() {
|
2025-05-06 13:57:51 +00:00
|
|
|
try {
|
|
|
|
|
const res = await fetch('/api/qrcode');
|
|
|
|
|
const data = await res.json();
|
|
|
|
|
console.log('Réponse /api/qrcode :', data);
|
|
|
|
|
|
|
|
|
|
const qrContainer = document.getElementById('qrcode');
|
|
|
|
|
if (data.connected) {
|
|
|
|
|
qrContainer.innerHTML = '✅ Connecté à WhatsApp !';
|
|
|
|
|
} else if (data.qr) {
|
|
|
|
|
// Si data.qr est une chaîne (Data-URL)
|
|
|
|
|
if (typeof data.qr === 'string') {
|
2025-05-06 13:55:59 +00:00
|
|
|
qrContainer.innerHTML = `<img src="${data.qr}" alt="QR Code WhatsApp" width="200" height="200"/>`;
|
2025-05-06 13:57:51 +00:00
|
|
|
}
|
|
|
|
|
// Sinon, si c'est un objet { data: […], mime: 'image/png' }
|
|
|
|
|
else if (data.qr.data) {
|
|
|
|
|
const uint8Array = new Uint8Array(data.qr.data);
|
|
|
|
|
const base64 = btoa(String.fromCharCode(...uint8Array));
|
|
|
|
|
const src = `data:${data.qr.mime};base64,${base64}`;
|
|
|
|
|
qrContainer.innerHTML = `<img src="${src}" alt="QR Code WhatsApp" width="200" height="200"/>`;
|
|
|
|
|
} else {
|
|
|
|
|
qrContainer.textContent = 'QR reçu, mais format non pris en charge.';
|
2025-05-06 13:55:59 +00:00
|
|
|
}
|
2025-05-06 13:57:51 +00:00
|
|
|
} else {
|
|
|
|
|
qrContainer.textContent = 'Pas encore de QR disponible.';
|
2025-05-06 10:12:55 +00:00
|
|
|
}
|
2025-05-06 13:57:51 +00:00
|
|
|
} catch (err) {
|
|
|
|
|
console.error('Erreur checkQR:', err);
|
2025-05-06 08:51:13 +00:00
|
|
|
}
|
2025-05-06 13:57:51 +00:00
|
|
|
setTimeout(checkQR, 3000);
|
|
|
|
|
}
|
2025-05-06 10:12:55 +00:00
|
|
|
checkQR();
|
2025-05-06 13:55:59 +00:00
|
|
|
|
|
|
|
|
// Envoi du formulaire interactif
|
|
|
|
|
document.getElementById('interactiveForm').addEventListener('submit', async (e) => {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
const formData = new FormData(e.target);
|
|
|
|
|
const body = {};
|
|
|
|
|
formData.forEach((value, key) => body[key] = value);
|
|
|
|
|
|
|
|
|
|
const res = await fetch('/sendInteractiveImage', {
|
|
|
|
|
method: 'POST',
|
|
|
|
|
headers: { 'Content-Type': 'application/json' },
|
|
|
|
|
body: JSON.stringify(body)
|
|
|
|
|
});
|
|
|
|
|
const data = await res.json();
|
|
|
|
|
const resultDiv = document.getElementById('result');
|
|
|
|
|
if (data.success) {
|
|
|
|
|
resultDiv.textContent = '✅ Message envoyé avec succès';
|
|
|
|
|
resultDiv.style.color = 'green';
|
|
|
|
|
} else {
|
|
|
|
|
resultDiv.textContent = '❌ Erreur : ' + (data.error || 'Inconnue');
|
|
|
|
|
resultDiv.style.color = 'red';
|
|
|
|
|
}
|
|
|
|
|
});
|
2025-05-06 08:51:13 +00:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
