Spaces:
Running
Running
File size: 44,046 Bytes
dbd41b7 |
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 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 |
<!DOCTYPE html>
<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> |