update styles for modals and notifs

public/css/main-site.css

@@ -7,7 +7,8 @@
     font-style: normal;
 }
 
-html, body {
+html,
+body {
     margin: 0;
     padding: 0;
     background: none;
@@ -27,9 +28,17 @@ body {
 }
 
 @keyframes bgShift {
-    0% { background-position: 0% 50%; }
+    0% {
-    50% { background-position: 100% 50%; }
+        background-position: 0% 50%;
-    100% { background-position: 0% 50%; }
+    }
+
+    50% {
+        background-position: 100% 50%;
+    }
+
+    100% {
+        background-position: 0% 50%;
+    }
 }
 
 /* Custom Scrollbar Styles */
@@ -77,22 +86,27 @@ body {
         transform: translate(0);
         text-shadow: 0 0 8px rgba(20, 184, 166, 0.5);
     }
+
     20% {
         transform: translate(-2px, 2px);
         text-shadow: 0 0 8px rgba(20, 184, 166, 0.5), 2px 0 #3b82f6;
     }
+
     40% {
         transform: translate(2px, -2px);
         text-shadow: 0 0 8px rgba(20, 184, 166, 0.5), -2px 0 #14b8a6;
     }
+
     60% {
         transform: translate(-2px, 0);
         text-shadow: 0 0 8px rgba(20, 184, 166, 0.5), 2px 0 #3b82f6;
     }
+
     80% {
         transform: translate(2px, 0);
         text-shadow: 0 0 8px rgba(20, 184, 166, 0.5), -2px 0 #14b8a6;
     }
+
     100% {
         transform: translate(0);
         text-shadow: 0 0 8px rgba(20, 184, 166, 0.5);
@@ -133,9 +147,12 @@ body {
 }
 
 @keyframes floatSection {
-    0%, 100% {
+
+    0%,
+    100% {
         box-shadow: 0 6px 25px rgba(0, 0, 0, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.08);
     }
+
     50% {
         box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), inset 0 0 18px rgba(255, 255, 255, 0.1);
     }
@@ -198,9 +215,12 @@ body {
 }
 
 @keyframes neonPulse {
-    0%, 100% {
+
+    0%,
+    100% {
         filter: brightness(1);
     }
+
     50% {
         filter: brightness(1.2);
     }
@@ -210,9 +230,11 @@ body {
     0% {
         background-position: 0% 50%;
     }
+
     50% {
         background-position: 100% 50%;
     }
+
     100% {
         background-position: 0% 50%;
     }
@@ -304,6 +326,7 @@ body {
         opacity: 0;
         transform: scale(0.95);
     }
+
     to {
         opacity: 1;
         transform: scale(1);
@@ -319,8 +342,7 @@ body {
     overflow: hidden;
 }
 
-.feature-card:hover {
+.feature-card:hover {}
-}
 
 .feature-card::before {
     content: '';
@@ -369,13 +391,25 @@ body {
 }
 
 @keyframes fadeInOut {
-    0%, 100% { opacity: 0; }
+
-    50% { opacity: 0.8; }
+    0%,
+    100% {
+        opacity: 0;
+    }
+
+    50% {
+        opacity: 0.8;
+    }
 }
 
 @keyframes float {
-    0% { transform: translateY(0); }
+    0% {
-    100% { transform: translateY(-100vh); }
+        transform: translateY(0);
+    }
+
+    100% {
+        transform: translateY(-100vh);
+    }
 }
 
 .particle.fade-out {
@@ -383,8 +417,13 @@ body {
 }
 
 @keyframes fadeOut {
-    0% { opacity: 0.8; }
+    0% {
-    100% { opacity: 0; }
+        opacity: 0.8;
+    }
+
+    100% {
+        opacity: 0;
+    }
 }
 
 .header-bg {
@@ -569,28 +608,36 @@ footer a:hover {
     .hero-bg {
         min-height: 500px;
     }
+
     .hero-bg iframe {
         min-height: 500px;
     }
+
     .btn-minecraft {
         padding: 12px 26px;
         font-size: 0.9rem;
     }
+
     .minecraft-font.text-5xl {
         font-size: 2.5rem;
     }
+
     .minecraft-font.text-4xl {
         font-size: 2rem;
     }
+
     .minecraft-font.text-3xl {
         font-size: 1.75rem;
     }
+
     .feature-card {
         padding: 1.5rem;
     }
+
     .nav-btn {
         display: none;
     }
+
     .hamburger {
         display: flex;
     }
@@ -600,22 +647,47 @@ footer a:hover {
     .hero-bg {
         min-height: 400px;
     }
+
     .hero-bg iframe {
         min-height: 400px;
     }
+
     .minecraft-font.text-5xl {
         font-size: 2rem;
     }
+
     .minecraft-font.text-4xl {
         font-size: 1.75rem;
     }
+
     .minecraft-font.text-3xl {
         font-size: 1.5rem;
     }
+
     .mobile-nav-container ul li a,
     .mobile-nav-container ul li button {
         font-size: 1rem;
         padding: 0.75rem;
         width: 180px;
     }
+
+    /* In main-site.css */
+    #particles-js {
+        position: fixed !important;
+        top: 0 !important;
+        left: 0 !important;
+        width: 100vw !important;
+        height: 100vh !important;
+        z-index: 0;
+        overflow: hidden;
+        pointer-events: none;
+    }
+
+    #particles-js canvas.particles-js-canvas-el {
+        width: 100vw !important;
+        height: 100vh !important;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
 }

public/css/main-site.min.css

@@ -67,9 +67,11 @@
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
+    --radius-2xl: 1rem;
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
+    --blur-sm: 8px;
     --blur-xl: 24px;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -226,6 +228,9 @@
   .pointer-events-none {
     pointer-events: none;
   }
+  .visible {
+    visibility: visible;
+  }
   .absolute {
     position: absolute;
   }
@@ -403,6 +408,15 @@
   .max-h-\[calc\(95vh-10rem\)\] {
     max-height: calc(95vh - 10rem);
   }
+  .min-h-\[32px\] {
+    min-height: 32px;
+  }
+  .min-h-\[36px\] {
+    min-height: 36px;
+  }
+  .min-h-\[40px\] {
+    min-height: 40px;
+  }
   .min-h-full {
     min-height: 100%;
   }
@@ -442,6 +456,21 @@
   .max-w-7xl {
     max-width: var(--container-7xl);
   }
+  .max-w-\[80\%\] {
+    max-width: 80%;
+  }
+  .max-w-\[85\%\] {
+    max-width: 85%;
+  }
+  .max-w-\[90\%\] {
+    max-width: 90%;
+  }
+  .max-w-\[95\%\] {
+    max-width: 95%;
+  }
+  .max-w-\[98\%\] {
+    max-width: 98%;
+  }
   .max-w-\[150px\] {
     max-width: 150px;
   }
@@ -486,6 +515,9 @@
   .cursor-not-allowed {
     cursor: not-allowed;
   }
+  .cursor-pointer {
+    cursor: pointer;
+  }
   .resize {
     resize: both;
   }
@@ -595,6 +627,9 @@
   .rounded {
     border-radius: 0.25rem;
   }
+  .rounded-2xl {
+    border-radius: var(--radius-2xl);
+  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -659,6 +694,18 @@
   .bg-black {
     background-color: var(--color-black);
   }
+  .bg-black\/30 {
+    background-color: color-mix(in srgb, #000 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
+    }
+  }
+  .bg-black\/50 {
+    background-color: color-mix(in srgb, #000 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
+    }
+  }
   .bg-black\/75 {
     background-color: color-mix(in srgb, #000 75%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -692,6 +739,30 @@
       background-color: color-mix(in oklab, var(--color-gray-800) 40%, transparent);
     }
   }
+  .bg-gray-800\/50 {
+    background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
+    }
+  }
+  .bg-gray-800\/60 {
+    background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-gray-800) 60%, transparent);
+    }
+  }
+  .bg-gray-800\/70 {
+    background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-gray-800) 70%, transparent);
+    }
+  }
+  .bg-gray-800\/80 {
+    background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-gray-800) 80%, transparent);
+    }
+  }
   .bg-gray-900 {
     background-color: var(--color-gray-900);
   }
@@ -745,6 +816,9 @@
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
+  .p-1\.5 {
+    padding: calc(var(--spacing) * 1.5);
+  }
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
@@ -968,6 +1042,10 @@
     --tw-ease: var(--ease-out);
     transition-timing-function: var(--ease-out);
   }
+  .outline-none {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
   .hover\:bg-blue-700 {
     &:hover {
       @media (hover: hover) {
@@ -1055,6 +1133,13 @@
       }
     }
   }
+  .hover\:text-gray-300 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-gray-300);
+      }
+    }
+  }
   .hover\:text-red-700 {
     &:hover {
       @media (hover: hover) {
@@ -1667,6 +1752,23 @@ footer a:hover {
     padding: 0.75rem;
     width: 180px;
   }
+  #particles-js {
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    width: 100vw !important;
+    height: 100vh !important;
+    z-index: 0;
+    overflow: hidden;
+    pointer-events: none;
+  }
+  #particles-js canvas.particles-js-canvas-el {
+    width: 100vw !important;
+    height: 100vh !important;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
 }
 @property --tw-translate-x {
   syntax: "*";

public/css/style.css

@@ -40,30 +40,24 @@
   }
 
   .xterm {
-    /* Ensure terminal container respects parent dimensions */
     width: 100%;
     height: 100%;
     padding: 8px;
-    /* Add padding for better text spacing */
     box-sizing: border-box;
-    /* Prevent padding from causing overflow */
   }
 
-  /* Viewport styling for scrollbars */
   .xterm .xterm-viewport {
     overflow-y: auto;
     scrollbar-width: thin;
     scrollbar-color: #4b5563 #1f2937;
   }
 
-  /* Webkit scrollbar styling */
   .xterm .xterm-viewport::-webkit-scrollbar {
     width: 8px;
   }
 
   .xterm .xterm-viewport::-webkit-scrollbar-track {
     background: #1f2937;
-    /* Match terminal background for consistency */
   }
 
   .xterm .xterm-viewport::-webkit-scrollbar-thumb {
@@ -73,28 +67,20 @@
 
   .xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
     background: #6b7280;
-    /* Slightly lighter on hover for feedback */
   }
 
-  /* Ensure screen fits container */
   .xterm .xterm-screen {
     width: 100% !important;
     height: 100% !important;
-    /* Ensure full height usage */
   }
 
-  /* Improve text rendering */
   .xterm .xterm-char {
     line-height: 1.2;
-    /* Adjust line height for better text alignment */
   }
 
-  /* Prevent text overflow */
   .xterm .xterm-rows {
     overflow: hidden;
-    /* Prevent horizontal overflow */
     white-space: pre-wrap;
-    /* Allow text wrapping if needed */
   }
 
   #app {
@@ -138,19 +124,44 @@
   }
 
   .modal {
-    @apply fixed inset-0 bg-black/75 flex items-center justify-center z-[1000];
+    @apply fixed inset-0 bg-black/30 flex items-center justify-center z-[1000] backdrop-blur-sm;
   }
 
   .modal-content {
-    @apply bg-gray-800 p-6 rounded-lg w-full max-w-xl relative max-h-[80vh] overflow-y-auto;
+    @apply bg-gray-800/60 p-6 rounded-2xl w-full max-w-xl relative max-h-[80vh] overflow-y-auto;
+    backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
     scrollbar-width: thin;
     scrollbar-color: #4B5563 #1F2937;
   }
 
-  @media (max-width: 640px) {
+  .modal-content input,
-    .holesail-output-mobile-hidden {
+  .modal-content textarea,
-      display: none;
+  .modal-content select {
-    }
+    @apply bg-gray-800/50 text-white p-2 rounded-lg w-full;
+    backdrop-filter: blur(8px);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  }
+
+  .modal-content input:focus,
+  .modal-content textarea:focus,
+  .modal-content select:focus {
+    @apply outline-none border-blue-400;
+    box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
+  }
+
+  .modal-content input::placeholder,
+  .modal-content textarea::placeholder {
+    @apply text-gray-300 opacity-70;
+  }
+
+  .modal-content .item-entry input {
+    @apply bg-gray-800/50 text-white p-2 rounded-lg w-full sm:w-auto;
+    backdrop-filter: blur(8px);
+    border: 1px solid rgba(255, 255, 255, 0.15);
   }
 
   .modal-content::-webkit-scrollbar {
@@ -158,7 +169,7 @@
   }
 
   .modal-content::-webkit-scrollbar-track {
-    @apply bg-gray-800;
+    @apply bg-gray-800/40;
   }
 
   .modal-content::-webkit-scrollbar-thumb {
@@ -170,7 +181,13 @@
   }
 
   .modal-close {
-    @apply absolute top-2 right-2 bg-transparent border-none text-white text-xl cursor-pointer;
+    @apply absolute top-2 right-2 bg-transparent border-none text-white text-xl cursor-pointer hover:text-gray-300 transition-colors;
+  }
+
+  @media (max-width: 640px) {
+    .holesail-output-mobile-hidden {
+      display: none;
+    }
   }
 
   .control-btn {
@@ -192,21 +209,67 @@
   }
 
   #notificationContainer {
-    @apply fixed bottom-4 right-4 z-[1000] flex flex-col-reverse gap-2;
+    @apply fixed bottom-4 right-4 z-[1000] flex flex-col-reverse gap-3;
   }
 
   .notification {
-    @apply bg-gray-800 p-3 rounded-lg text-white flex items-center gap-2 shadow-lg;
+    @apply bg-gray-800/70 text-white p-3 rounded-lg flex items-center gap-2 shadow-lg;
-    max-width: 90%;
+    backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
+    max-width: min(90%, 400px);
+    min-height: 48px;
+    max-height: 200px;
+    overflow-y: auto;
+    white-space: normal;
+    word-break: break-word;
     font-size: 0.875rem;
+    animation: slideIn 0.3s ease-out;
+    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
+  }
+
+  .notification:hover {
+    @apply transform scale-105;
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
   }
 
   .notification.success {
-    @apply bg-green-600;
+    @apply bg-green-600/20;
+    border: 1px solid rgba(34, 197, 94, 0.2);
+    backdrop-filter: blur(12px);
   }
 
   .notification.error {
-    @apply bg-red-600;
+    @apply bg-red-600/20;
+    border: 1px solid rgba(239, 68, 68, 0.2);
+    backdrop-filter: blur(12px);
+  }
+
+  .notification::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .notification::-webkit-scrollbar-track {
+    @apply bg-gray-800/40;
+  }
+
+  .notification::-webkit-scrollbar-thumb {
+    @apply bg-gray-600 rounded;
+  }
+
+  .notification::-webkit-scrollbar-thumb:hover {
+    @apply bg-gray-500;
+  }
+
+  @keyframes slideIn {
+    from {
+      transform: translateX(100%);
+      opacity: 0;
+    }
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
   }
 
   #dockerLogsTerminal {
@@ -426,7 +489,13 @@
   }
 
   .modal-content {
-    @apply p-4 max-w-[95%];
+    @apply p-4 max-w-[95%] rounded-xl;
+  }
+
+  .modal-content input,
+  .modal-content textarea,
+  .modal-content select {
+    @apply p-2 text-sm;
   }
 
   .section-bg .grid {
@@ -460,7 +529,7 @@
   }
 
   .notification {
-    @apply text-sm p-2 max-w-[80%];
+    @apply p-2 text-sm max-w-[80%] min-h-[40px] max-h-[180px];
   }
 
   h1 {
@@ -508,7 +577,13 @@
   }
 
   .modal-content {
-    @apply p-3 max-w-[95%];
+    @apply p-3 max-w-[95%] rounded-xl;
+  }
+
+  .modal-content input,
+  .modal-content textarea,
+  .modal-content select {
+    @apply p-1 text-xs;
   }
 
   canvas {
@@ -534,7 +609,7 @@
   }
 
   .notification {
-    @apply text-xs p-1 max-w-[90%];
+    @apply p-2 text-xs max-w-[85%] min-h-[36px] max-h-[160px];
   }
 
   h1 {
@@ -560,13 +635,42 @@
   }
 }
 
+.bg-gray-700 {
+  background-color: #151d31;
+}
+
+#particles-js {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 0;
+  pointer-events: none;
+}
+
+#particles-js canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
 @media (max-width: 480px) {
   .section-bg {
     @apply p-2;
   }
 
   .modal-content {
-    @apply p-2 max-w-[98%];
+    @apply p-2 max-w-[98%] rounded-xl;
+  }
+
+  .modal-content input,
+  .modal-content textarea,
+  .modal-content select {
+    @apply p-1 text-xs;
   }
 
   canvas {
@@ -592,7 +696,7 @@
   }
 
   .notification {
-    @apply text-xs p-1 max-w-[95%];
+    @apply p-1.5 text-xs max-w-[90%] min-h-[32px] max-h-[140px];
   }
 
   h1 {
@@ -616,4 +720,23 @@
   .control-btn {
     @apply px-2 py-1 text-xs;
   }
+
+  #particles-js {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 0;
+    pointer-events: none;
+  }
+
+  #particles-js canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
 }

public/css/style.min.css

@@ -67,9 +67,11 @@
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
+    --radius-2xl: 1rem;
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
+    --blur-sm: 8px;
     --blur-xl: 24px;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1070,10 +1072,13 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background-color: color-mix(in srgb, #000 75%, transparent);
+    background-color: color-mix(in srgb, #000 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black) 75%, transparent);
+      background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
     }
+    --tw-backdrop-blur: blur(var(--blur-sm));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
   }
   .modal-content {
     position: relative;
@@ -1081,22 +1086,65 @@
     width: 100%;
     max-width: var(--container-xl);
     overflow-y: auto;
-    border-radius: var(--radius-lg);
+    border-radius: var(--radius-2xl);
-    background-color: var(--color-gray-800);
+    background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-gray-800) 60%, transparent);
+    }
     padding: calc(var(--spacing) * 6);
+    backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
     scrollbar-width: thin;
     scrollbar-color: #4B5563 #1F2937;
   }
-  @media (max-width: 640px) {
+  .modal-content input, .modal-content textarea, .modal-content select {
-    .holesail-output-mobile-hidden {
+    width: 100%;
-      display: none;
+    border-radius: var(--radius-lg);
+    background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
     }
+    padding: calc(var(--spacing) * 2);
+    color: var(--color-white);
+    backdrop-filter: blur(8px);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  }
+  .modal-content input:focus, .modal-content textarea:focus, .modal-content select:focus {
+    border-color: var(--color-blue-400);
+    --tw-outline-style: none;
+    outline-style: none;
+    box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
+  }
+  .modal-content input::placeholder, .modal-content textarea::placeholder {
+    color: var(--color-gray-300);
+    opacity: 70%;
+  }
+  .modal-content .item-entry input {
+    width: 100%;
+    border-radius: var(--radius-lg);
+    background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
+    }
+    padding: calc(var(--spacing) * 2);
+    color: var(--color-white);
+    @media (width >= 40rem) {
+      width: auto;
+    }
+    backdrop-filter: blur(8px);
+    border: 1px solid rgba(255, 255, 255, 0.15);
   }
   .modal-content::-webkit-scrollbar {
     width: calc(var(--spacing) * 2);
   }
   .modal-content::-webkit-scrollbar-track {
-    background-color: var(--color-gray-800);
+    background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-gray-800) 40%, transparent);
+    }
   }
   .modal-content::-webkit-scrollbar-thumb {
     border-radius: 0.25rem;
@@ -1116,6 +1164,19 @@
     font-size: var(--text-xl);
     line-height: var(--tw-leading, var(--text-xl--line-height));
     color: var(--color-white);
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-gray-300);
+      }
+    }
+  }
+  @media (max-width: 640px) {
+    .holesail-output-mobile-hidden {
+      display: none;
+    }
   }
   .control-btn {
     border-radius: 0.25rem;
@@ -1156,26 +1217,83 @@
     z-index: 1000;
     display: flex;
     flex-direction: column-reverse;
-    gap: calc(var(--spacing) * 2);
+    gap: calc(var(--spacing) * 3);
   }
   .notification {
     display: flex;
     align-items: center;
     gap: calc(var(--spacing) * 2);
     border-radius: var(--radius-lg);
-    background-color: var(--color-gray-800);
+    background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 70%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-gray-800) 70%, transparent);
+    }
     padding: calc(var(--spacing) * 3);
     color: var(--color-white);
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    max-width: 90%;
+    backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
+    max-width: min(90%, 400px);
+    min-height: 48px;
+    max-height: 200px;
+    overflow-y: auto;
+    white-space: normal;
+    word-break: break-word;
     font-size: 0.875rem;
+    animation: slideIn 0.3s ease-out;
+    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
+  }
+  .notification:hover {
+    --tw-scale-x: 105%;
+    --tw-scale-y: 105%;
+    --tw-scale-z: 105%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
   }
   .notification.success {
-    background-color: var(--color-green-600);
+    background-color: color-mix(in srgb, oklch(62.7% 0.194 149.214) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-green-600) 20%, transparent);
+    }
+    border: 1px solid rgba(34, 197, 94, 0.2);
+    backdrop-filter: blur(12px);
   }
   .notification.error {
-    background-color: var(--color-red-600);
+    background-color: color-mix(in srgb, oklch(57.7% 0.245 27.325) 20%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-red-600) 20%, transparent);
+    }
+    border: 1px solid rgba(239, 68, 68, 0.2);
+    backdrop-filter: blur(12px);
+  }
+  .notification::-webkit-scrollbar {
+    width: 6px;
+  }
+  .notification::-webkit-scrollbar-track {
+    background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-gray-800) 40%, transparent);
+    }
+  }
+  .notification::-webkit-scrollbar-thumb {
+    border-radius: 0.25rem;
+    background-color: var(--color-gray-600);
+  }
+  .notification::-webkit-scrollbar-thumb:hover {
+    background-color: var(--color-gray-500);
+  }
+  @keyframes slideIn {
+    from {
+      transform: translateX(100%);
+      opacity: 0;
+    }
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
   }
   #dockerLogsTerminal {
     box-sizing: border-box;
@@ -1536,8 +1654,14 @@
   }
   .modal-content {
     max-width: 95%;
+    border-radius: var(--radius-xl);
     padding: calc(var(--spacing) * 4);
   }
+  .modal-content input, .modal-content textarea, .modal-content select {
+    padding: calc(var(--spacing) * 2);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
   .section-bg .grid {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
@@ -1567,6 +1691,8 @@
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
   .notification {
+    max-height: 180px;
+    min-height: 40px;
     max-width: 80%;
     padding: calc(var(--spacing) * 2);
     font-size: var(--text-sm);
@@ -1614,8 +1740,14 @@
   }
   .modal-content {
     max-width: 95%;
+    border-radius: var(--radius-xl);
     padding: calc(var(--spacing) * 3);
   }
+  .modal-content input, .modal-content textarea, .modal-content select {
+    padding: calc(var(--spacing) * 1);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
   canvas {
     max-width: 100px;
   }
@@ -1638,8 +1770,10 @@
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
   .notification {
-    max-width: 90%;
+    max-height: 160px;
-    padding: calc(var(--spacing) * 1);
+    min-height: 36px;
+    max-width: 85%;
+    padding: calc(var(--spacing) * 2);
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
@@ -1666,14 +1800,40 @@
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
 }
+.bg-gray-700 {
+  background-color: #151d31;
+}
+#particles-js {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 0;
+  pointer-events: none;
+}
+#particles-js canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
 @media (max-width: 480px) {
   .section-bg {
     padding: calc(var(--spacing) * 2);
   }
   .modal-content {
     max-width: 98%;
+    border-radius: var(--radius-xl);
     padding: calc(var(--spacing) * 2);
   }
+  .modal-content input, .modal-content textarea, .modal-content select {
+    padding: calc(var(--spacing) * 1);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
   canvas {
     max-width: 80px;
   }
@@ -1696,8 +1856,10 @@
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
   .notification {
-    max-width: 95%;
+    max-height: 140px;
-    padding: calc(var(--spacing) * 1);
+    min-height: 32px;
+    max-width: 90%;
+    padding: calc(var(--spacing) * 1.5);
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
@@ -1723,6 +1885,23 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  #particles-js {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 0;
+    pointer-events: none;
+  }
+  #particles-js canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
 }
 @property --tw-rotate-x {
   syntax: "*";
@@ -1975,6 +2154,21 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;
@@ -2056,9 +2250,12 @@
       --tw-backdrop-sepia: initial;
       --tw-duration: initial;
       --tw-ease: initial;
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
     }
   }
-}
+}

public/index.html

@@ -54,12 +54,6 @@
             </li>
         </ul>
     </nav>
-    <!-- Particle Effects -->
-    <div class="particle"></div>
-    <div class="particle large"></div>
-    <div class="particle"></div>
-    <div class="particle large"></div>
-    <div class="particle"></div>
 
     <header class="header-bg py-16 text-center relative z-2">
         <div class="header-content flex items-center justify-between max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -553,6 +547,7 @@
         </p>
     </footer>
 
+    <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
     <script src="js/app.js"></script>
     <script src="js/tutorial.js"></script>
 

public/js/app.js

@@ -2442,58 +2442,135 @@ document.addEventListener('DOMContentLoaded', () => {
     observer.observe(section);
 });
 
-//   const PARTICLE_POOL_SIZE = 50;
+particlesJS("particles-js", {
-//   const particlePool = [];
+  "particles": {
-//   const activeParticles = new Set();
+      "number": {
+          "value": 30,
+          "density": {
+              "enable": true,
+              "value_area": 800
+          }
+      },
+      "color": {
+          "value": ["#14b8a6", "#3b82f6"] // Mimics gradient by alternating colors
+      },
+      "shape": {
+          "type": "circle", // Matches border-radius: 50%
+          "stroke": {
+              "width": 0,
+              "color": "#000000"
+          }
+      },
+      "opacity": {
+          "value": 0.9, // Matches box-shadow opacity
+          "random": true,
+          "anim": {
+              "enable": true, // Mimics fadeInOut animation
+              "speed": 1, // Slower for smooth fade
+              "opacity_min": 0, // Fades to fully transparent
+              "sync": false
+          }
+      },
+      "size": {
+          "value": 8, // Default size (matches 8px)
+          "random": true, // Allows some particles to be larger (up to 12px)
+          "anim": {
+              "enable": true,
+              "speed": 4,
+              "size_min": 4, // Smaller sizes for variation
+              "sync": false
+          }
+      },
+      "line_linked": {
+          "enable": false // No lines needed per CSS
+      },
+      "move": {
+          "enable": true,
+          "speed": 2, // Mimics float animation
+          "direction": "none",
+          "random": true,
+          "straight": false,
+          "out_mode": "out",
+          "bounce": false,
+          "attract": {
+              "enable": false
+          }
+      }
+  },
+  "interactivity": {
+      "detect_on": "canvas",
+      "events": {
+          "onhover": {
+              "enable": true,
+              "mode": "repulse"
+          },
+          "onclick": {
+              "enable": true,
+              "mode": "push"
+          },
+          "resize": true
+      },
+      "modes": {
+          "repulse": {
+              "distance": 100,
+              "duration": 0.4
+          },
+          "push": {
+              "particles_nb": 4
+          }
+      }
+  },
+  "retina_detect": true
+});
 
-//   function createParticleElement() {
+// Custom logic for glow effect
-//     const particle = document.createElement('div');
+document.addEventListener('DOMContentLoaded', () => {
-//     particle.classList.add('particle');
+  const pJS = window.pJSDom[0].pJS;
-//     if (Math.random() > 0.6) particle.classList.add('large');
+  const targetElements = document.querySelectorAll('.feature-card, .nav-btn, .btn-minecraft');
-//     return particle;
-//   }
 
-//   function initializeParticlePool() {
+  // Function to check if a particle is behind or near an element
-//     for (let i = 0; i < PARTICLE_POOL_SIZE; i++) {
+  function checkParticleProximity() {
-//       particlePool.push(createParticleElement());
+      targetElements.forEach(element => {
-//     }
+          const rect = element.getBoundingClientRect();
-//   }
+          let hasGlow = false;
 
-//   function resetParticle(particle) {
+          pJS.particles.array.forEach(particle => {
-//     particle.style.left = `${Math.random() * 100}%`;
+              const particleX = particle.x + pJS.canvas.el.offsetLeft;
-//     particle.style.top = `${Math.random() * 100}%`;
+              const particleY = particle.y + pJS.canvas.el.offsetTop;
-//     particle.style.animationDelay = `${Math.random() * 8}s`;
+              const buffer = 20; // Buffer zone around element for glow trigger
-//     particle.style.animationDuration = `${8 + Math.random() * 6}s`;
-//     particle.classList.remove('fade-out');
-//     return particle;
-//   }
 
-//   function spawnParticle() {
+              // Check if particle is within or near the element's bounding box
-//     if (particlePool.length === 0 || activeParticles.size >= PARTICLE_POOL_SIZE) return;
+              if (
+                  particleX >= rect.left - buffer &&
+                  particleX <= rect.right + buffer &&
+                  particleY >= rect.top - buffer &&
+                  particleY <= rect.bottom + buffer
+              ) {
+                  hasGlow = true;
+              }
+          });
 
-//     const particle = resetParticle(particlePool.pop());
+          // Apply or remove glow effect
-//     if (!particle.parentNode) document.body.appendChild(particle);
+          if (hasGlow) {
-//     activeParticles.add(particle);
+              element.classList.add('glow-effect');
+              element.classList.remove('no-glow');
+          } else {
+              element.classList.remove('glow-effect');
+              element.classList.add('no-glow');
+          }
+      });
+  }
 
-//     setTimeout(() => {
+  // Run proximity check in a separate animation loop
-//       particle.classList.add('fade-out');
+  function animateGlowEffect() {
-//       setTimeout(() => {
+      checkParticleProximity();
-//         activeParticles.delete(particle);
+      requestAnimationFrame(animateGlowEffect);
-//         particlePool.push(particle);
+  }
-//       }, 500);
-//     }, 14000);
-//   }
 
-//   function animate() {
+  // Start the animation loop
-//     if (Math.random() < 0.1) spawnParticle(); // Reduced spawn frequency
+  animateGlowEffect();
-//     requestAnimationFrame(animate);
+});
-//   }
 
-//   // Initialize and start
-// setTimeout(() => {
-//   initializeParticlePool();
-//   animate();
-// }, 500);
 
 
 });

public/test.html

@@ -0,0 +1,558 @@
+<!DOCTYPE html>
+<html lang="en" class="h-full">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Permissions-Policy" content="clipboard-write=(self https://sftp.my-mc.link)">
+    <title>My-MC Panel</title>
+    <link rel="stylesheet" href="css/style.min.css">
+    <link rel="stylesheet" href="css/main-site.min.css">
+
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700;900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <link href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css" rel="stylesheet" />
+    <link rel="icon" href="https://minecraft.wiki/images/Favicon.png" type="image/png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
+    <link rel="manifest" href="/favicon/site.webmanifest">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/xterm@5.3.0/lib/xterm.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.min.js"></script>
+</head>
+
+<body class="min-h-full flex flex-col">
+    <!-- Hamburger Menu Icon (visible on mobile) -->
+    <button class="hamburger md:hidden flex flex-col justify-center items-center w-10 h-10 focus:outline-none"
+        style="z-index: 99999; position: fixed; top: 1rem; right: 1rem; pointer-events: auto;">
+        <span class="bar w-6 h-0.5 bg-teal-400 mb-1.5 transition-all duration-300"></span>
+        <span class="bar w-6 h-0.5 bg-teal-400 mb-1.5 transition-all duration-300"></span>
+        <span class="bar w-6 h-0.5 bg-teal-400 transition-all duration-300"></span>
+    </button>
+    <!-- Mobile Navigation Menu -->
+    <nav class="mobile-nav mobile-nav-container hidden fixed inset-0 flex-col items-center justify-center md:hidden"
+        data-mobile-nav style="z-index: 99998; position: fixed; inset: 0; pointer-events: auto;">
+        <ul class="text-center">
+            <li class="mb-6">
+                <a href="https://my-mc.link"
+                    class="text-lg minecraft-font text-white bg-gradient-to-r from-teal-400 to-blue-500 px-4 py-2 rounded-md hover:bg-gradient-to-r hover:from-blue-500 hover:to-teal-400">Home</a>
+            </li>
+            <li class="mb-6">
+                <a href="https://stats.my-mc.link"
+                    class="text-lg minecraft-font text-white bg-gradient-to-r from-teal-400 to-blue-500 px-4 py-2 rounded-md hover:bg-gradient-to-r hover:from-blue-500 hover:to-teal-400">System
+                    Stats</a>
+            </li>
+            <li class="mb-6">
+                <a href="https://info.my-mc.link"
+                    class="text-lg minecraft-font text-white bg-gradient-to-r from-teal-400 to-blue-500 px-4 py-2 rounded-md hover:bg-gradient-to-r hover:from-blue-500 hover:to-teal-400"
+                    target="_blank">Wiki</a>
+            </li>
+            <li class="mb-6">
+                <button id="mobileLogoutBtn"
+                    class="text-lg minecraft-font text-white bg-gradient-to-r from-teal-400 to-blue-500 px-4 py-2 rounded-md hover:bg-gradient-to-r hover:from-blue-500 hover:to-teal-400">Logout</button>
+            </li>
+        </ul>
+    </nav>
+
+    <header class="header-bg py-16 text-center relative z-2">
+        <div class="header-content flex items-center justify-between max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div>
+                <h1
+                    class="text-5xl minecraft-font bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
+                    My-MC Panel</h1>
+                <p class="text-lg mt-4 opacity-90 tracking-wide font-medium">Manage Your Minecraft Server</p>
+            </div>
+            <!-- Navigation Buttons (hidden on mobile) -->
+            <nav class="flex items-center gap-2 hidden md:flex">
+                <a href="https://my-mc.link" class="nav-btn">Home</a>
+                <a href="https://stats.my-mc.link" class="nav-btn" target="_blank">System Stats</a>
+                <button id="refresh" class="nav-btn control-btn">Refresh</button>
+                <button id="backupBtn" class="nav-btn">Backup</button>
+                <a href="https://info.my-mc.link" class="nav-btn" target="_blank">Wiki</a>
+                <button id="logoutBtn" class="nav-btn">Logout</button>
+            </nav>
+        </div>
+    </header>
+
+    <div id="app" class="flex-grow">
+        <!-- Login Page and Modals -->
+        <div id="loginPage" class="modal hidden">
+            <div class="modal-content">
+                <button class="modal-close" onclick="window.location.href='https://my-mc.link'">×</button>
+                                <h2 class="text-2xl minecraft-font mb-6 text-center">My-MC Panel Login</h2>
+                <div class="mb-4">
+                    <input id="loginApiKey" type="text" placeholder="Enter API Key"
+                        class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] px-4 py-2 rounded text-white w-full border border-[rgba(255,255,255,0.15)]">
+                </div>
+                <button id="loginBtn" class="nav-btn2 w-full">Login</button>
+                <p id="loginError" class="text-red-500 text-sm mt-2 hidden"></p>
+            </div>
+        </div>
+
+        <div id="notificationContainer"></div>
+
+        <div id="tellModal" class="modal hidden">
+            <div class="modal-content">
+                <button class="modal-close">×</button>
+                <h2 class="text-xl minecraft-font mb-4">Send Message to <span id="tellPlayerName"></span></h2>
+                <form id="tellForm">
+                    <textarea id="tellMessage" placeholder="Enter your message"
+                        class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] px-4 py-2 rounded text-white w-full h-24 mb-4 border border-[rgba(255,255,255,0.15)]"></textarea>
+                    <button type="submit" class="nav-btn w-full">Send</button>
+                </form>
+            </div>
+        </div>
+
+        <div id="giveModal" class="modal hidden">
+            <div class="modal-content">
+                <button class="modal-close">×</button>
+                <h2 class="text-xl minecraft-font mb-4">Give Items to <span id="givePlayerName"></span></h2>
+                <form id="giveForm">
+                    <div class="mb-4">
+                        <label for="loadoutSelect" class="block text-sm font-medium mb-1">Select Loadout</label>
+                        <select id="loadoutSelect"
+                            class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] px-4 py-2 rounded text-white w-full border border-[rgba(255,255,255,0.15)]">
+                            <option value="custom">Custom</option>
+                            <option value="starter">Starter Kit (Torches, Food)</option>
+                            <option value="builder">Builder Kit (Stone, Wood)</option>
+                            <option value="combat">Combat Kit (Sword, Armor)</option>
+                            <option value="miner">Miner Kit (Pickaxe, Torches, Shovel)</option>
+                            <option value="adventurer">Adventurer Kit (Bow, Arrows, Compass)</option>
+                            <option value="alchemist">Alchemist Kit (Potions, Brewing Stand)</option>
+                            <option value="enchanter">Enchanter Kit (Books, Lapis, Enchanting Table)</option>
+                            <option value="farmer">Farmer Kit (Seeds, Hoe, Bone Meal)</option>
+                            <option value="nether">Nether Survival Kit (Fire Resistance, Obsidian)</option>
+                            <option value="end">End Prep Kit (Ender Pearls, Blaze Rods)</option>
+                        </select>
+                    </div>
+                    <div id="customGiveFields" class="hidden mb-4">
+                        <div id="itemList" class="space-y-2"></div>
+                        <button type="button" id="addItemBtn" class="nav-btn mt-2">Add Item</button>
+                    </div>
+                    <button type="submit" class="nav-btn w-full">Give</button>
+                </form>
+            </div>
+        </div>
+
+        <div id="teleportModal" class="modal hidden">
+            <div class="modal-content">
+                <button class="modal-close">×</button>
+                <h2 class="text-xl minecraft-font mb-4">Teleport <span id="teleportPlayerName"></span></h2>
+                <form id="teleportForm">
+                    <div class="mb-4">
+                        <label for="teleportDestination" class="block text-sm font-medium mb-1">Select Destination
+                            Player</label>
+                        <select id="teleportDestination"
+                            class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] px-4 py-2 rounded text-white w-full border border-[rgba(255,255,255,0.15)]">
+                            <!-- Options populated dynamically -->
+                        </select>
+                    </div>
+                    <button type="submit" class="nav-btn w-full">Teleport</button>
+                </form>
+            </div>
+        </div>
+
+        <div id="effectModal" class="modal hidden">
+            <div class="modal-content">
+                <button class="modal-close">×</button>
+                <h2 class="text-xl minecraft-font mb-4">Apply Effect to <span id="effectPlayerName"></span></h2>
+                <form id="effectForm">
+                    <div class="mb-4">
+                        <label for="effectSelect" class="block text-sm font-medium mb-1">Select Effect</label>
+                        <select id="effectSelect"
+                            class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] px-4 py-2 rounded text-white w-full border border-[rgba(255,255,255,0.15)]">
+                            <option value="speed:30:1">Speed (30s, Level 1)</option>
+                            <option value="strength:30:1">Strength (30s, Level 1)</option>
+                            <option value="regeneration:30:1">Regeneration (30s, Level 1)</option>
+                            <option value="jump_boost:30:1">Jump Boost (30s, Level 1)</option>
+                            <option value="invisibility:30:1">Invisibility (30s, Level 1)</option>
+                            <option value="night_vision:60:1">Night Vision (60s, Level 1)</option>
+                            <option value="fire_resistance:60:1">Fire Resistance (60s, Level 1)</option>
+                            <option value="water_breathing:60:1">Water Breathing (60s, Level 1)</option>
+                        </select>
+                    </div>
+                    <button type="submit" class="nav-btn w-full">Apply Effect</button>
+                </form>
+            </div>
+        </div>
+
+        <div id="editPropertiesModal" class="modal hidden">
+            <div class="modal-content">
+                <button class="modal-close">×</button>
+                <h2 class="text-xl minecraft-font mb-4">Edit server.properties</h2>
+                <form id="editPropertiesForm" class="space-y-4">
+                    <div id="propertiesFields" class="space-y-2"></div>
+                    <button type="submit" class="nav-btn w-full">Save</button>
+                </form>
+            </div>
+        </div>
+
+        <div id="updateModsModal" class="modal hidden">
+            <div class="modal-content flex flex-col">
+                <div class="flex justify-between items-center p-4 border-b border-[rgba(255,255,255,0.12)]">
+                    <h2 class="text-xl minecraft-font">Mod Update Output</h2>
+                    <button class="modal-close text-2xl">×</button>
+                </div>
+                <pre id="updateModsOutput"
+                    class="flex-1 p-4 text-[#e0e7ff] text-sm max-h-[calc(95vh-10rem)] overflow-y-auto overflow-x-auto whitespace-pre-wrap break-words leading-relaxed"></pre>
+                <div class="p-4 border-t border-[rgba(255,255,255,0.12)]">
+                    <button id="closeUpdateModsBtn" class="btn-minecraft w-full">Close</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Main Content -->
+        <main id="mainContent" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-16 relative z-2">
+            <div class="section-bg p-4 mb-6" data-section="server-status">
+                <div class="flex flex-col space-y-2 mb-3">
+                    <h2 class="text-2xl minecraft-font">Server Status</h2>
+                    <div class="flex justify-between items-center">
+                        <div class="flex flex-col space-y-1 text-sm">
+                            <p><strong>User:</strong> <span id="user">Loading...</span></p>
+                            <p><strong>Status:</strong> <span id="serverStatus">Loading...</span></p>
+                        </div>
+                        <div class="flex space-x-3 justify-center">
+                            <div class="text-center">
+                                <canvas id="memoryMeter" width="100" height="100"></canvas>
+                                <p class="text-xs mt-1"><b>Memory</b></p>
+                                <p id="memoryPercent" class="text-base font-bold">0%</p>
+                            </div>
+                            <div class="text-center">
+                                <canvas id="cpuMeter" width="100" height="100"></canvas>
+                                <p class="text-xs mt-1"><b>CPU</b></p>
+                                <p id="cpuPercent" class="text-base font-bold">0%</p>
+                            </div>
+                        </div>
+                        <div class="flex flex-col space-y-1">
+                            <div class="flex justify-end space-x-1">
+                                <button id="startBtn" class="control-btn text-sm">Start</button>
+                                <button id="stopBtn" class="control-btn text-sm">Stop</button>
+                                <button id="restartBtn" class="control-btn text-sm">Restart</button>
+                            </div>
+                            <div class="flex justify-end space-x-1">
+                                <button id="editPropertiesBtn" class="nav-btn control-btn text-sm">Edit
+                                    Properties</button>
+                                <button id="updateModsBtn" class="nav-btn text-sm">Update Mods</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="section-bg mb-12">
+                <h2 class="text-3xl minecraft-font mb-8">Server Logs</h2>
+                <div id="dockerLogsTerminal" class="mt-4"></div>
+            </div>
+
+            <div class="section-bg mb-12">
+                <h2 class="text-3xl minecraft-font mb-8">Player Management</h2>
+                <p><strong>Connected Players:</strong><br> <span id="playerList">Loading...</span></p>
+            </div>
+
+            <div class="section-bg mb-12">
+                <h2 class="text-3xl minecraft-font mb-8">Server Console</h2>
+                <form id="consoleForm" onsubmit="event.preventDefault(); sendConsoleCommand();">
+                    <input id="consoleInput" type="text" placeholder="Enter RCON Command (Hit Enter To Submit)"
+                        class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] px-4 py-2 rounded text-white w-full mb-2 border border-[rgba(255,255,255,0.15)]">
+                    <button id="sendConsole" type="submit" class="nav-btn" style="display: none;">Send</button>
+                </form>
+                <pre id="consoleOutput"
+                    class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] p-4 rounded mt-4 h-48 overflow-y-auto border border-[rgba(255,255,255,0.15)]"></pre>
+            </div>
+
+            <div class="section-bg mb-12" id="sftpBrowserSection" style="display: none;">
+                <div class="flex justify-between items-baseline mb-4">
+                    <h2 class="text-3xl minecraft-font">SFTP Browser</h2>
+                    <button id="sftpBtn" class="nav-btn text-sm flex items-center space-x-1">
+                        <i class="fas fa-sync-alt"></i>
+                        <span>Refresh SFTP</span>
+                    </button>
+                </div>
+                <iframe id="sftpIframe" class="w-full rounded" allow="clipboard-read; clipboard-write"></iframe>
+            </div>
+
+            <div class="section-bg mb-8">
+                <h2 class="text-2xl minecraft-font mb-6">Mod Management</h2>
+                <form id="modSearchForm" onsubmit="event.preventDefault(); searchMods(1);">
+                    <div class="mb-3 flex space-x-2">
+                        <input id="modSearch" type="text" placeholder="Search Mods (Hit Enter To Submit)"
+                            class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] px-3 py-1 rounded text-sm text-white flex-grow border border-[rgba(255,255,255,0.15)]">
+                        <button id="searchBtn" type="submit" class="btn-minecraft"
+                            style="display: none;">Search</button>
+                        <button id="closeSearchBtn" type="button" class="btn-minecraft hidden">Close</button>
+                    </div>
+                </form>
+                <div id="modResults" class="grid grid-cols-1 md:grid-cols-2 gap-4"></div>
+                <div id="pagination" class="pagination-container mt-3"></div>
+                <h3 class="text-lg minecraft-font mt-3">Installed Mods</h3>
+                <div class="mb-3 flex space-x-2">
+                    <input id="modListSearch" type="text" placeholder="Search Installed Mods"
+                        class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] px-3 py-1 rounded text-sm text-white flex-grow border border-[rgba(255,255,255,0.15)]">
+                    <button id="clearModListSearch" type="button" class="btn-minecraft hidden">Clear</button>
+                </div>
+                <div id="modList" class="mt-2 grid grid-cols-1 md:grid-cols-2 gap-4"></div>
+                <div id="modListPagination" class="pagination-container mt-3"></div>
+            </div>
+
+            <div class="section-bg mb-8 p-6 rounded-lg">
+                <h2 class="text-2xl minecraft-font mb-6 font-bold text-white">Server Links</h2>
+                <div class="flex flex-row gap-4 mb-4">
+                    <!-- Connection Link Card -->
+                    <div
+                        class="bg-gray-800/40 p-4 rounded-xl shadow-md hover:shadow-lg transition-shadow flex-1 min-w-[250px]">
+                        <h3 class="text-lg minecraft-font font-semibold text-white mb-2">Connection Link</h3>
+                        <p class="text-gray-300 mb-3 break-all">
+                            <span id="myLink" class="text-blue-400">Link Not Created</span>
+                            <span id="connectionStatus" class="text-xs"></span>
+                        </p>
+                        <button id="generateMyLinkBtn" class="nav-btn"
+                            class="w-full bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-md transition-colors text-sm">
+                            Generate Connection Link
+                        </button>
+                    </div>
+                    <!-- Geyser Link Card -->
+                    <div
+                        class="bg-gray-800/40 p-4 rounded-xl shadow-md hover:shadow-lg transition-shadow flex-1 min-w-[250px]">
+                        <h3 class="text-lg minecraft-font font-semibold text-white mb-2">Geyser Link</h3>
+                        <p class="text-gray-300 mb-3 break-all">
+                            <span id="geyserLink" class="text-blue-400">Link Not Created</span>
+                            <span id="geyserStatus" class="text-xs"></span>
+                        </p>
+                        <button id="generateGeyserLinkBtn" class="nav-btn"
+                            class="w-full bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-md transition-colors text-sm">
+                            Generate Geyser Link
+                        </button>
+                    </div>
+                    <!-- SFTP Link Card -->
+                    <div
+                        class="bg-gray-800/40 p-4 rounded-xl shadow-md hover:shadow-lg transition-shadow flex-1 min-w-[250px]">
+                        <h3 class="text-lg minecraft-font font-semibold text-white mb-2">SFTP Link</h3>
+                        <p class="text-gray-300 mb-3 break-all">
+                            <span id="sftpLink" class="text-blue-400">Link Not Created</span>
+                            <span id="sftpStatus" class="text-xs"></span>
+                        </p>
+                        <button id="generateSftpLinkBtn" class="nav-btn"
+                            class="w-full bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded-md transition-colors text-sm">
+                            Generate SFTP Link
+                        </button>
+                    </div>
+                </div>
+                <div class="flex flex-row gap-4">
+                    <!-- Website URL Card -->
+                    <div
+                        class="bg-gray-800/40 p-4 rounded-xl shadow-md hover:shadow-lg transition-shadow flex-1 min-w-[250px]">
+                        <h3 class="text-lg minecraft-font font-semibold text-white mb-2">Website</h3>
+                        <p class="text-gray-300 mb-3 break-all">
+                            <a id="websiteUrl" href="#" class="text-blue-400 hover:underline"
+                                target="_blank">Loading...</a>
+                        </p>
+                    </div>
+                    <!-- BlueMap URL Card -->
+                    <div
+                        class="bg-gray-800/40 p-4 rounded-xl shadow-md hover:shadow-lg transition-shadow flex-1 min-w-[250px]">
+                        <h3 class="text-lg minecraft-font font-semibold text-white mb-2">BlueMap</h3>
+                        <p class="text-gray-300 mb-3 break-all">
+                            <a id="mapUrl" href="#" class="text-blue-400 hover:underline" target="_blank">Loading...</a>
+                        </p>
+                    </div>
+                    <!-- Advanced Log URL Card -->
+                    <div
+                        class="bg-gray-800/40 p-4 rounded-xl shadow-md hover:shadow-lg transition-shadow flex-1 min-w-[250px]">
+                        <h3 class="text-lg minecraft-font font-semibold text-white mb-2">Advanced Log</h3>
+                        <p class="text-gray-300 mb-3 break-all">
+                            <a id="logUrl" href="#" class="text-blue-400 hover:underline" target="_blank">Loading...</a>
+                        </p>
+                    </div>
+                </div>
+            </div>
+            <div class="section-bg mb-8">
+                <div class="flex items-center justify-between mb-3 flex-wrap">
+                    <h2 class="text-2xl minecraft-font">Holesail Keys</h2>
+                    <button id="toggleTutorial"
+                        class="nav-btn2 bg-blue-600 hover:bg-blue-700 text-white font-semibold py-1 px-3 rounded-md transition duration-200 md:mt-0 mt-2">Tutorial</button>
+                </div>
+                <div class="flex flex-row gap-4 mb-4">
+                    <div class="flex items-center p-3 bg-gray-800 rounded-md min-w-0 flex-1">
+                        <div class="flex-grow">
+                            <p class="text-sm"><strong>Minecraft Key:</strong></p>
+                            <p class="break-all text-sm" id="holesailHash">Not Loaded</p>
+                            <p class="text-xs">Port: 127.0.0.1:25565</p>
+                        </div>
+                        <button class="copy-key-btn ml-2" data-key-id="holesailHash" data-key-type="Minecraft"
+                            title="Copy">
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z">
+                                </path>
+                            </svg>
+                        </button>
+                    </div>
+                    <div class="flex items-center p-3 bg-gray-800 rounded-md min-w-0 flex-1">
+                        <div class="flex-grow">
+                            <p class="text-sm"><strong>Geyser Key:</strong></p>
+                            <p class="break-all text-sm" id="geyserHash">Not Loaded</p>
+                            <p class="text-xs">Port: 127.0.0.1:19132</p>
+                        </div>
+                        <button class="copy-key-btn ml-2" data-key-id="geyserHash" data-key-type="Geyser" title="Copy">
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z">
+                                </path>
+                            </svg>
+                        </button>
+                    </div>
+                    <div class="flex items-center p-3 bg-gray-800 rounded-md min-w-0 flex-1">
+                        <div class="flex-grow">
+                            <p class="text-sm"><strong>SFTP Key:</strong></p>
+                            <p class="break-all text-sm" id="sftpHash">Not Loaded</p>
+                            <p class="text-xs">Port: 127.0.0.1:22</p>
+                        </div>
+                        <button class="copy-key-btn ml-2" data-key-id="sftpHash" data-key-type="SFTP" title="Copy">
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                    d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z">
+                                </path>
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <div id="tutorialSection" class="hidden">
+                <div class="feature-card tilt-card p-6 mb-6">
+                    <h3 class="text-xl minecraft-font mb-4">What is Holesail.io?</h3>
+                    <p class="text-base leading-relaxed mb-4">
+                        <a href="https://holesail.io" target="_blank"
+                            class="text-teal-400 hover:text-blue-400">Holesail.io</a> is an open-source,
+                        peer-to-peer networking tool that creates secure, encrypted tunnels that bypass network
+                        restrictions, firewalls, and NAT. It exposes your local network to the internet without
+                        needing port forwarding, static IPs, or Dynamic DNS, acting as a versatile tunneling and
+                        reverse proxy solution.
+                    </p>
+                    <div class="mb-4">
+                        <p class="font-semibold mb-2">With Holesail, you can:</p>
+                        <ul class="list-disc pl-6 space-y-1 text-base">
+                            <li>Access machines over the internet securely.</li>
+                            <li>Share locally running servers, websites, or AI models with other ports/services.
+                            </li>
+                            <li>Transfer files and folders remotely without bandwidth or size limits.</li>
+                            <li>Play LAN games like Minecraft with friends remotely.</li>
+                            <li>Secure SSH servers by blocking IP access and using Holesail for connections.</li>
+                            <li>Built for ANY application, Holesail supports both the TCP and UDP Protocols
+                                natively.</li>
+                            <li>Expose single ports to the peer-to-peer network, unlike VPNs you never expose your
+                                entire local network.</li>
+                        </ul>
+                    </div>
+                    <p class="text-base leading-relaxed">
+                        Built with security in mind, Holesail ensures all data is encrypted and never touches
+                        third-party servers. Connections are truly peer-to-peer, accessible only to those with whom
+                        you share your private key, providing both ease of use and robust security. Other peers
+                        cannot detect your activity or services. As an open-source tool, Holesail enables
+                        third-party services to integrate it, enhancing their security and connectivity.
+                    </p>
+                    <p class="text-base leading-relaxed mt-4">
+                        Your Public My-MC Ports are Holesail connections hosted on a separate server, not our
+                        Minecraft host. They use the same keys from the tutorial below. We hook 'em up at our jump
+                        host to go public.
+                    </p>
+                </div>
+
+                <div class="feature-card tilt-card p-6 mb-6">
+                    <h3 class="text-xl minecraft-font mb-4">How to Use Holesail Keys</h3>
+                    <ol class="list-decimal list-inside space-y-2">
+                        <li>Ensure <a href="https://nodejs.org/" target="_blank"
+                                class="text-teal-400 hover:text-blue-400">Node.js</a> is installed on your system.
+                        </li>
+                        <li>Install Holesail by running:
+                            <pre
+                                class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] p-2 rounded mt-1 text-sm border border-[rgba(255,255,255,0.15)]">npm i holesail@2.1.0</pre>
+                        </li>
+                        <li>Connect to a key using the appropriate command:
+                            <ul class="list-disc list-inside ml-4 mt-1">
+                                <li>For Minecraft Key (e.g., Minecraft server):
+                                    <pre
+                                        class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] p-2 rounded mt-1 text-sm border border-[rgba(255,255,255,0.15)]">holesail <span id="tutorialHolesailHash">Not Loaded</span></pre>
+                                </li>
+                                <li>For Geyser key (e.g., cross-platform Minecraft):
+                                    <pre
+                                        class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] p-2 rounded mt-1 text-sm border border-[rgba(255,255,255,0.15)]">holesail <span id="tutorialGeyserHash">Not Loaded</span></pre>
+                                </li>
+                                <li>For SFTP key (e.g., file transfer):
+                                    <pre
+                                        class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] p-2 rounded mt-1 text-sm border border-[rgba(255,255,255,0.15)]">holesail <span id="tutorialSftpHash">Not Loaded</span></pre>
+                                </li>
+                            </ul>
+                        </li>
+                        <li class="holesail-output-mobile-hidden">Holesail will confirm the connection. Example
+                            output for your Minecraft server:
+                            <pre
+                                class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] p-2 rounded mt-1 text-sm border border-[rgba(255,255,255,0.15)]">
+~ ❯ holesail <span id="tutorialHolesailHashOutput">Not Loaded</span>
+┌───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
+|                                                                                                                       |
+|                                                                                                                       |
+|                                            Holesail TCP Client Started ⛵️                                             |
+|                                      Connection Mode: Private Connection String                                       |
+|                                     Access application on http://127.0.0.1:25565/                                     |
+|                              Connected to key: <span id="tutorialHolesailHashOutput2">Not Loaded</span>                              |
+|   NOTE: TREAT PRIVATE CONNECTION STRINGS HOW YOU WOULD TREAT SSH KEY, DO NOT SHARE IT WITH ANYONE YOU DO NOT TRUST    |
+|                                                                                                                       |
+|                                                                                                                       |
+|                                                                                                                       |
+└───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
+                </pre>
+                        </li>
+                        <li>Now you can connect to your own localhost within Minecraft!<br>Connect to:
+                            <code
+                                class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] px-1 rounded border border-[rgba(255,255,255,0.15)]">127.0.0.1:25565</code><br><br>
+                        </li>
+                        <li>To share the port over your internet IP as an open port, add the <code
+                                class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] px-1 rounded border border-[rgba(255,255,255,0.15)]">--host 0.0.0.0</code>
+                            switch:
+                            <pre
+                                class="bg-[rgba(10,17,40,0.3)] backdrop-blur-[12px] p-2 rounded mt-1 text-sm border border-[rgba(255,255,255,0.15)]">holesail <span id="tutorialHolesailHashHost">Not Loaded</span> --host 0.0.0.0</pre>
+                            <br>Note: Using the --host 0.0.0.0 method will require you open your port within your
+                            router in order to serve the port from your IP Address remotely.
+                        </li>
+                    </ol>
+                </div>
+
+                <div class="feature-card tilt-card p-6">
+                    <h3 class="text-xl minecraft-font mb-4">Share with Friends</h3>
+                    <p class="mb-3">
+                        Share this tutorial with your friends so they can connect to your Minecraft server or other
+                        services on their own localhosts! With Holesail, no public IPs are needed! Everything stays
+                        secure and peer-to-peer!
+                    </p>
+                    <button id="copyTutorial" class="nav-btn">Copy Tutorial</button>
+                </div>
+            </div>
+    </div>
+    </main>
+    <div id="particles-js" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;"></div>
+
+
+    <footer class="bg-[rgba(10,17,40,0.75)] backdrop-filter backdrop-blur-xl py-8 text-center relative z-2">
+        <p class="text-sm opacity-90">© 2025 My-MC.Link. All rights reserved.</p>
+        <p class="text-sm opacity-90 mt-3">
+            Powered by <a href="https://holesail.io" class="underline text-teal-400 hover:text-blue-400"
+                target="_blank">Holesail</a> with services
+            donated by <a href="https://raven-scott.fyi"
+                class="underline text-teal-400 hover:text-blue-400">SNXRaven</a> |
+            <a href="https://git.ssh.surf/hypermc/panel" class="underline text-teal-400 hover:text-blue-400"
+                target="_blank">Source Code</a>
+        </p>
+    </footer>
+
+    <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
+    <script src="js/app.js"></script>
+    <script src="js/tutorial.js"></script>
+
+</body>
+
+</html>