Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Memecoin Radar - Détection de futures tendances crypto</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://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); | |
| color: #f8fafc; | |
| min-height: 100vh; | |
| } | |
| .coin-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3); | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .trend-up { | |
| background: linear-gradient(90deg, rgba(74,222,128,0.2) 0%, rgba(22,163,74,0.2) 100%); | |
| } | |
| .trend-down { | |
| background: linear-gradient(90deg, rgba(248,113,113,0.2) 0%, rgba(220,38,38,0.2) 100%); | |
| } | |
| .glow { | |
| text-shadow: 0 0 10px rgba(59, 130, 246, 0.7); | |
| } | |
| .wallet-connected { | |
| border: 2px solid #10b981; | |
| } | |
| #walletModal { | |
| transition: all 0.3s ease; | |
| } | |
| .modal-content { | |
| transform: translateY(20px); | |
| opacity: 0; | |
| transition: all 0.3s ease; | |
| } | |
| .modal-open .modal-content { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| .progress-bar { | |
| height: 6px; | |
| border-radius: 3px; | |
| background-color: #1e293b; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| border-radius: 3px; | |
| background: linear-gradient(90deg, var(--tw-gradient-from), var(--tw-gradient-to)); | |
| } | |
| </style> | |
| </head> | |
| <body class="antialiased"> | |
| <!-- Header --> | |
| <header class="bg-gradient-to-r from-blue-900 to-indigo-900 py-6 px-4 shadow-xl"> | |
| <div class="container mx-auto flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <i class="fas fa-coins text-yellow-400 text-4xl mr-3"></i> | |
| <h1 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-yellow-400 to-yellow-200"> | |
| Memecoin<span class="glow">Radar</span> | |
| </h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Rechercher une memecoin..." | |
| class="bg-gray-800 text-white px-4 py-2 rounded-full pl-10 focus:outline-none focus:ring-2 focus:ring-blue-500 w-64"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| <button id="connectWalletBtn" class="bg-yellow-500 hover:bg-yellow-400 text-gray-900 font-bold px-4 py-2 rounded-full transition-all flex items-center"> | |
| <i class="fas fa-wallet mr-2"></i> Connecter Wallet | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Wallet Modal --> | |
| <div id="walletModal" class="fixed inset-0 bg-black bg-opacity-70 z-50 flex items-center justify-center hidden"> | |
| <div class="modal-content bg-gray-800 rounded-xl p-8 max-w-md w-full mx-4"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-2xl font-bold">Connecter votre wallet</h3> | |
| <button id="closeModalBtn" class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-times text-xl"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <button onclick="connectWallet('metamask')" class="w-full bg-gray-700 hover:bg-gray-600 text-white px-6 py-4 rounded-lg flex items-center justify-between transition-all"> | |
| <div class="flex items-center"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/3/36/MetaMask_Fox.svg" alt="MetaMask" class="w-8 h-8 mr-3"> | |
| <span>MetaMask</span> | |
| </div> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| <button onclick="connectWallet('walletconnect')" class="w-full bg-gray-700 hover:bg-gray-600 text-white px-6 py-4 rounded-lg flex items-center justify-between transition-all"> | |
| <div class="flex items-center"> | |
| <img src="https://altcoinsbox.com/wp-content/uploads/2023/02/wallet-connect-logo.png" alt="WalletConnect" class="w-8 h-8 mr-3"> | |
| <span>WalletConnect</span> | |
| </div> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| <button onclick="connectWallet('coinbase')" class="w-full bg-gray-700 hover:bg-gray-600 text-white px-6 py-4 rounded-lg flex items-center justify-between transition-all"> | |
| <div class="flex items-center"> | |
| <img src="https://altcoinsbox.com/wp-content/uploads/2023/02/coinbase-wallet-logo.png" alt="Coinbase Wallet" class="w-8 h-8 mr-3"> | |
| <span>Coinbase Wallet</span> | |
| </div> | |
| <i class="fas fa-arrow-right"></i> | |
| </button> | |
| </div> | |
| <p class="text-gray-400 text-sm mt-6"> | |
| En connectant votre wallet, vous acceptez nos <a href="#" class="text-blue-400 hover:underline">Conditions d'utilisation</a> et notre <a href="#" class="text-blue-400 hover:underline">Politique de confidentialité</a>. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Hero Section --> | |
| <section class="py-12 px-4 bg-gradient-to-b from-blue-900/30 to-transparent"> | |
| <div class="container mx-auto text-center"> | |
| <h2 class="text-4xl md:text-6xl font-bold mb-6"> | |
| Découvrez les <span class="text-yellow-400">prochaines memecoins</span> qui vont exploser | |
| </h2> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto mb-8"> | |
| Notre algorithme analyse en temps réel Reddit, Twitter et Google Trends pour détecter les cryptos avec le plus fort potentiel de croissance. | |
| </p> | |
| <div class="flex flex-wrap justify-center gap-4 mb-12"> | |
| <button class="bg-blue-600 hover:bg-blue-500 text-white font-bold px-6 py-3 rounded-full transition-all flex items-center pulse"> | |
| <i class="fas fa-bolt mr-2"></i> Top 10 du moment | |
| </button> | |
| <button class="bg-gray-800 hover:bg-gray-700 text-white font-bold px-6 py-3 rounded-full transition-all flex items-center"> | |
| <i class="fas fa-chart-line mr-2"></i> Comment ça marche ? | |
| </button> | |
| </div> | |
| <div class="bg-gray-800/50 backdrop-blur-md rounded-xl p-6 max-w-4xl mx-auto"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> | |
| <div class="bg-gray-900/50 p-4 rounded-lg border-l-4 border-yellow-400"> | |
| <div class="text-yellow-400 text-sm mb-1">Tendance</div> | |
| <div class="text-xl font-bold">+245%</div> | |
| <div class="text-gray-400 text-xs">en 24h</div> | |
| </div> | |
| <div class="bg-gray-900/50 p-4 rounded-lg border-l-4 border-blue-400"> | |
| <div class="text-blue-400 text-sm mb-1">Nouvelles</div> | |
| <div class="text-xl font-bold">12</div> | |
| <div class="text-gray-400 text-xs">coins analysées</div> | |
| </div> | |
| <div class="bg-gray-900/50 p-4 rounded-lg border-l-4 border-green-400"> | |
| <div class="text-green-400 text-sm mb-1">Succès</div> | |
| <div class="text-xl font-bold">83%</div> | |
| <div class="text-gray-400 text-xs">de prédictions</div> | |
| </div> | |
| <div class="bg-gray-900/50 p-4 rounded-lg border-l-4 border-pink-400"> | |
| <div class="text-pink-400 text-sm mb-1">Communauté</div> | |
| <div class="text-xl font-bold">1.2M</div> | |
| <div class="text-gray-400 text-xs">membres actifs</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Main Content --> | |
| <main class="container mx-auto py-8 px-4"> | |
| <!-- Filters --> | |
| <div class="bg-gray-800/50 backdrop-blur-md rounded-xl p-4 mb-8"> | |
| <div class="flex flex-wrap items-center justify-between gap-4"> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-gray-400">Trier par :</span> | |
| <select id="sortSelect" class="bg-gray-900 text-white px-3 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <option value="potential">Potentiel (haut → bas)</option> | |
| <option value="hype">Engouement (haut → bas)</option> | |
| <option value="price">Prix (bas → haut)</option> | |
| <option value="newest">Nouveauté</option> | |
| </select> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-gray-400">Filtrer :</span> | |
| <button class="filter-btn bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded-lg" data-filter="reddit">Reddit</button> | |
| <button class="filter-btn bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded-lg" data-filter="twitter">Twitter</button> | |
| <button class="filter-btn bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded-lg" data-filter="tiktok">TikTok</button> | |
| <button class="filter-btn bg-blue-600 hover:bg-blue-500 text-white px-3 py-1 rounded-lg" data-filter="all">Tous</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Coins Grid --> | |
| <div id="coinsContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Les cartes de memecoins seront chargées dynamiquement ici --> | |
| </div> | |
| <!-- Load More --> | |
| <div class="text-center mt-10"> | |
| <button id="loadMoreBtn" class="bg-gray-800 hover:bg-gray-700 text-white font-bold px-6 py-3 rounded-full transition-all inline-flex items-center"> | |
| <i class="fas fa-sync-alt mr-2"></i> Charger plus de memecoins | |
| </button> | |
| </div> | |
| </main> | |
| <!-- How It Works --> | |
| <section class="bg-gray-900/50 py-12 px-4 mt-12"> | |
| <div class="container mx-auto"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Comment <span class="text-yellow-400">fonctionne</span> notre analyse ?</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-800 rounded-xl p-6 text-center"> | |
| <div class="bg-blue-900/20 text-blue-400 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl"> | |
| <i class="fas fa-chart-bar"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Analyse des tendances</h3> | |
| <p class="text-gray-400"> | |
| Nous scannons en temps réel Reddit, Twitter et Google Trends pour détecter les mentions anormalement élevées de certaines cryptos. | |
| </p> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-6 text-center"> | |
| <div class="bg-purple-900/20 text-purple-400 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Intelligence Artificielle</h3> | |
| <p class="text-gray-400"> | |
| Notre algorithme d'IA analyse le sentiment (positif/négatif) et la viralité pour prédire le potentiel de croissance. | |
| </p> | |
| </div> | |
| <div class="bg-gray-800 rounded-xl p-6 text-center"> | |
| <div class="bg-green-900/20 text-green-400 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Alertes en temps réel</h3> | |
| <p class="text-gray-400"> | |
| Recevez des notifications instantanées lorsque nous détectons une memecoin avec un fort potentiel de croissance. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter --> | |
| <section class="py-12 px-4 bg-gradient-to-r from-blue-900/50 to-purple-900/50"> | |
| <div class="container mx-auto max-w-4xl bg-gray-800/50 backdrop-blur-md rounded-xl p-8"> | |
| <div class="md:flex items-center justify-between"> | |
| <div class="mb-6 md:mb-0"> | |
| <h2 class="text-2xl font-bold mb-2">Ne ratez plus aucune opportunité</h2> | |
| <p class="text-gray-400">Abonnez-vous à notre newsletter pour recevoir les memecoins les plus prometteuses directement dans votre boîte mail.</p> | |
| </div> | |
| <div class="flex"> | |
| <input type="email" placeholder="Votre email" class="bg-gray-900 text-white px-4 py-3 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-yellow-500 w-full md:w-64"> | |
| <button class="bg-yellow-500 hover:bg-yellow-400 text-gray-900 font-bold px-6 py-3 rounded-r-lg transition-all"> | |
| S'abonner | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 py-8 px-4"> | |
| <div class="container mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-coins text-yellow-400 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold">Memecoin<span class="text-blue-400">Radar</span></span> | |
| </div> | |
| <p class="text-gray-400 text-sm"> | |
| La plateforme ultime pour détecter les prochaines memecoins qui vont exploser sur le marché. | |
| </p> | |
| <div class="flex space-x-4 mt-4"> | |
| <a href="#" class="text-gray-400 hover:text-blue-400"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-red-400"><i class="fab fa-reddit"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-purple-400"><i class="fab fa-discord"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-gray-300"><i class="fab fa-github"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-gray-300 font-bold mb-4">Navigation</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-yellow-400">Accueil</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-yellow-400">Top Memecoins</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-yellow-400">Comment ça marche</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-yellow-400">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-gray-300 font-bold mb-4">Ressources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-yellow-400">API</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-yellow-400">Documentation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-yellow-400">Statistiques</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-yellow-400">FAQ</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-gray-300 font-bold mb-4">Légal</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-yellow-400">Mentions légales</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-yellow-400">Politique de confidentialité</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-yellow-400">Conditions d'utilisation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-yellow-400">Avertissement</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm"> | |
| <p>© 2023 MemecoinRadar. Tous droits réservés. Les cryptomonnaies sont des investissements à haut risque.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Données des memecoins (simulées) | |
| const memecoins = [ | |
| { | |
| id: 1, | |
| name: "DogeMoon", | |
| symbol: "DOGEM", | |
| logo: "https://cryptologos.cc/logos/dogecoin-doge-logo.png", | |
| status: "trending", | |
| statusColor: "bg-green-900/50 text-green-400", | |
| potential: 92, | |
| currentPrice: "$0.00034", | |
| targetPrice: "$0.0032", | |
| socialStats: { | |
| reddit: "12.4k posts", | |
| twitter: "8.7k tweets", | |
| tiktok: "3.2M vues" | |
| }, | |
| detected: "2h", | |
| buyLink: "https://app.uniswap.org/#/swap?outputCurrency=0x123456789abcdef", | |
| colorClass: "hover:border-yellow-400/30", | |
| gradient: "from-green-400 to-green-600" | |
| }, | |
| { | |
| id: 2, | |
| name: "Pepe 2.0", | |
| symbol: "PEPE2", | |
| logo: "https://cryptologos.cc/logos/pepe-pepe-logo.png", | |
| status: "popular", | |
| statusColor: "bg-purple-900/50 text-purple-400", | |
| potential: 87, | |
| currentPrice: "$0.0000012", | |
| targetPrice: "$0.000012", | |
| socialStats: { | |
| reddit: "8.7k posts", | |
| twitter: "24.1k tweets", | |
| tiktok: "5.7M vues" | |
| }, | |
| detected: "6h", | |
| buyLink: "https://app.uniswap.org/#/swap?outputCurrency=0x987654321fedcba", | |
| colorClass: "hover:border-purple-400/30", | |
| gradient: "from-purple-400 to-purple-600" | |
| }, | |
| { | |
| id: 3, | |
| name: "Wojak Coin", | |
| symbol: "WOJAK", | |
| logo: "https://cryptologos.cc/logos/worldcoin-wld-logo.png", | |
| status: "rising", | |
| statusColor: "bg-yellow-900/50 text-yellow-400", | |
| potential: 78, | |
| currentPrice: "$0.00054", | |
| targetPrice: "$0.0021", | |
| socialStats: { | |
| reddit: "5.2k posts", | |
| twitter: "11.3k tweets", | |
| tiktok: "2.8M vues" | |
| }, | |
| detected: "1j", | |
| buyLink: "https://app.uniswap.org/#/swap?outputCurrency=0xabcdef123456789", | |
| colorClass: "hover:border-blue-400/30", | |
| gradient: "from-yellow-400 to-yellow-600" | |
| }, | |
| { | |
| id: 4, | |
| name: "Shiba Inu 2.0", | |
| symbol: "SHIB2", | |
| logo: "https://cryptologos.cc/logos/shiba-inu-shib-logo.png", | |
| status: "new", | |
| statusColor: "bg-blue-900/50 text-blue-400", | |
| potential: 85, | |
| currentPrice: "$0.0000078", | |
| targetPrice: "$0.00015", | |
| socialStats: { | |
| reddit: "7.9k posts", | |
| twitter: "18.6k tweets", | |
| tiktok: "4.3M vues" | |
| }, | |
| detected: "4h", | |
| buyLink: "https://app.uniswap.org/#/swap?outputCurrency=0x456789abcdef123", | |
| colorClass: "hover:border-green-400/30", | |
| gradient: "from-blue-400 to-blue-600" | |
| }, | |
| { | |
| id: 5, | |
| name: "Floki Inu", | |
| symbol: "FLOKI", | |
| logo: "https://cryptologos.cc/logos/floki-inu-floki-logo.png", | |
| status: "rising", | |
| statusColor: "bg-red-900/50 text-red-400", | |
| potential: 76, | |
| currentPrice: "$0.00012", | |
| targetPrice: "$0.00045", | |
| socialStats: { | |
| reddit: "6.8k posts", | |
| twitter: "15.2k tweets", | |
| tiktok: "3.9M vues" | |
| }, | |
| detected: "8h", | |
| buyLink: "https://app.uniswap.org/#/swap?outputCurrency=0x789abcdef123456", | |
| colorClass: "hover:border-red-400/30", | |
| gradient: "from-red-400 to-red-600" | |
| }, | |
| { | |
| id: 6, | |
| name: "Bonk 2.0", | |
| symbol: "BONK2", | |
| logo: "https://cryptologos.cc/logos/bonk-bonk-logo.png", | |
| status: "hot", | |
| statusColor: "bg-pink-900/50 text-pink-400", | |
| potential: 89, | |
| currentPrice: "$0.0000023", | |
| targetPrice: "$0.000021", | |
| socialStats: { | |
| reddit: "9.1k posts", | |
| twitter: "19.8k tweets", | |
| tiktok: "6.2M vues" | |
| }, | |
| detected: "3h", | |
| buyLink: "https://app.uniswap.org/#/swap?outputCurrency=0xfedcba987654321", | |
| colorClass: "hover:border-pink-400/30", | |
| gradient: "from-pink-400 to-pink-600" | |
| } | |
| ]; | |
| // Variables d'état | |
| let currentFilter = "all"; | |
| let currentSort = "potential"; | |
| let displayedCoins = 6; | |
| let walletConnected = false; | |
| // DOM Elements | |
| const coinsContainer = document.getElementById('coinsContainer'); | |
| const connectWalletBtn = document.getElementById('connectWalletBtn'); | |
| const walletModal = document.getElementById('walletModal'); | |
| const closeModalBtn = document.getElementById('closeModalBtn'); | |
| const loadMoreBtn = document.getElementById('loadMoreBtn'); | |
| const sortSelect = document.getElementById('sortSelect'); | |
| const filterButtons = document.querySelectorAll('.filter-btn'); | |
| // Initialisation | |
| document.addEventListener('DOMContentLoaded', function() { | |
| renderCoins(); | |
| // Événements | |
| connectWalletBtn.addEventListener('click', toggleWalletModal); | |
| closeModalBtn.addEventListener('click', toggleWalletModal); | |
| loadMoreBtn.addEventListener('click', loadMoreCoins); | |
| sortSelect.addEventListener('change', function() { | |
| currentSort = this.value; | |
| renderCoins(); | |
| }); | |
| filterButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| currentFilter = this.dataset.filter; | |
| updateFilterButtons(); | |
| renderCoins(); | |
| }); | |
| }); | |
| }); | |
| // Fonctions | |
| function renderCoins() { | |
| coinsContainer.innerHTML = ''; | |
| // Filtrer et trier les coins | |
| let filteredCoins = [...memecoins]; | |
| if (currentFilter !== 'all') { | |
| filteredCoins = filteredCoins.filter(coin => coin.status === currentFilter); | |
| } | |
| filteredCoins.sort((a, b) => { | |
| if (currentSort === 'potential') return b.potential - a.potential; | |
| if (currentSort === 'hype') return (b.socialStats.twitter + b.socialStats.reddit) - (a.socialStats.twitter + a.socialStats.reddit); | |
| if (currentSort === 'price') return parseFloat(a.currentPrice.replace('$', '')) - parseFloat(b.currentPrice.replace('$', '')); | |
| if (currentSort === 'newest') return new Date(a.detected) - new Date(b.detected); | |
| return 0; | |
| }); | |
| // Afficher les coins | |
| filteredCoins.slice(0, displayedCoins).forEach(coin => { | |
| coinsContainer.appendChild(createCoinCard(coin)); | |
| }); | |
| // Masquer le bouton "Charger plus" si tout est affiché | |
| loadMoreBtn.style.display = filteredCoins.length > displayedCoins ? 'inline-flex' : 'none'; | |
| } | |
| function createCoinCard(coin) { | |
| const card = document.createElement('div'); | |
| card.className = `coin-card bg-gray-800/50 backdrop-blur-md rounded-xl p-6 border border-gray-700 transition-all duration-300 ${coin.colorClass}`; | |
| card.innerHTML = ` | |
| <div class="flex justify-between items-start mb-4"> | |
| <div class="flex items-center"> | |
| <img src="${coin.logo}" alt="${coin.name}" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <h3 class="font-bold text-lg">${coin.name}</h3> | |
| <span class="text-gray-400">${coin.symbol}</span> | |
| </div> | |
| </div> | |
| <span class="${coin.statusColor} text-xs px-2 py-1 rounded-full">${getStatusText(coin.status)}</span> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between items-center mb-1"> | |
| <span class="text-gray-400">Potentiel</span> | |
| <span class="font-bold">${coin.potential}%</span> | |
| </div> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" style="width: ${coin.potential}%; --tw-gradient-from: ${coin.gradient.split(' ')[1]}; --tw-gradient-to: ${coin.gradient.split(' ')[3]}"></div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-4 mb-4"> | |
| <div class="bg-gray-900/50 p-3 rounded-lg"> | |
| <div class="text-gray-400 text-xs mb-1">Prix actuel</div> | |
| <div class="font-bold">${coin.currentPrice}</div> | |
| </div> | |
| <div class="bg-gray-900/50 p-3 rounded-lg"> | |
| <div class="text-gray-400 text-xs mb-1">Objectif</div> | |
| <div class="font-bold">${coin.targetPrice}</div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-3 gap-2 mb-6"> | |
| <div class="bg-gray-900/50 p-2 rounded text-center"> | |
| <i class="fab fa-reddit text-red-400 mb-1"></i> | |
| <div class="text-xs">${coin.socialStats.reddit}</div> | |
| </div> | |
| <div class="bg-gray-900/50 p-2 rounded text-center"> | |
| <i class="fab fa-twitter text-blue-400 mb-1"></i> | |
| <div class="text-xs">${coin.socialStats.twitter}</div> | |
| </div> | |
| <div class="bg-gray-900/50 p-2 rounded text-center"> | |
| <i class="fab fa-tiktok text-pink-400 mb-1"></i> | |
| <div class="text-xs">${coin.socialStats.tiktok}</div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-400 text-sm">Détecté il y a ${coin.detected}</span> | |
| <div class="flex space-x-2"> | |
| <button class="bg-gray-700 hover:bg-gray-600 text-white p-2 rounded-full"> | |
| <i class="fas fa-chart-line"></i> | |
| </button> | |
| <a href="${coin.buyLink}" target="_blank" class="bg-gradient-to-r ${coin.gradient} text-white px-4 py-2 rounded-full text-sm font-bold hover:opacity-90 transition-all"> | |
| Acheter | |
| </a> | |
| </div> | |
| </div> | |
| `; | |
| return card; | |
| } | |
| function getStatusText(status) { | |
| const statusMap = { | |
| 'trending': 'Tendance', | |
| 'popular': 'Populaire', | |
| 'rising': 'En hausse', | |
| 'new': 'Nouveau', | |
| 'hot': 'Hot' | |
| }; | |
| return statusMap[status] || status; | |
| } | |
| function loadMoreCoins() { | |
| displayedCoins += 6; | |
| renderCoins(); | |
| } | |
| function toggleWalletModal() { | |
| walletModal.classList.toggle('hidden'); | |
| walletModal.classList.toggle('modal-open'); | |
| if (!walletModal.classList.contains('hidden')) { | |
| document.querySelector('.modal-content').classList.add('modal-open'); | |
| } | |
| } | |
| function connectWallet(walletType) { | |
| // Simulation de connexion wallet | |
| walletConnected = true; | |
| connectWalletBtn.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Connecté'; | |
| connectWalletBtn.classList.add('wallet-connected'); | |
| toggleWalletModal(); | |
| // Afficher un message de succès | |
| alert(`Wallet ${walletType} connecté avec succès!`); | |
| } | |
| function updateFilterButtons() { | |
| filterButtons.forEach(button => { | |
| if (button.dataset.filter === currentFilter) { | |
| button.classList.remove('bg-gray-700'); | |
| button.classList.add('bg-blue-600'); | |
| } else { | |
| button.classList.remove('bg-blue-600'); | |
| button.classList.add('bg-gray-700'); | |
| } | |
| }); | |
| } | |
| </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=veron766/memcoin-future" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |