<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>WhatsApp QR Code</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f0f0f0; } .header { background-color: #4CAF50; color: white; text-align: center; padding: 15px 0; font-size: 24px; } .container { display: flex; justify-content: space-between; padding: 20px; } .form-container, .qr-container { flex: 1; margin: 10px; } .form-container { display: flex; flex-direction: column; align-items: flex-start; } form { width: 100%; } label, input { display: block; width: 100%; margin-bottom: 10px; } input { padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; } .button { width: 100%; padding: 16px 32px; margin-top: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; transition-duration: 0.4s; } .button:hover { background-color: #45a049; } .qr-container { display: flex; flex-direction: column; align-items: center; } #qrCode { margin-top: 20px; border: 1px solid #ccc; padding: 10px; background-color: white; border-radius: 8px; } #statusText { text-align: center; color: blue; margin-top: 10px; } .success-message { color: green; font-size: 20px; text-align: center; margin-top: 10px; } </style> </head> <body> <div class="header">WhatsApp-API-Connect</div> <div class="container"> <div class="form-container"> <br><br><br><br><br><br><br><br><br><br><br><br><br> <form id="authForm"> <label for="idInstance">Id пользователя:</label> <input required type="text" id="idInstance" name="idInstance" value=""> <label for="apiTokenInstance">API токен:</label> <input required type="text" id="apiTokenInstance" name="apiTokenInstance" value=""> <button type="submit" class="button">Получить QR код</button> </form> </div> <div class="qr-container"> <p id="statusText"></p> <img id="qrCode" src="" alt="QR Code" hidden> <div id="successMessage" class="success-message" hidden> <h1 style="color: red;">API управление активно!</h1> <p style="color: hsl(0, 0%, 50%);">Доступны:</p> Рассылка сообщений.<br> Рассылка видео.<br> Рассылка аудио.<br> Создание закрытых групп.<br> Добавление пользователя в группу.<br> Удаление пользователя из группы.<br> Создание опросов в группе.<br> Проверка наличия WhatsApp по номеру телефона.<br><br> <p style="color: hsl(0, 0%, 50%);">В работе:</p> Прием сообщений.<br> Отписка по слову "Стоп".<br> Более сложная логика взамодействия. </div> </div> </div> <script> document.getElementById("authForm").addEventListener("submit", function(event) { event.preventDefault(); const idInstance = document.getElementById("idInstance").value; const apiTokenInstance = document.getElementById("apiTokenInstance").value; const apiUrl = "https://api.green-api.com"; // Замените на фактический URL API function updateQRCode() { fetch(`${apiUrl}/waInstance${idInstance}/qr/${apiTokenInstance}`) .then(response => response.json()) .then(data => { const qrCodeElement = document.getElementById("qrCode"); const statusText = document.getElementById("statusText"); const successMessage = document.getElementById("successMessage"); if (data.type === 'qrCode') { qrCodeElement.src = `data:image/png;base64,${data.message}`; qrCodeElement.hidden = false; successMessage.hidden = true; statusText.textContent = ""; } else if (data.type === 'error') { qrCodeElement.hidden = true; successMessage.hidden = true; statusText.textContent = `Error: ${data.message}`; } else if (data.type === 'alreadyLogged') { qrCodeElement.hidden = true; successMessage.hidden = false; statusText.textContent = ""; } }) .catch(error => { console.error("Error fetching QR code:", error); document.getElementById("statusText").textContent = "Error fetching QR code."; }); } // Запуск обновления QR-кода каждую секунду setInterval(updateQRCode, 1000); updateQRCode(); // Вызов сразу после отправки формы }); </script> </body> </html>