Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Turf Pro - Analyse Quinté+</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, #1e3a8a 0%, #065f46 100%); | |
| } | |
| .horse-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); | |
| } | |
| .confidence-bar { | |
| transition: width 0.5s ease-in-out; | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 1; } | |
| 50% { opacity: 0.6; } | |
| 100% { opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <!-- Header --> | |
| <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-4"> | |
| <i class="fas fa-horse-head text-3xl"></i> | |
| <h1 class="text-2xl font-bold">Turf Pro Analyzer</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <select class="bg-blue-900 text-white px-4 py-2 rounded-lg appearance-none pr-8"> | |
| <option>Français</option> | |
| <option>English</option> | |
| <option>Español</option> | |
| </select> | |
| <i class="fas fa-chevron-down absolute right-3 top-3 text-xs"></i> | |
| </div> | |
| <button class="bg-yellow-500 hover:bg-yellow-600 text-blue-900 font-bold px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-crown mr-2"></i> Premium | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Race Info --> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8"> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6"> | |
| <div> | |
| <h2 class="text-2xl font-bold text-gray-800">Quinté+ du 10/04/2024</h2> | |
| <p class="text-gray-600 flex items-center mt-2"> | |
| <i class="fas fa-map-marker-alt mr-2 text-blue-600"></i> Hippodrome de Vincennes | |
| <span class="mx-4">|</span> | |
| <i class="fas fa-clock mr-2 text-blue-600"></i> Départ à 15:25 | |
| <span class="mx-4">|</span> | |
| <i class="fas fa-ruler mr-2 text-blue-600"></i> 2,150 mètres | |
| </p> | |
| </div> | |
| <div class="mt-4 md:mt-0"> | |
| <div class="flex items-center bg-blue-50 rounded-lg p-3"> | |
| <div class="mr-4"> | |
| <div class="text-sm text-gray-500">État de la piste</div> | |
| <div class="font-bold flex items-center"> | |
| <i class="fas fa-cloud-sun mr-2 text-yellow-500"></i> Bonne | |
| </div> | |
| </div> | |
| <div class="mr-4"> | |
| <div class="text-sm text-gray-500">Météo</div> | |
| <div class="font-bold flex items-center"> | |
| <i class="fas fa-temperature-low mr-2 text-blue-400"></i> 18°C | |
| </div> | |
| </div> | |
| <div> | |
| <div class="text-sm text-gray-500">Mise à jour</div> | |
| <div class="font-bold flex items-center"> | |
| <i class="fas fa-sync-alt mr-2 text-green-500"></i> 12:45 | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Alert --> | |
| <div class="bg-yellow-50 border-l-4 border-yellow-500 p-4 mb-6"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-exclamation-circle text-yellow-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-yellow-700"> | |
| <span class="font-bold">Alerte :</span> Le cheval n°8 "Galopin" a été déclaré non-partant. Mise à jour des cotes en cours. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Generate Button --> | |
| <div class="flex justify-center mb-8"> | |
| <button id="generateBtn" class="gradient-bg hover:opacity-90 text-white font-bold py-3 px-8 rounded-full text-lg flex items-center pulse"> | |
| <i class="fas fa-magic mr-3"></i> Générer l'Analyse Pro | |
| </button> | |
| </div> | |
| <!-- Horses Table --> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">N°</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cheval</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Jockey</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Entraîneur</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Cote</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Confiance</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Conseils</th> | |
| </tr> | |
| </thead> | |
| <tbody id="horsesTable" class="bg-white divide-y divide-gray-200"> | |
| <!-- Will be populated by JavaScript --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Analysis Results --> | |
| <div id="analysisResults" class="hidden"> | |
| <!-- Top 5 Horses --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8"> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-trophy mr-3 text-yellow-500"></i> Top 5 Chevaux | |
| </h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center p-3 bg-blue-50 rounded-lg"> | |
| <div class="text-2xl font-bold text-blue-800 mr-4">5</div> | |
| <div> | |
| <div class="font-bold">Fuego</div> | |
| <div class="text-sm text-gray-600">A. Crastus / M. Lelong</div> | |
| </div> | |
| <div class="ml-auto bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-bold"> | |
| 32% victoire | |
| </div> | |
| </div> | |
| <div class="flex items-center p-3 bg-green-50 rounded-lg"> | |
| <div class="text-2xl font-bold text-green-800 mr-4">2</div> | |
| <div> | |
| <div class="font-bold">Hasting</div> | |
| <div class="text-sm text-gray-600">P. Caro / L. Dupon</div> | |
| </div> | |
| <div class="ml-auto bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm font-bold"> | |
| 28% victoire | |
| </div> | |
| </div> | |
| <div class="flex items-center p-3 bg-yellow-50 rounded-lg"> | |
| <div class="text-2xl font-bold text-yellow-800 mr-4">7</div> | |
| <div> | |
| <div class="font-bold">Viking</div> | |
| <div class="text-sm text-gray-600">M. Dor / F. Bress</div> | |
| </div> | |
| <div class="ml-auto bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm font-bold"> | |
| 25% victoire | |
| </div> | |
| </div> | |
| <div class="flex items-center p-3 bg-purple-50 rounded-lg"> | |
| <div class="text-2xl font-bold text-purple-800 mr-4">1</div> | |
| <div> | |
| <div class="font-bold">Eclair</div> | |
| <div class="text-sm text-gray-600">J. Moulin / R. Duval</div> | |
| </div> | |
| <div class="ml-auto bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm font-bold"> | |
| 22% victoire | |
| </div> | |
| </div> | |
| <div class="flex items-center p-3 bg-indigo-50 rounded-lg"> | |
| <div class="text-2xl font-bold text-indigo-800 mr-4">12</div> | |
| <div> | |
| <div class="font-bold">Tonnerre</div> | |
| <div class="text-sm text-gray-600">L. Petit / G. Martin</div> | |
| </div> | |
| <div class="ml-auto bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm font-bold"> | |
| 18% victoire | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recommended Bets --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center"> | |
| <i class="fas fa-coins mr-3 text-green-500"></i> Combinaisons Recommandées | |
| </h3> | |
| <div class="space-y-4"> | |
| <div class="p-4 bg-gradient-to-r from-blue-50 to-green-50 rounded-lg border border-blue-100"> | |
| <h4 class="font-bold text-blue-800 mb-2">Quinté+</h4> | |
| <div class="flex items-center mb-2"> | |
| <div class="text-sm text-gray-600 mr-3">Base :</div> | |
| <div class="flex space-x-2"> | |
| <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full font-bold">5</span> | |
| <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full font-bold">2</span> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="text-sm text-gray-600 mr-3">Outsiders :</div> | |
| <div class="flex space-x-2"> | |
| <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full font-bold">7</span> | |
| <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full font-bold">1</span> | |
| <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full font-bold">12</span> | |
| </div> | |
| </div> | |
| <div class="mt-3 text-sm text-gray-700"> | |
| <i class="fas fa-lightbulb text-yellow-500 mr-1"></i> Jeu conseillé : 2-5-7-1-12 | |
| </div> | |
| </div> | |
| <div class="p-4 bg-gradient-to-r from-purple-50 to-pink-50 rounded-lg border border-purple-100"> | |
| <h4 class="font-bold text-purple-800 mb-2">Tiercé</h4> | |
| <div class="flex items-center mb-2"> | |
| <div class="text-sm text-gray-600 mr-3">Sélection :</div> | |
| <div class="flex space-x-2"> | |
| <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full font-bold">5</span> | |
| <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full font-bold">2</span> | |
| <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full font-bold">7</span> | |
| </div> | |
| </div> | |
| <div class="mt-3 text-sm text-gray-700"> | |
| <i class="fas fa-lightbulb text-yellow-500 mr-1"></i> Ordre probable : 5-2-7 | |
| </div> | |
| </div> | |
| <div class="p-4 bg-gradient-to-r from-yellow-50 to-orange-50 rounded-lg border border-yellow-100"> | |
| <h4 class="font-bold text-yellow-800 mb-2">Simple Gagnant</h4> | |
| <div class="flex items-center"> | |
| <div class="text-sm text-gray-600 mr-3">Meilleur choix :</div> | |
| <div class="flex space-x-2"> | |
| <span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full font-bold">5</span> | |
| <span class="text-sm text-gray-600">(Fuego)</span> | |
| </div> | |
| </div> | |
| <div class="mt-3 text-sm text-gray-700"> | |
| <i class="fas fa-lightbulb text-yellow-500 mr-1"></i> Cote estimée : 4.5/1 | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Performance Charts --> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-6 flex items-center"> | |
| <i class="fas fa-chart-line mr-3 text-blue-500"></i> Analyse de Performance | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> | |
| <div> | |
| <h4 class="font-bold text-gray-700 mb-4">Top 3 Chevaux - Dernières Courses</h4> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="text-sm font-medium text-gray-700">Fuego (n°5)</div> | |
| <div class="text-xs text-gray-500">5 dernières courses</div> | |
| </div> | |
| <div class="flex space-x-1 mb-6"> | |
| <div class="h-8 w-full bg-green-500 rounded flex items-center justify-center text-white text-xs font-bold">1</div> | |
| <div class="h-8 w-full bg-green-500 rounded flex items-center justify-center text-white text-xs font-bold">2</div> | |
| <div class="h-8 w-full bg-yellow-500 rounded flex items-center justify-center text-white text-xs font-bold">4</div> | |
| <div class="h-8 w-full bg-green-500 rounded flex items-center justify-center text-white text-xs font-bold">1</div> | |
| <div class="h-8 w-full bg-red-500 rounded flex items-center justify-center text-white text-xs font-bold">7</div> | |
| </div> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="text-sm font-medium text-gray-700">Hasting (n°2)</div> | |
| <div class="text-xs text-gray-500">5 dernières courses</div> | |
| </div> | |
| <div class="flex space-x-1 mb-6"> | |
| <div class="h-8 w-full bg-green-500 rounded flex items-center justify-center text-white text-xs font-bold">2</div> | |
| <div class="h-8 w-full bg-yellow-500 rounded flex items-center justify-center text-white text-xs font-bold">3</div> | |
| <div class="h-8 w-full bg-green-500 rounded flex items-center justify-center text-white text-xs font-bold">1</div> | |
| <div class="h-8 w-full bg-yellow-500 rounded flex items-center justify-center text-white text-xs font-bold">5</div> | |
| <div class="h-8 w-full bg-red-500 rounded flex items-center justify-center text-white text-xs font-bold">8</div> | |
| </div> | |
| <div class="flex items-center justify-between mb-3"> | |
| <div class="text-sm font-medium text-gray-700">Viking (n°7)</div> | |
| <div class="text-xs text-gray-500">5 dernières courses</div> | |
| </div> | |
| <div class="flex space-x-1"> | |
| <div class="h-8 w-full bg-yellow-500 rounded flex items-center justify-center text-white text-xs font-bold">3</div> | |
| <div class="h-8 w-full bg-red-500 rounded flex items-center justify-center text-white text-xs font-bold">6</div> | |
| <div class="h-8 w-full bg-green-500 rounded flex items-center justify-center text-white text-xs font-bold">2</div> | |
| <div class="h-8 w-full bg-green-500 rounded flex items-center justify-center text-white text-xs font-bold">1</div> | |
| <div class="h-8 w-full bg-yellow-500 rounded flex items-center justify-center text-white text-xs font-bold">4</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-gray-700 mb-4">Facteurs Clés de Sélection</h4> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Performance sur distance similaire</span> | |
| <span class="text-sm font-medium text-blue-700">87%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-blue-600 h-2.5 rounded-full" style="width: 87%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Taux de réussite jockey/entraîneur</span> | |
| <span class="text-sm font-medium text-green-700">78%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-green-600 h-2.5 rounded-full" style="width: 78%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Adaptation à l'état de la piste</span> | |
| <span class="text-sm font-medium text-yellow-700">65%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-yellow-500 h-2.5 rounded-full" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Tendance des parieurs</span> | |
| <span class="text-sm font-medium text-purple-700">72%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-purple-600 h-2.5 rounded-full" style="width: 72%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Export & Share --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h3 class="text-xl font-bold text-gray-800 mb-6 flex items-center"> | |
| <i class="fas fa-share-alt mr-3 text-green-500"></i> Exporter & Partager | |
| </h3> | |
| <div class="flex flex-wrap gap-4"> | |
| <button class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-file-pdf mr-2"></i> PDF | |
| </button> | |
| <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-envelope mr-2"></i> Email | |
| </button> | |
| <button class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fab fa-whatsapp mr-2"></i> WhatsApp | |
| </button> | |
| <button class="bg-gray-800 hover:bg-black text-white px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-print mr-2"></i> Imprimer | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <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> | |
| <h3 class="text-lg font-bold mb-4">Turf Pro Analyzer</h3> | |
| <p class="text-gray-400 text-sm"> | |
| L'outil professionnel pour analyser les courses PMU et optimiser vos chances de gagner. | |
| </p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Navigation</h3> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-white">Accueil</a></li> | |
| <li><a href="#" class="hover:text-white">Historique</a></li> | |
| <li><a href="#" class="hover:text-white">Abonnements</a></li> | |
| <li><a href="#" class="hover:text-white">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Légal</h3> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li><a href="#" class="hover:text-white">CGU</a></li> | |
| <li><a href="#" class="hover:text-white">Confidentialité</a></li> | |
| <li><a href="#" class="hover:text-white">Mentions légales</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Nous suivre</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400 text-sm"> | |
| © 2024 Turf Pro Analyzer. Tous droits réservés. | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Sample horse data | |
| const horses = [ | |
| { number: 1, name: "Eclair", jockey: "J. Moulin", trainer: "R. Duval", odds: "12/1", confidence: 70, tips: "Bon départ mais fatigue en fin de course" }, | |
| { number: 2, name: "Hasting", jockey: "P. Caro", trainer: "L. Dupon", odds: "5/1", confidence: 85, tips: "💎 Bon outsider" }, | |
| { number: 3, name: "Soleil", jockey: "A. Blanc", trainer: "E. Rouge", odds: "8/1", confidence: 65, tips: "Performances irrégulières" }, | |
| { number: 4, name: "Vent", jockey: "M. Noir", trainer: "S. Vert", odds: "15/1", confidence: 50, tips: "Éviter, mauvaises conditions" }, | |
| { number: 5, name: "Fuego", jockey: "A. Crastus", trainer: "M. Lelong", odds: "3/1", confidence: 90, tips: "🔥 Base Solide" }, | |
| { number: 6, name: "Lune", jockey: "T. Gris", trainer: "V. Bleu", odds: "20/1", confidence: 40, tips: "Faible sur cette distance" }, | |
| { number: 7, name: "Viking", jockey: "M. Dor", trainer: "F. Bress", odds: "6/1", confidence: 80, tips: "Risque en fin de course" }, | |
| { number: 8, name: "Galopin", jockey: "N/A", trainer: "N/A", odds: "N/P", confidence: 0, tips: "Non-partant" }, | |
| { number: 9, name: "Flamme", jockey: "D. Jaune", trainer: "P. Rose", odds: "10/1", confidence: 60, tips: "Peut surprendre" }, | |
| { number: 10, name: "Glacier", jockey: "E. Froid", trainer: "C. Chaud", odds: "25/1", confidence: 30, tips: "À éviter" }, | |
| { number: 11, name: "Tempête", jockey: "O. Orage", trainer: "L. Arc", odds: "18/1", confidence: 45, tips: "Performances moyennes" }, | |
| { number: 12, name: "Tonnerre", jockey: "L. Petit", trainer: "G. Martin", odds: "9/1", confidence: 75, tips: "Bon outsider" } | |
| ]; | |
| // Populate horses table | |
| const horsesTable = document.getElementById('horsesTable'); | |
| horses.forEach(horse => { | |
| const row = document.createElement('tr'); | |
| row.className = horse.number % 2 === 0 ? 'bg-gray-50' : 'bg-white'; | |
| // Confidence stars | |
| let stars = ''; | |
| const starCount = Math.floor(horse.confidence / 20); | |
| for (let i = 0; i < 5; i++) { | |
| if (i < starCount) { | |
| stars += '<i class="fas fa-star text-yellow-500"></i>'; | |
| } else { | |
| stars += '<i class="far fa-star text-yellow-500"></i>'; | |
| } | |
| } | |
| // Confidence bar | |
| const confidenceBar = ` | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="confidence-bar h-2 rounded-full ${getConfidenceColor(horse.confidence)}" style="width: ${horse.confidence}%"></div> | |
| </div> | |
| <div class="text-xs text-gray-500 mt-1">${horse.confidence}%</div> | |
| `; | |
| row.innerHTML = ` | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-gray-900">${horse.number}</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-horse text-blue-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">${horse.name}</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${horse.jockey}</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${horse.trainer}</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${getOddsColor(horse.odds)}"> | |
| ${horse.odds} | |
| </span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="w-24"> | |
| ${confidenceBar} | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${horse.tips}</td> | |
| `; | |
| horsesTable.appendChild(row); | |
| }); | |
| // Generate analysis button | |
| document.getElementById('generateBtn').addEventListener('click', function() { | |
| this.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Analyse en cours...'; | |
| // Simulate analysis delay | |
| setTimeout(() => { | |
| this.classList.remove('pulse'); | |
| this.innerHTML = '<i class="fas fa-check mr-2"></i> Analyse terminée'; | |
| this.classList.add('bg-green-500'); | |
| // Show results | |
| document.getElementById('analysisResults').classList.remove('hidden'); | |
| // Scroll to results | |
| document.getElementById('analysisResults').scrollIntoView({ behavior: 'smooth' }); | |
| }, 2000); | |
| }); | |
| // Helper functions | |
| function getConfidenceColor(confidence) { | |
| if (confidence >= 80) return 'bg-green-500'; | |
| if (confidence >= 60) return 'bg-blue-500'; | |
| if (confidence >= 40) return 'bg-yellow-500'; | |
| return 'bg-red-500'; | |
| } | |
| function getOddsColor(odds) { | |
| if (odds === 'N/P') return 'bg-gray-200 text-gray-800'; | |
| const value = parseFloat(odds.split('/')[0]); | |
| if (value <= 5) return 'bg-green-100 text-green-800'; | |
| if (value <= 10) return 'bg-blue-100 text-blue-800'; | |
| if (value <= 15) return 'bg-yellow-100 text-yellow-800'; | |
| return 'bg-red-100 text-red-800'; | |
| } | |
| </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=zama1/harmonygen" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |