<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Website with Interactive Particles</title>
<style>
body {
margin: 0;
padding: 0;eee
background-color: #121212;fesgfrgess
color: white;
font-family: Arial, sans-serif;
height: 100vh;
overflow: hidden;
}
#particles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
text-align: center;
}
/* Shining text effect */
h1 {
font-size: 3em;
margin-bottom: 40px;
background: linear-gradient(90deg, white, #aaaaaa, white);
background-size: 200% auto;
color: white;
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: shineText 2s linear infinite;
}
@keyframes shineText {
0% { background-position: 200% center; }
100% { background-position: -200% center; }
}
/* Button styling */
button {
position: relative;
background-color: #1f1f1f;
color: white;
border: 3px solid white;
padding: 20px 60px;
font-size: 1.8em;
border-radius: 12px;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
overflow: hidden;
}
/* Glow + Hover Lift */
button:hover {
transform: translateY(-8px);
box-shadow: 0 15px 25px rgba(255, 255, 255, 0.4);
}
/* Shine effect */
button::before {
content: "";
position: absolute;
top: 0;
left: -50%;
width: 50%;
height: 100%;
background: linear-gradient(120deg, transparent, rgba(255,255,255,0.7),
transparent);
transform: skewX(-20deg);
pointer-events: none;
}
/* Continuous forward/backward shine when hovered */
button.hovered::before {
animation: shineContinuous 2s infinite alternate;
}
@keyframes shineContinuous {
0% { left: -50%; }
100% { left: 125%; }
}
</style>
</head>
<body>
<canvas id="particles"></canvas>
<div class="content">
<h1>NOTHING TO SEE HERE..</h1>
<button id="rickrollBtn">Click Me</button>
</div>
<script>
// Particle background
const canvas = document.getElementById("particles");
const ctx = canvas.getContext("2d");
let particles = [];
let mouse = { x: null, y: null, radius: 100 };
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener("resize", resizeCanvas);
resizeCanvas();
window.addEventListener("mousemove", function(e) {
mouse.x = e.x;
mouse.y = e.y;
});
for (let i = 0; i < 120; i++) {
particles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
size: Math.random() * 3 + 1,
speedX: (Math.random() - 0.5) * 1,
speedY: (Math.random() - 0.5) * 1
});
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "white";
particles.forEach(p => {
p.x += p.speedX;
p.y += p.speedY;
if (p.x < 0 || p.x > canvas.width) p.speedX *= -1;
if (p.y < 0 || p.y > canvas.height) p.speedY *= -1;
let dx = mouse.x - p.x;
let dy = mouse.y - p.y;
let distance = Math.sqrt(dx * dx + dy * dy);
if (distance < mouse.radius) {
p.x -= dx / 10;
p.y -= dy / 10;
}
ctx.beginPath();
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
ctx.fill();
});
requestAnimationFrame(animate);
}
animate();
// Rickroll button
const button = document.getElementById("rickrollBtn");
button.addEventListener("click", () => {
window.open("https://www.youtube.com/watch?v=dQw4w9WgXcQ", "_blank");
});
// Shine forward/back continuously
button.addEventListener("mouseenter", () => {
button.classList.add("hovered");
});
button.addEventListener("mouseleave", () => {
button.classList.remove("hovered");
});
</script>
</body>
</html>
