adding in server list
This commit is contained in:
@@ -33,6 +33,9 @@
|
|||||||
<li class="mb-6">
|
<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>
|
<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>
|
||||||
|
<li class="mb-6">
|
||||||
|
<a href="https://list.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">Server List</a>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
<!-- Particle Effects -->
|
<!-- Particle Effects -->
|
||||||
@@ -51,10 +54,11 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- Navigation Buttons (hidden on mobile) -->
|
<!-- Navigation Buttons (hidden on mobile) -->
|
||||||
<nav class="flex items-center gap-2 hidden md:flex">
|
<nav class="flex items-center gap-2 hidden md:flex">
|
||||||
<a href="https://panel.my-mc.link" class="nav-btn" target="_blank">Panel</a>
|
<a href="https://panel.my-mc.link" class="nav-btn">Panel</a>
|
||||||
<a href="https://stats.my-mc.link" class="nav-btn">System Stats</a>
|
<a href="https://stats.my-mc.link" class="nav-btn">System Stats</a>
|
||||||
<a href="https://status.my-mc.link" class="nav-btn" target="_blank">MC Status</a>
|
<a href="https://status.my-mc.link" class="nav-btn" target="_blank">MC Status</a>
|
||||||
<a href="https://info.my-mc.link" class="nav-btn" target="_blank">Wiki</a>
|
<a href="https://info.my-mc.link" class="nav-btn" target="_blank">Wiki</a>
|
||||||
|
<a href="https://list.my-mc.link" class="nav-btn" target="_blank">Server List</a>
|
||||||
|
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
93
servers/index.html
Normal file
93
servers/index.html
Normal file
@@ -0,0 +1,93 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>My-MC.Link | Server List</title>
|
||||||
|
<link rel="icon" href="https://minecraft.wiki/images/Favicon.png" type="image/png">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700;900&display=swap" rel="stylesheet">
|
||||||
|
<link href="https://my-mc.link/css/style.min.css?p=" rel="stylesheet">
|
||||||
|
<link href="https://my-mc.link/favicon.ico" rel="icon" type="image/x-icon">
|
||||||
|
<link href="https://list.my-mc.link/style.css" rel="stylesheet">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- 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 bg-gray-900/98 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://panel.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">Panel</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://status.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">Check MC Status</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>
|
||||||
|
</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">
|
||||||
|
<div>
|
||||||
|
<h1 class="text-5xl minecraft-font bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
|
||||||
|
My-MC.Link Servers</h1>
|
||||||
|
<p class="text-lg mt-4 opacity-90 tracking-wide font-medium">Explore Public Minecraft Servers</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://panel.my-mc.link" class="nav-btn">Panel</a>
|
||||||
|
<a href="https://stats.my-mc.link" class="nav-btn">System Stats</a>
|
||||||
|
<a href="https://status.my-mc.link" class="nav-btn" target="_blank">MC Status</a>
|
||||||
|
<a href="https://info.my-mc.link" class="nav-btn" target="_blank">Wiki</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-16 relative z-2">
|
||||||
|
<section class="section-bg p-8 sm:p-10 mb-12">
|
||||||
|
<h2 class="text-3xl minecraft-font mb-8 text-center bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-blue-500">
|
||||||
|
Public Server List</h2>
|
||||||
|
<p class="text-lg mb-8 max-w-3xl mx-auto opacity-90 leading-relaxed text-center">
|
||||||
|
Discover servers publically hosted on My-MC.<BR>Our public Realms list resets daily at 12 AM EST daily.
|
||||||
|
</p>
|
||||||
|
<div class="search-container">
|
||||||
|
<input type="text" id="search-input" class="search-input" placeholder="Search by owner, MOTD, version, or status...">
|
||||||
|
</div>
|
||||||
|
<div id="server-list" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
<!-- Server cards will be dynamically inserted here -->
|
||||||
|
</div>
|
||||||
|
<p id="loading-message" class="text-center text-gray-400 mt-8">Loading servers...</p>
|
||||||
|
<p id="error-message" class="text-center text-red-400 mt-8 hidden">Failed to load servers. Please try again later.</p>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="bg-gray-900/20 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" target="_blank">Holesail</a> with services
|
||||||
|
donated by <a href="https://raven-scott.fyi" class="underline">SNXRaven</a>
|
||||||
|
</p>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="https://my-mc.link/js/main.js"></script>
|
||||||
|
<script src="https://list.my-mc.link/server_list.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
150
servers/server_list.js
Normal file
150
servers/server_list.js
Normal file
@@ -0,0 +1,150 @@
|
|||||||
|
// Function to copy text to clipboard and trigger animation
|
||||||
|
function copyToClipboard(text, button) {
|
||||||
|
navigator.clipboard.writeText(text).then(() => {
|
||||||
|
button.classList.add('copied');
|
||||||
|
setTimeout(() => {
|
||||||
|
button.classList.remove('copied');
|
||||||
|
}, 2000);
|
||||||
|
}).catch(err => {
|
||||||
|
console.error('Failed to copy:', err);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to create a server card
|
||||||
|
function createServerCard(server, isNew = false) {
|
||||||
|
const ownerName = server.ops && server.ops.length > 0 ? server.ops[0].name : 'Unknown';
|
||||||
|
const serverCard = document.createElement('div');
|
||||||
|
serverCard.className = `feature-card tilt-card ${isNew ? 'new-server-animation' : ''}`;
|
||||||
|
serverCard.dataset.connect = server.connect; // Add identifier
|
||||||
|
serverCard.innerHTML = `
|
||||||
|
<div class="flex items-center mb-3">
|
||||||
|
<span class="inline-block w-3 h-3 rounded-full mr-2 ${server.online ? 'bg-green-500' : 'bg-red-500'}"></span>
|
||||||
|
<h3 class="text-xl minecraft-font text-teal-400">${ownerName}'s Server</h3>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm opacity-90 leading-relaxed mb-2"><strong>MOTD:</strong> ${server.motd}</p>
|
||||||
|
<p class="text-sm opacity-90 leading-relaxed mb-2"><strong>Version:</strong> ${server.gameVersion}</p>
|
||||||
|
<p class="text-sm opacity-90 leading-relaxed mb-2"><strong>Gamemode:</strong> ${server.gamemode}</p>
|
||||||
|
<p class="text-sm opacity-90 leading-relaxed mb-2"><strong>Hardcore:</strong> ${server.hardcore ? 'Yes' : 'No'}</p>
|
||||||
|
<p class="text-sm opacity-90 leading-relaxed"><strong>Status:</strong> ${server.online ? 'Online' : 'Offline'}</p>
|
||||||
|
<div class="flex items-center text-sm opacity-90 leading-relaxed mb-2">
|
||||||
|
<strong>Connect:</strong>
|
||||||
|
<span class="ml-2">${server.connect}</span>
|
||||||
|
<button class="copy-btn ml-4" onclick="copyToClipboard('${server.connect}', this)" style="color: #2DD4BF;">
|
||||||
|
<svg class="clipboard" 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 5H6a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-2m-2-2h-4a2 2 0 00-2 2h8a2 2 0 01-2 2h-4a2 2 0 01-2-2z"></path>
|
||||||
|
</svg>
|
||||||
|
<svg class="checkmark" 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="M5 13l4 4L19 7"></path>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
return serverCard;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to update server list dynamically
|
||||||
|
function updateServerList(newServers) {
|
||||||
|
const serverList = document.getElementById('server-list');
|
||||||
|
const currentCards = Array.from(serverList.children);
|
||||||
|
const currentConnects = currentCards.map(card => card.dataset.connect);
|
||||||
|
const newConnects = newServers.map(server => server.connect);
|
||||||
|
|
||||||
|
// Find new servers
|
||||||
|
const serversToAdd = newServers.filter(server => !currentConnects.includes(server.connect));
|
||||||
|
const serversToRemove = currentCards.filter(card => !newConnects.includes(card.dataset.connect));
|
||||||
|
|
||||||
|
// Remove old servers
|
||||||
|
serversToRemove.forEach(card => {
|
||||||
|
card.style.opacity = '0';
|
||||||
|
card.style.transform = 'translateY(20px)';
|
||||||
|
setTimeout(() => card.remove(), 300);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add new servers with animation
|
||||||
|
serversToAdd.forEach(server => {
|
||||||
|
const newCard = createServerCard(server, true);
|
||||||
|
serverList.insertBefore(newCard, serverList.firstChild);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update existing servers
|
||||||
|
newServers.forEach(server => {
|
||||||
|
const existingCard = currentCards.find(card => card.dataset.connect === server.connect);
|
||||||
|
if (existingCard) {
|
||||||
|
const ownerName = server.ops && server.ops.length > 0 ? server.ops[0].name : 'Unknown';
|
||||||
|
const updatedCard = createServerCard(server);
|
||||||
|
existingCard.innerHTML = updatedCard.innerHTML;
|
||||||
|
existingCard.className = updatedCard.className;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log('Server list updated:', {
|
||||||
|
added: serversToAdd.length,
|
||||||
|
removed: serversToRemove.length,
|
||||||
|
total: newServers.length
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Function to fetch and display servers
|
||||||
|
async function fetchServers() {
|
||||||
|
const serverList = document.getElementById('server-list');
|
||||||
|
const loadingMessage = document.getElementById('loading-message');
|
||||||
|
const errorMessage = document.getElementById('error-message');
|
||||||
|
const searchInput = document.getElementById('search-input');
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch('https://api.my-mc.link/list_all_servers_public');
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
if (data.success && data.servers) {
|
||||||
|
loadingMessage.classList.add('hidden');
|
||||||
|
errorMessage.classList.add('hidden');
|
||||||
|
|
||||||
|
// Store servers globally for search filtering
|
||||||
|
window.serverData = data.servers;
|
||||||
|
|
||||||
|
// Initial render or update
|
||||||
|
if (serverList.children.length === 0) {
|
||||||
|
window.serverData.forEach(server => {
|
||||||
|
serverList.appendChild(createServerCard(server));
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
updateServerList(window.serverData);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add search event listener (only once)
|
||||||
|
if (!searchInput.dataset.listener) {
|
||||||
|
searchInput.dataset.listener = 'true';
|
||||||
|
searchInput.addEventListener('input', () => {
|
||||||
|
const searchTerm = searchInput.value.trim().toLowerCase();
|
||||||
|
const filteredServers = window.serverData.filter(server => {
|
||||||
|
const ownerName = server.ops && server.ops.length > 0 ? server.ops[0].name.toLowerCase() : 'unknown';
|
||||||
|
const motd = server.motd.toLowerCase();
|
||||||
|
const version = server.gameVersion.toLowerCase();
|
||||||
|
const status = server.online ? 'online' : 'offline';
|
||||||
|
|
||||||
|
return (
|
||||||
|
ownerName.includes(searchTerm) ||
|
||||||
|
motd.includes(searchTerm) ||
|
||||||
|
version.includes(searchTerm) ||
|
||||||
|
status.includes(searchTerm)
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
updateServerList(filteredServers);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
throw new Error('No servers found');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
loadingMessage.classList.add('hidden');
|
||||||
|
errorMessage.classList.remove('hidden');
|
||||||
|
console.error('Error fetching servers:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initial fetch
|
||||||
|
fetchServers();
|
||||||
|
|
||||||
|
// Fetch servers every 60 seconds
|
||||||
|
setInterval(fetchServers, 60000);
|
||||||
91
servers/style.css
Normal file
91
servers/style.css
Normal file
@@ -0,0 +1,91 @@
|
|||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
main {
|
||||||
|
flex: 1 0 auto;
|
||||||
|
}
|
||||||
|
footer {
|
||||||
|
flex-shrink: 0;
|
||||||
|
position: sticky;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.copy-btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
background-color: rgba(45, 212, 191, 0.2);
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.copy-btn:hover {
|
||||||
|
background-color: rgba(45, 212, 191, 0.4);
|
||||||
|
}
|
||||||
|
.copy-btn.copied {
|
||||||
|
background-color: rgba(34, 197, 94, 0.4);
|
||||||
|
}
|
||||||
|
.copy-btn.copied svg.clipboard {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.copy-btn.copied svg.checkmark {
|
||||||
|
display: block;
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
.copy-btn svg {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
.copy-btn svg.clipboard {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.copy-btn svg.checkmark {
|
||||||
|
display: none;
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.5);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.search-container {
|
||||||
|
max-width: 500px;
|
||||||
|
margin: 0 auto 1.5rem;
|
||||||
|
}
|
||||||
|
.search-input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
border: 2px solid #2DD4BF;
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
color: white;
|
||||||
|
font-size: 1rem;
|
||||||
|
outline: none;
|
||||||
|
transition: border-color 0.3s ease;
|
||||||
|
}
|
||||||
|
.search-input:focus {
|
||||||
|
border-color: #3B82F6;
|
||||||
|
}
|
||||||
|
.search-input::placeholder {
|
||||||
|
color: rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
.new-server-animation {
|
||||||
|
animation: slideIn 0.5s ease-out forwards;
|
||||||
|
border: 2px solid #2DD4BF;
|
||||||
|
box-shadow: 0 0 10px rgba(45, 212, 191, 0.5);
|
||||||
|
}
|
||||||
|
@keyframes slideIn {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20px) scale(0.95);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0) scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user