<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Try to block telegramm app!</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="bw">
<div class="top">
<div class="left">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="body">
<h1>Block Telegram app?</h1>
<div class="buttons">
<span class="wrap yes-wrap"><input type="button" class="btn yes" value="yes"/></span>
<span class="wrap no-wrap"><input type="button" class="btn no" value="no"/></span>
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/Ulvbern/try-to-block-telegramm-app-vjNgGv */
* {
margin: 0;
padding: 0;
}
body {
background-color: #ea5757;
overflow: hidden;
}
.bw {
width: 480px;
height: 360px;
background-color: #eee;
border-radius: 4px;
margin: 100px auto 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.top {
width: 100%;
display: block;
height: 35px;
background-color: #bbb;
}
.top .left {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 55px;
padding: 10px;
}
.top .left span {
display: block;
border-radius: 50%;
width: 15px;
height: 15px;
background: #fff;
}
.top .left span:nth-child(1) {
background-color: #ea5757;
}
.top .left span:nth-child(2) {
background-color: #fbfb5c;
}
.top .left span:nth-child(3) {
background-color: #45e845;
}
.body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
.body h1 {
display: block;
text-align: center;
}
.body .buttons {
margin-top: 70px;
width: 180px;
position: relative;
}
.body .buttons .btn {
width: 45px;
padding: 8px;
border-radius: 4px;
border: 0;
background-color: #fefefe;
cursor: pointer;
}
.body .buttons .wrap {
padding: 20px;
}
.body .buttons .yes-wrap {
float: left;
position: absolute;
top: 0;
left: 0;
transition: top .3s, left .3s;
}
.body .buttons .no-wrap {
float: right;
}
@media screen and (max-width: 525px) {
.bw {
width: 90%;
}
}
@media screen and (max-width: 360px) {
h1 {
font-size: 20px;
}
}
/*Downloaded from https://www.codeseek.co/Ulvbern/try-to-block-telegramm-app-vjNgGv */
$(document).ready(function(){
var i = 0;
$('.yes-wrap').on('mouseover', function(){
if(i < 50){
$(this).css({
'top':getRandom(50 - $(this).parent().offset().top,
$(window).outerHeight() - $(this).parent().offset().top - 100),
'left':getRandom(50 - $(this).parent().offset().left,
$(window).outerWidth() - $(this).parent().offset().left - 100)
});
}
i++;
});
function getRandom(min, max) {
return Math.random() * (max - min) + min;
}
$('.btn.yes').on('click', function(){
$(this).attr('value', 'NO');
});
});