<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>command line</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet prefetch' href='css/ymjkge.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<body>
<div class="container">
<div class="cmd">
<p class="first"><span>$Robot~ </span><span class="init"></span><span class="perc"></span><span class="cursor curact"></span></p>
<p class="second"><span class="load_cmpt"></span><span class="cursor"></span></p>
<p class="third"><span class="type_cmds"></span><span class="cursor"></span></p>
</div>
</div>
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/-dhaval-/command-line-yMJKgE */
body{
background-color:#ccc;
}
.container{
display:flex;
width:100%;
height:100vh;
justify-content:center;
align-items:center;
}
.cmd{
background-color:#111;
border-radius:5px;
padding:20px;
width:600px;
height:200px;
}
p{
letter-spacing:2px;
white-space: nowrap;
overflow: hidden;
font-family:courier;
color:lime;
}
::-moz-selection{
background:transparent;
}
::selection{
background:transparent;
}
.cursor {
height:15px;
width:10px;
margin-left:2px;
margin-bottom:-4px;
background-color:lime;
-webkit-animation: blink 1s infinite;
animation: blink 1s infinite;
display:none;
}
.curact{
display:inline-block;
}
@-webkit-keyframes blink {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes blink {
0% { opacity: 0; }
100% { opacity: 1; }
}
/*Downloaded from https://www.codeseek.co/-dhaval-/command-line-yMJKgE */
//variables declarations
var time=0;//time as program goes
var n = 0;//for initializings
var pFirst = $('.first .cursor');//first para
var pSecond = $('.second .cursor');//second para
var pThird = $('.third .cursor');//third para
//function for typing effect
function type(target, toType, stepTime){
var chars = Array.from(toType);
setInterval(function(){
$(target).append(chars[n]);
n++;
},stepTime);
//time setting
time = time + (toType.length * stepTime);
};
//typing time setting
function timeout(typeFunc){
setTimeout(typeFunc,time);
};
//function of replacing cursors
function repCuract(source,dest){
$(source).remClass('curact');
if(typeof dest != 'undefined'){
$(dest).addClass('curact');
}
};
//initialization
var initText = "initializing";
var initStep = 100;
var init = type('.first .init',initText,initStep);
timeout(init);
//percentage--
var percStep = 10;
function percLoading(){
setInterval(function(){
if(n<=100){
$('.perc').text("("+n+"%)");
n++;
}
},percStep);
};
setTimeout(percLoading,time);
//-------------
//time stetting
time = time + percStep*100;
//load complete
var loadTxt = "Loading Complete..";
var loadStep = 60;
var load = type('.second .load_cmpt', loadTxt, loadStep);
typeAp(load);