michael
/
web-html5-scripts
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
web-html5-scripts/forms-and-login-pages/lock-screen-login/index.html

196 lines
8.4 KiB
HTML
Raw Permalink Blame History

<!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">&nbsp;</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">&nbsp;</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">&nbsp;</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>
Reference in New Issue View Git Blame Copy Permalink