<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 ---------->
<div class="container">
<div class='hide-by-pass' pass-protected="true">
<div class='content-pass-protected'>
<div class="btn-center">
<a href="javascript:void(0)" class="btn btn-down">Downlload</a>
</div>
</div>
</div>
</div>
@import url('https://fonts.googleapis.com/css?family=Roboto');
*,*:before,*:after{box-sizing:border-box;vertical-align:baseline}
.container{max-width:700px;margin:0 auto;display:block;position:relative;background:#3F51B5;height:100%;padding:10px}
.hide-by-pass{display:block;margin:0 auto;padding:20px;max-width:400px;position:relative;background:#ffffff;font-family:'Roboto',sans-serif}
input,button{outline:none!important}
input{border:none!important}
#pass-input-bypass{width:100%;padding:12px 20px;margin:8px 0;display:inline-block;border:1px solid #ccc;border-radius:4px;box-sizing:border-box}
.content-pass-protected{margin-top:1em;margin-bottom:1em;display:block;position:relative;padding:5px 5px}
.btn-center{text-align:center}
#btn_reload{display:inline-block;padding:3px 9px;border:0.1em solid #fb2718;margin:0 1em;border-radius:5px;box-sizing:border-box;text-decoration:none;font-family:'Roboto',sans-serif;font-weight:300;color:#fb2718;background:transparent;cursor:pointer;text-align:center;transition:all 0.2s}
.btn-down{display:inline-block;padding:0.35em 1.2em;border:0.1em solid #555;margin:0;border-radius:0.12em;box-sizing:border-box;text-decoration:none;font-family:'Roboto',sans-serif;font-weight:300;color:#555;text-align:center;transition:all 0.2s}
.btn-down:hover{color:#fff;background-color:#555}
@media all and (max-width:30em){.btn-down{display:block;margin:0.4em auto}}
.title-wrp{color:#e65045;vertical-align:baseline;font-family:'Roboto',sans-serif;font-size:15px;margin:0;white-space:normal;word-break:break-word;padding:0;font-weight:bold;text-transform:uppercase}
.hide-by-pass,#pass-input-bypass{-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2);box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.12),0 1px 5px 0 rgba(0,0,0,0.2)}
#not-found,#has-error,#no-error{font-weight:bold;border-radius:5px;width:100%;height:100%;padding:10px}
#not-found{color:#fff;background:#4CAF50!important}
#has-error{color:#fff;background:#E91E63!important}
#no-error{color:#fff;background:#4CAF50!important}
#ticket-by{font-weight:normal;position:relative;display:block;color:#555}
#ticket-content{display:inline-block;position:relative;color:#ff3030;font-weight:bold}
$(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
}
var check_if_protected = $('.hide-by-pass');
$(check_if_protected).each(function(e, t) {
var atrib = $(this).attr('pass-protected');
var target = $('.content-pass-protected'),
saved = target.clone(true),
hide_bypass = $('<div class="not-have-permission"><h4 class="title-wrp">RESTRICTED CONTENT ! <br/> YOU DONT HAVE PERMISSION TO ACCESS THIS CONTENT !</h4></div><br/><input id="pass-input-bypass" type="text" placeholder="Your Ticket"><p><div id="ticket-by">Code : <div id="ticket-content"></div><button id="btn_reload">Reload</button></div></p><div id="check"><div id="not-found">No Error</div></div>');
if(atrib === 'true') {
target.remove();
hide_bypass.appendTo('.hide-by-pass')
var input = $('#pass-input-bypass'),
err_c = $('<div id="not-found">No Error</div>'),
ticket = codes(),
check = $('#check'),
tickets = $('#ticket-content'),
btn_reload = $('#btn_reload');
tickets.append(ticket);
btn_reload.click(function() {
tickets.html(codes())
})
input.on('keyup', function() {
if(input.val() === tickets.text()) {
check.html('<div id="no-error">Correct !</div>')
setTimeout(function() {
check.html('');
saved.appendTo(check);
}, 2000)
} else {
check.html('<div id="has-error">Try Again !</div>')
setTimeout(function() {
$('#has-error').remove()
}, 1000)
}
})
} else {
return false;
}
})
})
