<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/motorlatitude/pen/DdKbj?depth=everything&limit=all&order=popularity&page=3&q=gravatar&show_forks=false" />
<script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script>
<style class="cp-pen-styles">body{
margin: 0;
padding: 0;
background: #efefef;
}
#dropzone{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
#dropzone .text{
position: absolute;
top: 90px;
left: 90px;
font-family: Helvetica Neue;
font-weight: 400;
color: #666;
text-shadow: 0 1px 0 #fff;
}
.id{
display: none;
position: absolute;
top: 200px;
left: 200px;
width: 300px;
height: 175px;
background: #eee;
border-radius: 4px;
box-shadow: 0 0 10px rgba(0,0,0,0.3), inset 0 1px 0 #fff;
border: 1px solid #aaa;
z-index: 80;
}
.id:after{
content:'';
position: absolute;
top: 38px;
left: 0px;
border-top: 1px dashed #aaa;
width: 300px;
}
.id:before{
content:'';
position: absolute;
top: 39px;
left: 0px;
border-top: 1px dashed #fff;
width: 300px;
}
.grad{
position: absolute;
top: 0px;
left: 0px;
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.3) 56%,rgba(255,255,255,0) 57%,rgba(255,255,255,0) 100%);
width: 300px;
height: 175px;
z-index: 5;
}
.contents{
position: absolute;
top: 50px;
left: 10px;
width: 280px;
height: 115px;
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
border: 1px solid #aaa;
box-shadow: inset 0 1px 0 #fff;
border-radius: 4px;
z-index: 1;
overflow: hidden;
}
.pic{
position: absolute;
top: 10px;
left: 10px;
width: 95px;
height: 95px;
background: #333;
background-image: url(https://lh3.googleusercontent.com/-yTaEpRHgQpg/AAAAAAAAAAI/AAAAAAAAAIc/lpMIq_VxF7s/photo.jpg);
background-size: cover;
border: 1px solid #aaa;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 1px 0 rgba(255,255,255,0.5);
border-radius: 3px;
}
.chip{
position: absolute;
right: 10px;
top: 70px;
width: 40px;
height: 30px;
border: 1px solid #af5500;
box-shadow: 0 1px 0 #fff;
background: #f9b438;
border-radius: 3px;
}
.chip:after{
content: '';
position: absolute;
top: 6px;
left: -1px;
width: 40px;
height: 7px;
border: 1px solid #af5500;
z-index: 0;
}
.chip:before{
content: '';
position: absolute;
top: 3px;
left: 13px;
border-radius: 8px;
background: #f9b438;
width: 13px;
height: 13px;
border: 1px solid #af5500;
z-index: 1;
}
.chip .pat{
position: absolute;
top: 22px;
left: -1px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
background: #f9b438;
width: 40px;
height: 7px;
border: 1px solid #af5500;
}
.chip .pat:before{
content: '';
position: absolute;
top: -10px;
left: 13px;
border-radius: 8px;
background: #f9b438;
width: 13px;
height: 13px;
border: 1px solid #af5500;
z-index: 1;
}
.watermark{
position: absolute;
bottom: -40px;
left: 35px;
width: 300px;
height: 100px;
background-image: url(https://assets.codepen.io/images/codepen-logo-midgray.svg);
background-size: cover;
opacity: 0.2;
}
.name{
position: absolute;
top: 10px;
left: 120px;
font-family: Courier;
color: #222;
text-shadow: 0 1px 0 #fff;
font-size: 13px;
}
.pos{
position: absolute;
top: 23px;
left: 120px;
font-family: Courier;
color: #666;
text-shadow: 0 1px 0 #fff;
font-size: 11px;
}
.idno{
position: absolute;
top: 35px;
left: 120px;
font-family: Courier;
color: #666;
text-shadow: 0 1px 0 #fff;
font-size: 11px;
}
.hole{
position: absolute;
top: 15px;
left: 125px;
width: 50px;
height: 10px;
border: 1px solid #aaa;
border-radius: 360px;
box-shadow: 0 1px 0 #fff, inset 0 0 5px rgba(0,0,0,0.2);
}
.scanner{
position: absolute;
bottom: 190px;
left: 240px;
background: #fafafa;
width: 80px;
height: 80px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 10px #3aa1f6, inset 0 -1px 0 #fff;
z-index: 100;
}
.body{
position: absolute;
bottom: 20px;
left: 20px;
width: 300px;
height: 160px;
background: #fff;
border-radius: 4px;
border: 1px solid #ddd;
z-index: 0;
}
.p1{
position: absolute;
top: 10px;
left: 10px;
width: 18px;
height: 22px;
border-radius: 360px;
border: 6px solid #aaa;
padding-left: 8px;
padding-top: 4px;
font-family: Helvetica Neue;
font-weight: 600;
color: #aaa;
}
.t1{
position: absolute;
top: 17px;
left: 70px;
color: #888;
font-size: 12px;
font-family: Helvetica Neue;
}
.t1 span{
color: #3aa2f6;
cursor: pointer;
}
.p2{
position: absolute;
top: 60px;
left: 10px;
width: 18px;
height: 22px;
border-radius: 360px;
border: 6px solid #aaa;
padding-left: 8px;
padding-top: 4px;
font-family: Helvetica Neue;
font-weight: 600;
color: #aaa;
}
.t2{
position: absolute;
top: 72px;
left: 70px;
color: #888;
font-size: 12px;
font-family: Helvetica Neue;
}
.p3{
position: absolute;
top: 110px;
left: 10px;
width: 18px;
height: 22px;
border-radius: 360px;
border: 6px solid #aaa;
padding-left: 8px;
padding-top: 4px;
font-family: Helvetica Neue;
font-weight: 600;
color: #aaa;
}
.t3{
position: absolute;
top: 122px;
left: 70px;
color: #888;
font-size: 12px;
font-family: Helvetica Neue;
}
.register{
position: absolute;
top: calc(50% - 200px);
left: calc(50% - 300px);
width: 600px;
height: 260px;
background: #fff;
border: 1px solid #ccc;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.register div{
width: 100%;
height: 36px;
background: #46aef6;
color: #fff;
padding-left: 10px;
padding-top: 14px;
font-family: Helvetica Neue;
font-size: 15px;
font-weight: 500;
border-bottom: 1px solid #44aaf6;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
.register input[type="text"],
.register input[type="password"]{
border: 1px solid #ccc;
padding-left: 5px;
margin: 10px;
width: 270px;
height: 30px;
border-radius: 3px;
font-family: Helvetica Neue;
font-weight: 300;
font-size: 13px;
color: #444;
}
.register input[type="button"]{
background: #fff;
padding: 5px;
margin: 10px;
float: right;
width: 100px;
height: 30px;
border: 1px solid #ccc;
text-align: center;
border-radius: 3px;
font-family: Helvetica Neue;
font-weight: 300;
font-size: 13px;
color: #444;
cursor: pointer;
}
.register input[type="button"]:focus{
outline: none;
}
.register input[type="text"]:focus,
.register input[type="password"]:focus{
outline: none;
border: 1px solid #38a0f6;
}
#email{
width: 570px;
}</style></head><body>
<div id='dropzone'></div>
<div class='id'>
<div class='hole'></div>
<div class='contents'>
<div class='watermark'></div>
<div class='pic'></div>
<div class='chip'>
<div class='pat'></div>
</div>
<div class='name'>-</div>
<div class='pos'>-</div>
<div class='idno'>-</div>
</div>
<div class='grad'></div>
</div>
<div class='scanner'></div>
<div class='body'>
<div class='p1'>1</div>
<div class='t1'>Drag your ID onto this page. <br><span>Create your ID</span></div>
<div class='p2'>2</div>
<div class='t2'>Scan your ID using the scanner</div>
<div class='p3'>3</div>
<div class='t3'>Log In</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/core.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/md5.min.js'></script><script src='//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js'></script>
<script >var name = "";
var pass = "";
$(document).ready(function(){
var dropZone = document.getElementById('dropzone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
$(document).mousemove(function(e){
window.mouseXPos = e.pageX;
window.mouseYPos = e.pageY;
});
$(".t1 span").click(function(){
$("body").append("<div class='register'><div>Create Your ID</div><input type='text' placeholder='First Name' id='fname'><input type='text' placeholder='Last Name' id='lname'><input type='text' placeholder='Email' id='email'><input type='password' placeholder='Password' id='password'><input type='password' placeholder='Re-Type Password' id='password2'><input type='button' id='register' value='Create ID'></div>");
$("#register").click(function(){
var text = "name: "+$("#fname").val()+" "+$("#lname").val()+",id: ID_U24S148E537241R,password: "+$("#password").val()+",email: "+$("#email").val()+",pos: User";
download($("#fname").val()+'.id', text);
$(".register").remove();
});
$("#dropzone").click(function(){
$(".register").remove();
})
});
});
function download(filename, text) {
var pom = document.createElement('a');
pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
pom.setAttribute('download', filename);
pom.click();
}
function handleFileSelect(evt) {
evt.stopPropagation();
evt.preventDefault();
$(".p1").css("border","6px solid #0fa324");
$(".p1").css("color","#0fa324");
var files = evt.dataTransfer.files;
var reader = new FileReader();
reader.onloadend = function(evt) {
if (evt.target.readyState == FileReader.DONE) {
//console.log(evt.target.result);
$(".id").css("left",window.mouseXPos-150+"px");
$(".id").css("top",window.mouseYPos-10+"px");
name = evt.target.result.split(",")[0].replace("name: ","");
$(".id .name").html(name);
var email = evt.target.result.split(",")[3].replace("email: ","");
//console.log(email);
var emailhash = CryptoJS.MD5(email.toLowerCase().trim()).toString();
//console.log(emailhash);
$.ajax({
dataType: "jsonp",
url: "http://en.gravatar.com/"+emailhash+".json",
success: function(data){
var thumb = data.entry[0].photos[0].value;
//console.log(thumb);
$(".id .pic").css("background-image","url("+thumb+")");
},
error: function(data){
console.log("ERROR GETTING GRAVATAR");
$(".id .pic").css("background-image","url(https://lh3.googleusercontent.com/-yTaEpRHgQpg/AAAAAAAAAAI/AAAAAAAAAIc/lpMIq_VxF7s/photo.jpg)");
}
});
var pos = evt.target.result.split(",")[4].replace("pos: ","");
pass = evt.target.result.split(",")[2].replace("password: ","");
$(".id .pos").html(pos);
var idno = evt.target.result.split(",")[1].replace("id: ","");
$(".id .idno").html(idno);
$(".id").draggable({drag: function(){
var x = $(this).offset().left+150;
var y = $(this).offset().top+100;
var sx = $(".scanner").offset().left;
var sy = $(".scanner").offset().top;
var dx = x - sx;
var dy = y - sy;
var dist = Math.sqrt(dx * dx + dy * dy);
if(dist < 80){
scanner();
}
}});
$(".id").css("display","block");
}
};
reader.readAsText(files[0]);
}
function scanner(){
//do some login stuff php
$(".p2").css("border","6px solid #0fa324");
$(".p2").css("color","#0fa324");
$(".scanner").css("box-shadow","0 0 10px green, inset 0 -1px 0 #fff");
$(".id").css("display","none");
alert("Logged In As: "+name+"\nWith Password: "+pass);
$(".p3").css("border","6px solid #0fa324");
$(".p3").css("color","#0fa324");
setTimeout(function(){
$(".scanner").css("box-shadow","0 0 10px #3aa1f6, inset 0 -1px 0 #fff");
$(".p1").css("border","6px solid #aaa");
$(".p1").css("color","#aaa");
$(".p2").css("border","6px solid #aaa");
$(".p2").css("color","#aaa");
$(".p3").css("border","6px solid #aaa");
$(".p3").css("color","#aaa");
},1000);
}
function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy';
}
//# sourceURL=pen.js
</script>
</body></html>
