| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Undefined Universe</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> |
| <style> |
| @keyframes shimmer { |
| 0% { opacity: 0.3; } |
| 50% { opacity: 0.7; } |
| 100% { opacity: 0.3; } |
| } |
| .undefined-bg { |
| background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); |
| } |
| .undefined-text { |
| color: transparent; |
| background-clip: text; |
| -webkit-background-clip: text; |
| background-image: linear-gradient(90deg, #9ca3af, #6b7280, #9ca3af); |
| background-size: 200% auto; |
| animation: shimmer 3s infinite linear; |
| } |
| </style> |
| </head> |
| <body class="min-h-screen undefined-bg"> |
| <div id="vanta-globe" class="fixed inset-0 z-0"></div> |
| |
| <main class="relative z-10 min-h-screen flex flex-col items-center justify-center p-6"> |
| <div class="text-center max-w-2xl mx-auto bg-white/80 backdrop-blur-md rounded-xl shadow-2xl p-8 md:p-12"> |
| <h1 class="text-5xl md:text-7xl font-bold mb-6 undefined-text">UNDEFINED</h1> |
| <p class="text-lg md:text-xl text-gray-600 mb-8"> |
| Exploring the mysteries of the undefined universe where colors and themes dissolve into pure potential. |
| </p> |
| |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-10"> |
| <div class="bg-gradient-to-br from-gray-100 to-gray-200 h-32 rounded-lg flex items-center justify-center"> |
| <i data-feather="cpu" class="w-12 h-12 text-gray-400"></i> |
| </div> |
| <div class="bg-gradient-to-br from-gray-100 to-gray-200 h-32 rounded-lg flex items-center justify-center"> |
| <i data-feather="cloud" class="w-12 h-12 text-gray-400"></i> |
| </div> |
| <div class="bg-gradient-to-br from-gray-100 to-gray-200 h-32 rounded-lg flex items-center justify-center"> |
| <i data-feather="moon" class="w-12 h-12 text-gray-400"></i> |
| </div> |
| <div class="bg-gradient-to-br from-gray-100 to-gray-200 h-32 rounded-lg flex items-center justify-center"> |
| <i data-feather="code" class="w-12 h-12 text-gray-400"></i> |
| </div> |
| </div> |
| <div class="flex gap-4 justify-center"> |
| <button class="px-8 py-3 bg-gradient-to-r from-gray-300 to-gray-400 text-white rounded-full font-medium hover:from-gray-400 hover:to-gray-500 transition-all duration-300 flex items-center"> |
| <i data-feather="compass" class="mr-2"></i> |
| Begin Exploration |
| </button> |
| <a href="welders.html" class="px-8 py-3 bg-gradient-to-r from-blue-400 to-blue-500 text-white rounded-full font-medium hover:from-blue-500 hover:to-blue-600 transition-all duration-300 flex items-center"> |
| <i data-feather="user" class="mr-2"></i> |
| Welder Tracking |
| </a> |
| </div> |
| </div> |
| |
| <div class="mt-16 text-sm text-gray-500 flex items-center"> |
| <i data-feather="alert-circle" class="mr-2"></i> |
| <span>This experience intentionally lacks definition</span> |
| </div> |
| </main> |
|
|
| <script> |
| VANTA.GLOBE({ |
| el: "#vanta-globe", |
| mouseControls: true, |
| touchControls: true, |
| gyroControls: false, |
| minHeight: 200.00, |
| minWidth: 200.00, |
| scale: 1.00, |
| scaleMobile: 1.00, |
| color: 0xcccccc, |
| backgroundColor: 0xf8fafc, |
| size: 0.8 |
| }); |
| |
| feather.replace(); |
| |
| |
| document.querySelectorAll('.undefined-text').forEach(el => { |
| el.addEventListener('mouseover', () => { |
| el.style.animation = 'shimmer 1.5s infinite linear'; |
| }); |
| el.addEventListener('mouseout', () => { |
| el.style.animation = 'shimmer 3s infinite linear'; |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
