<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Interactive Test — Yandi</title>
<style>
body {
margin:0;
padding:0;
font-family: 'Arial', sans-serif;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
height:100vh;
background: linear-gradient(135deg,#0b1220,#071226);
color:#e6eef8;
}
h1 {
font-size:36px;
color:#60a5fa;
margin-bottom:8px;
text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
}
p {
font-size:18px;
color:#9aa7bf;
margin-bottom:24px;
}
.card {
background: rgba(255,255,255,0.05);
padding: 24px;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(2,6,23,0.6);
text-align: center;
transition: transform 0.3s ease, background 0.3s ease;
}
.card:hover {
transform: scale(1.05);
background: rgba(255,255,255,0.1);
}
button {
padding:10px 20px;
border:none;
border-radius:8px;
background: #2563eb;
color:white;
font-weight:bold;
cursor:pointer;
transition: background 0.3s ease;
}
button:hover {
background:#60a5fa;
}
.color-boxes {
display:flex;
gap:12px;
margin-top:24px;
}
.box {
width:50px;
height:50px;
border-radius:6px;
cursor:pointer;
transition: transform 0.2s ease;
}
.box:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<h1>Hello There, I am Yandi! 😊</h1>
<p>Try clicking buttons and colored boxes below.</p>
<div class="card">
<button onclick="alert('Button clicked!')">Click Me</button>
<div class="color-boxes">
<div class="box" style="background:#2563eb;" onclick="changeBg('#2563eb')"></div>
<div class="box" style="background:#60a5fa;" onclick="changeBg('#60a5fa')"></div>
<div class="box" style="background:#34d399;" onclick="changeBg('#34d399')"></div>
<div class="box" style="background:#facc15;" onclick="changeBg('#facc15')"></div>
</div>
</div>
<script>
function changeBg(color){
document.body.style.background = color;
console.log('Background changed to', color);
}
// simple animation
setInterval(() => {
const hue = Math.floor(Math.random() * 360);
document.body.style.background = `linear-gradient(135deg,hsl(${hue},40%,10%),hsl(${(hue+60)%360},30%,5%))`;
}, 10000);
</script>
</body>
</html>
