Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dead Rails Mabar | Private Server</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #0f172a; | |
| color: #e2e8f0; | |
| } | |
| .glow-text { | |
| text-shadow: 0 0 10px rgba(59, 130, 246, 0.7); | |
| } | |
| .server-card { | |
| background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); | |
| border: 1px solid #334155; | |
| transition: all 0.3s ease; | |
| } | |
| .server-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); | |
| } | |
| .join-btn { | |
| background: linear-gradient(90deg, #3b82f6 0%, #6366f1 100%); | |
| transition: all 0.3s ease; | |
| } | |
| .join-btn:hover { | |
| transform: scale(1.05); | |
| box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); | |
| } | |
| .player-card { | |
| background-color: #1e293b; | |
| transition: all 0.2s ease; | |
| } | |
| .player-card:hover { | |
| background-color: #334155; | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); | |
| } | |
| } | |
| .online-dot { | |
| width: 10px; | |
| height: 10px; | |
| background-color: #10b981; | |
| border-radius: 50%; | |
| display: inline-block; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="min-h-screen"> | |
| <!-- Header --> | |
| <header class="bg-gradient-to-r from-blue-900 to-indigo-900 py-6 shadow-lg"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-3"> | |
| <img src="https://tr.rbxcdn.com/7d4c8a2c2c0c5d1d5d8b1b5d5d5d5d5/150/150/Image/Png" alt="Dead Rails Logo" class="w-12 h-12 rounded-full"> | |
| <h1 class="text-2xl md:text-3xl font-bold glow-text">Dead Rails Mabar</h1> | |
| </div> | |
| <div> | |
| <span class="bg-blue-600 text-white px-3 py-1 rounded-full text-sm flex items-center"> | |
| <span class="online-dot mr-2"></span> | |
| <span id="online-count">0</span> Players Online | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Server Info Section --> | |
| <section class="mb-12"> | |
| <div class="text-center mb-8"> | |
| <h2 class="text-3xl font-bold mb-2 glow-text">Private Server</h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto">Join our exclusive Dead Rails private server for the best multiplayer experience with friends!</p> | |
| </div> | |
| <div class="max-w-3xl mx-auto server-card rounded-xl p-6 shadow-lg"> | |
| <div class="flex flex-col md:flex-row items-center justify-between"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <div class="bg-blue-900 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-server text-2xl text-blue-300"></i> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold">Dead Rails VIP Server</h3> | |
| <p class="text-gray-400 text-sm">24/7 Uptime • Low Ping • Custom Events</p> | |
| </div> | |
| </div> | |
| <div> | |
| <a href="https://www.roblox.com/games/123456789/Dead-Rails?privateServerLinkCode=ABC123XYZ" | |
| target="_blank" | |
| class="join-btn text-white font-semibold px-6 py-3 rounded-lg inline-flex items-center"> | |
| <i class="fas fa-play mr-2"></i> Join Server | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-6 pt-6 border-t border-gray-700"> | |
| <div class="flex flex-wrap justify-between"> | |
| <div class="w-full md:w-1/2 mb-4 md:mb-0"> | |
| <h4 class="font-semibold text-blue-400 mb-2">Server Features</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>Exclusive VIP access</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>No random players</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>Custom game modes</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="w-full md:w-1/2"> | |
| <h4 class="font-semibold text-blue-400 mb-2">Server Rules</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-exclamation-triangle text-yellow-500 mr-2"></i> | |
| <span>No hacking/exploiting</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-exclamation-triangle text-yellow-500 mr-2"></i> | |
| <span>Be respectful to others</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-exclamation-triangle text-yellow-500 mr-2"></i> | |
| <span>No excessive teaming</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Online Players Section --> | |
| <section> | |
| <div class="text-center mb-8"> | |
| <h2 class="text-3xl font-bold mb-2 glow-text">Online Players</h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto">See who's currently playing in our private server</p> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4" id="players-list"> | |
| <!-- Player cards will be added here by JavaScript --> | |
| <div class="text-center py-8"> | |
| <div class="animate-spin text-blue-400 text-4xl mb-4"> | |
| <i class="fas fa-spinner"></i> | |
| </div> | |
| <p>Loading players...</p> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 py-8 border-t border-gray-800"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <h3 class="text-xl font-semibold mb-2">Dead Rails Mabar</h3> | |
| <p class="text-gray-400 text-sm">The best place to play Dead Rails with friends</p> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-blue-400 transition"> | |
| <i class="fab fa-discord text-2xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-blue-400 transition"> | |
| <i class="fab fa-twitter text-2xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-blue-400 transition"> | |
| <i class="fab fa-youtube text-2xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-center text-gray-500 text-sm"> | |
| <p>© 2023 Dead Rails Mabar. Not affiliated with Roblox Corporation.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Simulate fetching online players data | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Simulate API delay | |
| setTimeout(() => { | |
| // Sample player data | |
| const players = [ | |
| { name: "ProGamer123", level: 45, avatar: "https://tr.rbxcdn.com/7d4c8a2c2c0c5d1d5d8b1b5d5d5d5d5/150/150/Image/Png" }, | |
| { name: "RailMaster", level: 32, avatar: "https://tr.rbxcdn.com/7d4c8a2c2c0c5d1d5d8b1b5d5d5d5d5/150/150/Image/Png" }, | |
| { name: "DeadShot99", level: 28, avatar: "https://tr.rbxcdn.com/7d4c8a2c2c0c5d1d5d8b1b5d5d5d5d5/150/150/Image/Png" }, | |
| { name: "TrainHunter", level: 56, avatar: "https://tr.rbxcdn.com/7d4c8a2c2c0c5d1d5d8b1b5d5d5d5d5/150/150/Image/Png" }, | |
| { name: "ZombieSlayer", level: 19, avatar: "https://tr.rbxcdn.com/7d4c8a2c2c0c5d1d5d8b1b5d5d5d5d5/150/150/Image/Png" }, | |
| { name: "SurvivorPro", level: 63, avatar: "https://tr.rbxcdn.com/7d4c8a2c2c0c5d1d5d8b1b5d5d5d5d5/150/150/Image/Png" } | |
| ]; | |
| // Update online count | |
| document.getElementById('online-count').textContent = players.length; | |
| // Generate player cards | |
| const playersList = document.getElementById('players-list'); | |
| playersList.innerHTML = ''; | |
| players.forEach(player => { | |
| const playerCard = document.createElement('div'); | |
| playerCard.className = 'player-card rounded-lg p-4 flex items-center space-x-4 cursor-pointer'; | |
| playerCard.innerHTML = ` | |
| <div class="relative"> | |
| <img src="${player.avatar}" alt="${player.name}" class="w-14 h-14 rounded-full"> | |
| <span class="online-dot absolute bottom-0 right-0"></span> | |
| </div> | |
| <div class="text-left"> | |
| <h4 class="font-semibold">${player.name}</h4> | |
| <p class="text-gray-400 text-sm">Level ${player.level}</p> | |
| </div> | |
| <div class="ml-auto"> | |
| <span class="bg-blue-900 text-blue-300 text-xs px-2 py-1 rounded">Playing</span> | |
| </div> | |
| `; | |
| playersList.appendChild(playerCard); | |
| }); | |
| // Add empty state if no players | |
| if (players.length === 0) { | |
| playersList.innerHTML = ` | |
| <div class="col-span-3 text-center py-12"> | |
| <i class="fas fa-users-slash text-4xl text-gray-600 mb-4"></i> | |
| <h3 class="text-xl font-semibold mb-2">No Players Online</h3> | |
| <p class="text-gray-400">Be the first to join our server!</p> | |
| </div> | |
| `; | |
| } | |
| }, 1500); | |
| // Simulate player count updates | |
| setInterval(() => { | |
| const onlineCount = document.getElementById('online-count'); | |
| const currentCount = parseInt(onlineCount.textContent); | |
| const randomChange = Math.floor(Math.random() * 3) - 1; // -1, 0, or 1 | |
| const newCount = Math.max(0, currentCount + randomChange); | |
| onlineCount.textContent = newCount; | |
| // Add pulse animation when count changes | |
| if (randomChange !== 0) { | |
| onlineCount.parentElement.classList.add('pulse'); | |
| setTimeout(() => { | |
| onlineCount.parentElement.classList.remove('pulse'); | |
| }, 2000); | |
| } | |
| }, 10000); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=XBotz/dead-rails" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |