Skip to content

Commit

Permalink
Termynal
Browse files Browse the repository at this point in the history
  • Loading branch information
Keiron Pizzey committed Sep 11, 2020
1 parent 6739032 commit 3d953bc
Show file tree
Hide file tree
Showing 4 changed files with 460 additions and 1 deletion.
51 changes: 50 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1,50 @@
Hello, World!
<!doctype html>
<html lang="en">
<head>
<title>termynal.js example</title>
<meta charset="utf-8">
<!-- include the termynal stylesheet -->
<link rel="stylesheet" href="termynal.css">
<!-- some custom styles for the page -->
<link href="https://fonts.googleapis.com/css?family=Fira+Mono">
<style>
body {
padding: 0; margin: 0;
background: #1a1e24;
width: 100%;
min-height: 100vh;
display: -webkit-box; display: -ms-flexbox; display: flex;
-webkit-box-align: center; -ms-flex-align: center; align-items: center;
-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
</style>
</head>
<body>
<!-- the termynal container -->
<div id="termynal" data-termynal data-ty-typeDelay="40" data-ty-lineDelay="800">
<span data-ty="input" data-ty-prompt="~/dev/site # ">whoami</span>
<span data-ty>Keiron Pizzey</span>
<span data-ty="input" data-ty-prompt="~/dev/site # ">echo $EMAIL</span>
<span data-ty>[email protected]</span>
<span data-ty="input" data-ty-prompt="~/dev/site # ">cat personal_details.txt | grep CAREER | awk -F= '{print $2}'</span>
<span data-ty>Senior Data Scientist and Tech Lead. Previously PhD in experimental atomic physics.</span>
<span data-ty="input" data-ty-prompt="~/dev/site # ">python</span>
<span data-ty>Python 3.7.6 (default, Jan 8 2020, 13:42:34)</span>
<span data-ty="input" data-ty-prompt=">>> ">import skills</span>
<span data-ty="input" data-ty-prompt=">>> ">for skill in skills:</span>
<span data-ty="input" data-ty-prompt="... ">&nbsp;&nbsp;&nbsp;&nbsp;print(skill)</span>
<span data-ty>Data science</span>
<span data-ty>Machine learning</span>
<span data-ty>Data engineering and architecture</span>
<span data-ty>Rapid prototyping and innovation</span>
<span data-ty>DevOps</span>
<span data-ty>AWS</span>
<span data-ty="input" data-ty-prompt=">>> ">exit()</span>
<!-- <span data-ty="input" data-ty-prompt="~/dev/site # ">echo $EMAIL</span> -->
</div>

<!-- include and initialise termynal.js -->
<script src="termynal.js" data-termynal-container="#termynal"></script>
</body>
</html>
112 changes: 112 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
@import url('https://fonts.googleapis.com/css?family=Ubuntu');
@import url('https://fonts.googleapis.com/css?family=Ubuntu+Mono');
body {
background: linear-gradient(45deg, #57003f 0%,#f57453 100%);
font-family: Ubuntu;
}
#container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#terminal {
width: 70vw;
height: 65vh;
box-shadow: 2px 4px 10px rgba(0,0,0,0.5);
}
#terminal__bar {
display: flex;
width: 100%;
height: 30px;
align-items: center;
padding: 0 8px;
box-sizing: border-box;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: linear-gradient(#504b45 0%,#3c3b37 100%);
}
#bar__buttons {
display: flex;
align-items: center;
}
.bar__button {
display: flex;
justify-content: center;
align-items: center;
padding: 0;
margin-right: 5px;
font-size: 8px;
height: 12px;
width: 12px;
box-sizing: border-box;
border: none;
border-radius: 100%;
background: linear-gradient(#7d7871 0%, #595953 100%);
text-shadow: 0px 1px 0px rgba(255,255,255,0.2);
box-shadow: 0px 0px 1px 0px #41403A, 0px 1px 1px 0px #474642;
}
.bar__button:hover {
cursor: pointer;
}
.bar__button:focus {
outline: none;
}
#bar__button--exit {
background: linear-gradient(#f37458 0%, #de4c12 100%);
background-clip: padding-box;
}
#bar__user {
color: #d5d0ce;
margin-left: 6px;
font-size: 14px;
line-height: 15px;
}
#terminal__body {
background: rgba(56, 4, 40, 0.9);
font-family: 'Ubuntu Mono';
height: calc(100% - 30px);
padding-top: 2px;
margin-top: -1px;
}
#terminal__prompt {
display: flex;
}
#terminal__prompt--user {
color: #7eda28;
}
#terminal__prompt--location {
color: #4878c0;
}
#terminal__prompt--bling {
color: #dddddd;
}
#terminal__prompt--cursor {
display: block;
height: 17px;
width: 8px;
margin-left: 9px;
animation: blink 1200ms linear infinite;
}
@keyframes blink {
0% {
background: #ffffff;
}
49% {
background: #ffffff;
}
60% {
background: transparent;
}
99% {
background: transparent;
} 100% {
background: #ffffff;
}
}
@media (max-width: 600px) {
#terminal {
max-height: 90%;
width: 90%;
}
}
101 changes: 101 additions & 0 deletions termynal.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
/**
* termynal.js
*
* @author Ines Montani <[email protected]>
* @version 0.0.1
* @license MIT
*/

:root {
--color-bg: #252a33;
--color-text: #eee;
--color-text-subtle: #a2a2a2;
}

[data-termynal] {
width: 750px;
max-width: 100%;
background: var(--color-bg);
color: var(--color-text);
font-size: 18px;
font-family: 'Fira Mono', Consolas, Menlo, Monaco, 'Courier New', Courier, monospace;
border-radius: 4px;
padding: 75px 45px 35px;
position: relative;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

[data-termynal]:before {
content: '';
position: absolute;
top: 15px;
left: 15px;
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
/* A little hack to display the window buttons in one pseudo element. */
background: #d9515d;
-webkit-box-shadow: 25px 0 0 #f4c025, 50px 0 0 #3ec930;
box-shadow: 25px 0 0 #f4c025, 50px 0 0 #3ec930;
}

[data-termynal]:after {
content: 'bash';
position: absolute;
color: var(--color-text-subtle);
top: 5px;
left: 0;
width: 100%;
text-align: center;
}

[data-ty] {
display: block;
line-height: 2;
}

[data-ty]:before {
/* Set up defaults and ensure empty lines are displayed. */
content: '';
display: inline-block;
vertical-align: middle;
}

[data-ty="input"]:before,
[data-ty-prompt]:before {
margin-right: 0.75em;
color: var(--color-text-subtle);
}

[data-ty="input"]:before {
content: '$';
}

[data-ty][data-ty-prompt]:before {
content: attr(data-ty-prompt);
}

[data-ty-cursor]:after {
content: attr(data-ty-cursor);
font-family: monospace;
margin-left: 0.5em;
-webkit-animation: blink 1s infinite;
animation: blink 1s infinite;
}


/* Cursor animation */

@-webkit-keyframes blink {
50% {
opacity: 0;
}
}

@keyframes blink {
50% {
opacity: 0;
}
}
Loading

0 comments on commit 3d953bc

Please sign in to comment.