<!DOCTYPE html>
<html>
<head>
<title>Terminal macOS</title>
<style>
/* Estilo do terminal */
body {
margin: 0;
padding: 0;
background-color: #F5F5F5;
}
.terminal-window {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
resize: both;
overflow: auto;
width: 600px;
height: 400px;
background-color: #3d3d3b;
border: 1px solid #E8D7C1;
border-radius: 10px;
overflow: hidden;
font-family: monospace;
font-size: 14px;
color: #05fd3f;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
}
.terminal-window .title-bar {
height: 20px;
background-color: #f4f1ed;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
cursor: default;
}
.terminal-window .title-bar .title {
color: #000;
font-weight: bold;
}
.terminal-window .title-bar .close-button {
color: #FF0000;
cursor: pointer;
}
.terminal-window .status-bar {
height: 20px;
background-color: #F8F8F8;
border-top: 1px solid #E8D7C1;
padding: 0 10px;
font-size: 12px;
color: #333333;
line-height: 20px;
}
.terminal-window .status-bar .close-button {
float: right;
color: #FF0000;
cursor: pointer;
}
.terminal-window.size-auto .status-bar {
display: block;
}
.terminal-window .content {
padding: 0;
height: calc(100% - 50px);
overflow: auto;
}
.terminal-window .content pre {
margin: 0;
white-space: pre-wrap;
}
.terminal-window .input-row {
display: flex;
align-items: center;
justify-content: center;
margin-top: 1px;
padding: 0 10px;
background-color: #3d3d3b;
}
.terminal-window .input-row span {
color: #00ff66;
margin-right: 5px;
min-width: 140px;
}
.terminal-window .input-row input {
background-color: transparent;
color: #ffe204;
border: none;
outline: none;
width: 100%;
font-family: monospace;
font-size: 14px;
}
.terminal-window .spinner {
color: #ffe712;
display: none;
margin-left: 5px;
}
.terminal-window.processing .spinner {
display: inline-block;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<script src="//code.jquery.com/jquery-1.11.1.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/4.2.0/socket.io.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var socket = io.connect('http://' + document.domain + ':' + location.port);
socket.on('connect', function() {
console.log('Conectado ao servidor');
});
socket.on('output', function(data) {
$('#terminal-output').append('<pre>' + data + '</pre>');
$('#terminal-output').scrollTop($('#terminal-output')[0].scrollHeight);
$('.terminal-window').removeClass('processing');
});
$('form').submit(function(event) {
event.preventDefault();
var command = $('#command').val();
socket.emit('command', command);
$('#terminal-output').append('<pre>terminal:~$ ' + command + '</pre>');
$('#command').val('');
$('.terminal-window').addClass('processing');
return false;
});
$('.close-button').click(function() {
$('.terminal-window').hide();
});
});
</script>
</head>
<body>
<div class="terminal-window">
<div class="title-bar">
<div class="title">Terminal</div>
<div class="close-button">✕</div>
</div>
<div class="content" id="terminal-output"></div>
<form>
<div class="input-row">
<span>terminal:~$</span>
<input type="text" id="command" autofocus autocomplete="off"/>
<div class="spinner"> / </div>
</div>
</form>
</div>
</body>
</html>