Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PhoenixLock Protocol</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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| phoenixRed: '#f59e0b', | |
| phoenixOrange: '#f97316', | |
| phoenixYellow: '#eab308', | |
| phoenixPurple: '#8b5cf6', | |
| phoenixBlue: '#3b82f6', | |
| phoenixGreen: '#10b981', | |
| }, | |
| fontFamily: { | |
| 'phoenix': ['"Orbitron"', 'sans-serif'], | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'float': 'float 6s ease-in-out infinite', | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-10px)' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Orbitron', sans-serif; | |
| background: linear-gradient(135deg, #1e1e2e 0%, #2d2d42 100%); | |
| color: #e2e8f0; | |
| } | |
| .phoenix-gradient { | |
| background: linear-gradient(90deg, #f59e0b 0%, #f97316 50%, #8b5cf6 100%); | |
| } | |
| .phoenix-card { | |
| background: rgba(30, 30, 46, 0.7); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); | |
| } | |
| .phoenix-badge { | |
| background: rgba(251, 191, 36, 0.2); | |
| border: 1px solid rgba(251, 191, 36, 0.3); | |
| } | |
| .flame-animation { | |
| position: relative; | |
| } | |
| .flame-animation::after { | |
| content: ''; | |
| position: absolute; | |
| top: -5px; | |
| left: 0; | |
| right: 0; | |
| height: 10px; | |
| background: linear-gradient(90deg, #f59e0b, #f97316, #8b5cf6); | |
| filter: blur(15px); | |
| animation: flicker 2s infinite alternate; | |
| } | |
| @keyframes flicker { | |
| 0% { opacity: 0.7; } | |
| 50% { opacity: 1; } | |
| 100% { opacity: 0.8; } | |
| } | |
| .code-block { | |
| font-family: 'Courier New', monospace; | |
| background: rgba(17, 24, 39, 0.8); | |
| border-left: 3px solid #f59e0b; | |
| } | |
| .timeline-item::before { | |
| content: ''; | |
| position: absolute; | |
| left: -38px; | |
| top: 0; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: #f59e0b; | |
| border: 3px solid #f97316; | |
| } | |
| .nft-preview { | |
| background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(245, 158, 11, 0.2) 100%); | |
| border: 2px dashed rgba(245, 158, 11, 0.5); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Header --> | |
| <header class="phoenix-gradient py-6 relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjA1KSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuKSIvPjwvc3ZnPg==')] opacity-20"></div> | |
| <div class="container mx-auto px-4 relative z-10"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <i class="fas fa-fire text-3xl text-white mr-3"></i> | |
| <h1 class="text-3xl font-bold text-white font-phoenix tracking-wider">PHOENIX<span class="text-phoenixYellow">LOCK</span></h1> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <button class="px-4 py-2 bg-white bg-opacity-10 hover:bg-opacity-20 text-white rounded-lg transition-all duration-300 border border-white border-opacity-20"> | |
| <i class="fas fa-book mr-2"></i> White Paper | |
| </button> | |
| <button class="px-4 py-2 bg-phoenixYellow hover:bg-phoenixOrange text-gray-900 font-bold rounded-lg transition-all duration-300 flex items-center"> | |
| <i class="fas fa-rocket mr-2"></i> Launch App | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <h2 class="text-4xl md:text-6xl font-bold text-white mb-4 font-phoenix tracking-tight"> | |
| The Ultimate <span class="text-phoenixYellow">Chain Survival</span> Protocol | |
| </h2> | |
| <p class="text-xl md:text-2xl text-white opacity-90 max-w-3xl mx-auto"> | |
| Transforming Microsoft's "18-Month Bankruptcy Theory" into a programmable on-chain survival system | |
| </p> | |
| <div class="mt-8 flex justify-center space-x-4"> | |
| <button class="px-6 py-3 bg-phoenixPurple hover:bg-phoenixBlue text-white font-bold rounded-full transition-all duration-300 flex items-center"> | |
| <i class="fas fa-play-circle mr-2"></i> Protocol Demo | |
| </button> | |
| <button class="px-6 py-3 bg-transparent hover:bg-white hover:bg-opacity-10 text-white font-bold rounded-full transition-all duration-300 border border-white border-opacity-30 flex items-center"> | |
| <i class="fas fa-chart-line mr-2"></i> Live Dashboard | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Protocol Soul Section --> | |
| <section class="py-16 container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <span class="phoenix-badge px-4 py-2 rounded-full text-phoenixYellow font-bold text-sm mb-4 inline-block">PROTOCOL SOUL</span> | |
| <h2 class="text-3xl md:text-5xl font-bold text-white mb-4 font-phoenix">Trinity Architecture</h2> | |
| <p class="text-lg text-gray-300 max-w-2xl mx-auto">Three interconnected layers that form the core of the PhoenixLock survival mechanism</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Fire Core Card --> | |
| <div class="phoenix-card rounded-xl p-6 transform hover:scale-105 transition-all duration-300 flame-animation"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-phoenixRed bg-opacity-20 flex items-center justify-center mr-4"> | |
| <i class="fas fa-fire text-phoenixRed text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white">Fire Core</h3> | |
| </div> | |
| <p class="text-gray-300 mb-6">The immutable smart contract foundation that governs the lock/release cycles</p> | |
| <div class="code-block p-4 rounded-lg mb-6 overflow-x-auto"> | |
| <pre class="text-sm text-gray-200"> | |
| <span class="text-phoenixPurple">contract</span> <span class="text-phoenixYellow">PhoenixLock</span> { | |
| <span class="text-phoenixPurple">struct</span> <span class="text-phoenixYellow">Cycle</span> { | |
| <span class="text-phoenixBlue">uint256</span> lockedAmount; | |
| <span class="text-phoenixBlue">uint256</span> ignitionTime; | |
| <span class="text-phoenixBlue">uint256</span> rebirthWindow; | |
| <span class="text-phoenixBlue">bool</span> isNirvana; | |
| } | |
| <span class="text-phoenixPurple">mapping</span>(<span class="text-phoenixBlue">address</span> => Cycle[]) <span class="text-phoenixPurple">public</span> vaults; | |
| }</pre> | |
| </div> | |
| <ul class="space-y-2 text-gray-300"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-xs text-phoenixRed mt-1 mr-2"></i> | |
| <span>Independent cycle instances for each capital lock</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-xs text-phoenixRed mt-1 mr-2"></i> | |
| <span>Wave-like unlocking (1/18 released monthly)</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Ash Layer Card --> | |
| <div class="phoenix-card rounded-xl p-6 transform hover:scale-105 transition-all duration-300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-gray-600 bg-opacity-20 flex items-center justify-center mr-4"> | |
| <i class="fas fa-layer-group text-gray-400 text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white">Ash Layer</h3> | |
| </div> | |
| <p class="text-gray-300 mb-6">The redemption layer for underperforming capital allocations</p> | |
| <div class="bg-gray-800 bg-opacity-50 p-4 rounded-lg mb-6"> | |
| <div class="flex items-center text-phoenixGreen mb-2"> | |
| <i class="fas fa-fingerprint mr-2"></i> | |
| <span class="font-bold">ZK Proof Verification</span> | |
| </div> | |
| <p class="text-sm text-gray-300">Unclaimed funds automatically flow into the Ash Pool, with partial redemption available after zero-knowledge proof verification.</p> | |
| </div> | |
| <div class="flex items-center justify-between bg-gray-900 p-3 rounded-lg"> | |
| <div> | |
| <div class="text-xs text-gray-400">Ash Pool Balance</div> | |
| <div class="font-bold text-white">4,382.54 ETH</div> | |
| </div> | |
| <button class="px-3 py-1 bg-gray-700 hover:bg-gray-600 text-xs rounded-full transition-all duration-300"> | |
| Claim | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Rebirth Oracle Card --> | |
| <div class="phoenix-card rounded-xl p-6 transform hover:scale-105 transition-all duration-300"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-phoenixBlue bg-opacity-20 flex items-center justify-center mr-4"> | |
| <i class="fas fa-eye text-phoenixBlue text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white">Rebirth Oracle</h3> | |
| </div> | |
| <p class="text-gray-300 mb-6">Continuous monitoring of three vital signs for survival assessment</p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-green-500 bg-opacity-20 flex items-center justify-center mr-3 mt-0.5"> | |
| <i class="fas fa-code-branch text-green-500 text-sm"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-white">Technical Pulse</h4> | |
| <p class="text-sm text-gray-400">GitHub commits, patent filings, R&D expenditure</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-blue-500 bg-opacity-20 flex items-center justify-center mr-3 mt-0.5"> | |
| <i class="fas fa-chart-line text-blue-500 text-sm"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-white">Financial Respiration</h4> | |
| <p class="text-sm text-gray-400">Cash flow coverage, burn rate, runway</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-purple-500 bg-opacity-20 flex items-center justify-center mr-3 mt-0.5"> | |
| <i class="fas fa-users text-purple-500 text-sm"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-white">Market Temperature</h4> | |
| <p class="text-sm text-gray-400">NPS score, customer retention, brand sentiment</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Survival Matrix Section --> | |
| <section class="py-16 bg-gray-900 bg-opacity-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <span class="phoenix-badge px-4 py-2 rounded-full text-phoenixYellow font-bold text-sm mb-4 inline-block">DECISION ENGINE</span> | |
| <h2 class="text-3xl md:text-5xl font-bold text-white mb-4 font-phoenix">Survival Game Matrix</h2> | |
| <p class="text-lg text-gray-300 max-w-2xl mx-auto">Critical decision points in the 18-month survival cycle</p> | |
| </div> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="relative"> | |
| <!-- Timeline --> | |
| <div class="absolute left-0 top-0 bottom-0 w-0.5 bg-gray-700 ml-8 md:ml-10"></div> | |
| <!-- Timeline Items --> | |
| <div class="space-y-12 relative"> | |
| <!-- Month 12 --> | |
| <div class="timeline-item pl-12 md:pl-16 relative"> | |
| <div class="phoenix-card p-6 rounded-xl"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold text-white">Month 12: Pre-Rebirth Diagnosis</h3> | |
| <span class="px-3 py-1 bg-phoenixYellow bg-opacity-20 text-phoenixYellow text-xs rounded-full">Early Warning</span> | |
| </div> | |
| <p class="text-gray-300 mb-4">Comprehensive health check with weighted scoring across all vital signs</p> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-2 py-1 bg-gray-800 text-xs rounded-full">Projection Analysis</span> | |
| <span class="px-2 py-1 bg-gray-800 text-xs rounded-full">Weak Signal Detection</span> | |
| <span class="px-2 py-1 bg-gray-800 text-xs rounded-full">Scenario Planning</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Month 15 --> | |
| <div class="timeline-item pl-12 md:pl-16 relative"> | |
| <div class="phoenix-card p-6 rounded-xl"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold text-white">Month 15: Black Swan Simulation</h3> | |
| <span class="px-3 py-1 bg-phoenixOrange bg-opacity-20 text-phoenixOrange text-xs rounded-full">Stress Test</span> | |
| </div> | |
| <p class="text-gray-300 mb-4">Extreme scenario modeling with Monte Carlo simulations</p> | |
| <div class="bg-gray-800 rounded-lg p-4 mb-4"> | |
| <div class="flex justify-between text-sm mb-2"> | |
| <span class="text-gray-400">Capital Shortfall</span> | |
| <span class="font-bold text-red-400">-18.7%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 h-2 rounded-full overflow-hidden"> | |
| <div class="bg-red-500 h-full" style="width: 18.7%"></div> | |
| </div> | |
| </div> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-2 py-1 bg-gray-800 text-xs rounded-full">Liquidity Shock</span> | |
| <span class="px-2 py-1 bg-gray-800 text-xs rounded-full">Regulatory Impact</span> | |
| <span class="px-2 py-1 bg-gray-800 text-xs rounded-full">Market Collapse</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Month 18 --> | |
| <div class="timeline-item pl-12 md:pl-16 relative"> | |
| <div class="phoenix-card p-6 rounded-xl"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold text-white">Month 18: Rebirth Judgment</h3> | |
| <span class="px-3 py-1 bg-phoenixRed bg-opacity-20 text-phoenixRed text-xs rounded-full">Final Audit</span> | |
| </div> | |
| <p class="text-gray-300 mb-4">Automatic execution of the survival contract terms</p> | |
| <div class="grid grid-cols-2 gap-4 mb-4"> | |
| <div class="bg-gray-800 rounded-lg p-3 text-center"> | |
| <div class="text-green-400 text-sm font-bold mb-1">Success</div> | |
| <div class="text-white font-bold">Funds Released</div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-3 text-center"> | |
| <div class="text-red-400 text-sm font-bold mb-1">Failure</div> | |
| <div class="text-white font-bold">Circuit Breaker</div> | |
| </div> | |
| </div> | |
| <div class="flex flex-wrap gap-2"> | |
| <span class="px-2 py-1 bg-gray-800 text-xs rounded-full">Automatic Execution</span> | |
| <span class="px-2 py-1 bg-gray-800 text-xs rounded-full">Funds Redistribution</span> | |
| <span class="px-2 py-1 bg-gray-800 text-xs rounded-full">Governance Vote</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Chain Ceremony Section --> | |
| <section class="py-16 container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <span class="phoenix-badge px-4 py-2 rounded-full text-phoenixYellow font-bold text-sm mb-4 inline-block">ON-CHAIN RITUAL</span> | |
| <h2 class="text-3xl md:text-5xl font-bold text-white mb-4 font-phoenix">Rebirth Ceremony</h2> | |
| <p class="text-lg text-gray-300 max-w-2xl mx-auto">Immortalizing survival achievements as on-chain artifacts</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8 items-center"> | |
| <!-- Phoenix NFT --> | |
| <div class="phoenix-card rounded-xl p-6"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-phoenixPurple bg-opacity-20 flex items-center justify-center mr-4"> | |
| <i class="fas fa-crown text-phoenixPurple text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white">Phoenix Fire NFT</h3> | |
| </div> | |
| <div class="nft-preview rounded-xl p-8 mb-6 flex justify-center"> | |
| <div class="relative"> | |
| <img src="https://api.dicebear.com/7.x/shapes/svg?seed=Phoenix&size=200&backgroundColor=8b5cf6,f97316,eab308" alt="Phoenix NFT" class="w-48 h-48 rounded-full mx-auto animate-float"> | |
| <div class="absolute -bottom-4 -right-4 bg-phoenixYellow text-gray-900 font-bold text-xs px-3 py-1 rounded-full"> | |
| Gen 4.2 | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-3 gap-4 text-center"> | |
| <div> | |
| <div class="text-xs text-gray-400 mb-1">Wing Brightness</div> | |
| <div class="flex justify-center"> | |
| <div class="w-12 h-1 bg-gray-700 rounded-full overflow-hidden"> | |
| <div class="h-full bg-phoenixYellow" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| <div class="text-xs mt-1 text-phoenixYellow">85% Efficiency</div> | |
| </div> | |
| <div> | |
| <div class="text-xs text-gray-400 mb-1">Flame Color</div> | |
| <div class="flex justify-center"> | |
| <div class="w-12 h-1 bg-gray-700 rounded-full overflow-hidden"> | |
| <div class="h-full bg-gradient-to-r from-phoenixRed to-phoenixPurple" style="width: 72%"></div> | |
| </div> | |
| </div> | |
| <div class="text-xs mt-1 text-phoenixPurple">+72% Ranking</div> | |
| </div> | |
| <div> | |
| <div class="text-xs text-gray-400 mb-1">Tail Feathers</div> | |
| <div class="flex justify-center space-x-1"> | |
| <i class="fas fa-feather text-phoenixOrange"></i> | |
| <i class="fas fa-feather text-phoenixOrange"></i> | |
| <i class="fas fa-feather text-phoenixOrange"></i> | |
| <i class="fas fa-feather text-phoenixOrange"></i> | |
| </div> | |
| <div class="text-xs mt-1 text-phoenixOrange">4 Cycles</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Leaderboard --> | |
| <div class="phoenix-card rounded-xl p-6 h-full"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full bg-phoenixBlue bg-opacity-20 flex items-center justify-center mr-4"> | |
| <i class="fas fa-trophy text-phoenixBlue text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white">Immortality Leaderboard</h3> | |
| </div> | |
| <div class="space-y-4"> | |
| <!-- Microsoft --> | |
| <div class="flex items-center p-3 bg-gray-800 bg-opacity-50 rounded-lg"> | |
| <div class="w-10 h-10 rounded-full bg-phoenixYellow flex items-center justify-center mr-4"> | |
| <i class="fas fa-fire text-gray-900"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="font-bold text-white">Microsoft</div> | |
| <div class="text-xs text-gray-400">32 consecutive cycles</div> | |
| </div> | |
| <div class="text-phoenixYellow font-bold">Legendary Phoenix</div> | |
| </div> | |
| <!-- Coinbase --> | |
| <div class="flex items-center p-3 bg-gray-800 bg-opacity-50 rounded-lg"> | |
| <div class="w-10 h-10 rounded-full bg-phoenixOrange flex items-center justify-center mr-4"> | |
| <i class="fas fa-fire text-gray-900"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="font-bold text-white">Coinbase</div> | |
| <div class="text-xs text-gray-400">5 consecutive cycles</div> | |
| </div> | |
| <div class="text-phoenixOrange font-bold">Adult Phoenix</div> | |
| </div> | |
| <!-- FTX --> | |
| <div class="flex items-center p-3 bg-gray-800 bg-opacity-50 rounded-lg"> | |
| <div class="w-10 h-10 rounded-full bg-gray-600 flex items-center justify-center mr-4"> | |
| <i class="fas fa-skull text-gray-300"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="font-bold text-white">FTX</div> | |
| <div class="text-xs text-gray-400">Cycle 1 failed</div> | |
| </div> | |
| <div class="text-gray-400 font-bold">Ash Specimen</div> | |
| </div> | |
| <!-- Tesla --> | |
| <div class="flex items-center p-3 bg-gray-800 bg-opacity-50 rounded-lg"> | |
| <div class="w-10 h-10 rounded-full bg-phoenixGreen flex items-center justify-center mr-4"> | |
| <i class="fas fa-bolt text-gray-900"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="font-bold text-white">Tesla</div> | |
| <div class="text-xs text-gray-400">Early release +37d</div> | |
| </div> | |
| <div class="text-phoenixGreen font-bold">Storm Phoenix</div> | |
| </div> | |
| </div> | |
| <div class="mt-6 p-4 bg-gray-900 rounded-lg"> | |
| <div class="text-sm text-gray-300 mb-2">Next Rebirth Ceremony</div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-clock text-phoenixYellow mr-2"></i> | |
| <span class="font-bold">14d 6h 23m</span> | |
| </div> | |
| <button class="px-3 py-1 bg-phoenixPurple hover:bg-phoenixBlue text-white text-xs rounded-full transition-all duration-300"> | |
| Participate | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Enterprise Section --> | |
| <section class="py-16 bg-gray-900 bg-opacity-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <span class="phoenix-badge px-4 py-2 rounded-full text-phoenixYellow font-bold text-sm mb-4 inline-block">ENTERPRISE SOLUTION</span> | |
| <h2 class="text-3xl md:text-5xl font-bold text-white mb-4 font-phoenix">Corporate Survival Toolkit</h2> | |
| <p class="text-lg text-gray-300 max-w-2xl mx-auto">Specialized implementations for organizational survival</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto"> | |
| <!-- ERC-20 --> | |
| <div class="phoenix-card rounded-xl p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-phoenixRed bg-opacity-20 flex items-center justify-center mr-4"> | |
| <i class="fab fa-ethereum text-phoenixRed text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white">Crisis-Adaptive ERC-20</h3> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-gray-400">Token Symbol</span> | |
| <span class="font-bold text-white">PHOENIX</span> | |
| </div> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-gray-400">Total Supply</span> | |
| <span class="font-bold text-white">100,000,000</span> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <span class="text-gray-400">Current Cycle</span> | |
| <span class="font-bold text-white">4/18</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-4 mb-6"> | |
| <h4 class="font-bold text-white mb-2">18-Month Decision Point</h4> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex-1"> | |
| <div class="flex items-center mb-1"> | |
| <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div> | |
| <span class="text-sm">Burn 10% for Governance</span> | |
| </div> | |
| <div class="text-xs text-gray-400">Gain voting rights and protocol influence</div> | |
| </div> | |
| <div class="text-gray-400">OR</div> | |
| <div class="flex-1"> | |
| <div class="flex items-center mb-1"> | |
| <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div> | |
| <span class="text-sm">Lock for Next Cycle</span> | |
| </div> | |
| <div class="text-xs text-gray-400">Continue survival game with existing terms</div> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full py-2 bg-phoenixRed hover:bg-phoenixOrange text-white font-bold rounded-lg transition-all duration-300"> | |
| Deploy Token Contract | |
| </button> | |
| </div> | |
| <!-- Board Plugin --> | |
| <div class="phoenix-card rounded-xl p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-phoenixBlue bg-opacity-20 flex items-center justify-center mr-4"> | |
| <i class="fas fa-users-cog text-phoenixBlue text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-white">Board Governance Plugin</h3> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex items-center text-phoenixGreen mb-4"> | |
| <i class="fas fa-plug mr-2"></i> | |
| <span class="font-bold">Snapshot Integration</span> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="w-6 h-6 rounded-full bg-gray-700 flex items-center justify-center mr-3 mt-0.5"> | |
| <i class="fas fa-check text-xs text-phoenixGreen"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-white">Minimum 3 Survival Cycles</h4> | |
| <p class="text-sm text-gray-400">Prove resilience before major decisions</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-6 h-6 rounded-full bg-gray-700 flex items-center justify-center mr-3 mt-0.5"> | |
| <i class="fas fa-check text-xs text-phoenixGreen"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-white">Ash Pool <20% Locked</h4> | |
| <p class="text-sm text-gray-400">Ensure sufficient healthy capital</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-6 h-6 rounded-full bg-gray-700 flex items-center justify-center mr-3 mt-0.5"> | |
| <i class="fas fa-check text-xs text-phoenixGreen"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-white">Oracle Consensus</h4> | |
| <p class="text-sm text-gray-400">3/5 oracles must confirm strategic safety</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-4"> | |
| <div class="text-sm text-gray-300 mb-2">Current Governance Status</div> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-2 h-2 rounded-full bg-green-500"></div> | |
| <span class="text-xs">Snapshot Connected</span> | |
| </div> | |
| <div class="text-xs text-gray-400">v2.1.8</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Case Study Section --> | |
| <section class="py-16 container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <span class="phoenix-badge px-4 py-2 rounded-full text-phoenixYellow font-bold text-sm mb-4 inline-block">PROOF OF SURVIVAL</span> | |
| <h2 class="text-3xl md:text-5xl font-bold text-white mb-4 font-phoenix">Tesla Survival Game (2018)</h2> | |
| <p class="text-lg text-gray-300 max-w-2xl mx-auto">Real-world stress test of the PhoenixLock mechanism</p> | |
| </div> | |
| <div class="max-w-4xl mx-auto phoenix-card rounded-xl overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/3 bg-gradient-to-b from-phoenixRed to-phoenixOrange p-6 flex flex-col justify-center"> | |
| <div class="text-center"> | |
| <div class="text-5xl font-bold text-white mb-2">23</div> | |
| <div class="text-white uppercase tracking-wider text-sm">Billion USD</div> | |
| <div class="border-t border-white border-opacity-30 my-4"></div> | |
| <div class="text-white text-sm">Locked in PhoenixLock Contract</div> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3 p-6"> | |
| <h3 class="text-xl font-bold text-white mb-4">Survival Conditions</h3> | |
| <div class="space-y-4 mb-6"> | |
| <div class="flex items-start"> | |
| <div class="w-6 h-6 rounded-full bg-green-500 bg-opacity-20 flex items-center justify-center mr-3 mt-0.5"> | |
| <i class="fas fa-check text-green-500 text-xs"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-white">Shanghai Factory ≥90% Complete</h4> | |
| <p class="text-sm text-gray-400">Actual completion: 97% at audit</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="w-6 h-6 rounded-full bg-green-500 bg-opacity-20 flex items-center justify-center mr-3 mt-0.5"> | |
| <i class="fas fa-check text-green-500 text-xs"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-white">Model 3 Gross Margin Positive</h4> | |
| <p class="text-sm text-gray-400">Achieved 20.1% margin</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-4 mb-6"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-gray-400">Early Release Triggered</span> | |
| <span class="font-bold text-phoenixGreen">37 Days Before Deadline</span> | |
| </div> | |
| <div class="w-full bg-gray-700 h-2 rounded-full overflow-hidden"> | |
| <div class="bg-phoenixGreen h-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex-1"> | |
| <div class="text-xs text-gray-400">Locked Value Appreciation</div> | |
| <div class="font-bold text-white">+214%</div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="text-xs text-gray-400">Phoenix NFT Score</div> | |
| <div class="font-bold text-white">9.2/10</div> | |
| </div> | |
| <div class="flex-1"> | |
| <div class="text-xs text-gray-400">Next Cycle Lock</div> | |
| <div class="font-bold text-white">42B USD</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Philosophy Section --> | |
| <section class="py-16 bg-gray-900"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <div class="max-w-3xl mx-auto"> | |
| <i class="fas fa-quote-left text-4xl text-phoenixYellow opacity-30 mb-6"></i> | |
| <blockquote class="text-2xl md:text-3xl font-bold text-white mb-8 leading-tight"> | |
| "In silicon-based civilization, death is no longer an endpoint but a version number's decimal point—PhoenixLock keeps organizations eternally iterating at v0.18" | |
| </blockquote> | |
| <div class="border-t border-gray-700 pt-8"> | |
| <div class="flex flex-wrap justify-center gap-4 mb-8"> | |
| <div class="px-4 py-2 bg-gray-800 rounded-full flex items-center"> | |
| <i class="fas fa-shield-alt text-phoenixGreen mr-2"></i> | |
| <span class="text-sm">MITRE Attack Simulation Tested</span> | |
| </div> | |
| <div class="px-4 py-2 bg-gray-800 rounded-full flex items-center"> | |
| <i class="fas fa-balance-scale text-phoenixBlue mr-2"></i> | |
| <span class="text-sm">SEC Compliance Sandbox Approved</span> | |
| </div> | |
| </div> | |
| <button class="px-8 py-4 bg-gradient-to-r from-phoenixOrange to-phoenixPurple text-white font-bold rounded-full transition-all duration-300 hover:from-phoenixPurple hover:to-phoenixOrange transform hover:scale-105"> | |
| Request Enterprise Deployment Kit | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-8 border-t border-gray-800"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <i class="fas fa-fire text-xl text-phoenixYellow mr-3"></i> | |
| <span class="text-xl font-bold text-white font-phoenix">PHOENIX<span class="text-phoenixYellow">LOCK</span></span> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300"> | |
| <i class="fab fa-discord"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300"> | |
| <i class="fab fa-medium"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-center text-gray-500 text-sm"> | |
| © 2023 PhoenixLock Protocol. All rights reserved. Version 0.18.3 | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple animation for the timeline items | |
| document.querySelectorAll('.timeline-item').forEach((item, index) => { | |
| item.style.opacity = '0'; | |
| item.style.transform = 'translateX(-20px)'; | |
| item.style.transition = `all 0.5s ease ${index * 0.2}s`; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.opacity = '1'; | |
| entry.target.style.transform = 'translateX(0)'; | |
| } | |
| }); | |
| }); | |
| observer.observe(item); | |
| }); | |
| // Phoenix fire animation for the header | |
| const header = document.querySelector('header'); | |
| let hueRotation = 0; | |
| function animateHeader() { | |
| hueRotation = (hueRotation + 0.5) % 360; | |
| header.style.filter = `hue-rotate(${hueRotation}deg)`; | |
| requestAnimationFrame(animateHeader); | |
| } | |
| animateHeader(); | |
| </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/phoenixlock" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |