export const devUIHtml = `
Theme Development
`;
export const devUIStyles = `
#dev-ui {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fff;
border-top: 1px solid #ddd;
padding: 1rem;
z-index: 9999;
}
.dev-ui-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.dev-ui-controls {
display: flex;
gap: 0.5rem;
}
button {
padding: 0.5rem 1rem;
background: #008060;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background: #006048;
}
#theme-check-results {
max-height: 200px;
overflow-y: auto;
padding: 1rem;
background: #f5f5f5;
border-radius: 4px;
}
`;
export const errorPageTemplate = `
Error
Error
{{message}}
{{#if stack}}
Stack Trace
{{stack}}
{{/if}}
`;
export const devUIScript = `
document.addEventListener('DOMContentLoaded', () => {
const checkThemeButton = document.getElementById('check-theme');
const reloadButton = document.getElementById('reload-page');
const resultsContainer = document.getElementById('theme-check-results');
checkThemeButton?.addEventListener('click', async () => {
try {
const response = await fetch('/api/theme/check');
const results = await response.json();
resultsContainer.innerHTML = '' + JSON.stringify(results, null, 2) + '
';
} catch (error) {
console.error('Error checking theme:', error);
resultsContainer.innerHTML = 'Error checking theme
';
}
});
reloadButton?.addEventListener('click', () => {
window.location.reload();
});
});
`;