|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Eternity - The Eternal Search</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=Orbitron:wght@400;700&family=Roboto:wght@300;400;500&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Roboto', sans-serif; |
|
|
background-color: #000; |
|
|
color: #fff; |
|
|
min-height: 100vh; |
|
|
} |
|
|
|
|
|
.logo-text { |
|
|
font-family: 'Orbitron', sans-serif; |
|
|
text-shadow: 0 0 8px rgba(255, 0, 0, 0.7); |
|
|
} |
|
|
|
|
|
.search-box { |
|
|
box-shadow: 0 0 15px rgba(255, 0, 0, 0.5); |
|
|
} |
|
|
|
|
|
.search-btn { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.search-btn:hover { |
|
|
transform: scale(1.05); |
|
|
box-shadow: 0 0 10px rgba(255, 0, 0, 0.7); |
|
|
} |
|
|
|
|
|
.nav-link:hover { |
|
|
color: #f00 !important; |
|
|
text-decoration: underline; |
|
|
} |
|
|
|
|
|
.footer-link:hover { |
|
|
color: #f00 !important; |
|
|
} |
|
|
|
|
|
.dragon-logo { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { transform: scale(1); } |
|
|
50% { transform: scale(1.05); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
|
|
|
.search-input:focus { |
|
|
outline: none; |
|
|
box-shadow: 0 0 10px rgba(255, 0, 0, 0.7); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="flex flex-col min-h-screen"> |
|
|
|
|
|
<header class="bg-black py-4 px-6 border-b border-red-900"> |
|
|
<div class="container mx-auto flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-6"> |
|
|
<a href="#" class="flex items-center"> |
|
|
<svg class="dragon-logo w-10 h-10 text-red-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
|
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path> |
|
|
<path d="M12 12l-8-4"></path> |
|
|
<path d="M12 12l8-4"></path> |
|
|
</svg> |
|
|
<span class="logo-text text-3xl font-bold text-red-600 ml-2">ETERNITY</span> |
|
|
</a> |
|
|
</div> |
|
|
<nav class="hidden md:flex space-x-6"> |
|
|
<a href="#" class="nav-link text-white hover:text-red-500">Images</a> |
|
|
<a href="#" class="nav-link text-white hover:text-red-500">Videos</a> |
|
|
<a href="#" class="nav-link text-white hover:text-red-500">News</a> |
|
|
<a href="#" class="nav-link text-white hover:text-red-500">Maps</a> |
|
|
</nav> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<button class="text-white hover:text-red-500"> |
|
|
<i class="fas fa-th"></i> |
|
|
</button> |
|
|
<button class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md font-medium"> |
|
|
Sign In |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-grow flex flex-col items-center justify-center px-4 sm:px-6 lg:px-8"> |
|
|
<div class="w-full max-w-3xl text-center"> |
|
|
|
|
|
<div class="mb-8"> |
|
|
<svg class="dragon-logo mx-auto w-24 h-24 text-red-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> |
|
|
<path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path> |
|
|
<path d="M12 7l-1-2-1 2"></path> |
|
|
<path d="M12 7v3"></path> |
|
|
<path d="M10 9h4"></path> |
|
|
<path d="M12 12v3"></path> |
|
|
<path d="M10 15h4"></path> |
|
|
</svg> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="relative mb-8"> |
|
|
<div class="search-box relative flex items-center bg-gray-900 rounded-full border border-red-900 px-6 py-3"> |
|
|
<i class="fas fa-search text-red-500 mr-4"></i> |
|
|
<input type="text" class="search-input bg-transparent text-white flex-grow focus:outline-none" placeholder="Search with Eternity..."> |
|
|
<button class="ml-4 text-red-500"> |
|
|
<i class="fas fa-microphone"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="mt-6 flex justify-center space-x-4"> |
|
|
<button class="search-btn bg-gray-800 hover:bg-red-600 text-white px-6 py-2 rounded-md font-medium"> |
|
|
Eternity Search |
|
|
</button> |
|
|
<button class="search-btn bg-gray-800 hover:bg-red-600 text-white px-6 py-2 rounded-md font-medium"> |
|
|
I'm Feeling Eternal |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="text-gray-400 text-sm"> |
|
|
<p>Eternity offered in: |
|
|
<a href="#" class="text-red-400 hover:underline ml-2">Español</a> |
|
|
<a href="#" class="text-red-400 hover:underline ml-2">Français</a> |
|
|
<a href="#" class="text-red-400 hover:underline ml-2">Deutsch</a> |
|
|
<a href="#" class="text-red-400 hover:underline ml-2">日本語</a> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<footer class="bg-black border-t border-red-900 py-4 px-6"> |
|
|
<div class="container mx-auto"> |
|
|
<div class="mb-4"> |
|
|
<p class="text-gray-400 text-center">Your gateway to eternal knowledge</p> |
|
|
</div> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="flex space-x-6 mb-4 md:mb-0"> |
|
|
<a href="#" class="footer-link text-gray-400 hover:text-red-500">About</a> |
|
|
<a href="#" class="footer-link text-gray-400 hover:text-red-500">Privacy</a> |
|
|
<a href="#" class="footer-link text-gray-400 hover:text-red-500">Terms</a> |
|
|
<a href="#" class="footer-link text-gray-400 hover:text-red-500">Settings</a> |
|
|
</div> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="footer-link text-gray-400 hover:text-red-500"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="footer-link text-gray-400 hover:text-red-500"> |
|
|
<i class="fab fa-facebook"></i> |
|
|
</a> |
|
|
<a href="#" class="footer-link text-gray-400 hover:text-red-500"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="footer-link text-gray-400 hover:text-red-500"> |
|
|
<i class="fab fa-linkedin"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.querySelector('.search-input').addEventListener('keypress', function(e) { |
|
|
if (e.key === 'Enter') { |
|
|
const query = this.value.trim(); |
|
|
if (query) { |
|
|
alert(`Searching Eternity for: ${query}`); |
|
|
|
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.search-btn').forEach(button => { |
|
|
button.addEventListener('click', function() { |
|
|
const query = document.querySelector('.search-input').value.trim(); |
|
|
if (query || this.textContent.includes('Feeling')) { |
|
|
alert(this.textContent.includes('Feeling') ? |
|
|
'Taking you on an eternal journey...' : |
|
|
`Searching Eternity for: ${query}`); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelector('.fa-microphone').parentElement.addEventListener('click', function() { |
|
|
alert('Voice search activated. Speak now...'); |
|
|
|
|
|
}); |
|
|
</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=D110/browser" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
