new

5 files changed, 514 insertions, 0 deletions

diff --git a/babel/index.babel b/babel/index.babel
new file mode 100644
index 0000000..43f184e
--- /dev/null
+++ b/babel/index.babel
@@ -0,0 +1,148 @@
+var TerminalEmulator = {
+  init: function(screen) {
+    var inst = Object.create(this);
+    inst.screen = screen;
+    inst.createInput();
+    
+    return inst;
+  },
+
+  createInput: function() {
+    var inputField = document.createElement('div');
+    var inputWrap = document.createElement('div');
+    
+    inputField.className = 'terminal_emulator__field';
+    inputField.innerHTML = '';
+    inputWrap.appendChild(inputField);
+    this.screen.appendChild(inputWrap);
+    this.field = inputField;
+    this.fieldwrap = inputWrap;
+  },
+
+
+  enterInput: function(input) {
+    return new Promise( (resolve, reject) => {
+    var randomSpeed = (max, min) => { 
+      return Math.random() * (max - min) + min; 
+    }
+      
+    var speed = randomSpeed(70, 90);
+    var i = 0;
+    var str = '';
+    var type = () => {
+      
+      str = str + input[i];
+      this.field.innerHTML = str.replace(/ /g, ' ');
+      i++;
+      
+      setTimeout( () => {
+        if( i < input.length){
+          if( i % 5 === 0) speed = randomSpeed(80, 120);
+          type();
+        }else {
+          console.log('tick');
+          setTimeout( () => {
+            console.log('tock');
+            resolve();
+          }, 400);
+          
+        } 
+      }, speed);
+      
+      
+    };
+    
+    
+    type();
+      
+    });
+  },
+  
+  enterCommand: function() {
+    return new Promise( (resolve, reject ) => {
+      var resp = document.createElement('div');
+      resp.className = 'terminal_emulator__command';
+      resp.innerHTML = this.field.innerHTML;
+      this.screen.insertBefore( resp, this.fieldwrap);
+      
+      this.field.innerHTML = '';
+      resolve();
+    })
+  },
+
+  enterResponse: function(response) {
+    
+    return new Promise( (resolve, reject ) => {
+      var resp = document.createElement('div');
+      resp.className = 'terminal_emulator__response';
+      resp.innerHTML = response;
+      this.screen.insertBefore( resp, this.fieldwrap);
+      
+      resolve();
+    })
+  
+    
+  },
+  
+  wait : function( time, busy ) {
+    busy = (busy === undefined ) ? true : busy;
+    return new Promise( (resolve, reject) => {
+       if (busy){
+         this.field.classList.add('waiting');
+       } else {
+         this.field.classList.remove('waiting');
+       }
+       setTimeout( () => {
+          resolve();
+      }, time);
+    });
+  },
+  
+  reset : function() {
+    return new Promise( (resolve, reject) => {
+      this.field.classList.remove('waiting');
+      resolve();
+    });
+  }
+
+};
+
+
+/*
+ * 
+ * This is where the magic happens
+ *
+ */ 
+
+
+var TE = TerminalEmulator.init(document.getElementById('screen'));
+
+
+TE.wait(1000, false)
+  .then( TE.enterInput.bind(TE, 'bash aboutme.sh') )
+  .then( TE.enterCommand.bind( TE ) )
+  .then( TE.enterResponse.bind(TE, 'Hi, I am Navan') )
+  .then( TE.wait.bind(TE, 2000) )
+  .then( TE.enterResponse.bind(TE, '- I specialise in bash') )
+  .then( TE.wait.bind(TE, 600) )
+  .then( TE.enterResponse.bind(TE, '- I created my first website when I was 7 ') )
+  .then( TE.wait.bind(TE, 600) )
+  .then( TE.enterResponse.bind(TE, '- But, DOSed it a month afterwards ') )
+  .then( TE.wait.bind(TE, 300) )
+  .then( TE.enterResponse.bind(TE, '- Proud Creater of GYGB and John-Doe ') )
+  .then( TE.wait.bind(TE, 700) )
+  .then( TE.enterResponse.bind(TE, 'Want to read more ? (y/n)') )
+  .then( TE.wait.bind(TE, 2000, false) )
+  .then( TE.enterInput.bind(TE, 'y') )
+  .then( TE.enterCommand.bind(TE) )
+  .then( TE.wait.bind(TE, 400) )
+  .then( TE.enterResponse.bind(TE, 'Load short description ? (y/n)') ) 
+  .then( TE.wait.bind(TE, 1800, false) )
+  .then( TE.enterInput.bind(TE, 'y') )
+  .then( TE.enterCommand.bind(TE) )
+  .then( TE.wait.bind(TE, 400) )
+  .then( TE.enterResponse.bind(TE, 'finalizing...') )
+  .then( TE.wait.bind(TE, 2000) )
+  .then( TE.enterResponse.bind(TE, 'I am a self-proclaimed geek. My powers? Am good at parsing jq, awesome in bash and the best, I make terrible decisions and can not keep my mouth shut. I know Bash, Python, C++, C#, HTML, CSS and am on the verge of learning Kotlin.') )
+  .then( TE.reset.bind(TE) );
+
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..941cb7e
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,99 @@
+.screen {
+  position: absolute;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  background: #000000;
+}
+
+.terminal_emulator {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  min-height: 100%;
+  padding: 40px;
+  font-size: 20px;
+  line-heght: 25px;
+  box-sizing: border-box;
+  text-align: left;
+  font-family: monospace;
+  font-weight: 700;
+  color: #99ff99;
+}
+
+.terminal_emulator__field,
+.terminal_emulator__command {
+  position: relative;
+  padding: 0 1em;
+  margin: 0 0 9px 0;
+}
+.terminal_emulator__field:before, .terminal_emulator__field:after,
+.terminal_emulator__command:before,
+.terminal_emulator__command:after {
+  position: absolute;
+}
+.terminal_emulator__field:before,
+.terminal_emulator__command:before {
+  left: 0;
+  top: 0;
+  content: ">";
+}
+
+.terminal_emulator__response,
+.terminal_emulator__command b {
+  padding-bottom: 9px;
+}
+
+.terminal_emulator__field {
+  display: inline-block;
+  min-width: 1em;
+  min-height: 1.5em;
+  box-sizing: border-box;
+}
+.terminal_emulator__field:after {
+  right: 0;
+  bottom: 0.25em;
+  content: "";
+  width: 1em;
+  height: 1.5em;
+  background: #99ff99;
+  -webkit-animation: caretBlink 1s infinite;
+          animation: caretBlink 1s infinite;
+}
+.terminal_emulator__field.waiting {
+  padding-left: 0;
+  padding-right: 0;
+}
+.terminal_emulator__field.waiting:before {
+  display: none;
+}
+
+@-webkit-keyframes caretBlink {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0;
+  }
+  51% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes caretBlink {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0;
+  }
+  51% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..1d40522
--- /dev/null
+++ b/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html >
+<head>
+  <meta charset="UTF-8">
+  <title>Hi!</title>
+  
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
+
+  
+      <link rel="stylesheet" href="css/style.css">
+
+  
+</head>
+
+<body>
+  <div class="screen">
+   <div id="screen" class="terminal_emulator"></div>
+</div>
+  
+    <script  src="js/index.js"></script>
+
+</body>
+</html>
diff --git a/js/index.js b/js/index.js
new file mode 100644
index 0000000..43f184e
--- /dev/null
+++ b/js/index.js
@@ -0,0 +1,148 @@
+var TerminalEmulator = {
+  init: function(screen) {
+    var inst = Object.create(this);
+    inst.screen = screen;
+    inst.createInput();
+    
+    return inst;
+  },
+
+  createInput: function() {
+    var inputField = document.createElement('div');
+    var inputWrap = document.createElement('div');
+    
+    inputField.className = 'terminal_emulator__field';
+    inputField.innerHTML = '';
+    inputWrap.appendChild(inputField);
+    this.screen.appendChild(inputWrap);
+    this.field = inputField;
+    this.fieldwrap = inputWrap;
+  },
+
+
+  enterInput: function(input) {
+    return new Promise( (resolve, reject) => {
+    var randomSpeed = (max, min) => { 
+      return Math.random() * (max - min) + min; 
+    }
+      
+    var speed = randomSpeed(70, 90);
+    var i = 0;
+    var str = '';
+    var type = () => {
+      
+      str = str + input[i];
+      this.field.innerHTML = str.replace(/ /g, '&nbsp;');
+      i++;
+      
+      setTimeout( () => {
+        if( i < input.length){
+          if( i % 5 === 0) speed = randomSpeed(80, 120);
+          type();
+        }else {
+          console.log('tick');
+          setTimeout( () => {
+            console.log('tock');
+            resolve();
+          }, 400);
+          
+        } 
+      }, speed);
+      
+      
+    };
+    
+    
+    type();
+      
+    });
+  },
+  
+  enterCommand: function() {
+    return new Promise( (resolve, reject ) => {
+      var resp = document.createElement('div');
+      resp.className = 'terminal_emulator__command';
+      resp.innerHTML = this.field.innerHTML;
+      this.screen.insertBefore( resp, this.fieldwrap);
+      
+      this.field.innerHTML = '';
+      resolve();
+    })
+  },
+
+  enterResponse: function(response) {
+    
+    return new Promise( (resolve, reject ) => {
+      var resp = document.createElement('div');
+      resp.className = 'terminal_emulator__response';
+      resp.innerHTML = response;
+      this.screen.insertBefore( resp, this.fieldwrap);
+      
+      resolve();
+    })
+  
+    
+  },
+  
+  wait : function( time, busy ) {
+    busy = (busy === undefined ) ? true : busy;
+    return new Promise( (resolve, reject) => {
+       if (busy){
+         this.field.classList.add('waiting');
+       } else {
+         this.field.classList.remove('waiting');
+       }
+       setTimeout( () => {
+          resolve();
+      }, time);
+    });
+  },
+  
+  reset : function() {
+    return new Promise( (resolve, reject) => {
+      this.field.classList.remove('waiting');
+      resolve();
+    });
+  }
+
+};
+
+
+/*
+ * 
+ * This is where the magic happens
+ *
+ */ 
+
+
+var TE = TerminalEmulator.init(document.getElementById('screen'));
+
+
+TE.wait(1000, false)
+  .then( TE.enterInput.bind(TE, 'bash aboutme.sh') )
+  .then( TE.enterCommand.bind( TE ) )
+  .then( TE.enterResponse.bind(TE, 'Hi, I am Navan') )
+  .then( TE.wait.bind(TE, 2000) )
+  .then( TE.enterResponse.bind(TE, '- I specialise in bash') )
+  .then( TE.wait.bind(TE, 600) )
+  .then( TE.enterResponse.bind(TE, '- I created my first website when I was 7 ') )
+  .then( TE.wait.bind(TE, 600) )
+  .then( TE.enterResponse.bind(TE, '- But, DOSed it a month afterwards ') )
+  .then( TE.wait.bind(TE, 300) )
+  .then( TE.enterResponse.bind(TE, '- Proud Creater of GYGB and John-Doe ') )
+  .then( TE.wait.bind(TE, 700) )
+  .then( TE.enterResponse.bind(TE, 'Want to read more ? (y/n)') )
+  .then( TE.wait.bind(TE, 2000, false) )
+  .then( TE.enterInput.bind(TE, 'y') )
+  .then( TE.enterCommand.bind(TE) )
+  .then( TE.wait.bind(TE, 400) )
+  .then( TE.enterResponse.bind(TE, 'Load short description ? (y/n)') ) 
+  .then( TE.wait.bind(TE, 1800, false) )
+  .then( TE.enterInput.bind(TE, 'y') )
+  .then( TE.enterCommand.bind(TE) )
+  .then( TE.wait.bind(TE, 400) )
+  .then( TE.enterResponse.bind(TE, 'finalizing...') )
+  .then( TE.wait.bind(TE, 2000) )
+  .then( TE.enterResponse.bind(TE, 'I am a self-proclaimed geek. My powers? Am good at parsing jq, awesome in bash and the best, I make terrible decisions and can not keep my mouth shut. I know Bash, Python, C++, C#, HTML, CSS and am on the verge of learning Kotlin.') )
+  .then( TE.reset.bind(TE) );
+
diff --git a/scss/style.scss b/scss/style.scss
new file mode 100644
index 0000000..c437dd3
--- /dev/null
+++ b/scss/style.scss
@@ -0,0 +1,96 @@
+.screen {
+  position: absolute;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  background: #000000;
+}
+
+.terminal_emulator {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  min-height: 100%;
+  
+  
+  padding: 40px;
+  font-size: 20px;
+  line-heght: 25px;
+  box-sizing: border-box;
+  text-align:left;
+  
+  font-family: monospace;
+  font-weight: 700;  
+  
+  color: #99ff99;
+}
+
+.terminal_emulator__field,
+.terminal_emulator__command {
+  
+  position: relative;
+  
+  padding: 0 1em;
+  margin: 0 0 9px 0;
+  
+  &:before,
+  &:after {
+    position: absolute;
+  }
+  
+  &:before {
+    left:0;
+    top: 0;
+    content:">";
+  }
+  
+}
+
+.terminal_emulator__response,
+.terminal_emulator__command b{
+  padding-bottom: 9px;
+}
+
+.terminal_emulator__field {
+  display: inline-block;
+  min-width: 1em;
+  min-height: 1.5em;
+  box-sizing: border-box;
+  &:after {
+    right: 0;
+    bottom: 0.25em;
+    
+    content:"";
+    width: 1em;
+    height: 1.5em;
+    background:#99ff99;
+  
+    animation: caretBlink 1s infinite;
+  }
+  
+  &.waiting {
+    padding-left: 0;
+    padding-right: 0;
+    &:before {
+      display: none;
+    }
+  }
+}
+
+@keyframes caretBlink {
+  0% {
+    opacity: 0;
+  }
+  
+  50% {
+    opacity: 0;
+  }
+  
+  51% {
+    opacity: 1;
+  }
+  
+  100% {
+    opacity: 1;
+  }
+}
\ No newline at end of file