|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Captain Dreamer - The Future Pirate</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> |
|
|
.nav-link { |
|
|
position: relative; |
|
|
} |
|
|
.nav-link::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
bottom: -2px; |
|
|
left: 0; |
|
|
background-color: #f59e0b; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
.nav-link:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
.quote-card { |
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease; |
|
|
} |
|
|
.quote-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
.parallax { |
|
|
background-attachment: fixed; |
|
|
background-position: center; |
|
|
background-repeat: no-repeat; |
|
|
background-size: cover; |
|
|
} |
|
|
.crew-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(245, 158, 11, 0.3); |
|
|
} |
|
|
.enemy-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(220, 38, 38, 0.3); |
|
|
} |
|
|
.banner { |
|
|
background: linear-gradient(135deg, rgba(20, 30, 40, 0.9) 0%, rgba(50, 60, 70, 0.8) 100%); |
|
|
border-bottom: 3px solid #f59e0b; |
|
|
} |
|
|
.captain-info-box { |
|
|
background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.9) 100%); |
|
|
border: 3px solid #f59e0b; |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); |
|
|
} |
|
|
@media (max-width: 768px) { |
|
|
.parallax { |
|
|
background-attachment: scroll; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-gray-100 font-sans"> |
|
|
|
|
|
<div class="banner w-full py-4 text-center"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-2xl md:text-3xl font-bold text-amber-400">THE DREAMERS</h2> |
|
|
<p class="text-gray-300 mt-2">Future pirates of the seven seas</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
<div class="captain-info-box rounded-xl p-6 max-w-4xl mx-auto"> |
|
|
<div class="flex flex-col md:flex-row items-center gap-6"> |
|
|
<div class="w-32 h-32 md:w-40 md:h-40 flex-shrink-0"> |
|
|
<img src="https://img.apmcdn.org/fbe516db8819b3dbb95eb587c9c29886ba7190a6/square/33b109-20221024-full-moon-on-a-cloudy-night-1000.jpg" |
|
|
alt="Captain Profile" |
|
|
class="w-full h-full object-cover rounded-full border-4 border-amber-500"> |
|
|
</div> |
|
|
<div class="text-center md:text-left"> |
|
|
<h1 class="text-3xl md:text-4xl font-bold text-amber-400 mb-2">CAPTAIN DREAMER</h1> |
|
|
<p class="text-lg text-gray-300 mb-4"> |
|
|
The enigmatic pirate captain who sails under the moon's glow. A master of deception with a heart of gold, |
|
|
he appears foolish to his enemies but hides a brilliant strategic mind. Loyal to his crew above all else, |
|
|
he follows only his own moral code and the call of the open sea. |
|
|
</p> |
|
|
<div class="bg-gray-800 p-4 rounded-lg mb-4"> |
|
|
<h3 class="text-xl font-bold text-amber-400 mb-3">Personality</h3> |
|
|
<p class="text-gray-300 mb-3"> |
|
|
Captain Dreamer presents himself as a carefree, bumbling pirate who seems more likely to trip over his own feet than command a ship. His exaggerated clumsiness and silly antics make enemies underestimate him, but this is all part of his clever ruse. Beneath this facade lies a sharp mind that never stops analyzing - he sees patterns others miss, anticipates moves before they're made, and always has multiple backup plans. |
|
|
</p> |
|
|
<p class="text-gray-300 mb-3"> |
|
|
Though he appears weak, he possesses surprising strength and skill in battle when he chooses to reveal it. His deepest loyalty is to his crew, whom he loves fiercely. He would sacrifice anything for them, though he'd never admit it in so many words. His leadership style is unorthodox but effective - he leads with humor and heart rather than fear. |
|
|
</p> |
|
|
<p class="text-gray-300"> |
|
|
The only authorities he recognizes are God and his mother (who still scolds him for his life choices). He bows to no king, no navy, no pirate code except his own moral compass. This stubborn independence has gotten him into trouble more times than he can count, but he wouldn't have it any other way. He follows his own code: Respect the sea that gives life, show honor among thieves, protect the weak from predation, and value freedom above all else. |
|
|
</p> |
|
|
</div> |
|
|
<div class="flex justify-center md:justify-start gap-4"> |
|
|
<span class="bg-amber-900 text-amber-200 px-3 py-1 rounded-full text-sm"> |
|
|
<i class="fas fa-anchor mr-1"></i> Pirate Captain |
|
|
</span> |
|
|
<span class="bg-gray-700 text-gray-200 px-3 py-1 rounded-full text-sm"> |
|
|
<i class="fas fa-ship mr-1"></i> The Dreamer's Fortune |
|
|
</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<nav class="sticky top-0 bg-gray-800 shadow-lg z-40"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex justify-between items-center py-3"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<a href="#" class="text-amber-400 font-bold text-xl flex items-center"> |
|
|
<i class="fas fa-skull-crossbones mr-2"></i> Dreamer |
|
|
</a> |
|
|
</div> |
|
|
<div class="hidden md:flex space-x-6"> |
|
|
<a href="#crew" class="nav-link text-white hover:text-amber-400">Crew</a> |
|
|
<a href="#enemies" class="nav-link text-white hover:text-amber-400">Enemies</a> |
|
|
<a href="#quotes" class="nav-link text-white hover:text-amber-400">Quotes</a> |
|
|
</div> |
|
|
<button class="md:hidden text-white focus:outline-none" id="mobileMenuButton"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="md:hidden hidden py-2" id="mobileMenu"> |
|
|
<a href="#crew" class="block py-2 text-white hover:text-amber-400">Crew</a> |
|
|
<a href="#enemies" class="block py-2 text-white hover:text-amber-400">Enemies</a> |
|
|
<a href="#quotes" class="block py-2 text-white hover:text-amber-400">Quotes</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<main> |
|
|
|
|
|
<section id="crew" class="py-16 bg-gray-800 parallax"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-white mb-4">The Dreamers</h2> |
|
|
<div class="w-24 h-1 bg-amber-500 mx-auto"></div> |
|
|
<p class="text-gray-300 mt-4 max-w-2xl mx-auto"> |
|
|
The future crew that will sail the seven seas. |
|
|
</p> |
|
|
</div> |
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="crew-card bg-gray-900 bg-opacity-80 p-6 rounded-lg shadow-lg transition duration-300"> |
|
|
<div class="text-center mb-4"> |
|
|
<img src="https://media.discordapp.net/attachments/1286321273718313022/1376324312293965834/OIP_2.jpg?ex=6834e966&is=683397e6&hm=326e900591d327df63707b417c63c8cbfc7699bea244aa492dda8875b613e7b4&=&format=webp" |
|
|
alt="Finbar" class="w-32 h-32 mx-auto rounded-full border-4 border-amber-500 object-cover"> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-amber-400 mb-2 text-center">FINBAR</h3> |
|
|
<p class="text-gray-400 text-sm text-center mb-4">First Mate & Right Hand Man</p> |
|
|
<p class="text-gray-300 text-center"> |
|
|
Nice humble person, Captain's first mate and best friend. He is the best mate one could wish for - very very nice person who likes helping poor people. Free spirited, care free and naughty sometimes, but always loyal to the crew. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="crew-card bg-gray-900 bg-opacity-80 p-6 rounded-lg shadow-lg transition duration-300 text-center"> |
|
|
<div class="text-amber-400 text-5xl mb-4"> |
|
|
<i class="fas fa-compass"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-amber-400 mb-2">Navigator</h3> |
|
|
<p class="text-gray-300"> |
|
|
Guide the ship through treacherous waters to untold riches. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="crew-card bg-gray-900 bg-opacity-80 p-6 rounded-lg shadow-lg transition duration-300 text-center"> |
|
|
<div class="text-amber-400 text-5xl mb-4"> |
|
|
<i class="fas fa-swords"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-amber-400 mb-2">Quartermaster</h3> |
|
|
<p class="text-gray-300"> |
|
|
Keep order among the crew and distribute the spoils fairly. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="enemies" class="py-16 bg-gray-900"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-red-500 mb-4">Sworn Enemies</h2> |
|
|
<div class="w-24 h-1 bg-red-500 mx-auto"></div> |
|
|
<p class="text-gray-300 mt-4 max-w-2xl mx-auto"> |
|
|
Those who dare stand against Captain Dreamer and his crew. |
|
|
</p> |
|
|
</div> |
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="enemy-card bg-gray-800 p-6 rounded-lg shadow-lg transition duration-300"> |
|
|
<div class="text-center mb-4"> |
|
|
<img src="https://media.discordapp.net/attachments/1376326854625202326/1376327331282550925/d75043f74b72d40d27d1fb3b9600ed392.jpg?ex=6834ec36&is=68339ab6&hm=3dca474af59914ed442f6b82f38267e93883646200c57495e298422a3da6568e&=&format=webp" |
|
|
alt="TaRaNtUla WeeZurd" class="w-32 h-32 mx-auto rounded-full border-4 border-red-500 object-cover"> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-red-400 mb-2 text-center">TaRaNtUla WeeZurd</h3> |
|
|
<p class="text-gray-400 text-sm text-center mb-4">The Venomous Trickster</p> |
|
|
<p class="text-gray-300 text-center"> |
|
|
A cunning and unpredictable foe who strikes from the shadows. Known for his deceptive tactics and poisonous words that can turn allies against each other. His web of lies ensnares the weak-willed, making him a dangerous adversary despite his unassuming appearance. |
|
|
</p> |
|
|
<div class="mt-4 text-center"> |
|
|
<span class="inline-block bg-red-900 text-red-300 text-xs px-3 py-1 rounded-full">Danger Level: High</span> |
|
|
<span class="inline-block bg-gray-700 text-gray-300 text-xs px-3 py-1 rounded-full ml-2">Specialty: Psychological Warfare</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="enemy-card bg-gray-800 p-6 rounded-lg shadow-lg transition duration-300 text-center"> |
|
|
<div class="text-red-500 text-5xl mb-4"> |
|
|
<i class="fas fa-question"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-red-400 mb-2">Unknown Enemy</h3> |
|
|
<p class="text-gray-300"> |
|
|
More foes will reveal themselves as Captain Dreamer's legend grows. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="enemy-card bg-gray-800 p-6 rounded-lg shadow-lg transition duration-300 text-center"> |
|
|
<div class="text-red-500 text-5xl mb-4"> |
|
|
<i class="fas fa-skull"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold text-red-400 mb-2">Future Rival</h3> |
|
|
<p class="text-gray-300"> |
|
|
The seas are vast and filled with those who would oppose freedom. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="quotes" class="py-16 bg-gray-800"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold text-amber-400 mb-4">Legendary Quotes</h2> |
|
|
<div class="w-24 h-1 bg-amber-500 mx-auto"></div> |
|
|
</div> |
|
|
<div class="text-center"> |
|
|
<p class="text-gray-300 mb-8">Future legendary quotes will appear here as Captain Dreamer's legend grows.</p> |
|
|
<button onclick="addNewQuote()" class="bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-6 rounded-full transition transform hover:scale-105"> |
|
|
<i class="fas fa-plus mr-2"></i> Add First Quote |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
|
|
|
<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"> |
|
|
<a href="#" class="text-amber-400 font-bold text-xl flex items-center"> |
|
|
<i class="fas fa-skull-crossbones mr-2"></i> Captain Dreamer |
|
|
</a> |
|
|
<p class="text-gray-400 mt-2">The Legend Begins</p> |
|
|
</div> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-amber-400 transition"> |
|
|
<i class="fab fa-twitter text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-amber-400 transition"> |
|
|
<i class="fab fa-instagram text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-amber-400 transition"> |
|
|
<i class="fab fa-youtube text-xl"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-400 hover:text-amber-400 transition"> |
|
|
<i class="fab fa-discord text-xl"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-8 pt-6 border-t border-gray-800 text-center text-gray-500 text-sm"> |
|
|
<p>© 2023 Captain Dreamer. All rights reserved. | Designed with <i class="fas fa-heart text-red-500"></i> by the future crew</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('mobileMenuButton').addEventListener('click', function() { |
|
|
const menu = document.getElementById('mobileMenu'); |
|
|
menu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
function addNewQuote() { |
|
|
const quote = prompt("Enter Captain Dreamer's first legendary quote:"); |
|
|
if (quote) { |
|
|
const author = prompt("Enter the context (when/where it was said):"); |
|
|
|
|
|
const quotesContainer = document.querySelector('#quotes .container'); |
|
|
const newQuoteSection = document.createElement('div'); |
|
|
newQuoteSection.className = 'grid md:grid-cols-2 lg:grid-cols-3 gap-6 mt-8'; |
|
|
newQuoteSection.innerHTML = ` |
|
|
<div class="quote-card bg-gray-800 p-6 rounded-lg shadow-lg"> |
|
|
<div class="text-amber-400 text-3xl mb-4"> |
|
|
<i class="fas fa-quote-left"></i> |
|
|
</div> |
|
|
<p class="text-white italic mb-4">"${quote}"</p> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 bg-amber-500 rounded-full flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-skull"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-amber-400 font-semibold">Captain Dreamer</p> |
|
|
<p class="text-gray-400 text-sm">${author || 'First recorded quote'}</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
|
|
|
quotesContainer.querySelector('p').remove(); |
|
|
quotesContainer.querySelector('button').remove(); |
|
|
|
|
|
|
|
|
quotesContainer.appendChild(newQuoteSection); |
|
|
|
|
|
|
|
|
const addMoreButton = document.createElement('button'); |
|
|
addMoreButton.className = 'mt-8 bg-amber-500 hover:bg-amber-600 text-white font-bold py-3 px-6 rounded-full transition transform hover:scale-105'; |
|
|
addMoreButton.innerHTML = '<i class="fas fa-plus mr-2"></i> Add Another Quote'; |
|
|
addMoreButton.onclick = addNewQuote; |
|
|
quotesContainer.appendChild(addMoreButton); |
|
|
|
|
|
|
|
|
newQuoteSection.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); |
|
|
|
|
|
|
|
|
const quoteCard = newQuoteSection.querySelector('.quote-card'); |
|
|
quoteCard.addEventListener('mouseenter', function() { |
|
|
this.style.transform = 'translateY(-5px)'; |
|
|
this.style.boxShadow = '0 10px 25px rgba(0, 0, 0, 0.2)'; |
|
|
}); |
|
|
quoteCard.addEventListener('mouseleave', function() { |
|
|
this.style.transform = ''; |
|
|
this.style.boxShadow = ''; |
|
|
}); |
|
|
} |
|
|
} |
|
|
</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=Captaindreamer/pirate-dreamers-cove" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
