Spaces:
Runtime error
Runtime error
<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>Create Group with Members</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">Create Group</button> | |
<div class="group-id-container"> | |
<span class="group-id" id="groupIdToCopy" onclick="copyToClipboard(this)">Click here to copy the group ID</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: "center", | |
backgroundColor: "#4CAF50", | |
}).showToast(); | |
console.log('Response JSON:', data); | |
} catch (error) { | |
Toastify({ | |
text: "Ошибка создания группы!", | |
duration: 3000, | |
gravity: "top", | |
position: "center", | |
backgroundColor: "#4CAF50", | |
}).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: "center", | |
backgroundColor: "#4CAF50", | |
}).showToast(); | |
} | |
</script> | |
</body> | |
</html> | |