Multi Fungsi Konten Locker (Content Locker) Terbaru

Created By Agiel Triono / Dibuat oleh Agiel Triono

by Agiel Triono

HTML

<div class="passprotective">
   <div pass-protected="true">
       <div class="btn-center">
          <a href="javascript:void(0)" class="btn btn-down">Download 1</a>
        </div>
    </div>

   <div pass-protected="true">
       <div class="btn-center">
          <a href="javascript:void(0)" class="btn btn-down">Download 2</a>
        </div>
    </div>

   <div pass-protected="true">
       <div class="btn-center">
          <a href="javascript:void(0)" class="btn btn-down">Download 3</a>
        </div>
    </div>

   <div pass-protected="true">
       <div class="btn-center">
          <a href="javascript:void(0)" class="btn btn-down">Download 4</a>
        </div>
    </div>
</div>

CSS

html,body{margin:0;padding:0;display:block;height: 100%;}
*,*:before,*:after{box-sizing:border-box;vertical-align:baseline}
input,button{outline:none!important}
input{border:none!important}
.passprotective{width:100%;height:auto;margin:0 auto;display:block;position:relative;background:#fff;padding:10px;box-sizing:border-box}
.hide-by-pass{display:block;margin:20px auto;padding:20px;width:100%;height:auto;max-width:400px;position:relative;background:#fff;font-family:'Roboto',sans-serif;box-sizing:border-box}
.hide-by-pass .input-row{margin:0;padding:0;position:relative}
.hide-by-pass .pass-input-bypass::-webkit-input-placeholder{color:#222}
.hide-by-pass .pass-input-bypass::-moz-placeholder{color:#222}
.hide-by-pass .pass-input-bypass:-ms-input-placeholder{color:#222}
.hide-by-pass .pass-input-bypass:-moz-placeholder{color:#222}
.hide-by-pass .pass-input-bypass{margin:0;padding:10px}
.hide-by-pass .pass-input-bypass{font: 15px/24px "Lato", Arial, sans-serif; color: #555; width: 100%; box-sizing: border-box; letter-spacing: 1px;background:none;}
.hide-by-pass .pass-input-bypass ~ .focus-border:before,
.hide-by-pass .pass-input-bypass ~ .focus-border:after{content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 2px; background-color: #F1C40F; transition: 0.4s;}
.hide-by-pass .pass-input-bypass ~ .focus-border:after{top: auto; bottom: 0;}
.hide-by-pass .pass-input-bypass ~ .focus-border i:before,
.hide-by-pass .pass-input-bypass ~ .focus-border i:after{content: ""; position: absolute; top: 50%; left: 0; width: 2px; height: 0; background-color: #F1C40F; transition: 0.6s;}
.hide-by-pass .pass-input-bypass ~ .focus-border i:after{left: auto; right: 0;}
.hide-by-pass .pass-input-bypass:focus ~ .focus-border:before,
.hide-by-pass .pass-input-bypass:focus ~ .focus-border:after{left: 0; width: 100%; transition: 0.4s;}
.hide-by-pass .pass-input-bypass:focus ~ .focus-border i:before,
.hide-by-pass .pass-input-bypass:focus ~ .focus-border i:after{top: 0; height:...

JavaScript

//<![CDATA[
$(function() {
    function codes() {
        var val = "";
        var arr = "0123456789";
        for(var i = 0; i < 5; i++)
            val += arr.charAt(Math.floor(Math.random() * arr.length));
        return val
    }
    $('[pass-protected]').each(function(e, t) {
        var e = $(this),
            atrib = e.attr('pass-protected'),
            saved = e.children().clone(true),
            hide_bypass = $('<div class="hide-by-pass"><div class="not-have-permission"><div class="title-wrp"><svg viewBox="-85 -85.625 190 190"><path fill="none" stroke="gray" stroke-width="23.076" d="M10-71.391c25.492 0 46.152 20.66 46.152 46.151v46.152c0 25.491-20.66 46.151-46.152 46.151-25.491 0-46.151-20.66-46.151-46.151V-25.24c0-25.49 20.66-46.151 46.151-46.151z"/><path fill="#b80404" d="M-47.689-13.701H67.689c6.373 0 11.538 5.165 11.538 11.538v92.304c0 6.373-5.165 11.538-11.538 11.538H-47.689c-6.373 0-11.538-5.165-11.538-11.538V-2.163c-.001-6.373 5.164-11.538 11.538-11.538z"/></svg><div class="desc">Protected Content</div></div></div><br/><div class="input-row"><input class="pass-input-bypass" type="text" placeholder="Your Ticket"/><span class="focus-border"><i/></span></div><p><div class="ticket-by">Code : <div class="ticket-content"></div><button class="btn_reload">Reload</button></div></p><div class="check"><div class="not-found">Please insert code.</div></div></div>');
        if(e != null) {
            e.children().remove();
            hide_bypass.appendTo(e)

            var input = e.find('.pass-input-bypass'),
                err_c = $('<div class="not-found">No Error</div>'),
                ticket = codes(),
                check = e.find('.check'),
                tickets = e.find('.ticket-content'),
                btn_reload = e.find('.btn_reload');
            tickets.append(ticket);
            btn_reload.click(function() {
                tickets.html(codes())
            })
            input.on('keyup', function() {
               ...