Myail - Bulk Email Sender<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n \r\n <link href=\"https:\/\/cdn.quilljs.com\/1.3.6\/quill.snow.css\" rel=\"stylesheet\">\r\n <style>\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n background-color: #F0F4F8; \/* Pastel Blue Gray *\/\r\n }\r\n .form-input {\r\n @apply w-full px-4 py-2 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition duration-200;\r\n }\r\n .form-label {\r\n @apply block text-sm font-medium text-gray-600 mb-1;\r\n }\r\n .btn {\r\n @apply px-6 py-2 rounded-lg font-semibold text-white transition-all duration-200 transform hover:scale-105 shadow-md disabled:opacity-50 disabled:cursor-not-allowed;\r\n }\r\n .btn-primary {\r\n @apply bg-indigo-500 hover:bg-indigo-600;\r\n }\r\n .btn-secondary {\r\n @apply bg-gray-400 hover:bg-gray-500;\r\n }\r\n .btn-warning {\r\n @apply bg-amber-500 hover:bg-amber-600;\r\n }\r\n .btn-danger {\r\n @apply bg-rose-500 hover:bg-rose-600;\r\n }\r\n .card {\r\n @apply bg-white p-6 sm:p-8 rounded-xl shadow-lg border border-gray-200;\r\n }\r\n #log-container {\r\n height: 250px;\r\n background-color: #2d3748;\r\n color: #e2e8f0;\r\n font-family: 'Courier New', Courier, monospace;\r\n font-size: 0.875rem;\r\n padding: 1rem;\r\n border-radius: 0.5rem;\r\n overflow-y: auto;\r\n border: 1px solid #4a5568;\r\n }\r\n .log-entry {\r\n padding-bottom: 0.25rem;\r\n }\r\n .log-entry.success { color: #68d391; }\r\n .log-entry.error { color: #fc8181; }\r\n .log-entry.info { color: #63b3ed; }\r\n .log-entry.warning { color: #f6e05e; }\r\n \/* Quill Editor Styling *\/\r\n #editor-container {\r\n height: 250px; \/* Adjust height as needed *\/\r\n background-color: #fff;\r\n }\r\n .ql-toolbar {\r\n border-top-left-radius: 0.5rem;\r\n border-top-right-radius: 0.5rem;\r\n background-color: #f9fafb;\r\n }\r\n .ql-container {\r\n border-bottom-left-radius: 0.5rem;\r\n border-bottom-right-radius: 0.5rem;\r\n }\r\n .card h2 {\r\n color: #4A5568; \/* Darker gray for titles *\/\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-gray-100\">\r\n\r\n <div class=\"container mx-auto p-4 sm:p-8 max-w-4xl\">\r\n <header class=\"text-center mb-10\">\r\n <h1 class=\"text-5xl font-bold text-red-500\">Myail<\/h1>\r\n <p class=\"text-lg text-gray-500 mt-2\">Your Professional Bulk Email Sender<\/p>\r\n <\/header>\r\n\r\n <div class=\"grid grid-cols-1 gap-8\">\r\n \r\n <div class=\"flex flex-col gap-8\">\r\n <div class=\"card bg-teal-50\/50\">\r\n <h2 class=\"text-2xl font-semibold text-gray-800 mb-4 border-b pb-2\"><i class=\"fas fa-project-diagram mr-2 text-teal-500\"><\/i>Project Management<\/h2>\r\n <div class=\"space-y-4\">\r\n <div>\r\n <label for=\"project-name\" class=\"form-label\">Project Name<\/label>\r\n <input type=\"text\" id=\"project-name\" class=\"form-input\" placeholder=\"e.g., Q4 Newsletter\">\r\n <\/div>\r\n <div class=\"flex gap-4\">\r\n <button id=\"save-project-btn\" class=\"btn btn-primary w-full\"><i class=\"fas fa-save mr-2\"><\/i>Save<\/button>\r\n <button id=\"new-project-btn\" class=\"btn btn-secondary w-full\"><i class=\"fas fa-file mr-2\"><\/i>New<\/button>\r\n <\/div>\r\n <hr>\r\n <div>\r\n <label for=\"project-list\" class=\"form-label\">Load Project<\/label>\r\n <select id=\"project-list\" class=\"form-input\"><\/select>\r\n <\/div>\r\n <div class=\"flex gap-4\">\r\n <button id=\"load-project-btn\" class=\"btn btn-secondary w-full\"><i class=\"fas fa-folder-open mr-2\"><\/i>Load<\/button>\r\n <button id=\"delete-project-btn\" class=\"btn btn-danger w-full\"><i class=\"fas fa-trash-alt mr-2\"><\/i>Delete<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card bg-sky-50\/50\">\r\n <h2 class=\"text-2xl font-semibold text-gray-800 mb-4 border-b pb-2\"><i class=\"fas fa-server mr-2 text-sky-500\"><\/i>Manage SMTP Servers<\/h2>\r\n <div id=\"smtp-form\" class=\"space-y-4\">\r\n <div>\r\n <label for=\"smtp-server\" class=\"form-label\">SMTP Server<\/label>\r\n <input type=\"text\" id=\"smtp-server\" class=\"form-input\" placeholder=\"smtp.gmail.com\">\r\n <\/div>\r\n <div>\r\n <label for=\"smtp-encryption\" class=\"form-label\">Encryption<\/label>\r\n <select id=\"smtp-encryption\" class=\"form-input\">\r\n <option value=\"tls\" selected>TLS<\/option>\r\n <option value=\"ssl\">SSL<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label for=\"smtp-port\" class=\"form-label\">SMTP Port<\/label>\r\n <input type=\"number\" id=\"smtp-port\" class=\"form-input\" placeholder=\"587\">\r\n <\/div>\r\n <div>\r\n <label for=\"sender-email\" class=\"form-label\">Authentication Email<\/label>\r\n <input type=\"email\" id=\"sender-email\" class=\"form-input\" placeholder=\"you@example.com\">\r\n <\/div>\r\n <div>\r\n <label for=\"password\" class=\"form-label\">Password \/ App Password<\/label>\r\n <input type=\"password\" id=\"password\" class=\"form-input\" placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\">\r\n <\/div>\r\n <div>\r\n <label for=\"daily-limit\" class=\"form-label\">Daily Limit<\/label>\r\n <input type=\"number\" id=\"daily-limit\" class=\"form-input\" value=\"50\">\r\n <\/div>\r\n <div class=\"flex gap-4\">\r\n <button id=\"add-smtp-btn\" class=\"btn btn-primary w-full\"><i class=\"fas fa-plus-circle mr-2\"><\/i>Add Server<\/button>\r\n <button id=\"verify-smtp-btn\" class=\"btn btn-secondary w-full\"><i class=\"fas fa-check-circle mr-2\"><\/i>Verify<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card bg-sky-50\/50\">\r\n <h2 class=\"text-2xl font-semibold text-gray-800 mb-4 border-b pb-2\"><i class=\"fas fa-list-alt mr-2 text-sky-500\"><\/i>Configured Servers<\/h2>\r\n <div id=\"smtp-list\" class=\"space-y-3 max-h-60 overflow-y-auto\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"flex flex-col gap-8\">\r\n <div class=\"card bg-lime-50\/50\">\r\n <h2 class=\"text-2xl font-semibold text-gray-800 mb-4 border-b pb-2\"><i class=\"fas fa-file-csv mr-2 text-lime-500\"><\/i>Upload Contacts<\/h2>\r\n <div>\r\n <label for=\"csv-file\" class=\"form-label\">CSV File<\/label>\r\n <input type=\"file\" id=\"csv-file\" accept=\".csv\" class=\"form-input\">\r\n <p class=\"text-xs text-gray-500 mt-1\">Must contain 'email' and 'name' columns.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card bg-lime-50\/50\">\r\n <h2 class=\"text-2xl font-semibold text-gray-800 mb-4 border-b pb-2\"><i class=\"fas fa-users mr-2 text-lime-500\"><\/i>Uploaded Contacts Preview<\/h2>\r\n <div id=\"csv-preview-container\" class=\"max-h-64 overflow-y-auto\">\r\n <p class=\"text-sm text-gray-500\">Upload a CSV file to see a preview of the records.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card bg-violet-50\/50\">\r\n <h2 class=\"text-2xl font-semibold text-gray-800 mb-4 border-b pb-2\"><i class=\"fas fa-envelope mr-2 text-violet-500\"><\/i>Compose Email<\/h2>\r\n <div class=\"space-y-4\">\r\n <div>\r\n <label for=\"from-name\" class=\"form-label\">From Name (Company\/Person)<\/label>\r\n <input type=\"text\" id=\"from-name\" class=\"form-input\" placeholder=\"Acme Inc.\">\r\n <\/div>\r\n <div>\r\n <label for=\"subject\" class=\"form-label\">Subject<\/label>\r\n <input type=\"text\" id=\"subject\" class=\"form-input\" placeholder=\"Your email subject\">\r\n <\/div>\r\n <div>\r\n <label for=\"body\" class=\"form-label\">Body<\/label>\r\n \r\n <div id=\"editor-container\">\r\n <p>Hi {name},<\/p><p><br><\/p><p>This is a message for you.<\/p>\r\n <\/div>\r\n <p class=\"text-xs text-gray-500 mt-1\">Use {name} to personalize.<\/p>\r\n <\/div>\r\n <div>\r\n <label for=\"attachment-file\" class=\"form-label\">Attachment<\/label>\r\n <input type=\"file\" id=\"attachment-file\" class=\"form-input\">\r\n <div id=\"attachment-info\" class=\"text-sm text-gray-600 mt-2\"><\/div>\r\n <\/div>\r\n <hr class=\"my-2\">\r\n <div class=\"space-y-2\">\r\n <label for=\"test-email-address\" class=\"form-label\">Test Email Address<\/label>\r\n <div class=\"flex gap-2\">\r\n <input type=\"email\" id=\"test-email-address\" class=\"form-input\" placeholder=\"test@example.com\">\r\n <button id=\"send-test-mail-btn\" class=\"btn btn-secondary whitespace-nowrap\"><i class=\"fas fa-vial mr-2\"><\/i>Send Test<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"flex flex-col gap-8\">\r\n <div class=\"card bg-rose-50\/50\">\r\n <h2 class=\"text-2xl font-semibold text-gray-800 mb-4 border-b pb-2\"><i class=\"fas fa-paper-plane mr-2 text-rose-500\"><\/i>Send Control<\/h2>\r\n <div id=\"send-control-buttons\" class=\"flex items-center justify-center gap-4\">\r\n <button id=\"send-btn\" class=\"btn btn-primary w-full\"><i class=\"fas fa-bolt mr-2\"><\/i>Start Sending<\/button>\r\n <button id=\"stop-btn\" class=\"btn btn-secondary w-full\" disabled><i class=\"fas fa-stop-circle mr-2\"><\/i>Stop<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card bg-rose-50\/50\">\r\n <h2 class=\"text-2xl font-semibold text-gray-800 mb-4 border-b pb-2\"><i class=\"fas fa-tasks mr-2 text-rose-500\"><\/i>Sending Progress<\/h2>\r\n <div class=\"grid grid-cols-1 sm:grid-cols-3 gap-4 text-center mb-4\">\r\n <div class=\"bg-blue-100 p-4 rounded-lg\">\r\n <p class=\"text-sm font-medium text-blue-800\">TOTAL<\/p>\r\n <p id=\"total-count\" class=\"text-2xl font-bold text-blue-900\">0<\/p>\r\n <\/div>\r\n <div class=\"bg-green-100 p-4 rounded-lg\">\r\n <p class=\"text-sm font-medium text-green-800\">SENT<\/p>\r\n <p id=\"sent-count\" class=\"text-2xl font-bold text-green-900\">0<\/p>\r\n <\/div>\r\n <div class=\"bg-red-100 p-4 rounded-lg\">\r\n <p class=\"text-sm font-medium text-red-800\">FAILED<\/p>\r\n <p id=\"failed-count\" class=\"text-2xl font-bold text-red-900\">0<\/p>\r\n <\/div>\r\n <\/div>\r\n <div id=\"progress-bar-container\" class=\"w-full bg-gray-200 rounded-full h-2.5 mb-4\">\r\n <div id=\"progress-bar\" class=\"bg-indigo-500 h-2.5 rounded-full\" style=\"width: 0%\"><\/div>\r\n <\/div>\r\n <h3 class=\"text-lg font-semibold text-gray-700 mb-2\">Live Log<\/h3>\r\n <div id=\"log-container\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <script src=\"https:\/\/smtpjs.com\/v3\/smtp.js\"><\/script>\r\n \r\n <script src=\"https:\/\/cdn.quilljs.com\/1.3.6\/quill.js\"><\/script>\r\n\r\n <script>\r\n \/\/ --- CONSTANTS AND CONFIGURATION ---\r\n const DELAY_BETWEEN_EMAILS = 25000; \/\/ 25 seconds\r\n\r\n \/\/ --- DOM Element References ---\r\n const smtpServerEl = document.getElementById('smtp-server');\r\n const smtpPortEl = document.getElementById('smtp-port');\r\n const smtpEncryptionEl = document.getElementById('smtp-encryption');\r\n const senderEmailEl = document.getElementById('sender-email');\r\n const passwordEl = document.getElementById('password');\r\n const dailyLimitEl = document.getElementById('daily-limit');\r\n const addSmtpBtn = document.getElementById('add-smtp-btn');\r\n const verifySmtpBtn = document.getElementById('verify-smtp-btn');\r\n const smtpListEl = document.getElementById('smtp-list');\r\n const csvFileEl = document.getElementById('csv-file');\r\n const fromNameEl = document.getElementById('from-name');\r\n const subjectEl = document.getElementById('subject');\r\n const sendBtn = document.getElementById('send-btn');\r\n const stopBtn = document.getElementById('stop-btn');\r\n const sendControlButtonsEl = document.getElementById('send-control-buttons');\r\n const totalCountEl = document.getElementById('total-count');\r\n const sentCountEl = document.getElementById('sent-count');\r\n const failedCountEl = document.getElementById('failed-count');\r\n const progressBar = document.getElementById('progress-bar');\r\n const logContainer = document.getElementById('log-container');\r\n const csvPreviewContainer = document.getElementById('csv-preview-container');\r\n const projectNameEl = document.getElementById('project-name');\r\n const saveProjectBtn = document.getElementById('save-project-btn');\r\n const newProjectBtn = document.getElementById('new-project-btn');\r\n const loadProjectBtn = document.getElementById('load-project-btn');\r\n const deleteProjectBtn = document.getElementById('delete-project-btn');\r\n const projectListEl = document.getElementById('project-list');\r\n const attachmentFileEl = document.getElementById('attachment-file');\r\n const attachmentInfoEl = document.getElementById('attachment-info');\r\n const testEmailAddressEl = document.getElementById('test-email-address');\r\n const sendTestMailBtn = document.getElementById('send-test-mail-btn');\r\n\r\n \/\/ --- Quill Editor Initialization ---\r\n const quill = new Quill('#editor-container', {\r\n theme: 'snow',\r\n modules: {\r\n toolbar: [\r\n [{ 'font': [] }],\r\n [{ 'header': [1, 2, 3, false] }],\r\n ['bold', 'italic', 'underline', 'strike'],\r\n [{ 'color': [] }, { 'background': [] }],\r\n [{ 'list': 'ordered'}, { 'list': 'bullet' }],\r\n [{ 'align': [] }],\r\n ['link', 'image'],\r\n ['clean']\r\n ]\r\n }\r\n });\r\n\r\n \/\/ --- Application State ---\r\n let isSending = false;\r\n let contacts = [];\r\n let failedContacts = [];\r\n let smtpConfigs = [];\r\n let dailySendCounts = {};\r\n let attachment = null; \/\/ { name: string, data: base64_string }\r\n\r\n \/\/ --- Logging Function ---\r\n function logMessage(message, type = 'info') {\r\n const entry = document.createElement('div');\r\n const timestamp = `[${new Date().toLocaleTimeString()}]`;\r\n entry.innerHTML = `<span class=\"mr-2\">${timestamp}<\/span> ${message}`;\r\n entry.className = `log-entry ${type}`;\r\n logContainer.appendChild(entry);\r\n logContainer.scrollTop = logContainer.scrollHeight;\r\n }\r\n \r\n \/\/ --- Project Management ---\r\n function getProjects() {\r\n return JSON.parse(localStorage.getItem('emailProjects') || '{}');\r\n }\r\n\r\n function saveProjects(projects) {\r\n localStorage.setItem('emailProjects', JSON.stringify(projects));\r\n }\r\n\r\n function updateProjectList() {\r\n const projects = getProjects();\r\n projectListEl.innerHTML = '';\r\n const projectNames = Object.keys(projects);\r\n if (projectNames.length === 0) {\r\n const option = document.createElement('option');\r\n option.textContent = 'No saved projects';\r\n option.disabled = true;\r\n projectListEl.appendChild(option);\r\n } else {\r\n projectNames.forEach(name => {\r\n const option = document.createElement('option');\r\n option.value = name;\r\n option.textContent = name;\r\n projectListEl.appendChild(option);\r\n });\r\n }\r\n }\r\n\r\n function saveCurrentProject() {\r\n const name = projectNameEl.value.trim();\r\n if (!name) {\r\n logMessage('Please enter a project name to save.', 'error');\r\n return;\r\n }\r\n const projects = getProjects();\r\n projects[name] = {\r\n smtpConfigs,\r\n contacts,\r\n fromName: fromNameEl.value,\r\n subject: subjectEl.value,\r\n body: quill.root.innerHTML, \/\/ Get HTML from Quill\r\n attachment,\r\n createdAt: new Date().toISOString()\r\n };\r\n saveProjects(projects);\r\n updateProjectList();\r\n logMessage(`Project \"${name}\" saved successfully.`, 'success');\r\n }\r\n\r\n function loadSelectedProject() {\r\n const name = projectListEl.value;\r\n if (!name) {\r\n logMessage('No project selected to load.', 'error');\r\n return;\r\n }\r\n const projects = getProjects();\r\n const project = projects[name];\r\n if (project) {\r\n smtpConfigs = project.smtpConfigs || [];\r\n contacts = project.contacts || [];\r\n fromNameEl.value = project.fromName || '';\r\n subjectEl.value = project.subject || '';\r\n quill.root.innerHTML = project.body || ''; \/\/ Set HTML in Quill\r\n attachment = project.attachment || null;\r\n projectNameEl.value = name;\r\n failedContacts = [];\r\n\r\n \/\/ Re-render UI\r\n renderSmtpList();\r\n renderCsvPreview(contacts);\r\n renderAttachmentInfo();\r\n resetProgressUI();\r\n logMessage(`Project \"${name}\" loaded successfully.`, 'success');\r\n } else {\r\n logMessage(`Could not find project \"${name}\".`, 'error');\r\n }\r\n }\r\n\r\n function deleteSelectedProject() {\r\n const name = projectListEl.value;\r\n if (!name) {\r\n logMessage('No project selected to delete.', 'error');\r\n return;\r\n }\r\n const projects = getProjects();\r\n if (projects[name]) {\r\n delete projects[name];\r\n saveProjects(projects);\r\n updateProjectList();\r\n logMessage(`Project \"${name}\" deleted successfully.`, 'success');\r\n } else {\r\n logMessage(`Could not find project \"${name}\".`, 'error');\r\n }\r\n }\r\n\r\n function newProject() {\r\n \/\/ Reset state variables\r\n smtpConfigs = [];\r\n contacts = [];\r\n failedContacts = [];\r\n attachment = null;\r\n\r\n \/\/ Clear UI fields\r\n projectNameEl.value = '';\r\n fromNameEl.value = '';\r\n subjectEl.value = '';\r\n quill.setContents([{ insert: '\\n' }]); \/\/ Clear Quill editor\r\n attachmentFileEl.value = '';\r\n csvFileEl.value = '';\r\n\r\n \/\/ Re-render UI components\r\n renderSmtpList();\r\n renderCsvPreview([]);\r\n renderAttachmentInfo();\r\n resetProgressUI();\r\n logContainer.innerHTML = '';\r\n\r\n logMessage('New project started. All fields have been cleared.', 'info');\r\n }\r\n\r\n\r\n \/\/ --- Daily Limit Management ---\r\n function getTodayString() {\r\n return new Date().toISOString().split('T')[0];\r\n }\r\n \r\n function loadState() {\r\n updateProjectList();\r\n const storedCounts = localStorage.getItem('dailySendCounts');\r\n const lastResetDate = localStorage.getItem('lastResetDate');\r\n const today = getTodayString();\r\n\r\n if (lastResetDate === today && storedCounts) {\r\n dailySendCounts = JSON.parse(storedCounts);\r\n } else {\r\n dailySendCounts = {};\r\n localStorage.setItem('lastResetDate', today);\r\n saveSendCounts();\r\n }\r\n renderSmtpList();\r\n }\r\n\r\n function saveSendCounts() {\r\n localStorage.setItem('dailySendCounts', JSON.stringify(dailySendCounts));\r\n }\r\n \r\n function incrementSendCount(email) {\r\n if (dailySendCounts[email] === undefined) {\r\n dailySendCounts[email] = 0;\r\n }\r\n dailySendCounts[email]++;\r\n saveSendCounts();\r\n renderSmtpList();\r\n }\r\n\r\n \/\/ --- UI Update Functions ---\r\n function renderSmtpList() {\r\n smtpListEl.innerHTML = '';\r\n if (smtpConfigs.length === 0) {\r\n smtpListEl.innerHTML = '<p class=\"text-sm text-gray-500\">No servers configured. Load a project or add one.<\/p>';\r\n return;\r\n }\r\n smtpConfigs.forEach((config, index) => {\r\n const count = dailySendCounts[config.username] || 0;\r\n const isLimitReached = count >= config.dailyLimit;\r\n const serverDiv = document.createElement('div');\r\n serverDiv.className = 'p-3 border rounded-lg flex justify-between items-center';\r\n serverDiv.innerHTML = `\r\n <div class=\"text-sm\">\r\n <p class=\"font-semibold text-gray-700\">${config.username}<\/p>\r\n <p class=\"text-gray-500\">${config.host}:${config.port} (${(config.encryption || 'tls').toUpperCase()})<\/p>\r\n <p class=\"font-mono text-xs ${isLimitReached ? 'text-red-500 font-bold' : 'text-green-600'}\">Usage: ${count} \/ ${config.dailyLimit}<\/p>\r\n <\/div>\r\n <button class=\"btn-danger text-xs px-2 py-1\" onclick=\"removeSmtpConfig(${index})\"><i class=\"fas fa-trash\"><\/i><\/button>\r\n `;\r\n smtpListEl.appendChild(serverDiv);\r\n });\r\n }\r\n\r\n function renderCsvPreview(records) {\r\n csvPreviewContainer.innerHTML = ''; \r\n if (!records || records.length === 0) {\r\n csvPreviewContainer.innerHTML = '<p class=\"text-sm text-gray-500\">Upload a CSV file or load a project.<\/p>';\r\n return;\r\n }\r\n \r\n const table = document.createElement('table');\r\n table.className = 'w-full text-sm text-left text-gray-500';\r\n \r\n const thead = document.createElement('thead');\r\n thead.className = 'text-xs text-gray-700 uppercase bg-gray-50';\r\n thead.innerHTML = `\r\n <tr>\r\n <th scope=\"col\" class=\"px-4 py-2\">Name<\/th>\r\n <th scope=\"col\" class=\"px-4 py-2\">Email<\/th>\r\n <\/tr>\r\n `;\r\n table.appendChild(thead);\r\n \r\n const tbody = document.createElement('tbody');\r\n records.forEach(record => {\r\n const tr = document.createElement('tr');\r\n tr.className = 'bg-white border-b';\r\n tr.innerHTML = `\r\n <td class=\"px-4 py-2 font-medium text-gray-900 whitespace-nowrap\">${record.name || ''}<\/td>\r\n <td class=\"px-4 py-2\">${record.email}<\/td>\r\n `;\r\n tbody.appendChild(tr);\r\n });\r\n table.appendChild(tbody);\r\n \r\n csvPreviewContainer.appendChild(table);\r\n }\r\n\r\n function renderAttachmentInfo() {\r\n if (attachment) {\r\n attachmentInfoEl.innerHTML = `\r\n <div class=\"flex items-center justify-between bg-gray-100 p-2 rounded-md\">\r\n <span><i class=\"fas fa-paperclip mr-2\"><\/i>${attachment.name}<\/span>\r\n <button id=\"remove-attachment-btn\" class=\"text-red-500 hover:text-red-700 text-xs\">Remove<\/button>\r\n <\/div>\r\n `;\r\n document.getElementById('remove-attachment-btn').addEventListener('click', () => {\r\n attachment = null;\r\n attachmentFileEl.value = ''; \r\n renderAttachmentInfo();\r\n logMessage('Attachment removed. Remember to save the project.', 'warning');\r\n });\r\n } else {\r\n attachmentInfoEl.innerHTML = '';\r\n }\r\n }\r\n\r\n function updateProgress(sent, failed, total) {\r\n sentCountEl.textContent = sent;\r\n failedCountEl.textContent = failed;\r\n const percentage = total > 0 ? ((sent + failed) \/ total) * 100 : 0;\r\n progressBar.style.width = `${percentage}%`;\r\n }\r\n\r\n function resetProgressUI() {\r\n totalCountEl.textContent = contacts.length;\r\n sentCountEl.textContent = 0;\r\n failedCountEl.textContent = 0;\r\n progressBar.style.width = '0%';\r\n sendControlButtonsEl.innerHTML = `\r\n <button id=\"send-btn\" class=\"btn btn-primary w-full\"><i class=\"fas fa-bolt mr-2\"><\/i>Start Sending<\/button>\r\n <button id=\"stop-btn\" class=\"btn btn-secondary w-full\" disabled><i class=\"fas fa-stop-circle mr-2\"><\/i>Stop<\/button>\r\n `;\r\n \/\/ Re-add event listeners\r\n document.getElementById('send-btn').addEventListener('click', () => startSending(contacts));\r\n document.getElementById('stop-btn').addEventListener('click', stopSending);\r\n }\r\n \r\n \/\/ --- Event Handlers ---\r\n saveProjectBtn.addEventListener('click', saveCurrentProject);\r\n newProjectBtn.addEventListener('click', newProject);\r\n loadProjectBtn.addEventListener('click', loadSelectedProject);\r\n deleteProjectBtn.addEventListener('click', deleteSelectedProject);\r\n\r\n smtpEncryptionEl.addEventListener('change', (e) => {\r\n if (e.target.value === 'ssl') {\r\n smtpPortEl.value = '465';\r\n } else {\r\n smtpPortEl.value = '587';\r\n }\r\n });\r\n\r\n addSmtpBtn.addEventListener('click', () => {\r\n const host = smtpServerEl.value.trim();\r\n const port = smtpPortEl.value;\r\n const encryption = smtpEncryptionEl.value;\r\n const username = senderEmailEl.value.trim();\r\n const password = passwordEl.value.trim();\r\n const dailyLimit = parseInt(dailyLimitEl.value, 10) || 50;\r\n\r\n if (!host || !port || !username || !password) {\r\n logMessage('Please fill all SMTP fields to add a server.', 'error');\r\n return;\r\n }\r\n \r\n smtpConfigs.push({ host, port, encryption, username, password, dailyLimit });\r\n if(dailySendCounts[username] === undefined) {\r\n dailySendCounts[username] = 0;\r\n }\r\n\r\n renderSmtpList();\r\n smtpServerEl.value = '';\r\n smtpPortEl.value = '587';\r\n smtpEncryptionEl.value = 'tls';\r\n senderEmailEl.value = '';\r\n passwordEl.value = '';\r\n dailyLimitEl.value = '50';\r\n logMessage(`Added SMTP server: ${username}. Remember to save the project.`, 'warning');\r\n });\r\n\r\n async function verifySmtpSettings() {\r\n const host = smtpServerEl.value.trim();\r\n const port = smtpPortEl.value;\r\n const encryption = smtpEncryptionEl.value;\r\n const username = senderEmailEl.value.trim();\r\n const password = passwordEl.value.trim();\r\n\r\n if (!host || !port || !username || !password) {\r\n logMessage('Please fill all SMTP fields to verify.', 'error');\r\n return;\r\n }\r\n\r\n logMessage(`Verifying SMTP settings for ${username}...`, 'info');\r\n verifySmtpBtn.disabled = true;\r\n verifySmtpBtn.innerHTML = `<i class=\"fas fa-spinner fa-spin\"><\/i>`;\r\n\r\n const emailConfig = {\r\n Host: host,\r\n Username: username,\r\n Password: password,\r\n To: username, \/\/ Send to self to verify\r\n From: `\"${\"Myail Verification\"}\" <${username}>`,\r\n Subject: `Myail SMTP Connection Test`,\r\n Body: \"This is a test email from Myail to verify your SMTP settings. If you received this, your configuration is correct!\",\r\n Port: port\r\n };\r\n\r\n if (encryption === 'ssl') {\r\n emailConfig.SSL = true;\r\n }\r\n\r\n try {\r\n await Email.send(emailConfig);\r\n logMessage(` ---> Verification successful! SMTP settings for ${username} are correct.`, 'success');\r\n } catch (error) {\r\n logMessage(` ---> Verification failed. Error: ${error}`, 'error');\r\n } finally {\r\n verifySmtpBtn.disabled = false;\r\n verifySmtpBtn.innerHTML = `<i class=\"fas fa-check-circle mr-2\"><\/i>Verify`;\r\n }\r\n }\r\n\r\n verifySmtpBtn.addEventListener('click', verifySmtpSettings);\r\n\r\n window.removeSmtpConfig = (index) => {\r\n const removed = smtpConfigs.splice(index, 1);\r\n logMessage(`Removed SMTP server: ${removed[0].username}. Remember to save the project.`, 'warning');\r\n renderSmtpList();\r\n }\r\n\r\n csvFileEl.addEventListener('change', (event) => {\r\n const file = event.target.files[0];\r\n if (!file) {\r\n logMessage('No file selected.', 'error');\r\n renderCsvPreview([]);\r\n return;\r\n }\r\n const reader = new FileReader();\r\n reader.onload = (e) => {\r\n try {\r\n contacts = parseCSV(e.target.result);\r\n resetProgressUI();\r\n logMessage(`Loaded ${contacts.length} contacts. Remember to save the project.`, 'warning');\r\n renderCsvPreview(contacts);\r\n } catch (error) {\r\n logMessage(`Error parsing CSV: ${error.message}`, 'error');\r\n contacts = [];\r\n resetProgressUI();\r\n renderCsvPreview([]);\r\n }\r\n };\r\n reader.readAsText(file);\r\n });\r\n\r\n attachmentFileEl.addEventListener('change', (event) => {\r\n const file = event.target.files[0];\r\n if (!file) {\r\n attachment = null;\r\n renderAttachmentInfo();\r\n return;\r\n }\r\n const reader = new FileReader();\r\n reader.onload = (e) => {\r\n attachment = {\r\n name: file.name,\r\n data: e.target.result\r\n };\r\n renderAttachmentInfo();\r\n logMessage(`Attached file: ${file.name}. Remember to save the project.`, 'warning');\r\n };\r\n reader.readAsDataURL(file);\r\n });\r\n\r\n function stopSending() {\r\n isSending = false;\r\n logMessage('Sending process will stop after the current email.', 'warning');\r\n document.getElementById('stop-btn').disabled = true;\r\n }\r\n \r\n async function sendTestMail() {\r\n const testEmail = testEmailAddressEl.value.trim();\r\n const fromName = fromNameEl.value.trim();\r\n const bodyContent = quill.root.innerHTML;\r\n\r\n if (!testEmail) {\r\n logMessage('Please enter a test email address.', 'error');\r\n return;\r\n }\r\n if (!fromName) {\r\n logMessage('Please enter a \"From Name\".', 'error');\r\n return;\r\n }\r\n if (!subjectEl.value || quill.getLength() <= 1) {\r\n logMessage('Please provide an email subject and body for the test.', 'error');\r\n return;\r\n }\r\n\r\n const smtpToUse = smtpConfigs.find(config => (dailySendCounts[config.username] || 0) < config.dailyLimit);\r\n\r\n if (!smtpToUse) {\r\n logMessage('All available SMTP servers have reached their daily sending limits. Cannot send test mail.', 'error');\r\n return;\r\n }\r\n\r\n logMessage(`Sending test email to ${testEmail} via ${smtpToUse.username}...`, 'info');\r\n sendTestMailBtn.disabled = true;\r\n sendTestMailBtn.innerHTML = `<i class=\"fas fa-spinner fa-spin\"><\/i>`;\r\n \r\n const personalizedBody = bodyContent.replace(\/{name}\/g, 'Test User');\r\n \r\n const emailConfig = {\r\n Host: smtpToUse.host,\r\n Username: smtpToUse.username,\r\n Password: smtpToUse.password,\r\n To: testEmail,\r\n From: `\"${fromName}\" <${smtpToUse.username}>`,\r\n Subject: `[TEST] ${subjectEl.value}`,\r\n Body: personalizedBody,\r\n Port: smtpToUse.port,\r\n Attachments: []\r\n };\r\n\r\n if (smtpToUse.encryption === 'ssl') {\r\n emailConfig.SSL = true;\r\n }\r\n\r\n if (attachment) {\r\n emailConfig.Attachments.push({\r\n name: attachment.name,\r\n path: attachment.data\r\n });\r\n }\r\n\r\n try {\r\n await Email.send(emailConfig);\r\n logMessage(` ---> Successfully sent test email to ${testEmail}`, 'success');\r\n incrementSendCount(smtpToUse.username); \r\n } catch (error) {\r\n logMessage(` ---> Failed to send test email. Error: ${error}`, 'error');\r\n } finally {\r\n sendTestMailBtn.disabled = false;\r\n sendTestMailBtn.innerHTML = `<i class=\"fas fa-vial mr-2\"><\/i>Send Test`;\r\n }\r\n }\r\n\r\n sendTestMailBtn.addEventListener('click', sendTestMail);\r\n\r\n async function startSending(contactsToSend) {\r\n try {\r\n if (isSending) return;\r\n const fromName = fromNameEl.value.trim();\r\n const bodyContent = quill.root.innerHTML;\r\n let currentSmtpIndex = 0;\r\n\r\n \/\/ --- Input Validation ---\r\n if (!fromName) {\r\n logMessage('Please enter a \"From Name\" before sending.', 'error');\r\n return;\r\n }\r\n if (smtpConfigs.length === 0) {\r\n logMessage('Please configure at least one SMTP server.', 'error');\r\n return;\r\n }\r\n if (contactsToSend.length === 0) {\r\n logMessage('No contacts to send emails to.', 'error');\r\n return;\r\n }\r\n if (!subjectEl.value || quill.getLength() <= 1) {\r\n logMessage('Please provide an email subject and body.', 'error');\r\n return;\r\n }\r\n\r\n isSending = true;\r\n failedContacts = []; \/\/ Reset failed list for this run\r\n document.getElementById('send-btn').disabled = true;\r\n document.getElementById('stop-btn').disabled = false;\r\n document.getElementById('send-btn').innerHTML = '<i class=\"fas fa-spinner fa-spin mr-2\"><\/i>Sending...';\r\n logContainer.innerHTML = '';\r\n \r\n let sent = 0;\r\n let failed = 0;\r\n const total = contactsToSend.length;\r\n totalCountEl.textContent = total;\r\n sentCountEl.textContent = 0;\r\n failedCountEl.textContent = 0;\r\n updateProgress(0, 0, total);\r\n\r\n logMessage(`Starting campaign for ${total} contacts...`, 'info');\r\n\r\n for (let i = 0; i < total; i++) {\r\n if (!isSending) {\r\n logMessage('Sending process stopped by user.', 'info');\r\n break;\r\n }\r\n \r\n let smtpToUse = null;\r\n let triedAllSmtp = 0;\r\n while(triedAllSmtp < smtpConfigs.length) {\r\n const candidateSmtp = smtpConfigs[currentSmtpIndex];\r\n const count = dailySendCounts[candidateSmtp.username] || 0;\r\n \r\n if(count < candidateSmtp.dailyLimit) {\r\n smtpToUse = candidateSmtp;\r\n break;\r\n } else {\r\n logMessage(`Daily limit reached for ${candidateSmtp.username}. Skipping.`, 'warning');\r\n currentSmtpIndex = (currentSmtpIndex + 1) % smtpConfigs.length;\r\n triedAllSmtp++;\r\n }\r\n }\r\n\r\n if (!smtpToUse) {\r\n logMessage('All SMTP servers have reached their daily sending limits. Stopping campaign.', 'error');\r\n failedContacts.push(...contactsToSend.slice(i));\r\n failedCountEl.textContent = failedContacts.length;\r\n updateProgress(sent, failedContacts.length, total);\r\n break;\r\n }\r\n\r\n const contact = contactsToSend[i];\r\n if (!contact.email) {\r\n logMessage(`Skipping contact #${i + 1}: No email address.`, 'warning');\r\n failed++;\r\n failedContacts.push(contact);\r\n updateProgress(sent, failed, total);\r\n continue;\r\n }\r\n\r\n logMessage(`[Contact ${i+1}\/${total}] Preparing to send to ${contact.name || 'N\/A'} via ${smtpToUse.username}...`, 'info');\r\n\r\n const personalizedBody = bodyContent.replace(\/{name}\/g, contact.name || 'there');\r\n \r\n const emailConfig = {\r\n Host: smtpToUse.host,\r\n Username: smtpToUse.username,\r\n Password: smtpToUse.password,\r\n To: contact.email,\r\n From: `\"${fromName}\" <${smtpToUse.username}>`,\r\n Subject: subjectEl.value,\r\n Body: personalizedBody,\r\n Port: smtpToUse.port,\r\n Attachments: []\r\n };\r\n\r\n if (smtpToUse.encryption === 'ssl') {\r\n emailConfig.SSL = true;\r\n }\r\n\r\n if (attachment) {\r\n emailConfig.Attachments.push({\r\n name: attachment.name,\r\n path: attachment.data\r\n });\r\n }\r\n\r\n try {\r\n await Email.send(emailConfig);\r\n logMessage(` ---> Successfully sent to ${contact.email}`, 'success');\r\n sent++;\r\n incrementSendCount(smtpToUse.username);\r\n } catch (error) {\r\n logMessage(` ---> Failed to send to ${contact.email}. Error: ${error}`, 'error');\r\n failed++;\r\n failedContacts.push(contact);\r\n }\r\n \r\n updateProgress(sent, failed, total);\r\n currentSmtpIndex = (currentSmtpIndex + 1) % smtpConfigs.length;\r\n\r\n if (i < total - 1 && isSending) {\r\n logMessage(`Waiting for ${DELAY_BETWEEN_EMAILS \/ 1000} seconds...`, 'info');\r\n await new Promise(resolve => setTimeout(resolve, DELAY_BETWEEN_EMAILS));\r\n }\r\n }\r\n\r\n logMessage('Bulk email process finished.', 'info');\r\n if (failedContacts.length > 0) {\r\n logMessage(`${failedContacts.length} emails failed to send.`, 'warning');\r\n \r\n const oldRetryBtn = document.getElementById('retry-btn');\r\n if(oldRetryBtn) oldRetryBtn.remove();\r\n\r\n const retryBtn = document.createElement('button');\r\n retryBtn.id = 'retry-btn';\r\n retryBtn.className = 'btn btn-warning w-full';\r\n retryBtn.innerHTML = `<i class=\"fas fa-redo mr-2\"><\/i>Retry Failed (${failedContacts.length})`;\r\n retryBtn.addEventListener('click', () => {\r\n logMessage(`Retrying ${failedContacts.length} failed emails.`, 'info');\r\n retryBtn.remove();\r\n startSending(failedContacts);\r\n });\r\n sendControlButtonsEl.appendChild(retryBtn);\r\n }\r\n\r\n } catch (e) {\r\n logMessage(`A critical error occurred: ${e.message}`, 'error');\r\n console.error(e);\r\n } finally {\r\n isSending = false;\r\n document.getElementById('send-btn').disabled = false;\r\n document.getElementById('stop-btn').disabled = true;\r\n document.getElementById('send-btn').innerHTML = '<i class=\"fas fa-bolt mr-2\"><\/i>Start Sending';\r\n }\r\n }\r\n \r\n \/\/ --- Utility Functions ---\r\n function parseCSV(text) {\r\n const lines = text.split(\/\\r?\\n\/).filter(line => line.trim() !== '');\r\n if (lines.length < 2) throw new Error(\"CSV must have a header and at least one data row.\");\r\n \r\n const header = lines[0].split(',').map(h => h.trim().toLowerCase());\r\n const emailIndex = header.indexOf('email');\r\n const nameIndex = header.indexOf('name');\r\n\r\n if (emailIndex === -1) throw new Error(\"CSV header must contain an 'email' column.\");\r\n\r\n const result = [];\r\n for (let i = 1; i < lines.length; i++) {\r\n const data = lines[i].split(',');\r\n if (data.length > emailIndex) {\r\n const email = data[emailIndex] ? data[emailIndex].trim() : null;\r\n if (email) {\r\n const name = (nameIndex !== -1 && data.length > nameIndex && data[nameIndex]) \r\n ? data[nameIndex].trim() \r\n : '';\r\n result.push({ email, name });\r\n }\r\n }\r\n }\r\n return result;\r\n }\r\n \r\n \/\/ --- Initial Load ---\r\n document.addEventListener('DOMContentLoaded', () => {\r\n loadState();\r\n resetProgressUI();\r\n });\r\n\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Myail – Bulk Email Sender Myail Your Professional Bulk Email Sender Project Management Project Name Save New Load Project Load Delete Manage SMTP Servers SMTP Server Encryption TLSSSL SMTP Port Authentication Email Password \/ App Password Daily Limit Add Server Verify Configured Servers Upload Contacts CSV File Must contain ’email’ and ‘name’ columns. Uploaded Contacts […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/printone.ie\/index.php\/wp-json\/wp\/v2\/pages\/5093"}],"collection":[{"href":"https:\/\/printone.ie\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/printone.ie\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/printone.ie\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/printone.ie\/index.php\/wp-json\/wp\/v2\/comments?post=5093"}],"version-history":[{"count":4,"href":"https:\/\/printone.ie\/index.php\/wp-json\/wp\/v2\/pages\/5093\/revisions"}],"predecessor-version":[{"id":14012,"href":"https:\/\/printone.ie\/index.php\/wp-json\/wp\/v2\/pages\/5093\/revisions\/14012"}],"wp:attachment":[{"href":"https:\/\/printone.ie\/index.php\/wp-json\/wp\/v2\/media?parent=5093"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\r\n\r\n\r\n \r\n \r\n Myail - Bulk Email Sender<\/title>\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n \r\n <link href=\"https:\/\/cdn.quilljs.com\/1.3.6\/quill.snow.css\" rel=\"stylesheet\">\r\n <style>\r\n body {\r\n font-family: 'Inter', sans-serif;\r\n background-color: #F0F4F8; \/* Pastel Blue Gray *\/\r\n }\r\n .form-input {\r\n @apply w-full px-4 py-2 bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-400 focus:border-indigo-400 transition duration-200;\r\n }\r\n .form-label {\r\n @apply block text-sm font-medium text-gray-600 mb-1;\r\n }\r\n .btn {\r\n @apply px-6 py-2 rounded-lg font-semibold text-white transition-all duration-200 transform hover:scale-105 shadow-md disabled:opacity-50 disabled:cursor-not-allowed;\r\n }\r\n .btn-primary {\r\n @apply bg-indigo-500 hover:bg-indigo-600;\r\n }\r\n .btn-secondary {\r\n @apply bg-gray-400 hover:bg-gray-500;\r\n }\r\n .btn-warning {\r\n @apply bg-amber-500 hover:bg-amber-600;\r\n }\r\n .btn-danger {\r\n @apply bg-rose-500 hover:bg-rose-600;\r\n }\r\n .card {\r\n @apply bg-white p-6 sm:p-8 rounded-xl shadow-lg border border-gray-200;\r\n }\r\n #log-container {\r\n height: 250px;\r\n background-color: #2d3748;\r\n color: #e2e8f0;\r\n font-family: 'Courier New', Courier, monospace;\r\n font-size: 0.875rem;\r\n padding: 1rem;\r\n border-radius: 0.5rem;\r\n overflow-y: auto;\r\n border: 1px solid #4a5568;\r\n }\r\n .log-entry {\r\n padding-bottom: 0.25rem;\r\n }\r\n .log-entry.success { color: #68d391; }\r\n .log-entry.error { color: #fc8181; }\r\n .log-entry.info { color: #63b3ed; }\r\n .log-entry.warning { color: #f6e05e; }\r\n \/* Quill Editor Styling *\/\r\n #editor-container {\r\n height: 250px; \/* Adjust height as needed *\/\r\n background-color: #fff;\r\n }\r\n .ql-toolbar {\r\n border-top-left-radius: 0.5rem;\r\n border-top-right-radius: 0.5rem;\r\n background-color: #f9fafb;\r\n }\r\n .ql-container {\r\n border-bottom-left-radius: 0.5rem;\r\n border-bottom-right-radius: 0.5rem;\r\n }\r\n .card h2 {\r\n color: #4A5568; \/* Darker gray for titles *\/\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-gray-100\">\r\n\r\n <div class=\"container mx-auto p-4 sm:p-8 max-w-4xl\">\r\n <header class=\"text-center mb-10\">\r\n <h1 class=\"text-5xl font-bold text-red-500\">Myail<\/h1>\r\n <p class=\"text-lg text-gray-500 mt-2\">Your Professional Bulk Email Sender<\/p>\r\n <\/header>\r\n\r\n <div class=\"grid grid-cols-1 gap-8\">\r\n \r\n <div class=\"flex flex-col gap-8\">\r\n <div class=\"card bg-teal-50\/50\">\r\n <h2 class=\"text-2xl font-semibold text-gray-800 mb-4 border-b pb-2\"><i class=\"fas fa-project-diagram mr-2 text-teal-500\"><\/i>Project Management<\/h2>\r\n <div class=\"space-y-4\">\r\n <div>\r\n <label for=\"project-name\" class=\"form-label\">Project Name<\/label>\r\n <input type=\"text\" id=\"project-name\" class=\"form-input\" placeholder=\"e.g., Q4 Newsletter\">\r\n <\/div>\r\n <div class=\"flex gap-4\">\r\n <button id=\"save-project-btn\" class=\"btn btn-primary w-full\"><i class=\"fas fa-save mr-2\"><\/i>Save<\/button>\r\n <button id=\"new-project-btn\" class=\"btn btn-secondary w-full\"><i class=\"fas fa-file mr-2\"><\/i>New<\/button>\r\n <\/div>\r\n <hr>\r\n <div>\r\n <label for=\"project-list\" class=\"form-label\">Load Project<\/label>\r\n <select id=\"project-list\" class=\"form-input\"><\/select>\r\n <\/div>\r\n <div class=\"flex gap-4\">\r\n <button id=\"load-project-btn\" class=\"btn btn-secondary w-full\"><i class=\"fas fa-folder-open mr-2\"><\/i>Load<\/button>\r\n <button id=\"delete-project-btn\" class=\"btn btn-danger w-full\"><i class=\"fas fa-trash-alt mr-2\"><\/i>Delete<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card bg-sky-50\/50\">\r\n <h2 class=\"text-2xl font-semibold text-gray-800 mb-4 border-b pb-2\"><i class=\"fas fa-server mr-2 text-sky-500\"><\/i>Manage SMTP Servers<\/h2>\r\n <div id=\"smtp-form\" class=\"space-y-4\">\r\n <div>\r\n <label for=\"smtp-server\" class=\"form-label\">SMTP Server<\/label>\r\n <input type=\"text\" id=\"smtp-server\" class=\"form-input\" placeholder=\"smtp.gmail.com\">\r\n <\/div>\r\n <div>\r\n <label for=\"smtp-encryption\" class=\"form-label\">Encryption<\/label>\r\n <select id=\"smtp-encryption\" class=\"form-input\">\r\n <option value=\"tls\" selected>TLS<\/option>\r\n <option value=\"ssl\">SSL<\/option>\r\n <\/select>\r\n <\/div>\r\n <div>\r\n <label for=\"smtp-port\" class=\"form-label\">SMTP Port<\/label>\r\n <input type=\"number\" id=\"smtp-port\" class=\"form-input\" placeholder=\"587\">\r\n <\/div>\r\n <div>\r\n <label for=\"sender-email\" class=\"form-label\">Authentication Email<\/label>\r\n <input type=\"email\" id=\"sender-email\" class=\"form-input\" placeholder=\"you@example.com\">\r\n <\/div>\r\n <div>\r\n <label for=\"password\" class=\"form-label\">Password \/ App Password<\/label>\r\n <input type=\"password\" id=\"password\" class=\"form-input\" placeholder=\"\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\">\r\n <\/div>\r\n <div>\r\n <label for=\"daily-limit\" class=\"form-label\">Daily Limit<\/label>\r\n <input type=\"number\" id=\"daily-limit\" class=\"form-input\" value=\"50\">\r\n <\/div>\r\n <div class=\"flex gap-4\">\r\n <button id=\"add-smtp-btn\" class=\"btn btn-primary w-full\"><i class=\"fas fa-plus-circle mr-2\"><\/i>Add Server<\/button>\r\n <button id=\"verify-smtp-btn\" class=\"btn btn-secondary w-full\"><i class=\"fas fa-check-circle mr-2\"><\/i>Verify<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card bg-sky-50\/50\">\r\n <h2 class=\"text-2xl font-semibold text-gray-800 mb-4 border-b pb-2\"><i class=\"fas fa-list-alt mr-2 text-sky-500\"><\/i>Configured Servers<\/h2>\r\n <div id=\"smtp-list\" class=\"space-y-3 max-h-60 overflow-y-auto\">\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"flex flex-col gap-8\">\r\n <div class=\"card bg-lime-50\/50\">\r\n <h2 class=\"text-2xl font-semibold text-gray-800 mb-4 border-b pb-2\"><i class=\"fas fa-file-csv mr-2 text-lime-500\"><\/i>Upload Contacts<\/h2>\r\n <div>\r\n <label for=\"csv-file\" class=\"form-label\">CSV File<\/label>\r\n <input type=\"file\" id=\"csv-file\" accept=\".csv\" class=\"form-input\">\r\n <p class=\"text-xs text-gray-500 mt-1\">Must contain 'email' and 'name' columns.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card bg-lime-50\/50\">\r\n <h2 class=\"text-2xl font-semibold text-gray-800 mb-4 border-b pb-2\"><i class=\"fas fa-users mr-2 text-lime-500\"><\/i>Uploaded Contacts Preview<\/h2>\r\n <div id=\"csv-preview-container\" class=\"max-h-64 overflow-y-auto\">\r\n <p class=\"text-sm text-gray-500\">Upload a CSV file to see a preview of the records.<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card bg-violet-50\/50\">\r\n <h2 class=\"text-2xl font-semibold text-gray-800 mb-4 border-b pb-2\"><i class=\"fas fa-envelope mr-2 text-violet-500\"><\/i>Compose Email<\/h2>\r\n <div class=\"space-y-4\">\r\n <div>\r\n <label for=\"from-name\" class=\"form-label\">From Name (Company\/Person)<\/label>\r\n <input type=\"text\" id=\"from-name\" class=\"form-input\" placeholder=\"Acme Inc.\">\r\n <\/div>\r\n <div>\r\n <label for=\"subject\" class=\"form-label\">Subject<\/label>\r\n <input type=\"text\" id=\"subject\" class=\"form-input\" placeholder=\"Your email subject\">\r\n <\/div>\r\n <div>\r\n <label for=\"body\" class=\"form-label\">Body<\/label>\r\n \r\n <div id=\"editor-container\">\r\n <p>Hi {name},<\/p><p><br><\/p><p>This is a message for you.<\/p>\r\n <\/div>\r\n <p class=\"text-xs text-gray-500 mt-1\">Use {name} to personalize.<\/p>\r\n <\/div>\r\n <div>\r\n <label for=\"attachment-file\" class=\"form-label\">Attachment<\/label>\r\n <input type=\"file\" id=\"attachment-file\" class=\"form-input\">\r\n <div id=\"attachment-info\" class=\"text-sm text-gray-600 mt-2\"><\/div>\r\n <\/div>\r\n <hr class=\"my-2\">\r\n <div class=\"space-y-2\">\r\n <label for=\"test-email-address\" class=\"form-label\">Test Email Address<\/label>\r\n <div class=\"flex gap-2\">\r\n <input type=\"email\" id=\"test-email-address\" class=\"form-input\" placeholder=\"test@example.com\">\r\n <button id=\"send-test-mail-btn\" class=\"btn btn-secondary whitespace-nowrap\"><i class=\"fas fa-vial mr-2\"><\/i>Send Test<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"flex flex-col gap-8\">\r\n <div class=\"card bg-rose-50\/50\">\r\n <h2 class=\"text-2xl font-semibold text-gray-800 mb-4 border-b pb-2\"><i class=\"fas fa-paper-plane mr-2 text-rose-500\"><\/i>Send Control<\/h2>\r\n <div id=\"send-control-buttons\" class=\"flex items-center justify-center gap-4\">\r\n <button id=\"send-btn\" class=\"btn btn-primary w-full\"><i class=\"fas fa-bolt mr-2\"><\/i>Start Sending<\/button>\r\n <button id=\"stop-btn\" class=\"btn btn-secondary w-full\" disabled><i class=\"fas fa-stop-circle mr-2\"><\/i>Stop<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card bg-rose-50\/50\">\r\n <h2 class=\"text-2xl font-semibold text-gray-800 mb-4 border-b pb-2\"><i class=\"fas fa-tasks mr-2 text-rose-500\"><\/i>Sending Progress<\/h2>\r\n <div class=\"grid grid-cols-1 sm:grid-cols-3 gap-4 text-center mb-4\">\r\n <div class=\"bg-blue-100 p-4 rounded-lg\">\r\n <p class=\"text-sm font-medium text-blue-800\">TOTAL<\/p>\r\n <p id=\"total-count\" class=\"text-2xl font-bold text-blue-900\">0<\/p>\r\n <\/div>\r\n <div class=\"bg-green-100 p-4 rounded-lg\">\r\n <p class=\"text-sm font-medium text-green-800\">SENT<\/p>\r\n <p id=\"sent-count\" class=\"text-2xl font-bold text-green-900\">0<\/p>\r\n <\/div>\r\n <div class=\"bg-red-100 p-4 rounded-lg\">\r\n <p class=\"text-sm font-medium text-red-800\">FAILED<\/p>\r\n <p id=\"failed-count\" class=\"text-2xl font-bold text-red-900\">0<\/p>\r\n <\/div>\r\n <\/div>\r\n <div id=\"progress-bar-container\" class=\"w-full bg-gray-200 rounded-full h-2.5 mb-4\">\r\n <div id=\"progress-bar\" class=\"bg-indigo-500 h-2.5 rounded-full\" style=\"width: 0%\"><\/div>\r\n <\/div>\r\n <h3 class=\"text-lg font-semibold text-gray-700 mb-2\">Live Log<\/h3>\r\n <div id=\"log-container\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <script src=\"https:\/\/smtpjs.com\/v3\/smtp.js\"><\/script>\r\n \r\n <script src=\"https:\/\/cdn.quilljs.com\/1.3.6\/quill.js\"><\/script>\r\n\r\n <script>\r\n \/\/ --- CONSTANTS AND CONFIGURATION ---\r\n const DELAY_BETWEEN_EMAILS = 25000; \/\/ 25 seconds\r\n\r\n \/\/ --- DOM Element References ---\r\n const smtpServerEl = document.getElementById('smtp-server');\r\n const smtpPortEl = document.getElementById('smtp-port');\r\n const smtpEncryptionEl = document.getElementById('smtp-encryption');\r\n const senderEmailEl = document.getElementById('sender-email');\r\n const passwordEl = document.getElementById('password');\r\n const dailyLimitEl = document.getElementById('daily-limit');\r\n const addSmtpBtn = document.getElementById('add-smtp-btn');\r\n const verifySmtpBtn = document.getElementById('verify-smtp-btn');\r\n const smtpListEl = document.getElementById('smtp-list');\r\n const csvFileEl = document.getElementById('csv-file');\r\n const fromNameEl = document.getElementById('from-name');\r\n const subjectEl = document.getElementById('subject');\r\n const sendBtn = document.getElementById('send-btn');\r\n const stopBtn = document.getElementById('stop-btn');\r\n const sendControlButtonsEl = document.getElementById('send-control-buttons');\r\n const totalCountEl = document.getElementById('total-count');\r\n const sentCountEl = document.getElementById('sent-count');\r\n const failedCountEl = document.getElementById('failed-count');\r\n const progressBar = document.getElementById('progress-bar');\r\n const logContainer = document.getElementById('log-container');\r\n const csvPreviewContainer = document.getElementById('csv-preview-container');\r\n const projectNameEl = document.getElementById('project-name');\r\n const saveProjectBtn = document.getElementById('save-project-btn');\r\n const newProjectBtn = document.getElementById('new-project-btn');\r\n const loadProjectBtn = document.getElementById('load-project-btn');\r\n const deleteProjectBtn = document.getElementById('delete-project-btn');\r\n const projectListEl = document.getElementById('project-list');\r\n const attachmentFileEl = document.getElementById('attachment-file');\r\n const attachmentInfoEl = document.getElementById('attachment-info');\r\n const testEmailAddressEl = document.getElementById('test-email-address');\r\n const sendTestMailBtn = document.getElementById('send-test-mail-btn');\r\n\r\n \/\/ --- Quill Editor Initialization ---\r\n const quill = new Quill('#editor-container', {\r\n theme: 'snow',\r\n modules: {\r\n toolbar: [\r\n [{ 'font': [] }],\r\n [{ 'header': [1, 2, 3, false] }],\r\n ['bold', 'italic', 'underline', 'strike'],\r\n [{ 'color': [] }, { 'background': [] }],\r\n [{ 'list': 'ordered'}, { 'list': 'bullet' }],\r\n [{ 'align': [] }],\r\n ['link', 'image'],\r\n ['clean']\r\n ]\r\n }\r\n });\r\n\r\n \/\/ --- Application State ---\r\n let isSending = false;\r\n let contacts = [];\r\n let failedContacts = [];\r\n let smtpConfigs = [];\r\n let dailySendCounts = {};\r\n let attachment = null; \/\/ { name: string, data: base64_string }\r\n\r\n \/\/ --- Logging Function ---\r\n function logMessage(message, type = 'info') {\r\n const entry = document.createElement('div');\r\n const timestamp = `[${new Date().toLocaleTimeString()}]`;\r\n entry.innerHTML = `<span class=\"mr-2\">${timestamp}<\/span> ${message}`;\r\n entry.className = `log-entry ${type}`;\r\n logContainer.appendChild(entry);\r\n logContainer.scrollTop = logContainer.scrollHeight;\r\n }\r\n \r\n \/\/ --- Project Management ---\r\n function getProjects() {\r\n return JSON.parse(localStorage.getItem('emailProjects') || '{}');\r\n }\r\n\r\n function saveProjects(projects) {\r\n localStorage.setItem('emailProjects', JSON.stringify(projects));\r\n }\r\n\r\n function updateProjectList() {\r\n const projects = getProjects();\r\n projectListEl.innerHTML = '';\r\n const projectNames = Object.keys(projects);\r\n if (projectNames.length === 0) {\r\n const option = document.createElement('option');\r\n option.textContent = 'No saved projects';\r\n option.disabled = true;\r\n projectListEl.appendChild(option);\r\n } else {\r\n projectNames.forEach(name => {\r\n const option = document.createElement('option');\r\n option.value = name;\r\n option.textContent = name;\r\n projectListEl.appendChild(option);\r\n });\r\n }\r\n }\r\n\r\n function saveCurrentProject() {\r\n const name = projectNameEl.value.trim();\r\n if (!name) {\r\n logMessage('Please enter a project name to save.', 'error');\r\n return;\r\n }\r\n const projects = getProjects();\r\n projects[name] = {\r\n smtpConfigs,\r\n contacts,\r\n fromName: fromNameEl.value,\r\n subject: subjectEl.value,\r\n body: quill.root.innerHTML, \/\/ Get HTML from Quill\r\n attachment,\r\n createdAt: new Date().toISOString()\r\n };\r\n saveProjects(projects);\r\n updateProjectList();\r\n logMessage(`Project \"${name}\" saved successfully.`, 'success');\r\n }\r\n\r\n function loadSelectedProject() {\r\n const name = projectListEl.value;\r\n if (!name) {\r\n logMessage('No project selected to load.', 'error');\r\n return;\r\n }\r\n const projects = getProjects();\r\n const project = projects[name];\r\n if (project) {\r\n smtpConfigs = project.smtpConfigs || [];\r\n contacts = project.contacts || [];\r\n fromNameEl.value = project.fromName || '';\r\n subjectEl.value = project.subject || '';\r\n quill.root.innerHTML = project.body || ''; \/\/ Set HTML in Quill\r\n attachment = project.attachment || null;\r\n projectNameEl.value = name;\r\n failedContacts = [];\r\n\r\n \/\/ Re-render UI\r\n renderSmtpList();\r\n renderCsvPreview(contacts);\r\n renderAttachmentInfo();\r\n resetProgressUI();\r\n logMessage(`Project \"${name}\" loaded successfully.`, 'success');\r\n } else {\r\n logMessage(`Could not find project \"${name}\".`, 'error');\r\n }\r\n }\r\n\r\n function deleteSelectedProject() {\r\n const name = projectListEl.value;\r\n if (!name) {\r\n logMessage('No project selected to delete.', 'error');\r\n return;\r\n }\r\n const projects = getProjects();\r\n if (projects[name]) {\r\n delete projects[name];\r\n saveProjects(projects);\r\n updateProjectList();\r\n logMessage(`Project \"${name}\" deleted successfully.`, 'success');\r\n } else {\r\n logMessage(`Could not find project \"${name}\".`, 'error');\r\n }\r\n }\r\n\r\n function newProject() {\r\n \/\/ Reset state variables\r\n smtpConfigs = [];\r\n contacts = [];\r\n failedContacts = [];\r\n attachment = null;\r\n\r\n \/\/ Clear UI fields\r\n projectNameEl.value = '';\r\n fromNameEl.value = '';\r\n subjectEl.value = '';\r\n quill.setContents([{ insert: '\\n' }]); \/\/ Clear Quill editor\r\n attachmentFileEl.value = '';\r\n csvFileEl.value = '';\r\n\r\n \/\/ Re-render UI components\r\n renderSmtpList();\r\n renderCsvPreview([]);\r\n renderAttachmentInfo();\r\n resetProgressUI();\r\n logContainer.innerHTML = '';\r\n\r\n logMessage('New project started. All fields have been cleared.', 'info');\r\n }\r\n\r\n\r\n \/\/ --- Daily Limit Management ---\r\n function getTodayString() {\r\n return new Date().toISOString().split('T')[0];\r\n }\r\n \r\n function loadState() {\r\n updateProjectList();\r\n const storedCounts = localStorage.getItem('dailySendCounts');\r\n const lastResetDate = localStorage.getItem('lastResetDate');\r\n const today = getTodayString();\r\n\r\n if (lastResetDate === today && storedCounts) {\r\n dailySendCounts = JSON.parse(storedCounts);\r\n } else {\r\n dailySendCounts = {};\r\n localStorage.setItem('lastResetDate', today);\r\n saveSendCounts();\r\n }\r\n renderSmtpList();\r\n }\r\n\r\n function saveSendCounts() {\r\n localStorage.setItem('dailySendCounts', JSON.stringify(dailySendCounts));\r\n }\r\n \r\n function incrementSendCount(email) {\r\n if (dailySendCounts[email] === undefined) {\r\n dailySendCounts[email] = 0;\r\n }\r\n dailySendCounts[email]++;\r\n saveSendCounts();\r\n renderSmtpList();\r\n }\r\n\r\n \/\/ --- UI Update Functions ---\r\n function renderSmtpList() {\r\n smtpListEl.innerHTML = '';\r\n if (smtpConfigs.length === 0) {\r\n smtpListEl.innerHTML = '<p class=\"text-sm text-gray-500\">No servers configured. Load a project or add one.<\/p>';\r\n return;\r\n }\r\n smtpConfigs.forEach((config, index) => {\r\n const count = dailySendCounts[config.username] || 0;\r\n const isLimitReached = count >= config.dailyLimit;\r\n const serverDiv = document.createElement('div');\r\n serverDiv.className = 'p-3 border rounded-lg flex justify-between items-center';\r\n serverDiv.innerHTML = `\r\n <div class=\"text-sm\">\r\n <p class=\"font-semibold text-gray-700\">${config.username}<\/p>\r\n <p class=\"text-gray-500\">${config.host}:${config.port} (${(config.encryption || 'tls').toUpperCase()})<\/p>\r\n <p class=\"font-mono text-xs ${isLimitReached ? 'text-red-500 font-bold' : 'text-green-600'}\">Usage: ${count} \/ ${config.dailyLimit}<\/p>\r\n <\/div>\r\n <button class=\"btn-danger text-xs px-2 py-1\" onclick=\"removeSmtpConfig(${index})\"><i class=\"fas fa-trash\"><\/i><\/button>\r\n `;\r\n smtpListEl.appendChild(serverDiv);\r\n });\r\n }\r\n\r\n function renderCsvPreview(records) {\r\n csvPreviewContainer.innerHTML = ''; \r\n if (!records || records.length === 0) {\r\n csvPreviewContainer.innerHTML = '<p class=\"text-sm text-gray-500\">Upload a CSV file or load a project.<\/p>';\r\n return;\r\n }\r\n \r\n const table = document.createElement('table');\r\n table.className = 'w-full text-sm text-left text-gray-500';\r\n \r\n const thead = document.createElement('thead');\r\n thead.className = 'text-xs text-gray-700 uppercase bg-gray-50';\r\n thead.innerHTML = `\r\n <tr>\r\n <th scope=\"col\" class=\"px-4 py-2\">Name<\/th>\r\n <th scope=\"col\" class=\"px-4 py-2\">Email<\/th>\r\n <\/tr>\r\n `;\r\n table.appendChild(thead);\r\n \r\n const tbody = document.createElement('tbody');\r\n records.forEach(record => {\r\n const tr = document.createElement('tr');\r\n tr.className = 'bg-white border-b';\r\n tr.innerHTML = `\r\n <td class=\"px-4 py-2 font-medium text-gray-900 whitespace-nowrap\">${record.name || ''}<\/td>\r\n <td class=\"px-4 py-2\">${record.email}<\/td>\r\n `;\r\n tbody.appendChild(tr);\r\n });\r\n table.appendChild(tbody);\r\n \r\n csvPreviewContainer.appendChild(table);\r\n }\r\n\r\n function renderAttachmentInfo() {\r\n if (attachment) {\r\n attachmentInfoEl.innerHTML = `\r\n <div class=\"flex items-center justify-between bg-gray-100 p-2 rounded-md\">\r\n <span><i class=\"fas fa-paperclip mr-2\"><\/i>${attachment.name}<\/span>\r\n <button id=\"remove-attachment-btn\" class=\"text-red-500 hover:text-red-700 text-xs\">Remove<\/button>\r\n <\/div>\r\n `;\r\n document.getElementById('remove-attachment-btn').addEventListener('click', () => {\r\n attachment = null;\r\n attachmentFileEl.value = ''; \r\n renderAttachmentInfo();\r\n logMessage('Attachment removed. Remember to save the project.', 'warning');\r\n });\r\n } else {\r\n attachmentInfoEl.innerHTML = '';\r\n }\r\n }\r\n\r\n function updateProgress(sent, failed, total) {\r\n sentCountEl.textContent = sent;\r\n failedCountEl.textContent = failed;\r\n const percentage = total > 0 ? ((sent + failed) \/ total) * 100 : 0;\r\n progressBar.style.width = `${percentage}%`;\r\n }\r\n\r\n function resetProgressUI() {\r\n totalCountEl.textContent = contacts.length;\r\n sentCountEl.textContent = 0;\r\n failedCountEl.textContent = 0;\r\n progressBar.style.width = '0%';\r\n sendControlButtonsEl.innerHTML = `\r\n <button id=\"send-btn\" class=\"btn btn-primary w-full\"><i class=\"fas fa-bolt mr-2\"><\/i>Start Sending<\/button>\r\n <button id=\"stop-btn\" class=\"btn btn-secondary w-full\" disabled><i class=\"fas fa-stop-circle mr-2\"><\/i>Stop<\/button>\r\n `;\r\n \/\/ Re-add event listeners\r\n document.getElementById('send-btn').addEventListener('click', () => startSending(contacts));\r\n document.getElementById('stop-btn').addEventListener('click', stopSending);\r\n }\r\n \r\n \/\/ --- Event Handlers ---\r\n saveProjectBtn.addEventListener('click', saveCurrentProject);\r\n newProjectBtn.addEventListener('click', newProject);\r\n loadProjectBtn.addEventListener('click', loadSelectedProject);\r\n deleteProjectBtn.addEventListener('click', deleteSelectedProject);\r\n\r\n smtpEncryptionEl.addEventListener('change', (e) => {\r\n if (e.target.value === 'ssl') {\r\n smtpPortEl.value = '465';\r\n } else {\r\n smtpPortEl.value = '587';\r\n }\r\n });\r\n\r\n addSmtpBtn.addEventListener('click', () => {\r\n const host = smtpServerEl.value.trim();\r\n const port = smtpPortEl.value;\r\n const encryption = smtpEncryptionEl.value;\r\n const username = senderEmailEl.value.trim();\r\n const password = passwordEl.value.trim();\r\n const dailyLimit = parseInt(dailyLimitEl.value, 10) || 50;\r\n\r\n if (!host || !port || !username || !password) {\r\n logMessage('Please fill all SMTP fields to add a server.', 'error');\r\n return;\r\n }\r\n \r\n smtpConfigs.push({ host, port, encryption, username, password, dailyLimit });\r\n if(dailySendCounts[username] === undefined) {\r\n dailySendCounts[username] = 0;\r\n }\r\n\r\n renderSmtpList();\r\n smtpServerEl.value = '';\r\n smtpPortEl.value = '587';\r\n smtpEncryptionEl.value = 'tls';\r\n senderEmailEl.value = '';\r\n passwordEl.value = '';\r\n dailyLimitEl.value = '50';\r\n logMessage(`Added SMTP server: ${username}. Remember to save the project.`, 'warning');\r\n });\r\n\r\n async function verifySmtpSettings() {\r\n const host = smtpServerEl.value.trim();\r\n const port = smtpPortEl.value;\r\n const encryption = smtpEncryptionEl.value;\r\n const username = senderEmailEl.value.trim();\r\n const password = passwordEl.value.trim();\r\n\r\n if (!host || !port || !username || !password) {\r\n logMessage('Please fill all SMTP fields to verify.', 'error');\r\n return;\r\n }\r\n\r\n logMessage(`Verifying SMTP settings for ${username}...`, 'info');\r\n verifySmtpBtn.disabled = true;\r\n verifySmtpBtn.innerHTML = `<i class=\"fas fa-spinner fa-spin\"><\/i>`;\r\n\r\n const emailConfig = {\r\n Host: host,\r\n Username: username,\r\n Password: password,\r\n To: username, \/\/ Send to self to verify\r\n From: `\"${\"Myail Verification\"}\" <${username}>`,\r\n Subject: `Myail SMTP Connection Test`,\r\n Body: \"This is a test email from Myail to verify your SMTP settings. If you received this, your configuration is correct!\",\r\n Port: port\r\n };\r\n\r\n if (encryption === 'ssl') {\r\n emailConfig.SSL = true;\r\n }\r\n\r\n try {\r\n await Email.send(emailConfig);\r\n logMessage(` ---> Verification successful! SMTP settings for ${username} are correct.`, 'success');\r\n } catch (error) {\r\n logMessage(` ---> Verification failed. Error: ${error}`, 'error');\r\n } finally {\r\n verifySmtpBtn.disabled = false;\r\n verifySmtpBtn.innerHTML = `<i class=\"fas fa-check-circle mr-2\"><\/i>Verify`;\r\n }\r\n }\r\n\r\n verifySmtpBtn.addEventListener('click', verifySmtpSettings);\r\n\r\n window.removeSmtpConfig = (index) => {\r\n const removed = smtpConfigs.splice(index, 1);\r\n logMessage(`Removed SMTP server: ${removed[0].username}. Remember to save the project.`, 'warning');\r\n renderSmtpList();\r\n }\r\n\r\n csvFileEl.addEventListener('change', (event) => {\r\n const file = event.target.files[0];\r\n if (!file) {\r\n logMessage('No file selected.', 'error');\r\n renderCsvPreview([]);\r\n return;\r\n }\r\n const reader = new FileReader();\r\n reader.onload = (e) => {\r\n try {\r\n contacts = parseCSV(e.target.result);\r\n resetProgressUI();\r\n logMessage(`Loaded ${contacts.length} contacts. Remember to save the project.`, 'warning');\r\n renderCsvPreview(contacts);\r\n } catch (error) {\r\n logMessage(`Error parsing CSV: ${error.message}`, 'error');\r\n contacts = [];\r\n resetProgressUI();\r\n renderCsvPreview([]);\r\n }\r\n };\r\n reader.readAsText(file);\r\n });\r\n\r\n attachmentFileEl.addEventListener('change', (event) => {\r\n const file = event.target.files[0];\r\n if (!file) {\r\n attachment = null;\r\n renderAttachmentInfo();\r\n return;\r\n }\r\n const reader = new FileReader();\r\n reader.onload = (e) => {\r\n attachment = {\r\n name: file.name,\r\n data: e.target.result\r\n };\r\n renderAttachmentInfo();\r\n logMessage(`Attached file: ${file.name}. Remember to save the project.`, 'warning');\r\n };\r\n reader.readAsDataURL(file);\r\n });\r\n\r\n function stopSending() {\r\n isSending = false;\r\n logMessage('Sending process will stop after the current email.', 'warning');\r\n document.getElementById('stop-btn').disabled = true;\r\n }\r\n \r\n async function sendTestMail() {\r\n const testEmail = testEmailAddressEl.value.trim();\r\n const fromName = fromNameEl.value.trim();\r\n const bodyContent = quill.root.innerHTML;\r\n\r\n if (!testEmail) {\r\n logMessage('Please enter a test email address.', 'error');\r\n return;\r\n }\r\n if (!fromName) {\r\n logMessage('Please enter a \"From Name\".', 'error');\r\n return;\r\n }\r\n if (!subjectEl.value || quill.getLength() <= 1) {\r\n logMessage('Please provide an email subject and body for the test.', 'error');\r\n return;\r\n }\r\n\r\n const smtpToUse = smtpConfigs.find(config => (dailySendCounts[config.username] || 0) < config.dailyLimit);\r\n\r\n if (!smtpToUse) {\r\n logMessage('All available SMTP servers have reached their daily sending limits. Cannot send test mail.', 'error');\r\n return;\r\n }\r\n\r\n logMessage(`Sending test email to ${testEmail} via ${smtpToUse.username}...`, 'info');\r\n sendTestMailBtn.disabled = true;\r\n sendTestMailBtn.innerHTML = `<i class=\"fas fa-spinner fa-spin\"><\/i>`;\r\n \r\n const personalizedBody = bodyContent.replace(\/{name}\/g, 'Test User');\r\n \r\n const emailConfig = {\r\n Host: smtpToUse.host,\r\n Username: smtpToUse.username,\r\n Password: smtpToUse.password,\r\n To: testEmail,\r\n From: `\"${fromName}\" <${smtpToUse.username}>`,\r\n Subject: `[TEST] ${subjectEl.value}`,\r\n Body: personalizedBody,\r\n Port: smtpToUse.port,\r\n Attachments: []\r\n };\r\n\r\n if (smtpToUse.encryption === 'ssl') {\r\n emailConfig.SSL = true;\r\n }\r\n\r\n if (attachment) {\r\n emailConfig.Attachments.push({\r\n name: attachment.name,\r\n path: attachment.data\r\n });\r\n }\r\n\r\n try {\r\n await Email.send(emailConfig);\r\n logMessage(` ---> Successfully sent test email to ${testEmail}`, 'success');\r\n incrementSendCount(smtpToUse.username); \r\n } catch (error) {\r\n logMessage(` ---> Failed to send test email. Error: ${error}`, 'error');\r\n } finally {\r\n sendTestMailBtn.disabled = false;\r\n sendTestMailBtn.innerHTML = `<i class=\"fas fa-vial mr-2\"><\/i>Send Test`;\r\n }\r\n }\r\n\r\n sendTestMailBtn.addEventListener('click', sendTestMail);\r\n\r\n async function startSending(contactsToSend) {\r\n try {\r\n if (isSending) return;\r\n const fromName = fromNameEl.value.trim();\r\n const bodyContent = quill.root.innerHTML;\r\n let currentSmtpIndex = 0;\r\n\r\n \/\/ --- Input Validation ---\r\n if (!fromName) {\r\n logMessage('Please enter a \"From Name\" before sending.', 'error');\r\n return;\r\n }\r\n if (smtpConfigs.length === 0) {\r\n logMessage('Please configure at least one SMTP server.', 'error');\r\n return;\r\n }\r\n if (contactsToSend.length === 0) {\r\n logMessage('No contacts to send emails to.', 'error');\r\n return;\r\n }\r\n if (!subjectEl.value || quill.getLength() <= 1) {\r\n logMessage('Please provide an email subject and body.', 'error');\r\n return;\r\n }\r\n\r\n isSending = true;\r\n failedContacts = []; \/\/ Reset failed list for this run\r\n document.getElementById('send-btn').disabled = true;\r\n document.getElementById('stop-btn').disabled = false;\r\n document.getElementById('send-btn').innerHTML = '<i class=\"fas fa-spinner fa-spin mr-2\"><\/i>Sending...';\r\n logContainer.innerHTML = '';\r\n \r\n let sent = 0;\r\n let failed = 0;\r\n const total = contactsToSend.length;\r\n totalCountEl.textContent = total;\r\n sentCountEl.textContent = 0;\r\n failedCountEl.textContent = 0;\r\n updateProgress(0, 0, total);\r\n\r\n logMessage(`Starting campaign for ${total} contacts...`, 'info');\r\n\r\n for (let i = 0; i < total; i++) {\r\n if (!isSending) {\r\n logMessage('Sending process stopped by user.', 'info');\r\n break;\r\n }\r\n \r\n let smtpToUse = null;\r\n let triedAllSmtp = 0;\r\n while(triedAllSmtp < smtpConfigs.length) {\r\n const candidateSmtp = smtpConfigs[currentSmtpIndex];\r\n const count = dailySendCounts[candidateSmtp.username] || 0;\r\n \r\n if(count < candidateSmtp.dailyLimit) {\r\n smtpToUse = candidateSmtp;\r\n break;\r\n } else {\r\n logMessage(`Daily limit reached for ${candidateSmtp.username}. Skipping.`, 'warning');\r\n currentSmtpIndex = (currentSmtpIndex + 1) % smtpConfigs.length;\r\n triedAllSmtp++;\r\n }\r\n }\r\n\r\n if (!smtpToUse) {\r\n logMessage('All SMTP servers have reached their daily sending limits. Stopping campaign.', 'error');\r\n failedContacts.push(...contactsToSend.slice(i));\r\n failedCountEl.textContent = failedContacts.length;\r\n updateProgress(sent, failedContacts.length, total);\r\n break;\r\n }\r\n\r\n const contact = contactsToSend[i];\r\n if (!contact.email) {\r\n logMessage(`Skipping contact #${i + 1}: No email address.`, 'warning');\r\n failed++;\r\n failedContacts.push(contact);\r\n updateProgress(sent, failed, total);\r\n continue;\r\n }\r\n\r\n logMessage(`[Contact ${i+1}\/${total}] Preparing to send to ${contact.name || 'N\/A'} via ${smtpToUse.username}...`, 'info');\r\n\r\n const personalizedBody = bodyContent.replace(\/{name}\/g, contact.name || 'there');\r\n \r\n const emailConfig = {\r\n Host: smtpToUse.host,\r\n Username: smtpToUse.username,\r\n Password: smtpToUse.password,\r\n To: contact.email,\r\n From: `\"${fromName}\" <${smtpToUse.username}>`,\r\n Subject: subjectEl.value,\r\n Body: personalizedBody,\r\n Port: smtpToUse.port,\r\n Attachments: []\r\n };\r\n\r\n if (smtpToUse.encryption === 'ssl') {\r\n emailConfig.SSL = true;\r\n }\r\n\r\n if (attachment) {\r\n emailConfig.Attachments.push({\r\n name: attachment.name,\r\n path: attachment.data\r\n });\r\n }\r\n\r\n try {\r\n await Email.send(emailConfig);\r\n logMessage(` ---> Successfully sent to ${contact.email}`, 'success');\r\n sent++;\r\n incrementSendCount(smtpToUse.username);\r\n } catch (error) {\r\n logMessage(` ---> Failed to send to ${contact.email}. Error: ${error}`, 'error');\r\n failed++;\r\n failedContacts.push(contact);\r\n }\r\n \r\n updateProgress(sent, failed, total);\r\n currentSmtpIndex = (currentSmtpIndex + 1) % smtpConfigs.length;\r\n\r\n if (i < total - 1 && isSending) {\r\n logMessage(`Waiting for ${DELAY_BETWEEN_EMAILS \/ 1000} seconds...`, 'info');\r\n await new Promise(resolve => setTimeout(resolve, DELAY_BETWEEN_EMAILS));\r\n }\r\n }\r\n\r\n logMessage('Bulk email process finished.', 'info');\r\n if (failedContacts.length > 0) {\r\n logMessage(`${failedContacts.length} emails failed to send.`, 'warning');\r\n \r\n const oldRetryBtn = document.getElementById('retry-btn');\r\n if(oldRetryBtn) oldRetryBtn.remove();\r\n\r\n const retryBtn = document.createElement('button');\r\n retryBtn.id = 'retry-btn';\r\n retryBtn.className = 'btn btn-warning w-full';\r\n retryBtn.innerHTML = `<i class=\"fas fa-redo mr-2\"><\/i>Retry Failed (${failedContacts.length})`;\r\n retryBtn.addEventListener('click', () => {\r\n logMessage(`Retrying ${failedContacts.length} failed emails.`, 'info');\r\n retryBtn.remove();\r\n startSending(failedContacts);\r\n });\r\n sendControlButtonsEl.appendChild(retryBtn);\r\n }\r\n\r\n } catch (e) {\r\n logMessage(`A critical error occurred: ${e.message}`, 'error');\r\n console.error(e);\r\n } finally {\r\n isSending = false;\r\n document.getElementById('send-btn').disabled = false;\r\n document.getElementById('stop-btn').disabled = true;\r\n document.getElementById('send-btn').innerHTML = '<i class=\"fas fa-bolt mr-2\"><\/i>Start Sending';\r\n }\r\n }\r\n \r\n \/\/ --- Utility Functions ---\r\n function parseCSV(text) {\r\n const lines = text.split(\/\\r?\\n\/).filter(line => line.trim() !== '');\r\n if (lines.length < 2) throw new Error(\"CSV must have a header and at least one data row.\");\r\n \r\n const header = lines[0].split(',').map(h => h.trim().toLowerCase());\r\n const emailIndex = header.indexOf('email');\r\n const nameIndex = header.indexOf('name');\r\n\r\n if (emailIndex === -1) throw new Error(\"CSV header must contain an 'email' column.\");\r\n\r\n const result = [];\r\n for (let i = 1; i < lines.length; i++) {\r\n const data = lines[i].split(',');\r\n if (data.length > emailIndex) {\r\n const email = data[emailIndex] ? data[emailIndex].trim() : null;\r\n if (email) {\r\n const name = (nameIndex !== -1 && data.length > nameIndex && data[nameIndex]) \r\n ? data[nameIndex].trim() \r\n : '';\r\n result.push({ email, name });\r\n }\r\n }\r\n }\r\n return result;\r\n }\r\n \r\n \/\/ --- Initial Load ---\r\n document.addEventListener('DOMContentLoaded', () => {\r\n loadState();\r\n resetProgressUI();\r\n });\r\n\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Myail – Bulk Email Sender Myail Your Professional Bulk Email Sender Project Management Project Name Save New Load Project Load Delete Manage SMTP Servers SMTP Server Encryption TLSSSL SMTP Port Authentication Email Password \/ App Password Daily Limit Add Server Verify Configured Servers Upload Contacts CSV File Must contain ’email’ and ‘name’ columns. Uploaded Contacts […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/printone.ie\/index.php\/wp-json\/wp\/v2\/pages\/5093"}],"collection":[{"href":"https:\/\/printone.ie\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/printone.ie\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/printone.ie\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/printone.ie\/index.php\/wp-json\/wp\/v2\/comments?post=5093"}],"version-history":[{"count":4,"href":"https:\/\/printone.ie\/index.php\/wp-json\/wp\/v2\/pages\/5093\/revisions"}],"predecessor-version":[{"id":14012,"href":"https:\/\/printone.ie\/index.php\/wp-json\/wp\/v2\/pages\/5093\/revisions\/14012"}],"wp:attachment":[{"href":"https:\/\/printone.ie\/index.php\/wp-json\/wp\/v2\/media?parent=5093"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}