gpt_chrome_autodrafter_v3/test_parser.html
2025-07-01 15:46:34 -07:00

364 lines
No EOL
14 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MIME Email Parser Test</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
}
h1 {
color: #1a4d2e;
}
.container {
display: flex;
flex-direction: column;
gap: 20px;
}
textarea {
width: 100%;
min-height: 300px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-family: monospace;
}
button {
background-color: #1a4d2e;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
max-width: 200px;
}
button:hover {
background-color: #e6b800;
color: #1a4d2e;
}
.result-container {
border: 1px solid #ccc;
border-radius: 4px;
padding: 10px;
background-color: #f9f9f9;
}
pre {
white-space: pre-wrap;
word-wrap: break-word;
}
.tabs {
display: flex;
margin-bottom: 10px;
}
.tab {
padding: 10px 20px;
border: 1px solid #ccc;
border-bottom: none;
border-radius: 4px 4px 0 0;
cursor: pointer;
background-color: #f1f1f1;
}
.tab.active {
background-color: #fff;
border-bottom: 1px solid white;
margin-bottom: -1px;
}
.tab-content {
display: none;
padding: 20px;
border: 1px solid #ccc;
border-radius: 0 0 4px 4px;
}
.tab-content.active {
display: block;
}
#console-log {
background-color: #000;
color: #0f0;
font-family: monospace;
padding: 10px;
height: 200px;
overflow-y: auto;
margin-top: 20px;
border-radius: 4px;
}
.log-entry {
margin: 2px 0;
padding: 2px 0;
border-bottom: 1px solid #333;
}
.log-entry.error {
color: #f66;
}
.log-entry.warn {
color: #ff6;
}
.log-entry.info {
color: #6cf;
}
.log-controls {
margin-top: 10px;
display: flex;
gap: 10px;
}
.log-controls button {
max-width: none;
flex: 1;
}
</style>
</head>
<body>
<h1>MIME Email Parser Test</h1>
<div class="container">
<div>
<h2>Raw MIME Email</h2>
<textarea id="mime-input">MIME-Version: 1.0
Date: Fri, 2 May 2025 13:40:14 -0700
References: <CALhcmpYY6Fr_EiNK=9j_inFQEe4PcDDcmkiWyPEigqWs+WCrzg@mail.gmail.com>
<ins-u-1-01969293-9d6e-7191-8ae4-ebacf5dd2816@newfrontierinc.com>
In-Reply-To: <ins-u-1-01969293-9d6e-7191-8ae4-ebacf5dd2816@newfrontierinc.com>
Bcc: 45972187@bcc.hubspot.com
Message-ID: <CANVF1TOomXe9ykviUG2SScd5e0yFsdhHatt9FCR8jtbmwDFd-A@mail.gmail.com>
Subject: Re: Re: Funding marketing agencies
From: Curtis Boortz <curtis@newfrontierinc.com>
To: kirk@219group.com
Cc: Maria Zandonai <maria@newfrontierinc.com>
Content-Type: multipart/alternative; boundary="0000000000005794a106342d2806"
--0000000000005794a106342d2806
Content-Type: text/plain; charset="UTF-8"
Content-Transfer-Encoding: quoted-printable
Hi Kirk,
Here with Maria, just jumping in to support. Yours is a unique case, and
this is on us for not making it clear sooner, but the Bolt loan has
industry restrictions around marketing agencies, so they aren't the best
option here.
That said, we work with another SBA bank, Newity, that offers a very
similar product; the main difference is that they *can* work with marketing
agencies.
If that sounds alright with you, I'm happy to move this forward. The next
step would be filling out a quick 5-minute application, after which we can
get some hard numbers for you. Let me know what you think.
Best,
Curtis
--0000000000005794a106342d2806
Content-Type: text/html; charset="UTF-8"
Content-Transfer-Encoding: quoted-printable
<div dir=3D"ltr"><div dir=3D"ltr">Hi Kirk,<br><br>Here with Maria, just jum=
ping in to support. Yours is a unique case, and this is on us for not makin=
g it clear sooner, but the Bolt loan has industry restrictions around marke=
ting agencies, so they aren&#39;t the best option here.<br><br>That said, w=
e work with another=C2=A0SBA bank, Newity, that offers a very similar produ=
ct; the main difference is that they <i>can</i>=C2=A0work with marketing ag=
encies.=C2=A0<br><br>If that sounds alright with you, I&#39;m happy to move=
this forward. The next step would be filling out a quick 5-minute applicat=
ion, after which we can get some hard numbers for you. Let me know what you=
think.<br><br>Best,<div>Curtis<br><br></div></div></div>
--0000000000005794a106342d2806--</textarea>
<br>
<button id="parse-button">Parse Email</button>
</div>
<div class="result-container">
<h2>Parsing Results</h2>
<div class="tabs">
<div class="tab active" data-tab="summary">Summary</div>
<div class="tab" data-tab="headers">Headers</div>
<div class="tab" data-tab="text">Text Content</div>
<div class="tab" data-tab="html">HTML Content</div>
<div class="tab" data-tab="raw">Raw JSON</div>
<div class="tab" data-tab="logs">Console Logs</div>
</div>
<div id="summary" class="tab-content active">
<h3>Email Summary</h3>
<div id="summary-content">
<p>Click "Parse Email" to see results</p>
</div>
</div>
<div id="headers" class="tab-content">
<h3>Email Headers</h3>
<pre id="headers-content">Click "Parse Email" to see results</pre>
</div>
<div id="text" class="tab-content">
<h3>Plain Text Content</h3>
<pre id="text-content">Click "Parse Email" to see results</pre>
</div>
<div id="html" class="tab-content">
<h3>HTML Content</h3>
<div id="html-display">Click "Parse Email" to see results</div>
<h4>Raw HTML</h4>
<pre id="html-content">Click "Parse Email" to see results</pre>
</div>
<div id="raw" class="tab-content">
<h3>Raw Parsed Data</h3>
<pre id="raw-content">Click "Parse Email" to see results</pre>
</div>
<div id="logs" class="tab-content">
<h3>Console Logs</h3>
<div id="console-log"></div>
<div class="log-controls">
<button id="clear-logs">Clear Logs</button>
<button id="toggle-autoscroll">Disable Auto-scroll</button>
</div>
</div>
</div>
</div>
<script src="email_parser.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Console log capture
const consoleLogElement = document.getElementById('console-log');
const clearLogsButton = document.getElementById('clear-logs');
const toggleAutoscrollButton = document.getElementById('toggle-autoscroll');
let autoScroll = true;
// Override console methods to capture logs
const originalConsole = {
log: console.log,
error: console.error,
warn: console.warn,
info: console.info
};
function appendLogEntry(type, args) {
const logEntry = document.createElement('div');
logEntry.className = `log-entry ${type}`;
logEntry.textContent = `[${new Date().toISOString()}] ${args.map(arg => {
if (typeof arg === 'object') {
try {
return JSON.stringify(arg);
} catch (e) {
return String(arg);
}
}
return String(arg);
}).join(' ')}`;
consoleLogElement.appendChild(logEntry);
if (autoScroll) {
consoleLogElement.scrollTop = consoleLogElement.scrollHeight;
}
}
console.log = function() {
appendLogEntry('log', Array.from(arguments));
originalConsole.log.apply(console, arguments);
};
console.error = function() {
appendLogEntry('error', Array.from(arguments));
originalConsole.error.apply(console, arguments);
};
console.warn = function() {
appendLogEntry('warn', Array.from(arguments));
originalConsole.warn.apply(console, arguments);
};
console.info = function() {
appendLogEntry('info', Array.from(arguments));
originalConsole.info.apply(console, arguments);
};
clearLogsButton.addEventListener('click', function() {
consoleLogElement.innerHTML = '';
});
toggleAutoscrollButton.addEventListener('click', function() {
autoScroll = !autoScroll;
this.textContent = autoScroll ? 'Disable Auto-scroll' : 'Enable Auto-scroll';
});
// Tab switching
const tabs = document.querySelectorAll('.tab');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
// Remove active class from all tabs and content
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
// Add active class to clicked tab and corresponding content
tab.classList.add('active');
const tabId = tab.getAttribute('data-tab');
document.getElementById(tabId).classList.add('active');
});
});
// Parse button click handler
document.getElementById('parse-button').addEventListener('click', function() {
const mimeContent = document.getElementById('mime-input').value;
try {
console.log('Starting email parsing process');
// Parse the MIME email
console.log('Parsing MIME email...');
const parsedEmail = parseMimeEmail(mimeContent);
console.log('MIME email parsed successfully');
// Extract thread information
console.log('Extracting email thread...');
const emailThread = extractEmailThread(mimeContent);
console.log('Email thread extracted successfully');
// Update summary tab
const summaryContent = document.getElementById('summary-content');
summaryContent.innerHTML = `
<p><strong>Subject:</strong> ${emailThread.subject}</p>
<p><strong>From:</strong> ${emailThread.sender.name} &lt;${emailThread.sender.email}&gt;</p>
<p><strong>To:</strong> ${emailThread.recipient.name} &lt;${emailThread.recipient.email}&gt;</p>
<p><strong>Date:</strong> ${emailThread.date}</p>
<p><strong>CC:</strong> ${emailThread.cc || 'None'}</p>
<p><strong>BCC:</strong> ${emailThread.bcc || 'None'}</p>
`;
// Update headers tab
document.getElementById('headers-content').textContent =
JSON.stringify(parsedEmail.headers, null, 2);
// Update text content tab
document.getElementById('text-content').textContent = parsedEmail.textContent;
// Update HTML content tab
document.getElementById('html-content').textContent = parsedEmail.htmlContent;
document.getElementById('html-display').innerHTML = parsedEmail.htmlContent;
// Update raw JSON tab
document.getElementById('raw-content').textContent =
JSON.stringify(emailThread, null, 2);
console.log('All UI elements updated with parsed email data');
} catch (error) {
console.error('Failed to parse email:', error);
alert('Error parsing email: ' + error.message);
}
});
console.log('Test page initialized and ready');
});
</script>
</body>
</html>