feat: update minecraft server query, change bg image, add text bg (ca…

…rousel-caption)

assets/js/main.js

@@ -1,19 +1,24 @@
+function initServerData(serverIp, serverPort) {
+    function fetchData() {
+        fetch('https://mcapi.us/server/query?ip=' + serverIp + '&port=' + serverPort)
+            .then(response => response.json())
+            .then(data => handleServerStatus(data))
+            .catch(error => console.error('Error:', error));
+    }
 
-function initServerData(serverIp,serverPort){
-    fetch('https://mcapi.us/server/status?ip='+serverIp+'&port='+serverPort)
-    .then(response => response.json())
-    .then(data => handleServerStatus(data));
-
-    function handleServerStatus(data){
-        if(data.status=='error'){
-            console.log(data.error);
+    function handleServerStatus(data) {
         const playerCounter = document.getElementById("player-count");
-        playerCounter.innerHTML = "offline";
-            return false;
+        if (data.status === 'error') {
+            console.log(data.error);
+            playerCounter.innerHTML = "offline";
+        } else {
+            playerCounter.innerHTML = data.players.now + " online";
         }
-        const playerCounter = document.getElementById("player-count");
-        playerCounter.innerHTML = data.players.now + " online";
-    } 
+    }
+
+    fetchData();
+    setInterval(fetchData, 10000);
 }
+
 // tester
-initServerData("org.cosmosmc.org","19132");
+initServerData("play.nethergames.org", "19132");

index.html

@@ -81,36 +81,36 @@
         <div class="carousel-inner">
           <div class="carousel-item active" style="height: 500px;">
             <img src="assets/images/view/carousel/cr_1.jpg" class="d-block w-100" alt="cr_1">
-            <div class="carousel-caption">
+            <div class="carousel-caption" style="background-color: rgba(0, 0, 0, 0.5);">
               <h5>Lorem 1</h5>
               <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio ab eveniet iure eaque et. Officia reprehenderit, aspernatur facere, sint quasi incidunt numquam ratione provident iure culpa fugit dolorem nesciunt voluptas?</p>
             </div>
           </div>
           <div class="carousel-item" style="height: 500px;">
             <img src="assets/images/view/carousel/cr_2.jpg" class="d-block w-100" alt="cr_2">
-            <div class="carousel-caption">
+            <div class="carousel-caption" style="background-color: rgba(0, 0, 0, 0.5);">
               <h5>Lorem 2</h5>
               <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, numquam commodi illo nobis minima soluta delectus rerum ut beatae ullam explicabo sit molestiae cumque aperiam aliquam, in itaque neque quisquam.</p>
             </div>
           </div>
           <div class="carousel-item" style="height: 500px;">
-            <img src="assets/images/view/carousel/cr_4.jpg" class="d-block w-100" alt="cr_4">
-            <div class="carousel-caption">
-              <h5>Lorem 4</h5>
+            <img src="assets/images/view/carousel/cr_3.jpg" class="d-block w-100" alt="cr_4">
+            <div class="carousel-caption" style="background-color: rgba(0, 0, 0, 0.5);">
+              <h5>Lorem 3</h5>
               <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum necessitatibus dignissimos temporibus velit consequatur veniam quam, harum quis. Obcaecati vero, hic ab porro ea animi! Provident eum sed eaque nostrum.</p>
             </div>
           </div>
           <div class="carousel-item" style="height: 500px;">
-            <img src="assets/images/view/carousel/cr_5.jpg" class="d-block w-100" alt="cr_5">
-            <div class="carousel-caption">
-              <h5>Lorem 5</h5>
+            <img src="assets/images/view/carousel/cr_4.jpg" class="d-block w-100" alt="cr_5">
+            <div class="carousel-caption" style="background-color: rgba(0, 0, 0, 0.5);">
+              <h5>Lorem 4</h5>
               <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum necessitatibus dignissimos temporibus velit consequatur veniam quam, harum quis. Obcaecati vero, hic ab porro ea animi! Provident eum sed eaque nostrum.</p>
             </div>
           </div>
           <div class="carousel-item" style="height: 500px;">
-            <img src="assets/images/view/carousel/cr_6.jpg" class="d-block w-100" alt="cr_6">
-            <div class="carousel-caption">
-              <h5>Lorem 6</h5>
+            <img src="assets/images/view/carousel/cr_5.jpg" class="d-block w-100" alt="cr_6">
+            <div class="carousel-caption" style="background-color: rgba(0, 0, 0, 0.5);">
+              <h5>Lorem 5</h5>
               <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi repudiandae tempore animi delectus architecto facere tempora labore reiciendis ipsa, non ut. Fugiat accusantium modi rem, blanditiis excepturi ab ullam id.</p>
             </div>
           </div>