|
|
<!DOCTYPE html> |
|
|
<html lang="en" class="dark"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>LinguaFusion 3000 - Futuristic Language Translator</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
darkMode: 'class', |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: { |
|
|
500: '#D2B48C', |
|
|
}, |
|
|
secondary: { |
|
|
500: '#B8860B', |
|
|
}, |
|
|
desert: { |
|
|
100: '#F5DEB3', |
|
|
200: '#E6C8A8', |
|
|
300: '#D2B48C', |
|
|
400: '#C19A6B', |
|
|
500: '#A0522D', |
|
|
600: '#8B4513', |
|
|
700: '#654321', |
|
|
800: '#5D4037', |
|
|
900: '#3E2723', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
body { |
|
|
background-image: url('http://static.photos/desert/1920x1080/1'); |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
background-attachment: fixed; |
|
|
} |
|
|
#main-content { |
|
|
background-color: rgba(17, 24, 39, 0.85); |
|
|
backdrop-filter: blur(5px); |
|
|
min-height: 100vh; |
|
|
} |
|
|
.glow-text { |
|
|
text-shadow: 0 0 10px rgba(210, 180, 140, 0.7); |
|
|
} |
|
|
.glow-box { |
|
|
box-shadow: 0 0 20px rgba(210, 180, 140, 0.5); |
|
|
border: 1px solid rgba(210, 180, 140, 0.3); |
|
|
} |
|
|
.glow-box-secondary { |
|
|
box-shadow: 0 0 20px rgba(184, 134, 11, 0.5); |
|
|
border: 1px solid rgba(184, 134, 11, 0.3); |
|
|
} |
|
|
.language-chip { |
|
|
transition: all 0.3s ease; |
|
|
background-color: rgba(139, 69, 19, 0.7); |
|
|
} |
|
|
.language-chip:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: 0 10px 15px -3px rgba(139, 69, 19, 0.5); |
|
|
background-color: rgba(160, 82, 45, 0.9); |
|
|
} |
|
|
.btn-primary { |
|
|
background-color: #D2B48C; |
|
|
color: #111827; |
|
|
} |
|
|
.btn-primary:hover { |
|
|
background-color: #C19A6B; |
|
|
} |
|
|
.btn-secondary { |
|
|
background-color: #B8860B; |
|
|
color: #111827; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="text-gray-100 min-h-screen overflow-x-hidden"> |
|
|
<div id="main-content"> |
|
|
|
|
|
<div class="container mx-auto px-4 py-12 relative"> |
|
|
|
|
|
<header class="flex justify-between items-center mb-16"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i data-feather="globe" class="text-primary-500 w-8 h-8"></i> |
|
|
<h1 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-desert-300 to-desert-600"> |
|
|
LinguaFusion<span class="text-desert-100">3000</span> |
|
|
</h1> |
|
|
</div> |
|
|
<nav> |
|
|
<ul class="flex space-x-6"> |
|
|
<li><a href="#" class="hover:text-primary-500 transition">Home</a></li> |
|
|
<li><a href="#" class="hover:text-primary-500 transition">Languages</a></li> |
|
|
<li><a href="#" class="hover:text-primary-500 transition">API</a></li> |
|
|
<li><a href="#" class="hover:text-primary-500 transition">Pricing</a></li> |
|
|
</ul> |
|
|
</nav> |
|
|
<button class="bg-primary-500 hover:bg-primary-600 px-4 py-2 rounded-lg transition flex items-center space-x-2"> |
|
|
<i data-feather="user" class="w-4 h-4"></i> |
|
|
<span>Login</span> |
|
|
</button> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="mb-24"> |
|
|
<div class="max-w-3xl mx-auto text-center"> |
|
|
<h2 class="text-5xl font-bold mb-6 glow-text"> |
|
|
Translate <span class="text-primary-500">Rare</span> Languages with <span class="text-secondary-500">AI Power</span> |
|
|
</h2> |
|
|
<p class="text-xl text-gray-400 mb-10"> |
|
|
Our neural network breaks language barriers for obscure dialects and in-demand languages with 99.7% accuracy. |
|
|
</p> |
|
|
<div class="flex justify-center space-x-4"> |
|
|
<button class="bg-primary-500 hover:bg-primary-600 px-6 py-3 rounded-lg font-medium transition flex items-center space-x-2 glow-box"> |
|
|
<i data-feather="zap" class="w-5 h-5"></i> |
|
|
<span>Try Instant Demo</span> |
|
|
</button> |
|
|
<button class="bg-gray-800 hover:bg-gray-700 px-6 py-3 rounded-lg font-medium transition flex items-center space-x-2 border border-gray-700"> |
|
|
<i data-feather="play-circle" class="w-5 h-5"></i> |
|
|
<span>Watch Demo</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-24"> |
|
|
<div class="bg-gray-800 rounded-xl p-1 glow-box-secondary"> |
|
|
<div class="bg-gray-900 rounded-xl p-6"> |
|
|
<div class="grid md:grid-cols-2 gap-6"> |
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="font-medium">Input Text</h3> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<select class="bg-gray-800 text-sm rounded px-3 py-1"> |
|
|
<option>Detect Language</option> |
|
|
<option>Ubykh</option> |
|
|
<option>Taushiro</option> |
|
|
<option>Njerep</option> |
|
|
<option>Liki</option> |
|
|
<option>Dumi</option> |
|
|
</select> |
|
|
<button class="bg-gray-800 hover:bg-gray-700 p-1 rounded"> |
|
|
<i data-feather="mic" class="w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<textarea class="w-full h-64 bg-gray-800 rounded-lg p-4 text-gray-200 focus:outline-none focus:ring-2 focus:ring-primary-500 resize-none" placeholder="Enter text to translate..."></textarea> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="font-medium">Translation</h3> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<select class="bg-gray-800 text-sm rounded px-3 py-1"> |
|
|
<option>Taushiro</option> |
|
|
<option>Ubykh</option> |
|
|
<option>Njerep</option> |
|
|
<option>Liki</option> |
|
|
<option>Dumi</option> |
|
|
</select> |
|
|
<button class="bg-gray-800 hover:bg-gray-700 p-1 rounded"> |
|
|
<i data-feather="volume-2" class="w-4 h-4"></i> |
|
|
</button> |
|
|
<button class="bg-gray-800 hover:bg-gray-700 p-1 rounded"> |
|
|
<i data-feather="copy" class="w-4 h-4"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="w-full h-64 bg-gray-800 rounded-lg p-4 text-gray-200 overflow-auto"> |
|
|
<p class="text-gray-400 italic">Translation will appear here...</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6 flex justify-center"> |
|
|
<button class="bg-primary-500 hover:bg-primary-600 px-8 py-3 rounded-lg font-medium transition flex items-center space-x-2 glow-box"> |
|
|
<i data-feather="refresh-cw" class="w-5 h-5"></i> |
|
|
<span>Translate</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-24"> |
|
|
<h2 class="text-3xl font-bold text-center mb-16">Cutting-Edge <span class="text-primary-500">Features</span></h2> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 hover:glow-box transition"> |
|
|
<div class="bg-primary-500 bg-opacity-10 rounded-lg w-12 h-12 flex items-center justify-center mb-4"> |
|
|
<i data-feather="cpu" class="text-primary-500 w-6 h-6"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Quantum Neural Core</h3> |
|
|
<p class="text-gray-400">Our proprietary quantum computing algorithms handle complex grammar structures in obscure languages.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 hover:glow-box transition"> |
|
|
<div class="bg-secondary-500 bg-opacity-10 rounded-lg w-12 h-12 flex items-center justify-center mb-4"> |
|
|
<i data-feather="book" class="text-secondary-500 w-6 h-6"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Dynamic Lexicon</h3> |
|
|
<p class="text-gray-400">Automatically updates with newly discovered words and dialects from field linguists worldwide.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 hover:glow-box transition"> |
|
|
<div class="bg-primary-500 bg-opacity-10 rounded-lg w-12 h-12 flex items-center justify-center mb-4"> |
|
|
<i data-feather="shield" class="text-primary-500 w-6 h-6"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-bold mb-3">Secure Protocol</h3> |
|
|
<p class="text-gray-400">Military-grade encryption for sensitive translations in diplomacy and rare cultural research.</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-24"> |
|
|
<h2 class="text-3xl font-bold text-center mb-16">Supported <span class="text-secondary-500">Languages</span></h2> |
|
|
|
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4"> |
|
|
|
|
|
<div class="bg-gray-800 rounded-full px-4 py-2 text-center language-chip cursor-pointer hover:bg-primary-500 hover:text-white"> |
|
|
Ubykh |
|
|
</div> |
|
|
<div class="bg-gray-800 rounded-full px-4 py-2 text-center language-chip cursor-pointer hover:bg-primary-500 hover:text-white"> |
|
|
Taushiro |
|
|
</div> |
|
|
<div class="bg-gray-800 rounded-full px-4 py-2 text-center language-chip cursor-pointer hover:bg-primary-500 hover:text-white"> |
|
|
Njerep |
|
|
</div> |
|
|
<div class="bg-gray-800 rounded-full px-4 py-2 text-center language-chip cursor-pointer hover:bg-primary-500 hover:text-white"> |
|
|
Liki |
|
|
</div> |
|
|
<div class="bg-gray-800 rounded-full px-4 py-2 text-center language-chip cursor-pointer hover:bg-primary-500 hover:text-white"> |
|
|
Dumi |
|
|
</div> |
|
|
<div class="bg-gray-800 rounded-full px-4 py-2 text-center language-chip cursor-pointer hover:bg-primary-500 hover:text-white"> |
|
|
Pawnee |
|
|
</div> |
|
|
<div class="bg-gray-800 rounded-full px-4 py-2 text-center language-chip cursor-pointer hover:bg-primary-500 hover:text-white"> |
|
|
Chamicuro |
|
|
</div> |
|
|
<div class="bg-gray-800 rounded-full px-4 py-2 text-center language-chip cursor-pointer hover:bg-primary-500 hover:text-white"> |
|
|
Tausug |
|
|
</div> |
|
|
<div class="bg-gray-800 rounded-full px-4 py-2 text-center language-chip cursor-pointer hover:bg-primary-500 hover:text-white"> |
|
|
Yuchi |
|
|
</div> |
|
|
<div class="bg-gray-800 rounded-full px-4 py-2 text-center language-chip cursor-pointer hover:bg-primary-500 hover:text-white"> |
|
|
Seri |
|
|
</div> |
|
|
<div class="bg-gray-800 rounded-full px-4 py-2 text-center language-chip cursor-pointer hover:bg-primary-500 hover:text-white"> |
|
|
N|uu |
|
|
</div> |
|
|
<div class="bg-gray-800 rounded-full px-4 py-2 text-center language-chip cursor-pointer hover:bg-primary-500 hover:text-white"> |
|
|
+50 more... |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mb-16"> |
|
|
<div class="bg-gradient-to-r from-primary-500 to-secondary-500 rounded-xl p-1"> |
|
|
<div class="bg-gray-900 rounded-xl p-8 text-center"> |
|
|
<h2 class="text-3xl font-bold mb-4">Ready to Break Language Barriers?</h2> |
|
|
<p class="text-xl text-gray-400 mb-8 max-w-2xl mx-auto">Join governments, researchers, and global corporations using our translation technology.</p> |
|
|
<button class="bg-gradient-to-r from-primary-500 to-secondary-500 text-white px-8 py-3 rounded-lg font-medium transition hover:opacity-90 flex items-center space-x-2 mx-auto"> |
|
|
<i data-feather="user-plus" class="w-5 h-5"></i> |
|
|
<span>Start Free Trial</span> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="border-t border-gray-800 pt-8"> |
|
|
<div class="grid md:grid-cols-4 gap-8 mb-8"> |
|
|
<div> |
|
|
<div class="flex items-center space-x-2 mb-4"> |
|
|
<i data-feather="sun" class="text-desert-400 w-6 h-6"></i> |
|
|
<h3 class="text-xl font-bold text-desert-200">LinguaFusion3000</h3> |
|
|
</div> |
|
|
<p class="text-gray-400">The future of rare language translation powered by quantum AI.</p> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Product</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Features</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Pricing</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">API</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Integrations</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Resources</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Language Database</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Research Papers</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Status</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-bold mb-4">Company</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">About</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Legal</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center border-t border-gray-800 py-6"> |
|
|
<p class="text-gray-400 mb-4 md:mb-0">© 2023 LinguaFusion3000. All rights reserved.</p> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="github"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="linkedin"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="facebook"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
feather.replace(); |
|
|
|
|
|
|
|
|
anime({ |
|
|
targets: '.language-chip', |
|
|
scale: [0.95, 1], |
|
|
duration: 1500, |
|
|
delay: anime.stagger(100), |
|
|
loop: true, |
|
|
direction: 'alternate', |
|
|
easing: 'easeInOutSine' |
|
|
}); |
|
|
feather.replace(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
