Spaces:
Running
Running
Create a full anime-style website for the BIG PAPI (PAPI) meme token on the BNB Smart Chain (BEP20) blockchain.
9efed51 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Big PAPI Empire – Anime Meme Token | BNB Chain</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;600;700;800;900&display=swap'); | |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap'); | |
| :root { | |
| --pink: #ff00cc; | |
| --gold: #ffd700; | |
| --purple: #9333ea; | |
| --neon: #00ffff; | |
| --dark: #0a0a0a; | |
| } | |
| body { | |
| font-family: 'Exo 2', sans-serif; | |
| background: var(--dark); | |
| color: white; | |
| overflow-x: hidden; | |
| scroll-behavior: smooth; | |
| } | |
| h1, h2, h3, h4 { | |
| font-family: 'Orbitron', sans-serif; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, var(--pink), var(--gold), var(--neon)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-size: 200% auto; | |
| animation: gradient 2s linear infinite; | |
| } | |
| @keyframes gradient { | |
| 0% { background-position: 0% 70%; } | |
| 50% { background-position: 100% 30%; } | |
| 100% { background-position: 0% 70%; } | |
| } | |
| .glow { | |
| box-shadow: 0 0 20px var(--pink), 0 0 40px var(--purple), 0 0 60px var(--neon); | |
| } | |
| .neon-border { | |
| border: 2px solid transparent; | |
| background: linear-gradient(45deg, var(--pink), var(--gold), var(--neon)) border-box; | |
| -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); | |
| -webkit-mask-composite: xor; | |
| mask-composite: exclude; | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-10px) scale(1.03); | |
| box-shadow: 0 25px 50px rgba(255, 0, 204, 0.4); | |
| } | |
| .floating { | |
| animation: floating 3s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translate(0, 0px); } | |
| 50% { transform: translate(0, -20px); } | |
| 100% { transform: translate(0, 0px); } | |
| } | |
| .sparkle { | |
| position: absolute; | |
| width: 10px; | |
| height: 10px; | |
| background: gold; | |
| border-radius: 50%; | |
| animation: sparkle 1.5s linear infinite; | |
| } | |
| @keyframes sparkle { | |
| 0% { transform: scale(0) rotate(0deg); opacity: 1; } | |
| 100% { transform: scale(1.5) rotate(360deg); opacity: 0; } | |
| } | |
| .rooftop-scene { | |
| background: url('http://static.photos/cityscape/1200x630/42') center/cover no-repeat; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .rooftop-scene::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.2)); | |
| } | |
| .laser { | |
| position: absolute; | |
| width: 2px; | |
| height: 100vh; | |
| background: linear-gradient(to bottom, transparent, var(--neon), transparent); | |
| animation: laser 1.5s linear infinite; | |
| } | |
| @keyframes laser { | |
| 0% { transform: translateX(-100vw); opacity: 0; } | |
| 50% { opacity: 1; } | |
| 100% { transform: translateX(100vw); opacity: 0; } | |
| } | |
| .money-fall { | |
| position: absolute; | |
| width: 40px; | |
| height: 20px; | |
| background: url('http://static.photos/finance/200x200/1') center/cover; | |
| animation: money 4s linear infinite; | |
| } | |
| @keyframes money { | |
| 0% { transform: translateY(-100px) rotate(0deg); opacity: 1; } | |
| 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } | |
| } | |
| .lang-switcher { | |
| position: relative; | |
| } | |
| .lang-dropdown { | |
| display: none; | |
| position: absolute; | |
| top: 100%; | |
| right: 0; | |
| background: #111; | |
| border: 1px solid var(--pink); | |
| border-radius: 8px; | |
| padding: 8px 0; | |
| min-width: 160px; | |
| z-index: 60; | |
| } | |
| .lang-dropdown a { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 6px 12px; | |
| transition: background .2s; | |
| } | |
| .lang-dropdown a:hover { | |
| background: rgba(255, 0, 204, .15); | |
| } | |
| .lang-switcher:hover .lang-dropdown { | |
| display: block; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-black text-white"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full z-50 bg-black/80 backdrop-blur-lg border-b border-pink-500/20"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <img src="http://static.photos/abstract/200x200/1" alt="PAPI Logo" class="w-10 h-10 rounded-full glow"> | |
| <span class="text-2xl font-bold gradient-text">PAPI EMPIRE</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#presale" class="hover:text-pink-400 transition-colors">Presale</a> | |
| <a href="#tokenomics" class="hover:text-pink-400 transition-colors">Tokenomics</a> | |
| <a href="#roadmap" class="hover:text-pink-400 transition-colors">Roadmap</a> | |
| <a href="#game" class="hover:text-pink-400 transition-colors">Game</a> | |
| <a href="#team" class="hover:text-pink-400 transition-colors">Team</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button id="connectBtn" class="px-4 py-2 bg-gradient-to-r from-pink-500 to-purple-600 rounded-full font-bold hover:scale-105 transition-transform">Connect Wallet</button> | |
| <div class="lang-switcher"> | |
| <button class="flex items-center space-x-2 px-3 py-2 neon-border rounded-full"> | |
| <span id="currentLang">EN</span> | |
| <i data-feather="chevron-down"></i> | |
| </button> | |
| <div class="lang-dropdown"> | |
| <a href="#" data-lang="en"><span>🇺🇸</span> English</a> | |
| <a href="#" data-lang="es"><span>🇪🇸</span> Español</a> | |
| <a href="#" data-lang="zh"><span>🇨🇳</span> 中文</a> | |
| <a href="#" data-lang="ar"><span>🇸🇦</span> العربية</a> | |
| <a href="#" data-lang="ru"><span>🇷🇺</span> Русский</a> | |
| <a href="#" data-lang="uk"><span>🇺🇦</span> Українська</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="hero" class="min-h-screen relative flex items-center justify-center rooftop-scene"> | |
| <div id="vanta-bg" class="absolute inset-0"></div> | |
| <div class="laser" style="left: 10%; animation-delay: 0s;"></div> | |
| <div class="laser" style="left: 50%; animation-delay: .7s;"></div> | |
| <div class="laser" style="left: 80%; animation-delay: 1.4s;"></div> | |
| <div class="container mx-auto px-4 z-10 text-center"> | |
| <h1 class="text-6xl md:text-9xl font-black gradient-text mb-6 floating">BIG PAPI EMPIRE</h1> | |
| <p class="text-xl md:text-3xl mb-8 max-w-4xl mx-auto">The most explosive anime meme token on BNB Chain! Join the revolution of luxury, chaos, and crypto wealth!</p> | |
| <div class="flex flex-wrap justify-center gap-4 mb-8"> | |
| <button class="px-8 py-4 bg-gradient-to-r from-yellow-400 to-yellow-600 rounded-full font-bold text-black hover:scale-110 transition-transform glow shadow-lg">Buy PAPI</button> | |
| <button class="px-8 py-4 bg-gradient-to-r from-pink-500 to-purple-600 rounded-full font-bold hover:scale-110 transition-transform glow shadow-lg">Join Presale</button> | |
| <a href="#tokenomics" class="px-8 py-4 neon-border rounded-full font-bold hover:scale-110 transition-transform shadow-lg">View Tokenomics</a> | |
| </div> | |
| <div class="flex justify-center space-x-6"> | |
| <button class="p-3 bg-white/10 rounded-full hover:bg-white/20 transition-colors"><img src="http://static.photos/black/200x200/1" class="w-8 h-8" alt="Metamask"></button> | |
| <button class="p-3 bg-white/10 rounded-full hover:bg-white/20 transition-colors"><img src="http://static.photos/black/200x200/2" class="w-8 h-8" alt="Trust Wallet"></button> | |
| <button class="p-3 bg-white/10 rounded-full hover:bg-white/20 transition-colors"><img src="http://static.photos/black/200x200/3" class="w-8 h-8" alt="WalletConnect"></button> | |
| </div> | |
| </div> | |
| <!-- Rooftop Characters --> | |
| <div class="absolute top-20 left-10 floating"><img src="http://static.photos/people/200x200/1" class="w-24 h-24 rounded-full glow" alt="Anime Girl"></div> | |
| <div class="absolute top-40 right-20 floating" style="animation-delay: 0.5s;"><img src="http://static.photos/people/200x200/2" class="w-20 h-20 rounded-full glow" alt="Anime Girl"></div> | |
| <div class="absolute bottom-20 left-20 floating" style="animation-delay: 1s;"><img src="http://static.photos/people/200x200/3" class="w-28 h-28 rounded-full glow" alt="Big Papi"></div> | |
| <!-- Money Rain --> | |
| <div class="money-fall" style="left: 10%; animation-delay: 0s;"></div> | |
| <div class="money-fall" style="left: 30%; animation-delay: 1s;"></div> | |
| <div class="money-fall" style="left: 50%; animation-delay: 2s;"></div> | |
| <div class="money-fall" style="left: 70%; animation-delay: 1.5s;"></div> | |
| <div class="money-fall" style="left: 90%; animation-delay: 3s;"></div> | |
| </section> | |
| <!-- Presale Section --> | |
| <section id="presale" class="py-20 bg-gradient-to-b from-black to-purple-900/20"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-4xl md:text-5xl font-bold text-center gradient-text mb-12">LIVE PRESALE</h2> | |
| <div class="max-w-4xl mx-auto neon-border rounded-3xl p-8 bg-black/50 backdrop-blur-lg"> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-4">Stage 1: Early Bird</h3> | |
| <div class="space-y-4"> | |
| <div class="flex justify-between"> | |
| <span>Price:</span> | |
| <span class="font-bold text-pink-400">1 BNB = 1,000,000 PAPI</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>Progress:</span> | |
| <span class="font-bold">65%</span> | |
| </div> | |
| <div class="w-full bg-gray-700 rounded-full h-4"> | |
| <div class="bg-gradient-to-r from-pink-500 to-purple-600 h-4 rounded-full" style="width: 65%"></div> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>Remaining:</span> | |
| <span class="font-bold text-yellow-400">35,000,000 PAPI</span> | |
| </div> | |
| </div> | |
| <div class="mt-6 space-y-4"> | |
| <div class="flex space-x-4"> | |
| <input type="number" placeholder="BNB Amount" class="flex-1 p-3 bg-white/10 rounded-lg border border-pink-500/50"> | |
| <button class="px-6 py-3 bg-gradient-to-r from-pink-500 to-purple-600 rounded-lg font-bold">Buy Now</button> | |
| </div> | |
| <button class="w-full p-3 bg-white/10 rounded-lg border border-green-500/50 hover:bg-green-500/20 transition-colors">Connect Wallet</button> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-center"> | |
| <div class="text-center"> | |
| <div class="text-6xl font-black gradient-text mb-4" id="countdown">07:23:45</div> | |
| <p class="text-lg">Until Stage 2 Begins</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Tokenomics Section --> | |
| <section id="tokenomics" class="py-20 bg-gradient-to-b from-purple-900/20 to-black"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-4xl md:text-5xl font-bold text-center gradient-text mb-12">TOKENOMICS</h2> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div class="relative"> | |
| <canvas id="tokenomicsChart" width="400" height="400" class="mx-auto glow"></canvas> | |
| </div> | |
| <div class="space-y-6"> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="p-4 bg-white/5 rounded-xl border border-pink-500/30"> | |
| <h4 class="font-bold text-pink-400">Total Supply</h4> | |
| <p class="text-2xl">145B PAPI</p> | |
| </div> | |
| <div class="p-4 bg-white/5 rounded-xl border border-blue-500/30"> | |
| <h4 class="font-bold text-blue-400">Blockchain</h4> | |
| <p class="text-xl">BNB Smart Chain</p> | |
| </div> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="flex items-center space-x-3 p-3 bg-white/5 rounded-lg hover:bg-white/10 transition-colors" data-percent="40"> | |
| <div class="w-4 h-4 bg-pink-500 rounded-full"></div> | |
| <span class="flex-1">Presale</span> | |
| <span class="font-bold">40%</span> | |
| </div> | |
| <div class="flex items-center space-x-3 p-3 bg-white/5 rounded-lg hover:bg-white/10 transition-colors" data-percent="20"> | |
| <div class="w-4 h-4 bg-purple-500 rounded-full"></div> | |
| <span class="flex-1">Liquidity</span> | |
| <span class="font-bold">20%</span> | |
| </div> | |
| <div class="flex items-center space-x-3 p-3 bg-white/5 rounded-lg hover:bg-white/10 transition-colors" data-percent="15"> | |
| <div class="w-4 h-4 bg-yellow-500 rounded-full"></div> | |
| <span class="flex-1">Marketing</span> | |
| <span class="font-bold">15%</span> | |
| </div> | |
| <div class="flex items-center space-x-3 p-3 bg-white/5 rounded-lg hover:bg-white/10 transition-colors" data-percent="10"> | |
| <div class="w-4 h-4 bg-green-500 rounded-full"></div> | |
| <span class="flex-1">Game & NFT Ecosystem</span> | |
| <span class="font-bold">10%</span> | |
| </div> | |
| <div class="flex items-center space-x-3 p-3 bg-white/5 rounded-lg hover:bg-white/10 transition-colors" data-percent="10"> | |
| <div class="w-4 h-4 bg-blue-500 rounded-full"></div> | |
| <span class="flex-1">Team</span> | |
| <span class="font-bold">10%</span> | |
| </div> | |
| <div class="flex items-center space-x-3 p-3 bg-white/5 rounded-lg hover:bg-white/10 transition-colors" data-percent="5"> | |
| <div class="w-4 h-4 bg-red-500 rounded-full"></div> | |
| <span class="flex-1">Airdrop & Giveaway</span> | |
| <span class="font-bold">5%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Roadmap Section --> | |
| <section id="roadmap" class="py-20 bg-gradient-to-b from-black to-blue-900/20"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-4xl md:text-5xl font-bold text-center gradient-text mb-12">ROADMAP TO GLORY</h2> | |
| <div class="relative"> | |
| <!-- Timeline line --> | |
| <div class="absolute left-1/2 transform -translate-x-1/2 w-1 bg-gradient-to-b from-pink-500 to-blue-500 h-full"></div> | |
| <!-- Roadmap Items --> | |
| <div class="space-y-12"> | |
| <!-- Q1 2026 --> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 md:pr-12 md:text-right mb-4 md:mb-0"> | |
| <div class="card-hover neon-border rounded-2xl p-6 bg-gradient-to-r from-pink-500/20 to-purple-600/20"> | |
| <h3 class="text-2xl font-bold text-pink-400 mb-2">Q1 2026</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"><i data-feather="check-circle" class="text-green-400 mr-2"></i>Launch Telegram & Twitter</li> | |
| <li class="flex items-center"><i data-feather="check-circle" class="text-green-400 mr-2"></i>Official Website Release</li> | |
| <li class="flex items-center"><i data-feather="zap" class="text-yellow-400 mr-2"></i>Start of Presale</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12"> | |
| <div class="w-8 h-8 bg-pink-500 rounded-full glow mx-auto md:mx-0"></div> | |
| </div> | |
| </div> | |
| <!-- Q2 2026 --> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 md:pr-12 order-2 md:order-1"> | |
| <div class="w-8 h-8 bg-purple-500 rounded-full glow mx-auto md:mx-0"></div> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12 order-1 md:order-2 mb-4 md:mb-0"> | |
| <div class="card-hover neon-border rounded-2xl p-6 bg-gradient-to-r from-purple-500/20 to-blue-600/20"> | |
| <h3 class="text-2xl font-bold text-purple-400 mb-2">Q2 2026</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"><i data-feather="gift" class="text-yellow-400 mr-2"></i>Giveaway & Airdrop Campaign</li> | |
| <li class="flex items-center"><i data-feather="trending-up" class="text-green-400 mr-2"></i>Listing on PancakeSwap/Uniswap</li> | |
| <li class="flex items-center"><i data-feather="users" class="text-pink-400 mr-2"></i>Anime Artist Collaborations</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Q3 2026 --> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 md:pr-12 md:text-right mb-4 md:mb-0"> | |
| <div class="card-hover neon-border rounded-2xl p-6 bg-gradient-to-r from-blue-500/20 to-green-600/20"> | |
| <h3 class="text-2xl font-bold text-blue-400 mb-2">Q3 2026</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"><i data-feather="package" class="text-yellow-400 mr-2"></i>PAPI Empire Board Game Launch</li> | |
| <li class="flex items-center"><i data-feather="shopping-bag" class="text-purple-400 mr-2"></i>NFT Marketplace Release</li> | |
| <li class="flex items-center"><i data-feather="award" class="text-red-400 mr-2"></i>Collectible NFT Cards</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12"> | |
| <div class="w-8 h-8 bg-blue-500 rounded-full glow mx-auto md:mx-0"></div> | |
| </div> | |
| </div> | |
| <!-- Q4 2026 --> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 md:pr-12 order-2 md:order-1"> | |
| <div class="w-8 h-8 bg-green-500 rounded-full glow mx-auto md:mx-0"></div> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12 order-1 md:order-2 mb-4 md:mb-0"> | |
| <div class="card-hover neon-border rounded-2xl p-6 bg-gradient-to-r from-green-500/20 to-yellow-600/20"> | |
| <h3 class="text-2xl font-bold text-green-400 mb-2">Q4 2026</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"><i data-feather="globe" class="text-blue-400 mr-2"></i>Online Board Game Version</li> | |
| <li class="flex items-center"><i data-feather="link" class="text-purple-400 mr-2"></i>NFT Integration via Metamask</li> | |
| <li class="flex items-center"><i data-feather="music" class="text-pink-400 mr-2"></i>The Big Papi Party Live Event</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Game Section --> | |
| <section id="game" class="py-20 bg-gradient-to-b from-blue-900/20 to-black"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-4xl md:text-5xl font-bold text-center gradient-text mb-12">PAPI EMPIRE GAME</h2> | |
| <div class="grid md:grid-cols-2 gap-12 items-center"> | |
| <div class="relative"> | |
| <div class="floating" style="animation-delay: 0.2s;"> | |
| <img src="http://static.photos/gaming/400x400/1" class="w-full rounded-2xl glow" alt="Game Box"> | |
| </div> | |
| <div class="absolute -top-4 -right-4 floating" style="animation-delay: 0.7s;"> | |
| <img src="http://static.photos/gaming/200x200/1" class="w-32 h-32 rounded-xl glow" alt="NFT Card"> | |
| </div> | |
| <div class="absolute bottom-4 -left-4 floating" style="animation-delay: 1.2s;"> | |
| <img src="http://static.photos/gaming/200x200/2" class="w-28 h-28 rounded-xl glow" alt="NFT Card"> | |
| </div> | |
| </div> | |
| <div class="space-y-6"> | |
| <p class="text-lg leading-relaxed">Build your crypto empire in this strategic board game featuring collectible NFT cards! Collect girls, yachts, limos, and crypto assets to dominate the market.</p> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="p-4 bg-white/5 rounded-xl border border-pink-500/30"> | |
| <h4 class="font-bold text-pink-400">PAPI Cards</h4> | |
| <p>Legendary NFTs</p> | |
| </div> | |
| <div class="p-4 bg-white/5 rounded-xl border border-purple-500/30"> | |
| <h4 class="font-bold text-purple-400">Girls Cards</h4> | |
| <p>Character Collection</p> | |
| </div> | |
| <div class="p-4 bg-white/5 rounded-xl border border-blue-500/30"> | |
| <h4 class="font-bold text-blue-400">Luxury Cards</h4> | |
| <p>Assets & Properties</p> | |
| </div> | |
| <div class="p-4 bg-white/5 rounded-xl border border-yellow-500/30"> | |
| <h4 class="font-bold text-yellow-400">Crypto Power</h4> | |
| <p>Special Abilities</p> | |
| </div> | |
| </div> | |
| <button class="px-8 py-4 bg-gradient-to-r from-yellow-400 to-yellow-600 rounded-full font-bold text-black hover:scale-110 transition-transform glow">Mint NFT Cards</button> | |
| <div class="flex space-x-4"> | |
| <img src="http://static.photos/black/100x100/1" class="h-8" alt="BNB Chain"> | |
| <img src="http://static.photos/black/100x100/2" class="h-8" alt="OpenSea"> | |
| <img src="http://static.photos/black/100x100/3" class="h-8" alt="Marketplace"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Team Section --> | |
| <section id="team" class="py-20 bg-gradient-to-b from-black to-purple-900/20"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-4xl md:text-5xl font-bold text-center gradient-text mb-12">THE PAPI EMPIRE TEAM</h2> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Big Papi --> | |
| <div class="card-hover neon-border rounded-2xl p-6 bg-gradient-to-br from-pink-500/10 to-purple-600/10 text-center"> | |
| <img src="http://static.photos/people/200x200/4" class="w-32 h-32 rounded-full mx-auto mb-4 glow" alt="Big Papi"> | |
| <h3 class="text-xl font-bold text-pink-400">Big Papi</h3> | |
| <p class="text-yellow-400 mb-4">Founder & Visionary</p> | |
| <p class="text-sm">The mastermind behind the PAPI revolution. Crypto whale and luxury enthusiast.</p> | |
| </div> | |
| <!-- Miss Kira --> | |
| <div class="card-hover neon-border rounded-2xl p-6 bg-gradient-to-br from-purple-500/10 to-blue-600/10 text-center"> | |
| <img src="http://static.photos/people/200x200/5" class="w-32 h-32 rounded-full mx-auto mb-4 glow" alt="Miss Kira"> | |
| <h3 class="text-xl font-bold text-purple-400">Miss Kira</h3> | |
| <p class="text-pink-400 mb-4">Marketing Queen</p> | |
| <p class="text-sm">Social media wizard and community builder. Makes PAPI go viral worldwide.</p> | |
| </div> | |
| <!-- Satoshi-chan --> | |
| <div class="card-hover neon-border rounded-2xl p-6 bg-gradient-to-br from-blue-500/10 to-green-600/10 text-center"> | |
| <img src="http://static.photos/people/200x200/6" class="w-32 h-32 rounded-full mx-auto mb-4 glow" alt="Satoshi-chan"> | |
| <h3 class="text-xl font-bold text-blue-400">Satoshi-chan</h3> | |
| <p class="text-green-400 mb-4">Blockchain Developer</p> | |
| <p class="text-sm">Smart contract genius. Makes sure PAPI runs smoothly on BNB Chain.</p> | |
| </div> | |
| <!-- Luna --> | |
| <div class="card-hover neon-border rounded-2xl p-6 bg-gradient-to-br from-green-500/10 to-yellow-600/10 text-center"> | |
| <img src="http://static.photos/people/200x200/7" class="w-32 h-32 rounded-full mx-auto mb-4 glow" alt="Luna"> | |
| <h3 class="text-xl font-bold text-green-400">Luna</h3> | |
| <p class="text-yellow-400 mb-4">NFT Artist</p> | |
| <p class="text-sm">Creates stunning anime artwork. Brings the PAPI universe to life.</p> | |
| </div> | |
| <!-- CryptoNeko --> | |
| <div class="card-hover neon-border rounded-2xl p-6 bg-gradient-to-br from-yellow-500/10 to-red-600/10 text-center"> | |
| <img src="http://static.photos/people/200x200/8" class="w-32 h-32 rounded-full mx-auto mb-4 glow" alt="CryptoNeko"> | |
| <h3 class="text-xl font-bold text-yellow-400">CryptoNeko</h3> | |
| <p class="text-red-400 mb-4">Game Designer</p> | |
| <p class="text-sm">Designs addictive gameplay. Makes PAPI Empire fun and rewarding.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Smart Contract Section --> | |
| <section id="contract" class="py-20 bg-gradient-to-b from-purple-900/20 to-black"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-4xl md:text-5xl font-bold text-center gradient-text mb-12">SMART CONTRACT</h2> | |
| <div class="max-w-2xl mx-auto"> | |
| <div class="neon-border rounded-2xl p-6 bg-black/50 backdrop-blur-lg"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-xl font-bold">Contract Address</h3> | |
| <span class="text-sm text-green-400">Verified</span> | |
| </div> | |
| <div class="flex items-center space-x-4 mb-4"> | |
| <code class="flex-1 p-3 bg-white/10 rounded-lg font-mono text-sm break-all">0x742d35Cc6634C0532925a3b844Bc454e4438f44e</code> | |
| <button class="p-3 bg-white/10 rounded-lg hover:bg-white/20 transition-colors" onclick="copyContract()"> | |
| <i data-feather="copy"></i> | |
| </button> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <button class="flex-1 p-3 bg-blue-500/20 rounded-lg border border-blue-500/50 hover:bg-blue-500/30 transition-colors flex items-center justify-center space-x-2"> | |
| <i data-feather="external-link"></i> | |
| <span>View on BscScan</span> | |
| </button> | |
| <button class="flex-1 p-3 bg-green-500/20 rounded-lg border border-green-500/50 hover:bg-green-500/30 transition-colors flex items-center justify-center space-x-2"> | |
| <i data-feather="check-circle"></i> | |
| <span>Verify Contract</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-12 bg-black border-t border-pink-500/20"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <img src="http://static.photos/abstract/200x200/1" alt="PAPI Logo" class="w-8 h-8 rounded-full"> | |
| <span class="text-xl font-bold gradient-text">PAPI EMPIRE</span> | |
| </div> | |
| <p class="text-sm text-gray-400">The ultimate anime meme token experience on BNB Chain.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Quick Links</h4> | |
| <div class="space-y-2 text-sm text-gray-400"> | |
| <a href="#" class="block hover:text-pink-400">Whitepaper</a> | |
| <a href="#" class="block hover:text-pink-400">Audit Report</a> | |
| <a href="#" class="block hover:text-pink-400">How to Buy</a> | |
| <a href="#" class="block hover:text-pink-400">FAQ</a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Community</h4> | |
| <div class="space-y-2 text-sm text-gray-400"> | |
| <a href="#" class="block hover:text-pink-400">Telegram</a> | |
| <a href="#" class="block hover:text-pink-400">Twitter</a> | |
| <a href="#" class="block hover:text-pink-400">Discord</a> | |
| <a href="#" class="block hover:text-pink-400">Instagram</a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Newsletter</h4> | |
| <div class="flex space-x-2"> | |
| <input type="email" placeholder="Enter your email" class="flex-1 p-2 bg-white/10 rounded-lg border border-pink-500/50"> | |
| <button class="px-4 bg-gradient-to-r from-pink-500 to-purple-600 rounded-lg">Join</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-sm text-gray-400 mb-4 md:mb-0">© 2024 PAPI Empire. All rights reserved.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="p-2 bg-white/10 rounded-full hover:bg-pink-500 transition-colors"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="p-2 bg-white/10 rounded-full hover:bg-blue-500 transition-colors"> | |
| <i data-feather="telegram"></i> | |
| </a> | |
| <a href="#" class="p-2 bg-white/10 rounded-full hover:bg-purple-500 transition-colors"> | |
| <i data-feather="discord"></i> | |
| </a> | |
| <a href="#" class="p-2 bg-white/10 rounded-full hover:bg-red-500 transition-colors"> | |
| <i data-feather="youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0xff00cc, | |
| backgroundColor: 0x0 | |
| }); | |
| // Countdown Timer | |
| function updateCountdown() { | |
| const countdown = document.getElementById('countdown'); | |
| const now = new Date(); | |
| const target = new Date(now.getFullYear() + 1, 0, 1); // Next year | |
| const diff = target - now; | |
| const hours = Math.floor(diff / (1000 * 60 * 60)); | |
| const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); | |
| const seconds = Math.floor((diff % (1000 * 60)) / 1000); | |
| countdown.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; | |
| } | |
| setInterval(updateCountdown, 1000); | |
| updateCountdown(); | |
| // Tokenomics Chart | |
| function createTokenomicsChart() { | |
| const canvas = document.getElementById('tokenomicsChart'); | |
| const ctx = canvas.getContext('2d'); | |
| const data = [40, 20, 15, 10, 10, 5]; | |
| const colors = ['#ff00cc', '#9333ea', '#f59e0b', '#10b981', '#3b82f6', '#ef4444']; | |
| let startAngle = 0; | |
| data.forEach((value, index) => { | |
| const sliceAngle = (value / 100) * 2 * Math.PI; | |
| ctx.beginPath(); | |
| ctx.arc(200, 200, 150, startAngle, startAngle + sliceAngle); | |
| ctx.lineTo(200, 200); | |
| ctx.fillStyle = colors[index]; | |
| ctx.fill(); | |
| startAngle += sliceAngle; | |
| }); | |
| } | |
| // Copy Contract Address | |
| function copyContract() { | |
| navigator.clipboard.writeText('0x742d35Cc6634C0532925a3b844Bc454e4438f44e'); | |
| alert('Contract address copied to clipboard!'); | |
| } | |
| // Initialize animations | |
| document.addEventListener('DOMContentLoaded', function() { | |
| feather.replace(); | |
| createTokenomicsChart(); | |
| // Add sparkle effects | |
| for (let i = 0; i < 20; i++) { | |
| const sparkle = document.createElement('div'); | |
| sparkle.className = 'sparkle'; | |
| sparkle.style.left = Math.random() * 100 + 'vw'; | |
| sparkle.style.top = Math.random() * 100 + 'vh'; | |
| sparkle.style.animationDelay = Math.random() * 2 + 's'; | |
| document.body.appendChild(sparkle); | |
| } | |
| // Scroll animations | |
| anime({ | |
| targets: '.card-hover', | |
| translateY: [50, 0], | |
| opacity: [0, 1], | |
| delay: anime.stagger(100), | |
| easing: 'easeOutElastic(1, .8)' | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |