Nozomi Tojo Terminal (Unix/Linux css+js)

HTML
<div class="cli"> <div class="cli-header"> <a class="dot" href="#"></a> <a class="dot" href="#"></a> <a class="dot" href="#"></a> <a class="b"><b>root@omsena</b></a> </div> <div class="cli-body" ng-click="focusTextarea()"> <div class="cli-control"> <span class="dollar left">$_</span> <input type="text" class="cli-input right" name="cli-input" autofocus> </div> </div> </div>
CSS
html, body { background: #262626; background-image: url(http://img07.deviantart.net/c033/i/2016/015/e/8/nozomi_toujou_minimalism_by_killernet16-d9nzzi6.png); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; width: 100%; height: 100%; font-family: 'Raleway', sans-serif; padding: 2.5%; overflow: hidden; display: flex; justify-content: center; align-items: center; } .hidden { display: none !important; } .visible { display: inherit !important; } .cli-input, .cli-input:focus { width: 94.9%; background: none; border: none; outline: none; color: #DADFE5; } .dollar { margin-right: 1%; } .cli { width: 800px; } .cli .cli-header { background: #EEF1F5; height: 25px; border-top-left-radius: 4px; border-top-right-radius: 4px; padding: 6px 15px 0 15px; font-size: .75em; color: #9b9fa5; } .cli .cli-header span { display: inline-block; text-align: center; position: relative; top: -1px; margin-left: 15px; } .cli .cli-header span:hover { cursor: default; } .cli .cli-header .dot { background: #D8DCE2; height: 15px; width: 15px; border-radius: 50%; display: inline-block; position: relative; top: 2px; transition: all .25s ease-in-out; } .cli .cli-header .dot:not(:nth-child(1)) { margin-left: 4px; } /* Colors for dots */ .cli .cli-header .dot:nth-child(1) { background: #DD333F; } .cli .cli-header .dot:nth-child(2) { background: #F5D76E; } .cli .cli-header .dot:nth-child(3) { background: #5FDD68; } .cli .cli-header .b:nth-child(4) { color: #000; font-size: 15px; } .cli .cli-body { background: #000; opacity: 0.60; padding: 30px; min-height: 50%; min-height: 50vh; max-height: 50%; max-height: 50vh; color: #DADFE5; font-size: .75em; font-weight: 500; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; overflow: auto; overflow-y: scroll; } .cli .cli-body:hover { cursor: text; } .cli .cli-body p { margin-top: 0; margin-bottom: 5px; } .cli .cli-body p.success { color: #5FDD68; } .cli .cli-body p.error { color: #DD333F; } .cli .cli-body p.small { font-size: .7em; } .cli .cli-body p a, .cli .cli-body p a:visited { color: #dadfe5; } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-button { width: 8px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; border-radius: 4px; } ::-webkit-scrollbar-thumb { background: #D8DCE2; border: thin solid #D8DCE2; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #7d7d7d; }
JAVASCRIPT
$(document).ready(function() { $('.cli-input').on('change', function() { $('.cli-control').before('<p class="success"><span class="dollar">$_root@omsena:~#</span> ' + $(this).val() + '</p>'); $(this).val(''); }); });
Expand for more options Login