|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Interactive Terminal and Chat Bot</title> |
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery.terminal/css/jquery.terminal.min.css"> |
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
|
|
<script src="https://cdn.jsdelivr.net/npm/jquery"></script> |
|
|
|
<script src="https://cdn.jsdelivr.net/npm/jquery.terminal/js/jquery.terminal.min.js"></script> |
|
<style> |
|
body { |
|
margin: 0; |
|
background-color: #000; |
|
color: #0f0; |
|
font-family: monospace; |
|
} |
|
.container { |
|
display: flex; |
|
height: 100vh; |
|
} |
|
#terminal { |
|
flex: 1; |
|
border-right: 2px solid #0f0; |
|
padding: 10px; |
|
} |
|
#chat { |
|
flex: 1; |
|
display: flex; |
|
flex-direction: column; |
|
padding: 10px; |
|
color: #0f0; |
|
} |
|
#chat-messages { |
|
flex: 1; |
|
overflow-y: auto; |
|
margin-bottom: 10px; |
|
padding: 10px; |
|
border: 1px solid #0f0; |
|
background: #111; |
|
} |
|
#chat-input { |
|
display: flex; |
|
} |
|
#chat-input input { |
|
flex: 1; |
|
padding: 5px; |
|
background: #111; |
|
color: #0f0; |
|
border: 1px solid #0f0; |
|
outline: none; |
|
} |
|
#chat-input button { |
|
padding: 5px 10px; |
|
background: #0f0; |
|
color: #000; |
|
border: none; |
|
cursor: pointer; |
|
} |
|
canvas { |
|
display: block; |
|
margin: 10px auto; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="container"> |
|
|
|
<div id="terminal"></div> |
|
|
|
|
|
<div id="chat"> |
|
<div id="chat-messages"></div> |
|
<div id="chat-input"> |
|
<input type="text" id="chat-text" placeholder="Type your message here..."> |
|
<button id="send-chat">Send</button> |
|
</div> |
|
</div> |
|
</div> |
|
<canvas id="chart" width="400" height="200"></canvas> |
|
|
|
<script> |
|
$(function () { |
|
|
|
const terminal = $('#terminal').terminal({ |
|
echo: function (...args) { |
|
this.echo(args.join(' ')); |
|
}, |
|
optimize: function (type = 'matrix') { |
|
if (type === 'matrix') { |
|
this.echo('[[;cyan;]Performing Matrix Optimization...\\n]'); |
|
this.pause(); |
|
setTimeout(() => { |
|
this.echo('Optimization complete: [[;yellow;]98% efficiency achieved]'); |
|
drawChart(); |
|
this.resume(); |
|
}, 2000); |
|
} else { |
|
this.error('Unsupported optimization type'); |
|
} |
|
}, |
|
status: function () { |
|
this.echo('[[;green;]Fetching statuses...\\n]'); |
|
this.echo('BrowserStack: [[;yellow;]Live - 100% uptime]'); |
|
this.echo('Coveralls: [[;yellow;]Coverage: 95%]'); |
|
}, |
|
js: function (code) { |
|
try { |
|
const result = eval(code); |
|
this.echo('Result: ' + result); |
|
} catch (e) { |
|
this.error('Error: ' + e.message); |
|
} |
|
}, |
|
help: function () { |
|
this.echo(` |
|
Available commands: |
|
- echo <text> : Echoes the input text |
|
- optimize <type> : Performs optimization (type: matrix) |
|
- status : Fetches statuses of services |
|
- js <code> : Executes JavaScript code |
|
- help : Shows this help message |
|
`); |
|
} |
|
}, { |
|
greetings: '[[;yellow;]Welcome to the Futuristic Interactive Terminal Bot!]', |
|
name: 'interactive_terminal', |
|
prompt: '>> ' |
|
}); |
|
|
|
|
|
function drawChart() { |
|
const ctx = document.getElementById('chart').getContext('2d'); |
|
new Chart(ctx, { |
|
type: 'line', |
|
data: { |
|
labels: ['Start', 'Step 1', 'Step 2', 'Step 3', 'Complete'], |
|
datasets: [{ |
|
label: 'Matrix Optimization Efficiency', |
|
data: [10, 40, 70, 85, 98], |
|
borderColor: 'cyan', |
|
borderWidth: 2, |
|
pointBackgroundColor: 'yellow', |
|
fill: false |
|
}] |
|
}, |
|
options: { |
|
scales: { |
|
y: { beginAtZero: true } |
|
} |
|
} |
|
}); |
|
} |
|
|
|
|
|
const chatMessages = $('#chat-messages'); |
|
const chatInput = $('#chat-text'); |
|
|
|
$('#send-chat').on('click', function () { |
|
const message = chatInput.val().trim(); |
|
if (message) { |
|
appendMessage('You', message); |
|
handleChatBotResponse(message); |
|
chatInput.val(''); |
|
} |
|
}); |
|
|
|
chatInput.on('keypress', function (e) { |
|
if (e.which === 13) { |
|
$('#send-chat').click(); |
|
} |
|
}); |
|
|
|
function appendMessage(sender, message) { |
|
chatMessages.append(`<div><strong>${sender}:</strong> ${message}</div>`); |
|
chatMessages.scrollTop(chatMessages[0].scrollHeight); |
|
} |
|
|
|
function handleChatBotResponse(message) { |
|
|
|
let response = "I'm not sure how to respond to that."; |
|
if (message.toLowerCase().includes('hello')) { |
|
response = "Hi there! How can I help you?"; |
|
} else if (message.toLowerCase().includes('status')) { |
|
response = "All systems operational!"; |
|
} else if (message.toLowerCase().includes('optimize')) { |
|
response = "Try running `optimize matrix` in the terminal for optimization!"; |
|
} |
|
appendMessage('Bot', response); |
|
} |
|
}); |
|
</script> |
|
</body> |
|
</html> |
