|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Divine Pantheon Archive</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=Cinzel+Decorative:wght@400;700;900&family=MedievalSharp&family=Montserrat:wght@300;400;600&display=swap'); |
|
|
|
body { |
|
font-family: 'Montserrat', sans-serif; |
|
background-color: #0f0e17; |
|
color: #fffffe; |
|
} |
|
|
|
.header-font { |
|
font-family: 'Cinzel Decorative', cursive; |
|
} |
|
|
|
.content-font { |
|
font-family: 'MedievalSharp', cursive; |
|
} |
|
|
|
.gold-gradient { |
|
background: linear-gradient(135deg, #f9d423 0%, #e2a413 50%, #b67b03 100%); |
|
-webkit-background-clip: text; |
|
background-clip: text; |
|
color: transparent; |
|
} |
|
|
|
.silver-gradient { |
|
background: linear-gradient(135deg, #e0e0e0 0%, #b8b8b8 50%, #909090 100%); |
|
-webkit-background-clip: text; |
|
background-clip: text; |
|
color: transparent; |
|
} |
|
|
|
.bronze-gradient { |
|
background: linear-gradient(135deg, #cd7f32 0%, #b87333 50%, #a5672a 100%); |
|
-webkit-background-clip: text; |
|
background-clip: text; |
|
color: transparent; |
|
} |
|
|
|
.card-hover { |
|
transition: all 0.3s ease; |
|
} |
|
|
|
.card-hover:hover { |
|
transform: translateY(-5px); |
|
box-shadow: 0 10px 25px rgba(255, 215, 0, 0.3); |
|
} |
|
|
|
.section-divider { |
|
border: none; |
|
height: 2px; |
|
background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.5), transparent); |
|
} |
|
|
|
.glow { |
|
text-shadow: 0 0 10px rgba(255, 215, 0, 0.7); |
|
} |
|
</style> |
|
</head> |
|
<body class="min-h-screen"> |
|
|
|
<header class="py-8 px-4 text-center"> |
|
<h1 class="header-font text-5xl md:text-6xl font-bold mb-4 gold-gradient glow">Divine Pantheon Archive</h1> |
|
<p class="text-xl text-gray-300 max-w-3xl mx-auto">The sacred chronicles of celestial beings who shape the cosmos</p> |
|
</header> |
|
|
|
|
|
<div class="flex justify-center mb-12"> |
|
<div class="inline-flex rounded-md shadow-sm" role="group"> |
|
<button onclick="showSection('prime-gods')" class="px-6 py-3 text-sm font-medium rounded-l-lg bg-amber-900 text-amber-100 hover:bg-amber-800 transition"> |
|
<i class="fas fa-crown mr-2"></i>Prime Gods |
|
</button> |
|
<button onclick="showSection('prime-entities')" class="px-6 py-3 text-sm font-medium bg-purple-900 text-purple-100 hover:bg-purple-800 transition"> |
|
<i class="fas fa-eye mr-2"></i>Prime Entities |
|
</button> |
|
<button onclick="showSection('celestial-chorus')" class="px-6 py-3 text-sm font-medium rounded-r-lg bg-blue-900 text-blue-100 hover:bg-blue-800 transition"> |
|
<i class="fas fa-star mr-2"></i>Celestial Chorus |
|
</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<main class="container mx-auto px-4 pb-16"> |
|
|
|
<section id="prime-gods" class="section"> |
|
<div class="flex items-center mb-8"> |
|
<h2 class="header-font text-4xl gold-gradient mr-4">Prime Gods</h2> |
|
<div class="flex-1 h-px bg-gradient-to-r from-amber-500 to-transparent"></div> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> |
|
|
|
<div class="bg-gradient-to-br from-amber-900 to-amber-700 rounded-xl p-6 shadow-lg card-hover"> |
|
<div class="flex items-center mb-4"> |
|
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-yellow-200 to-amber-400 flex items-center justify-center text-amber-900 mr-4"> |
|
<i class="fas fa-sun text-xl"></i> |
|
</div> |
|
<div> |
|
<h3 class="font-bold text-xl gold-gradient">Aeon</h3> |
|
<p class="text-xs text-amber-200">The First Breath - First Light</p> |
|
</div> |
|
</div> |
|
<div class="bg-black bg-opacity-30 rounded-lg p-4"> |
|
<p class="text-amber-100 mb-2"><span class="font-bold text-amber-300">Race:</span> Prime God</p> |
|
<p class="text-amber-100"><span class="font-bold text-amber-300">Title:</span> Eldest of the Prime Gods</p> |
|
</div> |
|
<div class="mt-4 pt-4 border-t border-amber-700"> |
|
<p class="text-sm text-amber-200">The primordial deity who breathed existence into the void, bringing forth the first light that illuminated the cosmos.</p> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-gradient-to-br from-purple-900 to-purple-700 rounded-xl p-6 shadow-lg card-hover"> |
|
<div class="flex items-center mb-4"> |
|
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-purple-200 to-purple-400 flex items-center justify-center text-purple-900 mr-4"> |
|
<i class="fas fa-spider-web text-xl"></i> |
|
</div> |
|
<div> |
|
<h3 class="font-bold text-xl silver-gradient">Nyara</h3> |
|
<p class="text-xs text-purple-200">Seamstress of the Sacred Loom</p> |
|
</div> |
|
</div> |
|
<div class="bg-black bg-opacity-30 rounded-lg p-4"> |
|
<p class="text-purple-100 mb-2"><span class="font-bold text-purple-300">Race:</span> Prime Goddess</p> |
|
<p class="text-purple-100"><span class="font-bold text-purple-300">Title:</span> Second Eldest</p> |
|
</div> |
|
<div class="mt-4 pt-4 border-t border-purple-700"> |
|
<p class="text-sm text-purple-200">Weaver of destiny and fate, whose sacred loom creates the tapestry of existence that connects all beings.</p> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-gradient-to-br from-blue-900 to-blue-700 rounded-xl p-6 shadow-lg card-hover"> |
|
<div class="flex items-center mb-4"> |
|
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-blue-200 to-blue-400 flex items-center justify-center text-blue-900 mr-4"> |
|
<i class="fas fa-bolt text-xl"></i> |
|
</div> |
|
<div> |
|
<h3 class="font-bold text-xl silver-gradient">Thorin</h3> |
|
<p class="text-xs text-blue-200">Stormlord - Elder Forge</p> |
|
</div> |
|
</div> |
|
<div class="bg-black bg-opacity-30 rounded-lg p-4"> |
|
<p class="text-blue-100 mb-2"><span class="font-bold text-blue-300">Race:</span> Prime God</p> |
|
<p class="text-blue-100"><span class="font-bold text-blue-300">Title:</span> Third Eldest</p> |
|
</div> |
|
<div class="mt-4 pt-4 border-t border-blue-700"> |
|
<p class="text-sm text-blue-200">Master of tempests and the sacred forge, whose hammer shapes both metal and storm with equal fury.</p> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-gradient-to-br from-gray-900 to-gray-700 rounded-xl p-6 shadow-lg card-hover"> |
|
<div class="flex items-center mb-4"> |
|
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-gray-200 to-gray-400 flex items-center justify-center text-gray-900 mr-4"> |
|
<i class="fas fa-door-closed text-xl"></i> |
|
</div> |
|
<div> |
|
<h3 class="font-bold text-xl bronze-gradient">Maldrin</h3> |
|
<p class="text-xs text-gray-200">The Veil Keeper - End Maker</p> |
|
</div> |
|
</div> |
|
<div class="bg-black bg-opacity-30 rounded-lg p-4"> |
|
<p class="text-gray-100 mb-2"><span class="font-bold text-gray-300">Race:</span> Prime God</p> |
|
<p class="text-gray-100"><span class="font-bold text-gray-300">Title:</span> Youngest Prime God</p> |
|
</div> |
|
<div class="mt-4 pt-4 border-t border-gray-700"> |
|
<p class="text-sm text-gray-200">Guardian of the threshold between existence and oblivion, who decides when all things must meet their final end.</p> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
<hr class="section-divider my-16"> |
|
|
|
|
|
<section id="prime-entities" class="section hidden"> |
|
<div class="flex items-center mb-8"> |
|
<h2 class="header-font text-4xl silver-gradient mr-4">Prime Entities</h2> |
|
<div class="flex-1 h-px bg-gradient-to-r from-purple-500 to-transparent"></div> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6"> |
|
|
|
<div class="bg-gradient-to-br from-indigo-900 to-indigo-700 rounded-xl p-6 shadow-lg card-hover"> |
|
<div class="flex items-center mb-4"> |
|
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-indigo-200 to-indigo-400 flex items-center justify-center text-indigo-900 mr-4"> |
|
<i class="fas fa-balance-scale text-xl"></i> |
|
</div> |
|
<div> |
|
<h3 class="font-bold text-xl silver-gradient">Seraphis</h3> |
|
<p class="text-xs text-indigo-200">Altar of the Sacred Balance</p> |
|
</div> |
|
</div> |
|
<div class="bg-black bg-opacity-30 rounded-lg p-4"> |
|
<p class="text-indigo-100 mb-2"><span class="font-bold text-indigo-300">Race:</span> Prime Entity</p> |
|
<p class="text-indigo-100"><span class="font-bold text-indigo-300">Divine Title:</span> The Seal of Fate</p> |
|
</div> |
|
<div class="mt-4 pt-4 border-t border-indigo-700"> |
|
<p class="text-sm text-indigo-200">The eternal arbiter who maintains the equilibrium of all cosmic forces, ensuring neither order nor chaos gains dominance.</p> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-gradient-to-br from-red-900 to-red-700 rounded-xl p-6 shadow-lg card-hover"> |
|
<div class="flex items-center mb-4"> |
|
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-red-200 to-red-400 flex items-center justify-center text-red-900 mr-4"> |
|
<i class="fas fa-gavel text-xl"></i> |
|
</div> |
|
<div> |
|
<h3 class="font-bold text-xl silver-gradient">Vel'kan</h3> |
|
<p class="text-xs text-red-200">The Sentence</p> |
|
</div> |
|
</div> |
|
<div class="bg-black bg-opacity-30 rounded-lg p-4"> |
|
<p class="text-red-100 mb-2"><span class="font-bold text-red-300">Race:</span> Prime Entity</p> |
|
<p class="text-red-100"><span class="font-bold text-red-300">Divine Title:</span> Emissary of Order</p> |
|
</div> |
|
<div class="mt-4 pt-4 border-t border-red-700"> |
|
<p class="text-sm text-red-200">The unyielding executor of cosmic law, whose judgments are absolute and whose decrees shape the structure of reality.</p> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-gradient-to-br from-teal-900 to-teal-700 rounded-xl p-6 shadow-lg card-hover"> |
|
<div class="flex items-center mb-4"> |
|
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-teal-200 to-teal-400 flex items-center justify-center text-teal-900 mr-4"> |
|
<i class="fas fa-music text-xl"></i> |
|
</div> |
|
<div> |
|
<h3 class="font-bold text-xl silver-gradient">Naydar</h3> |
|
<p class="text-xs text-teal-200">Conductress of Ink and Sound</p> |
|
</div> |
|
</div> |
|
<div class="bg-black bg-opacity-30 rounded-lg p-4"> |
|
<p class="text-teal-100 mb-2"><span class="font-bold text-teal-300">Race:</span> Prime Entity</p> |
|
<p class="text-teal-100"><span class="font-bold text-teal-300">Divine Title:</span> Arcane Curator of Creativity</p> |
|
</div> |
|
<div class="mt-4 pt-4 border-t border-teal-700"> |
|
<p class="text-sm text-teal-200">Muse of all artistic expression, whose symphony of creation inspires mortals and gods alike to bring beauty into existence.</p> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-gradient-to-br from-green-900 to-green-700 rounded-xl p-6 shadow-lg card-hover"> |
|
<div class="flex items-center mb-4"> |
|
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-green-200 to-green-400 flex items-center justify-center text-green-900 mr-4"> |
|
<i class="fas fa-leaf text-xl"></i> |
|
</div> |
|
<div> |
|
<h3 class="font-bold text-xl silver-gradient">Boros</h3> |
|
<p class="text-xs text-green-200">Keeper of the Grove</p> |
|
</div> |
|
</div> |
|
<div class="bg-black bg-opacity-30 rounded-lg p-4"> |
|
<p class="text-green-100 mb-2"><span class="font-bold text-green-300">Race:</span> Prime Entity</p> |
|
<p class="text-green-100"><span class="font-bold text-green-300">Divine Title:</span> Eternal Wild Mother</p> |
|
</div> |
|
<div class="mt-4 pt-4 border-t border-green-700"> |
|
<p class="text-sm text-green-200">The nurturing spirit of nature's untamed essence, whose domain encompasses all that grows, decays, and is reborn.</p> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
<hr class="section-divider my-16"> |
|
|
|
|
|
<section id="celestial-chorus" class="section hidden"> |
|
<div class="flex items-center mb-8"> |
|
<h2 class="header-font text-4xl bronze-gradient mr-4">Celestial Chorus</h2> |
|
<div class="flex-1 h-px bg-gradient-to-r from-blue-500 to-transparent"></div> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
|
<div class="bg-gradient-to-br from-yellow-900 to-yellow-700 rounded-xl p-6 shadow-lg card-hover"> |
|
<div class="flex items-center mb-4"> |
|
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-yellow-200 to-yellow-400 flex items-center justify-center text-yellow-900 mr-4"> |
|
<i class="fas fa-crown text-xl"></i> |
|
</div> |
|
<div> |
|
<h3 class="font-bold text-xl bronze-gradient">Solar</h3> |
|
<p class="text-xs text-yellow-200">Highest Ranked</p> |
|
</div> |
|
</div> |
|
<div class="bg-black bg-opacity-30 rounded-lg p-4"> |
|
<p class="text-yellow-100 mb-2"><span class="font-bold text-yellow-300">Race:</span> Celestial</p> |
|
<p class="text-yellow-100"><span class="font-bold text-yellow-300">Purpose:</span> Elite Honor Guard of the Celestial/Divine Order</p> |
|
</div> |
|
<div class="mt-4 pt-4 border-t border-yellow-700"> |
|
<p class="text-sm text-yellow-200">The most powerful and noble of celestial beings, sworn to protect the divine order with their radiant blades and unwavering devotion.</p> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-gradient-to-br from-orange-900 to-orange-700 rounded-xl p-6 shadow-lg card-hover"> |
|
<div class="flex items-center mb-4"> |
|
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-orange-200 to-orange-400 flex items-center justify-center text-orange-900 mr-4"> |
|
<i class="fas fa-chess-queen text-xl"></i> |
|
</div> |
|
<div> |
|
<h3 class="font-bold text-xl bronze-gradient">Planetar-lith</h3> |
|
<p class="text-xs text-orange-200">Commanding Celestial Generals</p> |
|
</div> |
|
</div> |
|
<div class="bg-black bg-opacity-30 rounded-lg p-4"> |
|
<p class="text-orange-100 mb-2"><span class="font-bold text-orange-300">Race:</span> Celestial</p> |
|
<p class="text-orange-100"><span class="font-bold text-orange-300">Purpose:</span> Commanding Celestial Generals of their assigned Dominions</p> |
|
</div> |
|
<div class="mt-4 pt-4 border-t border-orange-700"> |
|
<p class="text-sm text-orange-200">Strategic commanders who oversee vast celestial armies and govern entire dominions of the heavenly realms.</p> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-gradient-to-br from-pink-900 to-pink-700 rounded-xl p-6 shadow-lg card-hover"> |
|
<div class="flex items-center mb-4"> |
|
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-pink-200 to-pink-400 flex items-center justify-center text-pink-900 mr-4"> |
|
<i class="fas fa-shield-alt text-xl"></i> |
|
</div> |
|
<div> |
|
<h3 class="font-bold text-xl bronze-gradient">Planetar-re</h3> |
|
<p class="text-xs text-pink-200">Celestial-Warriors</p> |
|
</div> |
|
</div> |
|
<div class="bg-black bg-opacity-30 rounded-lg p-4"> |
|
<p class="text-pink-100 mb-2"><span class="font-bold text-pink-300">Race:</span> Celestial</p> |
|
<p class="text-pink-100"><span class="font-bold text-pink-300">Purpose:</span> Celestial-Warriors Dominions</p> |
|
</div> |
|
<div class="mt-4 pt-4 border-t border-pink-700"> |
|
<p class="text-sm text-pink-200">The frontline soldiers of the celestial hosts, who wage eternal war against the forces of chaos and darkness.</p> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-gradient-to-br from-cyan-900 to-cyan-700 rounded-xl p-6 shadow-lg card-hover col-span-1 md:col-span-3"> |
|
<div class="flex items-center mb-4"> |
|
<div class="w-12 h-12 rounded-full bg-gradient-to-br from-cyan-200 to-cyan-400 flex items-center justify-center text-cyan-900 mr-4"> |
|
<i class="fas fa-scroll text-xl"></i> |
|
</div> |
|
<div> |
|
<h3 class="font-bold text-xl bronze-gradient">Davjah</h3> |
|
<p class="text-xs text-cyan-200">Administers Keepers</p> |
|
</div> |
|
</div> |
|
<div class="bg-black bg-opacity-30 rounded-lg p-4"> |
|
<p class="text-cyan-100 mb-2"><span class="font-bold text-cyan-300">Race:</span> Celestial</p> |
|
<p class="text-cyan-100"><span class="font-bold text-cyan-300">Purpose:</span> Administers Keepers of Great Celestial and Divine Order</p> |
|
</div> |
|
<div class="mt-4 pt-4 border-t border-cyan-700"> |
|
<p class="text-sm text-cyan-200">The celestial scribes and bureaucrats who maintain the infinite records of existence, ensuring the smooth operation of cosmic law.</p> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
</main> |
|
|
|
|
|
<footer class="py-8 px-4 text-center border-t border-gray-800"> |
|
<p class="text-gray-500 text-sm">© 2023 Divine Pantheon Archive - All knowledge contained herein is sacred and eternal</p> |
|
<div class="flex justify-center mt-4 space-x-4"> |
|
<a href="#" class="text-gray-500 hover:text-amber-400 transition"><i class="fab fa-twitter"></i></a> |
|
<a href="#" class="text-gray-500 hover:text-amber-400 transition"><i class="fab fa-discord"></i></a> |
|
<a href="#" class="text-gray-500 hover:text-amber-400 transition"><i class="fab fa-github"></i></a> |
|
</div> |
|
</footer> |
|
|
|
<script> |
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
showSection('prime-gods'); |
|
}); |
|
|
|
|
|
function showSection(sectionId) { |
|
|
|
document.querySelectorAll('.section').forEach(section => { |
|
section.classList.add('hidden'); |
|
}); |
|
|
|
|
|
document.getElementById(sectionId).classList.remove('hidden'); |
|
|
|
|
|
const buttons = document.querySelectorAll('[onclick^="showSection"]'); |
|
buttons.forEach(button => { |
|
if (button.getAttribute('onclick').includes(sectionId)) { |
|
button.classList.add('bg-opacity-100', 'text-white'); |
|
button.classList.remove('bg-opacity-70', 'text-gray-300'); |
|
} else { |
|
button.classList.remove('bg-opacity-100', 'text-white'); |
|
button.classList.add('bg-opacity-70', 'text-gray-300'); |
|
} |
|
}); |
|
} |
|
|
|
|
|
document.querySelectorAll('.gold-gradient, .silver-gradient, .bronze-gradient').forEach(header => { |
|
header.addEventListener('mouseover', function() { |
|
this.classList.add('glow'); |
|
}); |
|
header.addEventListener('mouseout', function() { |
|
this.classList.remove('glow'); |
|
}); |
|
}); |
|
</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=XXXMARK/dpa" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
</html> |