<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>PassColor</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="Refo" />
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
</head>
<body style="margin:0;">
<div class="md-modal md-effect-1" id="modal-1">
<div class="md-content">
<h3>PassColor</h3>
<div>
<p>with passcolor can create a strong password with a combination of colors</p>
<p>you can: </p>
<div> select the grid size</div>
<div>select the color</div>
<div>click to change color </div>
<div>hold to scroll colors</div>
<button class="md-close">Close me!</button>
</div>
</div>
</div>
<div class="md-modal md-effect-1" id="modal-2">
<div class="md-content">
<h3>PassColor Settings</h3>
<div>
<p>Set the initial settings!</p>
<ul class="typeofgrid">
</ul>
<ul class="typeofcont">
<li class="typeofcontV"> </li>
<li class="typeofcontN">X</li>
<li class="typeofcontF">(X+2)^C</li>
<li class="maki-art-gallery typeofcontD" style=" line-height: 4.7em; "> </li>
</ul>
<button class="md-close">Close me!</button>
</div>
</div>
</div>
<div class="foglio title" >
PassColor
<div class="imp" data-modal="modal-2">*</div>
<div class="what" data-modal="modal-1">?</div>
</div>
<div class="foglio " >
<p>
create a strong password! (with color)
</p>
<!--ul class="typeofgrid">
</ul-->
<ul class="exampleLine">
</ul>
<ul class="grid">
</ul>
<p>
total -> <b id="totale"></b>
</p>
<p> generated password:</p>
<p><b id="cod"class="title" ></b>
</p>
<p>
<a href="https://github.com/Refus/PassColor">https://github.com/Refus/PassColor</a>
</p>
</div>
<div class="md-overlay"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha3.js"></script>
<script src="js/init.js"></script>
</body>
</html>@import url(http://weloveiconfonts.com/api/?family=maki);
/* maki */
[class*="maki-"]:before {
font-family: 'maki', sans-serif;
font-size:1.5em;
}
body {
background-color: rgb(97, 204, 231);
}
.foglio {
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
margin: 1em auto 1em;
max-width: 600px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
background-color: rgba(255, 255, 255, 0.85);
font-family: 'Lato', sans-serif;
text-align: center;
font-size: 1em;
}
div {
padding: 15px;
}
.title {
text-align: center;
/*text-transform: uppercase;*/
color: #DC3D24;
font-size: 2em;
position:relative;
}
li {
background-color: rgba(0, 0, 0, 0.2);
margin: 1px;
list-style: none;
display: inline-block;
position: relative;
text-align: center;
}
ul {
max-width: 1300px;
margin: 0 auto;
text-align: center;
}
.exampleLine {
padding: 0px 0px 20px 0px;
}
.exampleLine li {
cursor: pointer;
width: 3em;
height: 3em;
line-height: 3em;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
.typeofcont{
padding: 0px 0px 20px 0px;
font-size: 0.8em
}
.typeofcont li {
cursor: pointer;
width: 5em;
height: 5em;
line-height: 5em;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
.grid {
padding: 0;
width: 16em;/*grid 3*X */
}
.grid li {
cursor: pointer;
width: 5em;
height: 5em;
line-height: 5em;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
}
.typeofgrid {
padding: 0px 0px 20px 0px;
display: flex;
position: flex;
line-height: 0;
}
.typeofgrid9 {
padding: 0px 10px 0px 10px;
width: 1.3em;
margin-top: 0.6em;
}
.typeofgrid16 {
padding: 0px 10px 0px 10px;
width: 2em;
margin-top: 0.4em;
}
.typeofgrid25 {
padding: 0px 10px 0px 10px;
width: 2.2em;
margin-top: 0.2em;
}
.typeofgrid36 {
padding: 0px 10px 0px 10px;
width: 2.6em;
}
.typeofgrid li {
width: 0.3em;
height: 0.3em;
line-height: 0.3em;
}
.select{
box-shadow: inset 0 0 5px 1px #000000;
}
/* spiegazioni*/
.what{
color:rgba(0, 0, 0, 0.3);
position:absolute;
top:0;
right: 0.3em;
padding: 0;
font-size: 1.7em;
cursor: pointer;
}
.what:hover
{
color:rgba(0, 0, 0, 0.6);
}
.imp{
color:rgba(0, 0, 0, 0.3);
position:absolute;
top:0.2em;
left: 0.3em;
padding: 0;
font-size: 1.7em;
cursor: pointer;
}
.imp:hover
{
color:rgba(0, 0, 0, 0.6);
}
.md-modal {
padding: 0;
position: fixed;
top: 25%;
width: 50%;
/*max-width: 630px;*/
min-width: 320px;
height: auto;
z-index: 2000;
visibility: hidden;
backface-visibility: hidden;
margin: -3% 0 0 -25%;
left:50%;
/*transform: translateX(-25%) translateY(-25%);*/
}
.md-show {
visibility: visible;
}
.md-overlay {
padding:0;
position: fixed;
width: 100%;
height: 100%;
visibility: hidden;
top: 0;
left: 0;
z-index: 1000;
opacity: 0;
background: rgba(0,0,0,0.2);
transition: all 0.3s;
}
.md-show ~ .md-overlay {
opacity: 1;
visibility: visible;
}
.md-perspective,
.md-perspective body {
height: 100%;
overflow: hidden;
}
.md-perspective body {
background: #222;
perspective: 600px;
}
.container {
background: #e74c3c;
min-height: 100%;
}
/* Content styles */
.md-content {
font-family: 'Lato', sans-serif;
padding:0;
color: #000;
background: #F0F0F0;
position: relative;
border-radius: 3px;
margin: 0 auto;
}
.md-content h3 {
margin: 0;
padding: 0.4em;
text-align: center;
font-size: 2.4em;
font-weight: 300;
opacity: 0.8;
background: rgba(0,0,0,0.1);
border-radius: 3px 3px 0 0;
}
.md-content > div {
margin: 0;
font-weight: 300;
font-size: 1.15em;
}
.md-content > div p {
margin: 0;
padding: 10px 0;
text-align:center;
}
.md-content > div > div {
padding: 5px 0;
margin-left:2em;
}
.md-content button {
display: block;
margin: 0 auto;
font-size: 0.8em;
}
.md-effect-1 .md-content {
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
opacity: 0;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.md-show.md-effect-1 .md-content {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
}
function is_touch_device() {
if (('ontouchstart' in window || 'onmsgesturechange' in window)&&navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)){
return true
}else{return false}
};
function hex2a(hex) {
var str = '';
for (var i = 0; i < hex.length; i += 2) {
var carattereN = 33 + Math.floor(94 * (parseInt(hex.substr(i, 2), 16) / 94 - Math.floor(parseInt(hex.substr(i, 2), 16) / 94)));
str += String.fromCharCode(carattereN);
}
return str;
}
function conta() {
var prod = 0;
$(".grid>li").each(function(index, el) {
if (!$(this).prop('colore')) {
$(this).prop('colore', 0)
}
prod = prod + Math.pow((index + 2), $(this).prop('colore'));
});
$("#totale").text(prod);
// var ex = CryptoJS.SHA3(prod.toString(), {
// outputLength : 512
// }).toString(CryptoJS.enc.Hex)
// var ascii = hex2a(ex);
// $("#cod").text(ascii.substr(0, 12));
}
function crea(n) {
var makiArray= new Array("maki-aboveground-rail active","maki-airfield","maki-airport","maki-art-gallery","maki-bar","maki-baseball","maki-basketball","maki-beer","maki-belowground-rail","maki-bicycle","maki-bus","maki-cafe","maki-campsite","maki-cemetery","maki-cinema","maki-college","maki-commerical-building","maki-credit-card","maki-cricket","maki-embassy","maki-fast-food","maki-ferry","maki-fire-station","maki-football","maki-fuel","maki-garden","maki-giraffe","maki-golf","maki-grocery-store","maki-harbor","maki-heliport","maki-hospital","maki-industrial-building","maki-library","maki-lodging","maki-london-underground","maki-minefield","maki-monument","maki-museum","maki-pharmacy","maki-pitch","maki-police","maki-post","maki-prison","maki-rail","maki-religious-christian","maki-religious-islam","maki-religious-jewish","maki-restaurant","maki-roadblock","maki-school","maki-shop","maki-skiing","maki-swimming","maki-theatre","maki-town-hall","maki-tree-1","maki-warehouse");
$(".grid>li").remove();
var em=Math.sqrt(n)*5+1;
em=em+'em'
$('.grid').css("width", em);
for (var i = 0; i < n; i++) {
var liType=["<li> </li>","<li>"+i+"</li>","<li>("+i+"+2)^C</li>","<li><span class="+makiArray[i]+"></li>",]
$('.grid').append(liType[localStorage.gridType]);
}
$(".grid>li").on("click",function() {
if($('.select').length){
if(Number($('.select').text())==0){
$(this).prop('colore', 0)
$(this).css("background-color", "rgba(0, 0, 0, 0.2)");
}else{
$(this).prop('colore', Number($('.select').text()))
var rgbT = arrayC[Number($('.select').text()) - 1];
$(this).css("background-color", rgbT);
}
$(".exampleLine>li").removeClass('select');
}else{
if (!$(this).prop('colore')) {
$(this).prop('colore', 0)
}
switch($(this).prop('colore')) {
case totaleColori:
$(this).prop('colore', 0)
$(this).css("background-color", "rgba(0, 0, 0, 0.2)");
break
default:
$(this).prop('colore', $(this).prop('colore') + 1)
var rgbT = arrayC[$(this).prop('colore') - 1];
$(this).css("background-color", rgbT);
break
}
}
conta();
});
function avanti(){
var active = $('.active');
active.click();
}
if(is_touch_device()){
$(".grid>li").bind('touchstart', function(){
$( this ).addClass('active');
interval = setInterval(avanti,500);
}).bind('touchend', function(){
$('.active').removeClass('active');
if(interval){clearInterval(interval);}
});
}else{
$(".grid>li").mouseup(function() {
$('.active').removeClass('active');
if(interval){clearInterval(interval);}
});
$(".grid>li").mousedown(function() {
$( this ).addClass('active');
interval = setInterval(avanti,500);
});
}
conta();
}
function creaExample(n) {
$(".exampleLine>li").remove();
$('.exampleLine').append("<li>0</li>");
for (var i = 0; i < totaleColori; i++) {
var val = i + 1
var rgbT = "rgb(" + arrayC[i].r + "," + arrayC[i].g + "," + arrayC[i].b + ")";
$('.exampleLine').append("<li>" + val + "</li>");
}
$(".exampleLine>li").each(function(index, el) {
if (index != 0) {
var rgbT = arrayC[index - 1];
$(this).css("background-color", rgbT);
}
});
$(".exampleLine>li").click(function() {
$(".exampleLine>li").removeClass('select');
$( this ).addClass('select');
});
}
function creaType() {
$(".typeofgrid>li").remove();
$('.typeofgrid').append("<ul class='typeofgrid9'></ul>");
$('.typeofgrid').append("<ul class='typeofgrid16'></ul>");
$('.typeofgrid').append("<ul class='typeofgrid25'></ul>");
$('.typeofgrid').append("<ul class='typeofgrid36'></ul>");
for (var i = 0; i < 9; i++) {
$('.typeofgrid9').append("<li></li>");
}
for (var i = 0; i < 16; i++) {
$('.typeofgrid16').append("<li></li>");
}
for (var i = 0; i < 25; i++) {
$('.typeofgrid25').append("<li></li>");
}
for (var i = 0; i < 36; i++) {
$('.typeofgrid36').append("<li></li>");
}
$('.typeofgrid9').click(function() {
localStorage.gridDim = 9;
crea(localStorage.gridDim);
});
$('.typeofgrid16').click(function() {
localStorage.gridDim = 16;
crea(localStorage.gridDim);
});
$('.typeofgrid25').click(function() {
localStorage.gridDim = 25;
crea(localStorage.gridDim);
});
$('.typeofgrid36').click(function() {
localStorage.gridDim = 36;
crea(localStorage.gridDim);
});
$('.typeofcontV').click(function() {
localStorage.gridType = 0;
crea(localStorage.gridDim);
});
$('.typeofcontN').click(function() {
localStorage.gridType = 1;
crea(localStorage.gridDim);
});
$('.typeofcontF').click(function() {
localStorage.gridType = 2;
crea(localStorage.gridDim);
});
$('.typeofcontD').click(function() {
localStorage.gridType = 3;
crea(localStorage.gridDim);
});
}
$(document).ready(function() {
interval=null;
totaleColori = 9;
arrayC = ["rgb(245, 218, 69)", "rgb(154, 245, 69)", "rgb(10, 225, 35)", "rgb(69, 245, 218)", "rgb(69, 154, 245)", "rgb(101, 69, 245)", "rgb(159, 49, 179)", "rgb(245, 69, 154)", "rgb(245, 101, 69)"];
creaType();
creaExample();
if (!localStorage.gridType||localStorage.gridType>3)
{
localStorage.gridType = 0;
}
if (localStorage.gridDim)
{
crea(localStorage.gridDim);
}
else
{
localStorage.gridDim = 16;
crea(localStorage.gridDim);
}
/*spiegazioni*/
var overlay = document.querySelector( '.md-overlay' );
[].slice.call( document.querySelectorAll( '.what' ) ).forEach( function( el, i ) {
var modal = document.querySelector( '#' + el.getAttribute( 'data-modal' ) ),
close = modal.querySelector( '.md-close' );
function removeModal( hasPerspective ) {
$(modal).removeClass('md-show' );
if( hasPerspective ) {
$(document.documentElement).removeClass('md-perspective' );
}
}
function removeModalHandler() {
removeModal($(el).has('md-setperspective').length);
}
el.addEventListener( 'click', function( ev ) {
$(modal).addClass('md-show' );
overlay.removeEventListener( 'click', removeModalHandler );
overlay.addEventListener( 'click', removeModalHandler );
if( $(el).has('md-setperspective').length ) {
setTimeout( function() {
$(document.documentElement).addClass('md-perspective' );
}, 25 );
}
});
close.addEventListener( 'click', function( ev ) {
ev.stopPropagation();
removeModalHandler();
});
} );
var overlay = document.querySelector( '.md-overlay' );
[].slice.call( document.querySelectorAll( '.imp' ) ).forEach( function( el, i ) {
var modal = document.querySelector( '#' + el.getAttribute( 'data-modal' ) ),
close = modal.querySelector( '.md-close' );
function removeModal( hasPerspective ) {
$(modal).removeClass('md-show' );
if( hasPerspective ) {
$(document.documentElement).removeClass('md-perspective' );
}
}
function removeModalHandler() {
removeModal($(el).has('md-setperspective').length);
}
el.addEventListener( 'click', function( ev ) {
$(modal).addClass('md-show' );
overlay.removeEventListener( 'click', removeModalHandler );
overlay.addEventListener( 'click', removeModalHandler );
if( $(el).has('md-setperspective').length ) {
setTimeout( function() {
$(document.documentElement).addClass('md-perspective' );
}, 25 );
}
});
close.addEventListener( 'click', function( ev ) {
ev.stopPropagation();
removeModalHandler();
});
} );
}); 
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.