|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>PlaneShift - The Free MMORPG</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=MedievalSharp&family=Uncial+Antiqua&display=swap'); |
|
|
|
.medieval-font { |
|
font-family: 'MedievalSharp', cursive; |
|
} |
|
|
|
.uncial-font { |
|
font-family: 'Uncial Antiqua', cursive; |
|
} |
|
|
|
.glow-text { |
|
text-shadow: 0 0 5px rgba(100, 149, 237, 0.8); |
|
} |
|
|
|
.portal-bg { |
|
background: radial-gradient(circle at center, #1a1a2e 0%, #16213e 50%, #0f3460 100%); |
|
} |
|
|
|
.crystal-card { |
|
background: rgba(15, 23, 42, 0.7); |
|
backdrop-filter: blur(10px); |
|
border: 1px solid rgba(100, 149, 237, 0.3); |
|
box-shadow: 0 0 15px rgba(100, 149, 237, 0.3); |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.crystal-card:hover { |
|
transform: translateY(-5px); |
|
box-shadow: 0 5px 20px rgba(100, 149, 237, 0.5); |
|
} |
|
|
|
.nav-link { |
|
position: relative; |
|
} |
|
|
|
.nav-link::after { |
|
content: ''; |
|
position: absolute; |
|
width: 0; |
|
height: 2px; |
|
bottom: -2px; |
|
left: 0; |
|
background-color: #6366f1; |
|
transition: width 0.3s ease; |
|
} |
|
|
|
.nav-link:hover::after { |
|
width: 100%; |
|
} |
|
|
|
.floating-island { |
|
animation: float 6s ease-in-out infinite; |
|
} |
|
|
|
@keyframes float { |
|
0% { transform: translateY(0px); } |
|
50% { transform: translateY(-15px); } |
|
100% { transform: translateY(0px); } |
|
} |
|
|
|
.pulse { |
|
animation: pulse 2s infinite; |
|
} |
|
|
|
@keyframes pulse { |
|
0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7); } |
|
70% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); } |
|
100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); } |
|
} |
|
</style> |
|
</head> |
|
<body class="portal-bg text-gray-100 min-h-screen"> |
|
|
|
<nav class="bg-black bg-opacity-50 border-b border-indigo-900"> |
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
<div class="flex items-center justify-between h-16"> |
|
<div class="flex items-center"> |
|
<div class="flex-shrink-0"> |
|
<img class="h-10 w-10" src="https://via.placeholder.com/40x40/6366f1/ffffff?text=PS" alt="PlaneShift Logo"> |
|
</div> |
|
<div class="hidden md:block"> |
|
<div class="ml-10 flex items-baseline space-x-4"> |
|
<a href="#" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-white bg-indigo-900">Home</a> |
|
<a href="#" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Game</a> |
|
<a href="#" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Community</a> |
|
<a href="#" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Media</a> |
|
<a href="#" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Wiki</a> |
|
<a href="#" class="nav-link px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white">Forums</a> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="hidden md:block"> |
|
<div class="ml-4 flex items-center md:ml-6"> |
|
<button class="bg-indigo-700 hover:bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center"> |
|
<i class="fas fa-download mr-2"></i> Download |
|
</button> |
|
</div> |
|
</div> |
|
<div class="-mr-2 flex md:hidden"> |
|
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false"> |
|
<span class="sr-only">Open main menu</span> |
|
<i class="fas fa-bars"></i> |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
</nav> |
|
|
|
|
|
<div class="relative overflow-hidden"> |
|
<div class="max-w-7xl mx-auto"> |
|
<div class="relative z-10 pb-8 sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32"> |
|
<main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 lg:mt-16 lg:px-8 xl:mt-20"> |
|
<div class="sm:text-center lg:text-left"> |
|
<h1 class="text-4xl tracking-tight font-extrabold sm:text-5xl md:text-6xl"> |
|
<span class="block uncial-font text-indigo-400">PlaneShift</span> |
|
<span class="block medieval-font text-white mt-2">A World Beyond Reality</span> |
|
</h1> |
|
<p class="mt-3 text-base text-gray-300 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"> |
|
Enter the mystical world of Yliakum, where magic and technology coexist. Explore vast landscapes, master powerful skills, and forge your destiny in this free, open-source MMORPG. |
|
</p> |
|
<div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start"> |
|
<div class="rounded-md shadow"> |
|
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10"> |
|
Play Now |
|
</a> |
|
</div> |
|
<div class="mt-3 sm:mt-0 sm:ml-3"> |
|
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-300 bg-indigo-900 bg-opacity-60 hover:bg-opacity-70 md:py-4 md:text-lg md:px-10"> |
|
Learn More |
|
</a> |
|
</div> |
|
</div> |
|
</div> |
|
</main> |
|
</div> |
|
</div> |
|
<div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2"> |
|
<div class="floating-island relative h-64 w-full sm:h-72 md:h-96 lg:w-full lg:h-full"> |
|
<img class="absolute inset-0 w-full h-full object-contain" src="https://via.placeholder.com/800x600/1e293b/6366f1?text=PlaneShift+Art" alt="Floating island artwork"> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="py-12 bg-black bg-opacity-30"> |
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
<div class="lg:text-center"> |
|
<h2 class="text-base text-indigo-400 font-semibold tracking-wide uppercase">Features</h2> |
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl"> |
|
A World Like No Other |
|
</p> |
|
</div> |
|
|
|
<div class="mt-10"> |
|
<div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3"> |
|
|
|
<div class="crystal-card rounded-lg p-6"> |
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-900 text-white mb-4"> |
|
<i class="fas fa-dungeon text-xl"></i> |
|
</div> |
|
<h3 class="text-lg font-medium text-white mb-2">Immersive World</h3> |
|
<p class="text-gray-300"> |
|
Explore the vast underground world of Yliakum with its unique cultures, cities, and landscapes all connected by the mystical Crystal. |
|
</p> |
|
</div> |
|
|
|
|
|
<div class="crystal-card rounded-lg p-6"> |
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-900 text-white mb-4"> |
|
<i class="fas fa-hat-wizard text-xl"></i> |
|
</div> |
|
<h3 class="text-lg font-medium text-white mb-2">Skill-Based System</h3> |
|
<p class="text-gray-300"> |
|
No character levels! Improve your skills by using them in a realistic way. Become a master in magic, crafting, or combat. |
|
</p> |
|
</div> |
|
|
|
|
|
<div class="crystal-card rounded-lg p-6"> |
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-900 text-white mb-4"> |
|
<i class="fas fa-users text-xl"></i> |
|
</div> |
|
<h3 class="text-lg font-medium text-white mb-2">Player-Driven Economy</h3> |
|
<p class="text-gray-300"> |
|
Everything is crafted by players. Buy, sell, and trade in a completely player-run economy that reacts to supply and demand. |
|
</p> |
|
</div> |
|
|
|
|
|
<div class="crystal-card rounded-lg p-6"> |
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-900 text-white mb-4"> |
|
<i class="fas fa-book-dead text-xl"></i> |
|
</div> |
|
<h3 class="text-lg font-medium text-white mb-2">Rich Lore</h3> |
|
<p class="text-gray-300"> |
|
Dive into thousands of years of history, with detailed backstories for races, locations, and the mysterious Crystal that powers the world. |
|
</p> |
|
</div> |
|
|
|
|
|
<div class="crystal-card rounded-lg p-6"> |
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-900 text-white mb-4"> |
|
<i class="fas fa-gem text-xl"></i> |
|
</div> |
|
<h3 class="text-lg font-medium text-white mb-2">Unique Races</h3> |
|
<p class="text-gray-300"> |
|
Choose from 8 playable races, each with distinct appearances, cultures, and special abilities that affect gameplay. |
|
</p> |
|
</div> |
|
|
|
|
|
<div class="crystal-card rounded-lg p-6"> |
|
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-900 text-white mb-4"> |
|
<i class="fas fa-code-branch text-xl"></i> |
|
</div> |
|
<h3 class="text-lg font-medium text-white mb-2">Open Source</h3> |
|
<p class="text-gray-300"> |
|
PlaneShift is completely free and open source. Join our community of developers and contribute to the game's evolution. |
|
</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="py-12 bg-black bg-opacity-20"> |
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
<div class="text-center"> |
|
<h2 class="text-base text-indigo-400 font-semibold tracking-wide uppercase">Gallery</h2> |
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl"> |
|
Explore Yliakum |
|
</p> |
|
</div> |
|
|
|
<div class="mt-10 grid grid-cols-2 md:grid-cols-3 gap-4"> |
|
<div class="crystal-card rounded-lg overflow-hidden transform hover:scale-105 transition duration-300"> |
|
<img class="w-full h-48 object-cover" src="https://via.placeholder.com/400x300/1e293b/6366f1?text=City+of+Hydlaa" alt="City of Hydlaa"> |
|
<div class="p-4"> |
|
<h3 class="text-white font-medium">Hydlaa</h3> |
|
<p class="text-gray-300 text-sm">The capital city of Yliakum</p> |
|
</div> |
|
</div> |
|
<div class="crystal-card rounded-lg overflow-hidden transform hover:scale-105 transition duration-300"> |
|
<img class="w-full h-48 object-cover" src="https://via.placeholder.com/400x300/1e293b/6366f1?text=Magic+Academy" alt="Magic Academy"> |
|
<div class="p-4"> |
|
<h3 class="text-white font-medium">Magic Academy</h3> |
|
<p class="text-gray-300 text-sm">Learn the arcane arts</p> |
|
</div> |
|
</div> |
|
<div class="crystal-card rounded-lg overflow-hidden transform hover:scale-105 transition duration-300"> |
|
<img class="w-full h-48 object-cover" src="https://via.placeholder.com/400x300/1e293b/6366f1?text=Wilderness" alt="Wilderness"> |
|
<div class="p-4"> |
|
<h3 class="text-white font-medium">Wilderness</h3> |
|
<p class="text-gray-300 text-sm">Dangerous but rewarding</p> |
|
</div> |
|
</div> |
|
<div class="crystal-card rounded-lg overflow-hidden transform hover:scale-105 transition duration-300"> |
|
<img class="w-full h-48 object-cover" src="https://via.placeholder.com/400x300/1e293b/6366f1?text=Crystal+Cave" alt="Crystal Cave"> |
|
<div class="p-4"> |
|
<h3 class="text-white font-medium">Crystal Cave</h3> |
|
<p class="text-gray-300 text-sm">Source of all magic</p> |
|
</div> |
|
</div> |
|
<div class="crystal-card rounded-lg overflow-hidden transform hover:scale-105 transition duration-300"> |
|
<img class="w-full h-48 object-cover" src="https://via.placeholder.com/400x300/1e293b/6366f1?text=Underground+Lake" alt="Underground Lake"> |
|
<div class="p-4"> |
|
<h3 class="text-white font-medium">Underground Lake</h3> |
|
<p class="text-gray-300 text-sm">Mystical waters</p> |
|
</div> |
|
</div> |
|
<div class="crystal-card rounded-lg overflow-hidden transform hover:scale-105 transition duration-300"> |
|
<img class="w-full h-48 object-cover" src="https://via.placeholder.com/400x300/1e293b/6366f1?text=Dark+Realm" alt="Dark Realm"> |
|
<div class="p-4"> |
|
<h3 class="text-white font-medium">Dark Realm</h3> |
|
<p class="text-gray-300 text-sm">For the brave only</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-indigo-900 bg-opacity-50"> |
|
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between"> |
|
<h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl"> |
|
<span class="block medieval-font">Ready to begin your journey?</span> |
|
<span class="block text-indigo-200">Join thousands of adventurers today.</span> |
|
</h2> |
|
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0"> |
|
<div class="inline-flex rounded-md shadow"> |
|
<a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50"> |
|
<i class="fas fa-download mr-2"></i> Download Now |
|
</a> |
|
</div> |
|
<div class="ml-3 inline-flex rounded-md shadow"> |
|
<a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 bg-opacity-60 hover:bg-opacity-70"> |
|
<i class="fas fa-book-open mr-2"></i> Read the Guide |
|
</a> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="py-12 bg-black bg-opacity-30"> |
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
<div class="text-center"> |
|
<h2 class="text-base text-indigo-400 font-semibold tracking-wide uppercase">Choose Your Path</h2> |
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl"> |
|
Playable Races |
|
</p> |
|
</div> |
|
|
|
<div class="mt-10 grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-4"> |
|
|
|
<div class="crystal-card rounded-lg overflow-hidden transform hover:scale-105 transition duration-300"> |
|
<img class="w-full h-48 object-cover" src="https://via.placeholder.com/400x300/1e293b/6366f1?text=Ylian" alt="Ylian"> |
|
<div class="p-4"> |
|
<h3 class="text-white font-medium text-lg">Ylian</h3> |
|
<p class="text-gray-300 text-sm mt-2">The most common race in Yliakum, versatile and adaptable.</p> |
|
<div class="mt-3 flex items-center text-indigo-300 text-sm"> |
|
<i class="fas fa-shield-alt mr-1"></i> |
|
<span>Balanced stats</span> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="crystal-card rounded-lg overflow-hidden transform hover:scale-105 transition duration-300"> |
|
<img class="w-full h-48 object-cover" src="https://via.placeholder.com/400x300/1e293b/6366f1?text=Kran" alt="Kran"> |
|
<div class="p-4"> |
|
<h3 class="text-white font-medium text-lg">Kran</h3> |
|
<p class="text-gray-300 text-sm mt-2">Living stone creatures, strong and resistant to magic.</p> |
|
<div class="mt-3 flex items-center text-indigo-300 text-sm"> |
|
<i class="fas fa-fist-raised mr-1"></i> |
|
<span>High strength</span> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="crystal-card rounded-lg overflow-hidden transform hover:scale-105 transition duration-300"> |
|
<img class="w-full h-48 object-cover" src="https://via.placeholder.com/400x300/1e293b/6366f1?text=Dermorian" alt="Dermorian"> |
|
<div class="p-4"> |
|
<h3 class="text-white font-medium text-lg">Dermorian</h3> |
|
<p class="text-gray-300 text-sm mt-2">Graceful and intelligent, with natural magical affinity.</p> |
|
<div class="mt-3 flex items-center text-indigo-300 text-sm"> |
|
<i class="fas fa-magic mr-1"></i> |
|
<span>Magic boost</span> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="crystal-card rounded-lg overflow-hidden transform hover:scale-105 transition duration-300"> |
|
<img class="w-full h-48 object-cover" src="https://via.placeholder.com/400x300/1e293b/6366f1?text=Xacha" alt="Xacha"> |
|
<div class="p-4"> |
|
<h3 class="text-white font-medium text-lg">Xacha</h3> |
|
<p class="text-gray-300 text-sm mt-2">Small and agile, masters of stealth and thievery.</p> |
|
<div class="mt-3 flex items-center text-indigo-300 text-sm"> |
|
<i class="fas fa-user-ninja mr-1"></i> |
|
<span>Dexterity focus</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="py-12 bg-indigo-900 bg-opacity-30"> |
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
<div class="lg:text-center"> |
|
<h2 class="text-base text-indigo-300 font-semibold tracking-wide uppercase">Community Voices</h2> |
|
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl"> |
|
What Players Say |
|
</p> |
|
</div> |
|
|
|
<div class="mt-10 grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3"> |
|
|
|
<div class="crystal-card rounded-lg p-6"> |
|
<div class="flex items-center mb-4"> |
|
<img class="h-10 w-10 rounded-full" src="https://via.placeholder.com/40x40/6366f1/ffffff?text=AV" alt="Avatar"> |
|
<div class="ml-3"> |
|
<p class="text-sm font-medium text-white">Aelindra</p> |
|
<p class="text-sm text-indigo-200">Guild Leader</p> |
|
</div> |
|
</div> |
|
<p class="text-gray-300 italic"> |
|
"I've been playing PlaneShift for over 5 years. The community is amazing and the roleplaying is some of the best I've experienced in any MMO." |
|
</p> |
|
<div class="mt-3 flex text-yellow-300"> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="crystal-card rounded-lg p-6"> |
|
<div class="flex items-center mb-4"> |
|
<img class="h-10 w-10 rounded-full" src="https://via.placeholder.com/40x40/6366f1/ffffff?text=KR" alt="Avatar"> |
|
<div class="ml-3"> |
|
<p class="text-sm font-medium text-white">Kragor</p> |
|
<p class="text-sm text-indigo-200">Blacksmith</p> |
|
</div> |
|
</div> |
|
<p class="text-gray-300 italic"> |
|
"The crafting system is incredibly deep. I've spent months mastering blacksmithing and there's still more to learn. The economy feels alive!" |
|
</p> |
|
<div class="mt-3 flex text-yellow-300"> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star-half-alt"></i> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="crystal-card rounded-lg p-6"> |
|
<div class="flex items-center mb-4"> |
|
<img class="h-10 w-10 rounded-full" src="https://via.placeholder.com/40x40/6366f1/ffffff?text=MY" alt="Avatar"> |
|
<div class="ml-3"> |
|
<p class="text-sm font-medium text-white">Mystara</p> |
|
<p class="text-sm text-indigo-200">New Player</p> |
|
</div> |
|
</div> |
|
<p class="text-gray-300 italic"> |
|
"Coming from other MMOs, PlaneShift was a breath of fresh air. No pay-to-win, no rush to max level - just pure exploration and roleplaying." |
|
</p> |
|
<div class="mt-3 flex text-yellow-300"> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="far fa-star"></i> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-black bg-opacity-40 py-12"> |
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
<div class="grid grid-cols-2 gap-8 text-center md:grid-cols-4"> |
|
<div class="crystal-card py-8 px-4 rounded-lg"> |
|
<p class="text-4xl font-extrabold text-indigo-400">15+</p> |
|
<p class="mt-1 text-sm font-medium text-gray-300">Years Running</p> |
|
</div> |
|
<div class="crystal-card py-8 px-4 rounded-lg"> |
|
<p class="text-4xl font-extrabold text-indigo-400">100k+</p> |
|
<p class="mt-1 text-sm font-medium text-gray-300">Active Players</p> |
|
</div> |
|
<div class="crystal-card py-8 px-4 rounded-lg"> |
|
<p class="text-4xl font-extrabold text-indigo-400">8</p> |
|
<p class="mt-1 text-sm font-medium text-gray-300">Playable Races</p> |
|
</div> |
|
<div class="crystal-card py-8 px-4 rounded-lg"> |
|
<p class="text-4xl font-extrabold text-indigo-400">0</p> |
|
<p class="mt-1 text-sm font-medium text-gray-300">Pay-to-Win</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<footer class="bg-black bg-opacity-70 border-t border-indigo-900"> |
|
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> |
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-8"> |
|
<div> |
|
<h3 class="text-sm font-semibold text-indigo-300 tracking-wider uppercase">Game</h3> |
|
<ul class="mt-4 space-y-2"> |
|
<li><a href="#" class="text-gray-300 hover:text-white text-sm">Download</a></li> |
|
<li><a href="#" class="text-gray-300 hover:text-white text-sm">Features</a></li> |
|
<li><a href="#" class="text-gray-300 hover:text-white text-sm">Screenshots</a></li> |
|
<li><a href="#" class="text-gray-300 hover:text-white text-sm">Races</a></li> |
|
</ul> |
|
</div> |
|
<div> |
|
<h3 class="text-sm font-semibold text-indigo-300 tracking-wider uppercase">Community</h3> |
|
<ul class="mt-4 space-y-2"> |
|
<li><a href="#" class="text-gray-300 hover:text-white text-sm">Forums</a></li> |
|
<li><a href="#" class="text-gray-300 hover:text-white text-sm">Wiki</a></li> |
|
<li><a href="#" class="text-gray-300 hover:text-white text-sm">IRC</a></li> |
|
<li><a href="#" class="text-gray-300 hover:text-white text-sm">Discord</a></li> |
|
</ul> |
|
</div> |
|
<div> |
|
<h3 class="text-sm font-semibold text-indigo-300 tracking-wider uppercase">Development</h3> |
|
<ul class="mt-4 space-y-2"> |
|
<li><a href="#" class="text-gray-300 hover:text-white text-sm">Source Code</a></li> |
|
<li><a href="#" class="text-gray-300 hover:text-white text-sm">Contribute</a></li> |
|
<li><a href="#" class="text-gray-300 hover:text-white text-sm">Bug Tracker</a></li> |
|
<li><a href="#" class="text-gray-300 hover:text-white text-sm">Roadmap</a></li> |
|
</ul> |
|
</div> |
|
<div> |
|
<h3 class="text-sm font-semibold text-indigo-300 tracking-wider uppercase">Legal</h3> |
|
<ul class="mt-4 space-y-2"> |
|
<li><a href="#" class="text-gray-300 hover:text-white text-sm">Privacy</a></li> |
|
<li><a href="#" class="text-gray-300 hover:text-white text-sm">Terms</a></li> |
|
<li><a href="#" class="text-gray-300 hover:text-white text-sm">License</a></li> |
|
<li><a href="#" class="text-gray-300 hover:text-white text-sm">Credits</a></li> |
|
</ul> |
|
</div> |
|
</div> |
|
<div class="mt-8 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> |
|
<div class="flex space-x-6"> |
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
<i class="fab fa-twitter"></i> |
|
</a> |
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
<i class="fab fa-facebook"></i> |
|
</a> |
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
<i class="fab fa-youtube"></i> |
|
</a> |
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
<i class="fab fa-discord"></i> |
|
</a> |
|
<a href="#" class="text-gray-400 hover:text-white"> |
|
<i class="fab fa-github"></i> |
|
</a> |
|
</div> |
|
<p class="mt-4 md:mt-0 text-gray-400 text-sm"> |
|
© 2023 PlaneShift Team. All rights reserved. |
|
</p> |
|
</div> |
|
</div> |
|
</footer> |
|
|
|
|
|
<div class="fixed bottom-6 right-6"> |
|
<button class="pulse w-14 h-14 rounded-full bg-indigo-600 text-white flex items-center justify-center shadow-lg hover:bg-indigo-700 focus:outline-none"> |
|
<i class="fas fa-question text-xl"></i> |
|
</button> |
|
</div> |
|
|
|
<script> |
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
const mobileMenuButton = document.querySelector('[aria-controls="mobile-menu"]'); |
|
mobileMenuButton.addEventListener('click', function() { |
|
const expanded = this.getAttribute('aria-expanded') === 'true'; |
|
this.setAttribute('aria-expanded', !expanded); |
|
|
|
console.log('Mobile menu toggled'); |
|
}); |
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
anchor.addEventListener('click', function (e) { |
|
e.preventDefault(); |
|
document.querySelector(this.getAttribute('href')).scrollIntoView({ |
|
behavior: 'smooth' |
|
}); |
|
}); |
|
}); |
|
}); |
|
</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=hullajump/planeshift-fake-portal" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
</html> |
