reapplying previous code changes

public/css/styles.css

@@ -5,6 +5,11 @@
   font-style: normal;
   font-display: swap;
 }
+@media (max-width: 640px) {
+  .holesail-output-mobile-hidden {
+    display: none;
+  }
+}
 
 @import "tailwindcss";
 
@@ -268,3 +273,4 @@
 .bg-gray-800.p-6.rounded-lg.shadow-lg p {
   @apply max-w-full;
 }
+

public/css/styles.min.css

@@ -7,6 +7,11 @@
   font-style: normal;
   font-display: swap;
 }
+@media (max-width: 640px) {
+  .holesail-output-mobile-hidden {
+    display: none;
+  }
+}
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
@@ -19,6 +24,7 @@
     --color-red-700: oklch(50.5% 0.213 27.518);
     --color-yellow-600: oklch(68.1% 0.162 75.834);
     --color-yellow-700: oklch(55.4% 0.135 66.442);
+    --color-green-400: oklch(79.2% 0.209 151.711);
     --color-green-600: oklch(62.7% 0.194 149.214);
     --color-green-700: oklch(52.7% 0.154 150.069);
     --color-teal-600: oklch(60% 0.118 184.704);
@@ -31,6 +37,9 @@
     --color-blue-700: oklch(48.8% 0.243 264.376);
     --color-purple-600: oklch(55.8% 0.288 302.321);
     --color-purple-700: oklch(49.6% 0.265 301.924);
+    --color-gray-100: oklch(96.7% 0.003 264.542);
+    --color-gray-200: oklch(92.8% 0.006 264.531);
+    --color-gray-300: oklch(87.2% 0.01 258.338);
     --color-gray-400: oklch(70.7% 0.022 261.325);
     --color-gray-500: oklch(55.1% 0.027 264.364);
     --color-gray-600: oklch(44.6% 0.03 256.802);
@@ -46,6 +55,8 @@
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
     --text-lg: 1.125rem;
     --text-lg--line-height: calc(1.75 / 1.125);
     --text-xl: 1.25rem;
@@ -56,7 +67,9 @@
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
     --leading-relaxed: 1.625;
+    --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
+    --radius-xl: 0.75rem;
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
     --default-transition-duration: 150ms;
@@ -250,6 +263,9 @@
   .mx-auto {
     margin-inline: auto;
   }
+  .mt-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
@@ -265,12 +281,21 @@
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
+  .mb-3 {
+    margin-bottom: calc(var(--spacing) * 3);
+  }
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
   .mb-6 {
     margin-bottom: calc(var(--spacing) * 6);
   }
+  .ml-2 {
+    margin-left: calc(var(--spacing) * 2);
+  }
+  .ml-4 {
+    margin-left: calc(var(--spacing) * 4);
+  }
   .block {
     display: block;
   }
@@ -286,8 +311,8 @@
   .inline-block {
     display: inline-block;
   }
-  .table {
+  .h-5 {
-    display: table;
+    height: calc(var(--spacing) * 5);
   }
   .h-24 {
     height: calc(var(--spacing) * 24);
@@ -307,18 +332,15 @@
   .min-h-full {
     min-height: 100%;
   }
-  .w-1 {
-    width: calc(var(--spacing) * 1);
-  }
   .w-1\/3 {
     width: calc(1/3 * 100%);
   }
-  .w-2 {
-    width: calc(var(--spacing) * 2);
-  }
   .w-2\/3 {
     width: calc(2/3 * 100%);
   }
+  .w-5 {
+    width: calc(var(--spacing) * 5);
+  }
   .w-20 {
     width: calc(var(--spacing) * 20);
   }
@@ -337,15 +359,9 @@
   .flex-1 {
     flex: 1;
   }
-  .flex-shrink {
-    flex-shrink: 1;
-  }
   .flex-grow {
     flex-grow: 1;
   }
-  .border-collapse {
-    border-collapse: collapse;
-  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
@@ -355,6 +371,15 @@
   .resize {
     resize: both;
   }
+  .list-inside {
+    list-style-position: inside;
+  }
+  .list-decimal {
+    list-style-type: decimal;
+  }
+  .list-disc {
+    list-style-type: disc;
+  }
   .grid-cols-1 {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }
@@ -385,6 +410,13 @@
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
+  .space-y-1 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-2 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -438,6 +470,12 @@
   .rounded-lg {
     border-radius: var(--radius-lg);
   }
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
+  .rounded-xl {
+    border-radius: var(--radius-xl);
+  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -450,6 +488,12 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
+  .border-gray-500 {
+    border-color: var(--color-gray-500);
+  }
+  .border-gray-600 {
+    border-color: var(--color-gray-600);
+  }
   .bg-black {
     background-color: var(--color-black);
   }
@@ -492,6 +536,9 @@
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
+  .p-3 {
+    padding: calc(var(--spacing) * 3);
+  }
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -501,6 +548,9 @@
   .p-8 {
     padding: calc(var(--spacing) * 8);
   }
+  .px-1 {
+    padding-inline: calc(var(--spacing) * 1);
+  }
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
@@ -522,6 +572,12 @@
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
+  .pb-2 {
+    padding-bottom: calc(var(--spacing) * 2);
+  }
+  .pl-6 {
+    padding-left: calc(var(--spacing) * 6);
+  }
   .text-center {
     text-align: center;
   }
@@ -529,6 +585,10 @@
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
   }
+  .text-base {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
   .text-lg {
     font-size: var(--text-lg);
     line-height: var(--tw-leading, var(--text-lg--line-height));
@@ -564,24 +624,36 @@
   .break-words {
     overflow-wrap: break-word;
   }
+  .break-all {
+    word-break: break-all;
+  }
   .whitespace-pre-wrap {
     white-space: pre-wrap;
   }
   .text-blue-400 {
     color: var(--color-blue-400);
   }
+  .text-gray-100 {
+    color: var(--color-gray-100);
+  }
+  .text-gray-200 {
+    color: var(--color-gray-200);
+  }
+  .text-gray-300 {
+    color: var(--color-gray-300);
+  }
   .text-gray-400 {
     color: var(--color-gray-400);
   }
+  .text-green-400 {
+    color: var(--color-green-400);
+  }
   .text-red-500 {
     color: var(--color-red-500);
   }
   .text-white {
     color: var(--color-white);
   }
-  .underline {
-    text-decoration-line: underline;
-  }
   .opacity-50 {
     opacity: 50%;
   }
@@ -589,10 +661,6 @@
     --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);
   }
-  .outline {
-    outline-style: var(--tw-outline-style);
-    outline-width: 1px;
-  }
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
@@ -601,6 +669,10 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .duration-200 {
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+  }
   .ease-in-out {
     --tw-ease: var(--ease-in-out);
     transition-timing-function: var(--ease-in-out);
@@ -675,6 +747,20 @@
       }
     }
   }
+  .hover\:text-white {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-white);
+      }
+    }
+  }
+  .hover\:underline {
+    &:hover {
+      @media (hover: hover) {
+        text-decoration-line: underline;
+      }
+    }
+  }
   .sm\:w-\[90\%\] {
     @media (width >= 40rem) {
       width: 90%;
@@ -1229,11 +1315,6 @@
   inherits: false;
   initial-value: 0 0 #0000;
 }
-@property --tw-outline-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
 @property --tw-blur {
   syntax: "*";
   inherits: false;
@@ -1287,11 +1368,11 @@
   syntax: "*";
   inherits: false;
 }
-@property --tw-ease {
+@property --tw-duration {
   syntax: "*";
   inherits: false;
 }
-@property --tw-duration {
+@property --tw-ease {
   syntax: "*";
   inherits: false;
 }
@@ -1342,7 +1423,6 @@
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
-      --tw-outline-style: solid;
       --tw-blur: initial;
       --tw-brightness: initial;
       --tw-contrast: initial;
@@ -1356,8 +1436,8 @@
       --tw-drop-shadow-color: initial;
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
-      --tw-ease: initial;
       --tw-duration: initial;
+      --tw-ease: initial;
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;

public/index.html

@@ -20,6 +20,7 @@
 
 <body class="bg-gray-900 text-white overflow-x-hidden min-h-full flex flex-col">
   <div id="app" class="flex-grow">
+    <!-- Login Page and Modals (unchanged) -->
     <div id="loginPage" class="hidden fixed inset-0 bg-gray-900 flex items-center justify-center">
       <div class="bg-gray-800 p-8 rounded-lg shadow-lg w-full max-w-md">
         <h2 class="text-2xl font-bold mb-6 text-center">My-MC Panel</h2>
@@ -144,6 +145,7 @@
       </div>
     </div>
 
+    <!-- Navigation (unchanged) -->
     <nav class="bg-gray-800 p-4 shadow-lg">
       <div class="container mx-auto flex justify-between items-center">
         <h1 class="text-2xl font-bold">My-MC Panel</h1>
@@ -157,6 +159,7 @@
       </div>
     </nav>
 
+    <!-- Main Content (unchanged except for Holesail Keys section) -->
     <main id="mainContent" class="container mx-auto p-6">
       <div class="bg-gray-800 p-6 rounded-lg shadow-lg mb-6" data-section="server-status">
         <h2 class="text-xl font-semibold mb-4">Server Status</h2>
@@ -285,6 +288,7 @@
         </div>
       </div>
 
+      <!-- Updated Holesail Keys Section -->
       <div class="bg-gray-800 p-6 rounded-lg shadow-lg mb-6">
         <div class="flex items-center justify-between mb-4">
           <h2 class="text-xl font-semibold text-white">Holesail Keys</h2>
@@ -346,8 +350,6 @@
                 <li>* Built for ANY application, Holesail supports both the TCP and UDP Protocols nativly.</li>
                 <li>* Expose single ports to the peer-to-peer network, unlike VPNs you never expose your entire local network.</li>
                 <li><BR>And so much more! With Holesail, the possiblities are endless!</li>
-
-
               </ul>
             </div>
             <p class="text-gray-200 text-base leading-relaxed">
@@ -378,7 +380,7 @@
                   </li>
                 </ul>
               </li>
-              <li>Holesail will confirm the connection. Example output for your Minecraft server:
+              <li class="holesail-output-mobile-hidden">Holesail will confirm the connection. Example output for your Minecraft server:
                 <pre class="bg-gray-800 p-2 rounded mt-1 text-sm">
               ~ ❯ holesail <span id="tutorialHolesailHashOutput">Not Loaded</span>
               ┌───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
@@ -412,6 +414,19 @@
         </div>
       
         <script>
+          // Debounce function to prevent multiple triggers on mobile
+          function debounce(func, wait) {
+            let timeout;
+            return function executedFunction(...args) {
+              const later = () => {
+                clearTimeout(timeout);
+                func(...args);
+              };
+              clearTimeout(timeout);
+              timeout = setTimeout(later, wait);
+            };
+          }
+
           // Function to update tutorial spans when key display spans are populated
           function updateTutorialSpans() {
             const holesailHash = document.getElementById('holesailHash').textContent;
@@ -435,14 +450,23 @@
             observer.observe(span, { childList: true, characterData: true, subtree: true });
           });
       
+          // Ensure notification is hidden on page load
+          document.addEventListener('DOMContentLoaded', () => {
+            const notification = document.getElementById('copyNotification');
+            notification.classList.add('hidden');
+          });
+      
           // Toggle tutorial section visibility
           document.getElementById('toggleTutorial').addEventListener('click', () => {
             const tutorialSection = document.getElementById('tutorialSection');
             tutorialSection.classList.toggle('hidden');
           });
       
-          // Copy summarized tutorial in Markdown and show success message
+          // Copy summarized tutorial in Markdown with debounced event listener
-          document.getElementById('copyTutorial').addEventListener('click', () => {
+          document.getElementById('copyTutorial').addEventListener('click', debounce((event) => {
+            event.preventDefault(); // Prevent default touch behavior
+            if (!event.isTrusted) return; // Ensure user-initiated action
+      
             const holesailHash = document.getElementById('holesailHash').textContent;
             const markdownTutorial = `# Join My Minecraft Server with Holesail!
       
@@ -460,17 +484,24 @@
 4. **Join in Minecraft**: Once Holesail confirms the connection, connect to \`127.0.0.1:25565\` in Minecraft.
       
 **Note**: Keep the key private, like an SSH key. No public IPs needed—it's all peer-to-peer!`;
-            navigator.clipboard.writeText(markdownTutorial);
       
-            // Show success message
+            // Check if Clipboard API is supported
+            if (navigator.clipboard && navigator.clipboard.writeText) {
+              navigator.clipboard.writeText(markdownTutorial).then(() => {
                 const notification = document.getElementById('copyNotification');
                 notification.classList.remove('hidden');
-      
-            // Hide success message after 3 seconds
                 setTimeout(() => {
                   notification.classList.add('hidden');
                 }, 3000);
+              }).catch(err => {
+                console.error('Failed to copy tutorial: ', err);
+                alert('Failed to copy tutorial to clipboard. Please copy it manually.');
               });
+            } else {
+              // Fallback for unsupported browsers
+              alert('Clipboard API not supported. Please copy the tutorial manually.');
+            }
+          }, 300)); // 300ms debounce
         </script>
       </div>
 

public/js/app.js

@@ -1763,7 +1763,6 @@ document.addEventListener('DOMContentLoaded', () => {
   async function fetchServerProperties() {
     try {
       const key = `action-fetch-properties`;
-      const notification = showNotification('Fetching server properties...', 'loading', key);
       const response = await wsRequest('/server-properties', 'GET');
       if (response.error) {
         updateNotification(notification, `Failed to load server properties: ${response.error}`, 'error', key);
@@ -1779,7 +1778,6 @@ document.addEventListener('DOMContentLoaded', () => {
       );
       renderPropertiesFields(displayProperties);
       elements.editPropertiesModal.classList.remove('hidden');
-      updateNotification(notification, 'Server properties loaded successfully', 'success', key);
     } catch (error) {
       console.error('Fetch server properties error:', error);
       showNotification(`Failed to load server properties: ${error.message}`, 'error', 'fetch-properties-error');
@@ -1789,7 +1787,6 @@ document.addEventListener('DOMContentLoaded', () => {
   async function saveServerProperties() {
     try {
       const key = `action-save-properties`;
-      const notification = showNotification('Saving server properties...', 'loading', key);
       const properties = {};
       const inputs = elements.propertiesFields.querySelectorAll('input:not(#propertiesSearch):not([id="customPropertyKey"]):not([id="customPropertyValue"])');
 
@@ -1813,7 +1810,6 @@ document.addEventListener('DOMContentLoaded', () => {
         renderPropertiesList(displayProperties, '');
       }
       elements.editPropertiesModal.classList.add('hidden');
-      updateNotification(notification, 'Server properties saved successfully', 'success', key);
     } catch (error) {
       console.error('Save server properties error:', error);
       showNotification(`Failed to save server properties: ${error.message}`, 'error', 'save-properties-error');
@@ -1870,10 +1866,10 @@ document.addEventListener('DOMContentLoaded', () => {
   }
 
   async function connectSftp() {
-    if (!isSftpOnline) {
+    // if (!isSftpOnline) {
-      showNotification('SFTP is offline. Please try again later.', 'error', 'sftp-offline');
+    //   showNotification('SFTP is offline. Please try again later.', 'error', 'sftp-offline');
-      return;
+    //   return;
-    }
+    // }
 
     if (!sftpCredentials) {
       showNotification('SFTP credentials not available.', 'error', 'sftp-credentials');