Skip to content

Instantly share code, notes, and snippets.

@dbarria

dbarria/random_codes

Created April 18, 2017 16:15
Show Gist options
  • Save dbarria/7b826bb396d2f33444da834cd792c037 to your computer and use it in GitHub Desktop.
Save dbarria/7b826bb396d2f33444da834cd792c037 to your computer and use it in GitHub Desktop.
Download ZIP
Random codes generation
Raw
random_codes
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Let's Talk</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap-responsive.min.css" media="screen" rel="stylesheet" type="text/css" />
<style>
.v-offset{
margin-top: 30px;
}
.bottom-vertical-offset{
margin-bottom: 20px;
}
.password{
font-size: 3em;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.6.1/clipboard.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/16.7.3/jcanvas.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
localStorage.removeItem('password')
var clipboard = new Clipboard('#copy_to_clipboard', {
text: function(trigger) {
return localStorage.getItem("password")
}
});
$.get( "https://www.random.org/strings/?num=1&len=4&upperalpha=on&unique=on&format=plain&rnd=new", function(data ) {
$('#code').drawText({
fillStyle: '#9cf',
strokeStyle: '#25a',
strokeWidth: 2,
x: 80, y: 60,
fontSize: 48,
fontFamily: 'Verdana, sans-serif',
text: data
});
}).fail(function() {
alert( "Servicio no disponible" );
})
$.get( "https://www.random.org/strings/?num=1&len=4&digits=on&unique=on&format=plain&rnd=new", function(data ) {
$('#password').drawText({
fillStyle: '#9cf',
strokeStyle: '#25a',
strokeWidth: 2,
x: 80, y: 60,
fontSize: 48,
fontFamily: 'Verdana, sans-serif',
text: data
});
localStorage.setItem("password", data);
}).fail(function() {
alert( "Servicio no disponible" );
localStorage.removeItem('password')
})
function downloadCanvas(link, canvasId, filename) {
link.href = document.querySelector('#' + canvasId).toDataURL("image/jpeg");
link.download = filename;
}
$('#download_password').click(function(){
downloadCanvas(this, 'password', 'clave-provisoria.png');
});
$('#download_code').click(function(){
downloadCanvas(this, 'code', 'codigo-autentificacion.png');
});
clipboard.on('success', function(e) {
$('#copy_success').fadeIn('slow').animate({opacity: 1.0}, 1500).fadeOut('slow');
});
clipboard.on('error', function(e) {
alert("Ha ocurrido un error. Intente nuevamente. Por favor.")
});
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="span12">
<legend>Código de autentificación</legend>
</div>
</div>
<div class="row">
<div class="span12">
<canvas id="code" width="180" height="80"></canvas>
</div>
<div class="span12"> <a id="download_code" class="btn btn-success">Guardar imagen</a></div>
</div>
<div class="row">
<div class="span12 v-offset">
<legend>Clave provisoria</legend>
</div>
</div>
<div class="row">
<div class="span12">
<canvas id="password" width="180" height="80"></canvas>
</div>
<div class="span12">
<p>
<button id="copy_to_clipboard" class="btn btn-small btn-primary">Copiar texto al portapapeles</button>
<span id="copy_success"style="display:none;" class="label label-success">Copiado!</span>
</p>
</div>
<div class="span12">
<a id="download_password" class="btn btn-success">Guardar imagen</a>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment