File size: 9,554 Bytes
b960304 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 |
<!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 -->
<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 Content -->
<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">
<!-- Logo -->
<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>
<!-- Search Box -->
<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>
<!-- Language Options -->
<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 -->
<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>
// Simple search functionality
document.querySelector('.search-input').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
const query = this.value.trim();
if (query) {
alert(`Searching Eternity for: ${query}`);
// In a real implementation, this would redirect to search results
}
}
});
// Search button functionality
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}`);
}
});
});
// Microphone button functionality
document.querySelector('.fa-microphone').parentElement.addEventListener('click', function() {
alert('Voice search activated. Speak now...');
// In a real implementation, this would use the Web Speech API
});
</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> |