<!
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;
background-color: #121212;
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 */
[Link]::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 = [Link]("particles");
const ctx = [Link]("2d");
let particles = [];
let mouse = { x: null, y: null, radius: 100 };
function resizeCanvas() {
[Link] = [Link];
[Link] = [Link];
}
[Link]("resize", resizeCanvas);
resizeCanvas();
[Link]("mousemove", function(e) {
mouse.x = e.x;
mouse.y = e.y;
});
for (let i = 0; i < 120; i++) {
[Link]({
x: [Link]() * [Link],
y: [Link]() * [Link],
size: [Link]() * 3 + 1,
speedX: ([Link]() - 0.5) * 1,
speedY: ([Link]() - 0.5) * 1
});
}
function animate() {
[Link](0, 0, [Link], [Link]);
[Link] = "white";
[Link](p => {
p.x += [Link];
p.y += [Link];
if (p.x < 0 || p.x > [Link]) [Link] *= -1;
if (p.y < 0 || p.y > [Link]) [Link] *= -1;
let dx = mouse.x - p.x;
let dy = mouse.y - p.y;
let distance = [Link](dx * dx + dy * dy);
if (distance < [Link]) {
p.x -= dx / 10;
p.y -= dy / 10;
}
[Link]();
[Link](p.x, p.y, [Link], 0, [Link] * 2);
[Link]();
});
requestAnimationFrame(animate);
}
animate();
// Rickroll button
const button = [Link]("rickrollBtn");
[Link]("click", () => {
[Link]("[Link] "_blank");
});
// Shine forward/back continuously
[Link]("mouseenter", () => {
[Link]("hovered");
});
[Link]("mouseleave", () => {
[Link]("hovered");
});
</script>
</body>
</html>
