<!DOCTYPE html>
<html>
<head>
<title>Spread the love</title>
<style>
body {
font-family: 'Courier New', Courier, monospace;
text-align: center;
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
}
.border-container {
border: 31px solid #301934;
padding: 20px;
background-color: #5D3FD3;
}
.content {
color: #FFA500;
font-weight: bold;
text-shadow: -1px -1px 0 orange, 1px -1px 0 #FFFF00, -1px 1px 0 orange, 1px 1px 0 #FFFF00,
2px 2px 4px #000, -1px -1px 4px black;
}
button {
font-family: 'Century Gothic', sans-serif;
padding: 10px 20px;
font-size: 18px;
margin-top: 20px;
cursor: pointer;
border: 3px solid purple;
border-radius: 5px;
background-color: #CC5500;
color: purple;
font-weight: bold;
text-shadow: -1px -1px 0 #CC5500, 1px -1px 0 #FFFF00, -1px 1px 0 #CC5500, 1px 1px 0 #FFFF00;
}
.typewriter {
overflow: hidden;
border-right: 2px solid #483D8B;
white-space: nowrap;
margin: 0 auto;
letter-spacing: 2px;
width: max-content;
animation: typing 2s steps(40) 1s forwards, animateText 4s ease-in-out infinite alternate;
}
@keyframes typing {
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes animateText {
0% {
letter-spacing: 5px;
transform: rotateY(0deg);
}
50% {
letter-spacing: 10px;
transform: rotateY(180deg);
}
100% {
letter-spacing: 5px;
transform: rotateY(360deg);
}
}
/* New styles for the animation */
.bottom-animation {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
animation: moveUp 4s ease-in-out infinite;
}
@keyframes moveUp {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0);
}
}
</style>
</head>
<body>
<div class="border-container">
<div class="content">
<h1>💜</h1>
<p id="compliment" class="typewriter"></p>
<button onclick="generateCompliment()">
^_^<br>(Click me)
</button>
</div>
</div>
<div class="bottom-animation">
<img src=" " alt="Animated Image" width="200" height="200">
</div>
<script>
const compliments = [
"You are worthy",
"🫂",
"🤗🤗🤗",
"You are more than enough",
"You are loved\n💜🧡",
"You're as dazzling as a\nshooting star!\n💫",
"Your smile\ncould light up\nthe darkest night.\n🌝",
"You're a unicorn\nin a field of horses!\n🦄",
"Your creativity\nknows no bounds!",
"You have a heart of gold\nand a mind of brilliance!\n🤯",
"You're a treasure\nchest\nof awesomeness!",
"Your positivity\nis contagious!",
"Your determination\nis admirable!\n🤩",
"Your generosity\nis boundless!",
"You have an incredible\n-ly weird\nsense of humor!",
"Your resilience\nis inspiring!",
"You radiate\ncalmness\nin a mad world."
];
function generateCompliment() {
const randomIndex = Math.floor(Math.random() * compliments.length);
const compliment = compliments[randomIndex];
document.getElementById('compliment').innerText = '';
setTimeout(function() {
document.getElementById('compliment').innerText = compliment;
}, 100);
}
</script>
</body>
</html>
Redirect Notice
