diff --git a/public/css/styles.css b/public/css/styles.css index 8f17cb4..3f30829 100644 --- a/public/css/styles.css +++ b/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"; @@ -267,4 +272,5 @@ .bg-gray-800.p-6.rounded-lg.shadow-lg p { @apply max-w-full; -} \ No newline at end of file +} + diff --git a/public/css/styles.min.css b/public/css/styles.min.css index 1042e03..ed9e039 100644 --- a/public/css/styles.min.css +++ b/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 { - display: table; + .h-5 { + 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; diff --git a/public/index.html b/public/index.html index 4aa5766..d4ffb15 100644 --- a/public/index.html +++ b/public/index.html @@ -20,6 +20,7 @@
+ + +

Server Status

@@ -285,6 +288,7 @@
+

Holesail Keys

@@ -346,16 +350,14 @@
  • * Built for ANY application, Holesail supports both the TCP and UDP Protocols nativly.
  • * Expose single ports to the peer-to-peer network, unlike VPNs you never expose your entire local network.

  • And so much more! With Holesail, the possiblities are endless!
    • - -

    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. -

    -

    -
    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. Pretty dope, right? -

    +

    +

    +
    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. Pretty dope, right? +

    @@ -378,21 +380,21 @@ -
  • Holesail will confirm the connection. Example output for your Minecraft server: +
  • Holesail will confirm the connection. Example output for your Minecraft server: 
    -      ~ ❯ holesail Not Loaded
-      ┌───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
-      |                                                                                                                       |
-      |                                                                                                                       |
-      |                                            Holesail TCP Client Started ⛵️                                             |
-      |                                      Connection Mode: Private Connection String                                       |
-      |                                     Access application on http://127.0.0.1:25565/                                     |
-      |                              Connected to key: Not Loaded                              |
-      |   NOTE: TREAT PRIVATE CONNECTION STRINGS HOW YOU WOULD TREAT SSH KEY, DO NOT SHARE IT WITH ANYONE YOU DO NOT TRUST    |
-      |                                                                                                                       |
-      |                                                                                                                       |
-      |                                                                                                                       |
-      └───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
+              ~ ❯ holesail Not Loaded
+              ┌───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐
+              |                                                                                                                       |
+              |                                                                                                                       |
+              |                                            Holesail TCP Client Started ⛵️                                             |
+              |                                      Connection Mode: Private Connection String                                       |
+              |                                     Access application on http://127.0.0.1:25565/                                     |
+              |                              Connected to key: Not Loaded                              |
+              |   NOTE: TREAT PRIVATE CONNECTION STRINGS HOW YOU WOULD TREAT SSH KEY, DO NOT SHARE IT WITH ANYONE YOU DO NOT TRUST    |
+              |                                                                                                                       |
+              |                                                                                                                       |
+              |                                                                                                                       |
+              └───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┘
  • To share the port over your internet IP as an open port, add the --host 0.0.0.0 switch: @@ -412,6 +414,19 @@
    • diff --git a/public/js/app.js b/public/js/app.js index f876822..f746977 100644 --- a/public/js/app.js +++ b/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) { - showNotification('SFTP is offline. Please try again later.', 'error', 'sftp-offline'); - return; - } + // if (!isSftpOnline) { + // showNotification('SFTP is offline. Please try again later.', 'error', 'sftp-offline'); + // return; + // } if (!sftpCredentials) { showNotification('SFTP credentials not available.', 'error', 'sftp-credentials');