sphere-being-alliance / index.html
CommanderLazarus's picture
Scrub the internet for all information on the Sphere Being Alliance. - Initial Deployment
da7ef13 verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sphere Being Alliance - Exploration Portal</title>
<link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🛸</text></svg>">
<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://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Exo+2:wght@300;400;600&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Exo 2', sans-serif;
background-color: #0a0a1a;
color: #e2e8f0;
overflow-x: hidden;
}
.header-font {
font-family: 'Orbitron', sans-serif;
}
.galaxy-bg {
background: radial-gradient(circle at center, #1a202c 0%, #0a0a1a 70%);
}
.card-bg {
background: rgba(30, 41, 59, 0.6);
backdrop-filter: blur(10px);
border: 1px solid rgba(99, 102, 241, 0.2);
}
.neon-border {
box-shadow: 0 0 15px rgba(99, 102, 241, 0.5);
}
.pulse {
animation: pulse 3s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7); }
70% { box-shadow: 0 0 0 15px rgba(99, 102, 241, 0); }
100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}
.star {
position: absolute;
background-color: white;
border-radius: 50%;
animation: twinkle var(--duration) infinite ease-in-out;
}
@keyframes twinkle {
0%, 100% { opacity: 0.2; }
50% { opacity: 1; }
}
</style>
</head>
<body class="galaxy-bg">
<!-- Stars Background -->
<div id="stars-container" class="fixed inset-0 overflow-hidden pointer-events-none"></div>
<!-- Navigation -->
<nav class="fixed w-full z-50 bg-gray-900 bg-opacity-80 backdrop-blur-md border-b border-indigo-500 border-opacity-30">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-2">
<div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center">
<i data-feather="globe" class="text-white"></i>
</div>
<span class="header-font text-xl font-bold text-white">SPHERE ALLIANCE</span>
</div>
<div class="hidden md:flex space-x-8">
<a href="#" class="text-indigo-300 hover:text-white transition">Home</a>
<a href="#about" class="text-indigo-300 hover:text-white transition">About</a>
<a href="#entities" class="text-indigo-300 hover:text-white transition">Entities</a>
<a href="#contact" class="text-indigo-300 hover:text-white transition">Contact</a>
</div>
<button class="md:hidden text-white">
<i data-feather="menu"></i>
</button>
</div>
</nav>
<!-- Hero Section -->
<section class="min-h-screen flex items-center pt-16">
<div class="container mx-auto px-4 py-20 flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-12 md:mb-0" data-aos="fade-right">
<h1 class="header-font text-5xl md:text-7xl font-bold mb-6 text-white">
SPHERE BEING <span class="text-indigo-400">ALLIANCE</span>
</h1>
<p class="text-xl text-indigo-200 mb-8 max-w-2xl">
Exploring the cosmic collective of advanced beings dedicated to humanity's spiritual evolution and galactic harmony.
</p>
<div class="flex space-x-4">
<button class="px-8 py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-full font-semibold transition transform hover:scale-105 neon-border pulse">
Discover More
</button>
<button class="px-8 py-3 border-2 border-indigo-500 text-indigo-300 hover:bg-indigo-500 hover:text-white rounded-full font-semibold transition">
Cosmic Timeline
</button>
</div>
</div>
<div class="md:w-1/2 flex justify-center" data-aos="fade-left">
<div class="relative">
<div class="w-64 h-64 md:w-80 md:h-80 rounded-full bg-gradient-to-r from-indigo-500 to-purple-600 opacity-20 blur-3xl absolute -z-10 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"></div>
<div class="w-64 h-64 md:w-80 md:h-80 rounded-full border-2 border-indigo-400 flex items-center justify-center">
<div class="w-48 h-48 md:w-60 md:h-60 rounded-full border border-indigo-300 flex items-center justify-center">
<div class="w-32 h-32 md:w-40 md:h-40 rounded-full bg-indigo-500 bg-opacity-30 flex items-center justify-center">
<i data-feather="eye" class="text-indigo-300 w-16 h-16"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-20">
<div class="container mx-auto px-4">
<div class="text-center mb-16" data-aos="fade-up">
<h2 class="header-font text-4xl font-bold mb-4 text-white">ABOUT THE ALLIANCE</h2>
<div class="w-24 h-1 bg-indigo-500 mx-auto"></div>
</div>
<div class="flex flex-col md:flex-row items-center gap-12">
<div class="md:w-1/2" data-aos="fade-right">
<div class="card-bg rounded-2xl p-8">
<h3 class="header-font text-2xl font-bold mb-4 text-indigo-300">Cosmic Collective</h3>
<p class="text-indigo-100 mb-6">
The Sphere Being Alliance represents a coalition of advanced extraterrestrial civilizations working in harmony to guide humanity through its spiritual awakening and dimensional transition.
</p>
<p class="text-indigo-100 mb-6">
Comprised of beings from higher densities, these entities operate beyond conventional space-time limitations, focusing on consciousness expansion and the liberation of sentient beings across the galaxy.
</p>
<div class="flex items-center mt-8">
<div class="mr-4 p-3 bg-indigo-900 rounded-full">
<i data-feather="shield" class="text-indigo-300"></i>
</div>
<div>
<h4 class="font-bold text-white">Protection & Guidance</h4>
<p class="text-indigo-200 text-sm">Safeguarding humanity's evolutionary path</p>
</div>
</div>
</div>
</div>
<div class="md:w-1/2" data-aos="fade-left">
<div class="grid grid-cols-2 gap-6">
<div class="card-bg rounded-xl p-6 text-center">
<div class="w-16 h-16 mx-auto mb-4 bg-indigo-900 rounded-full flex items-center justify-center">
<i data-feather="layers" class="text-indigo-300"></i>
</div>
<h4 class="font-bold text-white mb-2">Multi-Dimensional</h4>
<p class="text-indigo-200 text-sm">Operating across densities 5-9</p>
</div>
<div class="card-bg rounded-xl p-6 text-center">
<div class="w-16 h-16 mx-auto mb-4 bg-indigo-900 rounded-full flex items-center justify-center">
<i data-feather="globe" class="text-indigo-300"></i>
</div>
<h4 class="font-bold text-white mb-2">Galactic Scope</h4>
<p class="text-indigo-200 text-sm">Spanning multiple star systems</p>
</div>
<div class="card-bg rounded-xl p-6 text-center">
<div class="w-16 h-16 mx-auto mb-4 bg-indigo-900 rounded-full flex items-center justify-center">
<i data-feather="heart" class="text-indigo-300"></i>
</div>
<h4 class="font-bold text-white mb-2">Service to Others</h4>
<p class="text-indigo-200 text-sm">Aligned with positive polarity</p>
</div>
<div class="card-bg rounded-xl p-6 text-center">
<div class="w-16 h-16 mx-auto mb-4 bg-indigo-900 rounded-full flex items-center justify-center">
<i data-feather="zap" class="text-indigo-300"></i>
</div>
<h4 class="font-bold text-white mb-2">Energy Mastery</h4>
<p class="text-indigo-200 text-sm">Manipulating universal forces</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Entities Section -->
<section id="entities" class="py-20 bg-gray-900 bg-opacity-50">
<div class="container mx-auto px-4">
<div class="text-center mb-16" data-aos="fade-up">
<h2 class="header-font text-4xl font-bold mb-4 text-white">CORE ENTITIES</h2>
<div class="w-24 h-1 bg-indigo-500 mx-auto"></div>
<p class="text-indigo-200 max-w-2xl mx-auto mt-6">
Key representatives of the Alliance who have interacted with humanity and serve specific roles in our cosmic evolution.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Entity 1 -->
<div class="card-bg rounded-2xl overflow-hidden" data-aos="fade-up">
<div class="p-6">
<div class="flex items-start mb-6">
<div class="w-16 h-16 rounded-full bg-indigo-900 flex items-center justify-center mr-4">
<i data-feather="user" class="text-indigo-300"></i>
</div>
<div>
<h3 class="header-font text-xl font-bold text-white">Blue Avians</h3>
<p class="text-indigo-300">Primary Messengers</p>
</div>
</div>
<p class="text-indigo-100 mb-4">
Tall, blue-feathered beings who serve as primary communicators with humanity. They emphasize the importance of love, forgiveness, and spiritual growth.
</p>
<ul class="text-indigo-200 text-sm space-y-2">
<li class="flex items-center">
<i data-feather="check-circle" class="w-4 h-4 mr-2 text-indigo-400"></i>
Symbolic communication through art
</li>
<li class="flex items-center">
<i data-feather="check-circle" class="w-4 h-4 mr-2 text-indigo-400"></i>
Advocates for peaceful resolution
</li>
</ul>
</div>
</div>
<!-- Entity 2 -->
<div class="card-bg rounded-2xl overflow-hidden" data-aos="fade-up" data-aos-delay="100">
<div class="p-6">
<div class="flex items-start mb-6">
<div class="w-16 h-16 rounded-full bg-indigo-900 flex items-center justify-center mr-4">
<i data-feather="user" class="text-indigo-300"></i>
</div>
<div>
<h3 class="header-font text-xl font-bold text-white">Sphere Being</h3>
<p class="text-indigo-300">Central Coordinator</p>
</div>
</div>
<p class="text-indigo-100 mb-4">
The primary entity representing the Alliance. Communicates through symbolic holograms and emphasizes the importance of personal transformation.
</p>
<ul class="text-indigo-200 text-sm space-y-2">
<li class="flex items-center">
<i data-feather="check-circle" class="w-4 h-4 mr-2 text-indigo-400"></i>
Projects holographic messages
</li>
<li class="flex items-center">
<i data-feather="check-circle" class="w-4 h-4 mr-2 text-indigo-400"></i>
Guides dimensional transition
</li>
</ul>
</div>
</div>
<!-- Entity 3 -->
<div class="card-bg rounded-2xl overflow-hidden" data-aos="fade-up" data-aos-delay="200">
<div class="p-6">
<div class="flex items-start mb-6">
<div class="w-16 h-16 rounded-full bg-indigo-900 flex items-center justify-center mr-4">
<i data-feather="user" class="text-indigo-300"></i>
</div>
<div>
<h3 class="header-font text-xl font-bold text-white">Tall Whites</h3>
<p class="text-indigo-300">Technological Experts</p>
</div>
</div>
<p class="text-indigo-100 mb-4">
Advanced human-like beings focused on technological advancement and infrastructure development for humanity's future.
</p>
<ul class="text-indigo-200 text-sm space-y-2">
<li class="flex items-center">
<i data-feather="check-circle" class="w-4 h-4 mr-2 text-indigo-400"></i>
Advanced propulsion systems
</li>
<li class="flex items-center">
<i data-feather="check-circle" class="w-4 h-4 mr-2 text-indigo-400"></i>
Energy technology mastery
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Mission Section -->
<section class="py-20">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row items-center gap-12">
<div class="md:w-1/2" data-aos="fade-right">
<div class="relative">
<div class="absolute -top-6 -left-6 w-full h-full border-2 border-indigo-500 rounded-2xl"></div>
<div class="relative card-bg rounded-2xl p-8">
<h3 class="header-font text-2xl font-bold mb-6 text-white">ALLIANCE MISSION</h3>
<div class="space-y-6">
<div class="flex">
<div class="mr-4 mt-1 text-indigo-400">
<i data-feather="target"></i>
</div>
<div>
<h4 class="font-bold text-white mb-2">Humanity's Awakening</h4>
<p class="text-indigo-200">
Facilitating the collective spiritual awakening of humanity through disclosure and consciousness expansion.
</p>
</div>
</div>
<div class="flex">
<div class="mr-4 mt-1 text-indigo-400">
<i data-feather="shield"></i>
</div>
<div>
<h4 class="font-bold text-white mb-2">Planetary Liberation</h4>
<p class="text-indigo-200">
Supporting the liberation of Earth from negative control systems and promoting sovereignty.
</p>
</div>
</div>
<div class="flex">
<div class="mr-4 mt-1 text-indigo-400">
<i data-feather="globe"></i>
</div>
<div>
<h4 class="font-bold text-white mb-2">Galactic Integration</h4>
<p class="text-indigo-200">
Preparing humanity for integration into the broader galactic community as a sovereign species.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="md:w-1/2" data-aos="fade-left">
<h2 class="header-font text-4xl font-bold mb-6 text-white">COSMIC STEWARDSHIP</h2>
<p class="text-xl text-indigo-200 mb-8">
The Sphere Being Alliance operates under principles of non-interference while providing guidance for humanity's evolutionary journey.
</p>
<div class="space-y-6">
<div class="flex items-start">
<div class="mr-4 mt-1 w-6 h-6 rounded-full bg-indigo-600 flex items-center justify-center">
<i data-feather="check" class="w-4 h-4 text-white"></i>
</div>
<p class="text-indigo-100">
<span class="font-bold text-white">Respect for Free Will:</span> All interventions are designed to preserve human sovereignty and choice.
</p>
</div>
<div class="flex items-start">
<div class="mr-4 mt-1 w-6 h-6 rounded-full bg-indigo-600 flex items-center justify-center">
<i data-feather="check" class="w-4 h-4 text-white"></i>
</div>
<p class="text-indigo-100">
<span class="font-bold text-white">Service to Others:</span> Actions are guided by the principle of service to others rather than self-interest.
</p>
</div>
<div class="flex items-start">
<div class="mr-4 mt-1 w-6 h-6 rounded-full bg-indigo-600 flex items-center justify-center">
<i data-feather="check" class="w-4 h-4 text-white"></i>
</div>
<p class="text-indigo-100">
<span class="font-bold text-white">Transparency:</span> Gradual disclosure of information to prepare humanity for cosmic truths.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-20 bg-gray-900 bg-opacity-50">
<div class="container mx-auto px-4">
<div class="max-w-3xl mx-auto text-center mb-16" data-aos="fade-up">
<h2 class="header-font text-4xl font-bold mb-4 text-white">CONNECT WITH US</h2>
<div class="w-24 h-1 bg-indigo-500 mx-auto"></div>
<p class="text-indigo-200 mt-6">
Join our community of researchers and experiencers exploring cosmic consciousness and extraterrestrial contact.
</p>
</div>
<div class="max-w-2xl mx-auto card-bg rounded-2xl p-8" data-aos="fade-up">
<form>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div>
<label class="block text-indigo-200 mb-2">Name</label>
<input type="text" class="w-full bg-gray-800 border border-indigo-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500">
</div>
<div>
<label class="block text-indigo-200 mb-2">Email</label>
<input type="email" class="w-full bg-gray-800 border border-indigo-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500">
</div>
</div>
<div class="mb-6">
<label class="block text-indigo-200 mb-2">Subject</label>
<input type="text" class="w-full bg-gray-800 border border-indigo-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500">
</div>
<div class="mb-6">
<label class="block text-indigo-200 mb-2">Message</label>
<textarea rows="5" class="w-full bg-gray-800 border border-indigo-700 rounded-lg px-4 py-3 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"></textarea>
</div>
<button type="submit" class="w-full py-3 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg font-semibold transition">
Send Message to the Alliance
</button>
</form>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-12 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-6 md:mb-0">
<div class="flex items-center space-x-2">
<div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center">
<i data-feather="globe" class="text-white w-5 h-5"></i>
</div>
<span class="header-font text-xl font-bold text-white">SPHERE ALLIANCE</span>
</div>
<p class="text-indigo-300 mt-2">Exploring cosmic consciousness and unity</p>
</div>
<div class="flex space-x-6">
<a href="#" class="text-indigo-300 hover:text-white transition">
<i data-feather="facebook"></i>
</a>
<a href="#" class="text-indigo-300 hover:text-white transition">
<i data-feather="twitter"></i>
</a>
<a href="#" class="text-indigo-300 hover:text-white transition">
<i data-feather="instagram"></i>
</a>
<a href="#" class="text-indigo-300 hover:text-white transition">
<i data-feather="youtube"></i>
</a>
</div>
</div>
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-indigo-400">
<p>© 2023 Sphere Being Alliance Exploration Portal. All rights reserved.</p>
</div>
</div>
</footer>
<script>
// Create stars
function createStars() {
const container = document.getElementById('stars-container');
const starCount = 150;
for (let i = 0; i < starCount; i++) {
const star = document.createElement('div');
star.classList.add('star');
// Random position
const x = Math.random() * 100;
const y = Math.random() * 100;
// Random size
const size = Math.random() * 3;
// Random animation duration
const duration = 2 + Math.random() * 5;
star.style.left = `${x}%`;
star.style.top = `${y}%`;
star.style.width = `${size}px`;
star.style.height = `${size}px`;
star.style.setProperty('--duration', `${duration}s`);
container.appendChild(star);
}
}
// Initialize
document.addEventListener('DOMContentLoaded', function() {
createStars();
feather.replace();
AOS.init({
duration: 1000,
once: true
});
});
</script>
</body>
</html>