dpa / index.html
XXXMARK's picture
Add 3 files
ecb8286 verified
<!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 -->
<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>
<!-- Navigation Tabs -->
<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 Content -->
<main class="container mx-auto px-4 pb-16">
<!-- Prime Gods Section -->
<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">
<!-- Aeon -->
<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>
<!-- Nyara -->
<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>
<!-- Thorin -->
<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>
<!-- Maldrin -->
<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">
<!-- Prime Entities Section -->
<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">
<!-- Seraphis -->
<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>
<!-- Vel'kan -->
<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>
<!-- Naydar -->
<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>
<!-- Boros -->
<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">
<!-- Celestial Chorus Section -->
<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">
<!-- Solar -->
<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>
<!-- Planetar-lith -->
<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>
<!-- Planetar-re -->
<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>
<!-- Davjah -->
<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 -->
<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>
// Show the default section (Prime Gods)
document.addEventListener('DOMContentLoaded', function() {
showSection('prime-gods');
});
// Tab switching function
function showSection(sectionId) {
// Hide all sections
document.querySelectorAll('.section').forEach(section => {
section.classList.add('hidden');
});
// Show the selected section
document.getElementById(sectionId).classList.remove('hidden');
// Update active tab styling
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');
}
});
}
// Add glow effect to headers on hover
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>