.

mc.html

@@ -19,6 +19,12 @@
             transition: all 0.3s ease;
         }
 
+        .server-status-widget:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.4);
+            border-color: var(--link-hover-border);
+        }
+
         .status-header {
             display: flex;
             align-items: center;
@@ -74,6 +80,19 @@
             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
             gap: 16px;
             margin-bottom: 16px;
+            animation: fadeSlideUp 0.5s ease-out forwards 0.2s;
+        }
+
+        @keyframes fadeSlideUp {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
         }
 
         .info-card {
@@ -81,6 +100,18 @@
             border-radius: 12px;
             padding: 16px;
             border: 1px solid rgba(244, 162, 97, 0.3);
+            transition: all 0.2s ease;
+        }
+
+        .info-card:hover {
+            transform: scale(1.02);
+            background: rgba(42, 26, 94, 0.6);
+            border-color: rgba(244, 162, 97, 0.5);
+            box-shadow: 0 4px 12px rgba(244, 162, 97, 0.2);
+        }
+
+        .info-card.copyable {
+            cursor: pointer;
         }
 
         .info-label {
@@ -94,6 +125,7 @@
             font-size: 1.3rem;
             color: var(--text-color);
             font-weight: 600;
+            word-break: break-all;
         }
 
         .server-motd {
@@ -107,6 +139,13 @@
             line-height: 1.6;
             white-space: pre-wrap;
             word-break: break-word;
+            animation: fadeSlideUp 0.5s ease-out forwards 0.4s;
+            transition: all 0.2s ease;
+        }
+
+        .server-motd:hover {
+            background: rgba(42, 26, 94, 0.6);
+            border-color: rgba(244, 162, 97, 0.5);
         }
 
         .last-updated {
@@ -114,7 +153,17 @@
             color: var(--subtitle-color);
             text-align: right;
             margin-top: 12px;
-            opacity: 0.8;
+            animation: fadeIn 0.5s ease-out forwards 0.6s;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+            }
+
+            to {
+                opacity: 0.8;
+            }
         }
 
         .loading {
@@ -156,6 +205,137 @@
             color: var(--subtitle-color);
             line-height: 1.5;
         }
+
+        .fingerprint-widget {
+            background: var(--link-bg);
+            border-radius: 16px;
+            padding: 24px;
+            border: 1px solid var(--container-border);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.3);
+            margin: 24px 0;
+            transition: all 0.3s ease;
+        }
+
+        .fingerprint-widget:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.4);
+            border-color: var(--link-hover-border);
+        }
+
+        /* Copy button styles */
+        .info-value-wrapper {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            justify-content: space-between;
+        }
+
+        .copy-button {
+            background: rgba(244, 162, 97, 0.1);
+            border: 1px solid rgba(244, 162, 97, 0.3);
+            border-radius: 8px;
+            padding: 8px;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 36px;
+            height: 36px;
+            flex-shrink: 0;
+        }
+
+        .copy-button:hover {
+            background: rgba(244, 162, 97, 0.2);
+            border-color: var(--link-hover-border);
+            transform: scale(1.05);
+        }
+
+        .copy-button.copied {
+            background: rgba(74, 222, 128, 0.2);
+            border-color: rgba(74, 222, 128, 0.5);
+        }
+
+        .copy-icon {
+            width: 18px;
+            height: 18px;
+            color: var(--link-color);
+            flex-shrink: 0;
+        }
+
+        /* Resourcepack widget styles */
+        .resourcepack-widget {
+            background: var(--link-bg);
+            border-radius: 16px;
+            padding: 0;
+            border: 1px solid var(--container-border);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.3);
+            margin: 24px 0;
+            transition: all 0.3s ease;
+            overflow: hidden;
+        }
+
+        .resourcepack-widget:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.4);
+            border-color: var(--link-hover-border);
+        }
+
+        .resourcepack-link {
+            display: flex;
+            align-items: center;
+            gap: 16px;
+            padding: 20px 24px;
+            text-decoration: none;
+            color: var(--text-color);
+            transition: all 0.2s ease;
+        }
+
+        .resourcepack-link:hover {
+            background: rgba(42, 26, 94, 0.3);
+        }
+
+        .resourcepack-icon {
+            width: 32px;
+            height: 32px;
+            color: var(--link-color);
+            flex-shrink: 0;
+        }
+
+        .resourcepack-link div {
+            flex: 1;
+        }
+
+        .resourcepack-link strong {
+            display: block;
+            font-size: 1.1rem;
+            margin-bottom: 4px;
+        }
+
+        .resourcepack-desc {
+            font-size: 0.9rem;
+            color: var(--subtitle-color);
+        }
+
+        .download-icon {
+            width: 24px;
+            height: 24px;
+            color: var(--subtitle-color);
+            flex-shrink: 0;
+        }
+
+        /* Disable card hover for copy cards */
+        #fingerprintCard {
+            cursor: default !important;
+        }
+
+        #fingerprintCard:hover {
+            transform: none !important;
+        }
     </style>
 </head>
 
@@ -186,29 +366,45 @@
             <h3>Do skinów polecam ely.by jak ktoś nie ma premium (nie musi)</h3>
         </div>
 
-        <ul>
+        <div class="fingerprint-widget slide-up" style="animation-delay: 0.3s" id="fingerprintWidget">
-            <li class="slide-up" style="animation-delay: 0.3s">
+            <div class="info-card" id="fingerprintCard">
-                <a href="">
+                <div class="info-label">AutoModpack Fingerprint</div>
-                    <strong>IP</strong>
+                <div class="info-value-wrapper">
-                    <span>krzak.org</span>
+                    <div class="info-value" id="fingerprintValue">
-                </a>
+                        3b180a41fe913487c1c86ad79c6dc085d01a272ac2da556f4bf7379ee3a535f8</div>
-            </li>
+                    <button class="copy-button" data-copy-target="fingerprintValue" title="Copy to clipboard">
-            <li class="slide-up" style="animation-delay: 0.35s">
+                        <svg class="copy-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <a href="/mc/automodpack_fingerprint.txt">
+                            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
-                    <strong>Fingerprint</strong>
+                            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
-                    <span>automodpack_fingerprint.txt</span>
+                        </svg>
-                </a>
+                    </button>
-            </li>
+                </div>
-            <li class="slide-up" style="animation-delay: 0.4s">
+            </div>
-                <a href="/mc/pack.zip">
+        </div>
-                    <strong>resourcepack</strong>
-                </a>
-            </li>
-        </ul>
 
-        <br />
+            <div class="resourcepack-widget slide-up" style="animation-delay: 0.35s">
+                <a href="/mc/pack.zip" class="resourcepack-link">
+                    <svg class="resourcepack-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                        stroke-width="2">
+                        <path
+                            d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z">
+                        </path>
+                        <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
+                        <line x1="12" y1="22.08" x2="12" y2="12"></line>
+                    </svg>
+                    <div>
+                        <strong>Download Resource Pack</strong>
+                        <span class="resourcepack-desc">Custom vanillatweaks setup</span>
+                    </div>
+                    <svg class="download-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                        <polyline points="7 10 12 15 17 10"></polyline>
+                        <line x1="12" y1="15" x2="12" y2="3"></line>
+                    </svg>
+                </a>
+            </div>
         <ul>
-            <li class="slide-up" style="animation-delay: 0.45s">
+            <li class="slide-up" style="animation-delay: 0.4s">
                 <a href="/">
                     <strong>Back</strong>
                 </a>
@@ -227,14 +423,37 @@
     <script src="/refresh.js"></script>
     <script src="/animations.js"></script>
     <script>
+        // Configuration
         const SERVER_ADDRESS = 'krzak.org';
-        const REFRESH_INTERVAL = 30000; // 30 seconds
+        const FINGERPRINT = '3b180a41fe913487c1c86ad79c6dc085d01a272ac2da556f4bf7379ee3a535f8';
+        const REFRESH_INTERVAL = 30000;
 
+        // Single event listener for all copy buttons (event delegation)
+        document.addEventListener('click', function (e) {
+            const copyButton = e.target.closest('.copy-button');
+            if (!copyButton) return;
+
+            const target = copyButton.dataset.copyTarget;
+            const textToCopy = target === 'serverAddress' ? SERVER_ADDRESS : FINGERPRINT;
+
+            navigator.clipboard.writeText(textToCopy).then(() => {
+                // Show success feedback
+                const originalHTML = copyButton.innerHTML;
+                copyButton.innerHTML = '<svg class="copy-icon" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg>';
+                copyButton.classList.add('copied');
+
+                setTimeout(() => {
+                    copyButton.innerHTML = originalHTML;
+                    copyButton.classList.remove('copied');
+                }, 2000);
+            }).catch(err => console.error('Failed to copy:', err));
+        });
+
+        // Server status functions
         async function fetchServerStatus() {
             try {
                 const response = await fetch(`https://api.mcsrvstat.us/3/${SERVER_ADDRESS}`);
-                const data = await response.json();
+                return await response.json();
-                return data;
             } catch (error) {
                 console.error('Error fetching server status:', error);
                 return null;
@@ -243,16 +462,10 @@
 
         function formatMOTD(motd) {
             if (!motd) return 'No MOTD available';
-
             if (typeof motd === 'object' && motd.clean) {
                 return Array.isArray(motd.clean) ? motd.clean.join('\n') : motd.clean;
             }
-
+            return Array.isArray(motd) ? motd.join('\n') : motd;
-            if (Array.isArray(motd)) {
-                return motd.join('\n');
-            }
-
-            return motd;
         }
 
         function renderStatus(data) {
@@ -260,19 +473,19 @@
 
             if (!data || !data.online) {
                 widget.innerHTML = `
-                    <div class="status-header">
+            <div class="status-header">
-                        <div class="status-title">
+                <div class="status-title">
-                            <div class="status-indicator offline"></div>
+                    <div class="status-indicator offline"></div>
-                            Server Status
+                    Server Status
-                        </div>
+                </div>
-                    </div>
+            </div>
-                    <div class="error-message">
+            <div class="error-message">
-                        Server is currently offline or unreachable
+                Server is currently offline or unreachable
-                    </div>
+            </div>
-                    <div class="last-updated">
+            <div class="last-updated">
-                        Last checked: ${new Date().toLocaleTimeString()}
+                Last checked: ${new Date().toLocaleTimeString()}
-                    </div>
+            </div>
-                `;
+        `;
                 return;
             }
 
@@ -283,49 +496,52 @@
             const playersList = data.players?.list || [];
 
             widget.innerHTML = `
-                <div class="status-header">
+        <div class="status-header">
-                    <div class="status-title">
+            <div class="status-title">
-                        <div class="status-indicator online"></div>
+                <div class="status-indicator online"></div>
-                        Server Status
+                Server Status
+            </div>
+        </div>
+        <div class="status-info">
+            <div class="info-card">
+                <div class="info-label">Players Online</div>
+                <div class="info-value">${playersOnline} / ${playersMax}</div>
+                ${playersList.length > 0 ? `
+                    <div class="players-list">
+                        ${playersList.slice(0, 10).join(', ')}${playersList.length > 10 ? '...' : ''}
                     </div>
-                </div>
-                <div class="status-info">
-                    <div class="info-card">
-                        <div class="info-label">Players Online</div>
-                        <div class="info-value">${playersOnline} / ${playersMax}</div>
-                        ${playersList.length > 0 ? `
-                            <div class="players-list">
-                                ${playersList.slice(0, 10).join(', ')}${playersList.length > 10 ? '...' : ''}
-                            </div>
-                        ` : ''}
-                    </div>
-                    <div class="info-card">
-                        <div class="info-label">Version</div>
-                        <div class="info-value" style="font-size: 1.1rem;">${version}</div>
-                    </div>
-                    <div class="info-card">
-                        <div class="info-label">Server Address</div>
-                        <div class="info-value" style="font-size: 1rem;">${SERVER_ADDRESS}</div>
-                    </div>
-                </div>
-                ${motd ? `
-                    <div class="server-motd">${motd}</div>
                 ` : ''}
-                <div class="last-updated">
+            </div>
-                    Last updated: ${new Date().toLocaleTimeString()}
+            <div class="info-card">
+                <div class="info-label">Version</div>
+                <div class="info-value" style="font-size: 1.1rem;">${version}</div>
+            </div>
+            <div class="info-card" id="serverAddressCard">
+                <div class="info-label">Server Address</div>
+                <div class="info-value-wrapper">
+                    <div class="info-value" style="font-size: 1rem;">${SERVER_ADDRESS}</div>
+                    <button class="copy-button" data-copy-target="serverAddress" title="Copy to clipboard">
+                        <svg class="copy-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+                        </svg>
+                    </button>
                 </div>
-            `;
+            </div>
+        </div>
+        ${motd ? `<div class="server-motd">${motd}</div>` : ''}
+        <div class="last-updated">
+            Last updated: ${new Date().toLocaleTimeString()}
+        </div>
+    `;
         }
 
         async function updateStatus() {
-            const data = await fetchServerStatus();
+            renderStatus(await fetchServerStatus());
-            renderStatus(data);
         }
 
-        // Initial load
+        // Initial load and auto-refresh
         updateStatus();
-
-        // Auto-refresh every 30 seconds
         setInterval(updateStatus, REFRESH_INTERVAL);
     </script>
 </body>