small update
This commit is contained in:
@@ -65,7 +65,7 @@
|
|||||||
<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">
|
<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>
|
Public Server List</h2>
|
||||||
<p class="text-lg mb-8 max-w-3xl mx-auto opacity-90 leading-relaxed text-center">
|
<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.
|
Discover servers publically hosted on My-MC.<BR>Our public Realms list resets daily at 12 AM EST.
|
||||||
</p>
|
</p>
|
||||||
<div class="search-container">
|
<div class="search-container">
|
||||||
<input type="text" id="search-input" class="search-input" placeholder="Search by owner, MOTD, version, or status...">
|
<input type="text" id="search-input" class="search-input" placeholder="Search by owner, MOTD, version, or status...">
|
||||||
|
|||||||
@@ -1,150 +1,151 @@
|
|||||||
// Function to copy text to clipboard and trigger animation
|
// Function to copy text to clipboard and trigger animation
|
||||||
function copyToClipboard(text, button) {
|
function copyToClipboard(text, button) {
|
||||||
navigator.clipboard.writeText(text).then(() => {
|
navigator.clipboard.writeText(text).then(() => {
|
||||||
button.classList.add('copied');
|
button.classList.add('copied');
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
button.classList.remove('copied');
|
button.classList.remove('copied');
|
||||||
}, 2000);
|
}, 2000);
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
console.error('Failed to copy:', err);
|
console.error('Failed to copy:', err);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Function to create a server card
|
// Function to create a server card
|
||||||
function createServerCard(server, isNew = false) {
|
// 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 ownerName = server.ops && server.ops.length > 0 ? server.ops[0].name : 'Unknown';
|
||||||
const serverCard = document.createElement('div');
|
const updatedCard = createServerCard(server);
|
||||||
serverCard.className = `feature-card tilt-card ${isNew ? 'new-server-animation' : ''}`;
|
existingCard.innerHTML = updatedCard.innerHTML;
|
||||||
serverCard.dataset.connect = server.connect; // Add identifier
|
existingCard.className = updatedCard.className;
|
||||||
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
|
console.log('Server list updated:', {
|
||||||
function updateServerList(newServers) {
|
added: serversToAdd.length,
|
||||||
const serverList = document.getElementById('server-list');
|
removed: serversToRemove.length,
|
||||||
const currentCards = Array.from(serverList.children);
|
total: newServers.length
|
||||||
const currentConnects = currentCards.map(card => card.dataset.connect);
|
});
|
||||||
const newConnects = newServers.map(server => server.connect);
|
}
|
||||||
|
|
||||||
// Find new servers
|
// Function to fetch and display servers
|
||||||
const serversToAdd = newServers.filter(server => !currentConnects.includes(server.connect));
|
async function fetchServers() {
|
||||||
const serversToRemove = currentCards.filter(card => !newConnects.includes(card.dataset.connect));
|
const serverList = document.getElementById('server-list');
|
||||||
|
const loadingMessage = document.getElementById('loading-message');
|
||||||
|
const errorMessage = document.getElementById('error-message');
|
||||||
|
const searchInput = document.getElementById('search-input');
|
||||||
|
|
||||||
// Remove old servers
|
try {
|
||||||
serversToRemove.forEach(card => {
|
const response = await fetch('https://api.my-mc.link/list_all_servers_public');
|
||||||
card.style.opacity = '0';
|
const data = await response.json();
|
||||||
card.style.transform = 'translateY(20px)';
|
|
||||||
setTimeout(() => card.remove(), 300);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Add new servers with animation
|
if (data.success && data.servers) {
|
||||||
serversToAdd.forEach(server => {
|
loadingMessage.classList.add('hidden');
|
||||||
const newCard = createServerCard(server, true);
|
errorMessage.classList.add('hidden');
|
||||||
serverList.insertBefore(newCard, serverList.firstChild);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Update existing servers
|
// Store servers globally for search filtering
|
||||||
newServers.forEach(server => {
|
window.serverData = data.servers;
|
||||||
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:', {
|
// Initial render or update
|
||||||
added: serversToAdd.length,
|
if (serverList.children.length === 0) {
|
||||||
removed: serversToRemove.length,
|
window.serverData.forEach(server => {
|
||||||
total: newServers.length
|
serverList.appendChild(createServerCard(server));
|
||||||
});
|
});
|
||||||
}
|
} else {
|
||||||
|
updateServerList(window.serverData);
|
||||||
// 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);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 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
|
// Initial fetch
|
||||||
fetchServers();
|
fetchServers();
|
||||||
|
|
||||||
// Fetch servers every 60 seconds
|
// Fetch servers every 60 seconds
|
||||||
setInterval(fetchServers, 60000);
|
setInterval(fetchServers, 60000);
|
||||||
Reference in New Issue
Block a user