123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              div#output

div#input
	input(
		id="input-field"
		type="text"
		value=""
		autofocus="true"
		autocomplete="off"
		disabled="true"
	)
            
          
!
            
              $color1: #000;
$color2: #fff;

* {
	box-sizing: border-box;
}

html,
body {
	padding: 0;
	margin: 0;
	background: $color1;
	color: $color2;
	font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
	font-size: 16px;
	line-height: 1.5;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	line-height: 18.5714px;
	height: 100vh;
}

#output {
	position: relative;
	height: calc(100vh - 50px);
	padding: 10px;
	overflow-y: scroll;
	overflow-x: hidden;
	white-space: pre-wrap;
	overflow-x: auto;
    &.rotate {
      transform: rotateX(180deg) !important;
    }
	.container {
		display: flex;
		@media(max-width: 925px) {
			flex-flow: row wrap;
		}
		.box-text {
			width: auto;
			padding-right: 10%;
			order: 2;
			@media(max-width: 925px) {
				width: 100%;
				order: 1;
			}
		}
		.box-image {
			width: auto;
			padding-right: 10%;
			order: 1;
			@media(max-width: 925px) {
				width: 100%;
				order: 2;
			}
		}
	}

	.ascii {
		font-size: 1rem;
		@media(max-width : 980px) {
			font-size: 0.7rem;
			line-height: 1.2;
		}
		@media(max-width : 675px) {
			font-size: 0.5rem;
			line-height: 1;
		}
		@media(max-width : 475px) {
			font-size: 0.3rem;
			line-height: 1;
		}
	}
	.ascii-small {
		font-size: 0.5rem;
		line-height: 1.2;
		@media(max-width : 475px) {
			font-size: 0.3rem;
			line-height: 1;
		}
	}
	h1 {
		line-height: 1.5;
	}
	li {
		padding: 0;
		margin: 0;
		list-style-type: none;
	}
	a {
		text-decoration: underline;
		color: $color2;
		font-weight: bold;
		&:hover {
			color: yellow;
		}
	}
	hr {
		border: 0;
		border-top: 2px dashed $color2;
	}
	table {
		border-collapse: collapse;
		border: 2px dashed $color2;
		tr {
			border: 1px dashed $color2;
			th {
				color: yellow;
				font-weight: bold;
				text-align: left;
				padding: 15px;
				border: 2px dashed $color2;
			}
			td {
				min-width: 250px;
				border: 2px dashed $color2;
				padding: 15px;
				&.id {
					min-width: auto;
				}
			}
		}
	}
	.highlight {
		color: yellow;
	}
	.error {
		color: red;
	}
	.success {
		color: cyan;
	}
}

#input {
	height: 50px;
	width: 100vw;
	position: relative;
	input {
		background: lighten($color1, 10%);
		color: $color2;
		display: block;
		font-family: Consolas, monaco, monospace;
		font-size: 14px;
		font-style: normal;
		font-variant: normal;
		font-weight: 400;
		line-height: 18.5714px;
		padding: 10px 30px;
		border: 0;
		height: 100%;
		width: 100%;
		&:focus {
			outline: none;
		}
	}
	&::before {
		position: absolute;
		display: block;
		content: ">";
		color: $color2;
		left: 10px;
		top: 16px;
		z-index: 2;
	}
}


            
          
!
            
              const outputElement = document.getElementById('output');
const inputElement = document.getElementById('input-field');
var lastCommand = [];
var nextCommand = -1;

// Commands
const commands = {
	init: function() {
		const welcomeText = ''+
		'<p class="ascii success">' +
		' _______ _____  _____  _____ _______       _   _    __          ___    _ _____ _______ ______ <br>' +
		'|__   __|  __ \\|_   _|/ ____|__   __|/\\   | \\ | |   \\ \\        / / |  | |_   _|__   __|  ____| <br>' +
		'   | |  | |__) | | | | (___    | |  /  \\  |  \\| |    \\ \\  /\\  / /| |__| | | |    | |  | |__ <br>' +
		'   | |  |  _  /  | |  \\___ \\   | | / /\\ \\ | . ` |     \\ \\/  \\/ / |  __  | | |    | |  |  __| <br>' +
		'   | |  | | \\ \\ _| |_ ____) |  | |/ ____ \\| |\\  |      \\  /\\  /  | |  | |_| |_   | |  | |____ <br>' +
		'   |_|  |_|  \\_\\_____|_____/   |_/_/    \\_\\_| \\_|       \\/  \\/   |_|  |_|_____|  |_|  |______| <br>' +
		'_____________________________________________________________________________________________ </p><br>' +
		'<br>Welcome!<br><br>' +
		'You\'ve found the online home of Tristan White. Tristan White is a Web Architect based in Aarhus Denmark. <br>' +
		'Tristan works for small companies and startups, creating responsive web applications. ' +
		'Building the right foundation to ongoing optimization and support. In short, he tries to make the web a better place.<br><br><br>' +
		'Type "help" to display list of available commands. Type "exit" to leave the terminal.<br>';
		outputElement.innerHTML =  "Loading";
		console.warn('Initializing ...');
		setTimeout(function() {
		   outputElement.innerHTML =  "Loading.";
		},500);
		setTimeout(function() {
		   outputElement.innerHTML =  "Loading..";
		},1000);
		setTimeout(function() {
		   outputElement.innerHTML =  "Loading...";
		},1500);
		setTimeout(function() {
		   outputElement.innerHTML =  "Loading....";
		},2000);
		setTimeout(function() {
		   outputElement.innerHTML = welcomeText + '<br>' ;
		   inputElement.removeAttribute("disabled");
		   inputElement.focus();
		},2500);
	},
	help: function() {
		console.warn('Executing "help" command');
		outputElement.innerHTML += ''+
		'<table>'+
			'<tr>' +
				'<th>Command</th>' +
				'<th>Description</th>' +
			'<tr>' +
			'<tr>' +
				'<td>help</td>' +
				'<td>Display a list of available commands.</td>' +
			'<tr>' +
			'<tr>' +
				'<td>projects</td>' +
				'<td>Display a list of projects by Tristan White</td>' +
			'<tr>' +
			'<tr>' +
				'<td>about</td>' +
				'<td>Learn more about Tristan White</td>' +
			'<tr>' +
			'<tr>' +
				'<td>contact</td>' +
				'<td>Contact Tristan White by E-mail</td>' +
			'<tr>' +
			'<tr>' +
				'<td>clear</td>' +
				'<td>Clear the terminal window </td>' +
			'<tr>' +
			'<tr>' +
				'<td>reboot</td>' +
				'<td>Reboot the application</td>' +
			'<tr>' +
            '<tr>' +
                '<td>exit</td>' +
                '<td>Leave the terminal</td>' +
            '<tr>' +
		'</table>';
	},
	exit: function() {
        console.warn('Executing "exit" command');
        window.location.replace("https://triss.dev");
	},
	help_min: function() {
		console.warn('Executing "help" command');
		outputElement.innerHTML += ''+
		'Type "help" to display list of available commands<br>';
	},
	error: function() {
		console.error('Unknown command! Type "help" to display a list of avialable commands.');
		outputElement.innerHTML += '<span class="error">Unknown command! Type "help" to display a list of available commands.';
	},
	clear: function() {
		console.warn('Executing "clear" command');
		outputElement.innerHTML = '';
	},
	projects: function() {
		console.warn('Executing "projects" command');
		outputElement.innerHTML += ''+
		'<table>'+
			'<tr>' +
				'<th>ID</th>' +
				'<th>Name</th>' +
				'<th>Description</th>' +
			'<tr>' +
			'<tr>' +
				'<td class="id">1</td>' +
				'<td><a href="https://colordrop.io" target="_blank">ColorDrop</a></td>' +
				'<td>Thousands of curated colors, palettes for use in your products.</td>' +
			'<tr>' +
			'<tr>' +
				'<td class="id">2</td>' +
				'<td><a href="https://plaask.com" target="_blank">Plaask</a></td>' +
				'<td>Notifications, share dialogs, subscription forms and popups. It\'s costumizable, responsive and animated.</td>' +
			'<tr>' +
			'<tr>' +
				'<td class="id">3</td>' +
				'<td><a href="https://compressionbear.com/" target="_blank">Compression Bear</a></td>' +
				'<td>Compress your images with a bear!</td>' +
			'<tr>' +
			'<tr>' +
				'<td class="id">4</td>' +
				'<td><a href="https://gridder.io" target="_blank">Gridder</a></td>' +
				'<td>Gridder\'s fluid grid and breakpoints enable endless combinations of column sizes, offsets, allignments and viewport widths.</td>' +
			'<tr>' +
			'<tr>' +
				'<td class="id">5</td>' +
				'<td><a href="https://muds.io" target="_blank">Muds</a></td>' +
				'<td>Beautiful Javascript web editor that\'s easy to integrate for developers and your users will simply fall in love with its clean design.</td>' +
			'<tr>' +
			'<tr>' +
				'<td class="id">6</td>' +
				'<td><a href="https://wordboss.de" target="_blank">WordBoss</a></td>' +
				'<td>WordBoss is an owner-run company for professional translations and language services. In their role as translation specialists</td>' +
			'<tr>' +
			'<tr>' +
				'<td class="id">7</td>' +
				'<td><a href="https://emilywhite.dk" target="_blank">Emily White</a></td>' +
				'<td>Emily is 100% "fitness Geek" based in Denmark. When she is not busting balls on the odd military camp on Cyprus, she spends her time working out in Aarhus</td>' +
			'<tr>' +
		'</table>'+
		'<p class="success">type "project -ID" (Example: "project -3") to learn more about a given project</p>';
	},
	project_1: function () {
		console.warn('Executing "project -1" command');
		outputElement.innerHTML += ''+
		'<h1>ColorDrop</h1>' +
		'<p><strong class="highlight">URL: </strong><a href="https://colordrop.io/" target="">https://colordrop.io</a></p>'+
		'<p><strong class="highlight">Description: </strong> Thousands of curated colors, palettes for use in your products</p>'+
		'<br>' +
		'<p class="ascii">' +
        '              (*                          <br>' +
        '            (((((                         <br>' +
        '           (((((((          /(            <br>' +
        '         .(((((((((*       ((((,          <br>' +
        '        (((((((((((((    /(((((((         <br>' +
        '       (((((((((((((((  ((((((((((        <br>' +
        '      ((((((((((((/((((((((((((((((       <br>' +
        '     ((((((((((((,,,((((((((((((((((,     <br>' +
        '    (((((((((((*,,,,((((((((((((((((((    <br>' +
        '   (((((((((((,,,,,((((((((((((((((((((   <br>' +
        '   ((((((((((,,,,,(((((((((((((((((((((.  <br>' +
        '    (((((((/,,,,,,((((((((((((((((((((((  <br>' +
        '    *(((((,,,,,,,,((((((((((((((((((((((  <br>' +
        '      (((,,,,,,,,,(((((((((((((((((((((*  <br>' +
        '        ,,,,,,,,,,,((((((((((((((((((((   <br>' +
        '       .,,,,,,,,,,,,(((((((((((((((((,    <br>' +
        '       ,,,,,,,,,,,,,,,/((((((((((((.      <br>' +
        '       .,,,,,,,,,,,,,,,,,,,/(/*           <br>' +
        '        ,,,,,,,,,,,,,,,,,,,,.             <br>' +
        '         ,,,,,,,,,,,,,,,,,,               <br>' +
        '           ,,,,,,,,,,,,,,,                <br>' +
        '              ,,,,,,,,.                   <br>' +
        '</p>' +
        '<br>' +
        '<br>';
	},
	project_2: function () {
		console.warn('Executing "project -2" command');
		outputElement.innerHTML += ''+
		'<h1>Plaask</h1>' +
		'<p><strong class="highlight">URL: </strong><a href="https://plaaask.com/" target="">https://plaask.com</a></p>'+
		'<p><strong class="highlight">Description: </strong>Costumizable CSS website widgets. Notifications, share dialogs, subscription forms and popups. It\'s costumizable, responsive and animated. Simply include the library and use it on your website.</p>'+
		'<p>Save time developing. We designed, coded and perfected all the widgets, so you don\'t have to. Your time should be spent on your product.</p>'+
		'<p>Reduce your bounce-rate. Invite users to take action on your website, by capturing their eye with animated widgets.</p>'+
		'<br>' +
		'<p class="ascii">'+
		'                             .                              <br>' +
		'                         .*%%&%#,                           <br>' +
		'                      ,(%&&&&&&&&/.                         <br>' +
		'                   *(%&&&&&&&&&&&&&&&%/,                    <br>' +
		'               ,/%&&&&%%%%&&&&&&&&%%&&&&%%*.                <br>' +
		'           .,#%&&&&&&&&&&&%%%&%%%&&&&&&&&&&&%(,             <br>' +
		'        .(#%%&&&&&&&&&&&&&&%%(#%&&&&&&&&&&&&&&%%#/          <br>' +
		'     *(%&&&&&&&%%&&&&&&%%%%%%(((((%%&&&&&&%%%&&&&&&%/,      <br>' +
		' .*%&&&&&&&&&&&&&&%%%%%%%%%%%((((((((#%%%&&&&&&&&&&&&&%%*.  <br>' +
		' *(#%&&&&&&&&&&&&%%##%%%%%%%%(((((((((/((#%&&&&&&&&&&&%%%(  <br>' +
		' *(((((%%&&&&%%%%%%%#%%%%%%%%(((((((((/(((((#%&&&&%%%%%%%(  <br>' +
		' *((((((((#%%%%%%%%%#%%%%%%%#/((((((((/(((((((((#%%%%%%%%(  <br>' +
		' *(((((((((%%%%%%%%%#%%%%(*     */((((/(((((((((#%%%%%%%%(  <br>' +
		' *(((((((((%%%%%%%%%##(.           .*//(((((((((#%%%%%%%%(  <br>' +
		' */((((((((%%%%%%%%(*                 ,/((((((((#%%%%%%%%(  <br>' +
		' *((((/((((%%%##%%%#,                 ,/((((((((#%%%%%%%%(  <br>' +
		' *(((((((/(##%%%%%%#,                 ,/((((((((#%%%%%%%%(  <br>' +
		' *(((((((((%%%%%%%%#,                 ,/((((((((#%%%%%%%%(  <br>' +
		' *(((((((((%%%%%%%%#,                 ,/((((((((#%%%%%%%%(  <br>' +
		' *(((((((((%%%%%%%%#(.               ./(((((((((#%%%%%%%%(  <br>' +
		' *(((((((((%%%%%%%&&&&%(*         *(%&&&&%#(((((#%%%%%%%%(  <br>' +
		' *(((((((((#%%%&&&&&&&&&&%%*. .*%%&&&&&&&&&&%%((#%%%%%%%%(  <br>' +
		' *((((((((((#%&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&%%#%%%%%%%%%(  <br>' +
		' *(((((((((((((#%&&&&&&&&&&&&&&&&&&&&&&&&&%%%%%%%%%%%%%%%(  <br>' +
		' *(((((((((((((((((#%&&&&&&&&&&&&&&&&&%%%%%%%%%%%%%%%%%%%(  <br>' +
		'   ,*(((((((((((((((((#%&&&&&&&&&&&%%%%%%%%%%%%%%%%%%%(/.   <br>' +
		'      .*/((((((((((((((((##%&&&&%%%%%%%%%%%%%%%%%%#(,       <br>' +
		'         .,/(((((((((((((((((#%%%%%%%%%%%%%%%%%#*.          <br>' +
		'             .*(((((((((((((((%%%%%%%%%%%%%%/*              <br>' +
		'                 */(((((((((((%%%%%%%%%%#/.                 <br>' +
		'                    .*/(((((((%%%%%%#(,.                    <br>' +
		'                      .,/((((%%%#*,                      	 <br>' +
		'                           ,*((*                            <br>' +
		'</p>' +
        '<br>' +
        '<br>';
	},
	project_3: function () {
		console.warn('Executing "project -3" command');
		outputElement.innerHTML += ''+
		'<h1>Compression Bear</h1>' +
		'<p><strong class="highlight">URL: </strong><a href="https://compressionbear.com/" target="">https://compressionbear.com</a></p>'+
		'<p><strong class="highlight">Description: </strong>Compress your images by up to 90% with a bear.</p>'+
		'<p class="ascii">' +
		'<br>' +
		'                        */////                             <br>' +
		'                       //////////                          <br>' +
		'                      /////////////                        <br>' +
		'                     ////////////////                      <br>' +
		'                     //////////////////                    <br>' +
		'                     ////////////////////                  <br>' +
		'         ,////.      ,/////////////////////,               <br>' +
		'     ,///////////     /////////////////////////.           <br>' +
		'   //////////////,    //////////////////////////////       <br>' +
		'  ///////////////     */////////////////////////////////   <br>' +
		'  //////////////      ///////////////////////////////////* <br>' +
		'  /////////////       //////////////////////////////////// <br>' +
		'   /////////         *//////////////////////////////////// <br>' +
		'                     ////////////////////////////////////  <br>' +
		'                     */////////////////////////////////.   <br>' +
		'        ////////,     //////////////////////////////       <br>' +
		'     /////////////     ////////////////*                   <br>' +
		'   ////////////////      ,/////////                        <br>' +
		'  /////////////////                         ///*           <br>' +
		' //////////////////                      /////////         <br>' +
		' /////////////////       //////         //////////,        <br>' +
		' ////////////////     ///////////      ////////////        <br>' +
		'  /////////////     //////////////     ////////////        <br>' +
		'    ///////,       ///////////////    .///////////         <br>' +
		'                  ////////////////     //////////,         <br>' +
		'                  ////////////////      ////////           <br>' +
		'                  ///////////////         *//.             <br>' +
		'                  //////////////                           <br>' +
		'                   ///////////.                            <br>' +
		'</p>' +
        '<br>' +
        '<br>';
	},
	project_4: function () {
		console.warn('Executing "project -4" command');
		outputElement.innerHTML += ''+
		'<h1>Gridder</h1>' +
		'<p><strong class="highlight">URL: </strong><a href="https://gridder.io/" target="">https://gridder.io</a></p>'+
		'<p><strong class="highlight">Description: </strong>Gridder - The simple grid system based on Flexbox. Gridder\'s fluid grid and breakpoints enable endless combinations of column sizes, offsets, allignments and viewport widths.</p>'+
		'<p class="ascii">' +
		'<br>' +
		'   (#######               #######               #######/    <br>' +
		' ############          *###########.          ############  <br>' +
		'##############        (#############*        ############## <br>' +
		'########################################################### <br>' +
		'########################################################### <br>' +
		'*############(         #############         #############. <br>' +
		'  ##########            (#########*            ##########   <br>' +
		'     ####                   .,.                    ,.       <br>' +
		'     ####                                                   <br>' +
		'     ####                                                   <br>' +
		'     ####                                                   <br>' +
		'    ######                /#####*               .######     <br>' +
		' ############           ###########           ###########/  <br>' +
		'##############        *#############         ############## <br>' +
		'##############/       ##################################### <br>' +
		'##############*       ##################################### <br>' +
		'##############         #############         #############/ <br>' +
		' .##########*           ###########           (##########   <br>' +
		'     ####.                 /###*                 .####      <br>' +
		'     ####                                         ###(      <br>' +
		'     ####                                         ###(      <br>' +
		'     ####                                         ###(      <br>' +
		'     ####*                  ,*,                  ,####      <br>' +
		'  ###########           (#########/           (##########   <br>' +
		'.#############         #############         #############/ <br>' +
		'########################################################### <br>' +
		'########################################################### <br>' +
		'*#############        (#############,        ############## <br>' +
		' .###########          ,###########           ###########/  <br>' +
		'</p>' +
        '<br>' +
        '<br>';
	},
	project_5: function () {
		console.warn('Executing "project -5" command');
		outputElement.innerHTML += ''+
		'<h1>MUDS</h1>' +
		'<p><strong class="highlight">URL: </strong><a href="https://muds.io/" target="">https://muds.io</a></p>'+
		'<p><strong class="highlight">Description: </strong>Beautiful Javascript web editor that\'s easy to integrate for developers and your users will simply fall in love with its clean design.</p>'+
		'<p>No matter what you\'re building, MUDS has you covered. From content management to email marketing</p>'+
		'<br>' +
		'<p class="ascii">' +
		'@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ <br>' +
		'@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ <br>' +
		'@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ <br>' +
		'@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ <br>' +
		'@@@@@@@@     *@@@@@@@@@@      @@@@@   /@@@@@@@@%   @@@@@@@@ <br>' +
		'@@@@@@@@      @@@@@@@@@       @@@@@   /@@@@@@@@%   @@@@@@@@ <br>' +
		'@@@@@@@@   @   @@@@@@@,       @@@@@   /@@@@@@@@%   @@@@@@@@ <br>' +
		'@@@@@@@@   @(   @@@@@@   @    @@@@@   /@@@@@@@@%   @@@@@@@@ <br>' +
		'@@@@@@@@   @@   ,@@@@   @@    @@@@@   /@@@@@@@@%   @@@@@@@@ <br>' +
		'@@@@@@@@   @@@   &@@   *@@    @@@@@   /@@@@@@@@%   @@@@@@@@ <br>' +
		'@@@@@@@@   @@@@   @    @@@    @@@@@   /@@@@@@@@%   @@@@@@@@ <br>' +
		'@@@@@@@@   @@@@,      @@@@    @@@@@    @@@@@@@@    @@@@@@@@ <br>' +
		'@@@@@@@@   @@@@@     @@@@@    @@@@@@    #@@@@&    @@@@@@@@@ <br>' +
		'@@@@@@@@   @@@@@@   *@@@@@    @@@@@@@            @@@@@@@@@@ <br>' +
		'@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@,  ,@@@@@@@@@@@@@@ <br>' +
		'@@@@@@@@&&&&&&&&@@@@@@@@@@@@@@@@@@@@@@@@,     &@@@@@@@@@@@@ <br>' +
		'@@@@@@@@              @@@@@@@@@@@@@@@           ,@@@@@@@@@@ <br>' +
		'@@@@@@@@   #@@@@@@/     @@@@@@@@@@@@    @@@@@@ @@@@@@@@@@@@ <br>' +
		'@@@@@@@@   #@@@@@@@@@    &@@@@@@@@@@   ,@@@@@@@@@@@@@@@@@@@ <br>' +
		'@@@@@@@@   #@@@@@@@@@@    @@@@@@@@@@     .@@@@@@@@@@@@@@@@@ <br>' +
		'@@@@@@@@   #@@@@@@@@@@    @@@@@@@@@                @@@@@@@@ <br>' +
		'@@@@@@@@   #@@@@@@@@@@    @@@@@@@@@((((((((((((((((@@@@@@@@ <br>' +
		'@@@@@@@@   #@@@@@@@@@    #@@@@@@@@@@@@@@@@@@@    @@@@@@@@@@ <br>' +
		'@@@@@@@@   #@@@@@@@     @@@@@@@@@@@@@ &@@@@@@    @@@@@@@@@@ <br>' +
		'@@@@@@@@              &@@@@@@@@@@@@             @@@@@@@@@@@ <br>' +
		'@@@@@@@@         ,@@@@@@@@@@@@@@@@@@@&       (@@@@@@@@@@@@@ <br>' +
		'@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ <br>' +
		'@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ <br>' +
		'@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ <br>' +
		'</p>' +
        '<br>' +
        '<br>';
	},
	project_6: function () {
		console.warn('Executing "project -6" command');
		outputElement.innerHTML += ''+
		'<h1>WordBoss</h1>' +
		'<p><strong class="highlight">URL: </strong><a href="http://wordboss.de/" target="">http://wordboss.de</a></p>'+
		'<p><strong class="highlight">Description: </strong>WorBoss is an owner-run company for professional translations and language services.</p>'+
		'<p>In their role as translation specialists, they have been a reliable business partner for more than 20 years, serving clients in the areas of law and economics, engineering, science, culture & communication.</p>'+
        '<br>';
	},
	project_7: function () {
		console.warn('Executing "project -7" command');
		outputElement.innerHTML += ''+
		'<h1>Emily White</h1>' +
		'<p><strong class="highlight">URL: </strong><a href="http://emilywhite.dk/" target="">http://emilywhite.dk</a></p>'+
		'<p><strong class="highlight">Description: </strong>Emily is a total "fitness Geek" based in Aarhus, Denmark. When she is not busting balls participating in the odd military camp on Cyprus, she spends her time working out in Aarhus.</p>'+
        '<br>';
	},
	about: function() {
		console.warn('Executing "about" command');
		outputElement.innerHTML += ''+
		'<div class="container">' +
			'<div class="box-image">'+
				'<p class="ascii-small">'+
				'                                           .(#%%&&&%%/.                               <br>' +
				'                                      *%&&&&&&&&&&&&&&&&&%,                           <br>' +
				'                                   /%&%&&&&&%%%%#%##%#%%&&&&%                         <br>' +
				'                                 %%&&%%#%%%%#%%####(##(#%&&%&%#                       <br>' +
				'                              .#%%###(((#((##((#((/((#(((###%#(#/                     <br>' +
				'                             /#%%##(((////////******///(/*/*///((/                    <br>' +
				'                            (#%####((////////***************/////*/                   <br>' +
				'                           *###%##((////////*****************////**/                  <br>' +
				'                           ((####(((///////*********************//*//                 <br>' +
				'                          */###((((///////*//******************//////                 <br>' +
				'                          /(((#((((//////////**************//*/////*/*                <br>' +
				'                          /(((#(((///////////*/***************/////*/*                <br>' +
				'                          (((#((////////////********************///***                <br>' +
				'                          (((#(/////(/(#((#(#####/*********/(#####(**,                <br>' +
				'                          (((((////(///(/////(((((//****//((((//////,,                <br>' +
				'                          (((#(////////(((&&%##(/(((/***(((#&&%(/#/**,                <br>' +
				'                      *(///(((/////////(((/%(*/((*(///*/((//##//(#//*,                <br>' +
				'                      *//(//((//////////////**/////(////(////////////*                <br>' +
				'                      **///((///////////**//*////////////////******/**                <br>' +
				'                       /*//(((//////////*********///(////(/***********                <br>' +
				'                       /**///(////////***********/((//***//**********,                <br>' +
				'                        /*//(/(///////***********(//(//**//**********                 <br>' +
				'                         *///((////////*******/**/(/((((((/**********                 <br>' +
				'                           //(//(////////**///*///((/*////(//////****                 <br>' +
				'                              */////////*/(((((//(((//////(((/((//***                 <br>' +
				'                              ,(((///////((#(#((((((///////(((/(/***                  <br>' +
				'                          ,    (((///////****///((/(****//////////**                  <br>' +
				'                        &@@@@@&%#(#(//////***/////////*//////////**                   <br>' +
				'                       &@@&@@@@%%%###///#((///////****//*////((//*                    <br>' +
				'                      (&@@@&&@@%#%&##(((((/(/////*****/////((//                       <br>' +
				'                      %%&@@@@@&(#%&&%#(((((((/(////***////(/(.                        <br>' +
				'                      &&@&@@@@@&&&((#&&&&%#(((((((((//////(((/                        <br>' +
				'                     %&&&&@@@@@@@@&&/((%&&&&&%%#(##(((/((((((&                        <br>' +
				'                   %#%&&@&&@@@@@@@&&&&/(((#&&&@&&%&%%%%%##%&&&&&                      <br>' +
				'                *%%&&&&&@&@@@@@@@@@@&&&&///(###%&&&&&&%%(@@&&&&&&&(                   <br>' +
				'              %&&&&&&&&&@@&&&&@@&@@@@@&@&&/////(((((((((@@@@&&&&&&&&/                 <br>' +
				'          #%&%&&&&&&&&&&&@&@&@@&@@@&@@@@&&&&%///////(((@&&&&&&&&&&&&&&                <br>' +
				'        #%#%&&&%%&&&&&&&&@@&&@&&@@@@&@@@@&&&&&&/////((@@&&&&&&&&&&&&&&&%              <br>' +
				'      ((%%%&&&&&&&&&&&&&&&@@@&@&&@@@&&@@@@@&@&&&&/(&@&&&&&&&&&&&&&&&&&&.              <br>' +
				'  ,#%%&&&&&&&&&&&&&&&&&&&&&@&&&&&&@@&@&&@@@@@@@&&&@&*&&&&&&&&&&&&&&&&&&&%             <br>' +
				'%%&&&&&&@&&&&&&&&&&&&&&&&&&@&&&@@@@&&@&&@@@@@@@@@@&&&&&(@&&&&&&&&&&&&&&&&&&%          <br>' +
				'&&&&&&&&&&&&&&&&&&&&&&&&&&&&@&&@@@@&@&&&@@@@@@@@@@@&&@&&&%&&&&&&&&&&&&&&&%            <br>' +
				'&&&&&&&&&&&&&&&@&&&&&&&&&&&&@@&@@@@@&&&&&&@@@@@@@@@@@@@&&&&&%&&&&&&&@&&&&&%&(         <br>' +
				'&&&&&&&&&&&&&&&&&&&&&&&&&&&&&@&@@@&@&&&&&&@@@&@@@@@@@&@&&@@&&@&@@@@@@&&&&&%%&&/       <br>' +
				'&&&&&&&&&&&&&&@&&&&&&&&&&&&&&&@&@@@&@@&@&&&@@@@&@@@@@@@@@@@&@@@@@&&&@&&&&&%%#         <br>' +
				'&&&&&&&&&&&&&&&&&@@&&&&&&&&&&&@@&@@@@&&&&&&&&@@@&&&@@@@@@&&&@@@@@&@@&&&&&&&&          <br>' +
				'&&&&&&&&&&&&&&&&&@@@&&&&&&&&&&&@@&&&&&&&&&&&&&&&&&&&&&&@&%&&&@&&@@@&&&&&&&&&          <br>' +
				'&&&&&&&&&&&&&@&&&&@@&&&&&&&&&&&&@@@@&@@@@@@@@@@@@@@@@@&&&&&&&@&&@@&&&@&&&&%&          <br>' +
				'&&&&&&&&@&&&@@&&&&&@@&&&&&&&&&&&&&@@&&&&&&&&&&&&&&@@@@&@@&@&&&@&@&&@&&&&&%%%%         <br>' +
				'&&&&@&&&&&&&&@@@&&&@@&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&@&@&@@@&&&@@&@@&&%&%&&%%&(        <br>' +
				'&&&&@&&&&&&&&&&@@@&&@@&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&@&@&@@&&@&&&@&&&&&&%&%%&.         <br>' +
				'&&&@&&&&&&&&&&&@@@@&&@@&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&@&&&&&&&&&&&%&&%%&%       <br>' +
				'&&&&@@&@&&&&&@&@@@@&&&@@&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&@&@&@&@%%&&&&%%%&%%&       <br>' +
				'&&&&&@@@&&&&@&&&&@@@@@@@@&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&@&&&@&%&&&&%#&%%%&(      <br>' +
				'&&&&&&&@@&&&@@&&@&&@@@&@@&&&&@&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&@&&@&&&%#&%#%#       <br>' +
				'&&&&&&@&@@&&&@&&&&@@@@@&@@&&&&@&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&@&@@&&&&&&%#/###%&&     <br>' +
				'&&&&&&@@&@@&&&@&@&&&@@@@&@&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&@&&&&&&&%###%%&&%    <br>' +
				'&&&&@&&@&@@@&&&@@@&&&&&@&&&&&&&@&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&@&@&&&&@&&%%&%#&&      <br>' +
				'@&@&&&&@@&@&@@&&@@&@@@&&@&@&@&&@@&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&@&&&&&&&&&&%%&       <br>' +
				'&&&&&&&@&&@@@@&@&&@@@@@&&&&@&&&&@&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&@@&&&&&@&&&%&&%       <br>' +
				'&&&@@@@&&&&@@@@@&&@&&&&@@@&@@&&&@@&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&@%&&&&&&&&&%&%&%&&&*  <br>' +
				'&&&&&&@&@@&@&@@@@@&&@@@&&@@&@&&&@@&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&@%&&&&&&&&&%##&&%    <br>' +
				'&&&&&&&@&@&@@&@@@@&&&@@&&&&@&&&&&@&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&%&&&&&&&&&&%%%%&&%  <br>' +
				'&&&&&&&&&&@@@&&&@@@@@&@@&&@@@&@&&@@&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&@&&&&&&&&&%&%%%&&&* <br>' +
				'</p><br>' +
			'</div>'+
			'<div class="box-text">' +
				'<br><h1>About Tristan White</h1>' +
				'<hr>' +
				'<p>Tristan White is a Web Architect based in Aarhus, Denmark. <br>See small bits of his experimental work on <a href="https://codepen.io/triss90/pens/popular/" target="_blank">Codepen</a>, thoughts on <a href="https://twitter.com/Triss90" target="_blank">Twitter</a>, and video tutorials on <a href="https://www.youtube.com/channel/UCxnhnHu17q4Zk4m9-7BL5dw" target="_blank">YouTube</a>.</p>'+
				'<p>Tristan works for small companies and startups, creating responsive web applications.Building the right foundation to ongoing optimization and support. <br>In short, he tries to make the web a better place.</p>'+
				'<p>Tristan has worked with corporations, institutions and startups in a wide range of industries. Here are some of his current projects: type "<span class="success">projects</span>" to list Tristan\'s projects.</p>'+
				'<p>To contact Tristan White, type "<span class="success">contact</span>".</p><br>'+
			'</div>' +
		'</div>';
	},
	contact: function() {
		console.warn('Executing "contact" command');
		//console.log(this.clear());
		outputElement.innerHTML += '<p class="highlight">Contact command is currently not functioning. Try again later!</p>'+
                                   '<p>You can reach Tristan White on <a href="mailto:oliver.tristan@gmail.com">oliver.tristan@gmail.com</a> in the meantime.</p>';
	},
	strip: function() {
		console.warn('Executing strip.exe');
		outputElement.innerHTML += '<p>Running: <span class="highlight">strip.exe</span></p>' +
                                '<img src="strip.gif">';
	},
    walk: function() {
        console.warn('Executing walk.exe');
        outputElement.innerHTML += '<p>Running: <span class="highlight">walk.exe</span></p>' +
            '<img src="walk.gif">';
    },
    pony: function() {
        console.warn('Executing mylittlepony.exe');
        outputElement.innerHTML += '<p>Running: <span class="highlight">mylittlepony.exe</span></p>' +
            '<img src="my_little_pony.gif">';
    },
    rotate: function() {
        outputElement.innerHTML += '<p class="highlight">Rotating!</p>';
        console.warn('Executing rotate.exe');
        if (outputElement.classList.contains('rotate')) {
            outputElement.classList.remove('rotate');
        } else {
            outputElement.classList.add('rotate');
        }
    }
};


// Read User input
function readInput() {

	// Check if input is not empty
	if (inputElement.value === "" || inputElement.value === 'undefined') {
		throw new Error('No input detected');
	}

	// Add input to array of typed commands
	window.lastCommand.unshift(inputElement.value);

	// Write input it to termnial
	outputElement.innerHTML += '<p>' + inputElement.value.toLowerCase() + ' &#187;</p>';

	// If input is "help"
	if (inputElement.value.toLowerCase() === 'help' ||
		inputElement.value.toLowerCase() === 'ls' ||
		inputElement.value.toLowerCase() === 'man' ) {
		commands.help();
	}

	// If input is "clear" or "cls"
	else if (inputElement.value.toLowerCase() === 'cls' ||
			 inputElement.value.toLowerCase() === 'clear') {
		commands.clear();
		setTimeout(function() {
			commands.help_min();
		},300);
	}

	// If input is "clear" or "cls"
	else if (inputElement.value.toLowerCase() === 'reboot' ||
			 inputElement.value.toLowerCase() === 'restart' ||
			 inputElement.value.toLowerCase() === 'start'){
		commands.init();
	}

    // If input is "exit"
    else if (inputElement.value.toLowerCase() === 'exit' ||
        inputElement.value.toLowerCase() === 'shutdown' ||
        inputElement.value.toLowerCase() === 'stop' ||
        inputElement.value.toLowerCase() === 'halt') {
        commands.exit();
    }

	// If input is "projects"
	else if (inputElement.value.toLowerCase() === 'projects' ||
			 inputElement.value.toLowerCase() === 'prj' ||
			 inputElement.value.toLowerCase() === 'proj' ||
			 inputElement.value.toLowerCase() === 'project') {
		commands.projects();
	}

	// If input is "project -1"
	else if (inputElement.value.toLowerCase() === 'project -1' ||
			 inputElement.value.toLowerCase() === 'proj -1' ||
			 inputElement.value.toLowerCase() === 'proj -colordrop' ||
			 inputElement.value.toLowerCase() === 'prj -colordrop' ||
			 inputElement.value.toLowerCase() === 'prj -1') {
		commands.project_1();
	}

	// If input is "project -2"
	else if (inputElement.value.toLowerCase() === 'project -2' ||
			 inputElement.value.toLowerCase() === 'proj -2' ||
			 inputElement.value.toLowerCase() === 'proj -plaask' ||
			 inputElement.value.toLowerCase() === 'prj -plaask' ||
			 inputElement.value.toLowerCase() === 'prj -2') {
		commands.project_2();
	}

	// If input is "project -3"
	else if (inputElement.value.toLowerCase() === 'project -3' ||
			 inputElement.value.toLowerCase() === 'proj -3' ||
			 inputElement.value.toLowerCase() === 'proj -compression' ||
			 inputElement.value.toLowerCase() === 'proj -compressionbear' ||
			 inputElement.value.toLowerCase() === 'proj -compression-bear' ||
			 inputElement.value.toLowerCase() === 'proj -compression_bear' ||
			 inputElement.value.toLowerCase() === 'proj -bear' ||
             inputElement.value.toLowerCase() === 'prj -compression' ||
             inputElement.value.toLowerCase() === 'prj -compressionbear' ||
             inputElement.value.toLowerCase() === 'prj -compression-bear' ||
             inputElement.value.toLowerCase() === 'prj -compression_bear' ||
             inputElement.value.toLowerCase() === 'prj -bear' ||
			 inputElement.value.toLowerCase() === 'prj -3') {
		commands.project_3();
	}

	// If input is "project -4"
	else if (inputElement.value.toLowerCase() === 'project -4' ||
		 	 inputElement.value.toLowerCase() === 'proj -4' ||
		 	 inputElement.value.toLowerCase() === 'proj -gridder' ||
		 	 inputElement.value.toLowerCase() === 'prj -gridder' ||
			 inputElement.value.toLowerCase() === 'prj -4') {
		commands.project_4();
	}

	// If input is "project -5"
	else if (inputElement.value.toLowerCase() === 'project -5' ||
			 inputElement.value.toLowerCase() === 'proj -5' ||
			 inputElement.value.toLowerCase() === 'proj -muds' ||
			 inputElement.value.toLowerCase() === 'prj -muds' ||
			 inputElement.value.toLowerCase() === 'prj -5') {
		commands.project_5();
	}

	// If input is "project -6"
	else if (inputElement.value.toLowerCase() === 'project -6' ||
			 inputElement.value.toLowerCase() === 'proj -6' ||
			 inputElement.value.toLowerCase() === 'proj -wordboss' ||
			 inputElement.value.toLowerCase() === 'prj -wordboss' ||
			 inputElement.value.toLowerCase() === 'prj -6') {
		commands.project_6();
	}

	// If input is "project -7"
	else if (inputElement.value.toLowerCase() === 'project -7' ||
			 inputElement.value.toLowerCase() === 'proj -7' ||
			 inputElement.value.toLowerCase() === 'proj -emily' ||
			 inputElement.value.toLowerCase() === 'proj -emilywhite' ||
			 inputElement.value.toLowerCase() === 'proj -white' ||
			 inputElement.value.toLowerCase() === 'proj -emily-white' ||
			 inputElement.value.toLowerCase() === 'proj -emily_white' ||
             inputElement.value.toLowerCase() === 'prj -emily' ||
			 inputElement.value.toLowerCase() === 'prj -emilywhite' ||
			 inputElement.value.toLowerCase() === 'prj -white' ||
			 inputElement.value.toLowerCase() === 'prj -emily-white' ||
			 inputElement.value.toLowerCase() === 'prj -emily_white' ||
			 inputElement.value.toLowerCase() === 'prj -7') {
		commands.project_7();
	}

	// If input is "about"
	else if (inputElement.value.toLowerCase() === 'about' ||
			 inputElement.value.toLowerCase() === 'abt') {
		commands.about();
	}

	// If input is "contact"
	else if (inputElement.value.toLowerCase() === 'contact' ||
			 inputElement.value.toLowerCase() === 'message' ||
			 inputElement.value.toLowerCase() === 'msg' ||
			 inputElement.value.toLowerCase() === 'mail') {
		commands.contact();
	}

    // If input is "strip"
    else if (inputElement.value.toLowerCase() === 'strip.exe' ||
			 inputElement.value.toLowerCase() === 'stripper.exe') {
        commands.strip();
    }

    // If input is "walk"
    else if (inputElement.value.toLowerCase() === 'walk.exe') {
        commands.walk();
    }

    // If input is "mylittlepony.exe"
    else if (inputElement.value.toLowerCase() === 'mylittlepony.exe' ||
             inputElement.value.toLowerCase() === 'pony.exe') {
        commands.pony();
    }

    // If input is "rotate"
    else if (inputElement.value.toLowerCase() === 'rotate') {
        commands.rotate();
    }

	// If input is not recognized
	else {
		commands.error();
	}

	// Clear input
	inputElement.value = "";

	// Scroll to bottom
	outputElement.scrollTop = outputElement.scrollHeight;
    setTimeout(function() {
        outputElement.scrollTop = outputElement.scrollHeight;
    },150);
}


// Keybindings
document.addEventListener('keydown', function(e) {

    inputElement.focus();

    // Cycle previous commands up
    if(e.keyCode === 38) {
        e.preventDefault();
        if (!Array.isArray(window.lastCommand) || !window.lastCommand.length) {
            throw new Error('Command input is empty');
        }
        nextCommand++;
        if (nextCommand > window.lastCommand.length-1) {
            nextCommand = 0;
        }
        inputElement.value = window.lastCommand[nextCommand];
    }

    // Cycle previous commands down
    if(e.keyCode === 40) {
        e.preventDefault();
        if (!Array.isArray(window.lastCommand) || !window.lastCommand.length) {
            throw new Error('Command input is empty');
        }
        nextCommand--;
        if (nextCommand < 0) {
            nextCommand = window.lastCommand.length-1;
        }
        inputElement.value = window.lastCommand[nextCommand];
    }

    // When Enter is hit
	if(e.keyCode === 13) {
        e.preventDefault();
		readInput();
        nextCommand = -1;
	}

	// Clear on cmd+k / ctrl+k
    if(e.ctrlKey === true && e.keyCode === 75 || e.metaKey === true && e.keyCode === 75) {
        e.preventDefault();
        commands.clear();
        setTimeout(function() {
            commands.help_min();
        },300);
    }
});

// Initialize app
commands.init();
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console