Created
October 16, 2014 00:09
-
-
Save sethkontny/1cdaf362479488493b5e to your computer and use it in GitHub Desktop.
A Pen by Ryan Rich.
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> | |
<section class="splash"> | |
<div class="canvas-wrapper"> | |
<header> | |
<h1>Catalyze User Status Check</h1> | |
<p>Easily check the status and information on a Catalyze user</p> | |
<form id="userForm"> | |
<input type="text" id="apiKey" name="api" value="" placeholder="Type Identifier Key"> | |
<input type="text" id="userName" name="un" value="" placeholder="Username"> | |
<input type="password" id="userPassword" name="pw" value="" placeholder="Password"> | |
<input type="submit" id="submitUser" value="Submit User"> | |
</form> | |
</header> | |
<canvas id="particles" width="1000px" height="500px" /> | |
</div> | |
</section> | |
<div class="wrapper"> | |
<div id="userInfo"> | |
<div id="userStatus"></div> | |
<div id="headerType"></div> | |
<div id="bodyContent"></div> | |
</div> | |
</div> | |
</body> | |
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script> | |
<script src='http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js'></script> |
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
/* Particle Sphere */ | |
(function(){ | |
window.addEventListener("load", windowLoadHandler, false); | |
var sphereRad = 280; | |
var Debugger = function(){}; | |
Debugger.log = function(message){ | |
try{ | |
console.log(message); | |
} | |
catch (exception){ | |
return; | |
} | |
} | |
function windowLoadHandler(){ | |
canvasApp(); | |
} | |
function canvasSupport(){ | |
return Modernizr.canvas; | |
} | |
function canvasApp(){ | |
if (!canvasSupport()){ | |
return; | |
} | |
var theCanvas = document.getElementById("particles"); | |
var context = theCanvas.getContext("2d"); | |
var displayWidth; | |
var displayHeight; | |
var timer; | |
var wait; | |
var count; | |
var numToAddEachFrame; | |
var particleList; | |
var recycleBin; | |
var particleAlpha; | |
var r,g,b; | |
var fLen; | |
var m; | |
var projCenterX; | |
var projCenterY; | |
var zMax; | |
var turnAngle; | |
var turnSpeed; | |
var sphereCenterX, sphereCenterY, sphereCenterZ; | |
var particleRad; | |
var zeroAlphaDepth; | |
var randAccelX, randAccelY, randAccelZ; | |
var gravity; | |
var rgbString; | |
var p; | |
var outsideTest; | |
var nextParticle; | |
var sinAngle; | |
var cosAngle; | |
var rotX, rotZ; | |
var depthAlphaFactor; | |
var i; | |
var theta, phi; | |
var x0, y0, z0; | |
init(); | |
function init(){ | |
wait = 1; | |
count = wait - 1; | |
numToAddEachFrame = 5; | |
r = 255; | |
g = 255; | |
b = 255; | |
rgbString = "rgba("+r+","+g+","+b+","; | |
particleAlpha = 0.9; | |
displayWidth = theCanvas.width; | |
displayHeight = theCanvas.height; | |
fLen = 1000; | |
projCenterX = displayWidth/2; | |
projCenterY = displayHeight/2; | |
zMax = fLen-2; | |
particleList = {}; | |
recycleBin = {}; | |
randAccelX = 0.1; | |
randAccelY = 0.1; | |
randAccelZ = 0.1; | |
gravity = -0; | |
particleRad = 1; | |
sphereCenterX = 0; | |
sphereCenterY = 0; | |
sphereCenterZ = -3 - sphereRad; | |
zeroAlphaDepth = -750; | |
turnSpeed = 2*Math.PI/2000; | |
turnAngle = 0; | |
timer = setInterval(onTimer, 10/24); | |
} | |
function onTimer(){ | |
count++; | |
if (count >= wait) { | |
count = 0; | |
for (i = 0; i < numToAddEachFrame; i++){ | |
theta = Math.random()*2*Math.PI; | |
phi = Math.acos(Math.random()*2-1); | |
x0 = sphereRad*Math.sin(phi)*Math.cos(theta); | |
y0 = sphereRad*Math.sin(phi)*Math.sin(theta); | |
z0 = sphereRad*Math.cos(phi); | |
var p = addParticle(x0, sphereCenterY + y0, sphereCenterZ + z0, 0.005*x0, 0.002*y0, 0.002*z0); | |
p.attack = 120; | |
p.hold = 120; | |
p.decay = 60; | |
p.initValue = 0; | |
p.holdValue = particleAlpha; | |
p.lastValue = 0; | |
p.stuckTime = 120 + Math.random()*20; | |
p.accelX = 0; | |
p.accelY = gravity; | |
p.accelZ = 0; | |
} | |
} | |
turnAngle = (turnAngle + turnSpeed) % (2*Math.PI); | |
sinAngle = Math.sin(turnAngle); | |
cosAngle = Math.cos(turnAngle); | |
context.fillStyle = "#111111"; | |
context.fillRect(0,0,displayWidth,displayHeight); | |
p = particleList.first; | |
while (p != null) { | |
nextParticle = p.next; | |
p.age++; | |
if (p.age > p.stuckTime) { | |
p.velX += p.accelX + randAccelX*(Math.random()*2 - 1); | |
p.velY += p.accelY + randAccelY*(Math.random()*2 - 1); | |
p.velZ += p.accelZ + randAccelZ*(Math.random()*2 - 1); | |
p.x += p.velX; | |
p.y += p.velY; | |
p.z += p.velZ; | |
} | |
rotX = cosAngle*p.x + sinAngle*(p.z - sphereCenterZ); | |
rotZ = -sinAngle*p.x + cosAngle*(p.z - sphereCenterZ) + sphereCenterZ; | |
m = fLen/(fLen - rotZ); | |
p.projX = rotX*m + projCenterX; | |
p.projY = p.y*m + projCenterY; | |
if (p.age < p.attack+p.hold+p.decay) { | |
if (p.age < p.attack) { | |
p.alpha = (p.holdValue - p.initValue)/p.attack*p.age + p.initValue; | |
} | |
else if (p.age < p.attack+p.hold) { | |
p.alpha = p.holdValue; | |
} | |
else if (p.age < p.attack+p.hold+p.decay) { | |
p.alpha = (p.lastValue - p.holdValue)/p.decay*(p.age-p.attack-p.hold) + p.holdValue; | |
} | |
} | |
else { | |
p.dead = true; | |
} | |
if ((p.projX > displayWidth)||(p.projX<0)||(p.projY<0)||(p.projY>displayHeight)||(rotZ>zMax)) { | |
outsideTest = true; | |
} | |
else { | |
outsideTest = false; | |
} | |
if (outsideTest||p.dead) { | |
recycle(p); | |
} | |
else { | |
depthAlphaFactor = (1-rotZ/zeroAlphaDepth); | |
depthAlphaFactor = (depthAlphaFactor > 1) ? 1 : ((depthAlphaFactor<0) ? 0 : depthAlphaFactor); | |
context.fillStyle = rgbString + depthAlphaFactor*p.alpha + ")"; | |
context.beginPath(); | |
context.arc(p.projX, p.projY, m*particleRad, 0, 2*Math.PI, false); | |
context.closePath(); | |
context.fill(); | |
} | |
p = nextParticle; | |
} | |
} | |
function addParticle(x0,y0,z0,vx0,vy0,vz0) { | |
var newParticle; | |
var color; | |
if (recycleBin.first != null) { | |
newParticle = recycleBin.first; | |
//remove from bin | |
if (newParticle.next != null) { | |
recycleBin.first = newParticle.next; | |
newParticle.next.prev = null; | |
} | |
else { | |
recycleBin.first = null; | |
} | |
} | |
else { | |
newParticle = {}; | |
} | |
if (particleList.first == null) { | |
particleList.first = newParticle; | |
newParticle.prev = null; | |
newParticle.next = null; | |
} | |
else { | |
newParticle.next = particleList.first; | |
particleList.first.prev = newParticle; | |
particleList.first = newParticle; | |
newParticle.prev = null; | |
} | |
newParticle.x = x0; | |
newParticle.y = y0; | |
newParticle.z = z0; | |
newParticle.velX = vx0; | |
newParticle.velY = vy0; | |
newParticle.velZ = vz0; | |
newParticle.age = 0; | |
newParticle.dead = false; | |
if (Math.random() < 0.5) { | |
newParticle.right = true; | |
} | |
else { | |
newParticle.right = false; | |
} | |
return newParticle; | |
} | |
function recycle(p) { | |
if (particleList.first == p) { | |
if (p.next != null) { | |
p.next.prev = null; | |
particleList.first = p.next; | |
} | |
else { | |
particleList.first = null; | |
} | |
} | |
else { | |
if (p.next == null) { | |
p.prev.next = null; | |
} | |
else { | |
p.prev.next = p.next; | |
p.next.prev = p.prev; | |
} | |
} | |
if (recycleBin.first == null) { | |
recycleBin.first = p; | |
p.prev = null; | |
p.next = null; | |
} | |
else { | |
p.next = recycleBin.first; | |
recycleBin.first.prev = p; | |
recycleBin.first = p; | |
p.prev = null; | |
} | |
} | |
} | |
var asd = 12; | |
})(); | |
/* Catalyze API */ | |
$(document).ready(function(){ | |
$("#submitUser").bind( "click keyup", function(event){ | |
event.preventDefault(); | |
var Request = new XMLHttpRequest(); | |
Request.open('POST', 'https://apiv2.catalyze.io/v2/auth/signin'); | |
var apiKey = document.getElementById('apiKey').value; | |
Request.setRequestHeader('X-Api-Key', apiKey); | |
Request.setRequestHeader('Accept', 'application/json'); | |
Request.setRequestHeader('Content-Type', 'application/json'); | |
Request.onreadystatechange = function(){ | |
if (this.readyState === 4){ | |
var statusElement=document.getElementById("userStatus"); | |
statusElement.innerHTML="<h3>Status:</h3>" + " " + "<span id='currentStatus'>" + (this.status) + "</span>"; | |
var headerElement=document.getElementById("headerType"); | |
headerElement.innerHTML="<h3>Response:</h3>" + " " + (this.getAllResponseHeaders()); | |
var bodyElement=document.getElementById("bodyContent"); | |
bodyElement.innerHTML="<h3>User info:</h3>" + " " + "<pre>" + (this.responseText) + "</pre>"; | |
console.log("Ready"); | |
} | |
}; | |
var users = { | |
'username': document.getElementById('userName').value, | |
'password': document.getElementById('userPassword').value | |
}; | |
Request.send(JSON.stringify(users, null, "\t")); | |
$("#userInfo").slideDown(500); | |
var statusColor = $("#currentStatus").val(); | |
if(statusColor == undefined){ | |
$("#currentStatus").hide(0); | |
console.log(statusColor); | |
} | |
}); | |
}); |
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
@import url(http://fonts.googleapis.com/css?family=Raleway:400,300,600,700,800); | |
html, body, div, span, applet, object, iframe, | |
h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
a, abbr, acronym, address, big, cite, code, | |
del, dfn, em, img, ins, kbd, q, s, samp, | |
small, strike, strong, sub, sup, tt, var, | |
b, u, i, center, | |
dl, dt, dd, ol, ul, li, | |
fieldset, form, label, legend, | |
table, caption, tbody, tfoot, thead, tr, th, td, | |
article, aside, canvas, details, embed, | |
figure, figcaption, footer, header, hgroup, | |
menu, nav, output, ruby, section, summary, | |
time, mark, audio, video { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
font-size: 100%; | |
font: inherit; | |
vertical-align: baseline; | |
} | |
article, aside, details, figcaption, figure, | |
footer, header, hgroup, menu, nav, section{ | |
display: block; | |
} | |
body{ | |
line-height: 1; | |
word-wrap: break-word; | |
} | |
ol, ul{ | |
list-style: none; | |
} | |
blockquote, q{ | |
quotes: none; | |
} | |
blockquote:before, blockquote:after, | |
q:before, q:after{ | |
content: ''; | |
content: none; | |
} | |
table{ | |
border-collapse: collapse; | |
border-spacing: 0; | |
} | |
body{ | |
background-color: #fff; | |
color: #333; | |
font-family: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
} | |
.splash{ | |
background-color: #111; | |
padding-bottom: 100px; | |
} | |
header{ | |
background-color: transparent; | |
position: absolute; | |
padding: 100px 0px 0px 0px; | |
left: 0; | |
right: 0; | |
margin-left: auto; | |
margin-right: auto; | |
} | |
header h1{ | |
font-size: 40px; | |
text-align: center; | |
font-weight: 300; | |
color: #fff; | |
} | |
header p{ | |
text-align: center; | |
color: #999; | |
padding: 20px 0px 0px 0px; | |
} | |
.canvas-wrapper{ | |
width: 100%; | |
text-align:center; | |
} | |
canvas{ | |
display: inline; | |
} | |
.wrapper{ | |
max-width: 960px; | |
margin: auto; | |
width: 100%; | |
} | |
#userInfo{ | |
padding: 100px 20px 100px 20px; | |
display: none; | |
} | |
#userInfo div{ | |
font-weight: 400; | |
font-size: 20px; | |
padding: 20px; | |
text-align: center; | |
margin: 0px 0px 50px 0px; | |
background-color: #333; | |
color: #fff; | |
} | |
#userInfo h3{ | |
font-size: 30px; | |
font-weight: 900; | |
padding: 0px 0px 20px 0px; | |
} | |
#userInfo pre{ | |
font-family: monospace; | |
background-color: #000; | |
color: #00a4da; | |
padding: 10px; | |
text-align: left; | |
} | |
#userForm{ | |
padding: 30px 0px 0px 0px; | |
text-align: center; | |
} | |
input[type="text"], | |
input[type="submit"], | |
input[type="password"]{ | |
background-color: #fff; | |
border: 0px; | |
padding: 20px; | |
display: block; | |
width: 100%; | |
max-width: 250px; | |
margin: 20px auto 0px auto; | |
font-family: 'Raleway', 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
color: #999; | |
font-weight: 900; | |
font-size: 15px; | |
} | |
input[type="submit"]{ | |
font-weight: 600; | |
font-size: 15px; | |
max-width: 295px; | |
background-color: #333; | |
color: #fff; | |
} | |
input[type="submit"]:hover{ | |
cursor: pointer; | |
} | |
.errorBg{ | |
background-color: #d54545 !important; | |
} | |
@media all and (max-width: 480px){ | |
header h1{ | |
font-size: 25px; | |
} | |
header p{ | |
font-size: 16px; | |
max-width: 300px; | |
margin: auto; | |
line-height: 1.5; | |
} | |
input[type="text"], | |
input[type="submit"], | |
input[type="password"]{ | |
padding: 10px; | |
} | |
input[type="submit"]{ | |
max-width: 275px; | |
} | |
header{ | |
padding: 50px 20px 50px 20px; | |
background-color: #f0f0f0; | |
} | |
#userInfo{ | |
padding: 50px 20px 50px 20px; | |
display: none; | |
} | |
#userInfo div{ | |
font-size: 16px; | |
padding: 10px; | |
margin: 0px auto 50px auto; | |
max-width: 250px; | |
} | |
#userInfo h3{ | |
font-size: 20px; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment