2025-11-14 06:49:41 +01:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > TestDrive JSUI - Standalone Test< / title >
< style >
body {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 2rem;
line-height: 1.6;
color: #333333;
background-color: #ffffff;
}
#markdown-content {
min-height: 200px;
}
h1, h2, h3, h4, h5, h6 {
color: #333333;
}
pre {
background-color: #f6f8fa;
color: #333333;
padding: 1rem;
border-radius: 6px;
overflow-x: auto;
border: 1px solid #d0d7de;
}
code {
background-color: #f6f8fa;
color: #333333;
padding: 0.2em 0.4em;
border-radius: 3px;
font-size: 0.9em;
}
pre code {
background: none;
padding: 0;
}
.test-banner {
background: #e3f2fd;
border: 1px solid #1976d2;
border-radius: 4px;
padding: 1rem;
margin-bottom: 2rem;
text-align: center;
}
< / style >
<!-- External dependencies -->
< script src = "https://cdn.jsdelivr.net/npm/marked/marked.min.js"
onload="window.markitectMarkedLoaded = true"
onerror="console.error('CDN library failed to load'); window.markitectMarkedError = true;">< / script >
< / head >
< body class = "markitect-edit-mode" >
< div class = "test-banner" >
< h2 > 🧪 TestDrive JSUI - Standalone Test Environment< / h2 >
< p > This is a standalone test page for developing JavaScript UI components.< / p >
< p > < strong > Development Mode:< / strong > Assets loaded directly from static/ directory< / p >
< / div >
<!-- Content container with test content -->
< div id = "markdown-content" >
< h1 > TestDrive JSUI Sample Document< / h1 >
< p > This is a sample markdown document for testing the TestDrive JavaScript UI plugin.< / p >
< h2 > Features to Test< / h2 >
< h3 > Basic Editing< / h3 >
< ul >
< li > Click any section to edit it< / li >
< li > Use the save button to download your changes< / li >
< li > Reset button restores original content< / li >
< / ul >
< h3 > Control Panels< / h3 >
< ul >
< li > < strong > Contents Control< / strong > (Northwest): Document outline and navigation< / li >
< li > < strong > Status Control< / strong > (East): Current document statistics< / li >
< li > < strong > Debug Control< / strong > (Southeast): Development information and logs< / li >
< li > < strong > Edit Control< / strong > (Northeast): Main editing actions< / li >
< / ul >
< / div >
<!-- Configuration for JavaScript -->
< script id = "markitect-config" type = "application/json" >
{
"pluginName": "testdrive-jsui",
"assetBaseUrl": ".",
"developmentMode": true,
"markdownContent": "# TestDrive JSUI Sample Document\n\nThis is a sample markdown document for testing the TestDrive JavaScript UI plugin.\n\n## Features to Test\n\n### Basic Editing\n- Click any section to edit it\n- Use the save button to download your changes\n- Reset button restores original content\n\n### Control Panels\n- **Contents Control** (Northwest): Document outline and navigation\n- **Status Control** (East): Current document statistics\n- **Debug Control** (Southeast): Development information and logs\n- **Edit Control** (Northeast): Main editing actions",
"markdownContentWithDogtag": "# TestDrive JSUI Sample Document\n\nThis is a sample markdown document for testing the TestDrive JavaScript UI plugin.\n\n## Features to Test\n\n### Basic Editing\n- Click any section to edit it\n- Use the save button to download your changes\n- Reset button restores original content\n\n### Control Panels\n- **Contents Control** (Northwest): Document outline and navigation\n- **Status Control** (East): Current document statistics\n- **Debug Control** (Southeast): Development information and logs\n- **Edit Control** (Northeast): Main editing actions\n\n---\n*TestDrive JSUI Standalone Test*",
"dogtagContent": "\n\n---\n*TestDrive JSUI Standalone Test*",
"mode": "edit",
"theme": "github",
"keyboardShortcuts": true,
"autosave": false,
"sections": true,
"originalFilename": "test-document",
"base64References": {},
"version": "TestDrive JSUI v1.0.0",
"repoName": "testdrive-jsui"
}
< / script >
<!-- JavaScript Assets - Development Mode (direct file references) -->
< script src = "static/js/core/debug-system.js" > < / script >
< script src = "static/js/core/section-manager.js" > < / script >
< script src = "static/js/components/debug-panel.js" > < / script >
< script src = "static/js/components/document-controls.js" > < / script >
< script src = "static/js/components/dom-renderer.js" > < / script >
2025-11-14 23:37:17 +01:00
< script src = "../capabilities/testdrive-jsui/js/controls/control-base.js" > < / script >
< script src = "../capabilities/testdrive-jsui/js/controls/contents-control.js" > < / script >
< script src = "../capabilities/testdrive-jsui/js/controls/status-control.js" > < / script >
< script src = "../capabilities/testdrive-jsui/js/controls/debug-control.js" > < / script >
< script src = "../capabilities/testdrive-jsui/js/controls/edit-control.js" > < / script >
2025-11-14 06:49:41 +01:00
< script src = "static/js/config-loader.js" > < / script >
< script src = "static/js/main-updated.js" > < / script >
<!-- Initialization -->
< script >
window.addEventListener('load', function() {
console.log('🧪 TestDrive JSUI standalone test loading...');
// Handle CDN loading errors
if (window.markitectMarkedError) {
console.error("CDN library failed to load");
}
// Initialize main application
try {
if (typeof MarkitectMain !== 'undefined') {
console.log('🚀 Starting MarkitectMain initialization...');
MarkitectMain.initialize();
} else {
console.warn('⚠️ MarkitectMain not available');
// Show helpful debug information
console.log('Available globals:', Object.keys(window).filter(k => k.includes('Markitect') || k.includes('Section') || k.includes('Control')));
}
} catch (error) {
console.error('❌ TestDrive JSUI initialization failed:', error);
console.log('📄 Content should still be visible in fallback mode');
}
});
< / script >
< / body >
< / html >
