|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Eternal Chronicles | Fantasy RPG</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
|
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=MedievalSharp&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Cinzel', serif; |
|
|
background-color: #0a0a0a; |
|
|
color: #e0d8b0; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.bg-parchment { |
|
|
background-image: url('http://static.photos/vintage/1200x630/42'); |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
background-blend-mode: overlay; |
|
|
background-color: rgba(20, 15, 5, 0.85); |
|
|
} |
|
|
|
|
|
.music-control { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.music-control:hover { |
|
|
transform: scale(1.1); |
|
|
filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.7)); |
|
|
} |
|
|
|
|
|
.btn-gold { |
|
|
background: linear-gradient(to bottom, #d4af37, #a67c00); |
|
|
border: 1px solid #ffd700; |
|
|
color: #1a1200; |
|
|
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); |
|
|
} |
|
|
|
|
|
.btn-gold:hover { |
|
|
background: linear-gradient(to bottom, #ffd700, #c9a227); |
|
|
transform: translateY(-2px); |
|
|
} |
|
|
|
|
|
.character-card { |
|
|
transition: all 0.3s ease; |
|
|
border: 2px solid transparent; |
|
|
} |
|
|
|
|
|
.character-card:hover { |
|
|
transform: translateY(-10px); |
|
|
border-color: #d4af37; |
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); |
|
|
} |
|
|
|
|
|
.scroll-down { |
|
|
animation: bounce 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes bounce { |
|
|
0%, 20%, 50%, 80%, 100% {transform: translateY(0);} |
|
|
40% {transform: translateY(-20px);} |
|
|
60% {transform: translateY(-10px);} |
|
|
} |
|
|
|
|
|
.pixel-border { |
|
|
position: relative; |
|
|
border: 16px solid transparent; |
|
|
border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect x="0" y="0" width="16" height="16" fill="%23d4af37" /></svg>') 16 stretch; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen"> |
|
|
|
|
|
<div class="fixed bottom-4 right-4 z-50"> |
|
|
<div class="bg-black bg-opacity-70 rounded-full p-3 flex items-center space-x-2"> |
|
|
<audio id="bgMusic" loop> |
|
|
<source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg"> |
|
|
</audio> |
|
|
<button id="musicToggle" class="music-control text-gold-400 hover:text-yellow-300"> |
|
|
<i data-feather="play" class="text-yellow-400"></i> |
|
|
</button> |
|
|
<span class="text-xs text-yellow-200 hidden md:inline">Eternal Theme</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section class="relative h-screen flex items-center justify-center overflow-hidden"> |
|
|
<div class="absolute inset-0 bg-black opacity-60 z-0"></div> |
|
|
<div class="absolute inset-0 z-0"> |
|
|
<img src="http://static.photos/fantasy/1200x630/7" alt="Fantasy Landscape" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
|
|
|
<div class="relative z-10 text-center px-4" data-aos="fade-up"> |
|
|
<h1 class="text-5xl md:text-7xl font-bold mb-6 text-yellow-300 font-cinzel tracking-wider"> |
|
|
<span class="text-transparent bg-clip-text bg-gradient-to-r from-yellow-300 to-yellow-600">ETERNAL CHRONICLES</span> |
|
|
</h1> |
|
|
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto text-yellow-100"> |
|
|
Embark on an epic journey through a world of magic, mystery, and adventure |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row justify-center gap-4"> |
|
|
<button class="btn-gold px-8 py-3 rounded-md font-bold text-lg shadow-lg"> |
|
|
Begin Your Quest |
|
|
</button> |
|
|
<button class="border-2 border-yellow-500 px-8 py-3 rounded-md font-bold text-lg text-yellow-300 hover:bg-yellow-900 hover:bg-opacity-30 transition"> |
|
|
Learn More |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="absolute bottom-10 left-0 right-0 text-center scroll-down"> |
|
|
<a href="#about" class="text-yellow-300 animate-bounce inline-block"> |
|
|
<i data-feather="chevron-down" class="w-10 h-10"></i> |
|
|
</a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-20 bg-parchment"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16" data-aos="fade-up"> |
|
|
<h2 class="text-4xl font-bold mb-4 text-yellow-600">The World Awaits</h2> |
|
|
<div class="w-24 h-1 bg-yellow-600 mx-auto mb-6"></div> |
|
|
<p class="text-lg max-w-3xl mx-auto text-yellow-900"> |
|
|
In a realm where ancient magic clashes with rising empires, your choices will shape the fate of kingdoms. |
|
|
Forge alliances, uncover lost secrets, and battle legendary foes in this immersive RPG experience. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
<div class="bg-black bg-opacity-70 p-8 rounded-lg text-center" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="text-yellow-400 mb-4"> |
|
|
<i data-feather="compass" class="w-12 h-12 mx-auto"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-3 text-yellow-300">Open World</h3> |
|
|
<p class="text-yellow-100"> |
|
|
Explore vast landscapes from enchanted forests to ruined citadels, each with their own stories and challenges. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-black bg-opacity-70 p-8 rounded-lg text-center" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="text-yellow-400 mb-4"> |
|
|
<i data-feather="users" class="w-12 h-12 mx-auto"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-3 text-yellow-300">Dynamic Characters</h3> |
|
|
<p class="text-yellow-100"> |
|
|
Recruit unique companions with their own personalities, backstories, and evolving relationships. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-black bg-opacity-70 p-8 rounded-lg text-center" data-aos="fade-up" data-aos-delay="300"> |
|
|
<div class="text-yellow-400 mb-4"> |
|
|
<i data-feather="award" class="w-12 h-12 mx-auto"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-3 text-yellow-300">Epic Quests</h3> |
|
|
<p class="text-yellow-100"> |
|
|
Experience a rich narrative with meaningful choices that impact the world and its inhabitants. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gray-900"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-16" data-aos="fade-up"> |
|
|
<h2 class="text-4xl font-bold mb-4 text-yellow-400">Meet Your Companions</h2> |
|
|
<div class="w-24 h-1 bg-yellow-600 mx-auto mb-6"></div> |
|
|
<p class="text-lg max-w-3xl mx-auto text-gray-300"> |
|
|
Choose from eight unique characters, each with their own class, abilities, and personal story to uncover. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6"> |
|
|
|
|
|
<div class="character-card bg-gray-800 rounded-lg overflow-hidden" data-aos="zoom-in"> |
|
|
<div class="relative h-64 overflow-hidden"> |
|
|
<img src="http://static.photos/fantasy/640x360/1" alt="Warrior" class="w-full h-full object-cover"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div> |
|
|
<div class="absolute bottom-0 left-0 p-4"> |
|
|
<h3 class="text-xl font-bold text-yellow-300">Aldric</h3> |
|
|
<p class="text-sm text-gray-300">The Wandering Knight</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<p class="text-gray-300 text-sm"> |
|
|
A disgraced noble seeking redemption through valor and honor in battle. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="character-card bg-gray-800 rounded-lg overflow-hidden" data-aos="zoom-in" data-aos-delay="100"> |
|
|
<div class="relative h-64 overflow-hidden"> |
|
|
<img src="http://static.photos/fantasy/640x360/2" alt="Mage" class="w-full h-full object-cover"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div> |
|
|
<div class="absolute bottom-0 left-0 p-4"> |
|
|
<h3 class="text-xl font-bold text-yellow-300">Seraphina</h3> |
|
|
<p class="text-sm text-gray-300">The Arcane Scholar</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<p class="text-gray-300 text-sm"> |
|
|
A prodigy mage researching forbidden magic to save her dying homeland. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="character-card bg-gray-800 rounded-lg overflow-hidden" data-aos="zoom-in" data-aos-delay="200"> |
|
|
<div class="relative h-64 overflow-hidden"> |
|
|
<img src="http://static.photos/fantasy/640x360/3" alt="Rogue" class="w-full h-full object-cover"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div> |
|
|
<div class="absolute bottom-0 left-0 p-4"> |
|
|
<h3 class="text-xl font-bold text-yellow-300">Kael</h3> |
|
|
<p class="text-sm text-gray-300">The Shadow Blade</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<p class="text-gray-300 text-sm"> |
|
|
A master thief with a heart of gold, stealing from the rich to aid the oppressed. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="character-card bg-gray-800 rounded-lg overflow-hidden" data-aos="zoom-in" data-aos-delay="300"> |
|
|
<div class="relative h-64 overflow-hidden"> |
|
|
<img src="http://static.photos/fantasy/640x360/4" alt="Cleric" class="w-full h-full object-cover"> |
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black to-transparent"></div> |
|
|
<div class="absolute bottom-0 left-0 p-4"> |
|
|
<h3 class="text-xl font-bold text-yellow-300">Elara</h3> |
|
|
<p class="text-sm text-gray-300">The Divine Healer</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<p class="text-gray-300 text-sm"> |
|
|
A priestess on a pilgrimage to spread hope and healing in war-torn lands. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<button class="border-2 border-yellow-500 px-8 py-3 rounded-md font-bold text-lg text-yellow-300 hover:bg-yellow-900 hover:bg-opacity-30 transition"> |
|
|
View All Characters |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-32 bg-gradient-to-b from-gray-900 to-black relative overflow-hidden"> |
|
|
<div class="absolute inset-0 opacity-20"> |
|
|
<img src="http://static.photos/fantasy/1200x630/8" alt="Fantasy Battle" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
|
|
|
<div class="relative container mx-auto px-4 text-center" data-aos="zoom-in"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-6 text-yellow-300">Ready for Your Adventure?</h2> |
|
|
<p class="text-xl mb-8 max-w-3xl mx-auto text-gray-300"> |
|
|
Join thousands of players in the award-winning fantasy RPG experience. Available now on all platforms. |
|
|
</p> |
|
|
<div class="flex flex-wrap justify-center gap-4"> |
|
|
<button class="btn-gold px-8 py-4 rounded-md font-bold text-lg shadow-lg flex items-center"> |
|
|
<i data-feather="download" class="mr-2"></i> Download Now |
|
|
</button> |
|
|
<button class="border-2 border-yellow-500 px-8 py-4 rounded-md font-bold text-lg text-yellow-300 hover:bg-yellow-900 hover:bg-opacity-30 transition flex items-center"> |
|
|
<i data-feather="play" class="mr-2"></i> Watch Trailer |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-black py-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="mb-6 md:mb-0"> |
|
|
<h3 class="text-2xl font-bold text-yellow-400 mb-2">ETERNAL CHRONICLES</h3> |
|
|
<p class="text-gray-400 text-sm">© 2023 Mythic Games Studio. All rights reserved.</p> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-yellow-400 transition"> |
|
|
<i data-feather="twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-yellow-400 transition"> |
|
|
<i data-feather="facebook"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-yellow-400 transition"> |
|
|
<i data-feather="instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-yellow-400 transition"> |
|
|
<i data-feather="youtube"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between"> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-6 md:mb-0"> |
|
|
<div> |
|
|
<h4 class="text-yellow-300 mb-4">Game</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-yellow-400 text-sm">Features</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-yellow-400 text-sm">Characters</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-yellow-400 text-sm">World</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-yellow-300 mb-4">Support</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-yellow-400 text-sm">FAQ</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-yellow-400 text-sm">Forums</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-yellow-400 text-sm">Contact</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-yellow-300 mb-4">Legal</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-yellow-400 text-sm">Terms</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-yellow-400 text-sm">Privacy</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-yellow-400 text-sm">Cookies</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-yellow-300 mb-4">Company</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-yellow-400 text-sm">About</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-yellow-400 text-sm">Careers</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-yellow-400 text-sm">Press</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="w-full md:w-64"> |
|
|
<h4 class="text-yellow-300 mb-4">Stay Updated</h4> |
|
|
<div class="flex"> |
|
|
<input type="email" placeholder="Your email" class="bg-gray-800 text-white px-4 py-2 rounded-l-md focus:outline-none focus:ring-2 focus:ring-yellow-500 w-full"> |
|
|
<button class="bg-yellow-600 hover:bg-yellow-700 text-black px-4 py-2 rounded-r-md"> |
|
|
<i data-feather="send"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
AOS.init({ |
|
|
duration: 800, |
|
|
easing: 'ease-in-out', |
|
|
once: true |
|
|
}); |
|
|
|
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
const musicToggle = document.getElementById('musicToggle'); |
|
|
const bgMusic = document.getElementById('bgMusic'); |
|
|
let isPlaying = false; |
|
|
|
|
|
musicToggle.addEventListener('click', function() { |
|
|
if (isPlaying) { |
|
|
bgMusic.pause(); |
|
|
musicToggle.innerHTML = '<i data-feather="play" class="text-yellow-400"></i>'; |
|
|
feather.replace(); |
|
|
} else { |
|
|
bgMusic.play(); |
|
|
musicToggle.innerHTML = '<i data-feather="pause" class="text-yellow-400"></i>'; |
|
|
feather.replace(); |
|
|
} |
|
|
isPlaying = !isPlaying; |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
