Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PhoenixLocker Protocol | Smart Treasury Management</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> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #f97316 0%, #ef4444 50%, #d946ef 100%); | |
| } | |
| .phoenix-animation { | |
| animation: phoenix-rise 3s ease-in-out infinite alternate; | |
| } | |
| @keyframes phoenix-rise { | |
| 0% { transform: translateY(0); } | |
| 100% { transform: translateY(-10px); } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white font-sans"> | |
| <div class="min-h-screen flex flex-col"> | |
| <!-- Navigation --> | |
| <nav class="py-6 px-4 sm:px-12 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-fire text-2xl text-orange-500"></i> | |
| <span class="text-xl font-bold bg-clip-text text-transparent gradient-bg">PhoenixLocker</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <main class="flex-grow flex flex-col items-center justify-center px-4 text-center"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="mb-2 text-orange-400 font-semibold">INNOVATIVE TREASURY MANAGEMENT</div> | |
| <h1 class="text-4xl sm:text-5xl md:text-6xl font-bold mb-6 leading-tight"> | |
| <span class="bg-clip-text text-transparent gradient-bg">PhoenixLocker Protocol</span> | |
| </h1> | |
| <p class="text-xl text-gray-300 mb-10 max-w-2xl mx-auto"> | |
| Automated, time-locked treasury management on Ethereum for secure fund protection. | |
| </p> | |
| <div class="flex justify-center mb-16"> | |
| <a href="app.html"> | |
| <button class="bg-orange-500 hover:bg-orange-600 px-8 py-4 rounded-xl font-bold text-lg transition transform hover:scale-105 shadow-lg shadow-orange-500/20"> | |
| Launch App <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </a> | |
| </div> | |
| <div class="relative w-full max-w-2xl mx-auto h-64 sm:h-80"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-orange-500 to-purple-600 rounded-2xl opacity-20 blur-xl"></div> | |
| <div class="relative bg-gray-800/80 backdrop-blur-sm rounded-2xl h-full flex items-center justify-center p-6 border border-gray-700 overflow-hidden"> | |
| <div class="text-left w-full"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div class="text-orange-400 font-mono">0x7f...3a4b</div> | |
| <div class="text-green-400 font-mono">$12,450.00 USDT</div> | |
| </div> | |
| <div class="h-2 bg-gray-700 rounded-full mb-6 overflow-hidden"> | |
| <div class="h-full bg-gradient-to-r from-orange-500 to-purple-600 rounded-full" style="width: 65%"></div> | |
| </div> | |
| <div class="grid grid-cols-3 gap-4 text-center"> | |
| <div class="bg-gray-700/50 p-3 rounded-lg"> | |
| <div class="text-xs text-gray-400">Daily Release</div> | |
| <div class="text-orange-400 font-mono">0.18%</div> | |
| </div> | |
| <div class="bg-gray-700/50 p-3 rounded-lg"> | |
| <div class="text-xs text-gray-400">Monthly Release</div> | |
| <div class="text-orange-400 font-mono">5.56%</div> | |
| </div> | |
| <div class="bg-gray-700/50 p-3 rounded-lg"> | |
| <div class="text-xs text-gray-400">Time Lock</div> | |
| <div class="text-orange-400 font-mono">18 Months</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute -bottom-6 -right-6 w-24 h-24 rounded-full bg-purple-600/30 blur-xl"></div> | |
| <div class="absolute -top-6 -left-6 w-24 h-24 rounded-full bg-orange-600/30 blur-xl"></div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="py-8 px-4 sm:px-12 border-t border-gray-800 mt-12"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center space-x-2 mb-4 md:mb-0"> | |
| <i class="fas fa-fire text-xl text-orange-500 phoenix-animation"></i> | |
| <span class="text-lg font-bold">PhoenixLocker Protocol</span> | |
| </div> | |
| </div> | |
| <div class="mt-6 text-center text-gray-500 text-sm"> | |
| © 2023 PhoenixLocker Protocol. All rights reserved. | |
| </div> | |
| </footer> | |
| </div> | |
| <script> | |
| // Simple animation for the CTA button | |
| document.querySelector('.bg-orange-500').addEventListener('mouseenter', function() { | |
| this.querySelector('i').classList.add('animate-bounce'); | |
| }); | |
| document.querySelector('.bg-orange-500').addEventListener('mouseleave', function() { | |
| this.querySelector('i').classList.remove('animate-bounce'); | |
| }); | |
| </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=tongxiaojun/phoenixlocker-com" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |