generated from coulomb/repo-seed
tegwick
66cbd5c3d8
Added complete documentation for all TestDrive-JSUI controls and features, plus flexible HTML generation system supporting standalone and external modes. Documentation (8 files, 3,533 lines): - docs/features/README.md: Central hub with overview, config, examples - docs/features/section-editing.md: Section editing guide - docs/features/edit-control.md: Document actions and editing tools - docs/features/status-control.md: Real-time statistics and tracking - docs/features/contents-control.md: Table of contents navigation - docs/features/debug-control.md: Development and debugging tools - docs/features/keyboard-shortcuts.md: Complete shortcuts reference - docs/features/themes.md: Visual theming and customization HTML Generation System (3 files, 1,104 lines): - js/utils/html-generator.js: Dual-mode HTML generator class * Standalone mode: All CSS/JS embedded inline * External mode: References _jsui/ directory * Configurable options for title, content, controls, theme * Download and save functionality - _jsui/ directory: External resources structure * README.md: Comprehensive usage guide * css/: Symlinked CSS files (base, editor, controls, themes) * js/: Symlinked JavaScript files (core, components, controls) * Enables smaller HTML files with browser caching - examples/html-generator-demo.html: Interactive demo * Web-based configuration form * Side-by-side mode comparison * Live generation and preview * Download and copy functionality Key Features: - 4,637 total lines of documentation and code - All controls documented with examples and troubleshooting - Flexible deployment options (standalone vs external) - Developer-friendly structure with clear guides - Production-ready system 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
435 lines
13 KiB
HTML
435 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>HTML Generator Demo - TestDrive-JSUI</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
|
|
line-height: 1.6;
|
|
color: #24292e;
|
|
background: #f6f8fa;
|
|
padding: 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.header {
|
|
background: white;
|
|
padding: 30px;
|
|
margin-bottom: 30px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.header h1 {
|
|
color: #0366d6;
|
|
margin-bottom: 15px;
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.header p {
|
|
color: #586069;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.section {
|
|
background: white;
|
|
padding: 25px;
|
|
margin-bottom: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.section h2 {
|
|
color: #24292e;
|
|
margin-bottom: 15px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 2px solid #e1e4e8;
|
|
}
|
|
|
|
.section p {
|
|
margin-bottom: 15px;
|
|
color: #586069;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
font-weight: 600;
|
|
margin-bottom: 5px;
|
|
color: #24292e;
|
|
}
|
|
|
|
input[type="text"],
|
|
textarea,
|
|
select {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: 1px solid #d1d5da;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
font-family: inherit;
|
|
}
|
|
|
|
textarea {
|
|
min-height: 150px;
|
|
font-family: 'Monaco', 'Menlo', monospace;
|
|
resize: vertical;
|
|
}
|
|
|
|
.checkbox-group {
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.checkbox-group label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font-weight: normal;
|
|
margin-right: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.checkbox-group input[type="checkbox"] {
|
|
margin-right: 8px;
|
|
width: auto;
|
|
}
|
|
|
|
button {
|
|
background: #0366d6;
|
|
color: white;
|
|
border: none;
|
|
padding: 12px 24px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
transition: background 0.2s;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
button:hover {
|
|
background: #0256c7;
|
|
}
|
|
|
|
button.secondary {
|
|
background: #6a737d;
|
|
}
|
|
|
|
button.secondary:hover {
|
|
background: #586069;
|
|
}
|
|
|
|
.output {
|
|
background: #f6f8fa;
|
|
border: 1px solid #d1d5da;
|
|
border-radius: 6px;
|
|
padding: 20px;
|
|
margin-top: 20px;
|
|
font-family: 'Monaco', 'Menlo', monospace;
|
|
font-size: 12px;
|
|
max-height: 400px;
|
|
overflow: auto;
|
|
}
|
|
|
|
.info-box {
|
|
background: #e8f5e9;
|
|
border: 1px solid #a5d6a7;
|
|
border-radius: 6px;
|
|
padding: 15px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.info-box strong {
|
|
color: #2e7d32;
|
|
}
|
|
|
|
.comparison {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.comparison-card {
|
|
background: #f6f8fa;
|
|
border: 2px solid #d1d5da;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
}
|
|
|
|
.comparison-card h3 {
|
|
margin-bottom: 15px;
|
|
color: #0366d6;
|
|
}
|
|
|
|
.comparison-card ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.comparison-card li {
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #e1e4e8;
|
|
}
|
|
|
|
.comparison-card li:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.comparison-card li::before {
|
|
content: "✓ ";
|
|
color: #28a745;
|
|
font-weight: bold;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.highlight {
|
|
background: #fff3cd;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
font-weight: 600;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>🎨 HTML Generator Demo</h1>
|
|
<p>Generate TestDrive-JSUI HTML in standalone or external resources mode</p>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>⚙️ Configuration</h2>
|
|
|
|
<div class="form-group">
|
|
<label for="title">Document Title:</label>
|
|
<input type="text" id="title" value="My Test Document" placeholder="Enter title...">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="description">Description:</label>
|
|
<input type="text" id="description" value="Interactive markdown editor demo" placeholder="Enter description...">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="markdown">Markdown Content:</label>
|
|
<textarea id="markdown" placeholder="Enter markdown content..."># Welcome to TestDrive-JSUI
|
|
|
|
This is a **demo document** showing the HTML generator.
|
|
|
|
## Features
|
|
|
|
- Section editing
|
|
- Control panels
|
|
- Keyboard shortcuts
|
|
- Theming support
|
|
|
|
## Getting Started
|
|
|
|
Click any section to edit it. Try the controls on the sides!</textarea>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Mode:</label>
|
|
<div class="checkbox-group">
|
|
<label>
|
|
<input type="radio" name="mode" value="edit" checked> Edit Mode
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="mode" value="view"> View Mode
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Control Panels:</label>
|
|
<div class="checkbox-group">
|
|
<label>
|
|
<input type="checkbox" id="editControl" checked> Edit Control
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="statusControl" checked> Status Control
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="contentsControl" checked> Contents Control
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="debugControl"> Debug Control
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Options:</label>
|
|
<div class="checkbox-group">
|
|
<label>
|
|
<input type="checkbox" id="shortcuts" checked> Keyboard Shortcuts
|
|
</label>
|
|
<label>
|
|
<input type="checkbox" id="autosave"> Autosave
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>📦 Generation Mode</h2>
|
|
|
|
<div class="comparison">
|
|
<div class="comparison-card">
|
|
<h3>Standalone Mode</h3>
|
|
<ul>
|
|
<li>All CSS/JS embedded inline</li>
|
|
<li>Single file portability</li>
|
|
<li>No external dependencies</li>
|
|
<li>Larger file size (~100+ KB)</li>
|
|
<li>Works via file://</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="comparison-card">
|
|
<h3>External Resources Mode</h3>
|
|
<ul>
|
|
<li>References _jsui/ directory</li>
|
|
<li>Smaller HTML files</li>
|
|
<li>Browser caching</li>
|
|
<li>Easier to debug</li>
|
|
<li>Requires web server</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top: 20px; text-align: center;">
|
|
<button onclick="generateStandalone()">📄 Generate Standalone HTML</button>
|
|
<button onclick="generateExternal()" class="secondary">🔗 Generate External HTML</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>📋 Generated HTML</h2>
|
|
<div class="info-box">
|
|
<strong>Note:</strong> Click one of the buttons above to generate HTML.
|
|
The output will appear below and can be downloaded.
|
|
</div>
|
|
<div id="output" class="output">
|
|
<!-- Generated HTML will appear here -->
|
|
<em>No HTML generated yet. Click a button above to generate.</em>
|
|
</div>
|
|
<div style="margin-top: 15px;">
|
|
<button onclick="downloadHTML()" id="downloadBtn" style="display: none;">💾 Download HTML</button>
|
|
<button onclick="copyHTML()" id="copyBtn" style="display: none;" class="secondary">📋 Copy to Clipboard</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="../js/utils/html-generator.js"></script>
|
|
<script>
|
|
let generatedHTML = '';
|
|
|
|
function getConfig() {
|
|
return {
|
|
title: document.getElementById('title').value,
|
|
description: document.getElementById('description').value,
|
|
markdown: document.getElementById('markdown').value,
|
|
mode: document.querySelector('input[name="mode"]:checked').value,
|
|
theme: 'github',
|
|
controls: {
|
|
editControl: document.getElementById('editControl').checked,
|
|
statusControl: document.getElementById('statusControl').checked,
|
|
contentsControl: document.getElementById('contentsControl').checked,
|
|
debugControl: document.getElementById('debugControl').checked
|
|
},
|
|
shortcuts: document.getElementById('shortcuts').checked,
|
|
autosave: document.getElementById('autosave').checked
|
|
};
|
|
}
|
|
|
|
function generateStandalone() {
|
|
const config = getConfig();
|
|
config.standalone = true;
|
|
|
|
const generator = new HTMLGenerator(config);
|
|
generatedHTML = generator.generate();
|
|
|
|
displayHTML(generatedHTML);
|
|
console.log('✓ Standalone HTML generated');
|
|
}
|
|
|
|
function generateExternal() {
|
|
const config = getConfig();
|
|
config.standalone = false;
|
|
config.baseUrl = '_jsui';
|
|
|
|
const generator = new HTMLGenerator(config);
|
|
generatedHTML = generator.generate();
|
|
|
|
displayHTML(generatedHTML);
|
|
console.log('✓ External HTML generated');
|
|
}
|
|
|
|
function displayHTML(html) {
|
|
const output = document.getElementById('output');
|
|
output.textContent = html;
|
|
|
|
// Show action buttons
|
|
document.getElementById('downloadBtn').style.display = 'inline-block';
|
|
document.getElementById('copyBtn').style.display = 'inline-block';
|
|
}
|
|
|
|
function downloadHTML() {
|
|
if (!generatedHTML) {
|
|
alert('No HTML generated yet!');
|
|
return;
|
|
}
|
|
|
|
const blob = new Blob([generatedHTML], { type: 'text/html' });
|
|
const url = URL.createObjectURL(blob);
|
|
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
link.download = 'testdrive-jsui-editor.html';
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
|
|
URL.revokeObjectURL(url);
|
|
|
|
console.log('✓ HTML downloaded');
|
|
}
|
|
|
|
function copyHTML() {
|
|
if (!generatedHTML) {
|
|
alert('No HTML generated yet!');
|
|
return;
|
|
}
|
|
|
|
navigator.clipboard.writeText(generatedHTML).then(() => {
|
|
alert('HTML copied to clipboard!');
|
|
console.log('✓ HTML copied to clipboard');
|
|
}).catch(err => {
|
|
console.error('Failed to copy:', err);
|
|
alert('Failed to copy HTML. Check browser permissions.');
|
|
});
|
|
}
|
|
|
|
// Log successful load
|
|
console.log('✓ HTML Generator Demo loaded');
|
|
console.log('HTMLGenerator available:', typeof HTMLGenerator !== 'undefined');
|
|
</script>
|
|
</body>
|
|
</html>
|