mirror of
https://github.com/samsonjs/vibetunnel.git
synced 2026-04-27 15:17:38 +00:00
200 lines
No EOL
7.1 KiB
HTML
200 lines
No EOL
7.1 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>Responsive Terminal Component Test</title>
|
|
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<!-- XTerm CSS -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css" />
|
|
|
|
<style>
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh; /* This might be the issue! */
|
|
height: 100dvh; /* Use dynamic viewport height for mobile */
|
|
margin: 0;
|
|
overflow: hidden;
|
|
font-family: monospace;
|
|
}
|
|
|
|
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;
|
|
/* Let flexbox handle the height naturally - we'll read actual DOM dimensions */
|
|
}
|
|
|
|
/* Ensure the responsive-terminal element takes full height of its container */
|
|
responsive-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;">
|
|
Responsive Terminal Component Test - Simplified
|
|
</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>
|
|
</header>
|
|
|
|
<main>
|
|
<responsive-terminal
|
|
id="main-terminal"
|
|
cols="120"
|
|
rows="40"
|
|
show-controls="false">
|
|
</responsive-terminal>
|
|
</main>
|
|
|
|
<!-- Load XTerm.js -->
|
|
<script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@xterm/addon-web-links@0.11.0/lib/addon-web-links.js"></script>
|
|
|
|
<!-- Load the component bundle -->
|
|
<script type="module" src="../bundle/mobile-terminal.js"></script>
|
|
|
|
<script type="module">
|
|
console.log('Responsive Terminal Test Page Loaded');
|
|
console.log('XTerm available:', typeof Terminal !== 'undefined');
|
|
|
|
// WebSocket hot reload for development
|
|
const ws = new WebSocket('ws://localhost:3000');
|
|
ws.onmessage = (event) => {
|
|
if (event.data === 'reload') {
|
|
console.log('Hot reload triggered');
|
|
location.reload();
|
|
}
|
|
};
|
|
ws.onerror = () => console.log('WebSocket connection failed (normal if not running dev server)');
|
|
|
|
let terminal = null;
|
|
|
|
// Wait for components to be defined
|
|
customElements.whenDefined('responsive-terminal').then(() => {
|
|
console.log('responsive-terminal component is now defined');
|
|
|
|
terminal = document.getElementById('main-terminal');
|
|
setupSizeControls();
|
|
|
|
}).catch(error => {
|
|
console.error('Error loading responsive-terminal component:', error);
|
|
document.body.innerHTML = `
|
|
<div style="padding: 20px; color: #ff6b6b;">
|
|
<h2>Component Load Error</h2>
|
|
<p>Error loading responsive-terminal component: ${error.message}</p>
|
|
<p>Make sure to run: <code>npm run bundle:test</code> to build the component.</p>
|
|
<p>Then access this file via the development server (not file://).</p>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
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');
|
|
|
|
// Use the new setViewportSize method to change viewport without regenerating content
|
|
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');
|
|
}
|
|
|
|
// Add some debugging
|
|
setTimeout(() => {
|
|
const terminals = document.querySelectorAll('responsive-terminal');
|
|
console.log(`Found ${terminals.length} terminal elements`);
|
|
terminals.forEach((terminal, index) => {
|
|
console.log(`Terminal ${index}:`, terminal);
|
|
});
|
|
|
|
// Debug header and main dimensions
|
|
const header = document.querySelector('header');
|
|
const main = document.querySelector('main');
|
|
console.log('Layout debug:', {
|
|
windowHeight: window.innerHeight,
|
|
viewportHeight: window.visualViewport?.height || 'unknown',
|
|
headerHeight: header?.offsetHeight,
|
|
mainHeight: main?.offsetHeight,
|
|
mainComputedHeight: getComputedStyle(main).height
|
|
});
|
|
}, 1000);
|
|
</script>
|
|
</body>
|
|
</html> |