#seo-tool-wrapper {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: #f9fafb;
padding: 25px;
border: 1px solid #e5e7eb;
border-radius: 8px;
color: #111827;
max-width: 800px;
margin: 20px auto;
}
#seo-tool-wrapper h2 {
margin-top: 0;
font-size: 22px;
color: #1f2937;
border-bottom: 2px solid #3b82f6;
padding-bottom: 10px;
}
.seo-input-group {
margin-bottom: 15px;
}
.seo-input-group label {
display: block;
font-weight: 600;
margin-bottom: 5px;
font-size: 14px;
}
.seo-input-group input, .seo-input-group textarea {
width: 100%;
padding: 10px;
border: 1px solid #d1d5db;
border-radius: 4px;
box-sizing: border-box;
font-size: 14px;
}
.seo-btn-container {
display: flex;
gap: 10px;
margin-top: 20px;
}
.seo-btn {
background-color: #3b82f6;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
}
.seo-btn:hover {
background-color: #2563eb;
}
.seo-btn-copy {
background-color: #10b981;
}
.seo-btn-copy:hover {
background-color: #059669;
}
#seo-output {
margin-top: 20px;
background-color: #1e293b;
color: #f8fafc;
padding: 15px;
border-radius: 4px;
font-family: monospace;
font-size: 13px;
white-space: pre-wrap;
word-break: break-all;
display: none;
min-height: 100px;
}
.seo-counter {
font-size: 12px;
color: #6b7280;
margin-top: 4px;
text-align: right;
}
function updateCounter(inputId, counterId) {
var val = document.getElementById(inputId).value;
document.getElementById(counterId).innerText = val.length;
}
function generateTags() {
var title = document.getElementById('seo-title').value;
var desc = document.getElementById('seo-desc').value;
var url = document.getElementById('seo-url').value;
var output = document.getElementById('seo-output');
var tags = '\n';
tags += '
' + title + '\n';
tags += '\n';
tags += '\n\n';
tags += '\n';
tags += '\n';
tags += '\n';
tags += '\n';
tags += '\n\n';
tags += '\n';
tags += '\n';
tags += '\n';
tags += '\n';
tags += ";
output.innerText = tags;
output.style.display = 'block';
}
function copyToClipboard() {
var text = document.getElementById('seo-output').innerText;
if (!text) {
alert('Please generate tags first.');
return;
}
var elem = document.createElement('textarea');
document.body.appendChild(elem);
elem.value = text;
elem.select();
document.execCommand('copy');
document.body.removeChild(elem);
alert('Meta tags copied to clipboard!');
}