Update some old scripts and push newest developments
Michael Reber
4 years ago
parent
57fe25c5b0
commit
da3f41b71d
@ -0,0 +1,3 @@
|
||||
# Hover effects with sass
|
||||
|
||||
A small collection of stylish effects with Scss.
|
||||
@ -0,0 +1,64 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Hover effects with sass</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section class="head">
|
||||
<a href="" data-bf="10 Stunning" data-af="with sass">HOVER EFFECTS</a>
|
||||
</section>
|
||||
|
||||
<section class="p10">
|
||||
<a href="">camera</a>
|
||||
</section>
|
||||
<section class="p11">
|
||||
<a href="">
|
||||
ROAD
|
||||
</a>
|
||||
|
||||
</section>
|
||||
<section class="p12">
|
||||
<a href="" data-content="peak">peak</a>
|
||||
|
||||
</section>
|
||||
|
||||
<section class="p14">
|
||||
<a href="">
|
||||
eclipse
|
||||
</a>
|
||||
|
||||
</section>
|
||||
<section class="p15">
|
||||
<a href="">tAiPeI
|
||||
<div class="t1">
|
||||
<div class="in"></div>
|
||||
</div>
|
||||
<div class="t2">
|
||||
<div class="in"></div>
|
||||
</div>
|
||||
</a>
|
||||
</section>
|
||||
<section class="p16">
|
||||
<a href="">CHICAGO</a>
|
||||
</section>
|
||||
<section class="p17">
|
||||
<a href="">sunbeams</a>
|
||||
</section>
|
||||
<section class="p18">
|
||||
<a href="">
|
||||
HUMMINGBIRD</a>
|
||||
</section>
|
||||
<section class="p19">
|
||||
<a href="">SABER
|
||||
<div class="s1"></div>
|
||||
<div class="s2"></div>
|
||||
</a>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@
|
||||
# Image hover effects DEMO
|
||||
@ -0,0 +1,272 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Image hover effects DEMO</title>
|
||||
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,300'><link rel="stylesheet" href="./style.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>CSS Image Hover Effects</h1>
|
||||
<p>← <a href="https://www.nxworld.net/tips/css-image-hover-effects.html" target="_blank">View the article</a></p>
|
||||
|
||||
<h2>No Effect</h2>
|
||||
<div class="column">
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=244" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=611" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="demo01">1. Zoom In #1</h2>
|
||||
<div class="hover01 column">
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=244" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=611" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="demo02">2. Zoom In #2</h2>
|
||||
<div class="hover02 column">
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=244" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=611" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="demo03">3. Zoom Out #1</h2>
|
||||
<div class="hover03 column">
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=244" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=611" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="demo04">4. Zoom Out #2</h2>
|
||||
<div class="hover04 column">
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=244" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=611" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="demo05">5. Slide</h2>
|
||||
<div class="hover05 column">
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=244" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=611" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="demo06">6. Rotate<span>(+Zoom Out)</span></h2>
|
||||
<div class="hover06 column">
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=244" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=611" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="demo07">7. Blur</h2>
|
||||
<div class="hover07 column">
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=244" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=611" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="demo08">8. Gray Scale</h2>
|
||||
<div class="hover08 column">
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=244" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=611" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="demo09">9. Sepia</h2>
|
||||
<div class="hover09 column">
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=244" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=611" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="demo10">10. Blur + Gray Scale</h2>
|
||||
<div class="hover10 column">
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=244" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=611" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="demo11">11. Opacity #1</h2>
|
||||
<div class="hover11 column">
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=244" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=611" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="demo12">12. Opacity #2</h2>
|
||||
<div class="hover12 column">
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=244" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=611" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="demo13">13. Flashing</h2>
|
||||
<div class="hover13 column">
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=244" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=611" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="demo14">14. Shine</h2>
|
||||
<div class="hover14 column">
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=244" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=611" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 id="demo15">15. Circle</h2>
|
||||
<div class="hover15 column">
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=244" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=1024" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
<div>
|
||||
<figure><img src="https://picsum.photos/300/200?image=611" /></figure>
|
||||
<span>Hover</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,327 @@
|
||||
body {
|
||||
color: #333;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
font-weight: 300;
|
||||
}
|
||||
h1,
|
||||
h1+p {
|
||||
margin: 30px 15px 0;
|
||||
font-weight: 300;
|
||||
}
|
||||
h1+p a {
|
||||
color: #333;
|
||||
}
|
||||
h1+p a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
h2 {
|
||||
margin: 60px 15px 0;
|
||||
padding: 0;
|
||||
font-weight: 300;
|
||||
}
|
||||
h2 span {
|
||||
margin-left: 1em;
|
||||
color: #aaa;
|
||||
font-size: 85%;
|
||||
}
|
||||
.column {
|
||||
margin: 15px 15px 0;
|
||||
padding: 0;
|
||||
}
|
||||
.column:last-child {
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
.column::after {
|
||||
content: '';
|
||||
clear: both;
|
||||
display: block;
|
||||
}
|
||||
.column div {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
margin: 0 0 0 25px;
|
||||
padding: 0;
|
||||
}
|
||||
.column div:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
.column div span {
|
||||
position: absolute;
|
||||
bottom: -20px;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
display: block;
|
||||
width: 300px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #444;
|
||||
font-size: 18px;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
-webkit-transition: .3s ease-in-out;
|
||||
transition: .3s ease-in-out;
|
||||
opacity: 0;
|
||||
}
|
||||
figure {
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
figure:hover+span {
|
||||
bottom: -36px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Zoom In #1 */
|
||||
.hover01 figure img {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
-webkit-transition: .3s ease-in-out;
|
||||
transition: .3s ease-in-out;
|
||||
}
|
||||
.hover01 figure:hover img {
|
||||
-webkit-transform: scale(1.3);
|
||||
transform: scale(1.3);
|
||||
}
|
||||
|
||||
/* Zoom In #2 */
|
||||
.hover02 figure img {
|
||||
width: 300px;
|
||||
height: auto;
|
||||
-webkit-transition: .3s ease-in-out;
|
||||
transition: .3s ease-in-out;
|
||||
}
|
||||
.hover02 figure:hover img {
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
/* Zoom Out #1 */
|
||||
.hover03 figure img {
|
||||
-webkit-transform: scale(1.5);
|
||||
transform: scale(1.5);
|
||||
-webkit-transition: .3s ease-in-out;
|
||||
transition: .3s ease-in-out;
|
||||
}
|
||||
.hover03 figure:hover img {
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
/* Zoom Out #2 */
|
||||
.hover04 figure img {
|
||||
width: 400px;
|
||||
height: auto;
|
||||
-webkit-transition: .3s ease-in-out;
|
||||
transition: .3s ease-in-out;
|
||||
}
|
||||
.hover04 figure:hover img {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
/* Slide */
|
||||
.hover05 figure img {
|
||||
margin-left: 30px;
|
||||
-webkit-transform: scale(1.5);
|
||||
transform: scale(1.5);
|
||||
-webkit-transition: .3s ease-in-out;
|
||||
transition: .3s ease-in-out;
|
||||
}
|
||||
.hover05 figure:hover img {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
/* Rotate */
|
||||
.hover06 figure img {
|
||||
-webkit-transform: rotate(15deg) scale(1.4);
|
||||
transform: rotate(15deg) scale(1.4);
|
||||
-webkit-transition: .3s ease-in-out;
|
||||
transition: .3s ease-in-out;
|
||||
}
|
||||
.hover06 figure:hover img {
|
||||
-webkit-transform: rotate(0) scale(1);
|
||||
transform: rotate(0) scale(1);
|
||||
}
|
||||
|
||||
/* Blur */
|
||||
.hover07 figure img {
|
||||
-webkit-filter: blur(3px);
|
||||
filter: blur(3px);
|
||||
-webkit-transition: .3s ease-in-out;
|
||||
transition: .3s ease-in-out;
|
||||
}
|
||||
.hover07 figure:hover img {
|
||||
-webkit-filter: blur(0);
|
||||
filter: blur(0);
|
||||
}
|
||||
|
||||
/* Gray Scale */
|
||||
.hover08 figure img {
|
||||
-webkit-filter: grayscale(100%);
|
||||
filter: grayscale(100%);
|
||||
-webkit-transition: .3s ease-in-out;
|
||||
transition: .3s ease-in-out;
|
||||
}
|
||||
.hover08 figure:hover img {
|
||||
-webkit-filter: grayscale(0);
|
||||
filter: grayscale(0);
|
||||
}
|
||||
|
||||
/* Sepia */
|
||||
.hover09 figure img {
|
||||
-webkit-filter: sepia(100%);
|
||||
filter: sepia(100%);
|
||||
-webkit-transition: .3s ease-in-out;
|
||||
transition: .3s ease-in-out;
|
||||
}
|
||||
.hover09 figure:hover img {
|
||||
-webkit-filter: sepia(0);
|
||||
filter: sepia(0);
|
||||
}
|
||||
|
||||
/* Blur + Gray Scale */
|
||||
.hover10 figure img {
|
||||
-webkit-filter: grayscale(0) blur(0);
|
||||
filter: grayscale(0) blur(0);
|
||||
-webkit-transition: .3s ease-in-out;
|
||||
transition: .3s ease-in-out;
|
||||
}
|
||||
.hover10 figure:hover img {
|
||||
-webkit-filter: grayscale(100%) blur(3px);
|
||||
filter: grayscale(100%) blur(3px);
|
||||
}
|
||||
|
||||
/* Opacity #1 */
|
||||
.hover11 figure img {
|
||||
opacity: 1;
|
||||
-webkit-transition: .3s ease-in-out;
|
||||
transition: .3s ease-in-out;
|
||||
}
|
||||
.hover11 figure:hover img {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
/* Opacity #2 */
|
||||
.hover12 figure {
|
||||
background: #1abc9c;
|
||||
}
|
||||
.hover12 figure img {
|
||||
opacity: 1;
|
||||
-webkit-transition: .3s ease-in-out;
|
||||
transition: .3s ease-in-out;
|
||||
}
|
||||
.hover12 figure:hover img {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
/* Flashing */
|
||||
.hover13 figure:hover img {
|
||||
opacity: 1;
|
||||
-webkit-animation: flash 1.5s;
|
||||
animation: flash 1.5s;
|
||||
}
|
||||
@-webkit-keyframes flash {
|
||||
0% {
|
||||
opacity: .4;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes flash {
|
||||
0% {
|
||||
opacity: .4;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Shine */
|
||||
.hover14 figure {
|
||||
position: relative;
|
||||
}
|
||||
.hover14 figure::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -75%;
|
||||
z-index: 2;
|
||||
display: block;
|
||||
content: '';
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
|
||||
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
|
||||
-webkit-transform: skewX(-25deg);
|
||||
transform: skewX(-25deg);
|
||||
}
|
||||
.hover14 figure:hover::before {
|
||||
-webkit-animation: shine .75s;
|
||||
animation: shine .75s;
|
||||
}
|
||||
@-webkit-keyframes shine {
|
||||
100% {
|
||||
left: 125%;
|
||||
}
|
||||
}
|
||||
@keyframes shine {
|
||||
100% {
|
||||
left: 125%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Circle */
|
||||
.hover15 figure {
|
||||
position: relative;
|
||||
}
|
||||
.hover15 figure::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 2;
|
||||
display: block;
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
background: rgba(255,255,255,.2);
|
||||
border-radius: 100%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
opacity: 0;
|
||||
}
|
||||
.hover15 figure:hover::before {
|
||||
-webkit-animation: circle .75s;
|
||||
animation: circle .75s;
|
||||
}
|
||||
@-webkit-keyframes circle {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
40% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@keyframes circle {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
40% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
# Text hover effects with less
|
||||
|
||||
A small collection of stylish effects with Less.
|
||||
@ -0,0 +1,53 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Text hover effects with less</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
|
||||
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,600,800,300'><link rel="stylesheet" href="./style.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section class="apresenteichan">
|
||||
<a href="" data-bf="10 stylish" data-af="with less">
|
||||
hover effects
|
||||
</a>
|
||||
</section>
|
||||
<section class="p1">
|
||||
<a href="#" data-cont="coming">COMING</a>
|
||||
</section>
|
||||
<section class="p2">
|
||||
<a href="#" data-cont="PIANO">PIANO</a>
|
||||
</section>
|
||||
<section class="p3">
|
||||
<a href="#" data-cont="BURN">BURN</a>
|
||||
</section>
|
||||
<section class="p4">
|
||||
<a href="#" data-cont="movement" >movement</a>
|
||||
</section>
|
||||
<section class="p5">
|
||||
<a href="#" >comet</a>
|
||||
</section>
|
||||
<section class="p6">
|
||||
<a href="#">TROPICALIA</a>
|
||||
</section>
|
||||
<section class="p7">
|
||||
<a href="#">BRIDGE</a>
|
||||
</section>
|
||||
<section class="p8">
|
||||
<a href="#" data-cont="wrecked">
|
||||
wrecked
|
||||
<div class="line"></div>
|
||||
</a>
|
||||
</section>
|
||||
<section class="p9">
|
||||
<a href="#">
|
||||
BEAT
|
||||
<div class="i"></div>
|
||||
<div class="k"></div>
|
||||
</a>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,14 @@
|
||||
# Lock Screen login
|
||||
|
||||
This Lock screen is based on HTML, jQuery and CSS that simulate hybrid app design.
|
||||
|
||||
Credits:
|
||||
---------------
|
||||
<ul>
|
||||
<li>Nice toggle using <a href="http://jquery.com" target="_blank">jQuery</a></li>
|
||||
<li>Beautiful icons from <a href="http://ionicons.com/" target="_blank">ionicons</a></li>
|
||||
<li>Awesome animate from <a href="https://daneden.github.io/animate.css/" target="_blank">Animate.css</a></li>
|
||||
<li>Pattern lock pLugin from <a href="http://github.com/s-yadav/patternLock" target="_blank">Pattern Lock</a></li>
|
||||
<li>Background image from <a href="http://unsplash.com/" target="_blank">Unsplash</a></li>
|
||||
<li>Google font available at <a href="http://www.google.com/fonts/specimen/Roboto" target="_blank">Roboto</a></li>
|
||||
</ul>
|
||||
@ -0,0 +1,195 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Lock Screen login</title>
|
||||
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900'>
|
||||
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'>
|
||||
<link rel='stylesheet' href='https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css'>
|
||||
<link rel='stylesheet' href='https://github.com/MYNAME/lock-screen/raw/master/patt/pattern-lock.min.css'><link rel="stylesheet" href="./style.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="mhn-ui-wrap">
|
||||
<div class="mhn-ui-page page-lock">
|
||||
<div class="mhn-ui-date-time">
|
||||
<div class="mhn-ui-time">6:02 PM</div>
|
||||
<div class="mhn-ui-day">Friday</div>
|
||||
<div class="mhn-ui-date">September 05, 2015</div>
|
||||
</div>
|
||||
<div class="mhn-lock-wrap">
|
||||
<div class="mhn-lock-title" data-title="Draw a pattern to unlock"></div>
|
||||
<div class="mhn-lock"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mhn-ui-page page-home">
|
||||
<div class="mhn-ui-app-time"> </div>
|
||||
<div class="mhn-ui-app-title-head">
|
||||
<span class="mhn-ui-page-title">All Application</span>
|
||||
<div class="mhn-ui-filter">
|
||||
<span class="mhn-ui-btn ion-funnel"></span>
|
||||
<div class="mhn-ui-filter-list">
|
||||
<div data-filter="all" class="active">All Application</div>
|
||||
<div data-filter="general">General Application</div>
|
||||
<div data-filter="social">Social Application</div>
|
||||
<div data-filter="credits">Credits Application</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mhn-ui-row mhn-ui-apps">
|
||||
<div class="mhn-ui-col" data-filter="general">
|
||||
<div class="mhn-ui-icon" data-open="page-author">
|
||||
<span class="ion-person" data-color="#2980b9"></span>
|
||||
<div class="mhn-ui-icon-title">Author</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mhn-ui-col" data-filter="general">
|
||||
<div class="mhn-ui-icon" data-open="page-contact">
|
||||
<span class="ion-chatbox" data-color="#8e44ad"></span>
|
||||
<div class="mhn-ui-icon-title">Contact</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mhn-ui-col" data-filter="general">
|
||||
<div class="mhn-ui-icon" data-href="http://codecanyon.net/user/MYNAME/portfolio">
|
||||
<span class="ion-ios-briefcase" data-color="#f39c12"></span>
|
||||
<div class="mhn-ui-icon-title">Portfolio</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mhn-ui-col" data-filter="general">
|
||||
<div class="mhn-ui-icon" data-open="page-credits">
|
||||
<span class="ion-information-circled" data-color="#16a085"></span>
|
||||
<div class="mhn-ui-icon-title">Credits</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mhn-ui-col" data-filter="social">
|
||||
<div class="mhn-ui-icon" data-href="https://codepen.io/MYNAME">
|
||||
<span class="ion-social-codepen-outline" data-color="#1e1e1e"></span>
|
||||
<div class="mhn-ui-icon-title">Codepen</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mhn-ui-col" data-filter="social">
|
||||
<div class="mhn-ui-icon" data-href="https://facebook.com/MYNAME">
|
||||
<span class="ion-social-facebook" data-color="#3b5998"></span>
|
||||
<div class="mhn-ui-icon-title">Facebook</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mhn-ui-col" data-filter="social">
|
||||
<div class="mhn-ui-icon" data-href="https://twitter.com/MYNAME">
|
||||
<span class="ion-social-twitter" data-color="#56a3d9"></span>
|
||||
<div class="mhn-ui-icon-title">Twitter</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mhn-ui-col" data-filter="social">
|
||||
<div class="mhn-ui-icon" data-href="http://dribbble.com/MYNAME">
|
||||
<span class="ion-social-dribbble-outline" data-color="#ec4a89"></span>
|
||||
<div class="mhn-ui-icon-title">Dribbble</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mhn-ui-col" data-filter="credits">
|
||||
<div class="mhn-ui-icon" data-href="https://jquery.com/">
|
||||
<span class="ion-social-javascript" data-color="#6639b6"></span>
|
||||
<div class="mhn-ui-icon-title">jQuery</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mhn-ui-col" data-filter="credits">
|
||||
<div class="mhn-ui-icon" data-href="http://ionicons.com/">
|
||||
<span class="ion-ionic" data-color="#3e50b4"></span>
|
||||
<div class="mhn-ui-icon-title">Ionicons</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mhn-ui-col" data-filter="credits">
|
||||
<div class="mhn-ui-icon" data-href="https://daneden.github.io/animate.css/">
|
||||
<span class="ion-social-css3-outline" data-color="#785447"></span>
|
||||
<div class="mhn-ui-icon-title">Animate</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mhn-ui-col" data-filter="credits">
|
||||
<div class="mhn-ui-icon" data-href="http://unsplash.com/">
|
||||
<span class="ion-android-camera" data-color="#000000"></span>
|
||||
<div class="mhn-ui-icon-title">Unsplash</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mhn-ui-col" data-filter="credits">
|
||||
<div class="mhn-ui-icon" data-href="https://github.com/s-yadav/patternLock">
|
||||
<span class="ion-android-unlock" data-color="#4bae4f"></span>
|
||||
<div class="mhn-ui-icon-title">patternLock</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mhn-ui-bottom-link-bar">
|
||||
<span class="mhn-ui-bottom-btn ion-ios-home"></span>
|
||||
<span class="mhn-ui-bottom-btn ion-ios-locked" onclick="mhnUI.page.show('page-lock')"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mhn-ui-page page-author">
|
||||
<div class="mhn-ui-app-time"></div>
|
||||
<div class="mhn-ui-app-title-head"><span class="ion-person"></span> Author</div>
|
||||
<div class="text-center"><img class="flipInX animated" style="width: 140px;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7c/User_font_awesome.svg/1024px-User_font_awesome.svg.png" alt="@MYNAME"></div>
|
||||
<p class="text-center">Hi, It's me NAME. I'm a web and graphics designer. Designing is my passion and I have been working on various designing projects.</p>
|
||||
<div class="mhn-ui-bottom-link-bar">
|
||||
<span class="mhn-ui-bottom-btn ion-ios-home" onclick="mhnUI.page.show('page-home')"></span>
|
||||
<span class="mhn-ui-bottom-btn ion-ios-locked" onclick="mhnUI.page.show('page-lock')"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mhn-ui-page page-contact">
|
||||
<div class="mhn-ui-app-time"> </div>
|
||||
<div class="mhn-ui-app-title-head"><span class="ion-chatbox"></span> Contact</div>
|
||||
<p><a href="mailto:MYNAME@gmail.com">MYNAME@gmail.com</a></p>
|
||||
<p><a href="mailto:MY@EMAIL">MY@EMAIL</a></p>
|
||||
<p><a href="MY_WEBPAGE" target="_blank">MY_WEBPAGE</a></p>
|
||||
<div class="mhn-ui-bottom-link-bar">
|
||||
<span class="mhn-ui-bottom-btn ion-ios-home" onclick="mhnUI.page.show('page-home')"></span>
|
||||
<span class="mhn-ui-bottom-btn ion-ios-locked" onclick="mhnUI.page.show('page-lock')"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mhn-ui-page page-credits">
|
||||
<div class="mhn-ui-app-time"> </div>
|
||||
<div class="mhn-ui-app-title-head"><span class="ion-information-circled"></span> Credits</div>
|
||||
<div class="mhn-ui-credit-list">
|
||||
<div class="mhn-ui-credit">
|
||||
<a href="https://jquery.com/" target="_blank">https://jquery.com/</a>
|
||||
<p>jQuery is a fast, small, and feature-rich JavaScript library.</p>
|
||||
</div>
|
||||
<div class="mhn-ui-credit">
|
||||
<a href="http://ionicons.com/" target="_blank">http://ionicons.com/</a>
|
||||
<p>The premium icon font for Ionic Framework.</p>
|
||||
</div>
|
||||
<div class="mhn-ui-credit">
|
||||
<a href="https://daneden.github.io/animate.css/" target="_blank">https://daneden.github.io/animate.css/</a>
|
||||
<p>Just-add-water CSS animations.</p>
|
||||
</div>
|
||||
<div class="mhn-ui-credit">
|
||||
<a href="http://unsplash.com/" target="_blank">http://unsplash.com/</a>
|
||||
<p>Free (do whatever you want) hi-res photos.</p>
|
||||
</div>
|
||||
<div class="mhn-ui-credit">
|
||||
<a href="https://github.com/s-yadav/patternLock" target="_blank">https://github.com/s-yadav/patternLock</a>
|
||||
<p>A light weight plugin to simulate android like pattern lock interface for your hybrid app or website.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mhn-ui-bottom-link-bar">
|
||||
<span class="mhn-ui-bottom-btn ion-ios-home" onclick="mhnUI.page.show('page-home')"></span>
|
||||
<span class="mhn-ui-bottom-btn ion-ios-locked" onclick="mhnUI.page.show('page-lock')"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mhn-ui-dialog-wrap">
|
||||
<div class="mhn-ui-dialog">
|
||||
<div class="mhn-ui-dialog-title">Are you sure?</div>
|
||||
<p>This application wants to open an external link. To confirm, please click on yes button.</p>
|
||||
<a data-action="confirm" class="mhn-ui-dialog-btn" target="_blank">Yes</a>
|
||||
<a data-action="cancel" class="mhn-ui-dialog-btn">No</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mhn-ui-info">Draw 'M' shape begin from left bottom to unlock :)</div>
|
||||
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script><script src="./script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,122 @@
|
||||
$(function(){
|
||||
mhnUI.setup();
|
||||
});
|
||||
mhnUI = {
|
||||
pattern: "",
|
||||
setup: function() {
|
||||
this.lock(), this.filter(), this.colors(), this.links.setup(), this.dialog.setup(), setInterval("mhnUI.datetime()", 1e3)
|
||||
},
|
||||
lock: function() {
|
||||
mhnUI.page.hide(), pattern = new PatternLock(".mhn-lock", {
|
||||
margin: 15
|
||||
}), $(".mhn-lock-title").html($(".mhn-lock-title").data("title")), pattern.checkForPattern("7415369", function() {
|
||||
$(".mhn-lock-title").html('<span class="mhn-lock-success">Yes! you unlocked pattern</span>'), $(".patt-holder").addClass("patt-success"), setTimeout(function() {
|
||||
pattern.reset(), mhnUI.message()
|
||||
}, 1e3), mhnUI.page.show()
|
||||
}, function() {
|
||||
$(".mhn-lock-title").html('<span class="mhn-lock-failure">Opps! pattern is not correct</span>'), $(".patt-holder").removeClass("patt-success"), setTimeout(function() {
|
||||
pattern.reset(), mhnUI.message()
|
||||
}, 2e3)
|
||||
})
|
||||
},
|
||||
message: function() {
|
||||
$(".mhn-lock-title span").fadeOut(), setTimeout(function() {
|
||||
$(".mhn-lock-title").html($(".mhn-lock-title").data("title")), $(".mhn-lock-title span").fadeIn()
|
||||
}, 500)
|
||||
},
|
||||
datetime: function() {
|
||||
var t = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"),
|
||||
e = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"),
|
||||
n = new Date,
|
||||
i = n.getYear();
|
||||
1e3 > i && (i += 1900);
|
||||
var a = n.getDay(),
|
||||
o = n.getMonth(),
|
||||
s = n.getDate();
|
||||
10 > s && (s = "0" + s);
|
||||
var h = n.getHours(),
|
||||
c = n.getMinutes(),
|
||||
u = n.getSeconds(),
|
||||
l = "AM";
|
||||
h >= 12 && (l = "PM"), h > 12 && (h -= 12), 0 == h && (h = 12), 9 >= c && (c = "0" + c), 9 >= u && (u = "0" + u), $(".mhn-ui-date-time .mhn-ui-day").text(t[a]), $(".mhn-ui-date-time .mhn-ui-date").text(e[o] + " " + s + ", " + i), $(".mhn-ui-date-time .mhn-ui-time").text(h + ":" + c + " " + l), $(".mhn-ui-app-time").text(h + ":" + c + ":" + u + " " + l)
|
||||
},
|
||||
page: {
|
||||
show: function(t) {
|
||||
t = t ? t : "page-home", $(".mhn-ui-page").hide(), $(".mhn-ui-page." + t).show()
|
||||
},
|
||||
hide: function(t) {
|
||||
t = t ? t : "page-lock", $(".mhn-ui-page").hide(), $(".mhn-ui-page." + t).show()
|
||||
}
|
||||
},
|
||||
filter: function() {
|
||||
$(".mhn-ui-filter .mhn-ui-btn").click(function() {
|
||||
$(this).toggleClass("active"), $(".mhn-ui-filter-list").toggle(100)
|
||||
}), $(".mhn-ui-filter-list>div").click(function() {
|
||||
var t = $(this).data("filter");
|
||||
$(this).siblings().removeAttr("class"), $(this).addClass("active");
|
||||
var e = function(t) {
|
||||
$(".mhn-ui-apps .mhn-ui-col").fadeOut(400), $('.mhn-ui-apps .mhn-ui-col[data-filter="' + t + '"]').fadeIn(400)
|
||||
};
|
||||
switch (t) {
|
||||
case "all":
|
||||
$(".mhn-ui-apps .mhn-ui-col").fadeIn(400);
|
||||
break;
|
||||
case "general":
|
||||
e(t);
|
||||
break;
|
||||
case "social":
|
||||
e(t);
|
||||
break;
|
||||
case "credits":
|
||||
e(t)
|
||||
}
|
||||
$(".mhn-ui-filter-list").toggle(100), $(".mhn-ui-filter .mhn-ui-btn").removeClass("active"), $(".mhn-ui-page-title").text($(this).text())
|
||||
})
|
||||
},
|
||||
colors: function() {
|
||||
$(".mhn-ui-icon span").on("mouseover", function() {
|
||||
$(this).css("background", $(this).data("color"))
|
||||
}).on("mouseout", function() {
|
||||
$(this).removeAttr("style")
|
||||
})
|
||||
},
|
||||
links: {
|
||||
setup: function() {
|
||||
$(".mhn-ui-apps .mhn-ui-icon").click(function() {
|
||||
var t = $(this).data("href"),
|
||||
e = $(this).data("open");
|
||||
t && mhnUI.links.href(t), e && mhnUI.page.show(e)
|
||||
})
|
||||
},
|
||||
href: function(t) {
|
||||
mhnUI.dialog.show(t)
|
||||
}
|
||||
},
|
||||
dialog: {
|
||||
setup: function() {
|
||||
$('.mhn-ui-dialog-wrap,.mhn-ui-dialog-wrap a[data-action="cancel"]').click(function() {
|
||||
mhnUI.dialog.hide()
|
||||
}), $(".mhn-ui-dialog").click(function(t) {
|
||||
t.stopPropagation()
|
||||
}), $('.mhn-ui-dialog a[data-action="confirm"]').click(function() {
|
||||
setTimeout(function() {
|
||||
mhnUI.dialog.hide()
|
||||
}, 400)
|
||||
})
|
||||
},
|
||||
show: function(t) {
|
||||
$('.mhn-ui-dialog-wrap a[data-action="confirm"]').attr("href", t), $(".mhn-ui-dialog-wrap").show()
|
||||
},
|
||||
hide: function() {
|
||||
$('.mhn-ui-dialog-wrap a[data-action="confirm"]').removeAttr("href"), $(".mhn-ui-dialog-wrap").fadeOut(400)
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/*
|
||||
patternLock.js v 0.5.0
|
||||
Author: Sudhanshu Yadav
|
||||
Copyright (c) 2015 Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
|
||||
Demo on: ignitersworld.com/lab/patternLock.html
|
||||
*/
|
||||
!function(t,e,n,a){"use strict";function r(t){for(var e=t.holder,n=t.option,a=n.matrix,r=n.margin,i=n.radius,o=['<ul class="patt-wrap" style="padding:'+r+'px">'],s=0,l=a[0]*a[1];l>s;s++)o.push('<li class="patt-circ" style="margin:'+r+"px; width : "+2*i+"px; height : "+2*i+"px; -webkit-border-radius: "+i+"px; -moz-border-radius: "+i+"px; border-radius: "+i+'px; "><div class="patt-dots"></div></li>');o.push("</ul>"),e.html(o.join("")).css({width:a[1]*(2*i+2*r)+2*r+"px",height:a[0]*(2*i+2*r)+2*r+"px"}),t.pattCircle=t.holder.find(".patt-circ")}function i(t,e,n,a){var r=e-t,i=a-n;return{length:Math.ceil(Math.sqrt(r*r+i*i)),angle:Math.round(180*Math.atan2(i,r)/Math.PI)}}function o(){}function s(e,n){var a=this,i=a.token=Math.random(),h=p[i]=new o,u=h.holder=t(e);if(0!=u.length){h.object=a,n=h.option=t.extend({},s.defaults,n),r(h),u.addClass("patt-holder"),"static"==u.css("position")&&u.css("position","relative"),u.on("touchstart mousedown",function(t){d.call(this,t,a)}),h.option.onDraw=n.onDraw||l;var c=n.mapper;h.mapperFunc="object"==typeof c?function(t){return c[t]}:"function"==typeof c?c:l,h.option.mapper=null}}var l=function(){},p={},d=function(e,a){e.preventDefault();var r=p[a.token];if(!r.disabled){r.option.patternVisible||r.holder.addClass("patt-hidden");var i="touchstart"==e.type?"touchmove":"mousemove",o="touchstart"==e.type?"touchend":"mouseup";t(this).on(i+".pattern-move",function(t){h.call(this,t,a)}),t(n).one(o,function(){u.call(this,e,a)});var s=r.holder.find(".patt-wrap"),l=s.offset();r.wrapTop=l.top,r.wrapLeft=l.left,a.reset()}},h=function(e,n){e.preventDefault();var a=e.pageX||e.originalEvent.touches[0].pageX,r=e.pageY||e.originalEvent.touches[0].pageY,o=p[n.token],s=o.pattCircle,l=o.patternAry,d=o.option.lineOnMove,h=o.getIdxFromPoint(a,r),u=h.idx,c=o.mapperFunc(u)||u;if(l.length>0){var f=i(o.lineX1,h.x,o.lineY1,h.y);o.line.css({width:f.length+10+"px",transform:"rotate("+f.angle+"deg)"})}if(u){if(-1==l.indexOf(c)){var v,m=t(s[u-1]);if(o.lastPosObj){for(var g=o.lastPosObj,x=g.i,w=g.j,b=Math.abs(h.i-x),j=Math.abs(h.j-w);(0==b&&j>1||0==j&&b>1||j==b&&j>1)&&(w!=h.j||x!=h.i);){x=b?Math.min(h.i,x)+1:x,w=j?Math.min(h.j,w)+1:w,b=Math.abs(h.i-x),j=Math.abs(h.j-w);var M=(w-1)*o.option.matrix[1]+x,y=o.mapperFunc(M)||M;-1==l.indexOf(y)&&(t(s[M-1]).addClass("hovered"),l.push(y))}v=[],h.j-g.j>0?v.push("s"):h.j-g.j<0?v.push("n"):0,h.i-g.i>0?v.push("e"):h.i-g.i<0?v.push("w"):0,v=v.join("-")}m.addClass("hovered"),l.push(c);var P=o.option.margin,k=o.option.radius,C=(h.i-1)*(2*P+2*k)+2*P+k,O=(h.j-1)*(2*P+2*k)+2*P+k;if(1!=l.length){var D=i(o.lineX1,C,o.lineY1,O);o.line.css({width:D.length+10+"px",transform:"rotate("+D.angle+"deg)"}),d||o.line.show()}v&&(o.lastElm.addClass(v+" dir"),o.line.addClass(v+" dir"));var E=t('<div class="patt-lines" style="top:'+(O-5)+"px; left:"+(C-5)+'px"></div>');o.line=E,o.lineX1=C,o.lineY1=O,o.holder.append(E),d||o.line.hide(),o.lastElm=m}o.lastPosObj=h}},u=function(t,e){t.preventDefault();var n=p[e.token],a=n.patternAry.join("");n.holder.off(".pattern-move").removeClass("patt-hidden"),a&&(n.option.onDraw(a),n.line.remove(),n.rightPattern&&(a==n.rightPattern?n.onSuccess():(n.onError(),e.error())))};o.prototype={constructor:o,getIdxFromPoint:function(t,e){var n=this.option,a=n.matrix,r=t-this.wrapLeft,i=e-this.wrapTop,o=null,s=n.margin,l=2*n.radius+2*s,p=Math.ceil(r/l),d=Math.ceil(i/l),h=r%l,u=i%l;return p<=a[1]&&d<=a[0]&&h>2*s&&u>2*s&&(o=(d-1)*a[1]+p),{idx:o,i:p,j:d,x:r,y:i}}},s.prototype={constructor:s,option:function(t,e){var n=p[this.token],i=n.option;return e===a?i[t]:(i[t]=e,void(("margin"==t||"matrix"==t||"radius"==t)&&r(n)))},getPattern:function(){return p[this.token].patternAry.join("")},setPattern:function(t){var e=p[this.token],n=e.option,a=n.matrix,r=n.margin,i=n.radius;if(n.enableSetPattern){this.reset(),e.wrapLeft=0,e.wrapTop=0;for(var o=0;o<t.length;o++){var s=t[o]-1,d=s%a[1],u=Math.floor(s/a[1]),c=d*(2*r+2*i)+2*r+i,f=u*(2*r+2*i)+2*r+i;h.call(null,{pageX:c,pageY:f,preventDefault:l,originalEvent:{touches:[{pageX:c,pageY:f}]}},this)}}},enable:function(){var t=p[this.token];t.disabled=!1},disable:function(){var t=p[this.token];t.disabled=!0},reset:function(){var t=p[this.token];t.pattCircle.removeClass("hovered dir s n w e s-w s-e n-w n-e"),t.holder.find(".patt-lines").remove(),t.patternAry=[],t.lastPosObj=null,t.holder.removeClass("patt-error patt-success")},error:function(){p[this.token].holder.addClass("patt-error")},checkForPattern:function(t,e,n){var a=p[this.token];a.rightPattern=t,a.onSuccess=e||l,a.onError=n||l}},s.defaults={matrix:[3,3],margin:20,radius:25,patternVisible:!0,lineOnMove:!0,enableSetPattern:!1},e.PatternLock=s}(jQuery,window,document);
|
||||
@ -0,0 +1,392 @@
|
||||
/*
|
||||
patternLock.js v 0.5.0
|
||||
Author: Sudhanshu Yadav
|
||||
Copyright (c) 2013 Sudhanshu Yadav - ignitersworld.com , released under the MIT license.
|
||||
Demo and documentaion on: ignitersworld.com/lab/patternLock.html
|
||||
*/
|
||||
.patt-holder{background:#3382c0;-ms-touch-action:none}.patt-wrap{position:relative;cursor:pointer}.patt-wrap li,.patt-wrap ul{list-style:none;margin:0;padding:0}.patt-circ{position:relative;float:left;box-sizing:border-box;-moz-box-sizing:border-box}.patt-circ.hovered{border:3px solid #090}.patt-error .patt-circ.hovered{border:3px solid #BA1B26}.patt-hidden .patt-circ.hovered{border:0}.patt-dots,.patt-lines{border-radius:5px;height:10px;position:absolute}.patt-dots{background:#FFF;width:10px;top:50%;left:50%;margin-top:-5px;margin-left:-5px}.patt-lines{background:rgba(255,255,255,.7);transform-origin:5px 5px;-ms-transform-origin:5px 5px;-webkit-transform-origin:5px 5px}.patt-hidden .patt-lines{display:none}
|
||||
|
||||
.mhn-ui-date-time,
|
||||
.text-center {
|
||||
text-align: center
|
||||
}
|
||||
*,
|
||||
:after,
|
||||
:before {
|
||||
box-sizing: border-box
|
||||
}
|
||||
.pull-left {
|
||||
float: left
|
||||
}
|
||||
.pull-right {
|
||||
float: right
|
||||
}
|
||||
.clearfix:after,
|
||||
.clearfix:before {
|
||||
content: '';
|
||||
display: table
|
||||
}
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
display: block
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
background: #9b26af;
|
||||
font: 300 14px/18px Roboto, sans-serif
|
||||
}
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline
|
||||
}
|
||||
.mhn-ui-wrap {
|
||||
width: 300px;
|
||||
height: 475px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin: 30px auto 0;
|
||||
background: url(https://raw.githubusercontent.com/khadkamhn/lock-screen/master/img/mhn-ui-bg.jpg) center no-repeat #2c3e50;
|
||||
box-shadow: 0 17px 50px 0 rgba(0, 0, 0, .19), 0 12px 15px 0 rgba(0, 0, 0, .24)
|
||||
}
|
||||
.mhn-ui-wrap:before {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
content: '';
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, .4)
|
||||
}
|
||||
.mhn-ui-date-time {
|
||||
color: #eee;
|
||||
z-index: 100;
|
||||
position: relative
|
||||
}
|
||||
.mhn-ui-date-time .mhn-ui-time {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
margin-bottom: 15px
|
||||
}
|
||||
.mhn-ui-date-time .mhn-ui-day {
|
||||
font-size: 24px;
|
||||
margin-bottom: 10px
|
||||
}
|
||||
.mhn-ui-date-time .mhn-ui-date {
|
||||
font-size: 18px;
|
||||
font-weight: 400
|
||||
}
|
||||
.mhn-ui-app-time {
|
||||
padding: 0 5px;
|
||||
font-size: 12px;
|
||||
text-align: right;
|
||||
margin: -15px -15px auto;
|
||||
background: rgba(0, 0, 0, .6)
|
||||
}
|
||||
.mhn-lock-wrap {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 100;
|
||||
position: absolute
|
||||
}
|
||||
.mhn-lock-wrap .mhn-lock-title {
|
||||
text-align: center;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, .5)
|
||||
}
|
||||
.mhn-lock-wrap .mhn-lock-success {
|
||||
color: transparent;
|
||||
text-shadow: none
|
||||
}
|
||||
.mhn-lock-wrap .mhn-lock-failure {
|
||||
color: #f34235
|
||||
}
|
||||
.mhn-lock {
|
||||
margin: auto;
|
||||
background: 0 0
|
||||
}
|
||||
.patt-wrap {
|
||||
margin: auto;
|
||||
overflow: hidden
|
||||
}
|
||||
.patt-wrap li {
|
||||
-webkit-transition: all .4s ease-in-out 0s;
|
||||
transition: all .4s ease-in-out 0s
|
||||
}
|
||||
.patt-dots,
|
||||
.patt-lines {
|
||||
-webkit-transition: background .1s ease-in-out 0s;
|
||||
transition: background .1s ease-in-out 0s
|
||||
}
|
||||
.patt-circ {
|
||||
border: 3px solid transparent
|
||||
}
|
||||
.patt-dots {
|
||||
background: rgba(255, 255, 255, .8)
|
||||
}
|
||||
.patt-lines {
|
||||
background: rgba(255, 255, 255, .4)
|
||||
}
|
||||
.patt-circ.hovered {
|
||||
border-color: #ddd;
|
||||
background: rgba(255, 255, 255, .2)
|
||||
}
|
||||
.patt-error .patt-circ.hovered {
|
||||
background: rgba(243, 66, 53, .4);
|
||||
border-color: rgba(243, 66, 53, .8)
|
||||
}
|
||||
.patt-error .patt-lines {
|
||||
background: rgba(243, 66, 53, .5)
|
||||
}
|
||||
.patt-success .patt-circ.hovered {
|
||||
background: rgba(75, 174, 79, .4);
|
||||
border-color: rgba(75, 174, 79, .8)
|
||||
}
|
||||
.patt-success .patt-lines {
|
||||
background: rgba(75, 174, 79, .5)
|
||||
}
|
||||
.mhn-ui-page {
|
||||
height: 100%;
|
||||
z-index: 200;
|
||||
display: none;
|
||||
padding: 15px;
|
||||
position: relative
|
||||
}
|
||||
.mhn-ui-page.page-lock {
|
||||
position: initial
|
||||
}
|
||||
.mhn-ui-page .mhn-ui-app-title-head {
|
||||
padding: 15px;
|
||||
font-size: 16px;
|
||||
margin: 0 -15px;
|
||||
background: rgba(0, 0, 0, .4)
|
||||
}
|
||||
.mhn-ui-page .mhn-ui-filter {
|
||||
float: right;
|
||||
position: relative
|
||||
}
|
||||
.mhn-ui-page .mhn-ui-filter .mhn-ui-btn {
|
||||
right: 0;
|
||||
top: -5px;
|
||||
padding: 5px;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
display: inline-block
|
||||
}
|
||||
.mhn-ui-page .mhn-ui-filter .mhn-ui-btn.active {
|
||||
background: teal
|
||||
}
|
||||
.mhn-ui-page .mhn-ui-filter-list {
|
||||
right: 0;
|
||||
top: 20px;
|
||||
padding: 5px;
|
||||
width: 180px;
|
||||
display: none;
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, .8)
|
||||
}
|
||||
.mhn-ui-page .mhn-ui-filter-list>div {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
padding: 2px 4px
|
||||
}
|
||||
.mhn-ui-page .mhn-ui-filter-list>div.active {
|
||||
color: teal
|
||||
}
|
||||
.mhn-ui-page .mhn-ui-filter-list>div:hover {
|
||||
background: teal
|
||||
}
|
||||
.mhn-ui-page .mhn-ui-filter-list>div.active:hover {
|
||||
background: 0 0
|
||||
}
|
||||
.mhn-ui-page .mhn-ui-row {
|
||||
margin-top: 15px
|
||||
}
|
||||
.mhn-ui-page .mhn-ui-row:after,
|
||||
.mhn-ui-page .mhn-ui-row:before {
|
||||
content: '';
|
||||
display: table
|
||||
}
|
||||
.mhn-ui-page .mhn-ui-row:after {
|
||||
clear: both;
|
||||
display: block
|
||||
}
|
||||
.mhn-ui-page .mhn-ui-col {
|
||||
width: 25%;
|
||||
float: left;
|
||||
margin-bottom: 15px
|
||||
}
|
||||
.mhn-ui-bottom-link-bar {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 15px;
|
||||
position: absolute;
|
||||
text-align: center
|
||||
}
|
||||
.mhn-ui-bottom-link-bar .mhn-ui-bottom-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
cursor: pointer;
|
||||
font-size: 28px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
display: inline-block
|
||||
}
|
||||
.mhn-ui-bottom-link-bar .mhn-ui-bottom-btn:nth-child(1) {
|
||||
margin-right: 15px
|
||||
}
|
||||
.mhn-ui-bottom-link-bar .mhn-ui-bottom-btn:nth-child(2) {
|
||||
margin-left: 15px
|
||||
}
|
||||
.mhn-ui-bottom-link-bar .mhn-ui-bottom-btn:hover {
|
||||
color: #ccc;
|
||||
background: rgba(0, 0, 0, .8)
|
||||
}
|
||||
.mhn-ui-icon {
|
||||
text-align: center
|
||||
}
|
||||
.mhn-ui-icon span {
|
||||
width: 55px;
|
||||
height: 55px;
|
||||
margin: auto;
|
||||
display: block;
|
||||
font-size: 28px;
|
||||
cursor: pointer;
|
||||
line-height: 55px;
|
||||
text-align: center;
|
||||
border-radius: 15px;
|
||||
background: rgba(0, 0, 0, .3);
|
||||
-webkit-transition: background .4s ease-in-out 0s;
|
||||
transition: background .4s ease-in-out 0s;
|
||||
box-shadow: 0 -1px 0 rgba(255, 255, 255, .5) inset
|
||||
}
|
||||
.mhn-ui-icon .mhn-ui-icon-title {
|
||||
margin-top: 5px;
|
||||
cursor: default;
|
||||
overflow: hidden;
|
||||
font-size: 13px;
|
||||
text-overflow: ellipsis;
|
||||
text-shadow: 0 1px 1px rgba(0, 0, 0, .5)
|
||||
}
|
||||
.mhn-ui-page.page-author img {
|
||||
padding: 8px;
|
||||
margin-top: 15px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, .7)
|
||||
}
|
||||
.mhn-ui-credit {
|
||||
padding: 5px;
|
||||
font-size: 13px;
|
||||
margin-top: 15px;
|
||||
background: rgba(0, 0, 0, .2);
|
||||
border: 1px solid rgba(0, 0, 0, .2)
|
||||
}
|
||||
.mhn-ui-credit p {
|
||||
margin: 0;
|
||||
color: #aaa
|
||||
}
|
||||
.mhn-ui-credit a {
|
||||
font-weight: 500
|
||||
}
|
||||
.mhn-ui-dialog-wrap {
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: none;
|
||||
z-index: 1000;
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, .7)
|
||||
}
|
||||
.mhn-ui-dialog {
|
||||
padding: 15px;
|
||||
background: #000;
|
||||
margin: 50% 0 auto
|
||||
}
|
||||
.mhn-ui-dialog .mhn-ui-dialog-title {
|
||||
font-size: 18px;
|
||||
font-weight: 500
|
||||
}
|
||||
.mhn-ui-dialog .mhn-ui-dialog-btn {
|
||||
padding: 5px;
|
||||
min-width: 65px;
|
||||
cursor: pointer;
|
||||
margin-right: 10px;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
border: 2px solid rgba(255, 255, 255, .8)
|
||||
}
|
||||
.mhn-ui-dialog .mhn-ui-dialog-btn:hover {
|
||||
background: #009688;
|
||||
text-decoration: none
|
||||
}
|
||||
.mhn-ui-info {
|
||||
margin: 30px 0;
|
||||
font-size: 16px;
|
||||
text-align: center
|
||||
}
|
||||
.mhn-ui-date,
|
||||
.mhn-ui-time {
|
||||
-webkit-animation: zoomIn 1s;
|
||||
animation: zoomIn 1s
|
||||
}
|
||||
.mhn-ui-day {
|
||||
-webkit-animation: rubberBand 1s;
|
||||
animation: rubberBand 1s
|
||||
}
|
||||
.mhn-lock-failure {
|
||||
-webkit-animation: zoomIn .4s;
|
||||
animation: zoomIn .4s
|
||||
}
|
||||
.patt-circ:nth-child(1),
|
||||
.patt-circ:nth-child(2),
|
||||
.patt-circ:nth-child(3) {
|
||||
-webkit-animation: fadeInUp .4s;
|
||||
animation: fadeInUp .4s
|
||||
}
|
||||
.patt-circ:nth-child(4),
|
||||
.patt-circ:nth-child(5),
|
||||
.patt-circ:nth-child(6) {
|
||||
-webkit-animation: fadeInUp .6s;
|
||||
animation: fadeInUp .6s
|
||||
}
|
||||
.patt-circ:nth-child(7),
|
||||
.patt-circ:nth-child(8),
|
||||
.patt-circ:nth-child(9) {
|
||||
-webkit-animation: fadeInUp .8s;
|
||||
animation: fadeInUp .8s
|
||||
}
|
||||
.mhn-ui-icon span {
|
||||
-webkit-animation: zoomIn .6s;
|
||||
animation: zoomIn .6s
|
||||
}
|
||||
.mhn-ui-bottom-btn {
|
||||
-webkit-animation: bounceInUp .8s;
|
||||
animation: bounceInUp .8s
|
||||
}
|
||||
.mhn-ui-credit-list .mhn-ui-credit:nth-child(1) {
|
||||
-webkit-animation: fadeInUp .4s;
|
||||
animation: fadeInUp .4s
|
||||
}
|
||||
.mhn-ui-credit-list .mhn-ui-credit:nth-child(2) {
|
||||
-webkit-animation: fadeInUp .5s;
|
||||
animation: fadeInUp .5s
|
||||
}
|
||||
.mhn-ui-credit-list .mhn-ui-credit:nth-child(3) {
|
||||
-webkit-animation: fadeInUp .6s;
|
||||
animation: fadeInUp .6s
|
||||
}
|
||||
.mhn-ui-credit-list .mhn-ui-credit:nth-child(4) {
|
||||
-webkit-animation: fadeInUp .7s;
|
||||
animation: fadeInUp .7s
|
||||
}
|
||||
.mhn-ui-credit-list .mhn-ui-credit:nth-child(5) {
|
||||
-webkit-animation: fadeInUp .8s;
|
||||
animation: fadeInUp .8s
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
# Login Form simple
|
||||
|
||||
Nice and Simple login form
|
||||
@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Login Form simple</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="login">
|
||||
<h1>Login</h1>
|
||||
<form method="post">
|
||||
<input type="text" name="u" placeholder="Username" required="required" />
|
||||
<input type="password" name="p" placeholder="Password" required="required" />
|
||||
<button type="submit" class="btn btn-primary btn-block btn-large">Let me in.</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,57 @@
|
||||
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
|
||||
.btn { display: inline-block; *display: inline; *zoom: 1; padding: 4px 10px 4px; margin-bottom: 0; font-size: 13px; line-height: 18px; color: #333333; text-align: center;text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); vertical-align: middle; background-color: #f5f5f5; background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); background-image: linear-gradient(top, #ffffff, #e6e6e6); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr=#ffffff, endColorstr=#e6e6e6, GradientType=0); border-color: #e6e6e6 #e6e6e6 #e6e6e6; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); border: 1px solid #e6e6e6; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); cursor: pointer; *margin-left: .3em; }
|
||||
.btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] { background-color: #e6e6e6; }
|
||||
.btn-large { padding: 9px 14px; font-size: 15px; line-height: normal; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
|
||||
.btn:hover { color: #333333; text-decoration: none; background-color: #e6e6e6; background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; -ms-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear; transition: background-position 0.1s linear; }
|
||||
.btn-primary, .btn-primary:hover { text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); color: #ffffff; }
|
||||
.btn-primary.active { color: rgba(255, 255, 255, 0.75); }
|
||||
.btn-primary { background-color: #4a77d4; background-image: -moz-linear-gradient(top, #6eb6de, #4a77d4); background-image: -ms-linear-gradient(top, #6eb6de, #4a77d4); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#6eb6de), to(#4a77d4)); background-image: -webkit-linear-gradient(top, #6eb6de, #4a77d4); background-image: -o-linear-gradient(top, #6eb6de, #4a77d4); background-image: linear-gradient(top, #6eb6de, #4a77d4); background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startColorstr=#6eb6de, endColorstr=#4a77d4, GradientType=0); border: 1px solid #3762bc; text-shadow: 1px 1px 1px rgba(0,0,0,0.4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.5); }
|
||||
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { filter: none; background-color: #4a77d4; }
|
||||
.btn-block { width: 100%; display:block; }
|
||||
|
||||
* { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box; }
|
||||
|
||||
html { width: 100%; height:100%; overflow:hidden; }
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
height:100%;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
background: #092756;
|
||||
background: -moz-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%),-moz-linear-gradient(top, rgba(57,173,219,.25) 0%, rgba(42,60,87,.4) 100%), -moz-linear-gradient(-45deg, #670d10 0%, #092756 100%);
|
||||
background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -webkit-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -webkit-linear-gradient(-45deg, #670d10 0%,#092756 100%);
|
||||
background: -o-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -o-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -o-linear-gradient(-45deg, #670d10 0%,#092756 100%);
|
||||
background: -ms-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), -ms-linear-gradient(top, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), -ms-linear-gradient(-45deg, #670d10 0%,#092756 100%);
|
||||
background: -webkit-radial-gradient(0% 100%, ellipse cover, rgba(104,128,138,.4) 10%,rgba(138,114,76,0) 40%), linear-gradient(to bottom, rgba(57,173,219,.25) 0%,rgba(42,60,87,.4) 100%), linear-gradient(135deg, #670d10 0%,#092756 100%);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3E1D6D', endColorstr='#092756',GradientType=1 );
|
||||
}
|
||||
.login {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -150px 0 0 -150px;
|
||||
width:300px;
|
||||
height:300px;
|
||||
}
|
||||
.login h1 { color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.3); letter-spacing:1px; text-align:center; }
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
background: rgba(0,0,0,0.3);
|
||||
border: none;
|
||||
outline: none;
|
||||
padding: 10px;
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
|
||||
border: 1px solid rgba(0,0,0,0.3);
|
||||
border-radius: 4px;
|
||||
box-shadow: inset 0 -5px 45px rgba(100,100,100,0.2), 0 1px 1px rgba(255,255,255,0.2);
|
||||
-webkit-transition: box-shadow .5s ease;
|
||||
-moz-transition: box-shadow .5s ease;
|
||||
-o-transition: box-shadow .5s ease;
|
||||
-ms-transition: box-shadow .5s ease;
|
||||
transition: box-shadow .5s ease;
|
||||
}
|
||||
input:focus { box-shadow: inset 0 -5px 45px rgba(100,100,100,0.4), 0 1px 1px rgba(255,255,255,0.2); }
|
||||
@ -0,0 +1,3 @@
|
||||
# Easy CSS content filter
|
||||
|
||||
I saw some JS filter setups, so naturally I had to see if I could make a CSS one. Pretty simple.
|
||||
@ -0,0 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Easy CSS content filter</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>FILTER BY COLOR</h1>
|
||||
<div class="container">
|
||||
<input type="radio" id="blue" name="color" />
|
||||
<label for="blue">BLUE</label>
|
||||
<input type="radio" id="red" name="color"/>
|
||||
<label for="red">RED</label>
|
||||
<input type="radio" id="green" name="color"/>
|
||||
<label for="green">GREEN</label>
|
||||
<input type="radio" id="reset" name="color"/>
|
||||
<label for="reset">RESET</label>
|
||||
|
||||
<div class="tile blue">1</div>
|
||||
<div class="tile red">2</div>
|
||||
<div class="tile blue">3</div>
|
||||
<div class="tile green">4</div>
|
||||
<div class="tile blue">5</div>
|
||||
<div class="tile red">6</div>
|
||||
<div class="tile red">7</div>
|
||||
<div class="tile green">8</div>
|
||||
<div class="tile blue">9</div>
|
||||
<div class="tile green">10</div>
|
||||
<div class="tile red">11</div>
|
||||
<div class="tile green">12</div>
|
||||
<div class="tile blue">13</div>
|
||||
<div class="tile blue">14</div>
|
||||
<div class="tile green">15</div>
|
||||
<div class="tile red">16</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,76 @@
|
||||
body{
|
||||
margin:0;
|
||||
text-align:center;
|
||||
font-family: Verdana;
|
||||
background:#f5f5f5;
|
||||
}
|
||||
h1 {
|
||||
text-align:center;
|
||||
}
|
||||
.container {
|
||||
width:90%;
|
||||
margin:0 auto;
|
||||
}
|
||||
input[type="radio"] {
|
||||
display:none;
|
||||
}
|
||||
label {
|
||||
width:23%;
|
||||
float:left;
|
||||
text-align:center;
|
||||
background:#ffffff;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
|
||||
color:#222222;
|
||||
padding:0.5%;
|
||||
margin:0.5%;
|
||||
margin-bottom:30px;
|
||||
cursor:pointer;
|
||||
}
|
||||
input[type="radio"][id="blue"]:checked + label {
|
||||
background:#6666ff;
|
||||
}
|
||||
input[type="radio"][id="blue"]:checked ~ .red, input[type="radio"][id="blue"]:checked ~ .green {
|
||||
width:0;
|
||||
height:0;
|
||||
padding:0;
|
||||
margin:0;
|
||||
opacity:0;
|
||||
}
|
||||
input[type="radio"][id="red"]:checked + label {
|
||||
background:#ff4466;
|
||||
}
|
||||
input[type="radio"][id="red"]:checked ~ .blue, input[type="radio"][id="red"]:checked ~ .green {
|
||||
width:0;
|
||||
height:0;
|
||||
padding:0;
|
||||
margin:0;
|
||||
opacity:0;
|
||||
}
|
||||
input[type="radio"][id="green"]:checked + label {
|
||||
background:#66dd99;
|
||||
}
|
||||
input[type="radio"][id="green"]:checked ~ .blue, input[type="radio"][id="green"]:checked ~ .red {
|
||||
width:0;
|
||||
height:0;
|
||||
padding:0;
|
||||
margin:0;
|
||||
opacity:0;
|
||||
}
|
||||
|
||||
.tile {
|
||||
width:23%;
|
||||
height:100px;
|
||||
float:left;
|
||||
transition:all 1s;
|
||||
margin:0.5%;
|
||||
padding:0.5%;
|
||||
}
|
||||
.green {
|
||||
background:#66dd99;
|
||||
}
|
||||
.blue {
|
||||
background:#6666ff;
|
||||
}
|
||||
.red {
|
||||
background:#ff4466;
|
||||
}
|
||||
@ -0,0 +1,3 @@
|
||||
# Multiple filters with checkboxes
|
||||
|
||||
|
||||
@ -0,0 +1,56 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" >
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Multiple filters with checkboxes</title>
|
||||
<link rel="stylesheet" href="./style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<h1>Multiple filters with checkboxes</h1>
|
||||
|
||||
<div id="options">
|
||||
<div class="option-set" data-group="brand">
|
||||
<input type="checkbox" value="" id="brand-all" class="all" checked /><label for="brand-all">all brands</label>
|
||||
<input type="checkbox" value=".brand1" id="brand1" /><label for="brand1">brand1</label>
|
||||
<input type="checkbox" value=".brand2" id="brand2" /><label for="brand2">brand2</label>
|
||||
<input type="checkbox" value=".brand3" id="brand3" /><label for="brand3">brand3</label>
|
||||
<input type="checkbox" value=".brand4" id="brand4" /><label for="brand4">brand4</label>
|
||||
</div>
|
||||
<div class="option-set" data-group="type">
|
||||
<input type="checkbox" value="" id="type-all" class="all" checked /><label for="type-all">all types</label>
|
||||
<input type="checkbox" value=".type1" id="type1" /><label for="type1">type1</label>
|
||||
<input type="checkbox" value=".type2" id="type2" /><label for="type2">type2</label>
|
||||
<input type="checkbox" value=".type3" id="type3" /><label for="type3">type3</label>
|
||||
<input type="checkbox" value=".type4" id="type4" /><label for="type4">type4</label>
|
||||
</div>
|
||||
<div class="option-set" data-group="color">
|
||||
<input type="checkbox" value="" id="color-all" class="all" checked /><label for="color-all">all colors</label>
|
||||
<input type="checkbox" value=".red" id="red" /><label for="red">red</label>
|
||||
<input type="checkbox" value=".blue" id="blue" /><label for="blue">blue</label>
|
||||
<input type="checkbox" value=".green" id="green" /><label for="green">green</label>
|
||||
<input type="checkbox" value=".yellow" id="yellow" /><label for="yellow">yellow</label>
|
||||
</div>
|
||||
<div class="option-set" data-group="size">
|
||||
<input type="checkbox" value="" id="size-all" class="all" checked /><label for="size-all">all sizes</label>
|
||||
<input type="checkbox" value=".uk-size8" id="uk-size8" /><label for="uk-size8">uk-size8</label>
|
||||
<input type="checkbox" value=".uk-size9" id="uk-size9" /><label for="uk-size9">uk-size9</label>
|
||||
<input type="checkbox" value=".uk-size10" id="uk-size10" /><label for="uk-size10">uk-size10</label>
|
||||
<input type="checkbox" value=".uk-size11" id="uk-size11" /><label for="uk-size11">uk-size11</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<h5>Choosen filters: (for dev-only)</h5>
|
||||
<p id="filter-display"></p>
|
||||
<hr>
|
||||
|
||||
<h5>Products choosed: (like digitec)</h5>
|
||||
<div id="container"></div>
|
||||
|
||||
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
|
||||
<script src='https://npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js'></script><script src="./script.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,141 @@
|
||||
/*jshint browser:true, undef: true, unused: true, jquery: true */
|
||||
|
||||
var $container;
|
||||
var filters = {};
|
||||
|
||||
$(function(){
|
||||
|
||||
$container = $('#container');
|
||||
|
||||
createContent();
|
||||
|
||||
var $filterDisplay = $('#filter-display');
|
||||
|
||||
$container.isotope();
|
||||
// do stuff when checkbox change
|
||||
$('#options').on( 'change', function( jQEvent ) {
|
||||
var $checkbox = $( jQEvent.target );
|
||||
manageCheckbox( $checkbox );
|
||||
|
||||
var comboFilter = getComboFilter( filters );
|
||||
|
||||
$container.isotope({ filter: comboFilter });
|
||||
|
||||
$filterDisplay.text( comboFilter );
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
var data = {
|
||||
brands: 'brand1 brand2 brand3 brand4'.split(' '),
|
||||
productTypes: 'type1 type2 type3 type4'.split(' '),
|
||||
colors: 'red blue yellow green'.split(' '),
|
||||
sizes: 'uk-size8 uk-size9 uk-size10 uk-size11'.split(' ')
|
||||
};
|
||||
|
||||
function createContent() {
|
||||
var brand, productType, color, size;
|
||||
var items = '';
|
||||
// dynamically create content
|
||||
for (var i=0, len1 = data.brands.length; i < len1; i++) {
|
||||
brand = data.brands[i];
|
||||
for (var j=0, len2 = data.productTypes.length; j < len2; j++) {
|
||||
productType = data.productTypes[j];
|
||||
for (var l=0, len3 = data.colors.length; l < len3; l++) {
|
||||
color = data.colors[l];
|
||||
for (var k=0, len4 = data.sizes.length; k < len4; k++) {
|
||||
size = data.sizes[k];
|
||||
var itemHtml = '<div class="item ' + brand + ' ' +
|
||||
productType + ' ' + color + ' ' + size + '">' +
|
||||
'<p>' + brand + '</p>' +
|
||||
'<p>' + productType + '</p>' +
|
||||
'<p>' + size + '</p>' +
|
||||
'</div>';
|
||||
items += itemHtml;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$container.append( items );
|
||||
}
|
||||
|
||||
|
||||
function getComboFilter( filters ) {
|
||||
var i = 0;
|
||||
var comboFilters = [];
|
||||
var message = [];
|
||||
|
||||
for ( var prop in filters ) {
|
||||
message.push( filters[ prop ].join(' ') );
|
||||
var filterGroup = filters[ prop ];
|
||||
// skip to next filter group if it doesn't have any values
|
||||
if ( !filterGroup.length ) {
|
||||
continue;
|
||||
}
|
||||
if ( i === 0 ) {
|
||||
// copy to new array
|
||||
comboFilters = filterGroup.slice(0);
|
||||
} else {
|
||||
var filterSelectors = [];
|
||||
// copy to fresh array
|
||||
var groupCombo = comboFilters.slice(0); // [ A, B ]
|
||||
// merge filter Groups
|
||||
for (var k=0, len3 = filterGroup.length; k < len3; k++) {
|
||||
for (var j=0, len2 = groupCombo.length; j < len2; j++) {
|
||||
filterSelectors.push( groupCombo[j] + filterGroup[k] ); // [ 1, 2 ]
|
||||
}
|
||||
|
||||
}
|
||||
// apply filter selectors to combo filters for next group
|
||||
comboFilters = filterSelectors;
|
||||
}
|
||||
i++;
|
||||
}
|
||||
|
||||
var comboFilter = comboFilters.join(', ');
|
||||
return comboFilter;
|
||||
}
|
||||
|
||||
function manageCheckbox( $checkbox ) {
|
||||
var checkbox = $checkbox[0];
|
||||
|
||||
var group = $checkbox.parents('.option-set').attr('data-group');
|
||||
// create array for filter group, if not there yet
|
||||
var filterGroup = filters[ group ];
|
||||
if ( !filterGroup ) {
|
||||
filterGroup = filters[ group ] = [];
|
||||
}
|
||||
|
||||
var isAll = $checkbox.hasClass('all');
|
||||
// reset filter group if the all box was checked
|
||||
if ( isAll ) {
|
||||
delete filters[ group ];
|
||||
if ( !checkbox.checked ) {
|
||||
checkbox.checked = 'checked';
|
||||
}
|
||||
}
|
||||
// index of
|
||||
var index = $.inArray( checkbox.value, filterGroup );
|
||||
|
||||
if ( checkbox.checked ) {
|
||||
var selector = isAll ? 'input' : 'input.all';
|
||||
$checkbox.siblings( selector ).removeAttr('checked');
|
||||
|
||||
|
||||
if ( !isAll && index === -1 ) {
|
||||
// add filter to group
|
||||
filters[ group ].push( checkbox.value );
|
||||
}
|
||||
|
||||
} else if ( !isAll ) {
|
||||
// remove filter from group
|
||||
filters[ group ].splice( index, 1 );
|
||||
// if unchecked the last box, check the all
|
||||
if ( !$checkbox.siblings('[checked]').length ) {
|
||||
$checkbox.siblings('input.all').attr('checked', 'checked');
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -0,0 +1,28 @@
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
padding: 5px;
|
||||
margin: 5px;
|
||||
color: white;
|
||||
float: left;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#filter-display {
|
||||
font-size: 18px;
|
||||
padding: 0.5em;
|
||||
border: 1px solid #CCC;
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.red { background: red; }
|
||||
.blue { background: blue; }
|
||||
.green { background: green; }
|
||||
.yellow { background: yellow; color: black; }
|
||||
Loading…
Reference in New Issue