Skip to content

Commit 508068e

Browse files
rickyrauchrickyrauch
committed
fixes
1 parent c65e221 commit 508068e

File tree

6 files changed

+224
-30
lines changed

6 files changed

+224
-30
lines changed

‎dist/css/app.css

Lines changed: 2 additions & 2 deletions
Large diffs are not rendered by default.

‎dist/js/app.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎html/index.html

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,9 @@
99

1010
<title>JSON Web Tokens - jwt.io</title>
1111

12-
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
13-
<link href='http://fonts.googleapis.com/css?family=Source+Code+Pro:400,500,600|Roboto:400,100,300,500,700' rel='stylesheet' type='text/css'>
12+
<script type="text/javascript" src="//use.typekit.net/iws6ohy.js"></script>
13+
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
14+
1415
<!-- build:css dist/css/app.css -->
1516
<link rel="stylesheet" href="vendor/codemirror/lib/codemirror.css" type="text/css" media="all" />
1617
<link rel="stylesheet" href="vendor/codemirror/addon/lint/lint.css" type="text/css" media="all" />
@@ -46,7 +47,7 @@
4647
<span class="icon-bar"></span>
4748
<span class="icon-bar"></span>
4849
</button>
49-
<a class="navbar-brand" href="#"><img src="https://cloudup.com/c48DvUqJ1vt+" style="width: 30px;margin-right: 10px;margin-top: -4px;">JSON Web Token</a>
50+
<a class="navbar-brand" href="#"><img src="https://cloudup.com/cRuaXpjPeyM+" style="width: 28px;margin-right: 10px;margin-top: -4px;">JSON Web Token</a>
5051
</div>
5152

5253
<!-- Collect the nav links, forms, and other content for toggling -->
@@ -70,11 +71,23 @@
7071

7172

7273
<!-- Begin page content -->
73-
<div class="container">
74-
<div class="page-header">
75-
<h1>What is it?</h1>
74+
75+
<div class="banner-jwt">
76+
<canvas></canvas>
77+
<div class="container">
78+
<p>JSON Web Token (JWT) is a compact URL-safe means of representing claims to be transferred between two parties. The claims in a JWT are encoded as a JSON object that is digitally signed using JSON Web Signature (JWS). <a href="http://tools.ietf.org/html/draft-ietf-oauth-json-web-token">IETF</a></p>
79+
80+
81+
7682
</div>
77-
<p class="lead">JSON Web Token (JWT) is a compact URL-safe means of representing claims to be transferred between two parties. The claims in a JWT are encoded as a JSON object that is digitally signed using JSON Web Signature (JWS). - <a href="http://tools.ietf.org/html/draft-ietf-oauth-json-web-token">IETF</a>.</p>
83+
</div>
84+
85+
86+
<div class="container">
87+
88+
89+
90+
7891
<div class="page-header">
7992
<a name="debugger"></a>
8093
<h1 id="debugger">Debugger</h1>

‎index.html

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,10 @@
99

1010
<title>JSON Web Tokens - jwt.io</title>
1111

12-
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
13-
<link href="http://fonts.googleapis.com/css?family=Source+Code+Pro:400,500,600|Roboto:400,100,300,500,700" rel="stylesheet" type="text/css">
14-
<link rel="stylesheet" href="dist/css/app.css" media="all"/>
12+
<script type="text/javascript" src="//use.typekit.net/iws6ohy.js"></script>
13+
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
14+
15+
<link rel="stylesheet" href="dist/css/app.css" media="all">
1516

1617
<!-- Bootstrap core CSS -->
1718

@@ -41,7 +42,7 @@
4142
<span class="icon-bar"></span>
4243
<span class="icon-bar"></span>
4344
</button>
44-
<a class="navbar-brand" href="#"><img src="https://cloudup.com/c48DvUqJ1vt+" style="width: 30px;margin-right: 10px;margin-top: -4px">JSON Web Token</a>
45+
<a class="navbar-brand" href="#"><img src="https://cloudup.com/cRuaXpjPeyM+" style="width: 28px;margin-right: 10px;margin-top: -4px">JSON Web Token</a>
4546
</div>
4647

4748
<!-- Collect the nav links, forms, and other content for toggling -->
@@ -65,11 +66,23 @@
6566

6667

6768
<!-- Begin page content -->
68-
<div class="container">
69-
<div class="page-header">
70-
<h1>What is it?</h1>
69+
70+
<div class="banner-jwt">
71+
<canvas></canvas>
72+
<div class="container">
73+
<p>JSON Web Token (JWT) is a compact URL-safe means of representing claims to be transferred between two parties. The claims in a JWT are encoded as a JSON object that is digitally signed using JSON Web Signature (JWS). <a href="http://tools.ietf.org/html/draft-ietf-oauth-json-web-token">IETF</a></p>
74+
75+
76+
7177
</div>
72-
<p class="lead">JSON Web Token (JWT) is a compact URL-safe means of representing claims to be transferred between two parties. The claims in a JWT are encoded as a JSON object that is digitally signed using JSON Web Signature (JWS). - <a href="http://tools.ietf.org/html/draft-ietf-oauth-json-web-token">IETF</a>.</p>
78+
</div>
79+
80+
81+
<div class="container">
82+
83+
84+
85+
7386
<div class="page-header">
7487
<a name="debugger"></a>
7588
<h1 id="debugger">Debugger</h1>

‎js/app.js

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -197,3 +197,123 @@
197197
});
198198

199199
}());
200+
201+
202+
//TIMESTAMP
203+
(function() {
204+
setInterval(function() {
205+
var now, timestamp;
206+
timestamp = new Date(1987, 5, 30);
207+
now = new Date();
208+
return $('#time').text(((now - timestamp) / 1000).toFixed(0));
209+
}, 1000);
210+
}).call(this);
211+
212+
$(window).on('resize', function(){
213+
reinit();
214+
});
215+
216+
//CANVAS
217+
$(function(){
218+
var canvas = document.querySelector('canvas'),
219+
ctx = canvas.getContext('2d'),
220+
color = '#000000';
221+
canvas.width = window.innerWidth;
222+
canvas.height = window.innerHeight;
223+
canvas.style.display = 'block';
224+
ctx.fillStyle = color;
225+
ctx.lineWidth = .1;
226+
ctx.strokeStyle = color;
227+
228+
var mousePosition = {
229+
x: 30 * canvas.width / 100,
230+
y: 30 * canvas.height / 100
231+
};
232+
233+
var dots = {
234+
nb: 300,
235+
distance: 100,
236+
d_radius: 150,
237+
array: []
238+
};
239+
240+
function Dot(){
241+
this.x = Math.random() * canvas.width;
242+
this.y = Math.random() * canvas.height;
243+
244+
this.vx = -.5 + Math.random();
245+
this.vy = -.5 + Math.random();
246+
247+
this.radius = Math.random();
248+
}
249+
250+
Dot.prototype = {
251+
create: function(){
252+
ctx.beginPath();
253+
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
254+
ctx.fill();
255+
},
256+
257+
animate: function(){
258+
for(i = 0; i < dots.nb; i++){
259+
260+
var dot = dots.array[i];
261+
262+
if(dot.y < 0 || dot.y > canvas.height){
263+
dot.vx = dot.vx;
264+
dot.vy = - dot.vy;
265+
}
266+
else if(dot.x < 0 || dot.x > canvas.width){
267+
dot.vx = - dot.vx;
268+
dot.vy = dot.vy;
269+
}
270+
dot.x += dot.vx;
271+
dot.y += dot.vy;
272+
}
273+
},
274+
275+
line: function(){
276+
for(i = 0; i < dots.nb; i++){
277+
for(j = 0; j < dots.nb; j++){
278+
i_dot = dots.array[i];
279+
j_dot = dots.array[j];
280+
281+
if((i_dot.x - j_dot.x) < dots.distance && (i_dot.y - j_dot.y) < dots.distance && (i_dot.x - j_dot.x) > - dots.distance && (i_dot.y - j_dot.y) > - dots.distance){
282+
if((i_dot.x - mousePosition.x) < dots.d_radius && (i_dot.y - mousePosition.y) < dots.d_radius && (i_dot.x - mousePosition.x) > - dots.d_radius && (i_dot.y - mousePosition.y) > - dots.d_radius){
283+
ctx.beginPath();
284+
ctx.moveTo(i_dot.x, i_dot.y);
285+
ctx.lineTo(j_dot.x, j_dot.y);
286+
ctx.stroke();
287+
ctx.closePath();
288+
}
289+
}
290+
}
291+
}
292+
}
293+
};
294+
295+
function createDots(){
296+
ctx.clearRect(0, 0, canvas.width, canvas.height);
297+
for(i = 0; i < dots.nb; i++){
298+
dots.array.push(new Dot());
299+
dot = dots.array[i];
300+
301+
dot.create();
302+
}
303+
304+
dot.line();
305+
dot.animate();
306+
}
307+
308+
$('canvas').on('mousemove mouseleave', function(e){
309+
if(e.type == 'mousemove'){
310+
mousePosition.x = e.pageX;
311+
mousePosition.y = e.pageY;
312+
}
313+
if(e.type == 'mouseleave'){
314+
mousePosition.x = canvas.width / 2;
315+
mousePosition.y = canvas.height / 2;
316+
}
317+
});
318+
setInterval(createDots, 1000/30);
319+
});

‎less/app.less

Lines changed: 60 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,27 +14,81 @@
1414
/* Hack: CodeMirror zoom bug that prevents clicking from working right with zoom != 1 */
1515
@codeMirrorZoom: 1/@wholePageZoom;
1616

17-
body {
18-
font-family: 'Helvetica Neue', sans-serif, Helvetica;
19-
background: @backgroundColor;
20-
zoom: @wholePageZoom;
21-
font-size: large;
17+
body{
18+
// -webkit-font-smoothing: inherit;
19+
}
20+
21+
.navbar-default .navbar-brand{
22+
font-weight: bold;
23+
color: black;
24+
text-transform: uppercase;
25+
color: black;
26+
font-size: 14px;
27+
letter-spacing: .5px;
28+
margin-right: 30px;
29+
}
30+
31+
.banner-jwt{
32+
position: relative;
33+
margin-top: 50px;
34+
padding: 20px;
35+
background: #EB5424;
36+
overflow: hidden;
37+
// background: linear-gradient(120deg, #14204d 0%, #3cc8f4 100%);
38+
39+
p {
40+
color: white;
41+
font-size: 34px;
42+
font-weight: 100;
43+
line-height: 60px;
44+
}
45+
a{
46+
font-size: 14px;
47+
font-weight: bold;
48+
color: white;
49+
opacity: .6;
50+
display: inline-block;
51+
}
2252
}
2353

54+
2455
.CodeMirror { zoom: @codeMirrorZoom; font-family: 'Source Code Pro' }
2556

2657
h1 {
2758
margin-bottom: 0;
2859
}
2960

30-
pre, code { padding: 0; margin: 0; font-family: 'Source Code Pro', Consolas; }
61+
pre, code { padding: 0; margin: 0; font-family: Menlo !important; }
3162

3263
.box-sizing(@prop) {
3364
-webkit-box-sizing: @prop; /* Safari/Chrome, other WebKit */
3465
-moz-box-sizing: @prop; /* Firefox, other Gecko */
3566
box-sizing: @prop; /* Opera/IE 8+ */
3667
}
3768

69+
body>.container{
70+
padding-top: 0 !important;
71+
}
72+
73+
canvas{
74+
position: absolute;
75+
z-index: 0;
76+
top: 0;
77+
left: 0;
78+
right: 0;
79+
bottom: 0;
80+
opacity: .5;
81+
height: 1000px;
82+
width: 100%;
83+
}
84+
85+
86+
.navbar-default.navbar-fixed-top{
87+
background: rgba(255,255,255,.9);
88+
border: 0;
89+
color: white;
90+
}
91+
3892
.box-shadow(@prop) {
3993
-webkit-box-shadow: @prop;
4094
-moz-box-shadow: @prop;
@@ -67,12 +121,6 @@ pre, code { padding: 0; margin: 0; font-family: 'Source Code Pro', Consolas; }
67121
}
68122
}
69123

70-
.navbar{
71-
// background-color: #EB5424;
72-
// background: linear-gradient(120deg, #14204d 0%, #3cc8f4 100%);
73-
// color: white;
74-
}
75-
76124
.jwt-playground {
77125
width: 100%;
78126

0 commit comments

Comments
 (0)