From bcfdbbc2268ed43e76ce32b4e30cedf28033e327 Mon Sep 17 00:00:00 2001 From: Navan Chauhan Date: Wed, 18 Oct 2017 21:48:27 +0530 Subject: new --- babel/index.babel | 148 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ css/style.css | 99 ++++++++++++++++++++++++++++++++++++ index.html | 23 +++++++++ js/index.js | 148 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ scss/style.scss | 96 +++++++++++++++++++++++++++++++++++ 5 files changed, 514 insertions(+) create mode 100644 babel/index.babel create mode 100644 css/style.css create mode 100644 index.html create mode 100644 js/index.js create mode 100644 scss/style.scss 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 @@ + + + + + Hi! + + + + + + + + + + +
+
+
+ + + + + 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, ' '); + 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 -- cgit v1.2.3