Bootstrap Snippet Based Pattern Lock Example using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>SVG Based Pattern Lock Example</title>
    <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
    <style media="screen">
        * {
            box-sizing: border-box;
        }
        html,
        body {
            padding: 0;
            margin: 0;
            height: 100vh;
            max-height: 100vh;
            overflow: hidden;
        }
        body {
            font-family: 'Varela Round', sans-serif;
            background-color: #fafafa;
        }
        .container {
            margin: 150px auto;
            height: 100%;
        }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
svg.patternlock g.lock-lines line {
    stroke-width: 1.5;
    stroke: black;
    opacity: 0.5;
}
svg.patternlock g.lock-dots circle {
    stroke: transparent;
    fill: black;
    stroke-width: 13.5;
}
svg.patternlock g.lock-actives circle {
    fill: black;
    opacity: .2;
    animation: lock-activate-dot .15s 0s ease 1;
    transform-origin: center;
}
svg.patternlock g.lock-lines line {
    stroke-width: 1.5;
    stroke-linecap: round;
}
svg.patternlock.success g.lock-actives circle {
    fill: green;
}
svg.patternlock.error g.lock-actives circle {
    fill: red;
}
@keyframes lock-activate-dot {
    0% {
        transform: scale(0);
    }
    75% {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
'use strict';
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
(function (factory) {
    var global = Function('return this')() || (0, eval)('this');
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['jquery'], function ($) {
            return factory($, global);
        });
    } else if ((typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) === 'object') {
        // Node. Does not work with strict CommonJS, but
        // only CommonJS-like environments that support module.exports,
        // like Node.
        module.exports = factory(require('jquery'), global);
    } else {
        // Browser globals (global is window)
        global.PatternLock = factory(global.jQuery, global);
    }
})(function ($, window) {
    var _scrollKeys;
    var svgns = 'http://www.w3.org/2000/svg';
    var moveEvent = 'touchmove mousemove';
    var scrollKeys = (_scrollKeys = {
        37: true, // left
        38: true, // up
        39: true, // right
        40: true, // down
        32: true }, _defineProperty(_scrollKeys, '38', true), _defineProperty(_scrollKeys, 34, true), _defineProperty(_scrollKeys, 35, true), _defineProperty(_scrollKeys, 36, true), _scrollKeys);
    function vibrate() {
        navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Based Pattern Lock Example"
Bootstrap 4.1.1 Snippet by Shailesh Kushwaha

Related: See More

Questions / Comments:

"Based Pattern Lock Example" Bootstrap 4.1.1 Snippet by Shailesh Kushwaha

Related: See More

Questions / Comments:

"Based Pattern Lock Example"
Bootstrap 4.1.1 Snippet by Shailesh Kushwaha