HTTP-Status-Anime/206.html at main · SLAVUSworks/HTTP-Status-Anime · 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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!doctype html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>206 - Partial Content</title>

    <script src="https://cdn.tailwindcss.com"></script>

    <link
      rel="icon"
      type="image/x-icon"
      href="https://github.com/SLAVUSworks/HL-Web-ICON/blob/master/slavusworks.png?raw=true"
    />

    <link rel="stylesheet" href="root.css" />

    <style>
      @keyframes float {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-14px);
        }
      }

      @keyframes gradient {
        0% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
        100% {
          background-position: 0% 50%;
        }
      }

      .animated-bg {
        background: linear-gradient(270deg, #1e3a8a, #2563eb, #0f172a);
        background-size: 600% 600%;
        animation: gradient 14s ease infinite;
      }

      .float {
        animation: float 4s ease-in-out infinite;
      }
    </style>
  </head>

  <body class="relative min-h-screen overflow-hidden animated-bg text-white">
    <div id="particles" class="absolute inset-0 pointer-events-none"></div>

    <div
      class="relative z-10 flex flex-col items-center justify-center min-h-screen px-4 text-center"
    >
      <div
        class="w-56 sm:w-64 border-4 border-white/80 p-2 rounded-xl shadow-xl float"
      >
        <img
          src="https://c.tenor.com/pHht4Q82LscAAAAC/cake-food.gif"
          alt="206 Partial Content"
          class="w-full rounded-lg"
        />
      </div>

      <h1
        class="mt-6 text-6xl sm:text-7xl font-extrabold tracking-tight drop-shadow-lg"
      >
        206
      </h1>

      <h2 class="text-xl sm:text-2xl font-semibold opacity-90">
        Partial Content
      </h2>

      <p class="mt-2 text-sm sm:text-base text-white/80 max-w-md">
        Server berhasil memproses permintaan dan mengirimkan sebagian konten
        yang diminta.
      </p>

      <div class="mt-6 flex gap-3">
        <button
          onclick="window.history.back()"
          class="px-5 py-2 bg-blue-500 hover:bg-blue-600 active:scale-95 transition rounded-lg shadow font-semibold"
        >
          Kembali
        </button>

        <a
          href="/"
          class="px-5 py-2 bg-white/20 hover:bg-white/30 backdrop-blur rounded-lg shadow font-semibold"
        >
          Beranda
        </a>
      </div>
    </div>

    <footer class="absolute bottom-2 w-full text-center z-20">
      <div
        class="group flex flex-col items-center gap-1 opacity-60 hover:opacity-100 transition"
      >
        <img
          src="https://github.com/SLAVUSworks/HL-Web-ICON/blob/master/slavusworks.png?raw=true"
          class="w-9 h-9 object-contain group-hover:scale-105 transition"
        />

        <p
          class="text-[10px] sm:text-xs text-white/80 tracking-wide leading-tight"
        >
          ©2026 [Kosongin aja]<br />
          <span class="font-bold">SLAVUSworks</span>
        </p>
      </div>
    </footer>

    <script>
      document.addEventListener("mousemove", (e) => {
        const x = (window.innerWidth / 2 - e.clientX) / 40;
        const y = (window.innerHeight / 2 - e.clientY) / 40;
        document.querySelector(".float").style.transform =
          `translate(${x}px, ${y}px)`;
      });

      const container = document.getElementById("particles");
      for (let i = 0; i < 16; i++) {
        const dot = document.createElement("div");
        dot.className = "absolute rounded-full bg-white/30";
        dot.style.width = dot.style.height = Math.random() * 6 + 4 + "px";
        dot.style.left = Math.random() * 100 + "%";
        dot.style.top = Math.random() * 100 + "%";
        dot.style.animation = `float ${
          Math.random() * 6 + 4
        }s ease-in-out infinite`;
        container.appendChild(dot);
      }
    </script>
  </body>
</html>