Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Marketplace - Détails du Bot</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#f0f9ff', | |
| 100: '#e0f2fe', | |
| 200: '#bae6fd', | |
| 300: '#7dd3fc', | |
| 400: '#38bdf8', | |
| 500: '#0ea5e9', | |
| 600: '#0284c7', | |
| 700: '#0369a1', | |
| 800: '#075985', | |
| 900: '#0c4a6e', | |
| } | |
| }, | |
| animation: { | |
| 'fade-in': 'fadeIn 0.3s ease-in-out', | |
| 'slide-up': 'slideUp 0.3s ease-out', | |
| }, | |
| keyframes: { | |
| fadeIn: { | |
| '0%': { opacity: '0' }, | |
| '100%': { opacity: '1' }, | |
| }, | |
| slideUp: { | |
| '0%': { transform: 'translateY(20px)', opacity: '0' }, | |
| '100%': { transform: 'translateY(0)', opacity: '1' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .readme-content { | |
| max-height: 400px; | |
| overflow-y: auto; | |
| } | |
| .readme-content img { | |
| max-width: 100%; | |
| height: auto; | |
| } | |
| .tab-content { | |
| display: none; | |
| animation: fadeIn 0.3s ease-in-out; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| .rating-stars { | |
| color: #fbbf24; | |
| } | |
| .rating-stars.empty { | |
| color: #d1d5db; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 50%, #bae6fd 100%); | |
| } | |
| .bot-icon { | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| transition: transform 0.3s ease; | |
| } | |
| .bot-icon:hover { | |
| transform: translateY(-5px); | |
| } | |
| .feature-card { | |
| transition: all 0.3s ease; | |
| } | |
| .feature-card: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); | |
| } | |
| .scrollbar-hide::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .scrollbar-hide { | |
| -ms-overflow-style: none; | |
| scrollbar-width: none; | |
| } | |
| .markdown h1, .markdown h2, .markdown h3 { | |
| font-weight: 600; | |
| margin-top: 1.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .markdown ul { | |
| list-style-type: disc; | |
| padding-left: 1.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .markdown code { | |
| background-color: #f3f4f6; | |
| padding: 0.2rem 0.4rem; | |
| border-radius: 0.25rem; | |
| font-family: monospace; | |
| } | |
| .markdown pre { | |
| background-color: #f3f4f6; | |
| padding: 1rem; | |
| border-radius: 0.5rem; | |
| overflow-x: auto; | |
| margin-bottom: 1rem; | |
| } | |
| .markdown pre code { | |
| background-color: transparent; | |
| padding: 0; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 rounded-lg bg-primary-600 flex items-center justify-center"> | |
| <i class="fas fa-robot text-xl text-white"></i> | |
| </div> | |
| <h1 class="text-xl font-bold text-gray-800 hidden sm:block">AI Marketplace</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#" class="text-gray-600 hover:text-primary-600 transition-colors duration-200">Accueil</a> | |
| <a href="#" class="text-gray-600 hover:text-primary-600 transition-colors duration-200">Explorer</a> | |
| <a href="#" class="text-gray-600 hover:text-primary-600 transition-colors duration-200">Mes Bots</a> | |
| <a href="#" class="text-gray-600 hover:text-primary-600 transition-colors duration-200">Organisation</a> | |
| </nav> | |
| <div class="flex items-center space-x-3"> | |
| <button class="p-2 rounded-full text-gray-500 hover:bg-gray-100 transition-colors duration-200"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| <button class="bg-primary-600 text-white px-4 py-2 rounded-lg hover:bg-primary-700 transition-colors duration-200 hidden sm:block"> | |
| Créer un Bot | |
| </button> | |
| <div class="w-9 h-9 rounded-full bg-gray-200 flex items-center justify-center cursor-pointer hover:bg-gray-300 transition-colors duration-200"> | |
| <i class="fas fa-user text-gray-600"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-6"> | |
| <!-- Breadcrumbs --> | |
| <div class="flex items-center text-sm text-gray-500 mb-6 overflow-x-auto scrollbar-hide whitespace-nowrap"> | |
| <a href="#" class="hover:text-primary-600 transition-colors duration-200">Accueil</a> | |
| <span class="mx-2">/</span> | |
| <a href="#" class="hover:text-primary-600 transition-colors duration-200">Agents IA</a> | |
| <span class="mx-2">/</span> | |
| <span class="text-gray-700 font-medium">Assistant Marketing</span> | |
| </div> | |
| <!-- Bot Header Section --> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8 gradient-bg"> | |
| <div class="flex flex-col md:flex-row gap-6"> | |
| <!-- Bot Icon --> | |
| <div class="w-24 h-24 rounded-xl bg-white flex items-center justify-center shrink-0 bot-icon"> | |
| <i class="fas fa-bullhorn text-4xl text-primary-600"></i> | |
| </div> | |
| <!-- Bot Info --> | |
| <div class="flex-1"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4"> | |
| <div> | |
| <h1 class="text-3xl font-bold text-gray-800">Assistant Marketing Pro</h1> | |
| <div class="flex items-center mt-2"> | |
| <div class="flex mr-2"> | |
| <span class="rating-stars"><i class="fas fa-star"></i></span> | |
| <span class="rating-stars"><i class="fas fa-star"></i></span> | |
| <span class="rating-stars"><i class="fas fa-star"></i></span> | |
| <span class="rating-stars"><i class="fas fa-star"></i></span> | |
| <span class="rating-stars empty"><i class="fas fa-star"></i></span> | |
| </div> | |
| <span class="text-gray-600 text-sm">4.2 (128 avis)</span> | |
| </div> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <button class="bg-primary-600 text-white px-5 py-2.5 rounded-lg hover:bg-primary-700 transition-colors duration-200 flex items-center shadow-md hover:shadow-lg"> | |
| <i class="fas fa-play mr-2"></i> Tester | |
| </button> | |
| <button class="bg-white border border-primary-600 text-primary-600 px-5 py-2.5 rounded-lg hover:bg-primary-50 transition-colors duration-200 flex items-center shadow-md hover:shadow-lg"> | |
| <i class="fas fa-code-branch mr-2"></i> Forker | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex flex-wrap gap-2"> | |
| <span class="bg-primary-100 text-primary-800 text-xs px-3 py-1.5 rounded-full font-medium">Marketing</span> | |
| <span class="bg-primary-100 text-primary-800 text-xs px-3 py-1.5 rounded-full font-medium">GPT-4</span> | |
| <span class="bg-primary-100 text-primary-800 text-xs px-3 py-1.5 rounded-full font-medium">Gratuit</span> | |
| <span class="bg-primary-100 text-primary-800 text-xs px-3 py-1.5 rounded-full font-medium">Français</span> | |
| </div> | |
| <p class="mt-4 text-gray-600"> | |
| Assistant spécialisé dans la création de stratégies marketing, analyse de marché et génération de contenu. Parfait pour les équipes marketing cherchant à optimiser leurs campagnes. | |
| </p> | |
| <div class="mt-6 flex flex-wrap items-center gap-4 text-sm text-gray-500"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-user mr-2 text-primary-600"></i> | |
| <span>Créé par <a href="#" class="text-primary-600 hover:underline font-medium">MarketingAI Team</a></span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-calendar-alt mr-2 text-primary-600"></i> | |
| <span>Mis à jour il y a 3 jours</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-download mr-2 text-primary-600"></i> | |
| <span>1,245 téléchargements</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-bolt mr-2 text-primary-600"></i> | |
| <span>8,762 exécutions</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Key Features --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8"> | |
| <div class="bg-white rounded-xl shadow-md p-6 feature-card"> | |
| <div class="w-12 h-12 rounded-lg bg-primary-100 flex items-center justify-center mb-4"> | |
| <i class="fas fa-chart-line text-xl text-primary-600"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">Analyse de marché</h3> | |
| <p class="text-gray-600 text-sm">Analyse complète des tendances du marché et de la concurrence pour des stratégies éclairées.</p> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6 feature-card"> | |
| <div class="w-12 h-12 rounded-lg bg-primary-100 flex items-center justify-center mb-4"> | |
| <i class="fas fa-bullseye text-xl text-primary-600"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">Stratégies ciblées</h3> | |
| <p class="text-gray-600 text-sm">Stratégies marketing personnalisées adaptées à votre public cible et objectifs.</p> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6 feature-card"> | |
| <div class="w-12 h-12 rounded-lg bg-primary-100 flex items-center justify-center mb-4"> | |
| <i class="fas fa-hashtag text-xl text-primary-600"></i> | |
| </div> | |
| <h3 class="font-bold text-lg mb-2">Contenu optimisé</h3> | |
| <p class="text-gray-600 text-sm">Génération de contenu pour réseaux sociaux avec optimisation SEO intégrée.</p> | |
| </div> | |
| </div> | |
| <!-- Tab Navigation --> | |
| <div class="border-b border-gray-200 mb-6"> | |
| <nav class="flex space-x-1 md:space-x-8 overflow-x-auto scrollbar-hide"> | |
| <button onclick="switchTab('readme')" class="tab-button py-4 px-1 border-b-2 font-medium text-sm border-primary-600 text-primary-600 whitespace-nowrap"> | |
| <i class="fas fa-book-open mr-2"></i> Documentation | |
| </button> | |
| <button onclick="switchTab('versions')" class="tab-button py-4 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap"> | |
| <i class="fas fa-code-branch mr-2"></i> Versions | |
| </button> | |
| <button onclick="switchTab('logs')" class="tab-button py-4 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap"> | |
| <i class="fas fa-terminal mr-2"></i> Logs | |
| </button> | |
| <button onclick="switchTab('feedback')" class="tab-button py-4 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap"> | |
| <i class="fas fa-comment-alt mr-2"></i> Feedback | |
| </button> | |
| <button onclick="switchTab('integrations')" class="tab-button py-4 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap"> | |
| <i class="fas fa-plug mr-2"></i> Intégrations | |
| </button> | |
| </nav> | |
| </div> | |
| <!-- Tab Content --> | |
| <div> | |
| <!-- Readme Tab --> | |
| <div id="readme" class="tab-content active"> | |
| <div class="bg-white rounded-xl shadow-md p-6 readme-content markdown"> | |
| <h2 class="text-2xl font-bold mb-6">Assistant Marketing Pro</h2> | |
| <div class="prose max-w-none"> | |
| <h3 class="text-xl font-semibold mb-4">Fonctionnalités principales</h3> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-start"> | |
| <span class="text-primary-600 mr-2 mt-1">•</span> | |
| <span>Analyse de marché automatisée avec visualisation des données</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="text-primary-600 mr-2 mt-1">•</span> | |
| <span>Génération de stratégies marketing personnalisées basées sur vos objectifs</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="text-primary-600 mr-2 mt-1">•</span> | |
| <span>Création de contenu pour réseaux sociaux avec suggestions de visuels</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="text-primary-600 mr-2 mt-1">•</span> | |
| <span>Analyse SEO complète avec suggestions de mots-clés optimisés</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="text-primary-600 mr-2 mt-1">•</span> | |
| <span>Benchmarking de la concurrence avec rapports comparatifs</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="text-primary-600 mr-2 mt-1">•</span> | |
| <span>Génération de rapports détaillés exportables en PDF</span> | |
| </li> | |
| </ul> | |
| <h3 class="text-xl font-semibold mb-4">Comment l'utiliser</h3> | |
| <p class="mb-4">Pour commencer avec l'Assistant Marketing Pro, vous pouvez soit l'exécuter directement depuis cette page, soit l'intégrer à votre workflow existant via notre API.</p> | |
| <div class="bg-primary-50 p-4 rounded-lg mb-6 border border-primary-100"> | |
| <h4 class="font-semibold mb-3 text-primary-800">Exemple de prompt :</h4> | |
| <div class="bg-white p-4 rounded-lg border border-primary-200"> | |
| <code class="text-sm"> | |
| "Je dirige une petite entreprise de cosmétiques naturels. Notre public cible est principalement des femmes de 25-45 ans soucieuses de l'environnement. Pouvez-vous me suggérer une stratégie marketing pour lancer notre nouveau produit ? Inclure des idées de contenu pour Instagram et une analyse des concurrents directs." | |
| </code> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-4">Configuration requise</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="font-medium mb-2 text-gray-800">Minimum</h4> | |
| <ul class="text-sm space-y-1"> | |
| <li>• Accès à l'API OpenAI (GPT-3.5 minimum)</li> | |
| <li>• Compte sur la plateforme AI Marketplace</li> | |
| <li>• 2GB de mémoire disponible</li> | |
| </ul> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h4 class="font-medium mb-2 text-gray-800">Recommandé</h4> | |
| <ul class="text-sm space-y-1"> | |
| <li>• Accès à l'API OpenAI (GPT-4 pour de meilleurs résultats)</li> | |
| <li>• Compte professionnel sur la plateforme</li> | |
| <li>• 4GB de mémoire disponible</li> | |
| <li>• Connexion aux outils tiers (Google Analytics, etc.)</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-4">Premiers pas</h3> | |
| <div class="space-y-4 mb-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-primary-100 text-primary-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">1</div> | |
| <div> | |
| <h4 class="font-medium">Cliquez sur "Tester"</h4> | |
| <p class="text-sm text-gray-600">Exécutez le bot directement depuis cette page pour un essai rapide.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-primary-100 text-primary-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">2</div> | |
| <div> | |
| <h4 class="font-medium">Configurez vos paramètres</h4> | |
| <p class="text-sm text-gray-600">Définissez votre secteur d'activité, public cible et objectifs.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-primary-100 text-primary-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">3</div> | |
| <div> | |
| <h4 class="font-medium">Personnalisez les résultats</h4> | |
| <p class="text-sm text-gray-600">Affinez les suggestions selon vos besoins spécifiques.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-primary-100 text-primary-800 rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-0.5 flex-shrink-0">4</div> | |
| <div> | |
| <h4 class="font-medium">Exportez et partagez</h4> | |
| <p class="text-sm text-gray-600">Téléchargez les rapports ou partagez-les avec votre équipe.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-4">Licence</h3> | |
| <p class="mb-6">Ce bot est distribué sous licence MIT. Vous êtes libre de l'utiliser, le modifier et le redistribuer selon les termes de la licence. Pour une utilisation commerciale étendue, veuillez consulter nos plans professionnels.</p> | |
| <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-exclamation-circle text-yellow-400"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm text-yellow-700"> | |
| <strong>Note importante :</strong> Les résultats générés par l'IA doivent toujours être vérifiés par un expert humain avant mise en œuvre. L'équipe de développement ne peut être tenue responsable des décisions basées sur les suggestions de cet assistant. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Versions Tab --> | |
| <div id="versions" class="tab-content"> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold">Historique des versions</h2> | |
| <button class="bg-primary-600 text-white px-4 py-2 rounded-lg hover:bg-primary-700 transition-colors duration-200 flex items-center text-sm"> | |
| <i class="fas fa-bell mr-2"></i> Suivre les mises à jour | |
| </button> | |
| </div> | |
| <div class="space-y-6"> | |
| <div class="border-l-2 border-primary-600 pl-4 relative pb-6"> | |
| <div class="absolute -left-1.5 top-0 w-3 h-3 rounded-full bg-primary-600"></div> | |
| <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between"> | |
| <div> | |
| <h3 class="font-semibold text-lg">v2.1.0</h3> | |
| <span class="text-sm text-primary-600 bg-primary-100 px-2 py-0.5 rounded-full">Dernière version</span> | |
| </div> | |
| <span class="text-sm text-gray-500 mt-1 sm:mt-0">3 jours ago</span> | |
| </div> | |
| <div class="mt-2 bg-gray-50 p-3 rounded-lg"> | |
| <h4 class="font-medium mb-1">Nouveautés</h4> | |
| <ul class="text-sm space-y-1 list-disc pl-5"> | |
| <li>Amélioration de l'analyse des tendances du marché avec visualisation des données</li> | |
| <li>Ajout de templates pour les stratégies de lancement de produit</li> | |
| </ul> | |
| <h4 class="font-medium mb-1 mt-2">Corrections</h4> | |
| <ul class="text-sm space-y-1 list-disc pl-5"> | |
| <li>Résolution du problème de formatage des rapports PDF</li> | |
| <li>Amélioration de la stabilité avec l'API GPT-4</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-l-2 border-gray-200 pl-4 relative pb-6"> | |
| <div class="absolute -left-1.5 top-0 w-3 h-3 rounded-full bg-gray-300"></div> | |
| <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between"> | |
| <h3 class="font-semibold text-lg">v2.0.3</h3> | |
| <span class="text-sm text-gray-500 mt-1 sm:mt-0">2 semaines ago</span> | |
| </div> | |
| <div class="mt-2 bg-gray-50 p-3 rounded-lg"> | |
| <h4 class="font-medium mb-1">Corrections</h4> | |
| <ul class="text-sm space-y-1 list-disc pl-5"> | |
| <li>Correction des bugs d'intégration avec Notion</li> | |
| <li>Amélioration des performances pour les analyses de grands ensembles de données</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-l-2 border-gray-200 pl-4 relative pb-6"> | |
| <div class="absolute -left-1.5 top-0 w-3 h-3 rounded-full bg-gray-300"></div> | |
| <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between"> | |
| <h3 class="font-semibold text-lg">v2.0.0</h3> | |
| <span class="text-sm text-gray-500 mt-1 sm:mt-0">1 mois ago</span> | |
| </div> | |
| <div class="mt-2 bg-gray-50 p-3 rounded-lg"> | |
| <h4 class="font-medium mb-1">Nouveautés majeures</h4> | |
| <ul class="text-sm space-y-1 list-disc pl-5"> | |
| <li>Migration vers GPT-4 pour des analyses plus précises</li> | |
| <li>Ajout de l'analyse comparative des concurrents</li> | |
| <li>Nouveau système de génération de rapports</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-l-2 border-gray-200 pl-4 relative"> | |
| <div class="absolute -left-1.5 top-0 w-3 h-3 rounded-full bg-gray-300"></div> | |
| <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between"> | |
| <h3 class="font-semibold text-lg">v1.5.2</h3> | |
| <span class="text-sm text-gray-500 mt-1 sm:mt-0">2 mois ago</span> | |
| </div> | |
| <div class="mt-2 bg-gray-50 p-3 rounded-lg"> | |
| <h4 class="font-medium mb-1">Améliorations</h4> | |
| <ul class="text-sm space-y-1 list-disc pl-5"> | |
| <li>Optimisation des performances pour les utilisateurs gratuits</li> | |
| <li>Amélioration de l'interface utilisateur</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Logs Tab --> | |
| <div id="logs" class="tab-content"> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-2xl font-bold mb-4">Logs d'exécution</h2> | |
| <div class="bg-gray-50 border border-gray-200 rounded-lg p-6 text-center"> | |
| <div class="mx-auto w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-lock text-gray-500 text-2xl"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-gray-800 mb-2">Accès restreint</h3> | |
| <p class="text-gray-600 mb-6 max-w-md mx-auto">Les logs d'exécution ne sont disponibles que pour les propriétaires du bot et les utilisateurs disposant des autorisations nécessaires.</p> | |
| <button class="bg-primary-600 text-white px-5 py-2.5 rounded-lg hover:bg-primary-700 transition-colors duration-200 inline-flex items-center"> | |
| <i class="fas fa-envelope mr-2"></i> Demander l'accès | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Feedback Tab --> | |
| <div id="feedback" class="tab-content"> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-2xl font-bold mb-6">Donnez votre avis</h2> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-gray-50 rounded-lg p-6 mb-6"> | |
| <h3 class="font-medium mb-4">Note globale</h3> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex space-x-1 text-3xl mr-4" id="ratingStars"> | |
| <i class="fas fa-star cursor-pointer hover:text-yellow-400" onclick="rate(1)"></i> | |
| <i class="fas fa-star cursor-pointer hover:text-yellow-400" onclick="rate(2)"></i> | |
| <i class="fas fa-star cursor-pointer hover:text-yellow-400" onclick="rate(3)"></i> | |
| <i class="fas fa-star cursor-pointer hover:text-yellow-400" onclick="rate(4)"></i> | |
| <i class="fas fa-star cursor-pointer hover:text-yellow-400" onclick="rate(5)"></i> | |
| </div> | |
| <span class="text-gray-500" id="ratingText">Sélectionnez une note</span> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="comment" class="block font-medium mb-2">Votre expérience</label> | |
| <textarea id="comment" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent" placeholder="Décrivez votre expérience avec ce bot..."></textarea> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-4"> | |
| <div> | |
| <label for="name" class="block font-medium mb-2">Votre nom (optionnel)</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="email" class="block font-medium mb-2">Email (optionnel)</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="inline-flex items-center"> | |
| <input type="checkbox" class="rounded border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50"> | |
| <span class="ml-2">Je recommande ce bot</span> | |
| </label> | |
| </div> | |
| <button class="bg-primary-600 text-white px-5 py-2.5 rounded-lg hover:bg-primary-700 transition-colors duration-200 w-full sm:w-auto"> | |
| Envoyer le feedback | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-6">Avis des utilisateurs</h3> | |
| <div class="space-y-6"> | |
| <div class="bg-gray-50 p-5 rounded-lg"> | |
| <div class="flex justify-between mb-3"> | |
| <div> | |
| <h4 class="font-semibold">Jean Dupont</h4> | |
| <div class="flex mt-1"> | |
| <span class="rating-stars"><i class="fas fa-star text-sm"></i></span> | |
| <span class="rating-stars"><i class="fas fa-star text-sm"></i></span> | |
| <span class="rating-stars"><i class="fas fa-star text-sm"></i></span> | |
| <span class="rating-stars"><i class="fas fa-star text-sm"></i></span> | |
| <span class="rating-stars empty"><i class="fas fa-star text-sm"></i></span> | |
| </div> | |
| </div> | |
| <span class="text-sm text-gray-500">1 semaine ago</span> | |
| </div> | |
| <p class="text-gray-600 text-sm">Excellent assistant qui m'a permis d'optimiser mes campagnes Facebook. Les suggestions de contenu sont pertinentes et adaptées à mon public. J'ai particulièrement apprécié l'analyse des tendances.</p> | |
| </div> | |
| <div class="bg-gray-50 p-5 rounded-lg"> | |
| <div class="flex justify-between mb-3"> | |
| <div> | |
| <h4 class="font-semibold">Marie Lambert</h4> | |
| <div class="flex mt-1"> | |
| <span class="rating-stars"><i class="fas fa-star text-sm"></i></span> | |
| <span class="rating-stars"><i class="fas fa-star text-sm"></i></span> | |
| <span class="rating-stars"><i class="fas fa-star text-sm"></i></span> | |
| <span class="rating-stars"><i class="fas fa-star text-sm"></i></span> | |
| <span class="rating-stars"><i class="fas fa-star text-sm"></i></span> | |
| </div> | |
| </div> | |
| <span class="text-sm text-gray-500">2 semaines ago</span> | |
| </div> | |
| <p class="text-gray-600 text-sm">Indispensable pour mon équipe marketing ! L'analyse de concurrence est particulièrement utile. Nous l'utilisons quotidiennement pour nos rapports hebdomadaires.</p> | |
| </div> | |
| <div class="bg-gray-50 p-5 rounded-lg"> | |
| <div class="flex justify-between mb-3"> | |
| <div> | |
| <h4 class="font-semibold">Thomas Martin</h4> | |
| <div class="flex mt-1"> | |
| <span class="rating-stars"><i class="fas fa-star text-sm"></i></span> | |
| <span class="rating-stars"><i class="fas fa-star text-sm"></i></span> | |
| <span class="rating-stars"><i class="fas fa-star text-sm"></i></span> | |
| <span class="rating-stars empty"><i class="fas fa-star text-sm"></i></span> | |
| <span class="rating-stars empty"><i class="fas fa-star text-sm"></i></span> | |
| </div> | |
| </div> | |
| <span class="text-sm text-gray-500">3 semaines ago</span> | |
| </div> | |
| <p class="text-gray-600 text-sm">Bon outil mais parfois les suggestions sont trop génériques. J'aimerais plus de personnalisation en fonction de mon secteur d'activité. La version pro semble prometteuse.</p> | |
| </div> | |
| <a href="#" class="inline-block text-primary-600 hover:text-primary-800 text-sm font-medium"> | |
| Voir tous les avis (128) <i class="fas fa-arrow-right ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Integrations Tab --> | |
| <div id="integrations" class="tab-content"> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-2xl font-bold mb-6">Intégrations</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> | |
| <div class="border border-gray-200 rounded-xl p-5 hover:border-primary-300 transition-colors duration-200"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center mr-4"> | |
| <i class="fab fa-google-drive text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="font-bold text-lg">Google Drive</h3> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-4">Sauvegardez automatiquement vos rapports et analyses dans votre Drive. Accédez à vos documents historiques directement depuis l'assistant.</p> | |
| <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors duration-200 text-sm"> | |
| <i class="fas fa-link mr-2"></i> Connecter | |
| </button> | |
| </div> | |
| <div class="border border-gray-200 rounded-xl p-5 hover:border-primary-300 transition-colors duration-200"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-lg bg-gray-800 flex items-center justify-center mr-4"> | |
| <i class="fab fa-notion text-white text-xl"></i> | |
| </div> | |
| <h3 class="font-bold text-lg">Notion</h3> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-4">Exportez vos stratégies marketing directement dans vos pages Notion. Créez des templates personnalisés pour votre équipe.</p> | |
| <button class="bg-gray-800 text-white px-4 py-2 rounded-lg hover:bg-gray-900 transition-colors duration-200 text-sm"> | |
| <i class="fas fa-link mr-2"></i> Connecter | |
| </button> | |
| </div> | |
| <div class="border border-gray-200 rounded-xl p-5 hover:border-primary-300 transition-colors duration-200"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center mr-4"> | |
| <i class="fab fa-slack text-purple-600 text-xl"></i> | |
| </div> | |
| <h3 class="font-bold text-lg">Slack</h3> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-4">Recevez des notifications et partagez des insights directement dans vos canaux Slack. Intégration avec les commandes slash.</p> | |
| <button class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors duration-200 text-sm"> | |
| <i class="fas fa-link mr-2"></i> Connecter | |
| </button> | |
| </div> | |
| <div class="border border-gray-200 rounded-xl p-5 hover:border-primary-300 transition-colors duration-200"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-lg bg-red-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-envelope text-red-600 text-xl"></i> | |
| </div> | |
| <h3 class="font-bold text-lg">Email</h3> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-4">Envoyez des rapports périodiques par email à vous-même ou à votre équipe. Personnalisez les modèles d'email et la fréquence.</p> | |
| <button class="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 transition-colors duration-200 text-sm"> | |
| <i class="fas fa-link mr-2"></i> Connecter | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-xl p-6"> | |
| <h3 class="font-bold text-lg mb-3">API & Développeurs</h3> | |
| <p class="text-gray-600 text-sm mb-4">Intégrez l'Assistant Marketing Pro directement dans vos applications via notre API RESTful. Documentation complète et exemples de code disponibles.</p> | |
| <div class="flex flex-wrap gap-3"> | |
| <button class="bg-gray-800 text-white px-4 py-2 rounded-lg hover:bg-gray-900 transition-colors duration-200 text-sm"> | |
| <i class="fas fa-book mr-2"></i> Documentation API | |
| </button> | |
| <button class="bg-gray-200 text-gray-800 px-4 py-2 rounded-lg hover:bg-gray-300 transition-colors duration-200 text-sm"> | |
| <i class="fas fa-key mr-2"></i> Générer une clé API | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Related Bots --> | |
| <section class="container mx-auto px-4 py-12"> | |
| <h2 class="text-2xl font-bold mb-8">Bots similaires</h2> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-chart-pie text-purple-600 text-xl"></i> | |
| </div> | |
| <h3 class="font-bold">Analyste de Données</h3> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-4">Transformez vos données brutes en insights actionnables avec des visualisations claires.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex"> | |
| <span class="rating-stars"><i class="fas fa-star text-sm"></i></span> | |
| <span class="rating-stars"><i class="fas fa-star text-sm"></i></span> | |
| <span class="rating-stars"><i class="fas fa-star text-sm"></i></span> | |
| <span class="rating-stars"><i class="fas fa-star text-sm"></i></span> | |
| <span class="rating-stars empty"><i class="fas fa-star text-sm"></i></span> | |
| </div> | |
| <span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded-full">Gratuit</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-shopping-cart text-green-600 text-xl"></i> | |
| </div> | |
| <h3 class="font-bold">Assistant E-commerce</h3> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-4">Optimisez vos fiches produits, descriptions et stratégies de vente en ligne.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex"> | |
| <span class="rating-stars"><i class="fas fa-star text-sm"></i></span> | |
| <span class="rating-stars"><i class="fas fa-star text-sm"></i></span> | |
| <span class="rating-stars"><i class="fas fa-star text-sm"></i></span> | |
| <span class="rating-stars"><i class="fas fa-star text-sm"></i></span> | |
| <span class="rating-stars"><i class="fas fa-star text-sm"></i></span> | |
| </div> | |
| <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Premium</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-globe text-blue-600 text-xl"></i> | |
| </div> | |
| <h3 class="font-bold">SEO Master</h3> | |
| </div> | |
| <p class="text-gray-600 text-sm mb-4">Améliorez votre classement SEO avec des analyses approfondies et des recommandations.</p> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex"> | |
| <span class="rating-stars"><i class="fas fa-star text-sm"></i></span> | |
| <span class="rating-stars"><i class="fas fa-star text-sm"></i></span> | |
| <span class="rating-stars"><i class="fas fa-star text-sm"></i></span> | |
| <span class="rating-stars"><i class="fas fa-star text-sm"></i></span> | |
| <span class="rating-stars empty"><i class="fas fa-star text-sm"></i></span> | |
| </div> | |
| <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">Gratuit</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white pt-12 pb-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-lg bg-primary-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-robot text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">AI Marketplace</h3> | |
| </div> | |
| <p class="text-gray-400 text-sm">La plateforme leader pour découvrir, créer et partager des assistants IA puissants.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Marketplace</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Explorer</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Tendances</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Nouveautés</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Catégories</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Ressources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Documentation</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Tutoriels</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">API</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-4">Entreprise</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">À propos</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Carrières</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Contact</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm transition-colors duration-200">Presse</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 pt-8"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex space-x-4 mb-4 md:mb-0"> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200"><i class="fab fa-linkedin"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200"><i class="fab fa-github"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors duration-200"><i class="fab fa-discord"></i></a> | |
| </div> | |
| <div class="text-gray-400 text-sm"> | |
| © 2023 AI Marketplace. Tous droits réservés. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Tab switching functionality | |
| function switchTab(tabId) { | |
| // Hide all tab contents | |
| document.querySelectorAll('.tab-content').forEach(tab => { | |
| tab.classList.remove('active'); | |
| }); | |
| // Show selected tab content | |
| document.getElementById(tabId).classList.add('active'); | |
| // Update tab buttons | |
| document.querySelectorAll('.tab-button').forEach(button => { | |
| if (button.textContent.includes(tabId)) { | |
| button.classList.add('border-primary-600', 'text-primary-600'); | |
| button.classList.remove('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300'); | |
| } else { | |
| button.classList.remove('border-primary-600', 'text-primary-600'); | |
| button.classList.add('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300'); | |
| } | |
| }); | |
| } | |
| // Rating functionality | |
| let currentRating = 0; | |
| const ratingTexts = [ | |
| "Mauvais", | |
| "Passable", | |
| "Moyen", | |
| "Bon", | |
| "Excellent" | |
| ]; | |
| function rate(rating) { | |
| currentRating = rating; | |
| const stars = document.querySelectorAll('#ratingStars .fa-star'); | |
| const ratingText = document.getElementById('ratingText'); | |
| stars.forEach((star, index) => { | |
| if (index < rating) { | |
| star.classList.add('text-yellow-400'); | |
| star.classList.remove('text-gray-300'); | |
| } else { | |
| star.classList.remove('text-yellow-400'); | |
| star.classList.add('text-gray-300'); | |
| } | |
| }); | |
| ratingText.textContent = ratingTexts[rating - 1]; | |
| ratingText.classList.remove('text-gray-500'); | |
| ratingText.classList.add('text-yellow-500', 'font-medium'); | |
| } | |
| // Initialize rating stars hover effect | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const stars = document.querySelectorAll('#ratingStars .fa-star'); | |
| stars.forEach((star, index) => { | |
| star.addEventListener('mouseover', () => { | |
| // Highlight stars on hover | |
| for (let i = 0; i <= index; i++) { | |
| stars[i].classList.add('text-yellow-300'); | |
| } | |
| }); | |
| star.addEventListener('mouseout', () => { | |
| // Revert to current rating on mouse out | |
| stars.forEach((s, i) => { | |
| if (i < currentRating) { | |
| s.classList.add('text-yellow-400'); | |
| s.classList.remove('text-yellow-300'); | |
| } else { | |
| s.classList.remove('text-yellow-300', 'text-yellow-400'); | |
| s.classList.add('text-gray-300'); | |
| } | |
| }); | |
| }); | |
| }); | |
| }); | |
| </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=froublot/agent-card" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |