✨ Rainbow Code Playground ✨
`);
outputDoc.close();
showNotification('Code executed successfully!');
}
// Copy code
document.getElementById('copy-btn').addEventListener('click', () => {
const activeTab = document.querySelector('.tab.active');
const tabName = activeTab.getAttribute('data-tab');
let codeToCopy = '';
if (tabName === 'html') codeToCopy = document.getElementById('html-editor').value;
if (tabName === 'css') codeToCopy = document.getElementById('css-editor').value;
if (tabName === 'js') codeToCopy = document.getElementById('js-editor').value;
if (tabName === 'output') {
const outputFrame = document.getElementById('output-frame');
const outputDoc = outputFrame.contentDocument || outputFrame.contentWindow.document;
codeToCopy = outputDoc.documentElement.outerHTML;
}
navigator.clipboard.writeText(codeToCopy).then(() => {
showNotification('Code copied to clipboard!');
});
});
// Download project
document.getElementById('download-btn').addEventListener('click', () => {
const html = document.getElementById('html-editor').value;
const css = document.getElementById('css-editor').value;
const js = document.getElementById('js-editor').value;
const fullCode = `
Rainbow Playground Project
${html} `;
const blob = new Blob([fullCode], { type: 'text/html' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'rainbow-playground.html';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
showNotification('Project downloaded!');
});
// Share project
document.getElementById('share-btn').addEventListener('click', () => {
const project = {
html: document.getElementById('html-editor').value,
css: document.getElementById('css-editor').value,
js: document.getElementById('js-editor').value,
timestamp: new Date().getTime()
};
const encoded = btoa(JSON.stringify(project));
const shareUrl = `${window.location.origin}${window.location.pathname}?project=${encoded}`;
document.getElementById('share-url').value = shareUrl;
document.getElementById('share-modal').style.display = 'flex';
});
document.getElementById('close-share').addEventListener('click', () => {
document.getElementById('share-modal').style.display = 'none';
});
document.getElementById('copy-share-btn').addEventListener('click', () => {
const shareUrl = document.getElementById('share-url');
shareUrl.select();
document.execCommand('copy');
showNotification('Share link copied!');
});
// Tab switching
document.querySelectorAll('.tab').forEach(tab => {
tab.addEventListener('click', () => {
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
tab.classList.add('active');
document.getElementById(`${tab.getAttribute('data-tab')}-content`).classList.add('active');
});
});
// Initialize
window.addEventListener('DOMContentLoaded', () => {
setupLineNumbers('html-editor', 'html-line-numbers');
setupLineNumbers('css-editor', 'css-line-numbers');
setupLineNumbers('js-editor', 'js-line-numbers');
document.getElementById('run-btn').addEventListener('click', runCode);
runCode();
// Close modal when clicking outside
document.addEventListener('click', (e) => {
if (e.target === document.getElementById('share-modal')) {
document.getElementById('share-modal').style.display = 'none';
}
});
// Load shared project if URL has parameter
const urlParams = new URLSearchParams(window.location.search);
const projectParam = urlParams.get('project');
if (projectParam) {
try {
const project = JSON.parse(atob(projectParam));
document.getElementById('html-editor').value = project.html;
document.getElementById('css-editor').value = project.css;
document.getElementById('js-editor').value = project.js;
runCode();
} catch (e) {
console.error('Error loading shared project:', e);
}
}
});
