-
-
Save zhuqling/fda0fe4be2226d1962fc to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/pitiqu
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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