xwwxxw
This commit is contained in:
parent
dcb36bf059
commit
a23a3e064a
@ -2,116 +2,66 @@
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Connexion WhatsApp & Envoi Interactif</title>
|
||||
<title>Connexion WhatsApp</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; }
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
text-align: center;
|
||||
background: #f2f2f2;
|
||||
padding: 40px;
|
||||
}
|
||||
#qr-container {
|
||||
margin-top: 40px;
|
||||
}
|
||||
#qr {
|
||||
max-width: 300px;
|
||||
margin: auto;
|
||||
display: block;
|
||||
}
|
||||
#status {
|
||||
margin-top: 20px;
|
||||
font-size: 18px;
|
||||
color: #444;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Scanne le QR Code WhatsApp</h1>
|
||||
<div id="qrcode">Chargement...</div>
|
||||
<h1>Connexion WhatsApp</h1>
|
||||
<p>Scannez le QR Code avec votre application WhatsApp</p>
|
||||
|
||||
<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>
|
||||
<div id="qr-container">
|
||||
<img id="qr" src="" alt="QR Code WhatsApp" />
|
||||
<div id="status">Chargement du QR code...</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Vérification du QR code et statut de connexion
|
||||
async function checkQR() {
|
||||
try {
|
||||
const res = await fetch('/api/qrcode');
|
||||
const data = await res.json();
|
||||
console.log('Réponse /api/qrcode :', data);
|
||||
async function fetchQRCode() {
|
||||
try {
|
||||
const res = await fetch('/api/qrcode');
|
||||
const data = await res.json();
|
||||
|
||||
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') {
|
||||
qrContainer.innerHTML = `<img src="${data.qr}" alt="QR Code WhatsApp" width="200" height="200"/>`;
|
||||
}
|
||||
// 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"/>`;
|
||||
const qrImg = document.getElementById('qr');
|
||||
const status = document.getElementById('status');
|
||||
|
||||
if (data.connected) {
|
||||
qrImg.style.display = 'none';
|
||||
status.textContent = "✅ Connecté à WhatsApp";
|
||||
} else if (data.qr) {
|
||||
qrImg.src = data.qr;
|
||||
qrImg.style.display = 'block';
|
||||
status.textContent = "QR code prêt à être scanné";
|
||||
} else {
|
||||
qrContainer.textContent = 'QR reçu, mais format non pris en charge.';
|
||||
status.textContent = "⏳ En attente de génération du QR code...";
|
||||
}
|
||||
} else {
|
||||
qrContainer.textContent = 'Pas encore de QR disponible.';
|
||||
} catch (error) {
|
||||
console.error("Erreur de récupération QR:", error);
|
||||
document.getElementById('status').textContent = "❌ Impossible de charger le QR Code";
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Erreur checkQR:', err);
|
||||
}
|
||||
setTimeout(checkQR, 3000);
|
||||
}
|
||||
checkQR();
|
||||
|
||||
// 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';
|
||||
}
|
||||
});
|
||||
// Rafraîchit toutes les 5 secondes
|
||||
fetchQRCode();
|
||||
setInterval(fetchQRCode, 5000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user