Приглашение погулять

<!DOCTYPE html>
<html>
<center><head>
<title>Приглашение на прогулку</title>
<style>
#image1, #image2 {
display: inline-block;
margin-top: 20px;
width: 200px;
height: 200px;
}

#image2 {
display: none;
}

#images {
text-align: center;
}

.button {
background-color: pink;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
margin: 5px;
cursor: pointer;
}

#noButton {
position: absolute;
}
</style>
</head>
<body>
<h1>Ты пойдешь со мной гулять?</h1>
<h4>И, да, попробуй отказаться (не сможешь).</h4>
<div id="images">
<img id="image1" src="https://media.tenor.com/ivKWdfdbV3EAAAAi/goma-goma-cat.gif" alt="Image 1">
<img id="image2" src="https://media.tenor.com/pqx__VdGqfYAAAAi/yelynn-yelynn-hun-hun.gif" alt="Image 2">
</div>
<button class="button" onclick="confirmed()">Да</button>
<button id="noButton" class="button" onmousemove="moveButton()">Нет</button>

<script>
function confirmed() {
document.getElementById('image1').style.display = 'none';
document.getElementById('image2').style.display = 'inline-block';
alert('Я люблю тебя!');
}

function moveButton() {
var button = document.getElementById('noButton');
var x = Math.random() * (window.innerWidth - button.clientWidth);
var y = Math.random() * (window.innerHeight - button.clientHeight);
button.style.left = x + 'px';
button.style.top = y + 'px';
}
</script></center>
</body>
</html>

Crack-portal.ru