HTTP-Status-Anime/maintenance.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
<!doctype html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Maintenance</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(-12px);
        }
      }

      .float {
        animation: float 4s ease-in-out infinite;
      }

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

      .animated-bg {
        background: linear-gradient(270deg, #fde68a, #facc15, #fb923c);
        background-size: 600% 600%;
        animation: gradient 10s ease infinite;
      }
    </style>
  </head>

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

    <div
      class="relative z-10 flex items-center justify-center min-h-screen px-4"
    >
      <div class="text-center max-w-md w-full">
        <img
          src="https://media1.tenor.com/m/NvTh_ZMUNM4AAAAC/kobayashi-kobayashi-dragon-maid.gif"
          alt="Maintenance"
          class="mx-auto w-40 sm:w-48 rounded-xl shadow-xl float"
        />

        <h1
          class="mt-6 text-3xl sm:text-4xl font-extrabold text-yellow-900 tracking-tight"
        >
          Website dalam Perbaikan
        </h1>

        <p class="mt-3 text-base sm:text-lg text-yellow-800/90">
          Kami sedang melakukan pemeliharaan sistem.<br />
          Silakan kembali lagi nanti.
        </p>

        <div class="mt-6 flex justify-center gap-3">
          <span
            class="px-4 py-2 bg-yellow-900 text-white rounded-full text-sm shadow-lg"
          >
            Maintenance Mode
          </span>
          <span
            class="px-4 py-2 bg-white/80 backdrop-blur rounded-full text-sm"
          >
            ETA: Kapan-Kapan
          </span>
        </div>
      </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-blue-600 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) / 30;
        const y = (window.innerHeight / 2 - e.clientY) / 30;

        document.querySelector(".float").style.transform =
          `translate(${x}px, ${y}px)`;
      });

      const container = document.getElementById("particles");
      for (let i = 0; i < 20; i++) {
        const dot = document.createElement("div");
        dot.className = "absolute rounded-full bg-white/40";
        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>