`;return html;
}showPreview() {
const originalPreview = document.getElementById('svgOriginalPreview');
originalPreview.innerHTML = `
${this.originalSVG}
`;const convertedPreview = document.getElementById('svgConvertedPreview');
const parser = new DOMParser();
const doc = parser.parseFromString(this.convertedHTML, 'text/html');
const svgContent = doc.querySelector('.svg-content') || doc.body;
const previewContainer = document.createElement('div');
previewContainer.style.cssText = `
display: flex;
justify-content: center;
align-items: center;
min-height: 200px;
background: #f9f9f9;
border-radius: 4px;
padding: 20px;
`;
const contentClone = svgContent.cloneNode(true);
previewContainer.appendChild(contentClone);
convertedPreview.innerHTML = '';
convertedPreview.appendChild(previewContainer);const generatedCode = document.getElementById('svgGeneratedCode');
generatedCode.textContent = this.formatHTML(this.convertedHTML);showSVGTab('original');
}formatHTML(html) {
return html
.replace(/>\n<')
.split('\n')
.map(line => line.trim())
.filter(line => line)
.map((line, index, arr) => {
let indent = 0;
for (let i = 0; i < index; i++) {
if (arr[i].includes('<') && !arr[i].includes('')) {
indent++;
}
if (arr[i].includes(' panel.classList.remove('active'));const tabs = document.querySelectorAll('.svg-tab-btn');
tabs.forEach(tab => tab.classList.remove('active'));document.getElementById('svg' + tabName.charAt(0).toUpperCase() + tabName.slice(1) + 'Panel').classList.add('active');
const tabButtons = document.querySelectorAll('.svg-tab-btn');
tabButtons.forEach(btn => {
if ((tabName === 'original' && btn.textContent.includes('Original')) ||
(tabName === 'converted' && btn.textContent.includes('Converted HTML')) ||
(tabName === 'code' && btn.textContent.includes('HTML Code'))) {
btn.classList.add('active');
}
});
}function copySVGCode() {
const code = document.getElementById('svgGeneratedCode').textContent;
if (navigator.clipboard && window.isSecureContext) {
navigator.clipboard.writeText(code).then(() => {
showSVGCopySuccess();
}).catch(() => {
fallbackSVGCopy(code);
});
} else {
fallbackSVGCopy(code);
}
}function fallbackSVGCopy(text) {
const textArea = document.createElement('textarea');
textArea.value = text;
textArea.style.position = 'fixed';
textArea.style.left = '-999999px';
textArea.style.top = '-999999px';
document.body.appendChild(textArea);
textArea.focus();
textArea.select();
try {
document.execCommand('copy');
showSVGCopySuccess();
} catch (err) {
alert('Failed to copy code. Please select and copy manually.');
} finally {
document.body.removeChild(textArea);
}
}function showSVGCopySuccess() {
const copyBtn = document.querySelector('.svg-copy-btn');
const originalText = copyBtn.innerHTML;
copyBtn.innerHTML = ' Copied!';
copyBtn.style.backgroundColor = '#28a745';
setTimeout(() => {
copyBtn.innerHTML = originalText;
copyBtn.style.backgroundColor = '#0078D9';
}, 2000);
}function downloadSVGHTML() {
if (!window.svgConverterApp.convertedHTML) {
alert('No converted HTML to download.');
return;
}const blob = new Blob([window.svgConverterApp.convertedHTML], { type: 'text/html' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = (window.svgConverterApp.fileName || 'converted-svg') + '.html';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}function resetSVGConverter() {
document.getElementById('svgUploadArea').style.display = 'block';
document.getElementById('svgProgressSection').style.display = 'none';
document.getElementById('svgPreviewSection').style.display = 'none';
document.getElementById('svgErrorSection').style.display = 'none';
document.getElementById('svgFileInput').value = '';
window.svgConverterApp.originalSVG = null;
window.svgConverterApp.convertedHTML = null;
window.svgConverterApp.fileName = '';
}// Initialize the application
document.addEventListener('DOMContentLoaded', function() {
window.svgConverterApp = new SVGToHTMLConverter();
document.addEventListener('dragover', function(e) {
e.preventDefault();
});document.addEventListener('drop', function(e) {
e.preventDefault();
});
});