"mac terminal"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/marcbizal/pen/VLKoam?limit=all&page=5&q=mac" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'> <style class="cp-pen-styles">html, body { height: 100%; overflow: hidden; } body { background: #3a7bd5; background-image: -webkit-radial-gradient(top, circle cover, #00d2ff 0%, #3a7bd5 80%); display: flex; justify-content: center; align-items: center; } * { box-sizing: border-box; } textarea, input, button { outline: none; } .window-button, .window .buttons .close, .window .buttons .minimize, .window .buttons .maximize { padding: 0; margin: 0; margin-right: 4px; width: 12px; height: 12px; background-color: gainsboro; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 6px; color: rgba(0, 0, 0, 0.5); } .window { animation: bounceIn 1s ease-in-out; width: 640px; } .window .handle { height: 22px; background: linear-gradient(0deg, #d8d8d8, #ececec); border-top: 1px solid white; border-bottom: 1px solid #b3b3b3; border-top-left-radius: 5px; border-top-right-radius: 5px; color: rgba(0, 0, 0, 0.7); font-family: Helvetica, sans-serif; font-size: 13px; line-height: 22px; text-align: center; } .window .buttons { position: absolute; float: left; margin: 0 8px; } .window .buttons .close { background-color: #ff6159; } .window .buttons .minimize { background-color: #ffbf2f; } .window .buttons .maximize { background-color: #25cc3e; } .window .terminal { padding: 4px; background-color: black; opacity: 0.7; height: 218px; color: white; font-family: 'Source Code Pro', monospace; font-weight: 200; font-size: 14px; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; overflow-y: auto; } .window .terminal::after { content: "|"; animation: blink 2s steps(1) infinite; } .prompt { color: #bde371; } .path { color: #5ed7ff; } @keyframes blink { 50% { color: transparent; } } @keyframes bounceIn { 0% { transform: translateY(-1000px); } 60% { transform: translateY(200px); } 100% { transform: translateY(0px); } } </style></head><body> <link href='https://fonts.googleapis.com/css?family=Source+Code+Pro:200' rel='stylesheet' type='text/css'> <div class="container"> <div class="window"> <div class="handle"> <div class="buttons"> <button class="close"> </button> <button class="minimize"> </button> <button class="maximize"> </button> </div> <span class="title"></span> </div> <div class="terminal"></div> </div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script >/* // Made with <3 by Marcus Bizal // github.com/marcbizal // linkedin.com/in/marcbizal */ $(document).ready(function() { "use strict"; // UTILITY function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min)) + min; } // END UTILITY // COMMANDS function clear() { terminal.text(""); } function help() { terminal.append("There is no help... MUAHAHAHAHA. >:D\n"); } function echo(args) { var str = args.join(" "); terminal.append(str + "\n"); } function fortune() { var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://cdn.rawgit.com/bmc/fortunes/master/fortunes', false); xhr.send(null); if (xhr.status === 200) { var fortunes = xhr.responseText.split("%"); var fortune = fortunes[getRandomInt(0, fortunes.length)].trim(); terminal.append(fortune + "\n"); } } // END COMMANDS var title = $(".title"); var terminal = $(".terminal"); var prompt = "➜"; var path = "~"; var commandHistory = []; var historyIndex = 0; var command = ""; var commands = [{ "name": "clear", "function": clear }, { "name": "help", "function": help }, { "name": "fortune", "function": fortune }, { "name": "echo", "function": echo }]; function processCommand() { var isValid = false; // Create args list by splitting the command // by space characters and then shift off the // actual command. var args = command.split(" "); var cmd = args[0]; args.shift(); // Iterate through the available commands to find a match. // Then call that command and pass in any arguments. for (var i = 0; i < commands.length; i++) {if (window.CP.shouldStopExecution(1)){break;} if (cmd === commands[i].name) { commands[i].function(args); isValid = true; break; } } window.CP.exitedLoop(1); // No match was found... if (!isValid) { terminal.append("zsh: command not found: " + command + "\n"); } // Add to command history and clean up. commandHistory.push(command); historyIndex = commandHistory.length; command = ""; } function displayPrompt() { terminal.append("<span class=\"prompt\">" + prompt + "</span> "); terminal.append("<span class=\"path\">" + path + "</span> "); } // Delete n number of characters from the end of our output function erase(n) { command = command.slice(0, -n); terminal.html(terminal.html().slice(0, -n)); } function clearCommand() { if (command.length > 0) { erase(command.length); } } function appendCommand(str) { terminal.append(str); command += str; } /* // Keypress doesn't catch special keys, // so we catch the backspace here and // prevent it from navigating to the previous // page. We also handle arrow keys for command history. */ $(document).keydown(function(e) { e = e || window.event; var keyCode = typeof e.which === "number" ? e.which : e.keyCode; // BACKSPACE if (keyCode === 8 && e.target.tagName !== "INPUT" && e.target.tagName !== "TEXTAREA") { e.preventDefault(); if (command !== "") { erase(1); } } // UP or DOWN if (keyCode === 38 || keyCode === 40) { // Move up or down the history if (keyCode === 38) { // UP historyIndex--; if (historyIndex < 0) { historyIndex++; } } else if (keyCode === 40) { // DOWN historyIndex++; if (historyIndex > commandHistory.length - 1) { historyIndex--; } } // Get command var cmd = commandHistory[historyIndex]; if (cmd !== undefined) { clearCommand(); appendCommand(cmd); } } }); $(document).keypress(function(e) { // Make sure we get the right event e = e || window.event; var keyCode = typeof e.which === "number" ? e.which : e.keyCode; // Which key was pressed? switch (keyCode) { // ENTER case 13: { terminal.append("\n"); processCommand(); displayPrompt(); break; } default: { appendCommand(String.fromCharCode(keyCode)); } } }); // Set the window title title.text("1. marc@mbp: ~ (zsh)"); // Get the date for our fake last-login var date = new Date().toString(); date = date.substr(0, date.indexOf("GMT") - 1); // Display last-login and promt terminal.append("Last login: " + date + " on ttys000\n"); displayPrompt(); }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: