Menambahkan pemain online di index.html

DarkIgnite · web-flow · commit bfae6ba6f678 · 2025-05-15T11:05:53.000+08:00
menampilkan jumlah pemain yang online di server
diff --git a/index.html b/index.html
@@ -16,6 +16,48 @@
     }
   </script>
 </head>
+<script>
+  const serverIP = "leftycraft.my.id";
+
+async function updateStatusButton() {
+  const btn = document.getElementById("status-btn");
+  if (!btn) return;
+
+  try {
+    const response = await fetch(`https://api.mcsrvstat.us/2/${serverIP}`);
+    const data = await response.json();
+
+    if (data.online) {
+      btn.innerHTML = `<i class="fa-solid fa-signal"></i> Pemain Online: ${data.players.online}/${data.players.max}`;
+      btn.classList.remove("btn-yellow");
+      btn.classList.add("btn-green");
+    } else {
+      btn.innerHTML = `<i class="fa-solid fa-signal"></i> Offline`;
+      btn.classList.remove("btn-yellow", "btn-green");
+      btn.style.backgroundColor = "#e53935";
+      btn.style.color = "#fff";
+    }
+  } catch (e) {
+    console.error("Gagal ambil status:", e);
+    btn.innerHTML = `<i class="fa-solid fa-signal"></i> Tidak dapat terhubung`;
+    btn.classList.remove("btn-yellow", "btn-green");
+    btn.style.backgroundColor = "#999";
+    btn.style.color = "#000";
+  }
+}
+
+
+  function copyIP() {
+    navigator.clipboard.writeText(serverIP).then(() => {
+      alert("IP berhasil disalin: " + serverIP);
+    });
+  }
+
+  // Jalankan hanya setelah DOM siap
+  document.addEventListener("DOMContentLoaded", updateStatusButton);
+</script>
+
+
 <body>
   <header class="header">
     <div class="logo">
@@ -36,7 +78,10 @@
     <section class="hero">
       <h1>Selamat Datang di LeftyCraft</h1>
       <p>Temukan informasi lengkap dan dukung server dengan membeli rank!</p>
-      <a href="https://discord.gg/pY6QrjEshm" class="btn-yellow" target="_blank"><i class="fa-brands fa-discord"></i> Join Server</a>
+      <button id="status-btn" class="btn-yellow" onclick="copyIP()">
+  <i class="fa-solid fa-signal"></i> Mengecek status...
+</button>
+
     </section>
 
     <section class="fitur">
@@ -71,6 +116,12 @@ <h2>Informasi Server</h2>
         <div class="link-card"><i class="fa-brands fa-whatsapp"></i> Group Wa: <a href="https://chat.whatsapp.com/BQBZzXMyPVoDP5NZ6NvYUf" target="_blank">chat.whatsapp.com/BQBZzXMyPVoDP5NZ6NvYUf</a></div>
       </div>
     </section>
+<section class="server-status">
+  <h2>Status Server</h2>
+  <div id="status">
+    <p>Mengecek status server...</p>
+  </div>
+</section>
 
     <section class="tutorial">
       <h2>Sosial Media</h2>
diff --git a/style.css b/style.css
@@ -118,7 +118,6 @@ nav a.btn-yellow:hover,
   }
 }
 
-}
 /* TRANSISI HALAMAN */
 .page-content {
   animation: fadeSlideIn 0.7s ease-out;
@@ -134,6 +133,40 @@ nav a.btn-yellow:hover,
     transform: translateY(0);
   }
 }
+.server-status {
+  background: #121212;
+  padding: 50px 20px;
+  text-align: center;
+}
+
+.server-status h2 {
+  color: #ffcc00;
+  font-size: 2rem;
+  margin-bottom: 20px;
+}
+
+#status {
+  background: #1f1f1f;
+  padding: 20px;
+  border-radius: 10px;
+  display: inline-block;
+  color: white;
+  font-size: 1.1rem;
+}
+#status-btn {
+  font-size: 1.1rem;
+  padding: 12px 20px;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: bold;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+#status-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+}
 
 
 /* khusus untuk tombol di dalam rank-card */
@@ -157,6 +190,34 @@ nav a.btn-yellow {
 nav a.btn-yellow:hover {
   background: #e6b800;
 }
+/* Tombol status online dengan glow hijau */
+.btn-green {
+  background: #4caf50;
+  color: #fff;
+  padding: 12px 20px;
+  border-radius: 8px;
+  font-weight: bold;
+  border: none;
+  cursor: pointer;
+  transition: background 0.3s, box-shadow 0.3s;
+  text-align: center;
+  font-size: 1.1rem;
+}
+
+.btn-green:hover {
+  background: #66bb6a;
+  box-shadow: 0 0 8px #4caf50, 0 0 16px #4caf50, 0 0 32px #4caf50;
+  animation: pulseGreen 1.2s infinite alternate;
+}
+
+@keyframes pulseGreen {
+  from {
+    box-shadow: 0 0 6px #4caf50, 0 0 12px #4caf50;
+  }
+  to {
+    box-shadow: 0 0 12px #4caf50, 0 0 24px #4caf50;
+  }
+}
 
 @media (max-width: 768px) {
   .header {
