Spaces:

menossi3d
/

test

Running

App Files Files Community

menossi3d commited on Jul 17, 2025

Commit

38d7c9d

verified ·

1 Parent(s): 211e91f

publish the site - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +632 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Test
-emoji: 🚀
-colorFrom: gray
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: test
+emoji: 🐳
+colorFrom: pink
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,632 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+{
+  "name": "solana-coin-radar",
+  "version": "1.0.0",
+  "description": "Sistema de rastreamento de moedas promissoras na Solana",
+  "scripts": {
+    "start": "serve",
+    "deploy": "netlify deploy --prod"
+  },
+  "dependencies": {
+    "chart.js": "^3.9.1",
+    "serve": "^14.2.0"
+  },
+  "devDependencies": {
+    "netlify-cli": "^12.0.0"
+  }
+}
+<!-- Add this to the root of your project as netlify.toml -->
+[build]
+  publish = "."
+  command = "echo 'No build needed for static site'"
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Solana Coin Radar - Rastreamento de Moedas Promissoras</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: {
+                        solana: {
+                            purple: '#9945FF',
+                            green: '#14F195',
+                            dark: '#0F0F2D',
+                            light: '#1E1E3F',
+                        }
+                    },
+                    fontFamily: {
+                        sans: ['Inter', 'sans-serif'],
+                    },
+                }
+            }
+        }
+    </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;
+        }
+        .coin-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(153, 69, 255, 0.3);
+        }
+        .pulse {
+            animation: pulse 2s infinite;
+        }
+        @keyframes pulse {
+            0% {
+                box-shadow: 0 0 0 0 rgba(20, 241, 149, 0.7);
+            }
+            70% {
+                box-shadow: 0 0 0 10px rgba(20, 241, 149, 0);
+            }
+            100% {
+                box-shadow: 0 0 0 0 rgba(20, 241, 149, 0);
+            }
+        }
+        .chart-container {
+            height: 300px;
+            position: relative;
+        }
+    </style>
+</head>
+<body class="min-h-screen">
+    <!-- Header -->
+    <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="#" class="text-white hover:text-solana-green transition">Início</a>
+                <a href="#" class="text-white hover:text-solana-green transition">Moedas</a>
+                <a href="#" class="text-white hover:text-solana-green transition">Análise</a>
+                <a href="#" class="text-white hover:text-solana-green transition">Alertas</a>
+                <a href="#" 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">
+                    Conectar Carteira
+                </button>
+                <button class="md:hidden text-white">
+                    <i class="fas fa-bars text-xl"></i>
+                </button>
+            </div>
+        </div>
+    </header>
+    <!-- Hero Section -->
+    <section class="py-16 px-6 bg-gradient-to-b from-solana-dark to-solana-light">
+        <div class="container mx-auto text-center">
+            <h2 class="text-4xl md:text-5xl font-bold mb-6">
+                <span class="gradient-text">Rastreie as melhores moedas</span><br>
+                da rede Solana em tempo real
+            </h2>
+            <p class="text-xl text-gray-300 max-w-3xl mx-auto mb-8">
+                Nosso sistema avançado monitora 24/7 as moedas mais promissoras da Solana, incluindo meme coins,
+                analisando redes sociais e plataformas como Reddit, X (Twitter) e pump.fun para identificar oportunidades de lucro rápido.
+            </p>
+            <div class="flex flex-col sm:flex-row justify-center gap-4">
+                <button class="bg-solana-green hover:bg-green-500 text-solana-dark px-6 py-3 rounded-lg font-bold text-lg transition flex items-center justify-center gap-2">
+                    <i class="fas fa-rocket"></i> Começar Agora
+                </button>
+                <button class="bg-solana-light hover:bg-solana-purple border border-solana-purple text-white px-6 py-3 rounded-lg font-bold text-lg transition flex items-center justify-center gap-2">
+                    <i class="fas fa-play-circle"></i> Ver Demonstração
+                </button>
+            </div>
+        </div>
+    </section>
+    <!-- Stats Section -->
+    <section class="py-12 px-6 bg-solana-light">
+        <div class="container mx-auto">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-6 text-center">
+                <div class="bg-solana-dark p-6 rounded-xl border border-solana-purple/20">
+                    <h3 class="text-4xl font-bold gradient-text mb-2" id="coins-tracked">1,248</h3>
+                    <p class="text-gray-300">Moedas Rastreadas</p>
+                </div>
+                <div class="bg-solana-dark p-6 rounded-xl border border-solana-purple/20">
+                    <h3 class="text-4xl font-bold gradient-text mb-2" id="social-mentions">24,567</h3>
+                    <p class="text-gray-300">Menções Sociais/Dia</p>
+                </div>
+                <div class="bg-solana-dark p-6 rounded-xl border border-solana-purple/20">
+                    <h3 class="text-4xl font-bold gradient-text mb-2" id="hourly-updates">24</h3>
+                    <p class="text-gray-300">Atualizações por Hora</p>
+                </div>
+                <div class="bg-solana-dark p-6 rounded-xl border border-solana-purple/20">
+                    <h3 class="text-4xl font-bold gradient-text mb-2" id="profit-coins">38</h3>
+                    <p class="text-gray-300">Moedas Lucrativas</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Top Coins Section -->
+    <section class="py-16 px-6 bg-solana-dark">
+        <div class="container mx-auto">
+            <div class="flex justify-between items-center mb-10">
+                <h2 class="text-3xl font-bold">
+                    <span class="gradient-text">Top Moedas Promissoras</span>
+                    <span class="text-sm ml-2 bg-solana-green text-solana-dark px-2 py-1 rounded-full pulse">LIVE</span>
+                </h2>
+                <div class="flex items-center space-x-2">
+                    <span class="text-gray-400">Ordenar por:</span>
+                    <select class="bg-solana-light border border-solana-purple text-white rounded-lg px-3 py-1">
+                        <option>Potencial de Lucro</option>
+                        <option>Volume 24h</option>
+                        <option>Menções Sociais</option>
+                        <option>Ganho Recente</option>
+                    </select>
+                </div>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="top-coins-container">
+                <!-- Coin cards will be inserted here by JavaScript -->
+            </div>
+            <div class="text-center mt-10">
+                <button class="bg-solana-purple hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-medium transition">
+                    Carregar Mais Moedas
+                </button>
+            </div>
+        </div>
+    </section>
+    <!-- Analysis Section -->
+    <section class="py-16 px-6 bg-solana-light">
+        <div class="container mx-auto">
+            <h2 class="text-3xl font-bold text-center mb-12">
+                <span class="gradient-text">Análise Avançada</span> de Potencial
+            </h2>
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
+                <div>
+                    <h3 class="text-2xl font-bold mb-4">Como Identificamos Moedas Promissoras</h3>
+                    <p class="text-gray-300 mb-6">
+                        Nosso sistema utiliza inteligência artificial para analisar múltiplos fatores que indicam o potencial de uma moeda:
+                    </p>
+                    <ul class="space-y-4">
+                        <li class="flex items-start">
+                            <div class="bg-solana-purple rounded-full p-2 mr-4">
+                                <i class="fas fa-chart-line text-white"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold">Padrões de Volume</h4>
+                                <p class="text-gray-400">Identificamos aumentos anormais de volume que precedem grandes movimentos de preço.</p>
+                            </div>
+                        </li>
+                        <li class="flex items-start">
+                            <div class="bg-solana-purple rounded-full p-2 mr-4">
+                                <i class="fas fa-users text-white"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold">Engajamento Social</h4>
+                                <p class="text-gray-400">Monitoramos menções, sentimentos e crescimento de comunidades no Twitter, Reddit e Telegram.</p>
+                            </div>
+                        </li>
+                        <li class="flex items-start">
+                            <div class="bg-solana-purple rounded-full p-2 mr-4">
+                                <i class="fas fa-bolt text-white"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-bold">Atividade de Whales</h4>
+                                <p class="text-gray-400">Rastreamos grandes transações que podem indicar acumulação por investidores experientes.</p>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+                <div class="bg-solana-dark p-6 rounded-xl border border-solana-purple/20">
+                    <div class="flex justify-between items-center mb-6">
+                        <h3 class="text-xl font-bold">Análise de Tendência</h3>
+                        <div class="flex space-x-2">
+                            <button class="bg-solana-purple text-white px-3 py-1 rounded text-sm">24h</button>
+                            <button class="bg-solana-light text-gray-400 px-3 py-1 rounded text-sm">7d</button>
+                            <button class="bg-solana-light text-gray-400 px-3 py-1 rounded text-sm">30d</button>
+                        </div>
+                    </div>
+                    <div class="chart-container">
+                        <canvas id="trendChart"></canvas>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Email Alerts Section -->
+    <section class="py-16 px-6 bg-gradient-to-r from-solana-dark to-solana-light">
+        <div class="container mx-auto max-w-4xl text-center">
+            <div class="bg-solana-dark p-8 rounded-xl border border-solana-purple/20">
+                <h2 class="text-3xl font-bold mb-4">
+                    <span class="gradient-text">Alertas por Email</span> das Melhores Oportunidades
+                </h2>
+                <p class="text-gray-300 mb-8">
+                    Receba diretamente no seu email as moedas mais promissoras identificadas pelo nosso sistema,
+                    com análises detalhadas e potenciais pontos de entrada.
+                </p>
+                <div class="flex flex-col sm:flex-row gap-4 max-w-2xl mx-auto">
+                    <input type="email" placeholder="Seu melhor email" class="flex-grow bg-solana-light border border-solana-purple text-white rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-solana-green">
+                    <button class="bg-solana-green hover:bg-green-500 text-solana-dark px-6 py-3 rounded-lg font-bold transition">
+                        Ativar Alertas
+                    </button>
+                </div>
+                <p class="text-sm text-gray-400 mt-4">
+                    <i class="fas fa-lock mr-1"></i> Nunca compartilharemos seu email com terceiros.
+                </p>
+            </div>
+        </div>
+    </section>
+    <!-- FAQ Section -->
+    <section class="py-16 px-6 bg-solana-dark">
+        <div class="container mx-auto max-w-4xl">
+            <h2 class="text-3xl font-bold text-center mb-12">
+                <span class="gradient-text">Perguntas Frequentes</span>
+            </h2>
+            <div class="space-y-4">
+                <div class="faq-item bg-solana-light rounded-lg overflow-hidden">
+                    <button class="faq-question w-full text-left p-4 flex justify-between items-center hover:bg-solana-purple/20 transition">
+                        <span class="font-medium">Como vocês identificam moedas com potencial de lucro rápido?</span>
+                        <i class="fas fa-chevron-down transition-transform"></i>
+                    </button>
+                    <div class="faq-answer hidden p-4 pt-0 text-gray-300">
+                        <p>Utilizamos um algoritmo proprietário que analisa múltiplos fatores incluindo: volume de negociação anormal, crescimento de comunidades sociais, atividade de grandes investidores (whales), padrões gráficos históricos e sentimentos em plataformas como Twitter e Reddit. Tudo isso combinado com machine learning para identificar padrões que historicamente precederam grandes movimentos de preço.</p>
+                    </div>
+                </div>
+                <div class="faq-item bg-solana-light rounded-lg overflow-hidden">
+                    <button class="faq-question w-full text-left p-4 flex justify-between items-center hover:bg-solana-purple/20 transition">
+                        <span class="font-medium">Com que frequência os dados são atualizados?</span>
+                        <i class="fas fa-chevron-down transition-transform"></i>
+                    </button>
+                    <div class="faq-answer hidden p-4 pt-0 text-gray-300">
+                        <p>Nosso sistema realiza análises completas a cada hora, com atualizações em tempo real para métricas críticas como volume e preço. As menções sociais são monitoradas continuamente, com relatórios consolidados gerados a cada 30 minutos.</p>
+                    </div>
+                </div>
+                <div class="faq-item bg-solana-light rounded-lg overflow-hidden">
+                    <button class="faq-question w-full text-left p-4 flex justify-between items-center hover:bg-solana-purple/20 transition">
+                        <span class="font-medium">Posso configurar alertas personalizados?</span>
+                        <i class="fas fa-chevron-down transition-transform"></i>
+                    </button>
+                    <div class="faq-answer hidden p-4 pt-0 text-gray-300">
+                        <p>Sim! Além dos alertas padrão enviados por email, oferecemos uma área de membros onde você pode configurar critérios específicos como: volume mínimo, porcentagem de aumento em determinado período, número mínimo de menções sociais e outros parâmetros técnicos. Esses alertas podem ser recebidos por email, Telegram ou notificações push em nosso aplicativo.</p>
+                    </div>
+                </div>
+                <div class="faq-item bg-solana-light rounded-lg overflow-hidden">
+                    <button class="faq-question w-full text-left p-4 flex justify-between items-center hover:bg-solana-purple/20 transition">
+                        <span class="font-medium">Vocês cobram pelo serviço?</span>
+                        <i class="fas fa-chevron-down transition-transform"></i>
+                    </button>
+                    <div class="faq-answer hidden p-4 pt-0 text-gray-300">
+                        <p>Oferecemos um plano básico gratuito com acesso às principais moedas identificadas e alertas limitados. Para acesso completo a todas as análises, histórico de desempenho e alertas personalizados, oferecemos planos premium com valores a partir de $29/mês. Todos os novos usuários têm 7 dias de acesso completo gratuitamente para testar o serviço.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <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>
+    <!-- Scripts -->
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <script>
+        // Sample data for top coins
+        const topCoins = [
+            {
+                name: "Silly Solana",
+                symbol: "SILLY",
+                price: "$0.0042",
+                change: "+1,245%",
+                volume: "$4.2M",
+                social: "🔥 2.4K",
+                potential: "Alto",
+                trending: true
+            },
+            {
+                name: "Dogelana",
+                symbol: "DOGEL",
+                price: "$0.00087",
+                change: "+876%",
+                volume: "$3.1M",
+                social: "🚀 1.8K",
+                potential: "Muito Alto",
+                trending: true
+            },
+            {
+                name: "Moonana",
+                symbol: "MOONA",
+                price: "$0.0015",
+                change: "+542%",
+                volume: "$2.7M",
+                social: "🌙 1.2K",
+                potential: "Moderado",
+                trending: false
+            },
+            {
+                name: "Bonk 2.0",
+                symbol: "BONK2",
+                price: "$0.00012",
+                change: "+1,089%",
+                volume: "$5.8M",
+                social: "💥 3.1K",
+                potential: "Extremo",
+                trending: true
+            },
+            {
+                name: "Sol Pepe",
+                symbol: "SPEPE",
+                price: "$0.0023",
+                change: "+432%",
+                volume: "$1.9M",
+                social: "🐸 890",
+                potential: "Moderado",
+                trending: false
+            },
+            {
+                name: "Wen Token",
+                symbol: "WEN",
+                price: "$0.00056",
+                change: "+1,567%",
+                volume: "$6.3M",
+                social: "⏳ 4.2K",
+                potential: "Extremo",
+                trending: true
+            }
+        ];
+        // Render top coins
+        const topCoinsContainer = document.getElementById('top-coins-container');
+        topCoins.forEach(coin => {
+            const coinCard = document.createElement('div');
+            coinCard.className = 'coin-card bg-solana-light rounded-xl border border-solana-purple/20 p-6 transition duration-300';
+            coinCard.innerHTML = `
+                <div class="flex justify-between items-start mb-4">
+                    <div>
+                        <h3 class="text-xl font-bold">${coin.name}</h3>
+                        <p class="text-gray-400">${coin.symbol}</p>
+                    </div>
+                    ${coin.trending ?
+                        '<span class="bg-solana-green/20 text-solana-green text-xs px-2 py-1 rounded-full">TENDÊNCIA</span>' :
+                        '<span class="bg-gray-600/20 text-gray-400 text-xs px-2 py-1 rounded-full">EMERGINDO</span>'}
+                </div>
+                <div class="grid grid-cols-2 gap-4 mb-6">
+                    <div>
+                        <p class="text-gray-400 text-sm">Preço</p>
+                        <p class="font-bold">${coin.price}</p>
+                    </div>
+                    <div>
+                        <p class="text-gray-400 text-sm">24h</p>
+                        <p class="font-bold ${coin.change.startsWith('+') ? 'text-green-400' : 'text-red-400'}">${coin.change}</p>
+                    </div>
+                    <div>
+                        <p class="text-gray-400 text-sm">Volume</p>
+                        <p class="font-bold">${coin.volume}</p>
+                    </div>
+                    <div>
+                        <p class="text-gray-400 text-sm">Social</p>
+                        <p class="font-bold">${coin.social}</p>
+                    </div>
+                </div>
+                <div class="flex justify-between items-center">
+                    <div>
+                        <p class="text-gray-400 text-sm">Potencial</p>
+                        <p class="font-bold ${coin.potential === 'Extremo' ? 'text-purple-400' :
+                                           coin.potential === 'Muito Alto' ? 'text-green-400' :
+                                           coin.potential === 'Alto' ? 'text-blue-400' : 'text-yellow-400'}">
+                            ${coin.potential}
+                        </p>
+                    </div>
+                    <button class="bg-solana-purple hover:bg-purple-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition">
+                        Analisar
+                    </button>
+                </div>
+            `;
+            topCoinsContainer.appendChild(coinCard);
+        });
+        // Animate stats
+        function animateValue(id, start, end, duration) {
+            const obj = document.getElementById(id);
+            let startTimestamp = null;
+            const step = (timestamp) => {
+                if (!startTimestamp) startTimestamp = timestamp;
+                const progress = Math.min((timestamp - startTimestamp) / duration, 1);
+                obj.innerHTML = Math.floor(progress * (end - start) + start);
+                if (progress < 1) {
+                    window.requestAnimationFrame(step);
+                }
+            };
+            window.requestAnimationFrame(step);
+        }
+        // Start animations when stats come into view
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                if (entry.isIntersecting) {
+                    animateValue('coins-tracked', 0, 1248, 2000);
+                    animateValue('social-mentions', 0, 24567, 2000);
+                    animateValue('hourly-updates', 0, 24, 1000);
+                    animateValue('profit-coins', 0, 38, 1500);
+                    observer.unobserve(entry.target);
+                }
+            });
+        }, {threshold: 0.5});
+        observer.observe(document.querySelector('.bg-solana-light'));
+        // FAQ functionality
+        document.querySelectorAll('.faq-question').forEach(button => {
+            button.addEventListener('click', () => {
+                const faqItem = button.closest('.faq-item');
+                const answer = faqItem.querySelector('.faq-answer');
+                const icon = button.querySelector('i');
+                // Toggle answer
+                answer.classList.toggle('hidden');
+                // Rotate icon
+                icon.classList.toggle('rotate-180');
+                // Close other open FAQs
+                document.querySelectorAll('.faq-item').forEach(item => {
+                    if (item !== faqItem) {
+                        item.querySelector('.faq-answer').classList.add('hidden');
+                        item.querySelector('i').classList.remove('rotate-180');
+                    }
+                });
+            });
+        });
+        // Chart
+        const ctx = document.getElementById('trendChart').getContext('2d');
+        const trendChart = new Chart(ctx, {
+            type: 'line',
+            data: {
+                labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '23:59'],
+                datasets: [
+                    {
+                        label: 'Moedas com Potencial',
+                        data: [12, 19, 15, 27, 34, 28, 38],
+                        borderColor: '#9945FF',
+                        backgroundColor: 'rgba(153, 69, 255, 0.1)',
+                        tension: 0.4,
+                        fill: true
+                    },
+                    {
+                        label: 'Menções Sociais (x100)',
+                        data: [8, 12, 18, 15, 22, 19, 31],
+                        borderColor: '#14F195',
+                        backgroundColor: 'rgba(20, 241, 149, 0.1)',
+                        tension: 0.4,
+                        fill: true
+                    }
+                ]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: {
+                    legend: {
+                        position: 'top',
+                        labels: {
+                            color: '#fff'
+                        }
+                    },
+                    tooltip: {
+                        mode: 'index',
+                        intersect: false
+                    }
+                },
+                scales: {
+                    x: {
+                        grid: {
+                            color: 'rgba(255, 255, 255, 0.1)'
+                        },
+                        ticks: {
+                            color: '#fff'
+                        }
+                    },
+                    y: {
+                        grid: {
+                            color: 'rgba(255, 255, 255, 0.1)'
+                        },
+                        ticks: {
+                            color: '#fff'
+                        }
+                    }
+                }
+            }
+        });
+    </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=menossi3d/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>