src/fragments/terminal.html

<div style="background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; padding: 1rem; margin: 1.5rem 0;">
    <h4 style="margin-top: 0; color: #495057;">Interactive Terminal</h4>
    <div style="background: #2d3748; color: #e2e8f0; padding: 1rem; border-radius: 6px; font-family: 'Consolas', 'Monaco', monospace;">
        <div style="margin-bottom: 1rem;">
            <input type="text" 
                   id="terminal-input" 
                   placeholder="python -c 'import torch; print(torch.__version__)'" 
                   style="width: calc(100% - 80px); padding: 0.5rem; background: #1a202c; border: 1px solid #4a5568; color: #e2e8f0; border-radius: 4px;">
            <button id="terminal-run" 
                    style="width: 70px; padding: 0.5rem; margin-left: 8px; background: #3182ce; color: white; border: none; border-radius: 4px; cursor: pointer;">Run</button>
        </div>
        <pre id="terminal-output" style="background: #1a202c; padding: 1rem; border-radius: 4px; min-height: 100px; margin: 0; overflow-x: auto;">$ Ready to run commands...</pre>
    </div>
    <p style="font-size: 0.9em; color: #6c757d; margin-top: 0.5rem;">
        <em>Note: This is a simulated terminal. In the original Gradio app, this would execute real Python commands with proper security restrictions.</em>
    </p>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const input = document.getElementById('terminal-input');
    const button = document.getElementById('terminal-run');
    const output = document.getElementById('terminal-output');
    
    function runCommand() {
        const command = input.value.trim();
        if (!command) return;
        
        // Simulate command execution
        output.textContent = `$ ${command}\nSimulated output for: ${command}\n\n` + 
                           `This would execute the command in the original app.\n` +
                           `Example outputs:\n` +
                           `- torch version: 2.0.1+cu117\n` +
                           `- import checks: Success\n` +
                           `- memory info: Available`;
    }
    
    button.addEventListener('click', runCommand);
    input.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') runCommand();
    });
});
</script>