Skip to content

Instantly share code, notes, and snippets.

@swcho

swcho/password.html

Last active March 15, 2017 05:11
Show Gist options
  • Save swcho/bcba906bac2de6f3912568972431d04e to your computer and use it in GitHub Desktop.
Save swcho/bcba906bac2de6f3912568972431d04e to your computer and use it in GitHub Desktop.
Download ZIP
Password Entry
Raw
password.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Password</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/xeicon/2/xeicon.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
<script src="//unpkg.com/vue"></script>
<script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>
<style type='text/less'>
// @width: 200px;
// @height: 200px;
@color_base: #2c3e50;
#background {
position: absolute;
z-index: 0;
}
@keyframes rotate {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
#app {
position: absolute;
top: 0;
left: 0;
width: @width;
height: @height;
// z-index: 10;
text-align: center;
&:before {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
h1 {
margin-top: 10px;
font-size: 50px;
perspective: 100px;
i {
transform: rotateY(45deg);
animation: 1s rotate infinite;
}
}
h1, h2 {
font-weight: normal;
}
.dialog {
font-family: 'Orbitron', sans-serif;
display: inline-block;
vertical-align: middle;
width: 252px;
height: 377px;
margin: auto;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.7);
.keyin {
display: inline-block;
width: 35px;
height: 35px;
border-radius: 10px;
border: 2px solid @color_base;
margin: 2px;
font-size: 18px;
line-height: 45px;
position: relative;
&.check {
&:after{
position: absolute;
top: 8px;
left: 0;
width: 100%;
content: '*';
font-size: 48px;
line-height: 45px;
}
}
}
.keypad {
width: 159px;
border-radius: 10px;
border: 2px solid @color_base;
margin: auto;
.key {
display: block;
float: left;
width: 45px;
height: 45px;
border-radius: 10px;
border: 2px solid @color_base;
margin: 2px;
font-size: 18px;
line-height: 45px;
&:hover {
color: white;
background-color: @color_base;
cursor: pointer;
}
}
.hide {
visibility: hidden;
}
.newline {
clear: left;
}
&:after {
content: '';
display: block;
clear: both;
}
}
}
}
</style>
</head>
<body>
<canvas id="background">
</canvas>
<div id="app">
<div class='dialog'>
<h1><i class="xi-key"></i></h1>
<h2>Please enter password.</h2>
<div class="keyin" v-bind:class="{ check: 0 < password.length }"></div>
<div class="keyin" v-bind:class="{ check: 1 < password.length }"></div>
<div class="keyin" v-bind:class="{ check: 2 < password.length }"></div>
<div class="keyin" v-bind:class="{ check: 3 < password.length }"></div>
<div class="keypad">
<div class="key" v-on:click="key(1)">1</div>
<div class="key" v-on:click="key(2)">2</div>
<div class="key" v-on:click="key(3)">3</div>
<div class="key newline" v-on:click="key(4)">4</div>
<div class="key" v-on:click="key(5)">5</div>
<div class="key" v-on:click="key(6)">6</div>
<div class="key newline" v-on:click="key(7)">7</div>
<div class="key" v-on:click="key(8)">8</div>
<div class="key" v-on:click="key(9)">9</div>
<div class="key newline hide" v-on:click="key()"></div>
<div class="key" v-on:click="key(0)">0</div>
</div>
</div>
</div>
<script>
// http://thecodeplayer.com/walkthrough/matrix-rain-animation-html5-canvas-javascript
var c = document.getElementById("background");
var ctx = c.getContext("2d");
//making the canvas full screen
c.height = window.innerHeight;
c.width = window.innerWidth;
//chinese characters - taken from the unicode charset
var chinese = "田由甲申甴电甶男甸甹町画甼甽甾甿畀畁畂畃畄畅畆畇畈畉畊畋界畍畎畏畐畑";
var chinese = "꽉꾹녺껙묶뭑귝쀍쨍흙헑핥";
//converting the string into an array of single characters
chinese = chinese.split("");
var font_size = 10;
var columns = c.width/font_size; //number of columns for the rain
//an array of drops - one per column
var drops = [];
//x below is the x coordinate
//1 = y co-ordinate of the drop(same for every drop initially)
for(var x = 0; x < columns; x++)
drops[x] = 1;
//drawing the characters
function draw()
{
//Black BG for the canvas
//translucent BG to show trail
ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
ctx.fillRect(0, 0, c.width, c.height);
ctx.fillStyle = "#0F0"; //green text
ctx.font = font_size + "px arial";
//looping over drops
for(var i = 0; i < drops.length; i++)
{
//a random chinese character to print
var text = chinese[Math.floor(Math.random()*chinese.length)];
//x = i*font_size, y = value of drops[i]*font_size
ctx.fillText(text, i*font_size, drops[i]*font_size);
//sending the drop back to the top randomly after it has crossed the screen
//adding a randomness to the reset to make the drops scattered on the Y axis
if(drops[i]*font_size > c.height && Math.random() > 0.975)
drops[i] = 0;
//incrementing Y coordinate
drops[i]++;
}
}
setInterval(draw, 33);
less.modifyVars({ 'width': window.innerWidth + 'px', 'height': window.innerHeight + 'px' });
less.refresh();
// $('app').css({
// width: window.innerWidth + 'px',
// height: window.innerHeight + 'px',
// }).width(window.innerWidth)
</script>
<script>
var app = new Vue({
el: '#app',
data() {
return {
password: '',
msg: 'Welcome to Your Vue.js App',
key: (no) => {
if (this.password.length < 4) {
this.password += no;
}
},
};
},
// data: {
// password: '',
// msg: 'Welcome to Your Vue.js App',
// key: (no) => {
// if (this.password.length < 4) {
// this.password += no;
// }
// },
// }
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment