Animated terminal session with scriptable output.
Created
January 8, 2016 21:19
-
-
Save CodeDotJS/ee5c7ee01d1f4659fbd5 to your computer and use it in GitHub Desktop.
Animated Terminal Session
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="terminal-window"> | |
<header> | |
<div class="button green"></div> | |
<div class="button yellow"></div> | |
<div class="button red"></div> | |
</header> | |
<section class="terminal"> | |
<div class="history"></div> | |
$ <span class="prompt"></span> | |
<span class="typed-cursor"></span> | |
</section> | |
</div> | |
<!-- data --> | |
<div class="terminal-data mimik-run-output"> | |
<br>Found 1 feature<br> | |
----------------------------------------------<br> | |
Feature: Bottles <span class="gray"># ./features/bottles.feature</span><br><br> | |
Scenario: A bottle falls from the wall<br> | |
<span class="green">✓</span> <span class="gray">Given 100 green bottles are standing</span><br> | |
<span class="green">✓</span> <span class="gray">when 1 green bottle accidentally falls</span><br> | |
<span class="green">✓</span> <span class="gray">then there are 99 green bottles standing</span><br> | |
<br> | |
<span class="gray"> ---------- ----------- ------- -------- --------</span><br> | |
Features Scenarios Steps Passed Failed<br> | |
<span class="gray"> ---------- ----------- ------- -------- --------</span><br> | |
1 1 4 <span class="green">✓ 4</span> 0 <br> | |
<br> | |
Completed 1 feature in 0.01s<br> | |
<br> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(function() { | |
var data = [ | |
{ | |
action: 'type', | |
strings: ["npm install -g mimik^400"], | |
output: '<span class="gray">+mimik@0.10.2 installed</span><br> ', | |
postDelay: 1000 | |
}, | |
{ | |
action: 'type', | |
strings: ["cd tests^400"], | |
output: ' ', | |
postDelay: 1000 | |
}, | |
{ | |
action: 'type', | |
//clear: true, | |
strings: ['mimik run^400'], | |
output: $('.mimik-run-output').html() | |
}, | |
{ | |
action: 'type', | |
strings: ["that was easy!", ''], | |
postDelay: 2000 | |
} | |
]; | |
runScripts(data, 0); | |
}); | |
function runScripts(data, pos) { | |
var prompt = $('.prompt'), | |
script = data[pos]; | |
if(script.clear === true) { | |
$('.history').html(''); | |
} | |
switch(script.action) { | |
case 'type': | |
// cleanup for next execution | |
prompt.removeData(); | |
$('.typed-cursor').text(''); | |
prompt.typed({ | |
strings: script.strings, | |
typeSpeed: 30, | |
callback: function() { | |
var history = $('.history').html(); | |
history = history ? [history] : []; | |
history.push('$ ' + prompt.text()); | |
if(script.output) { | |
history.push(script.output); | |
prompt.html(''); | |
$('.history').html(history.join('<br>')); | |
} | |
// scroll to bottom of screen | |
$('section.terminal').scrollTop($('section.terminal').height()); | |
// Run next script | |
pos++; | |
if(pos < data.length) { | |
setTimeout(function() { | |
runScripts(data, pos); | |
}, script.postDelay || 1000); | |
} | |
} | |
}); | |
break; | |
case 'view': | |
break; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="http://www.mattboldt.com/demos/typed-js/js/typed.custom.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
background: #6D7074; | |
} | |
.terminal-window { | |
text-align: left; | |
width: 600px; | |
height: 360px; | |
border-radius: 10px; | |
margin: auto; | |
position: relative; | |
} | |
.terminal-window header { | |
background: #E0E8F0; | |
height: 30px; | |
border-radius: 8px 8px 0 0; | |
padding-left: 10px; | |
} | |
.terminal-window header .button { | |
width: 12px; | |
height: 12px; | |
margin: 10px 4px 0 0; | |
display: inline-block; | |
border-radius: 8px; | |
} | |
.terminal-window header .button.green { | |
background: #3BB662; | |
} | |
.terminal-window header .button.yellow { | |
background: #E5C30F; | |
} | |
.terminal-window header .button.red { | |
background: #E75448; | |
} | |
.terminal-window section.terminal { | |
color: white; | |
font-family: Menlo, Monaco, "Consolas", "Courier New", "Courier"; | |
font-size: 11pt; | |
background: #30353A; | |
padding: 10px; | |
box-sizing: border-box; | |
position: absolute; | |
width: 100%; | |
top: 30px; | |
bottom: 0; | |
overflow: auto; | |
} | |
.terminal-window section.terminal .typed-cursor { | |
opacity: 1; | |
-webkit-animation: blink 0.7s infinite; | |
-moz-animation: blink 0.7s infinite; | |
animation: blink 0.7s infinite; | |
} | |
@keyframes blink{ | |
0% { opacity:1; } | |
50% { opacity:0; } | |
100% { opacity:1; } | |
} | |
@-webkit-keyframes blink{ | |
0% { opacity:1; } | |
50% { opacity:0; } | |
100% { opacity:1; } | |
} | |
@-moz-keyframes blink{ | |
0% { opacity:1; } | |
50% { opacity:0; } | |
100% { opacity:1; } | |
} | |
.terminal-data { display: none; } | |
.terminal-window .gray { color: gray; } | |
.terminal-window .green { color: green;} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment