FKDURSSTM/voidloom-admin-stellarium
0
1<!DOCTYPE html>2<html lang="en" class="dark">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Nox Aeterna</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>10 <style>11 :root {12 --void-black: #0A0A0A;13 --soft-shadow: #1A0A2E;14 --lavender-400: #C084FC;15 --lavender-500: #A855F7;16 --lavender-600: #9333EA;17 --cyan-300: #67E8F9;18 --silver: #D8D8D8;19 }20 21 body {22 background-color: var(--void-black);23 overflow-x: hidden;24 }25 @keyframes nebulaFlow {26 0% { transform: rotate(0deg) scale(1) translate(0, 0); }27 25% { transform: rotate(90deg) scale(1.2) translate(5%, -5%); }28 50% { transform: rotate(180deg) scale(1.3) translate(-3%, 3%); }29 75% { transform: rotate(270deg) scale(1.1) translate(2%, 2%); }30 100% { transform: rotate(360deg) scale(1) translate(0, 0); }31 }32 33 @keyframes colorShift {34 0% { filter: hue-rotate(0deg) blur(100px); }35 50% { filter: hue-rotate(180deg) blur(120px); }36 100% { filter: hue-rotate(360deg) blur(100px); }37 }38 39 .cosmic-dust {40 position: fixed;41 top: 0; left: 0;42 width: 200%; height: 200%;43 z-index: 0;44 pointer-events: none;45 animation: nebulaFlow 30s linear infinite, colorShift 20s ease-in-out infinite;46 background:47 radial-gradient(ellipse 800px 800px at 30% 30%, rgba(192, 132, 252, 0.15) 0%, transparent 50%),48 radial-gradient(ellipse 900px 900px at 70% 30%, rgba(67, 232, 249, 0.15) 0%, transparent 50%),49 radial-gradient(ellipse 700px 700px at 50% 70%, rgba(147, 51, 234, 0.12) 0%, transparent 50%);50 }51.star-field {52 position: fixed;53 top: 0;54 left: 0;55 width: 100%;56 height: 100%;57 z-index: 0;58 }59 .star {60 position: absolute;61 width: 2px;62 height: 2px;63 background: var(--silver);64 border-radius: 50%;65 opacity: 0.6;66 animation: twinkle 8s infinite ease-in-out, float 20s infinite ease-in-out;67 }68 69 @keyframes twinkle {70 0%, 100% { opacity: 0.3; transform: scale(1); }71 50% { opacity: 1; transform: scale(1.2); }72 }73 74 @keyframes float {75 0%, 100% { transform: translateY(0px) translateX(0px); }76 25% { transform: translateY(-10px) translateX(5px); }77 50% { transform: translateY(5px) translateX(-3px); }78 75% { transform: translateY(-5px) translateX(2px); }79 }80.hidden-link {81 opacity: 0;82 transition: all 0.8s ease;83 position: relative;84 }85 86 .hidden-link:hover {87 opacity: 1;88 text-shadow: 0 0 8px var(--lavender-500);89 }90 91 .hidden-link::before {92 content: '';93 position: absolute;94 inset: -8px;95 border-radius: 12px;96 border: 1px solid transparent;97 transition: all 0.8s ease;98 pointer-events: none;99 }100 101 .hidden-link:hover::before {102 border-color: var(--lavender-500);103 box-shadow: 0 0 20px var(--lavender-500);104 animation: pulse 1.5s infinite;105 }106 107 @keyframes pulse {108 0% { box-shadow: 0 0 20px var(--lavender-500), inset 0 0 20px var(--lavender-500); }109 50% { box-shadow: 0 0 40px var(--lavender-500), inset 0 0 30px var(--lavender-500); }110 100% { box-shadow: 0 0 20px var(--lavender-500), inset 0 0 20px var(--lavender-500); }111 }112 113 .hover-card {114 transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);115 background: linear-gradient(135deg, var(--void-black) 0%, var(--lavender-600) 150%);116 background-size: 400% 400%;117 background-position: 0% 50%;118 box-shadow: 0 0 0 rgba(168, 85, 247, 0);119 }120 121 .hover-card:hover {122 transform: translateY(-8px) scale(1.02);123 background-position: 100% 50%;124 box-shadow: 0 20px 40px rgba(168, 85, 247, 0.3);125 }126 .card-title {127 font-size: 1.25rem;128 font-weight: 400;129 line-height: 1.2;130 color: var(--silver);131 text-shadow: 0 0 4px var(--silver);132 letter-spacing: 0.06em;133 margin-bottom: 6px;134 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;135 }136 137 .card-sub {138 font-size: 0.75rem;139 opacity: 0.8;140 color: var(--cyan-300);141 text-transform: uppercase;142 letter-spacing: 0.2em;143 margin-top: 0;144 font-weight: 500;145 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;146 }147.fade-copyright,148 .crymatix {149 transition: all .8s ease;150 opacity: 1;151 }152 153 .fade-copyright.hide,154 .crymatix.hide {155 opacity: 0;156 }157 .crymatix {158 position: fixed;159 bottom: 1rem;160 left: 50%;161 transform: translateX(-50%);162 font-size: .70rem;163 letter-spacing: .15em;164 color: var(--silver);165 z-index: 10;166 white-space: nowrap;167 }168 169 .crymatix a {170 color: var(--cyan-300);171 transition: color .4s;172 text-decoration: none;173 }174 175 .crymatix a:hover {176 color: var(--lavender-400);177 }178.moon-logo {179 stroke-dasharray: 180;180 stroke-dashoffset: 0;181 animation: moonDraw 3s ease-in-out infinite alternate;182 }183 184 @keyframes moonDraw {185 from { stroke-dashoffset: 180; }186 to { stroke-dashoffset: 0; }187 }188 189 .floating-text {190 animation: breathe 4s ease-in-out infinite;191 }192 193 @keyframes breathe {194 0%, 100% { letter-spacing: 0.05em; opacity: 0.8; }195 50% { letter-spacing: 0.1em; opacity: 1; }196 }197 </style>198</head>199<body class="min-h-screen flex flex-col items-center justify-center relative">200 <div class="cosmic-dust"></div>201 <div class="star-field" id="starField"></div>202 <!-- Hidden Links -->203 <div class="absolute top-8 flex space-x-6">204 <a href="https://t.me/nox_aeterna_bot" 205 class="hidden-link text-sm px-2 py-1 tracking-wider"206 style="color: var(--silver)">207 бот208 </a>209 <a href="https://t.me/noxAeterna_kanal" 210 class="hidden-link text-sm px-2 py-1 tracking-wider"211 style="color: var(--silver)">212 канал213 </a>214 </div>215 216 <!-- Admin Auth Icon -->217 <button id="adminIcon" 218 class="fixed top-1/2 right-4 transform -translate-y-1/2 z-20 p-3 rounded-full bg-gray-900/50 border border-gray-700 hover:border-lavender-500 transition-all duration-300">219 <i data-feather="key" class="w-5 h-5" style="color: var(--silver)"></i>220 </button>221 222 <!-- Admin Auth Modal -->223 <div id="adminModal" class="fixed inset-0 bg-black/80 backdrop-blur-sm z-30 flex items-center justify-center opacity-0 pointer-events-none transition-all duration-500">224 <div class="bg-gray-900 border border-gray-700 rounded-lg p-8 w-80 transform scale-95 transition-all duration-300">225 <h3 class="text-xl font-light mb-6 text-center" style="color: var(--silver)">Администратор</h3>226 <form id="adminForm" class="space-y-4">227 <div>228 <input type="password" 229 id="adminPassword" 230 placeholder="Введите пароль"231 class="w-full px-4 py-3 bg-gray-800 border border-gray-600 rounded text-sm focus:outline-none focus:border-lavender-500 transition-colors"232 style="color: var(--silver)">233 </div>234 <div class="flex space-x-3">235 <button type="submit" 236 class="flex-1 py-2 bg-lavender-500 hover:bg-lavender-400 rounded text-sm transition-colors"237 style="color: var(--void-black); background-color: #A855F7;">238 Войти239 </button>240<button type="button" 241 id="cancelAdmin" 242 class="flex-1 py-2 bg-gray-700 hover:bg-gray-600 rounded text-sm transition-colors"243 style="color: var(--silver)">244 Отмена245 </button>246 </div>247 <p id="adminError" class="text-red-400 text-xs text-center opacity-0 transition-opacity duration-300">248 Неверный пароль249 </p>250 </form>251 </div>252 </div>253<!-- Main Content -->254 <main class="flex flex-col items-center space-y-8 z-10 px-4">255 <h1 class="text-6xl md:text-7xl font-light tracking-[0.2em]"256 style="color: var(--silver); background: linear-gradient(to right, var(--silver), var(--cyan-300)); 257 -webkit-background-clip: text; -webkit-text-fill-color: transparent;"258 id="heroTitle">259 Nox Aeterna260 </h1>261 262 <p class="text-xl font-thin tracking-[0.15em] floating-text"263 style="color: var(--silver)"264 id="subTitle">265 Where the night never ends266 </p>267 <div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-6 mt-12">268 <a href="https://t.me/nox_aeterna_bot"269 class="hover-card py-4 px-8 rounded-lg border border-gray-700270 w-48 text-center transition-all duration-1000">271 <div class="card-title">Войти в бота</div>272 <div class="card-sub">начать путешествие</div>273 </a>274 275 <a href="https://t.me/noxAeterna_kanal"276 class="hover-card py-4 px-8 rounded-lg border border-gray-700277 w-48 text-center transition-all duration-1000">278 <div class="card-title">Открыть канал</div>279 <div class="card-sub">исследовать космос</div>280 </a>281 </div>282</main>283 <!-- Copyright / Designer -->284<footer class="fixed bottom-8 text-sm tracking-wider fade-copyright"285 style="color: var(--silver)">286 © NoxAeterna287 </footer>288 <div class="crymatix">сделал сайт <a href="https://t.me/crymatix" target="_blank" rel="noopener">@crymatix</a></div>289<script>290 // Generate stars291 const starField = document.getElementById('starField');292 for (let i = 0; i < 150; i++) {293 const star = document.createElement('div');294 star.className = 'star';295 star.style.left = Math.random() * 100 + '%';296 star.style.top = Math.random() * 100 + '%';297 star.style.animationDelay = Math.random() * 2 + 's';298 star.style.animationDuration = (Math.random() * 1 + 1.5) + 's, ' + (Math.random() * 3 + 5) + 's';299starField.appendChild(star);300 }301// Animate title302 anime({303 targets: '#heroTitle',304 opacity: [0, 1],305 scale: [0.9, 1],306 duration: 2500,307 delay: 800,308 easing: 'easeOutExpo'309 });310 311 anime({312 targets: '#subTitle',313 opacity: [0, 1],314 translateY: [20, 0],315 duration: 2000,316 delay: 1500,317 easing: 'easeOutExpo'318 });319 // Hide copyright / crymatix on scroll320 let lastScrollY = 0;321 const copyright = document.querySelector('.fade-copyright');322 const crymatix = document.querySelector('.crymatix');323 324 window.addEventListener('scroll', () => {325 const currentScrollY = window.scrollY;326 327 if (currentScrollY > lastScrollY && currentScrollY > 50) {328 copyright?.classList.add('hide');329 crymatix?.classList.add('hide');330 } else {331 copyright?.classList.remove('hide');332 crymatix?.classList.remove('hide');333 }334 335 lastScrollY = currentScrollY;336 });337// Mouse parallax effect338 document.addEventListener('mousemove', (e) => {339 const { clientX, clientY } = e;340 const centerX = window.innerWidth / 2;341 const centerY = window.innerHeight / 2;342 343 const moveX = (clientX - centerX) * 0.01;344 const moveY = (clientY - centerY) * 0.01;345 346 anime({347 targets: '.cosmic-dust',348 translateX: moveX,349 translateY: moveY,350 duration: 2000,351 easing: 'easeOutQuad'352 });353 });354 </script>355 <script>356 // Admin auth functionality357 const adminIcon = document.getElementById('adminIcon');358 const adminModal = document.getElementById('adminModal');359 const adminForm = document.getElementById('adminForm');360 const adminPassword = document.getElementById('adminPassword');361 const cancelAdmin = document.getElementById('cancelAdmin');362 const adminError = document.getElementById('adminError');363 // Admin password (in production, this should be handled server-side)364 const ADMIN_PASSWORD = 'NOXSA';365// Open modal366 adminIcon.addEventListener('click', () => {367 adminModal.classList.remove('opacity-0', 'pointer-events-none');368 adminModal.querySelector('div').classList.remove('scale-95');369 adminPassword.focus();370 });371 372 // Close modal373 function closeAdminModal() {374 adminModal.classList.add('opacity-0', 'pointer-events-none');375 adminModal.querySelector('div').classList.add('scale-95');376 adminForm.reset();377 adminError.classList.add('opacity-0');378 }379 380 cancelAdmin.addEventListener('click', closeAdminModal);381 382 // Handle form submission383 adminForm.addEventListener('submit', (e) => {384 e.preventDefault();385 386 if (adminPassword.value === ADMIN_PASSWORD) {387 // Successful login388 anime({389 targets: '#adminModal > div',390 scale: [1, 0.95],391 opacity: [1, 0],392 duration: 300,393 easing: 'easeInQuad',394 complete: () => {395 closeAdminModal();396 sessionStorage.setItem('adminAuthenticated', 'true');397 window.location.href = 'admin.html';398 }399});400 } else {401 // Show error402 adminError.classList.remove('opacity-0');403 adminPassword.classList.add('border-red-500');404 405 // Shake animation406 anime({407 targets: '#adminModal > div',408 translateX: [409 { value: -5, duration: 50 },410 { value: 5, duration: 50 },411 { value: -5, duration: 50 },412 { value: 0, duration: 50 }413 ],414 easing: 'easeInQuad'415 });416 417 setTimeout(() => {418 adminPassword.classList.remove('border-red-500');419 }, 1000);420 }421 });422 423 // Close on backdrop click424 adminModal.addEventListener('click', (e) => {425 if (e.target === adminModal) {426 closeAdminModal();427 }428 });429 430 // Escape key to close431 document.addEventListener('keydown', (e) => {432 if (e.key === 'Escape' && !adminModal.classList.contains('opacity-0')) {433 closeAdminModal();434 }435 });436 </script>437 <script>feather.replace()</script>438</body>439</html>440