DmitrMakeev commited on
Commit
a2fc930
1 Parent(s): d0a921f

Update se_mes_im2.html

Browse files
Files changed (1) hide show
  1. se_mes_im2.html +106 -115
se_mes_im2.html CHANGED
@@ -3,7 +3,8 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Send Messages with Image</title>
 
7
  <style>
8
  body {
9
  font-family: Arial, sans-serif;
@@ -19,146 +20,136 @@
19
  margin: 0;
20
  border-bottom: 2px solid #388E3C;
21
  }
22
- .input-row {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
23
  display: flex;
24
  justify-content: center;
25
- gap: 10px;
26
- margin-top: 20px;
 
 
27
  }
28
- .input-row input, .input-row textarea {
29
- padding: 10px;
30
- font-size: 16px;
31
- border: 1px solid #ccc;
32
- border-radius: 5px;
33
  }
34
- #messageInput {
35
- width: 80%;
36
  margin-top: 20px;
 
 
 
 
37
  }
38
  #progressBarContainer {
39
  width: 80%;
40
  margin: 20px auto;
41
- }
42
- #progressBar {
43
- width: 100%;
44
  background-color: #ddd;
 
 
45
  }
46
- #progress {
47
  width: 0%;
48
- height: 30px;
49
  background-color: #4CAF50;
 
50
  text-align: center;
51
- line-height: 30px;
52
  color: white;
53
  }
54
- #sendButton {
55
- color: white;
56
- background-color: #4CAF50;
57
- border: none;
58
- cursor: pointer;
59
- padding: 10px 20px;
60
- font-size: 16px;
61
- border-radius: 5px;
62
- margin-top: 20px;
63
- }
64
- #sendButton:hover {
65
- background-color: #388E3C;
66
- }
67
  </style>
68
  </head>
69
  <body>
70
- <h1>Отправка сообщения с картинкой</h1>
71
- <div class="input-row">
72
- <input type="text" id="apiKeyInput" placeholder="Введите API ключ">
73
- <input type="number" id="minDelayInput" placeholder="Min Delay (ms)" value="500">
74
- <input type="number" id="maxDelayInput" placeholder="Max Delay (ms)" value="1000">
75
  </div>
76
- <textarea id="messageInput" placeholder="Введите текст сообщения с картинкой."></textarea>
77
  <div id="progressBarContainer">
78
- <div id="progressBar">
79
- <div id="progress">0%</div>
80
- </div>
81
  </div>
82
- <input type="file" id="fileInput" accept=".txt">
83
- <button id="sendButton">Запустить рассылку</button>
84
-
 
 
 
85
  <script>
86
- document.getElementById('sendButton').addEventListener('click', function() {
87
- const apiKey = document.getElementById('apiKeyInput').value;
88
- const urlFile = localStorage.getItem('fileUrl');
89
- const fileName = localStorage.getItem('filename');
90
- const message = document.getElementById('messageInput').value;
91
- const minDelay = parseInt(document.getElementById('minDelayInput').value) || 500;
92
- const maxDelay = parseInt(document.getElementById('maxDelayInput').value) || 10000;
93
- if (!apiKey) {
94
- alert('Please enter your API key.');
95
- return;
96
- }
97
- if (!urlFile) {
98
- alert('URL of the file is not found in local storage.');
99
- return;
100
- }
101
- if (!fileName) {
102
- alert('File name is not found in local storage.');
103
- return;
104
- }
105
- if (!message) {
106
- alert('Please enter a message.');
107
- return;
108
- }
109
- if (minDelay >= maxDelay) {
110
- alert('Min delay must be less than max delay.');
111
- return;
112
- }
113
- const fileInput = document.getElementById('fileInput');
114
- const file = fileInput.files[0];
115
- if (!file) {
116
- alert('Please select a file.');
117
- return;
118
- }
119
- const reader = new FileReader();
120
- reader.onload = function(event) {
121
- const text = event.target.result;
122
- const phones = text.split('\n').map(phone => phone.trim()).filter(phone => phone);
123
- sendMessages(phones, apiKey, urlFile, fileName, message, minDelay, maxDelay);
124
- };
125
- reader.readAsText(file);
126
- });
127
- async function sendMessages(phones, apiKey, urlFile, fileName, message, minDelay, maxDelay) {
128
- const totalPhones = phones.length;
129
- const progressBar = document.getElementById('progress');
130
- for (let i = 0; i < totalPhones; i++) {
131
- const phone = phones[i];
132
- try {
133
- const response = await fetch(`https://api.green-api.com/waInstance1101952913/sendFileByUrl/${apiKey}`, {
134
- method: 'POST',
135
- headers: {
136
- 'Content-Type': 'application/json'
137
- },
138
- body: JSON.stringify({
139
- chatId: `${phone}@c.us`,
140
- urlFile: urlFile,
141
- fileName: fileName,
142
- caption: message
143
- })
144
- });
145
- if (!response.ok) {
146
- throw new Error(`HTTP error! status: ${response.status}`);
147
- }
148
- const data = await response.json();
149
- console.log(`Message sent to ${phone}:`, data);
150
- } catch (error) {
151
- console.error(`Error sending message to ${phone}:`, error);
152
- }
153
- const progress = ((i + 1) / totalPhones) * 100;
154
- progressBar.style.width = `${progress}%`;
155
- progressBar.textContent = `${progress.toFixed(2)}%`;
156
- if (i < totalPhones - 1) {
157
- const randomDelay = Math.floor(Math.random() * (maxDelay - minDelay + 1)) + minDelay;
158
- await new Promise(resolve => setTimeout(resolve, randomDelay));
159
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
160
  }
161
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
162
  </script>
163
  </body>
164
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>File Upload</title>
7
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
8
  <style>
9
  body {
10
  font-family: Arial, sans-serif;
 
20
  margin: 0;
21
  border-bottom: 2px solid #388E3C;
22
  }
23
+ button[type="submit"] {
24
+ color: white;
25
+ background-color: #4CAF50;
26
+ border: none;
27
+ cursor: pointer;
28
+ padding: 10px 20px;
29
+ font-size: 16px;
30
+ border-radius: 5px;
31
+ margin-top: 20px;
32
+ }
33
+ button[type="submit"]:hover {
34
+ background-color: #388E3C;
35
+ }
36
+ #mediaContainer {
37
+ margin-top: 20px;
38
  display: flex;
39
  justify-content: center;
40
+ align-items: center;
41
+ flex-direction: column;
42
+ max-width: 100%;
43
+ height: auto;
44
  }
45
+ #mediaContainer img, #mediaContainer video {
46
+ max-width: 100%;
47
+ height: auto;
48
+ object-fit: contain;
 
49
  }
50
+ #imageUrl {
 
51
  margin-top: 20px;
52
+ font-size: 16px;
53
+ color: #333;
54
+ cursor: pointer;
55
+ text-decoration: underline;
56
  }
57
  #progressBarContainer {
58
  width: 80%;
59
  margin: 20px auto;
 
 
 
60
  background-color: #ddd;
61
+ border-radius: 13px;
62
+ padding: 3px;
63
  }
64
+ #progressBar {
65
  width: 0%;
66
+ height: 20px;
67
  background-color: #4CAF50;
68
+ border-radius: 10px;
69
  text-align: center;
70
+ line-height: 20px;
71
  color: white;
72
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
73
  </style>
74
  </head>
75
  <body>
76
+ <h1>Upload File</h1>
77
+ <div id="mediaContainer">
78
+ <!-- Media content will be displayed here -->
 
 
79
  </div>
 
80
  <div id="progressBarContainer">
81
+ <div id="progressBar">0%</div>
 
 
82
  </div>
83
+ <div id="imageUrl" onclick="copyToClipboard(this)">Click to copy URL</div>
84
+ <form id="uploadForm" enctype="multipart/form-data" method="post" action="/upload">
85
+ <input type="file" name="file">
86
+ <button type="submit">Upload</button>
87
+ </form>
88
+ <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
89
  <script>
90
+ document.getElementById('uploadForm').addEventListener('submit', function(event) {
91
+ event.preventDefault();
92
+ var formData = new FormData(this);
93
+ var request = new XMLHttpRequest();
94
+ request.open('POST', '/upload');
95
+ request.upload.addEventListener('progress', function(event) {
96
+ if (event.lengthComputable) {
97
+ var percentComplete = (event.loaded / event.total) * 100;
98
+ document.getElementById('progressBar').style.width = percentComplete + '%';
99
+ document.getElementById('progressBar').innerText = Math.round(percentComplete) + '%';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
100
  }
101
+ }, false);
102
+ request.addEventListener('load', function(event) {
103
+ var response = event.target.responseText;
104
+ var fullUrl = response.split('saved to ')[1];
105
+ var filename = fullUrl.split('/').pop();
106
+ document.getElementById('imageUrl').innerText = fullUrl;
107
+ displayMedia(fullUrl);
108
+ document.getElementById('progressBar').style.width = '0%';
109
+ document.getElementById('progressBar').innerText = '0%';
110
+ // Сохранение имени файла и ссылки в локальное хранилище
111
+ localStorage.setItem('filename', filename);
112
+ localStorage.setItem('fileUrl', fullUrl);
113
+ }, false);
114
+ request.send(formData);
115
+ });
116
+ function displayMedia(url) {
117
+ var mediaContainer = document.getElementById('mediaContainer');
118
+ mediaContainer.innerHTML = '';
119
+ var extension = url.split('.').pop().toLowerCase();
120
+ if (['jpg', 'jpeg', 'png', 'gif'].includes(extension)) {
121
+ var img = document.createElement('img');
122
+ img.src = url;
123
+ mediaContainer.appendChild(img);
124
+ } else if (['mp4', 'webm', 'ogg'].includes(extension)) {
125
+ var video = document.createElement('video');
126
+ video.src = url;
127
+ video.controls = true;
128
+ mediaContainer.appendChild(video);
129
+ } else if (['mp3', 'wav', 'ogg'].includes(extension)) {
130
+ var audio = document.createElement('audio');
131
+ audio.src = url;
132
+ audio.controls = true;
133
+ mediaContainer.appendChild(audio);
134
+ } else {
135
+ mediaContainer.innerText = 'Unsupported file type';
136
  }
137
  }
138
+ function copyToClipboard(element) {
139
+ var tempInput = document.createElement("input");
140
+ tempInput.value = element.innerText;
141
+ document.body.appendChild(tempInput);
142
+ tempInput.select();
143
+ document.execCommand("copy");
144
+ document.body.removeChild(tempInput);
145
+ Toastify({
146
+ text: "URL copied to clipboard",
147
+ duration: 3000,
148
+ gravity: "top",
149
+ position: "center",
150
+ backgroundColor: "#4CAF50",
151
+ }).showToast();
152
+ }
153
  </script>
154
  </body>
155
  </html>