Printable Article Template
[Edit Title]
Use [Copy] to copy to clipboard
[<div id="print-wrapper" style="border-radius: 8px; border: 1px solid rgb(204, 204, 204); line-height: 1.45; margin: 16px auto; max-width: 900px; padding: 20px;">
<div style="align-items: center; border-bottom: 1px solid rgb(224, 224, 224); color: #111111; display: flex; flex-wrap: wrap; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; gap: 12px; justify-content: space-between; margin-bottom: 20px; padding-bottom: 12px;">
<h1 style="color: #2c3e50; font-size: 24px; margin: 0px;">[Edit Title Here]</h1>
<div style="display: flex; gap: 8px;">
<button id="copy-template-btn" style="background: rgb(247, 247, 247); border-radius: 6px; border: 1px solid rgb(68, 68, 68); cursor: pointer; font-weight: bold; padding: 6px 12px;" type="button">📋 Copy</button>
<button id="print-article-btn" style="background: rgb(247, 247, 247); border-radius: 6px; border: 1px solid rgb(68, 68, 68); cursor: pointer; font-weight: bold; padding: 6px 12px;" type="button">🖨️ Print / Save as PDF</button>
</div>
</div>
<div id="printable-content">
<p style="color: #111111; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;"><b>[Edit Content Here]</b></p>
</div>
<script>
(function () {
// Copy Template Button Handler
var copyBtn = document.getElementById('copy-template-btn');
if (copyBtn) {
copyBtn.addEventListener('click', function () {
var templateHTML = `<div id="print-wrapper" style="border-radius: 8px; border: 1px solid rgb(204, 204, 204); line-height: 1.45; margin: 16px auto; max-width: 900px; padding: 20px;">
<div style="align-items: center; border-bottom: 1px solid rgb(224, 224, 224); color: #111111; display: flex; flex-wrap: wrap; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; gap: 12px; justify-content: space-between; margin-bottom: 20px; padding-bottom: 12px;">
<h1 style="color: #2c3e50; font-size: 24px; margin: 0px;">Printable Article Template [Edit Title Here]</h1>
<button id="print-article-btn" style="background: rgb(247, 247, 247); border-radius: 6px; border: 1px solid rgb(68, 68, 68); cursor: pointer; font-weight: bold; padding: 6px 12px;" type="button">🖨️ Print / Save as PDF</button>
</div>
<div id="printable-content">
<p>
[PASTE YOUR ARTICLE CONTENT HERE]
</p>
</div>
<script>
(function () {
var btn = document.getElementById('print-article-btn');
if (!btn) return;
btn.addEventListener('click', function () {
var src = document.getElementById('printable-content');
if (!src) return;
var clone = src.cloneNode(true);
var fr = document.createElement('iframe');
fr.setAttribute('aria-hidden', 'true');
fr.style.cssText = 'position:fixed;right:0;bottom:0;width:0;height:0;border:0;';
document.body.appendChild(fr);
var doc = fr.contentDocument || fr.contentWindow.document;
doc.open();
doc.write('<!doctype html><html><head><meta charset="utf-8"><title>Print Article</title>');
doc.write('<style>@page{margin:15mm;}body{font-family:Georgia,Times New Roman,serif; line-height:1.6; color:#000; margin:0; padding:0;}h1,h2,h3{font-family:Helvetica Neue,Arial,sans-serif;}a{word-break:break-all; text-decoration:none; color:#000;}hr{border:none; border-top:1px solid #e0e0e0; margin:15px 0;}div{padding: 20px;}</style>');
doc.write('</head><body>');
doc.write(clone.outerHTML);
doc.write('</body></html>');
doc.close();
var w = fr.contentWindow;
w.focus();
w.addEventListener('afterprint', function(){ setTimeout(function(){ document.body.removeChild(fr); }, 100); }, { once:true });
w.print();
});
})();
<\/script>
</div>`;
// Copy to clipboard
navigator.clipboard.writeText(templateHTML).then(function() {
var originalText = copyBtn.textContent;
copyBtn.textContent = '✓ Copied!';
copyBtn.style.background = '#d4edda';
setTimeout(function() {
copyBtn.textContent = originalText;
copyBtn.style.background = 'rgb(247, 247, 247)';
}, 2000);
}).catch(function(err) {
alert('Failed to copy template. Please try again.');
console.error('Copy failed:', err);
});
});
}
// Print Button Handler
var printBtn = document.getElementById('print-article-btn');
if (printBtn) {
printBtn.addEventListener('click', function () {
var src = document.getElementById('printable-content');
if (!src) return;
var clone = src.cloneNode(true);
var fr = document.createElement('iframe');
fr.setAttribute('aria-hidden', 'true');
fr.style.cssText = 'position:fixed;right:0;bottom:0;width:0;height:0;border:0;';
document.body.appendChild(fr);
var doc = fr.contentDocument || fr.contentWindow.document;
doc.open();
doc.write('<!doctype html><html><head><meta charset="utf-8"><title>Print Article</title>');
doc.write('<style>@page{margin:15mm;}body{font-family:Georgia,Times New Roman,serif; line-height:1.6; color:#000; margin:0; padding:0;}h1,h2,h3{font-family:Helvetica Neue,Arial,sans-serif;}a{word-break:break-all; text-decoration:none; color:#000;}hr{border:none; border-top:1px solid #e0e0e0; margin:15px 0;}div{padding: 20px;}</style>');
doc.write('</head><body>');
doc.write(clone.outerHTML);
doc.write('</body></html>');
doc.close();
var w = fr.contentWindow;
w.focus();
w.addEventListener('afterprint', function(){ setTimeout(function(){ document.body.removeChild(fr); }, 100); }, { once:true });
w.print();
});
}
})();
</script>
</div>]
Comments