3‑page bulk mailer · SMTP · list upload · compose with hidden links

1 📡 SMTP front page

2 📎 Upload mailing list

3 ✉️ Compose (webmail style)

🔧 SMTP information

Enter your SMTP server details – they will be saved for the sending session.

📡 Server host

🔢 Port

👤 Username

🗝️ Password

🔒 Encryption

✔️ SMTP data is stored locally.

📎 Upload mailing / contact list

CSV or text file: email, firstname, lastname (one per line).

📁 Choose file

📋 No file loaded. You can also enter manually below.

✏️ Manual recipients (one per line or comma)

📌 List will be used in the compose page.

✉️ Compose email like Gmail / Yahoo

Use variables: {{FullName}}, {{FirstName}}, {{LastName}}, {{Email}}. Create hidden links behind descriptive text.

🏢 Company website

From

Recipients

Subject

➕ FullName ➕ FirstName ➕ LastName ➕ Email 🔗 UnsubscribeLink

📝 Message (HTML allowed)

Enter your email
            
Click: Online Interview Questionnaire Form

</div>
        
        
        <div class="link-builder">
            <div style="font-weight: 600; margin-bottom: 16px; font-size: 1.2rem;">🔗 Create hidden link (URL hidden behind text)</div>
            <div class="link-row">
                <input type="text" id="linkText" placeholder="Link text to display, e.g. 'Online Interview Questionnaire Form'" value="Online Interview Questionnaire Form">
                <input type="url" id="linkHref" placeholder="https://example.com/form" value="https://firsthrconnect.com/apply">
            </div>
            <div class="link-row" style="justify-content: flex-end;">
                <button id="insertLinkBtn">Insert link into message</button>
                <button id="insertApplyBtn" class="btn" style="padding: 16px 36px;">➕ Insert "Apply" button</button>
            </div>
            <div class="link-example">
                <span>Preview:</span> Click: <span id="linkPreview">Online Interview Questionnaire Form</span> (link hidden behind this text)
            </div>
        </div>

<div class="grid-2">
            <div class="form-group"><label>CC</label><input type="text" id="composeCc" placeholder="cc@example.com"></div>
            <div class="form-group"><label>BCC</label><input type="text" id="composeBcc" placeholder="bcc@example.com"></div>
        </div>

<div class="unsub-box" id="unsubscribePreview">
            🔗 <strong>{{UnsubscribeLink}}</strong> will be replaced with a per-recipient unsubscribe URL. 
            <a href="#">Example unsubscribe link</a> (hidden behind text)
        </div>

<div class="email-preview-box">
            <strong>📧 Email Preview (with hidden links):</strong>
            <div id="livePreview" style="margin-top: 15px; line-height: 1.6;">
                Please click the link below and fill out the online interview form by March 9th, 2026, in order to move forward with the interview process.<br><br>
                Click: <a href="https://firsthrconnect.com/apply">Online Interview Questionnaire Form</a><br><br>
                Note:<br>
                Questions [ ] firsthrconnect [ ] <a href="https://firsthrconnect.com/apply">Apply</a> [ ] request the "Online The briefings and interviews are held every Monday through Friday from 7 a.m. to 5 p.m."
            </div>
        </div>

<div class="flex-row">
            <button class="btn btn-primary" id="simulateSendBtn">📬 Review & send bulk (simulated)</button>
            <button class="btn" id="backToUploadFrom3">← Back to upload list</button>
        </div>
        <div class="alert" id="composeAlert">✅ Links are now hidden behind descriptive text. Click "Insert link" to add more.</div>
    </div>
</div>

let uploadedContacts = [];  // { email, firstName, lastName }

// DOM pages
        const page1 = document.getElementById('page1');
        const page2 = document.getElementById('page2');
        const page3 = document.getElementById('page3');
        const tab1 = document.getElementById('tab1');
        const tab2 = document.getElementById('tab2');
        const tab3 = document.getElementById('tab3');

// SMTP inputs
        const smtpHost = document.getElementById('smtpHost');
        const smtpPort = document.getElementById('smtpPort');
        const smtpUser = document.getElementById('smtpUser');
        const smtpPass = document.getElementById('smtpPass');
        const smtpSecure = document.getElementById('smtpSecure');
        const smtpMessage = document.getElementById('smtpMessage');

// Page 2 elements
        const mailingFile = document.getElementById('mailingFile');
        const listPreview = document.getElementById('listPreview');
        const manualRecipients = document.getElementById('manualRecipients');
        const uploadMessage = document.getElementById('uploadMessage');

// Compose fields
        const composeFrom = document.getElementById('composeFrom');
        const composeRecipients = document.getElementById('composeRecipients');
        const composeSubject = document.getElementById('composeSubject');
        const composeBody = document.getElementById('composeBody');
        const composeCc = document.getElementById('composeCc');
        const composeBcc = document.getElementById('composeBcc');
        const unsubscribePreview = document.getElementById('unsubscribePreview');
        const companyWebsite = document.getElementById('companyWebsite');
        const livePreview = document.getElementById('livePreview');

// Insert link tool
        const linkText = document.getElementById('linkText');
        const linkHref = document.getElementById('linkHref');
        const insertLinkBtn = document.getElementById('insertLinkBtn');
        const insertApplyBtn = document.getElementById('insertApplyBtn');
        const linkPreview = document.getElementById('linkPreview');

// Buttons navigation
        document.getElementById('saveSmtpAndGoPage2').addEventListener('click', saveAndGoToPage2);
        document.getElementById('smtpTest').addEventListener('click', ()=>{
            smtpHost.value = 'mail.smtp2go.com';
            smtpPort.value = '2525';
            smtpUser.value = 'testuser';
            smtpPass.value = 'testpass123';
            smtpSecure.value = 'tls';
            smtpMessage.innerHTML = '🧪 Test SMTP filled. Replace with your real credentials.';
        });
        document.getElementById('backToSmtpFrom2').addEventListener('click', backToSmtp);
        document.getElementById('goToPage3Btn').addEventListener('click', goToPage3);
        document.getElementById('backToUploadFrom3').addEventListener('click', backToUpload);
        document.getElementById('simulateSendBtn').addEventListener('click', simulateSend);

// tab navigation
        tab1.addEventListener('click', ()=> showPage(1));
        tab2.addEventListener('click', ()=> showPage(2));
        tab3.addEventListener('click', ()=> showPage(3));

// file upload handler
        mailingFile.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (!file) return;
            const reader = new FileReader();
            reader.onload = (ev) => {
                parseContacts(ev.target.result);
            };
            reader.readAsText(file);
        });

// show page utility
        function showPage(num) {
            page1.classList.add('hidden-panel');
            page2.classList.add('hidden-panel');
            page3.classList.add('hidden-panel');
            tab1.classList.remove('active');
            tab2.classList.remove('active');
            tab3.classList.remove('active');
            if (num === 1) {
                page1.classList.remove('hidden-panel');
                tab1.classList.add('active');
            } else if (num === 2) {
                page2.classList.remove('hidden-panel');
                tab2.classList.add('active');
            } else if (num === 3) {
                page3.classList.remove('hidden-panel');
                tab3.classList.add('active');
                updateLivePreview();
            }
        }

function saveAndGoToPage2() {
            if (!smtpHost.value.trim() || !smtpPort.value.trim()) {
                smtpMessage.innerHTML = '❌ Host and port required.';
                smtpMessage.style.background = '#ffdede';
                return;
            }
            smtp.host = smtpHost.value.trim();
            smtp.port = smtpPort.value.trim();
            smtp.user = smtpUser.value.trim();
            smtp.pass = smtpPass.value.trim();
            smtp.secure = smtpSecure.value;
            smtpMessage.innerHTML = '✅ SMTP saved.';
            smtpMessage.style.background = '#e0f0e0';
            showPage(2);
        }

function backToSmtp() {
            smtpHost.value = smtp.host;
            smtpPort.value = smtp.port;
            smtpUser.value = smtp.user;
            smtpPass.value = smtp.pass;
            smtpSecure.value = smtp.secure;
            showPage(1);
        }

function goToPage3() {
            showPage(3);
        }

function backToUpload() {
            showPage(2);
        }

// insert variable at cursor
        window.insertAtCursor = function(variable) {
            composeBody.value += ' ' + variable;
            composeBody.focus();
            updateLivePreview();
        };

// IMPROVED LINK INSERTION: Creates HTML link with hidden URL
        function insertLink(linkTextValue, linkUrlValue) {
            const text = linkTextValue || linkText.value.trim();
            let url = linkUrlValue || linkHref.value.trim();
            
            if (!text || !url) {
                alert('Please enter both link text and URL');
                return;
            }
            
            // Ensure url has protocol
            if (!url.startsWith('http://') && !url.startsWith('https://')) {
                url = 'https://' + url;
            }
            
            // Create HTML anchor tag - this hides the URL behind the text
            const linkHtml = `<a href="${url}" target="_blank">${text}</a>`;
            
            // Insert at cursor position (simplified - appends)
            composeBody.value += ' ' + linkHtml;
            composeBody.focus();
            updateLivePreview();
        }

// Insert link button handler
        insertLinkBtn.addEventListener('click', function() {
            insertLink(linkText.value.trim(), linkHref.value.trim());
        });

// Insert "Apply" button/link (as seen in your screenshot)
        insertApplyBtn.addEventListener('click', function() {
            const website = companyWebsite.value.trim() || 'firsthrconnect.com';
            const applyUrl = website.startsWith('http') ? website + '/apply' : 'https://' + website + '/apply';
            insertLink('Apply', applyUrl);
        });

// Update live preview
        function updateLivePreview() {
            let bodyContent = composeBody.value;
            
            // Replace variables with example values for preview
            bodyContent = bodyContent
                .replace(/\{\{FullName\}\}/g, 'John Doe')
                .replace(/\{\{FirstName\}\}/g, 'John')
                .replace(/\{\{LastName\}\}/g, 'Doe')
                .replace(/\{\{Email\}\}/g, 'john.doe@example.com')
                .replace(/\{\{UnsubscribeLink\}\}/g, '<a href="#">unsubscribe</a>');
            
            // Convert plain text URLs in the preview to clickable links for demonstration
            // But preserve existing anchor tags
            livePreview.innerHTML = bodyContent.replace(/\n/g, '<br>');
        }

// Update preview when body changes
        composeBody.addEventListener('input', updateLivePreview);
        
        // Update link preview text
        linkText.addEventListener('input', function() {
            linkPreview.textContent = linkText.value || 'Online Interview Questionnaire Form';
        });

// simulate send (comprehensive)
        function simulateSend() {
            // recipients from uploaded list or manual
            let recipients = [];
            if (uploadedContacts.length > 0) {
                recipients = uploadedContacts;
            } else {
                const manual = manualRecipients.value.trim();
                const emails = manual.split(/[,\s\n]+/).filter(e => e.includes('@') && e.length>3);
                recipients = emails.map(e => ({ email: e, firstName: '', lastName: '' }));
            }

if (recipients.length === 0) {
                document.getElementById('composeAlert').innerHTML = '❌ No recipients. Go back and upload a list or enter manually.';
                return;
            }

const from = composeFrom.value.trim() || '(not set)';
            const subjectTmpl = composeSubject.value.trim() || '(no subject)';
            let bodyTmpl = composeBody.value || '';
            const cc = composeCc.value.trim();
            const bcc = composeBcc.value.trim();

const first = recipients[0];
            const fullName = (first.firstName + ' ' + first.lastName).trim() || first.email;
            const unsubscribeMock = 'https://yourapp.com/unsubscribe?id=' + encodeURIComponent(first.email);

// Replace variables in body
            let previewBody = bodyTmpl
                .replace(/\{\{FullName\}\}/g, fullName)
                .replace(/\{\{FirstName\}\}/g, first.firstName || 'Valued')
                .replace(/\{\{LastName\}\}/g, first.lastName || 'Customer')
                .replace(/\{\{Email\}\}/g, first.email)
                .replace(/\{\{UnsubscribeLink\}\}/g, unsubscribeMock);

let previewSubject = subjectTmpl
                .replace(/\{\{FullName\}\}/g, fullName)
                .replace(/\{\{FirstName\}\}/g, first.firstName || '')
                .replace(/\{\{LastName\}\}/g, first.lastName || '')
                .replace(/\{\{Email\}\}/g, first.email);

// initial page
        showPage(1);
        
        // Update link preview
        linkPreview.textContent = linkText.value;
        
        // Set up live preview
        setTimeout(() => {
            updateLivePreview();
        }, 100);
    })();
</script>
</body>
</html>