| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Recherche d'Entreprise - InfoFinder</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"> |
| <style> |
| .gradient-bg { |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
| } |
| .card-hover:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .pulse { |
| animation: pulse 2s infinite; |
| } |
| .search-mode-active { |
| background: linear-gradient(135deg, #764ba2 0%, #667eea 100%); |
| color: white; |
| } |
| @keyframes pulse { |
| 0% { |
| transform: scale(0.95); |
| box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7); |
| } |
| 70% { |
| transform: scale(1); |
| box-shadow: 0 0 0 10px rgba(102, 126, 234, 0); |
| } |
| 100% { |
| transform: scale(0.95); |
| box-shadow: 0 0 0 0 rgba(102, 126, 234, 0); |
| } |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100 font-sans"> |
| |
| <header class="gradient-bg text-white shadow-lg"> |
| <div class="container mx-auto px-4 py-6"> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-building text-2xl"></i> |
| <h1 class="text-2xl font-bold">InfoFinder</h1> |
| </div> |
| <nav class="hidden md:flex space-x-6"> |
| <a href="#" class="hover:text-gray-200 transition">Accueil</a> |
| <a href="#" class="hover:text-gray-200 transition">Entreprises</a> |
| <a href="#" class="hover:text-gray-200 transition">À propos</a> |
| <a href="#" class="hover:text-gray-200 transition">Contact</a> |
| </nav> |
| <button class="md:hidden text-xl"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="container mx-auto px-4 py-8"> |
| |
| <section class="text-center mb-12"> |
| <h2 class="text-4xl md:text-5xl font-bold text-gray-800 mb-4">Trouvez des informations sur n'importe quelle entreprise</h2> |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto">Saisissez simplement le nom d'une entreprise pour obtenir des informations détaillées sur ses activités, dirigeants, finances et plus encore.</p> |
| </section> |
|
|
| |
| <section class="max-w-3xl mx-auto mb-16"> |
| <div class="bg-white rounded-xl shadow-lg p-6"> |
| <div class="flex flex-col md:flex-row gap-4"> |
| <div class="flex-grow relative"> |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
| <input |
| type="text" |
| id="companySearch" |
| placeholder="Entrez le nom d'une entreprise (ex: Google, Amazon...)" |
| class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition" |
| > |
| </div> |
| <div class="flex flex-col md:flex-row gap-2"> |
| <button |
| id="searchBtn" |
| class="gradient-bg text-white px-6 py-3 rounded-lg font-medium hover:opacity-90 transition flex items-center justify-center space-x-2" |
| > |
| <i class="fas fa-search"></i> |
| <span>Rechercher</span> |
| </button> |
| <button |
| id="toggleSearchMode" |
| class="bg-gray-200 text-gray-800 px-4 py-3 rounded-lg font-medium hover:bg-gray-300 transition flex items-center justify-center space-x-2" |
| title="Basculer vers la recherche DeepSqueak" |
| > |
| <i class="fas fa-random"></i> |
| <span>Standard</span> |
| </button> |
| </div> |
| </div> |
| <div class="mt-4 text-sm text-gray-500 flex items-center"> |
| <i class="fas fa-info-circle mr-2"></i> |
| <span>Essayez avec des noms comme "Apple", "Total" ou "BNP Paribas"</span> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="resultsSection" class="hidden max-w-5xl mx-auto"> |
| <div class="flex justify-between items-center mb-6"> |
| <h3 class="text-2xl font-bold text-gray-800">Résultats de la recherche</h3> |
| <button id="clearResults" class="text-indigo-600 hover:text-indigo-800 flex items-center"> |
| <i class="fas fa-times mr-1"></i> |
| Effacer |
| </button> |
| </div> |
|
|
| |
| <div id="loadingState" class="hidden flex flex-col items-center justify-center py-12"> |
| <div class="pulse w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-4"> |
| <i class="fas fa-spinner fa-spin text-indigo-600 text-2xl"></i> |
| </div> |
| <p class="text-gray-600">Recherche d'informations en cours...</p> |
| </div> |
|
|
| |
| <div id="resultsContainer" class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| |
| </div> |
| </section> |
|
|
| |
| <section class="my-16"> |
| <h3 class="text-3xl font-bold text-center text-gray-800 mb-12">Pourquoi utiliser InfoFinder ?</h3> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="bg-white rounded-xl shadow-md p-6 transition card-hover"> |
| <div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center text-white mb-4"> |
| <i class="fas fa-bolt text-xl"></i> |
| </div> |
| <h4 class="text-xl font-semibold mb-2 text-gray-800">Rapide et efficace</h4> |
| <p class="text-gray-600">Obtenez des informations précises en quelques secondes seulement avec notre moteur de recherche optimisé.</p> |
| </div> |
| <div class="bg-white rounded-xl shadow-md p-6 transition card-hover"> |
| <div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center text-white mb-4"> |
| <i class="fas fa-database text-xl"></i> |
| </div> |
| <h4 class="text-xl font-semibold mb-2 text-gray-800">Base de données complète</h4> |
| <p class="text-gray-600">Accédez à des millions de fiches d'entreprises à travers le monde, mises à jour quotidiennement.</p> |
| </div> |
| <div class="bg-white rounded-xl shadow-md p-6 transition card-hover"> |
| <div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center text-white mb-4"> |
| <i class="fas fa-chart-line text-xl"></i> |
| </div> |
| <h4 class="text-xl font-semibold mb-2 text-gray-800">Analyses approfondies</h4> |
| <p class="text-gray-600">Découvrez des insights financiers, des tendances et des analyses sectorielles détaillées.</p> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| |
| <footer class="bg-gray-800 text-white py-8"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| <div> |
| <h4 class="text-xl font-bold mb-4 flex items-center"> |
| <i class="fas fa-building mr-2"></i> |
| InfoFinder |
| </h4> |
| <p class="text-gray-400">La solution ultime pour la recherche d'informations sur les entreprises.</p> |
| </div> |
| <div> |
| <h4 class="text-lg font-semibold mb-4">Navigation</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Accueil</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Recherche</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Entreprises</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-lg font-semibold mb-4">Légal</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Conditions d'utilisation</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Politique de confidentialité</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Mentions légales</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-lg font-semibold mb-4">Contact</h4> |
| <ul class="space-y-2"> |
| <li class="flex items-center text-gray-400"><i class="fas fa-envelope mr-2"></i> contact@infofinder.com</li> |
| <li class="flex items-center text-gray-400"><i class="fas fa-phone mr-2"></i> +33 1 23 45 67 89</li> |
| <li class="flex items-center text-gray-400"><i class="fas fa-map-marker-alt mr-2"></i> Paris, France</li> |
| </ul> |
| </div> |
| </div> |
| <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400"> |
| <p>© 2023 InfoFinder. Tous droits réservés.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| const searchBtn = document.getElementById('searchBtn'); |
| const companySearch = document.getElementById('companySearch'); |
| const resultsSection = document.getElementById('resultsSection'); |
| const loadingState = document.getElementById('loadingState'); |
| const resultsContainer = document.getElementById('resultsContainer'); |
| const clearResults = document.getElementById('clearResults'); |
| |
| // Search mode management |
| let isDeepSqueakMode = false; |
| const toggleSearchMode = document.getElementById('toggleSearchMode'); |
| |
| // API configuration |
| const API_KEY = 'YOUR_API_KEY'; // Replace with actual API key |
| const API_URL = 'https://company.clearbit.com/v2/companies/find'; |
| const DEEPSQUEAK_API = 'https://api.deepseek.com/v1/search'; // Example endpoint |
| |
| searchBtn.addEventListener('click', performSearch); |
| toggleSearchMode.addEventListener('click', function() { |
| isDeepSqueakMode = !isDeepSqueakMode; |
| this.classList.toggle('search-mode-active'); |
| this.querySelector('span').textContent = isDeepSqueakMode ? 'DeepSqueak' : 'Standard'; |
| this.querySelector('i').className = isDeepSqueakMode ? 'fas fa-robot' : 'fas fa-random'; |
| companySearch.placeholder = isDeepSqueakMode |
| ? "Recherche avancée DeepSqueak (ex: 'technologie IA Paris')" |
| : "Entrez le nom d'une entreprise (ex: Google, Amazon...)"; |
| }); |
| companySearch.addEventListener('keypress', function(e) { |
| if (e.key === 'Enter') { |
| performSearch(); |
| } |
| }); |
| |
| clearResults.addEventListener('click', function() { |
| resultsSection.classList.add('hidden'); |
| companySearch.value = ''; |
| resultsContainer.innerHTML = ''; |
| }); |
| |
| async function performSearch() { |
| const query = companySearch.value.trim(); |
| |
| if (isDeepSqueakMode) { |
| return performDeepSqueakSearch(query); |
| } |
| |
| if (!query) { |
| alert('Veuillez entrer un nom d\'entreprise'); |
| return; |
| } |
| |
| // Show loading state |
| resultsSection.classList.remove('hidden'); |
| loadingState.classList.remove('hidden'); |
| resultsContainer.innerHTML = ''; |
| |
| try { |
| // First try to find domain name |
| const domainResponse = await fetch(`https://autocomplete.clearbit.com/v1/companies/suggest?query=${encodeURIComponent(query)}`); |
| const domainData = await domainResponse.json(); |
| |
| if (domainData.length === 0) { |
| throw new Error('No domain found'); |
| } |
| |
| const domain = domainData[0].domain; |
| |
| // Then get company details |
| const response = await fetch(`${API_URL}?domain=${domain}`, { |
| headers: { |
| 'Authorization': `Bearer ${API_KEY}` |
| } |
| }); |
| |
| if (!response.ok) { |
| throw new Error('Company not found'); |
| } |
| |
| const companyData = await response.json(); |
| |
| // Format the company data for our display |
| const company = { |
| name: companyData.name, |
| logo: companyData.logo, |
| sector: companyData.category?.industry || 'Inconnu', |
| founded: companyData.foundedYear || 'Inconnu', |
| headquarters: companyData.geo?.city || 'Inconnu', |
| employees: companyData.metrics?.employees || 'Inconnu', |
| revenue: companyData.metrics?.annualRevenue ? `${companyData.metrics.annualRevenue.toLocaleString()}` : 'Inconnu', |
| ceo: 'Inconnu', // Most APIs don't provide CEO info |
| website: companyData.domain ? `https://${companyData.domain}` : '#', |
| description: companyData.description || 'Aucune description disponible.' |
| }; |
| |
| displayCompany(company); |
| |
| } catch (error) { |
| console.error('Error fetching company data:', error); |
| // Display not found message |
| resultsContainer.innerHTML = ` |
| <div class="col-span-full bg-white rounded-xl shadow-md p-6 text-center"> |
| <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-exclamation-triangle text-red-500 text-2xl"></i> |
| </div> |
| <h4 class="text-xl font-semibold mb-2 text-gray-800">Aucune entreprise trouvée</h4> |
| <p class="text-gray-600 mb-4">Nous n'avons pas trouvé d'informations pour "${query}". Essayez avec un autre nom.</p> |
| <div class="text-sm text-gray-500"> |
| <p class="mb-1">Suggestions :</p> |
| <ul class="flex flex-wrap justify-center gap-2"> |
| <li><button class="suggestion-btn px-3 py-1 bg-gray-100 rounded-full hover:bg-gray-200 transition">Google</button></li> |
| <li><button class="suggestion-btn px-3 py-1 bg-gray-100 rounded-full hover:bg-gray-200 transition">Apple</button></li> |
| <li><button class="suggestion-btn px-3 py-1 bg-gray-100 rounded-full hover:bg-gray-200 transition">Total</button></li> |
| <li><button class="suggestion-btn px-3 py-1 bg-gray-100 rounded-full hover:bg-gray-200 transition">BNP Paribas</button></li> |
| </ul> |
| </div> |
| </div> |
| `; |
| |
| // Add event listeners to suggestion buttons |
| document.querySelectorAll('.suggestion-btn').forEach(btn => { |
| btn.addEventListener('click', function() { |
| companySearch.value = this.textContent; |
| performSearch(); |
| }); |
| }); |
| } finally { |
| loadingState.classList.add('hidden'); |
| } |
| } |
| |
| async function performDeepSqueakSearch(query) { |
| if (!query) { |
| alert('Veuillez entrer une requête de recherche'); |
| return; |
| } |
| |
| resultsSection.classList.remove('hidden'); |
| loadingState.classList.remove('hidden'); |
| resultsContainer.innerHTML = ''; |
| |
| try { |
| // Simulate DeepSqueak API call |
| const response = await fetch(DEEPSQUEAK_API, { |
| method: 'POST', |
| headers: { |
| 'Content-Type': 'application/json', |
| 'Authorization': `Bearer ${API_KEY}` |
| }, |
| body: JSON.stringify({ |
| query: query, |
| depth: 3, // Deep search level |
| filters: { |
| industry: 'all', |
| location: 'global', |
| timeframe: 'all' |
| } |
| }) |
| }); |
| |
| if (!response.ok) { |
| throw new Error('DeepSqueak search failed'); |
| } |
| |
| const data = await response.json(); |
| displayDeepSqueakResults(data); |
| |
| } catch (error) { |
| console.error('DeepSqueak error:', error); |
| resultsContainer.innerHTML = ` |
| <div class="col-span-full bg-white rounded-xl shadow-md p-6 text-center"> |
| <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-robot text-red-500 text-2xl"></i> |
| </div> |
| <h4 class="text-xl font-semibold mb-2 text-gray-800">Recherche DeepSqueak échouée</h4> |
| <p class="text-gray-600 mb-4">Nous n'avons pas pu effectuer la recherche avancée pour "${query}".</p> |
| <p class="text-sm text-gray-500">Essayez avec des termes plus spécifiques ou vérifiez votre connexion.</p> |
| </div> |
| `; |
| } finally { |
| loadingState.classList.add('hidden'); |
| } |
| } |
| |
| function displayDeepSqueakResults(data) { |
| // Format results for display |
| resultsContainer.innerHTML = ` |
| <div class="col-span-full bg-white rounded-xl shadow-md p-6"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center text-white mr-4"> |
| <i class="fas fa-robot text-xl"></i> |
| </div> |
| <h3 class="text-2xl font-bold text-gray-800">Résultats DeepSqueak</h3> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-6"> |
| ${data.results.slice(0, 6).map(result => ` |
| <div class="border border-gray-200 rounded-lg p-4 hover:shadow-md transition"> |
| <h4 class="font-semibold text-lg text-indigo-600 mb-2">${result.title}</h4> |
| <p class="text-gray-600 text-sm mb-3">${result.description}</p> |
| <div class="flex justify-between items-center text-xs text-gray-500"> |
| <span>${result.source}</span> |
| <span>${new Date(result.date).toLocaleDateString()}</span> |
| </div> |
| </div> |
| `).join('')} |
| </div> |
| |
| <div class="mt-8 bg-gray-50 p-4 rounded-lg"> |
| <h4 class="font-semibold mb-3">Analyse DeepSqueak</h4> |
| <p class="text-gray-700 mb-2">${data.analysis.summary}</p> |
| <div class="flex flex-wrap gap-2 mt-3"> |
| ${data.analysis.tags.map(tag => ` |
| <span class="bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">${tag}</span> |
| `).join('')} |
| </div> |
| </div> |
| </div> |
| `; |
| } |
| |
| function displayCompany(company) { |
| resultsContainer.innerHTML = ` |
| <div class="col-span-full bg-white rounded-xl shadow-md p-6"> |
| <div class="flex flex-col md:flex-row gap-6"> |
| <div class="w-full md:w-1/4 flex flex-col items-center"> |
| <img src="${company.logo}" alt="${company.name} logo" class="w-32 h-32 object-contain mb-4 rounded-lg border border-gray-200 p-2"> |
| <a href="${company.website}" target="_blank" class="text-indigo-600 hover:text-indigo-800 flex items-center"> |
| <i class="fas fa-external-link-alt mr-1"></i> |
| Site web |
| </a> |
| </div> |
| <div class="w-full md:w-3/4"> |
| <h3 class="text-2xl font-bold text-gray-800 mb-2">${company.name}</h3> |
| <p class="text-gray-600 mb-4">${company.description}</p> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6"> |
| <div class="flex items-start"> |
| <div class="bg-indigo-100 p-2 rounded-lg mr-3"> |
| <i class="fas fa-industry text-indigo-600"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold text-gray-700">Secteur</h4> |
| <p class="text-gray-600">${company.sector}</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-indigo-100 p-2 rounded-lg mr-3"> |
| <i class="fas fa-calendar-alt text-indigo-600"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold text-gray-700">Fondation</h4> |
| <p class="text-gray-600">${company.founded}</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-indigo-100 p-2 rounded-lg mr-3"> |
| <i class="fas fa-map-marker-alt text-indigo-600"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold text-gray-700">Siège social</h4> |
| <p class="text-gray-600">${company.headquarters}</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-indigo-100 p-2 rounded-lg mr-3"> |
| <i class="fas fa-users text-indigo-600"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold text-gray-700">Employés</h4> |
| <p class="text-gray-600">${company.employees}</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-indigo-100 p-2 rounded-lg mr-3"> |
| <i class="fas fa-chart-line text-indigo-600"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold text-gray-700">Chiffre d'affaires</h4> |
| <p class="text-gray-600">${company.revenue}</p> |
| </div> |
| </div> |
| <div class="flex items-start"> |
| <div class="bg-indigo-100 p-2 rounded-lg mr-3"> |
| <i class="fas fa-user-tie text-indigo-600"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold text-gray-700">PDG</h4> |
| <p class="text-gray-600">${company.ceo}</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow-md p-6"> |
| <h4 class="text-xl font-semibold mb-4 text-gray-800 flex items-center"> |
| <i class="fas fa-newspaper mr-2 text-indigo-600"></i> |
| Articles récents |
| </h4> |
| <div class="space-y-4"> |
| <div class="border-b border-gray-100 pb-4"> |
| <h5 class="font-medium text-gray-800 mb-1">${company.name} annonce de nouveaux investissements</h5> |
| <p class="text-sm text-gray-500 mb-2">Publié il y a 2 jours</p> |
| <p class="text-gray-600 text-sm">${company.name} a révélé aujourd'hui son plan d'investissement de plusieurs milliards dans de nouveaux secteurs d'activité...</p> |
| </div> |
| <div class="border-b border-gray-100 pb-4"> |
| <h5 class="font-medium text-gray-800 mb-1">Interview avec le PDG ${company.ceo.split(' ')[0]}</h5> |
| <p class="text-sm text-gray-500 mb-2">Publié il y a 1 semaine</p> |
| <p class="text-gray-600 text-sm">Dans une interview exclusive, ${company.ceo} partage sa vision pour l'avenir de ${company.name} et du secteur...</p> |
| </div> |
| <div> |
| <h5 class="font-medium text-gray-800 mb-1">Résultats financiers du dernier trimestre</h5> |
| <p class="text-sm text-gray-500 mb-2">Publié il y a 3 semaines</p> |
| <p class="text-gray-600 text-sm">${company.name} a publié des résultats financiers solides pour le dernier trimestre, dépassant les attentes des analystes...</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-xl shadow-md p-6"> |
| <h4 class="text-xl font-semibold mb-4 text-gray-800 flex items-center"> |
| <i class="fas fa-chart-pie mr-2 text-indigo-600"></i> |
| Données financières |
| </h4> |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-4"> |
| <div class="bg-gray-50 p-4 rounded-lg text-center"> |
| <div class="text-2xl font-bold text-indigo-600 mb-1">${Math.floor(Math.random() * 20) + 5}%</div> |
| <div class="text-sm text-gray-500">Croissance annuelle</div> |
| </div> |
| <div class="bg-gray-50 p-4 rounded-lg text-center"> |
| <div class="text-2xl font-bold text-indigo-600 mb-1">${Math.floor(Math.random() * 50) + 50}M</div> |
| <div class="text-sm text-gray-500">Capitalisation boursière</div> |
| </div> |
| <div class="bg-gray-50 p-4 rounded-lg text-center"> |
| <div class="text-2xl font-bold text-indigo-600 mb-1">${Math.floor(Math.random() * 15) + 1}</div> |
| <div class="text-sm text-gray-500">Pays d'opération</div> |
| </div> |
| </div> |
| <div class="mt-6"> |
| <div class="flex justify-between items-center mb-2"> |
| <span class="text-sm font-medium text-gray-700">Performance (12 mois)</span> |
| <span class="text-sm font-medium ${Math.random() > 0.5 ? 'text-green-600' : 'text-red-600'}"> |
| ${Math.random() > 0.5 ? '+' : ''}${(Math.random() * 30).toFixed(2)}% |
| </span> |
| </div> |
| <div class="h-2 bg-gray-200 rounded-full overflow-hidden"> |
| <div class="h-full ${Math.random() > 0.5 ? 'bg-green-500' : 'bg-red-500'}" style="width: ${Math.random() * 100}%"></div> |
| </div> |
| </div> |
| </div> |
| `; |
| } |
| }); |
| </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=Dannylova31/dddddd" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
|
|
