Update online.html
Browse files- online.html +87 -5
    	
        online.html
    CHANGED
    
    | @@ -1,11 +1,93 @@ | |
| 1 | 
             
            <!DOCTYPE html>
         | 
| 2 | 
            -
            <html>
         | 
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
| 3 | 
             
            <body>
         | 
| 4 |  | 
| 5 | 
            -
            < | 
| 6 | 
            -
            < | 
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
| 7 |  | 
| 8 | 
            -
            < | 
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
| 9 |  | 
| 10 | 
             
            </body>
         | 
| 11 | 
            -
            </html>
         | 
|  | |
| 1 | 
             
            <!DOCTYPE html>
         | 
| 2 | 
            +
            <html lang="en">
         | 
| 3 | 
            +
            <head>
         | 
| 4 | 
            +
                <meta charset="UTF-8">
         | 
| 5 | 
            +
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
         | 
| 6 | 
            +
                <title>WhatsApp QR Code</title>
         | 
| 7 | 
            +
                <style>
         | 
| 8 | 
            +
                    .button {
         | 
| 9 | 
            +
                        border: none;
         | 
| 10 | 
            +
                        color: white;
         | 
| 11 | 
            +
                        padding: 16px 32px;
         | 
| 12 | 
            +
                        text-align: center;
         | 
| 13 | 
            +
                        text-decoration: none;
         | 
| 14 | 
            +
                        display: inline-block;
         | 
| 15 | 
            +
                        font-size: 16px;
         | 
| 16 | 
            +
                        margin: 4px 2px;
         | 
| 17 | 
            +
                        transition-duration: 0.4s;
         | 
| 18 | 
            +
                        cursor: pointer;
         | 
| 19 | 
            +
                    }
         | 
| 20 | 
            +
                    .buttonGreen {
         | 
| 21 | 
            +
                        background-color: white;
         | 
| 22 | 
            +
                        color: black;
         | 
| 23 | 
            +
                        border: 2px solid #4CAF50;
         | 
| 24 | 
            +
                    }
         | 
| 25 | 
            +
                    .buttonGreen:hover {
         | 
| 26 | 
            +
                        background-color: #4CAF50;
         | 
| 27 | 
            +
                        color: white;
         | 
| 28 | 
            +
                    }
         | 
| 29 | 
            +
                    #qrCode {
         | 
| 30 | 
            +
                        display: block;
         | 
| 31 | 
            +
                        margin: 20px auto;
         | 
| 32 | 
            +
                    }
         | 
| 33 | 
            +
                    #statusText {
         | 
| 34 | 
            +
                        text-align: center;
         | 
| 35 | 
            +
                        color: blue;
         | 
| 36 | 
            +
                    }
         | 
| 37 | 
            +
                </style>
         | 
| 38 | 
            +
            </head>
         | 
| 39 | 
             
            <body>
         | 
| 40 |  | 
| 41 | 
            +
                <h1>WhatsApp QR Code</h1>
         | 
| 42 | 
            +
                <form id="authForm">
         | 
| 43 | 
            +
                    <label for="idInstance">Id Instance:</label><br>
         | 
| 44 | 
            +
                    <input required type="text" id="idInstance" name="idInstance"><br>
         | 
| 45 | 
            +
                    <label for="apiTokenInstance">API Token:</label><br>
         | 
| 46 | 
            +
                    <input required type="text" id="apiTokenInstance" name="apiTokenInstance"><br><br>
         | 
| 47 | 
            +
                    <button type="submit" class="button buttonGreen">Get QR Code</button>
         | 
| 48 | 
            +
                </form>
         | 
| 49 |  | 
| 50 | 
            +
                <p id="statusText"></p>
         | 
| 51 | 
            +
                <img id="qrCode" src="" alt="QR Code" hidden>
         | 
| 52 | 
            +
             | 
| 53 | 
            +
                <script>
         | 
| 54 | 
            +
                    document.getElementById("authForm").addEventListener("submit", function(event) {
         | 
| 55 | 
            +
                        event.preventDefault();
         | 
| 56 | 
            +
             | 
| 57 | 
            +
                        const idInstance = document.getElementById("idInstance").value;
         | 
| 58 | 
            +
                        const apiTokenInstance = document.getElementById("apiTokenInstance").value;
         | 
| 59 | 
            +
                        const apiUrl = "https://apiUrl"; // Замените на фактический URL API
         | 
| 60 | 
            +
             | 
| 61 | 
            +
                        function updateQRCode() {
         | 
| 62 | 
            +
                            fetch(`${apiUrl}/waInstance${idInstance}/qr/${apiTokenInstance}`)
         | 
| 63 | 
            +
                                .then(response => response.json())
         | 
| 64 | 
            +
                                .then(data => {
         | 
| 65 | 
            +
                                    const qrCodeElement = document.getElementById("qrCode");
         | 
| 66 | 
            +
                                    const statusText = document.getElementById("statusText");
         | 
| 67 | 
            +
                                    
         | 
| 68 | 
            +
                                    if (data.type === 'qrCode') {
         | 
| 69 | 
            +
                                        qrCodeElement.src = `data:image/png;base64,${data.message}`;
         | 
| 70 | 
            +
                                        qrCodeElement.hidden = false;
         | 
| 71 | 
            +
                                        statusText.textContent = "";
         | 
| 72 | 
            +
                                    } else if (data.type === 'error') {
         | 
| 73 | 
            +
                                        qrCodeElement.hidden = true;
         | 
| 74 | 
            +
                                        statusText.textContent = `Error: ${data.message}`;
         | 
| 75 | 
            +
                                    } else if (data.type === 'alreadyLogged') {
         | 
| 76 | 
            +
                                        qrCodeElement.hidden = true;
         | 
| 77 | 
            +
                                        statusText.textContent = "Account already authorized.";
         | 
| 78 | 
            +
                                    }
         | 
| 79 | 
            +
                                })
         | 
| 80 | 
            +
                                .catch(error => {
         | 
| 81 | 
            +
                                    console.error("Error fetching QR code:", error);
         | 
| 82 | 
            +
                                    document.getElementById("statusText").textContent = "Error fetching QR code.";
         | 
| 83 | 
            +
                                });
         | 
| 84 | 
            +
                        }
         | 
| 85 | 
            +
             | 
| 86 | 
            +
                        // Запуск обновления QR-кода каждую секунду
         | 
| 87 | 
            +
                        setInterval(updateQRCode, 1000);
         | 
| 88 | 
            +
                        updateQRCode(); // Вызов сразу после отправки формы
         | 
| 89 | 
            +
                    });
         | 
| 90 | 
            +
                </script>
         | 
| 91 |  | 
| 92 | 
             
            </body>
         | 
| 93 | 
            +
            </html>
         |