| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>$100 Challenge - Solana Coin Radar</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 src="https://unpkg.com/@solana/web3.js@latest/lib/index.iife.min.js"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Inter', sans-serif; |
| background-color: #0F0F2D; |
| color: white; |
| } |
| |
| .gradient-text { |
| background: linear-gradient(90deg, #9945FF 0%, #14F195 100%); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| } |
| |
| .progress-bar { |
| height: 20px; |
| border-radius: 10px; |
| background-color: #1E1E3F; |
| overflow: hidden; |
| } |
| |
| .progress-fill { |
| height: 100%; |
| background: linear-gradient(90deg, #9945FF 0%, #14F195 100%); |
| transition: width 0.5s ease; |
| } |
| |
| .coin-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 25px rgba(153, 69, 255, 0.3); |
| } |
| </style> |
| </head> |
| <body class="min-h-screen"> |
| |
| <header class="bg-solana-dark py-4 px-6 border-b border-solana-light"> |
| <div class="container mx-auto flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <img src="https://cryptologos.cc/logos/solana-sol-logo.png" alt="Solana Logo" class="h-10 w-10"> |
| <h1 class="text-2xl font-bold gradient-text">Solana Coin Radar</h1> |
| </div> |
| <nav class="hidden md:flex space-x-6"> |
| <a href="index.html" class="text-white hover:text-solana-green transition">Início</a> |
| <a href="index.html#top-coins-container" class="text-white hover:text-solana-green transition">Moedas</a> |
| <a href="index.html" class="text-white hover:text-solana-green transition">Análise</a> |
| <a href="index.html" class="text-white hover:text-solana-green transition">Alertas</a> |
| <a href="100dollar.html" class="text-white hover:text-solana-green transition">$100 Challenge</a> |
| <a href="index.html" class="text-white hover:text-solana-green transition">Sobre</a> |
| </nav> |
| <div class="flex items-center space-x-4"> |
| <button class="bg-solana-purple hover:bg-purple-700 text-white px-4 py-2 rounded-lg font-medium transition" id="connectWallet"> |
| Conectar Carteira |
| </button> |
| <button class="md:hidden text-white"> |
| <i class="fas fa-bars text-xl"></i> |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section class="py-16 px-6"> |
| <div class="container mx-auto max-w-4xl"> |
| <div class="text-center mb-12"> |
| <h2 class="text-4xl md:text-5xl font-bold mb-4"> |
| <span class="gradient-text">$100 Challenge</span> |
| </h2> |
| <p class="text-xl text-gray-300"> |
| Transforme $100 em $1,000 em 30 dias seguindo nossas recomendações de moedas promissoras. |
| </p> |
| </div> |
|
|
| <div class="bg-solana-light rounded-xl border border-solana-purple/20 p-8 mb-8"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-xl font-bold">Seu Progresso</h3> |
| <span class="text-solana-green font-bold" id="currentAmount">$100.00</span> |
| </div> |
| <div class="progress-bar mb-2"> |
| <div class="progress-fill" id="progressFill" style="width: 10%"></div> |
| </div> |
| <div class="flex justify-between text-sm text-gray-400"> |
| <span>Dia 1 de 30</span> |
| <span>Meta: $1,000</span> |
| </div> |
| </div> |
|
|
| <div class="bg-solana-light rounded-xl border border-solana-purple/20 p-8 mb-8"> |
| <h3 class="text-xl font-bold mb-4">Moedas Recomendadas Hoje</h3> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4" id="todayCoins"> |
| |
| </div> |
| </div> |
|
|
| <div class="bg-solana-light rounded-xl border border-solana-purple/20 p-8"> |
| <h3 class="text-xl font-bold mb-4">Histórico de Transações</h3> |
| <div class="overflow-x-auto"> |
| <table class="w-full"> |
| <thead> |
| <tr class="text-left text-gray-400 border-b border-solana-purple/20"> |
| <th class="pb-2">Data</th> |
| <th class="pb-2">Moeda</th> |
| <th class="pb-2">Valor</th> |
| <th class="pb-2">Retorno</th> |
| </tr> |
| </thead> |
| <tbody id="transactionHistory"> |
| |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-solana-light py-12 px-6 border-t border-solana-purple/20"> |
| <div class="container mx-auto"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div> |
| <div class="flex items-center space-x-2 mb-4"> |
| <img src="https://cryptologos.cc/logos/solana-sol-logo.png" alt="Solana Logo" class="h-8 w-8"> |
| <h3 class="text-xl font-bold gradient-text">Solana Coin Radar</h3> |
| </div> |
| <p class="text-gray-400 mb-4"> |
| A ferramenta definitiva para identificar as moedas mais promissoras da rede Solana. |
| </p> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-400 hover:text-solana-green transition"><i class="fab fa-twitter text-xl"></i></a> |
| <a href="#" class="text-gray-400 hover:text-solana-green transition"><i class="fab fa-telegram text-xl"></i></a> |
| <a href="#" class="text-gray-400 hover:text-solana-green transition"><i class="fab fa-discord text-xl"></i></a> |
| <a href="#" class="text-gray-400 hover:text-solana-green transition"><i class="fab fa-github text-xl"></i></a> |
| </div> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-bold mb-4">Produto</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-solana-green transition">Recursos</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-solana-green transition">Planos</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-solana-green transition">API</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-solana-green transition">Demonstração</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-bold mb-4">Empresa</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-solana-green transition">Sobre Nós</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-solana-green transition">Blog</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-solana-green transition">Carreiras</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-solana-green transition">Contato</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-bold mb-4">Legal</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-solana-green transition">Termos de Uso</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-solana-green transition">Política de Privacidade</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-solana-green transition">Isenção de Responsabilidade</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-solana-green transition">Cookies</a></li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="border-t border-solana-purple/20 mt-12 pt-8 text-center text-gray-500"> |
| <p>© 2023 Solana Coin Radar. Todos os direitos reservados.</p> |
| <p class="text-sm mt-2">Este site não oferece aconselhamento financeiro. Criptomoedas são investimentos de alto risco.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.getElementById('connectWallet').addEventListener('click', async () => { |
| try { |
| if (window.solana && window.solana.isPhantom) { |
| const response = await window.solana.connect(); |
| const publicKey = response.publicKey.toString(); |
| alert(`Carteira conectada: ${publicKey.slice(0, 4)}...${publicKey.slice(-4)}`); |
| } else { |
| alert('Por favor instale a Phantom Wallet!'); |
| window.open('https://phantom.app/', '_blank'); |
| } |
| } catch (err) { |
| console.error('Erro ao conectar carteira:', err); |
| } |
| }); |
| |
| |
| const todayCoins = [ |
| { |
| name: "Sol Pepe", |
| symbol: "SPEPE", |
| price: "$0.0023", |
| change: "+432%", |
| potential: "Alto", |
| recommendation: "Comprar até $0.0025", |
| chartData: [0.0012, 0.0015, 0.0018, 0.0020, 0.0023] |
| }, |
| { |
| name: "Wen Token", |
| symbol: "WEN", |
| price: "$0.00056", |
| change: "+1,567%", |
| potential: "Extremo", |
| recommendation: "Comprar até $0.0006", |
| chartData: [0.00012, 0.00025, 0.00038, 0.00045, 0.00056] |
| } |
| ]; |
| |
| const transactionHistory = [ |
| { date: "Day 1", coin: "SPEPE", amount: "$100", return: "+42%" }, |
| { date: "Day 2", coin: "WEN", amount: "$142", return: "+68%" }, |
| { date: "Day 3", coin: "DOGEL", amount: "$239", return: "+15%" } |
| ]; |
| |
| |
| const todayCoinsContainer = document.getElementById('todayCoins'); |
| |
| todayCoins.forEach(coin => { |
| const coinCard = document.createElement('div'); |
| coinCard.className = 'coin-card bg-solana-dark rounded-lg border border-solana-purple/20 p-4 transition duration-300'; |
| |
| coinCard.innerHTML = ` |
| <div class="flex justify-between items-start mb-3"> |
| <div> |
| <h4 class="font-bold">${coin.name}</h4> |
| <p class="text-gray-400 text-sm">${coin.symbol}</p> |
| </div> |
| <span class="text-xs px-2 py-1 rounded-full ${ |
| coin.potential === 'Extremo' ? 'bg-purple-600/20 text-purple-400' : |
| 'bg-green-600/20 text-green-400' |
| }">${coin.potential}</span> |
| </div> |
| <div class="grid grid-cols-2 gap-2 mb-3 text-sm"> |
| <div> |
| <p class="text-gray-400">Preço</p> |
| <p>${coin.price}</p> |
| </div> |
| <div> |
| <p class="text-gray-400">24h</p> |
| <p class="${coin.change.startsWith('+') ? 'text-green-400' : 'text-red-400'}">${coin.change}</p> |
| </div> |
| </div> |
| <div class="mb-4"> |
| <p class="text-gray-400 text-sm mb-1">Recomendação</p> |
| <p class="text-sm">${coin.recommendation}</p> |
| </div> |
| <button class="w-full bg-solana-purple hover:bg-purple-700 text-white py-2 rounded-lg text-sm font-medium transition"> |
| Comprar Agora |
| </button> |
| `; |
| |
| todayCoinsContainer.appendChild(coinCard); |
| }); |
| |
| |
| const transactionHistoryContainer = document.getElementById('transactionHistory'); |
| |
| transactionHistory.forEach(tx => { |
| const row = document.createElement('tr'); |
| row.className = 'border-b border-solana-purple/10'; |
| |
| row.innerHTML = ` |
| <td class="py-3">${tx.date}</td> |
| <td>${tx.coin}</td> |
| <td>${tx.amount}</td> |
| <td class="${tx.return.startsWith('+') ? 'text-green-400' : 'text-red-400'}">${tx.return}</td> |
| `; |
| |
| transactionHistoryContainer.appendChild(row); |
| }); |
| |
| |
| let currentAmount = 100; |
| const progressFill = document.getElementById('progressFill'); |
| const currentAmountElement = document.getElementById('currentAmount'); |
| |
| function updateProgress() { |
| |
| const growthPercent = 5 + Math.random() * 10; |
| currentAmount *= (1 + growthPercent/100); |
| currentAmount = Math.min(currentAmount, 1000); |
| |
| const progressPercent = ((currentAmount - 100) / (1000 - 100)) * 100; |
| progressFill.style.width = `${10 + progressPercent * 0.9}%`; |
| currentAmountElement.textContent = `$${currentAmount.toFixed(2)}`; |
| |
| |
| const daysElement = document.querySelector('.progress-bar + div span:first-child'); |
| const currentDay = Math.min(Math.floor(progressPercent / 3.33) + 1, 30); |
| daysElement.textContent = `Dia ${currentDay} de 30`; |
| } |
| |
| |
| setInterval(updateProgress, 5000); |
| </script> |
| </body> |
| </html> |
