mirror of
https://github.com/samsonjs/vibetunnel.git
synced 2026-04-27 15:17:38 +00:00
197 lines
No EOL
6.4 KiB
HTML
197 lines
No EOL
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
|
|
<title>DOM Terminal Test</title>
|
|
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<style>
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
height: 100dvh; /* Use dynamic viewport height for mobile */
|
|
margin: 0;
|
|
overflow: hidden;
|
|
font-family: monospace;
|
|
background: #1e1e1e;
|
|
}
|
|
|
|
header {
|
|
padding: 10px;
|
|
background: #333;
|
|
border-bottom: 1px solid #555;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
justify-content: center;
|
|
}
|
|
|
|
button {
|
|
padding: 8px 12px;
|
|
background: #555;
|
|
color: white;
|
|
border: 1px solid #777;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
button:hover {
|
|
background: #666;
|
|
}
|
|
|
|
button.active {
|
|
background: #007acc;
|
|
border-color: #007acc;
|
|
}
|
|
|
|
.size-btn {
|
|
background: #555;
|
|
color: white;
|
|
border: 1px solid #777;
|
|
padding: 8px 12px;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
font-family: monospace;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.size-btn:hover {
|
|
background: #666;
|
|
}
|
|
|
|
.size-btn.active {
|
|
background: rgba(0, 100, 200, 0.8);
|
|
border-color: #0066cc;
|
|
}
|
|
|
|
main {
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Ensure the dom-terminal element takes full height of its container */
|
|
dom-terminal {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div style="padding: 4px; text-align: center; color: white; font-size: 12px;">
|
|
DOM Terminal Test - Native Browser Selection & Scrolling
|
|
</div>
|
|
<div style="padding: 8px; display: flex; gap: 8px; justify-content: center;">
|
|
<button class="size-btn" data-cols="60" data-rows="15">60x15</button>
|
|
<button class="size-btn" data-cols="80" data-rows="20">80x20</button>
|
|
<button class="size-btn active" data-cols="120" data-rows="40">120x40</button>
|
|
<button class="size-btn" data-cols="160" data-rows="50">160x50</button>
|
|
</div>
|
|
<div style="padding: 4px; text-align: center; color: #ccc; font-size: 10px;">
|
|
Try text selection, scrolling (wheel/touch), and different viewport sizes
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<dom-terminal
|
|
id="main-terminal"
|
|
cols="120"
|
|
rows="40"
|
|
show-controls="false">
|
|
</dom-terminal>
|
|
</main>
|
|
|
|
<!-- Load XTerm.js -->
|
|
<script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.js"></script>
|
|
|
|
<!-- Load the component bundle -->
|
|
<script type="module" src="../bundle/terminal.js"></script>
|
|
|
|
<script type="module">
|
|
console.log('DOM Terminal Test Page Loaded');
|
|
console.log('XTerm available:', typeof Terminal !== 'undefined');
|
|
|
|
// WebSocket hot reload for development
|
|
const ws = new WebSocket('ws://localhost:3000?hotReload=true');
|
|
ws.onmessage = () => {
|
|
console.log('Hot reload triggered');
|
|
location.reload();
|
|
};
|
|
ws.onerror = () => console.log('WebSocket connection failed (normal if not running dev server)');
|
|
|
|
let terminal = document.getElementById('main-terminal');
|
|
setupSizeControls();
|
|
generateMockData();
|
|
|
|
function generateMockData() {
|
|
if (!terminal) return;
|
|
|
|
console.log('Generating mock data from HTML...');
|
|
|
|
const contentCols = 120;
|
|
const contentRows = 40;
|
|
const numPages = 10;
|
|
|
|
let lineNumber = 1;
|
|
let content = "";
|
|
|
|
for (let page = 1; page <= numPages; page++) {
|
|
// Page header
|
|
const headerLine = '◄' + '='.repeat(contentCols - 2) + '►';
|
|
content += (`\x1b[43m${headerLine}\x1b[0m\n`);
|
|
lineNumber++;
|
|
|
|
// Fill the page with numbered lines
|
|
const contentLines = contentRows - 2;
|
|
for (let line = 1; line <= contentLines; line++) {
|
|
content += (`Line ${lineNumber.toString().padStart(4, '0')}: Content originally sized for ${contentCols}x${contentRows} terminal - watch it reflow!\n`);
|
|
lineNumber++;
|
|
}
|
|
|
|
// Page footer
|
|
const footerLine = '◄' + '='.repeat(contentCols - 2) + '►';
|
|
content += (`\x1b[43m${footerLine}\x1b[0m\n`);
|
|
lineNumber++;
|
|
}
|
|
|
|
content += ('\x1b[1;31m>>> END OF ALL CONTENT - THIS IS THE BOTTOM <<<\x1b[0m\n');
|
|
content += ('\x1b[1;33mIf you can see this, you reached the end. Scroll up to see all pages.\x1b[0m\n');
|
|
terminal.write(content);
|
|
console.log('Mock data generation completed from HTML');
|
|
}
|
|
|
|
function setupSizeControls() {
|
|
// Add click handlers for terminal size buttons
|
|
const buttons = document.querySelectorAll('.size-btn');
|
|
buttons.forEach(button => {
|
|
button.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
const cols = parseInt(button.dataset.cols);
|
|
const rows = parseInt(button.dataset.rows);
|
|
|
|
if (cols && rows && terminal) {
|
|
// Update active button
|
|
buttons.forEach(b => b.classList.remove('active'));
|
|
button.classList.add('active');
|
|
|
|
// Change viewport size
|
|
terminal.setViewportSize(cols, rows);
|
|
|
|
console.log(`Terminal viewport changed to ${cols}x${rows} - watch the content reflow!`);
|
|
}
|
|
});
|
|
});
|
|
|
|
console.log('Size controls setup complete - buttons will change viewport size and reflow existing content');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |