Skip to content

Instantly share code, notes, and snippets.

@zhuqling
Forked from anonymous/index.html
Created January 12, 2016 01:36
Show Gist options
  • Save zhuqling/fda0fe4be2226d1962fc to your computer and use it in GitHub Desktop.
Save zhuqling/fda0fe4be2226d1962fc to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/pitiqu
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
body {
font-family: 'fira-sans', sans-serif;
}
span.nowrap {
white-space: nowrap;
}
a {
color: #4183c4;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:hover {
text-decoration: none;
cursor: pointer;
}
a.button {
-webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
-webkit-font-smoothing: antialiased;
-webkit-transition-delay: 0s;
-webkit-transition-duration: 0.1s;
-webkit-transition-property: all;
-webkit-transition-timing-function: ease;
background-attachment: scroll;
background-clip: border-box;
background-color: #28AFFA;
background-image: none;
background-origin: padding-box;
background-size: auto;
border-bottom-color: #ffffff;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: #ffffff;
border-left-style: none;
border-left-width: 0px;
border-right-color: #ffffff;
border-right-style: none;
border-right-width: 0px;
border-top-color: #ffffff;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-top-style: none;
border-top-width: 0px;
box-sizing: border-box;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 600;
height: 34px;
line-height: 14px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-width: 140px;
padding-bottom: 10px;
padding-left: 16px;
padding-right: 16px;
padding-top: 10px;
position: relative;
text-align: center;
text-decoration: none;
text-rendering: optimizelegibility;
transition-delay: 0s;
transition-duration: 0.1s;
transition-property: all;
transition-timing-function: ease;
vertical-align: baseline;
}
span.red,
span.red a {
color: #dc6566;
}
span.red:hover,
span.red a:hover {
color: #e58f8f;
}
span.orange,
span.orange a {
color: #eb9d5c;
}
span.orange:hover,
span.orange a:hover {
color: #f1b889;
}
span.yellow,
span.yellow a {
color: #ebcd61;
}
span.yellow:hover,
span.yellow a:hover {
color: #f1db8e;
}
span.green,
span.green a {
color: #c5d064;
}
span.green:hover,
span.green a:hover {
color: #d4dc8b;
}
span.aqua,
span.aqua a {
color: #82cabf;
}
span.aqua:hover,
span.aqua a:hover {
color: #a6d9d1;
}
span.blue,
span.blue a {
color: #8db7df;
}
span.blue:hover,
span.blue a:hover {
color: #b5d0ea;
}
span.purple,
span.purple a {
color: #ceacde;
}
span.purple:hover,
span.purple a:hover {
color: #e4d0ed;
}
/* LAYOUT */
section {
padding: 100px 20px;
overflow: hidden;
}
@media (max-width: 767px) {
section {
padding: 50px 20px;
}
}
section img {
max-width: 100%;
}
section p.description {
/*font-family: 'Merriweather', serif;*/
font-family: 'Helvetica Neue';
text-align: center;
font-weight: 100;
font-size: 42px;
margin-bottom: 50px;
color: #999;
}
@media (max-width: 767px) {
section p.description {
font-size: 1.3em;
max-width: 100%;
}
}
section#header {
padding-top: 30px;
color: white;
text-align: center;
height: 700px;
background-color: #151517;
background-size: cover;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<section id="header">
<div class="content">
<h1 id="title" style = "margin-left:-15px;">
<div style = "font-family:fira-sans, sans-serif; text-align:center; line-height:90px; font-size:80px; font-weight:bold; ">Tonic</div>
</h1>
<p class="description">
<span class="nowrap">The
<span id = "tone" class = "red">
<a id = "callout" href="#time-traveling">data visualizing</a><span id = "cursor">_</span>
</span>
repl for node
</span>
</p>
<a class="button" href="/new">Get Started</a>
<div class="screenshot hero" style = "max-width:100%;">
</div>
</div>
</section>
<script id="jsbin-javascript">
var start = new Date();
var callout = document.getElementById('callout');
var cursor = document.getElementById("cursor");
var tone = document.getElementById("tone");
var messages = [ {text:"data visualizing", class:"purple", href:"#data-visualizing"}, { text:"npm-connected", class:"yellow", href:"#npm-connected" }, { text:"time traveling", class:"red", href:"#time-traveling" },{text:"async-friendly", class:"aqua", href:"#async-friendly"}];
var typing = [136, 161, 139, 56, 96, 128, 159, 56, 96, 48, 113, 64, 183, 100, 140, 20, 88, 80];
var speeds = [];
for (var i = 0; i < typing.length; ++i)
if (i === 0)
speeds[i] = typing[i];
else
speeds[i] = speeds[i - 1] + typing[i];
blink(0, 0);
function blink(index, time)
{
cursor.style.opacity = time % 1000 > 500 ? 1 : 0;
if (time > 3000)
backspace(index, 0);
else
setTimeout(blink, 10, index, time + 10);
}
function backspace(index, time)
{
var length = Math.floor(messages[index].text.length - time / 70);
cursor.style.opacity = 1;
callout.textContent = messages[index].text.substr(0, length);
callout.innerText = messages[index].text.substr(0, length);
callout.href = messages[index].href;
if (length === 0)
setTimeout(type, 10, (index + 1) % messages.length, 0);
else
setTimeout(backspace, 10, index, time + 10);
}
function type(index, time)
{
var length = 0;
while (time > speeds[length])
length++;
cursor.style.opacity = 1;
tone.className = messages[index].class;
callout.textContent = messages[index].text.substr(0, length);
callout.innerText = messages[index].text.substr(0, length);
callout.href = messages[index].href;
if (length === messages[index].text.length + 1)
setTimeout(blink, 10, index, 0);
else
setTimeout(type, 10, index, time + 10);
}
</script>
<script id="jsbin-source-css" type="text/css">body {
font-family: 'fira-sans', sans-serif;
}
span.nowrap {
white-space: nowrap;
}
a {
color: #4183c4;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:hover {
text-decoration: none;
cursor: pointer;
}
a.button {
-webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
-webkit-font-smoothing: antialiased;
-webkit-transition-delay: 0s;
-webkit-transition-duration: 0.1s;
-webkit-transition-property: all;
-webkit-transition-timing-function: ease;
background-attachment: scroll;
background-clip: border-box;
background-color: #28AFFA;
background-image: none;
background-origin: padding-box;
background-size: auto;
border-bottom-color: #ffffff;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: #ffffff;
border-left-style: none;
border-left-width: 0px;
border-right-color: #ffffff;
border-right-style: none;
border-right-width: 0px;
border-top-color: #ffffff;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-top-style: none;
border-top-width: 0px;
box-sizing: border-box;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 600;
height: 34px;
line-height: 14px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-width: 140px;
padding-bottom: 10px;
padding-left: 16px;
padding-right: 16px;
padding-top: 10px;
position: relative;
text-align: center;
text-decoration: none;
text-rendering: optimizelegibility;
transition-delay: 0s;
transition-duration: 0.1s;
transition-property: all;
transition-timing-function: ease;
vertical-align: baseline;
}
span.red,
span.red a {
color: #dc6566;
}
span.red:hover,
span.red a:hover {
color: #e58f8f;
}
span.orange,
span.orange a {
color: #eb9d5c;
}
span.orange:hover,
span.orange a:hover {
color: #f1b889;
}
span.yellow,
span.yellow a {
color: #ebcd61;
}
span.yellow:hover,
span.yellow a:hover {
color: #f1db8e;
}
span.green,
span.green a {
color: #c5d064;
}
span.green:hover,
span.green a:hover {
color: #d4dc8b;
}
span.aqua,
span.aqua a {
color: #82cabf;
}
span.aqua:hover,
span.aqua a:hover {
color: #a6d9d1;
}
span.blue,
span.blue a {
color: #8db7df;
}
span.blue:hover,
span.blue a:hover {
color: #b5d0ea;
}
span.purple,
span.purple a {
color: #ceacde;
}
span.purple:hover,
span.purple a:hover {
color: #e4d0ed;
}
/* LAYOUT */
section {
padding: 100px 20px;
overflow: hidden;
}
@media (max-width: 767px) {
section {
padding: 50px 20px;
}
}
section img {
max-width: 100%;
}
section p.description {
/*font-family: 'Merriweather', serif;*/
font-family: 'Helvetica Neue';
text-align: center;
font-weight: 100;
font-size: 42px;
margin-bottom: 50px;
color: #999;
}
@media (max-width: 767px) {
section p.description {
font-size: 1.3em;
max-width: 100%;
}
}
section#header {
padding-top: 30px;
color: white;
text-align: center;
height: 700px;
background-color: #151517;
background-size: cover;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1);
}</script>
<script id="jsbin-source-javascript" type="text/javascript">
var start = new Date();
var callout = document.getElementById('callout');
var cursor = document.getElementById("cursor");
var tone = document.getElementById("tone");
var messages = [ {text:"data visualizing", class:"purple", href:"#data-visualizing"}, { text:"npm-connected", class:"yellow", href:"#npm-connected" }, { text:"time traveling", class:"red", href:"#time-traveling" },{text:"async-friendly", class:"aqua", href:"#async-friendly"}];
var typing = [136, 161, 139, 56, 96, 128, 159, 56, 96, 48, 113, 64, 183, 100, 140, 20, 88, 80];
var speeds = [];
for (var i = 0; i < typing.length; ++i)
if (i === 0)
speeds[i] = typing[i];
else
speeds[i] = speeds[i - 1] + typing[i];
blink(0, 0);
function blink(index, time)
{
cursor.style.opacity = time % 1000 > 500 ? 1 : 0;
if (time > 3000)
backspace(index, 0);
else
setTimeout(blink, 10, index, time + 10);
}
function backspace(index, time)
{
var length = Math.floor(messages[index].text.length - time / 70);
cursor.style.opacity = 1;
callout.textContent = messages[index].text.substr(0, length);
callout.innerText = messages[index].text.substr(0, length);
callout.href = messages[index].href;
if (length === 0)
setTimeout(type, 10, (index + 1) % messages.length, 0);
else
setTimeout(backspace, 10, index, time + 10);
}
function type(index, time)
{
var length = 0;
while (time > speeds[length])
length++;
cursor.style.opacity = 1;
tone.className = messages[index].class;
callout.textContent = messages[index].text.substr(0, length);
callout.innerText = messages[index].text.substr(0, length);
callout.href = messages[index].href;
if (length === messages[index].text.length + 1)
setTimeout(blink, 10, index, 0);
else
setTimeout(type, 10, index, time + 10);
}</script></body>
</html>
body {
font-family: 'fira-sans', sans-serif;
}
span.nowrap {
white-space: nowrap;
}
a {
color: #4183c4;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:hover {
text-decoration: none;
cursor: pointer;
}
a.button {
-webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
-webkit-font-smoothing: antialiased;
-webkit-transition-delay: 0s;
-webkit-transition-duration: 0.1s;
-webkit-transition-property: all;
-webkit-transition-timing-function: ease;
background-attachment: scroll;
background-clip: border-box;
background-color: #28AFFA;
background-image: none;
background-origin: padding-box;
background-size: auto;
border-bottom-color: #ffffff;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: #ffffff;
border-left-style: none;
border-left-width: 0px;
border-right-color: #ffffff;
border-right-style: none;
border-right-width: 0px;
border-top-color: #ffffff;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-top-style: none;
border-top-width: 0px;
box-sizing: border-box;
color: #ffffff;
cursor: pointer;
display: inline-block;
font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
font-variant: normal;
font-weight: 600;
height: 34px;
line-height: 14px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-width: 140px;
padding-bottom: 10px;
padding-left: 16px;
padding-right: 16px;
padding-top: 10px;
position: relative;
text-align: center;
text-decoration: none;
text-rendering: optimizelegibility;
transition-delay: 0s;
transition-duration: 0.1s;
transition-property: all;
transition-timing-function: ease;
vertical-align: baseline;
}
span.red,
span.red a {
color: #dc6566;
}
span.red:hover,
span.red a:hover {
color: #e58f8f;
}
span.orange,
span.orange a {
color: #eb9d5c;
}
span.orange:hover,
span.orange a:hover {
color: #f1b889;
}
span.yellow,
span.yellow a {
color: #ebcd61;
}
span.yellow:hover,
span.yellow a:hover {
color: #f1db8e;
}
span.green,
span.green a {
color: #c5d064;
}
span.green:hover,
span.green a:hover {
color: #d4dc8b;
}
span.aqua,
span.aqua a {
color: #82cabf;
}
span.aqua:hover,
span.aqua a:hover {
color: #a6d9d1;
}
span.blue,
span.blue a {
color: #8db7df;
}
span.blue:hover,
span.blue a:hover {
color: #b5d0ea;
}
span.purple,
span.purple a {
color: #ceacde;
}
span.purple:hover,
span.purple a:hover {
color: #e4d0ed;
}
/* LAYOUT */
section {
padding: 100px 20px;
overflow: hidden;
}
@media (max-width: 767px) {
section {
padding: 50px 20px;
}
}
section img {
max-width: 100%;
}
section p.description {
/*font-family: 'Merriweather', serif;*/
font-family: 'Helvetica Neue';
text-align: center;
font-weight: 100;
font-size: 42px;
margin-bottom: 50px;
color: #999;
}
@media (max-width: 767px) {
section p.description {
font-size: 1.3em;
max-width: 100%;
}
}
section#header {
padding-top: 30px;
color: white;
text-align: center;
height: 700px;
background-color: #151517;
background-size: cover;
box-shadow: 0px 1px 1px 1px rgba(0, 0, 0, 0.1);
}
var start = new Date();
var callout = document.getElementById('callout');
var cursor = document.getElementById("cursor");
var tone = document.getElementById("tone");
var messages = [ {text:"data visualizing", class:"purple", href:"#data-visualizing"}, { text:"npm-connected", class:"yellow", href:"#npm-connected" }, { text:"time traveling", class:"red", href:"#time-traveling" },{text:"async-friendly", class:"aqua", href:"#async-friendly"}];
var typing = [136, 161, 139, 56, 96, 128, 159, 56, 96, 48, 113, 64, 183, 100, 140, 20, 88, 80];
var speeds = [];
for (var i = 0; i < typing.length; ++i)
if (i === 0)
speeds[i] = typing[i];
else
speeds[i] = speeds[i - 1] + typing[i];
blink(0, 0);
function blink(index, time)
{
cursor.style.opacity = time % 1000 > 500 ? 1 : 0;
if (time > 3000)
backspace(index, 0);
else
setTimeout(blink, 10, index, time + 10);
}
function backspace(index, time)
{
var length = Math.floor(messages[index].text.length - time / 70);
cursor.style.opacity = 1;
callout.textContent = messages[index].text.substr(0, length);
callout.innerText = messages[index].text.substr(0, length);
callout.href = messages[index].href;
if (length === 0)
setTimeout(type, 10, (index + 1) % messages.length, 0);
else
setTimeout(backspace, 10, index, time + 10);
}
function type(index, time)
{
var length = 0;
while (time > speeds[length])
length++;
cursor.style.opacity = 1;
tone.className = messages[index].class;
callout.textContent = messages[index].text.substr(0, length);
callout.innerText = messages[index].text.substr(0, length);
callout.href = messages[index].href;
if (length === messages[index].text.length + 1)
setTimeout(blink, 10, index, 0);
else
setTimeout(type, 10, index, time + 10);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment