|  | <!DOCTYPE html> | 
					
						
						|  | <html lang="en"> | 
					
						
						|  | <head> | 
					
						
						|  | <meta charset="UTF-8"> | 
					
						
						|  | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | 
					
						
						|  | <title>Create Group with Members</title> | 
					
						
						|  | <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css"> | 
					
						
						|  | <style> | 
					
						
						|  | body { | 
					
						
						|  | font-family: Arial, sans-serif; | 
					
						
						|  | text-align: center; | 
					
						
						|  | background-color: #f0f0f0; | 
					
						
						|  | margin: 0; | 
					
						
						|  | padding: 0; | 
					
						
						|  | } | 
					
						
						|  | h1 { | 
					
						
						|  | background-color: #4CAF50; | 
					
						
						|  | color: white; | 
					
						
						|  | padding: 20px; | 
					
						
						|  | margin: 0; | 
					
						
						|  | border-bottom: 2px solid #388E3C; | 
					
						
						|  | } | 
					
						
						|  | .input-row { | 
					
						
						|  | display: flex; | 
					
						
						|  | justify-content: center; | 
					
						
						|  | gap: 10px; | 
					
						
						|  | margin-top: 20px; | 
					
						
						|  | } | 
					
						
						|  | .input-row input { | 
					
						
						|  | padding: 10px; | 
					
						
						|  | font-size: 16px; | 
					
						
						|  | border: 1px solid #ccc; | 
					
						
						|  | border-radius: 5px; | 
					
						
						|  | } | 
					
						
						|  | #fileInput { | 
					
						
						|  | margin-top: 20px; | 
					
						
						|  | } | 
					
						
						|  | #createGroupButton { | 
					
						
						|  | color: white; | 
					
						
						|  | background-color: #4CAF50; | 
					
						
						|  | border: none; | 
					
						
						|  | cursor: pointer; | 
					
						
						|  | padding: 10px 20px; | 
					
						
						|  | font-size: 16px; | 
					
						
						|  | border-radius: 5px; | 
					
						
						|  | margin-top: 20px; | 
					
						
						|  | } | 
					
						
						|  | #createGroupButton:hover { | 
					
						
						|  | background-color: #388E3C; | 
					
						
						|  | } | 
					
						
						|  | .group-id-container { | 
					
						
						|  | margin-top: 20px; | 
					
						
						|  | } | 
					
						
						|  | .group-id { | 
					
						
						|  | display: inline-block; | 
					
						
						|  | padding: 10px; | 
					
						
						|  | background-color: #fff; | 
					
						
						|  | border: 1px solid #ccc; | 
					
						
						|  | border-radius: 5px; | 
					
						
						|  | cursor: pointer; | 
					
						
						|  | } | 
					
						
						|  | </style> | 
					
						
						|  | </head> | 
					
						
						|  | <body> | 
					
						
						|  | <h1>Создание закрытой группы пользователей</h1> | 
					
						
						|  | <div class="input-row"> | 
					
						
						|  | <input type="text" id="apiKeyInput" placeholder="Enter API key"> | 
					
						
						|  | <input type="text" id="groupNameInput" placeholder="Enter group name"> | 
					
						
						|  | </div> | 
					
						
						|  | <input type="file" id="fileInput" accept=".txt"> | 
					
						
						|  | <button id="createGroupButton">Добавть группу</button> | 
					
						
						|  | <div class="group-id-container"> | 
					
						
						|  | <span class="group-id" id="groupIdToCopy" onclick="copyToClipboard(this)">После создание группы, кликните что бы скопировать ИД</span> | 
					
						
						|  | </div> | 
					
						
						|  | <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script> | 
					
						
						|  | <script> | 
					
						
						|  | document.getElementById('createGroupButton').addEventListener('click', async function() { | 
					
						
						|  | const apiKey = document.getElementById('apiKeyInput').value; | 
					
						
						|  | const groupName = document.getElementById('groupNameInput').value; | 
					
						
						|  | const fileInput = document.getElementById('fileInput'); | 
					
						
						|  | const file = fileInput.files[0]; | 
					
						
						|  |  | 
					
						
						|  | if (!apiKey || !groupName || !file) { | 
					
						
						|  | alert('Please enter an API key, group name, and select a file.'); | 
					
						
						|  | return; | 
					
						
						|  | } | 
					
						
						|  |  | 
					
						
						|  | const reader = new FileReader(); | 
					
						
						|  | reader.onload = async function(event) { | 
					
						
						|  | const text = event.target.result; | 
					
						
						|  | const chatIds = text.split('\n') | 
					
						
						|  | .map(line => line.trim()) | 
					
						
						|  | .filter(line => line && /^\d+$/.test(line)) | 
					
						
						|  | .map(line => line + '@c.us'); | 
					
						
						|  |  | 
					
						
						|  | if (chatIds.length === 0) { | 
					
						
						|  | alert('The file must contain valid phone numbers.'); | 
					
						
						|  | return; | 
					
						
						|  | } | 
					
						
						|  |  | 
					
						
						|  | const payload = { | 
					
						
						|  | groupName: groupName, | 
					
						
						|  | chatIds: chatIds | 
					
						
						|  | }; | 
					
						
						|  |  | 
					
						
						|  | console.log('Payload:', payload); | 
					
						
						|  |  | 
					
						
						|  | try { | 
					
						
						|  | const url = `https://api.green-api.com/waInstance1101952913/createGroup/${apiKey}`; | 
					
						
						|  | const response = await fetch(url, { | 
					
						
						|  | method: 'POST', | 
					
						
						|  | headers: { | 
					
						
						|  | 'Content-Type': 'application/json' | 
					
						
						|  | }, | 
					
						
						|  | body: JSON.stringify(payload) | 
					
						
						|  | }); | 
					
						
						|  |  | 
					
						
						|  | console.log('Response status:', response.status); | 
					
						
						|  |  | 
					
						
						|  | if (!response.ok) { | 
					
						
						|  | const errorText = await response.text(); | 
					
						
						|  | console.error('Error response:', errorText); | 
					
						
						|  | throw new Error(`HTTP error! status: ${response.status} - ${errorText}`); | 
					
						
						|  | } | 
					
						
						|  |  | 
					
						
						|  | const data = await response.json(); | 
					
						
						|  | document.getElementById('groupIdToCopy').innerText = data.chatId; | 
					
						
						|  | Toastify({ | 
					
						
						|  | text: "Группв созданна успешно, пользователи добавленны!", | 
					
						
						|  | duration: 3000, | 
					
						
						|  | gravity: "top", | 
					
						
						|  | position: "right", | 
					
						
						|  | backgroundColor: "#96fa9d", | 
					
						
						|  | }).showToast(); | 
					
						
						|  | console.log('Response JSON:', data); | 
					
						
						|  | } catch (error) { | 
					
						
						|  |  | 
					
						
						|  | Toastify({ | 
					
						
						|  | text: "Ошибка создания группы!", | 
					
						
						|  | duration: 3000, | 
					
						
						|  | gravity: "top", | 
					
						
						|  | position: "right", | 
					
						
						|  | backgroundColor: "#fa0202", | 
					
						
						|  | }).showToast(); | 
					
						
						|  | } | 
					
						
						|  | }; | 
					
						
						|  | reader.readAsText(file); | 
					
						
						|  | }); | 
					
						
						|  |  | 
					
						
						|  | function copyToClipboard(element) { | 
					
						
						|  | const tempInput = document.createElement('input'); | 
					
						
						|  | document.body.appendChild(tempInput); | 
					
						
						|  | tempInput.value = element.innerText; | 
					
						
						|  | tempInput.select(); | 
					
						
						|  | document.execCommand('copy'); | 
					
						
						|  | document.body.removeChild(tempInput); | 
					
						
						|  | Toastify({ | 
					
						
						|  | text: "ИД группы скопировано, обязательно сохраните его, в последующем вы не сможете его получить!", | 
					
						
						|  | duration: 3000, | 
					
						
						|  | gravity: "top", | 
					
						
						|  | position: "right", | 
					
						
						|  | backgroundColor: "#fa8202", | 
					
						
						|  | }).showToast(); | 
					
						
						|  | } | 
					
						
						|  | </script> | 
					
						
						|  | </body> | 
					
						
						|  | </html> | 
					
						
						|  |  | 
					
						
						|  |  |