Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MEGA MARCHÉ IA - Le plus grand marché d'intelligences artificielles</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://js.stripe.com/v3/"></script> | |
| <script src="https://www.paypal.com/sdk/js?client-id=YOUR_PAYPAL_CLIENT_ID¤cy=EUR"></script> | |
| <style> | |
| :root { | |
| --primary: #6e48aa; | |
| --secondary: #9d50bb; | |
| --accent: #4776e6; | |
| --dark: #1a1a2e; | |
| --light: #f8f9fa; | |
| } | |
| body { | |
| background-color: var(--dark); | |
| color: var(--light); | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| } | |
| .cyber-card { | |
| background: rgba(30, 30, 60, 0.7); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); | |
| transition: all 0.3s ease; | |
| } | |
| .cyber-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 15px 30px rgba(110, 72, 170, 0.4); | |
| border-color: var(--accent); | |
| } | |
| .neon-text { | |
| text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px var(--accent), 0 0 20px var(--accent); | |
| } | |
| .grid-container { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); | |
| gap: 1rem; | |
| padding: 1rem; | |
| } | |
| .ai-button { | |
| background: linear-gradient(145deg, rgba(110,72,170,0.7), rgba(157,80,187,0.7)); | |
| border: none; | |
| color: white; | |
| padding: 12px; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| text-align: center; | |
| font-weight: 500; | |
| box-shadow: 0 4px 6px rgba(0,0,0,0.1); | |
| } | |
| .ai-button:hover { | |
| background: linear-gradient(145deg, rgba(110,72,170,0.9), rgba(157,80,187,0.9)); | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 12px rgba(0,0,0,0.15); | |
| } | |
| .glow { | |
| animation: glow 2s infinite alternate; | |
| } | |
| @keyframes glow { | |
| from { | |
| box-shadow: 0 0 5px -5px var(--accent); | |
| } | |
| to { | |
| box-shadow: 0 0 20px 5px var(--accent); | |
| } | |
| } | |
| .holographic { | |
| background: linear-gradient(45deg, | |
| rgba(110, 72, 170, 0.8), | |
| rgba(71, 118, 230, 0.8), | |
| rgba(157, 80, 187, 0.8)); | |
| background-size: 200% 200%; | |
| animation: holographic 8s ease infinite; | |
| } | |
| @keyframes holographic { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| .scroll-container { | |
| height: 80vh; | |
| overflow-y: auto; | |
| scrollbar-width: thin; | |
| scrollbar-color: var(--primary) var(--dark); | |
| } | |
| .scroll-container::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| .scroll-container::-webkit-scrollbar-track { | |
| background: var(--dark); | |
| } | |
| .scroll-container::-webkit-scrollbar-thumb { | |
| background-color: var(--primary); | |
| border-radius: 20px; | |
| } | |
| .admin-badge { | |
| position: absolute; | |
| top: 10px; | |
| right: 10px; | |
| background: linear-gradient(145deg, #10B981, #047857); | |
| color: white; | |
| padding: 2px 10px; | |
| border-radius: 9999px; | |
| font-size: 12px; | |
| font-weight: bold; | |
| z-index: 10; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.2); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen"> | |
| <!-- Subscription Modal --> | |
| <div id="subscriptionModal" class="fixed inset-0 flex items-center justify-center z-50" style="background-color: rgba(0,0,0,0.9);"> | |
| <div class="cyber-card rounded-xl p-8 max-w-md w-full mx-4"> | |
| <div class="text-center mb-6"> | |
| <i class="fas fa-lock text-5xl text-purple-400 mb-4"></i> | |
| <h2 class="text-3xl font-bold text-white neon-text">Abonnement Requis</h2> | |
| <p class="text-gray-300 mt-2">Accédez à notre gigantesque marché d'IA avec un abonnement premium.</p> | |
| </div> | |
| <form id="subscriptionForm" class="space-y-4"> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-300 mb-1">Email</label> | |
| <input type="email" id="email" name="email" required class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-md text-white focus:ring-purple-500 focus:border-purple-500"> | |
| </div> | |
| <div> | |
| <label for="password" class="block text-sm font-medium text-gray-300 mb-1">Mot de passe</label> | |
| <input type="password" id="password" name="password" required class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-md text-white focus:ring-purple-500 focus:border-purple-500"> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" id="terms" name="terms" required class="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-700 rounded bg-gray-800"> | |
| <label for="terms" class="ml-2 block text-sm text-gray-300"> | |
| J'accepte les <a href="#" class="text-purple-400 hover:underline">conditions d'utilisation</a> | |
| </label> | |
| </div> | |
| <button type="submit" class="w-full gradient-bg text-white py-3 px-4 rounded-md hover:opacity-90 transition duration-300 font-medium text-lg"> | |
| S'abonner (€49.99/mois) | |
| </button> | |
| <div class="text-center text-sm text-gray-400"> | |
| <p>Vous avez déjà un compte? <a href="#" id="loginLink" class="text-purple-400 hover:underline">Connectez-vous</a></p> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Login Modal --> | |
| <div id="loginModal" class="fixed inset-0 flex items-center justify-center z-50 hidden" style="background-color: rgba(0,0,0,0.9);"> | |
| <div class="cyber-card rounded-xl p-8 max-w-md w-full mx-4"> | |
| <div class="text-center mb-6"> | |
| <i class="fas fa-user-lock text-5xl text-purple-400 mb-4"></i> | |
| <h2 class="text-3xl font-bold text-white neon-text">Connexion Admin</h2> | |
| <p class="text-gray-300 mt-2">Accédez au tableau de bord administrateur</p> | |
| </div> | |
| <form id="loginForm" class="space-y-4"> | |
| <div> | |
| <label for="loginEmail" class="block text-sm font-medium text-gray-300 mb-1">Email</label> | |
| <input type="email" id="loginEmail" name="email" required class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-md text-white focus:ring-purple-500 focus:border-purple-500"> | |
| </div> | |
| <div> | |
| <label for="loginPassword" class="block text-sm font-medium text-gray-300 mb-1">Mot de passe</label> | |
| <input type="password" id="loginPassword" name="password" required class="w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-md text-white focus:ring-purple-500 focus:border-purple-500"> | |
| </div> | |
| <button type="submit" class="w-full gradient-bg text-white py-3 px-4 rounded-md hover:opacity-90 transition duration-300 font-medium text-lg"> | |
| Se connecter | |
| </button> | |
| <div class="text-center text-sm text-gray-400"> | |
| <p>Pas encore de compte? <a href="#" id="registerLink" class="text-purple-400 hover:underline">Inscrivez-vous</a></p> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Admin Dashboard Overlay --> | |
| <div id="adminOverlay" class="fixed bottom-4 right-4 z-50 hidden"> | |
| <div class="bg-green-600 text-white px-4 py-2 rounded-lg shadow-lg flex items-center glow"> | |
| <i class="fas fa-user-shield mr-2"></i> | |
| <span>Mode Admin Actif</span> | |
| </div> | |
| </div> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white shadow-xl"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-3"> | |
| <i class="fas fa-robot text-3xl"></i> | |
| <h1 class="text-2xl font-bold">MEGA MARCHÉ IA</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button id="cartButton" class="relative p-2 rounded-full hover:bg-white hover:bg-opacity-20 transition"> | |
| <i class="fas fa-shopping-cart text-xl"></i> | |
| <span id="cartCount" class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span> | |
| </button> | |
| <button id="dashboardButton" class="flex items-center space-x-2 bg-white bg-opacity-20 hover:bg-opacity-30 px-4 py-2 rounded-md transition"> | |
| <i class="fas fa-tachometer-alt"></i> | |
| <span>Tableau de bord</span> | |
| </button> | |
| <div class="relative group"> | |
| <button id="profileButton" class="flex items-center space-x-1"> | |
| <img id="profileImage" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Profile" class="h-8 w-8 rounded-full"> | |
| <i class="fas fa-caret-down"></i> | |
| </button> | |
| <div class="absolute right-0 mt-2 w-48 bg-gray-800 rounded-md shadow-lg py-1 z-50 hidden group-hover:block border border-gray-700"> | |
| <a href="#" class="block px-4 py-2 text-gray-300 hover:bg-gray-700">Mon Profil</a> | |
| <a href="#" class="block px-4 py-2 text-gray-300 hover:bg-gray-700">Paramètres</a> | |
| <a href="#" id="logoutButton" class="block px-4 py-2 text-gray-300 hover:bg-gray-700">Déconnexion</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Shopping Cart Sidebar --> | |
| <div id="cartSidebar" class="fixed top-0 right-0 h-full w-96 bg-gray-900 shadow-xl transform translate-x-full transition-transform duration-300 z-40 border-l border-gray-800"> | |
| <div class="p-4 border-b border-gray-800 flex justify-between items-center"> | |
| <h3 class="text-lg font-semibold text-white">Panier d'achat</h3> | |
| <button id="closeCart" class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div id="cartItems" class="p-4 overflow-y-auto h-3/4"> | |
| <!-- Cart items will be added here dynamically --> | |
| <div class="text-center text-gray-500 py-10"> | |
| <i class="fas fa-shopping-cart text-4xl mb-2"></i> | |
| <p>Votre panier est vide</p> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-gray-800 bg-gray-800"> | |
| <div class="flex justify-between mb-4"> | |
| <span class="font-medium text-gray-300">Total:</span> | |
| <span id="cartTotal" class="font-bold text-white">€0.00</span> | |
| </div> | |
| <button id="checkoutButton" class="w-full gradient-bg text-white py-3 px-4 rounded-md hover:opacity-90 transition duration-300 font-medium disabled:opacity-50" disabled> | |
| Passer à la caisse | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Dashboard Modal --> | |
| <div id="dashboardModal" class="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-gray-900 rounded-xl shadow-2xl w-11/12 max-w-6xl max-h-screen overflow-y-auto border border-gray-800"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center border-b border-gray-800 pb-4"> | |
| <h2 class="text-2xl font-bold text-white">Tableau de bord Admin</h2> | |
| <button id="closeDashboard" class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <!-- Payment Methods --> | |
| <div class="cyber-card p-4 rounded-lg"> | |
| <h3 class="text-lg font-semibold mb-4 flex items-center text-white"> | |
| <i class="fas fa-credit-card mr-2 text-purple-400"></i> | |
| Méthodes de paiement | |
| </h3> | |
| <div class="space-y-3"> | |
| <div class="flex items-center justify-between p-3 border border-gray-800 rounded-lg bg-gray-800"> | |
| <div class="flex items-center"> | |
| <i class="fab fa-paypal text-2xl text-blue-400 mr-3"></i> | |
| <span class="text-white">PayPal</span> | |
| </div> | |
| <button id="paypalButton" class="px-3 py-1 bg-blue-600 text-white rounded text-sm hover:bg-blue-700 transition"> | |
| Connecter | |
| </button> | |
| </div> | |
| <div class="flex items-center justify-between p-3 border border-gray-800 rounded-lg bg-gray-800"> | |
| <div class="flex items-center"> | |
| <i class="fab fa-stripe text-2xl text-purple-400 mr-3"></i> | |
| <span class="text-white">Stripe</span> | |
| </div> | |
| <button id="stripeButton" class="px-3 py-1 bg-purple-600 text-white rounded text-sm hover:bg-purple-700 transition"> | |
| Connecter | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Payment History --> | |
| <div class="cyber-card p-4 rounded-lg"> | |
| <h3 class="text-lg font-semibold mb-4 flex items-center text-white"> | |
| <i class="fas fa-history mr-2 text-purple-400"></i> | |
| Historique des paiements | |
| </h3> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-800"> | |
| <thead class="bg-gray-800"> | |
| <tr> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-300 uppercase">Date</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-300 uppercase">Montant</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-300 uppercase">Méthode</th> | |
| <th class="px-4 py-2 text-left text-xs font-medium text-gray-300 uppercase">Statut</th> | |
| </tr> | |
| </thead> | |
| <tbody id="paymentHistory" class="bg-gray-900 divide-y divide-gray-800"> | |
| <!-- Payment history will be loaded here --> | |
| <tr> | |
| <td colspan="4" class="px-4 py-4 text-center text-gray-500">Aucun historique de paiement</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Account Info --> | |
| <div class="cyber-card p-4 rounded-lg"> | |
| <h3 class="text-lg font-semibold mb-4 flex items-center text-white"> | |
| <i class="fas fa-user mr-2 text-purple-400"></i> | |
| Informations du compte | |
| </h3> | |
| <div class="space-y-3"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300">Nom</label> | |
| <p id="accountName" class="mt-1 text-sm text-white">Invité</p> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300">Email</label> | |
| <p id="accountEmail" class="mt-1 text-sm text-white">Non connecté</p> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300">Type de compte</label> | |
| <p id="accountType" class="mt-1 text-sm text-white">Standard</p> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300">Solde</label> | |
| <p id="accountBalance" class="mt-1 text-lg font-bold text-green-400">€0.00</p> | |
| </div> | |
| <button class="mt-4 w-full bg-gray-800 hover:bg-gray-700 text-white py-2 px-4 rounded-md text-sm font-medium transition border border-gray-700"> | |
| Mettre à jour le profil | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Admin Section --> | |
| <div id="adminSection" class="mt-8 cyber-card p-4 rounded-lg"> | |
| <h3 class="text-lg font-semibold mb-4 flex items-center text-green-400"> | |
| <i class="fas fa-user-shield mr-2"></i> | |
| Zone Administrateur | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="p-3 border border-green-900 rounded-lg bg-gray-800"> | |
| <h4 class="font-medium text-green-400 mb-2">Statistiques</h4> | |
| <div class="flex justify-between text-sm text-gray-300"> | |
| <span>Utilisateurs:</span> | |
| <span class="font-medium">24,856</span> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-300"> | |
| <span>Abonnements actifs:</span> | |
| <span class="font-medium">18,742</span> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-300"> | |
| <span>Revenus mensuels:</span> | |
| <span class="font-medium">€936,700.00</span> | |
| </div> | |
| </div> | |
| <div class="p-3 border border-green-900 rounded-lg bg-gray-800"> | |
| <h4 class="font-medium text-green-400 mb-2">Produits IA</h4> | |
| <div class="flex justify-between text-sm text-gray-300"> | |
| <span>Total produits:</span> | |
| <span class="font-medium">990,099</span> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-300"> | |
| <span>Produits premium:</span> | |
| <span class="font-medium">24,500</span> | |
| </div> | |
| <div class="flex justify-between text-sm text-gray-300"> | |
| <span>Nouveaux ce mois:</span> | |
| <span class="font-medium">3,456</span> | |
| </div> | |
| </div> | |
| <div class="p-3 border border-green-900 rounded-lg bg-gray-800"> | |
| <h4 class="font-medium text-green-400 mb-2">Actions rapides</h4> | |
| <button class="w-full bg-green-600 hover:bg-green-700 text-white py-1 px-3 rounded text-sm mb-2 transition"> | |
| <i class="fas fa-plus mr-1"></i> Ajouter un produit | |
| </button> | |
| <button class="w-full bg-green-600 hover:bg-green-700 text-white py-1 px-3 rounded text-sm mb-2 transition"> | |
| <i class="fas fa-chart-line mr-1"></i> Voir les rapports | |
| </button> | |
| <button class="w-full bg-green-600 hover:bg-green-700 text-white py-1 px-3 rounded text-sm transition"> | |
| <i class="fas fa-users mr-1"></i> Gérer les utilisateurs | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h4 class="font-medium text-green-400 mb-2">Informations de paiement</h4> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="p-3 border border-gray-800 rounded-lg bg-gray-800"> | |
| <h5 class="text-sm font-medium text-gray-300 mb-2 flex items-center"> | |
| <i class="fab fa-paypal mr-2 text-blue-400"></i> | |
| Compte PayPal | |
| </h5> | |
| <p class="text-xs text-gray-400">vgp.bavol@gmail.com</p> | |
| <div class="mt-2 flex justify-between text-sm"> | |
| <span class="text-gray-300">Solde:</span> | |
| <span class="font-medium text-white">€12,456.78</span> | |
| </div> | |
| </div> | |
| <div class="p-3 border border-gray-800 rounded-lg bg-gray-800"> | |
| <h5 class="text-sm font-medium text-gray-300 mb-2 flex items-center"> | |
| <i class="fab fa-stripe mr-2 text-purple-400"></i> | |
| Compte Stripe | |
| </h5> | |
| <p class="text-xs text-gray-400">doctorblog.fr@gmail.com</p> | |
| <div class="mt-2 flex justify-between text-sm"> | |
| <span class="text-gray-300">Solde:</span> | |
| <span class="font-medium text-white">€8,923.45</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Payment Processing Modals --> | |
| <div id="paypalModal" class="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50 hidden"> | |
| <div class="cyber-card rounded-xl p-6 max-w-md w-full"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-semibold text-white">Paiement via PayPal</h3> | |
| <button id="closePaypalModal" class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div id="paypal-button-container" class="mt-4"></div> | |
| </div> | |
| </div> | |
| <div id="stripeModal" class="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50 hidden"> | |
| <div class="cyber-card rounded-xl p-6 max-w-md w-full"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-semibold text-white">Paiement via Stripe</h3> | |
| <button id="closeStripeModal" class="text-gray-400 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <form id="stripe-payment-form" class="space-y-4"> | |
| <div id="stripe-card-element" class="p-3 bg-gray-800 border border-gray-700 rounded-md"></div> | |
| <div id="stripe-card-errors" role="alert" class="text-red-500 text-sm"></div> | |
| <button type="submit" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 px-4 rounded-md font-medium transition"> | |
| Payer <span id="stripe-amount">€0.00</span> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8"> | |
| <div class="mb-4 md:mb-0"> | |
| <h2 class="text-3xl font-bold text-white neon-text">NOS 990099 ASSISTANTS IA</h2> | |
| <p class="text-gray-400">Le plus grand marché d'intelligences artificielles au monde</p> | |
| </div> | |
| <div class="relative w-full md:w-64"> | |
| <input type="text" placeholder="Rechercher un assistant..." class="w-full pl-10 pr-4 py-2 bg-gray-800 border border-gray-700 rounded-md text-white focus:ring-purple-500 focus:border-purple-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| </div> | |
| <!-- Categories --> | |
| <div class="mb-8"> | |
| <h3 class="text-xl font-semibold text-white mb-4">Catégories</h3> | |
| <div class="flex flex-wrap gap-2"> | |
| <button class="px-4 py-2 bg-purple-600 text-white rounded-full text-sm hover:bg-purple-700 transition">Tous</button> | |
| <button class="px-4 py-2 bg-gray-800 text-white rounded-full text-sm hover:bg-gray-700 transition">Marketing</button> | |
| <button class="px-4 py-2 bg-gray-800 text-white rounded-full text-sm hover:bg-gray-700 transition">Développement</button> | |
| <button class="px-4 py-2 bg-gray-800 text-white rounded-full text-sm hover:bg-gray-700 transition">Design</button> | |
| <button class="px-4 py-2 bg-gray-800 text-white rounded-full text-sm hover:bg-gray-700 transition">Finance</button> | |
| <button class="px-4 py-2 bg-gray-800 text-white rounded-full text-sm hover:bg-gray-700 transition">Santé</button> | |
| <button class="px-4 py-2 bg-gray-800 text-white rounded-full text-sm hover:bg-gray-700 transition">Éducation</button> | |
| <button class="px-4 py-2 bg-gray-800 text-white rounded-full text-sm hover:bg-gray-700 transition">Juridique</button> | |
| <button class="px-4 py-2 bg-gray-800 text-white rounded-full text-sm hover:bg-gray-700 transition">Plus...</button> | |
| </div> | |
| </div> | |
| <!-- AI Assistants Grid --> | |
| <div class="scroll-container"> | |
| <div class="grid-container"> | |
| <!-- This will be populated with 990099 AI assistants dynamically --> | |
| <!-- For demo purposes, we'll show a sample of 50 assistants --> | |
| <!-- Each button will open in a new window --> | |
| <button class="ai-button" onclick="window.open('https://example.com/ai/1', '_blank')"> | |
| <i class="fas fa-robot mr-2"></i> Assistant Marketing Pro | |
| </button> | |
| <button class="ai-button" onclick="window.open('https://example.com/ai/2', '_blank')"> | |
| <i class="fas fa-pen-fancy mr-2"></i> Assistant Rédaction | |
| </button> | |
| <button class="ai-button" onclick="window.open('https://example.com/ai/3', '_blank')"> | |
| <i class="fas fa-code mr-2"></i> Assistant Développement | |
| </button> | |
| <button class="ai-button" onclick="window.open('https://example.com/ai/4', '_blank')"> | |
| <i class="fas fa-paint-brush mr-2"></i> Assistant Design | |
| </button> | |
| <button class="ai-button" onclick="window.open('https://example.com/ai/5', '_blank')"> | |
| <i class="fas fa-chart-line mr-2"></i> Assistant Finance Pro | |
| </button> | |
| <button class="ai-button" onclick="window.open('https://example.com/ai/6', '_blank')"> | |
| <i class="fas fa-heartbeat mr-2"></i> Assistant Santé | |
| </button> | |
| <button class="ai-button" onclick="window.open('https://example.com/ai/7', '_blank')"> | |
| <i class="fas fa-graduation-cap mr-2"></i> Assistant Éducation | |
| </button> | |
| <button class="ai-button" onclick="window.open('https://example.com/ai/8', '_blank')"> | |
| <i class="fas fa-gavel mr-2"></i> Assistant Juridique | |
| </button> | |
| <button class="ai-button" onclick="window.open('https://example.com/ai/9', '_blank')"> | |
| <i class="fas fa-calculator mr-2"></i> Assistant Comptabilité | |
| </button> | |
| <button class="ai-button" onclick="window.open('https://example.com/ai/10', '_blank')"> | |
| <i class="fas fa-video mr-2"></i> Assistant Vidéo | |
| </button> | |
| <button class="ai-button" onclick="window.open('https://example.com/ai/11', '_blank')"> | |
| <i class="fas fa-music mr-2"></i> Assistant Musique | |
| </button> | |
| <button class="ai-button" onclick="window.open('https://example.com/ai/12', '_blank')"> | |
| <i class="fas fa-language mr-2"></i> Assistant Traduction | |
| </button> | |
| <button class="ai-button" onclick="window.open('https://example.com/ai/13', '_blank')"> | |
| <i class="fas fa-utensils mr-2"></i> Assistant Culinaire | |
| </button> | |
| <button class="ai-button" onclick="window.open('https://example.com/ai/14', '_blank')"> | |
| <i class="fas fa-plane mr-2"></i> Assistant Voyage | |
| </button> | |
| <button class="ai-button" onclick="window.open('https://example.com/ai/15', '_blank')"> | |
| <i class="fas fa-home mr-2"></i> Assistant Immobilier | |
| </button> | |
| <button class="ai-button" onclick="window.open('https://example.com/ai/16', '_blank')"> | |
| <i class="fas fa-car mr-2"></i> Assistant Automobile | |
| </button> | |
| <button class="ai-button" onclick="window.open('https://example.com/ai/17', '_blank')"> | |
| <i class="fas fa-shopping-bag mr-2"></i> Assistant E-commerce | |
| </button> | |
| <button class="ai-button" onclick="window.open('https://example.com/ai/18', '_blank')"> | |
| <i class="fas fa-gamepad mr-2"></i> Assistant Jeux Vidéo | |
| </button> | |
| <button class="ai-button" onclick="window.open('https://example.com/ai/19', '_blank')"> | |
| <i class="fas fa-dna mr-2"></i> Assistant Scientifique | |
| </button> | |
| <button class="ai-button" onclick="window.open('https://example.com/ai/20', '_blank')"> | |
| <i class="fas fa-microscope mr-2"></i> Assistant Recherche | |
| </button> | |
| <!-- More buttons would be added here to reach 990099 --> | |
| <!-- In a real implementation, this would be dynamically loaded with pagination --> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-gray-400 py-8 border-t border-gray-800"> | |
| <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-semibold text-white mb-4">MEGA MARCHÉ IA</h3> | |
| <p>La plateforme ultime pour trouver l'assistant IA parfait pour tous vos besoins professionnels et personnels.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-md font-semibold text-white mb-4">Navigation</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white transition">Accueil</a></li> | |
| <li><a href="#" class="hover:text-white transition">Assistants</a></li> | |
| <li><a href="#" class="hover:text-white transition">Prix</a></li> | |
| <li><a href="#" class="hover:text-white transition">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-md font-semibold text-white mb-4">Support</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white transition">FAQ</a></li> | |
| <li><a href="#" class="hover:text-white transition">Contact</a></li> | |
| <li><a href="#" class="hover:text-white transition">Politique de confidentialité</a></li> | |
| <li><a href="#" class="hover:text-white transition">Conditions d'utilisation</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-md font-semibold text-white mb-4">Newsletter</h4> | |
| <p class="mb-2">Abonnez-vous pour recevoir les dernières mises à jour.</p> | |
| <div class="flex"> | |
| <input type="email" placeholder="Votre email" class="px-3 py-2 bg-gray-800 text-white rounded-l-md focus:outline-none w-full border border-gray-700"> | |
| <button class="gradient-bg text-white px-4 py-2 rounded-r-md hover:opacity-90 transition"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center"> | |
| <p>© 2023 MEGA MARCHÉ IA. Tous droits réservés.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |