Bvv
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kira's Pastel World</title>
<style>
body {
font-family: 'Comic Sans MS', 'Chalkboard SE', cursive, sans-serif;
background-color: #fdfcf0;
background-image: linear-gradient(135deg, #fdfcf0 0%, #e0f7fa 100%);
color: #6d6d6d;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
overflow: hidden; /* Keeps hearts from making the page scroll */
}
.container {
position: relative;
z-index: 10;
max-width: 450px;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
padding: 40px;
border-radius: 30px;
border: 5px solid #ffdeeb;
box-shadow: 0 8px 30px rgba(0,0,0,0.05);
text-align: center;
}
h1 { color: #b8a2e3; margin-bottom: 10px; }
.intro-text { font-size: 1.1rem; line-height: 1.6; margin-bottom: 25px; }
.game-box {
margin-top: 20px;
padding: 20px;
border-radius: 20px;
background: #e0f2f1;
border: 2px solid #b2dfdb;
position: relative;
}
#score { font-size: 36px; font-weight: bold; color: #81c784; margin: 10px 0; }
button {
background-color: #ffccbc;
color: #d84315;
border: none;
padding: 15px 40px;
font-size: 20px;
border-radius: 50px;
cursor: pointer;
box-shadow: 0 4px 0 #ffab91;
transition: all 0.1s;
outline: none;
}
button:active { transform: translateY(4px); box-shadow: 0 0px 0 #ffab91; }
.heart {
position: absolute;
color: #ffb7ce;
font-size: 20px;
pointer-events: none;
animation: floatUp 1s ease-out forwards;
}
@keyframes floatUp {
0% { transform: translateY(0) opacity(1); }
100% { transform: translateY(-100px) opacity(0); }
}
#rank { margin-top: 15px; font-style: italic; color: #9575cd; font-weight: bold; }
</style>
</head>
<body>
<div class="container">
<h1>Hey, I’m Kira! ✨</h1>
<div class="intro-text">
<p>I’m a picky eater but I still like food!</p>
<p><strong>Thanks for visiting my web!!</strong></p>
</div>
<div class="game-box" id="gameArea">
<h3>☁️ Clicker Game ☁️</h3>
<p id="score">0</p>
<button onclick="updateScore(event)">Tap Me!</button>
<p id="rank">Rank: Cookie Nibbler 🍪</p>
</div>
</div>
<script>
let count = 0;
function updateScore(e) {
count++;
document.getElementById('score').innerText = count;
// Create a floating heart
const heart = document.createElement('div');
heart.innerHTML = '❤️';
heart.className = 'heart';
heart.style.left = (e.clientX - 10) + 'px';
heart.style.top = (e.clientY - 20) + 'px';
document.body.appendChild(heart);
// Remove heart after animation
setTimeout(() => { heart.remove(); }, 1000);
// Update Rank
let rank = document.getElementById('rank');
if (count > 15) rank.innerText = "Rank: Snack Finder 🍓";
if (count > 40) rank.innerText = "Rank: Professional Eater 🍰";
if (count > 100) rank.innerText = "Rank: Pastel Queen 👑";
}
</script>
</body>
</html>