Select Text read_text.html

terminal_index.html

<!-- templates/editor1.html -->
{% extends 'base_.html' %}

{% block title %}Search Results - My Blog{% endblock %}

{% block content %}
    <title>Terminal Emulator</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='xterm/xterm.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/-flask.css') }}">
    <script src="{{ url_for('static', filename='xterm/xterm.js') }}"></script>
    <style>

        #terminal {
            font-family: monospace;
            font-size: 1em;
            height: 100vh;
            width: 100vw;
        }

        .xterm-dom-renderer-owner-1 .xterm-rows {
  color: #ffffff;
  font-family: courier-new, courier, monospace;
  font-size: 25px;}

        .xterm-rows {
            font-family: monospace;
            font-size: 1em;
        }

        .xterm-rows > div {
            line-height: 1.2em;
        }

    #terminal {
        color: #b70d0d;
        font-family: monospace;
        font-size: 1em;
        height: 100vh;
        width: 100vw;
    }

    </style>
</head>
<body>
    <div id="terminal"></div>
    <script>
        const term = new Terminal();
        term.open(document.getElementById('terminal'));
    
        let userInput = '';
    
        term.onKey(e => {
            const printable = !e.domEvent.altKey && !e.domEvent.ctrlKey && !e.domEvent.metaKey;
    
            if (e.domEvent.key === 'Enter') {
                const command = userInput;
                fetch('/execute_command', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: `command=${encodeURIComponent(command)}`,
                })
                .then(response => response.json())
                .then(data => {
                    // Clear the terminal and display the response output
                    term.clear();
                    console.log(data.output);

                    const formattedOutput = data.output.replace(/\n/g, '\r\n');
                    term.write(formattedOutput);
                    term.write('$ ');
                });
    
                userInput = '';
            } else if (printable) {
                term.write(e.key);
                userInput += e.key;
            }
        });
    
        term.writeln('$ ');
    
    </script>
    
    {% endblock %}    
</body>
</html>
Back to file list