QuickHost

Ready
HTML Editor
Live Preview

Saved Projects

Saved successfully!
`); newWindow.document.close(); } function closeBanner() { document.getElementById('publishedBanner').classList.add('hidden'); } function showToast(message, icon = 'check-circle') { const toast = document.getElementById('toast'); const toastMessage = document.getElementById('toastMessage'); const toastIcon = document.getElementById('toastIcon'); toastMessage.textContent = message; toastIcon.className = `fas fa-${icon} text-green-500`; toast.classList.remove('opacity-0'); toast.classList.add('opacity-100'); setTimeout(() => { toast.classList.remove('opacity-100'); toast.classList.add('opacity-0'); }, 3000); } function toggleSidebar() { const sidebar = document.getElementById('projectsSidebar'); sidebar.classList.toggle('translate-x-full'); sidebar.classList.toggle('translate-x-0'); } function loadProjects() { const projects = JSON.parse(localStorage.getItem('projects') || '{}'); const list = document.getElementById('projectsList'); if (Object.keys(projects).length === 0) { list.innerHTML = `

No saved projects yet

Publish your first site!

`; return; } list.innerHTML = Object.entries(projects).map(([slug, project]) => `

${project.name}

Live

quickhost.app/${slug}

`).join(''); } function loadProject(slug) { const projects = JSON.parse(localStorage.getItem('projects') || '{}'); if (projects[slug]) { editor.value = projects[slug].code; updatePreview(); toggleSidebar(); showToast('Project loaded!', 'folder-open'); } } function viewProject(slug) { const projects = JSON.parse(localStorage.getItem('projects') || '{}'); if (projects[slug]) { const newWindow = window.open('', '_blank'); newWindow.document.write(projects[slug].code); newWindow.document.close(); } } function deleteProject(slug) { if (confirm('Are you sure you want to delete this project?')) { const projects = JSON.parse(localStorage.getItem('projects') || '{}'); delete projects[slug]; localStorage.setItem('projects', JSON.stringify(projects)); loadProjects(); showToast('Project deleted', 'trash'); } } function clearEditor() { if (confirm('Clear the editor? This cannot be undone.')) { editor.value = ''; updatePreview(); } } function openFullscreen() { const code = editor.value; const newWindow = window.open('', '_blank'); newWindow.document.write(code); newWindow.document.close(); } function formatCode() { // Simple HTML formatting let code = editor.value; code = code.replace(/>\n<'); editor.value = code; showToast('Code formatted!', 'align-left'); } // Handle tab key in editor editor.addEventListener('keydown', (e) => { if (e.key === 'Tab') { e.preventDefault(); const start = editor.selectionStart; const end = editor.selectionEnd; editor.value = editor.value.substring(0, start) + ' ' + editor.value.substring(end); editor.selectionStart = editor.selectionEnd = start + 2; } }); // Close modal on escape document.addEventListener('keydown', (e) => { if (e.key === 'Escape') { closeModal(); } }); // Close modal on backdrop click document.getElementById('publishModal').addEventListener('click', (e) => { if (e.target === document.getElementById('publishModal')) { closeModal(); } });