FunStuff/forums.html at main · BunnyBoyAPPLE/FunStuff · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Forums</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<header class="neon-header">
  <h1 class="glow-small">Forums</h1>
  <nav>
    <a href="index.html">Home</a>
    <a href="games.html">Games</a>
    <a href="comics.html">Comics</a>
    <a href="random.html">Random Stuff</a>
    <a href="forums.html">Forums</a>
  </nav>
</header>

<h2>Forums</h2>
<p>This is a placeholder. I can help you add a real comment system when you're ready.</p>
<script>
document.addEventListener("mousemove", e => {
  const dot = document.createElement("div");
  dot.className = "trail-dot";
  dot.style.left = e.pageX + "px";
  dot.style.top = e.pageY + "px";
  dot.style.backgroundColor = `hsl(${Math.random() * 360}, 100%, 60%)`;
  document.body.appendChild(dot);

  setTimeout(() => dot.remove(), 500);
});
</script>
<div class="fog"></div>
<script>
for (let i = 0; i < 40; i++) {
  const p = document.createElement("div");
  p.className = "particle";
  p.style.left = Math.random() * 100 + "vw";
  p.style.top = Math.random() * 100 + "vh";
  p.style.backgroundColor = `hsl(${Math.random()*360}, 100%, 70%)`;
  p.style.animationDuration = 5 + Math.random() * 10 + "s";
  document.body.appendChild(p);
}
</script>
<div class="starfield"></div>
<div class="starfield"></div>
<div class="starfield-foreground"></div>
<script>
document.addEventListener("mousemove", e => {
  const x = (e.clientX / window.innerWidth) * 100;
  const y = (e.clientY / window.innerHeight) * 100;
  document.documentElement.style.setProperty("--x", x + "%");
  document.documentElement.style.setProperty("--y", y + "%");
});
</script>

</body>
</html>