Spaces:

docto41
/

hyper-assistant

Running

App Files Files Community

docto41 commited on May 15, 2025

Commit

20d253f

verified ·

1 Parent(s): 3aa2292

Add 2 files

Browse files

Files changed (2) hide show

index.html +439 -78
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -6,6 +6,7 @@
     <title>MegaMarket IA - 9,898,989 Outils IA</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>
         .hero-gradient {
             background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
@@ -31,6 +32,27 @@
             background: rgba(255, 255, 255, 0.1);
             backdrop-filter: blur(5px);
         }
     </style>
 </head>
 <body class="min-h-screen bg-gray-900 text-white">
@@ -44,16 +66,113 @@
             <div class="hidden md:flex space-x-6">
                 <a href="#categories" class="hover:text-blue-300 transition">Catégories</a>
                 <a href="#tools" class="hover:text-blue-300 transition">Outils</a>
-                <a href="#resources" class="hover:text-blue-300 transition">Ressources</a>
             </div>
-            <div class="relative">
-                <input type="text" placeholder="Rechercher parmi 9,898,989 outils..."
-                       class="bg-gray-700 px-4 py-2 rounded-lg w-64 focus:outline-none focus:ring-2 focus:ring-blue-500">
-                <i class="fas fa-search absolute right-3 top-3 text-gray-400"></i>
             </div>
         </div>
     </nav>
     <!-- Hero Section -->
     <section class="hero-gradient py-20 px-6">
         <div class="container mx-auto text-center">
@@ -184,8 +303,9 @@
                             <i class="fas fa-star-half-alt"></i>
                             <span class="text-gray-400 ml-1">690</span>
                         </div>
-                        <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded text-sm font-medium">
-                            Utiliser
                         </button>
                     </div>
                 </div>
@@ -206,8 +326,9 @@
                             <i class="fas fa-star"></i>
                             <span class="text-gray-400 ml-1">438</span>
                         </div>
-                        <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded text-sm font-medium">
-                            Utiliser
                         </button>
                     </div>
                 </div>
@@ -228,8 +349,9 @@
                             <i class="far fa-star"></i>
                             <span class="text-gray-400 ml-1">317</span>
                         </div>
-                        <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded text-sm font-medium">
-                            Utiliser
                         </button>
                     </div>
                 </div>
@@ -250,8 +372,9 @@
                             <i class="fas fa-star"></i>
                             <span class="text-gray-400 ml-1">767</span>
                         </div>
-                        <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded text-sm font-medium">
-                            Utiliser
                         </button>
                     </div>
                 </div>
@@ -272,8 +395,9 @@
                             <i class="fas fa-star-half-alt"></i>
                             <span class="text-gray-400 ml-1">792</span>
                         </div>
-                        <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded text-sm font-medium">
-                            Utiliser
                         </button>
                     </div>
                 </div>
@@ -294,8 +418,9 @@
                             <i class="fas fa-star"></i>
                             <span class="text-gray-400 ml-1">525</span>
                         </div>
-                        <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded text-sm font-medium">
-                            Utiliser
                         </button>
                     </div>
                 </div>
@@ -309,63 +434,148 @@
         </div>
     </section>
-    <!-- Resources Section -->
-    <section id="resources" class="py-16 px-6 bg-gray-800">
         <div class="container mx-auto">
-            <h2 class="text-3xl font-bold text-center mb-12">Ressources</h2>
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
-                <div class="bg-gray-700 p-6 rounded-xl">
-                    <div class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center mb-4">
-                        <i class="fas fa-book text-xl"></i>
-                    </div>
-                    <h3 class="text-xl font-bold mb-2">Documentation</h3>
-                    <p class="text-gray-400 mb-4">
-                        Guides complets pour utiliser nos outils IA et intégrations.
-                    </p>
-                    <a href="#" class="text-blue-400 hover:text-blue-300 font-medium flex items-center">
-                        Explorer <i class="fas fa-arrow-right ml-2"></i>
-                    </a>
-                </div>
-                <div class="bg-gray-700 p-6 rounded-xl">
-                    <div class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center mb-4">
-                        <i class="fas fa-newspaper text-xl"></i>
                     </div>
-                    <h3 class="text-xl font-bold mb-2">Blog</h3>
-                    <p class="text-gray-400 mb-4">
-                        Articles sur les dernières tendances et innovations en IA.
-                    </p>
-                    <a href="#" class="text-blue-400 hover:text-blue-300 font-medium flex items-center">
-                        Lire <i class="fas fa-arrow-right ml-2"></i>
-                    </a>
                 </div>
-                <div class="bg-gray-700 p-6 rounded-xl">
-                    <div class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center mb-4">
-                        <i class="fas fa-graduation-cap text-xl"></i>
                     </div>
-                    <h3 class="text-xl font-bold mb-2">Tutoriels</h3>
-                    <p class="text-gray-400 mb-4">
-                        Vidéos et guides pas-à-pas pour maîtriser nos outils.
-                    </p>
-                    <a href="#" class="text-blue-400 hover:text-blue-300 font-medium flex items-center">
-                        Apprendre <i class="fas fa-arrow-right ml-2"></i>
-                    </a>
                 </div>
             </div>
-            <div class="mt-16 max-w-2xl mx-auto bg-gray-700 p-8 rounded-xl">
-                <h3 class="text-2xl font-bold text-center mb-4">Newsletter</h3>
-                <p class="text-center text-gray-400 mb-6">
-                    Recevez les nouveaux outils IA chaque jour directement dans votre boîte mail.
-                </p>
-                <div class="flex flex-col sm:flex-row gap-3">
-                    <input type="email" placeholder="Votre email"
-                           class="flex-grow bg-gray-800 border border-gray-600 rounded px-4 py-3 focus:outline-none focus:ring-2 focus:ring-blue-500">
-                    <button class="bg-blue-600 hover:bg-blue-700 px-6 py-3 rounded font-medium whitespace-nowrap">
-                        S'abonner
-                    </button>
                 </div>
             </div>
         </div>
@@ -434,24 +644,175 @@
     </footer>
     <script>
-        // Tool rating animation on hover
-        document.querySelectorAll('.tool-card').forEach(card => {
-            card.addEventListener('mouseenter', () => {
-                const stars = card.querySelectorAll('.fa-star, .fa-star-half-alt, .far.fa-star');
-                stars.forEach(star => {
-                    if (star.classList.contains('far')) {
-                        star.classList.replace('far', 'fas');
-                        star.classList.add('text-yellow-400');
-                    }
-                });
             });
-            card.addEventListener('mouseleave', () => {
-                const stars = card.querySelectorAll('.fa-star, .fa-star-half-alt');
-                // Here you would restore the original rating state
-                // For demo purposes, we're just showing all stars
             });
         });
     </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=docto41/hyper-assistant" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

     <title>MegaMarket IA - 9,898,989 Outils IA</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>
     <style>
         .hero-gradient {
             background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
             background: rgba(255, 255, 255, 0.1);
             backdrop-filter: blur(5px);
         }
+        .payment-method {
+            transition: all 0.3s ease;
+        }
+        .payment-method:hover {
+            transform: scale(1.05);
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+        }
+        .cart-item {
+            transition: all 0.2s ease;
+        }
+        .cart-item:hover {
+            background-color: rgba(59, 130, 246, 0.1);
+        }
+        .modal {
+            transition: opacity 0.3s ease, transform 0.3s ease;
+        }
+        .modal-hidden {
+            opacity: 0;
+            transform: translateY(20px);
+            pointer-events: none;
+        }
     </style>
 </head>
 <body class="min-h-screen bg-gray-900 text-white">
             <div class="hidden md:flex space-x-6">
                 <a href="#categories" class="hover:text-blue-300 transition">Catégories</a>
                 <a href="#tools" class="hover:text-blue-300 transition">Outils</a>
+                <a href="#dashboard" class="hover:text-blue-300 transition">Tableau de bord</a>
             </div>
+            <div class="flex items-center space-x-4">
+                <div class="relative">
+                    <input type="text" placeholder="Rechercher parmi 9,898,989 outils..."
+                           class="bg-gray-700 px-4 py-2 rounded-lg w-64 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                    <i class="fas fa-search absolute right-3 top-3 text-gray-400"></i>
+                </div>
+                <button onclick="toggleCart()" class="relative">
+                    <i class="fas fa-shopping-cart text-xl"></i>
+                    <span id="cart-count" class="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
+                </button>
+                <button id="login-btn" onclick="toggleAuthModal()" class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded text-sm font-medium">
+                    Connexion
+                </button>
             </div>
         </div>
     </nav>
+    <!-- Shopping Cart Sidebar -->
+    <div id="cart-sidebar" class="fixed top-0 right-0 h-full w-96 bg-gray-800 shadow-xl z-50 transform translate-x-full transition-transform duration-300 overflow-y-auto">
+        <div class="p-6">
+            <div class="flex justify-between items-center mb-6">
+                <h2 class="text-2xl font-bold">Votre Panier</h2>
+                <button onclick="toggleCart()" class="text-gray-400 hover:text-white">
+                    <i class="fas fa-times text-xl"></i>
+                </button>
+            </div>
+            <div id="cart-items" class="space-y-4 mb-6">
+                <!-- 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-3"></i>
+                    <p>Votre panier est vide</p>
+                </div>
+            </div>
+            <div class="border-t border-gray-700 pt-4 mb-6">
+                <div class="flex justify-between mb-2">
+                    <span class="text-gray-400">Sous-total:</span>
+                    <span id="cart-subtotal" class="font-bold">€0.00</span>
+                </div>
+                <div class="flex justify-between mb-4">
+                    <span class="text-gray-400">Taxes:</span>
+                    <span id="cart-tax" class="font-bold">€0.00</span>
+                </div>
+                <div class="flex justify-between text-xl font-bold">
+                    <span>Total:</span>
+                    <span id="cart-total" class="text-blue-400">€0.00</span>
+                </div>
+            </div>
+            <div class="space-y-3">
+                <button id="paypal-button" class="w-full bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-3 rounded-lg flex items-center justify-center">
+                    <i class="fab fa-paypal mr-2"></i> Payer avec PayPal
+                </button>
+                <button id="stripe-button" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 rounded-lg flex items-center justify-center">
+                    <i class="fab fa-cc-stripe mr-2"></i> Payer avec Stripe
+                </button>
+            </div>
+        </div>
+    </div>
+    <!-- Authentication Modal -->
+    <div id="auth-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center modal modal-hidden">
+        <div class="bg-gray-800 rounded-lg p-8 w-full max-w-md">
+            <div class="flex justify-between items-center mb-6">
+                <h2 class="text-2xl font-bold">Connexion / Inscription</h2>
+                <button onclick="toggleAuthModal()" class="text-gray-400 hover:text-white">
+                    <i class="fas fa-times text-xl"></i>
+                </button>
+            </div>
+            <div class="mb-6">
+                <label class="block text-gray-400 mb-2">Email</label>
+                <input type="email" id="auth-email" class="w-full bg-gray-700 border border-gray-600 rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
+            </div>
+            <div class="mb-6">
+                <label class="block text-gray-400 mb-2">Mot de passe</label>
+                <input type="password" id="auth-password" class="w-full bg-gray-700 border border-gray-600 rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
+            </div>
+            <div class="flex justify-between items-center mb-6">
+                <div>
+                    <input type="checkbox" id="remember-me" class="mr-2">
+                    <label for="remember-me" class="text-gray-400">Se souvenir de moi</label>
+                </div>
+                <a href="#" class="text-blue-400 hover:text-blue-300 text-sm">Mot de passe oublié?</a>
+            </div>
+            <button id="login-submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-lg mb-4">
+                Se connecter
+            </button>
+            <div class="text-center text-gray-400 mb-4">OU</div>
+            <button class="w-full bg-gray-700 hover:bg-gray-600 text-white font-bold py-3 rounded-lg mb-4 flex items-center justify-center">
+                <i class="fab fa-google mr-2"></i> Continuer avec Google
+            </button>
+            <div class="text-center text-gray-400">
+                Nouveau sur MegaMarket IA? <a href="#" class="text-blue-400 hover:text-blue-300" onclick="switchToRegister()">Créer un compte</a>
+            </div>
+        </div>
+    </div>
     <!-- Hero Section -->
     <section class="hero-gradient py-20 px-6">
         <div class="container mx-auto text-center">
                             <i class="fas fa-star-half-alt"></i>
                             <span class="text-gray-400 ml-1">690</span>
                         </div>
+                        <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded text-sm font-medium add-to-cart"
+                                data-name="Khanmigo" data-price="9.99" data-id="1">
+                            Ajouter au panier
                         </button>
                     </div>
                 </div>
                             <i class="fas fa-star"></i>
                             <span class="text-gray-400 ml-1">438</span>
                         </div>
+                        <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded text-sm font-medium add-to-cart"
+                                data-name="Grammarly" data-price="12.99" data-id="2">
+                            Ajouter au panier
                         </button>
                     </div>
                 </div>
                             <i class="far fa-star"></i>
                             <span class="text-gray-400 ml-1">317</span>
                         </div>
+                        <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded text-sm font-medium add-to-cart"
+                                data-name="Anthropic" data-price="14.99" data-id="3">
+                            Ajouter au panier
                         </button>
                     </div>
                 </div>
                             <i class="fas fa-star"></i>
                             <span class="text-gray-400 ml-1">767</span>
                         </div>
+                        <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded text-sm font-medium add-to-cart"
+                                data-name="Notion AI" data-price="8.99" data-id="4">
+                            Ajouter au panier
                         </button>
                     </div>
                 </div>
                             <i class="fas fa-star-half-alt"></i>
                             <span class="text-gray-400 ml-1">792</span>
                         </div>
+                        <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded text-sm font-medium add-to-cart"
+                                data-name="Runway ML" data-price="19.99" data-id="5">
+                            Ajouter au panier
                         </button>
                     </div>
                 </div>
                             <i class="fas fa-star"></i>
                             <span class="text-gray-400 ml-1">525</span>
                         </div>
+                        <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded text-sm font-medium add-to-cart"
+                                data-name="Midjourney" data-price="24.99" data-id="6">
+                            Ajouter au panier
                         </button>
                     </div>
                 </div>
         </div>
     </section>
+    <!-- Dashboard Section -->
+    <section id="dashboard" class="py-16 px-6 bg-gray-800">
         <div class="container mx-auto">
+            <h2 class="text-3xl font-bold text-center mb-12">Tableau de bord</h2>
+            <div class="bg-gray-700 rounded-xl p-6 mb-8">
+                <h3 class="text-xl font-bold mb-6">Informations de paiement</h3>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+                    <div class="payment-method bg-gray-800 p-6 rounded-lg">
+                        <div class="flex items-center mb-4">
+                            <i class="fab fa-paypal text-3xl text-blue-400 mr-3"></i>
+                            <h4 class="text-lg font-bold">PayPal</h4>
+                        </div>
+                        <p class="text-gray-400 mb-4">Connectez votre compte PayPal pour recevoir des paiements</p>
+                        <button class="w-full bg-yellow-500 hover:bg-yellow-600 text-black font-bold py-2 rounded-lg">
+                            Connecter PayPal
+                        </button>
+                    </div>
+                    <div class="payment-method bg-gray-800 p-6 rounded-lg">
+                        <div class="flex items-center mb-4">
+                            <i class="fab fa-cc-stripe text-3xl text-purple-400 mr-3"></i>
+                            <h4 class="text-lg font-bold">Stripe</h4>
+                        </div>
+                        <p class="text-gray-400 mb-4">Connectez votre compte Stripe pour recevoir des paiements</p>
+                        <button class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 rounded-lg">
+                            Connecter Stripe
+                        </button>
                     </div>
                 </div>
+                <div class="bg-gray-800 rounded-lg p-6">
+                    <h4 class="text-lg font-bold mb-4">Détails de paiement</h4>
+                    <div class="overflow-x-auto">
+                        <table class="w-full">
+                            <thead>
+                                <tr class="text-left border-b border-gray-600">
+                                    <th class="pb-2">Date</th>
+                                    <th class="pb-2">Méthode</th>
+                                    <th class="pb-2">Montant</th>
+                                    <th class="pb-2">Statut</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr class="border-b border-gray-600">
+                                    <td class="py-3">15/06/2023</td>
+                                    <td>PayPal</td>
+                                    <td class="text-green-400">€49.99</td>
+                                    <td><span class="bg-green-900 text-green-300 px-2 py-1 rounded text-xs">Payé</span></td>
+                                </tr>
+                                <tr class="border-b border-gray-600">
+                                    <td class="py-3">10/06/2023</td>
+                                    <td>Stripe</td>
+                                    <td class="text-green-400">€29.99</td>
+                                    <td><span class="bg-green-900 text-green-300 px-2 py-1 rounded text-xs">Payé</span></td>
+                                </tr>
+                                <tr>
+                                    <td class="py-3">05/06/2023</td>
+                                    <td>PayPal</td>
+                                    <td class="text-yellow-400">€19.99</td>
+                                    <td><span class="bg-yellow-900 text-yellow-300 px-2 py-1 rounded text-xs">En attente</span></td>
+                                </tr>
+                            </tbody>
+                        </table>
                     </div>
                 </div>
             </div>
+            <div class="bg-gray-700 rounded-xl p-6">
+                <h3 class="text-xl font-bold mb-6">Abonnement</h3>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div class="bg-gray-800 p-6 rounded-lg border border-gray-600">
+                        <h4 class="text-lg font-bold mb-2">Gratuit</h4>
+                        <p class="text-gray-400 mb-4">Accès limité aux outils</p>
+                        <div class="text-3xl font-bold mb-6">€0<span class="text-gray-400 text-base">/mois</span></div>
+                        <ul class="space-y-2 mb-6">
+                            <li class="flex items-center">
+                                <i class="fas fa-check text-green-400 mr-2"></i>
+                                <span>3 outils/mois</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i class="fas fa-check text-green-400 mr-2"></i>
+                                <span>Support de base</span>
+                            </li>
+                            <li class="flex items-center text-gray-500">
+                                <i class="fas fa-times text-red-400 mr-2"></i>
+                                <span>Accès complet</span>
+                            </li>
+                        </ul>
+                        <button class="w-full bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 rounded-lg">
+                            Actuel
+                        </button>
+                    </div>
+                    <div class="bg-gray-800 p-6 rounded-lg border-2 border-blue-500 relative">
+                        <div class="absolute top-0 right-0 bg-blue-500 text-white text-xs font-bold px-2 py-1 rounded-bl-lg">POPULAIRE</div>
+                        <h4 class="text-lg font-bold mb-2">Premium</h4>
+                        <p class="text-gray-400 mb-4">Accès complet aux outils</p>
+                        <div class="text-3xl font-bold mb-6">€9.99<span class="text-gray-400 text-base">/mois</span></div>
+                        <ul class="space-y-2 mb-6">
+                            <li class="flex items-center">
+                                <i class="fas fa-check text-green-400 mr-2"></i>
+                                <span>Outils illimités</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i class="fas fa-check text-green-400 mr-2"></i>
+                                <span>Support prioritaire</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i class="fas fa-check text-green-400 mr-2"></i>
+                                <span>Accès complet</span>
+                            </li>
+                        </ul>
+                        <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 rounded-lg">
+                            S'abonner
+                        </button>
+                    </div>
+                    <div class="bg-gray-800 p-6 rounded-lg border border-gray-600">
+                        <h4 class="text-lg font-bold mb-2">Entreprise</h4>
+                        <p class="text-gray-400 mb-4">Pour les équipes et organisations</p>
+                        <div class="text-3xl font-bold mb-6">€29.99<span class="text-gray-400 text-base">/mois</span></div>
+                        <ul class="space-y-2 mb-6">
+                            <li class="flex items-center">
+                                <i class="fas fa-check text-green-400 mr-2"></i>
+                                <span>Tous les avantages Premium</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i class="fas fa-check text-green-400 mr-2"></i>
+                                <span>Gestion d'équipe</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i class="fas fa-check text-green-400 mr-2"></i>
+                                <span>Support 24/7</span>
+                            </li>
+                        </ul>
+                        <button class="w-full bg-gray-700 hover:bg-gray-600 text-white font-bold py-2 rounded-lg">
+                            Contactez-nous
+                        </button>
+                    </div>
                 </div>
             </div>
         </div>
     </footer>
     <script>
+        // Cart functionality
+        let cart = [];
+        let isLoggedIn = false;
+        // Toggle cart visibility
+        function toggleCart() {
+            const cartSidebar = document.getElementById('cart-sidebar');
+            cartSidebar.classList.toggle('translate-x-full');
+            updateCartUI();
+        }
+        // Toggle auth modal visibility
+        function toggleAuthModal() {
+            const authModal = document.getElementById('auth-modal');
+            authModal.classList.toggle('modal-hidden');
+        }
+        // Switch to register form
+        function switchToRegister() {
+            const loginSubmit = document.getElementById('login-submit');
+            const loginBtn = document.getElementById('login-btn');
+            loginSubmit.textContent = "Créer un compte";
+            loginBtn.textContent = "Inscription";
+        }
+        // Add to cart functionality
+        document.querySelectorAll('.add-to-cart').forEach(button => {
+            button.addEventListener('click', function() {
+                if (!isLoggedIn) {
+                    toggleAuthModal();
+                    return;
+                }
+                const id = this.getAttribute('data-id');
+                const name = this.getAttribute('data-name');
+                const price = parseFloat(this.getAttribute('data-price'));
+                // Check if item already in cart
+                const existingItem = cart.find(item => item.id === id);
+                if (existingItem) {
+                    existingItem.quantity += 1;
+                } else {
+                    cart.push({
+                        id,
+                        name,
+                        price,
+                        quantity: 1
+                    });
+                }
+                updateCartUI();
+                toggleCart();
             });
+        });
+        // Update cart UI
+        function updateCartUI() {
+            const cartItemsContainer = document.getElementById('cart-items');
+            const cartCount = document.getElementById('cart-count');
+            const cartSubtotal = document.getElementById('cart-subtotal');
+            const cartTax = document.getElementById('cart-tax');
+            const cartTotal = document.getElementById('cart-total');
+            // Update cart count
+            const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
+            cartCount.textContent = totalItems;
+            // Calculate totals
+            const subtotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
+            const tax = subtotal * 0.2; // 20% tax
+            const total = subtotal + tax;
+            // Update totals display
+            cartSubtotal.textContent = `€${subtotal.toFixed(2)}`;
+            cartTax.textContent = `€${tax.toFixed(2)}`;
+            cartTotal.textContent = `€${total.toFixed(2)}`;
+            // Update cart items
+            if (cart.length === 0) {
+                cartItemsContainer.innerHTML = `
+                    <div class="text-center text-gray-500 py-10">
+                        <i class="fas fa-shopping-cart text-4xl mb-3"></i>
+                        <p>Votre panier est vide</p>
+                    </div>
+                `;
+            } else {
+                cartItemsContainer.innerHTML = cart.map(item => `
+                    <div class="cart-item bg-gray-700 p-4 rounded-lg flex justify-between items-center">
+                        <div>
+                            <h4 class="font-medium">${item.name}</h4>
+                            <p class="text-gray-400 text-sm">€${item.price.toFixed(2)} x ${item.quantity}</p>
+                        </div>
+                        <div class="flex items-center">
+                            <span class="font-bold mr-4">€${(item.price * item.quantity).toFixed(2)}</span>
+                            <button class="remove-item text-red-400 hover:text-red-300" data-id="${item.id}">
+                                <i class="fas fa-trash"></i>
+                            </button>
+                        </div>
+                    </div>
+                `).join('');
+                // Add event listeners to remove buttons
+                document.querySelectorAll('.remove-item').forEach(button => {
+                    button.addEventListener('click', function() {
+                        const id = this.getAttribute('data-id');
+                        cart = cart.filter(item => item.id !== id);
+                        updateCartUI();
+                    });
+                });
+            }
+        }
+        // Login functionality
+        document.getElementById('login-submit').addEventListener('click', function() {
+            const email = document.getElementById('auth-email').value;
+            const password = document.getElementById('auth-password').value;
+            if (email && password) {
+                isLoggedIn = true;
+                document.getElementById('login-btn').textContent = "Mon compte";
+                toggleAuthModal();
+                // Show welcome message
+                const welcomeMsg = document.createElement('div');
+                welcomeMsg.className = 'fixed top-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg z-50';
+                welcomeMsg.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Connexion réussie!';
+                document.body.appendChild(welcomeMsg);
+                setTimeout(() => {
+                    welcomeMsg.remove();
+                }, 3000);
+            }
+        });
+        // Payment buttons
+        document.getElementById('paypal-button').addEventListener('click', function() {
+            if (cart.length === 0) return;
+            alert('Redirection vers PayPal pour le paiement de €' +
+                  document.getElementById('cart-total').textContent.substring(1));
+            // In a real app, you would integrate with PayPal API here
+        });
+        document.getElementById('stripe-button').addEventListener('click', function() {
+            if (cart.length === 0) return;
+            // In a real app, you would use Stripe.js to create a payment intent
+            const stripe = Stripe('pk_test_51N...'); // Your publishable key
+            stripe.redirectToCheckout({
+                lineItems: cart.map(item => ({
+                    price: 'price_' + item.id, // You would create these in Stripe dashboard
+                    quantity: item.quantity
+                })),
+                mode: 'payment',
+                successUrl: 'https://yourwebsite.com/success',
+                cancelUrl: 'https://yourwebsite.com/cancel'
+            }).then(function(result) {
+                if (result.error) {
+                    alert(result.error.message);
+                }
             });
         });
+        // Initialize
+        updateCartUI();
     </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=docto41/hyper-assistant" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt CHANGED Viewed

@@ -5,4 +5,5 @@ AJOUTER ENCORE PLUS DE 325666 Hyper Assistant IA
 je veux que vous afficher les boutons des 325k + service en vrai reel , ouver chaque bouton apuiyer dans une nouvelle page
 activer tout les boutons
 Créez votre plateforme de cours en ligne automatiquement Notre IA spécialisée génère des plateformes éducatives complètes en quelques minutes, sans aucune compétence technique requise. en 10 seconde
- MegaMarket IA Rechercher parmi 9,898,989 outils IA...  9,898,989 Outils IA 100% Fonctionnels Ouverture Automatique Mise à jour en Temps Réel Prêts à l'Emploi 9,898,989 Assistants IA 247 Catégories 24/7 Disponibilité ∞ Possibilités Tous (9 898 989) Chatbots (1 250 000) Génération d'Images (980 000) Productivité (875 000) Développement (765 000) Audio & Voix (654 000) Vidéo (543 000) Marketing (432 000) Recherche (321 000) Business (210 000) Éducation (198 000) Créativité (187 000) Santé (176 000) Finance (165 000) Juridique (154 000) Design (143 000) Rédaction (132 000) Traduction (121 000) SEO (110 000) Réseaux Sociaux (99 000) Nouveautés (25 000) Khanmigo 690 Tuteur IA de Khan Academy - Version 4.6  Utiliser  Grammarly 438 Correcteur et assistant d'écriture - Version 8.4  Utiliser  Anthropic 317 IA conversationnelle sécurisée - Version 3.6  Utiliser  Notion AI 767 Assistant d'écriture intégré à Notion - Version 7.1  Utiliser  Adept 4 IA pour automatiser les workflows - Version 3.0  Utiliser  Runway ML 792 Génération et édition vidéo - Version 2.5  Utiliser  Pictory 275 Création de vidéos à partir de texte - Version 0.8  Utiliser  Anyword 50 Copywriting optimisé - Version 7.2  Utiliser  Bard 729 Assistant IA conversationnel par Google - Version 8.1  Utiliser  Notion AI 552 Assistant d'écriture intégré à Notion - Version 6.6  Utiliser  Peppertype 191 Génération de contenu - Version 6.7  Utiliser  Tabnine 457 Autocomplétion de code - Version 7.0  Utiliser  Anyword 309 Copywriting optimisé - Version 1.5  Utiliser  Voicemod 832 Modification de voix en temps réel - Version 4.5  Utiliser  Peppertype 688 Génération de contenu - Version 8.1  Utiliser  Midjourney 525 Génération d'images par IA - Version 3.1  Utiliser  Notion AI 49 Assistant d'écriture intégré à Notion - Version 0.7  Utiliser  Murf AI 440 Générateur de voix réalistes - Version 9.8  Utiliser  Pictory 837 Création de vidéos à partir de texte - Version 1.0  Utiliser  Quillbot 946 Paraphraser et assistant d'écriture - Version 8.9  Utiliser  Peppertype 736 Génération de contenu - Version 7.6  Utiliser  Adobe Sensei 571 IA créative d'Adobe - Version 1.6  Utiliser  Notion AI 973 Assistant d'écriture intégré à Notion - Version 2.0  Utiliser  Canva AI 710 Design assisté par IA - Version 5.2  Utiliser  Tabnine 273 Autocomplétion de code - Version 4.8  Utiliser  Replit Ghostwriter 758 IA pour coder dans le navigateur - Version 1.2  Utiliser  NightCafe 475 Génération d'art par IA - Version 4.0  Utiliser  Elicit 161 Assistant de recherche académique - Version 4.9  Utiliser  Voicemod 793 Modification de voix en temps réel - Version 7.1  Utiliser  Murf AI 475 Générateur de voix réalistes - Version 0.7  Utiliser  Runway ML 9 Génération et édition vidéo - Version 2.9  Utiliser  Khanmigo 255 Tuteur IA de Khan Academy - Version 9.2  Utiliser  Stable Diffusion 395 Génération d'images open-source - Version 7.5  Utiliser  Cohere 627 IA pour les entreprises - Version 4.2  Utiliser  Quillbot 427 Paraphraser et assistant d'écriture - Version 8.4  Utiliser  Adept 431 IA pour automatiser les workflows - Version 7.6  Utiliser  Adobe Sensei 435 IA créative d'Adobe - Version 7.9  Utiliser  Midjourney 563 Génération d'images par IA - Version 1.1  Utiliser  HeyGen 33 Création de vidéos avec avatars - Version 8.0  Utiliser  ElevenLabs 122 Synthèse vocale avancée - Version 7.2  Utiliser  Leonardo.AI 236 Génération et édition d'images - Version 5.7  Utiliser  Tabnine 625 Autocomplétion de code - Version 8.3  Utiliser  ChatGPT 894 Assistant conversationnel avancé par OpenAI - Version 5.4  Utiliser  Adobe Sensei 361 IA créative d'Adobe - Version 9.2  Utiliser  Elicit 46 Assistant de recherche académique - Version 6.0  Utiliser  Fireflies 958 Assistant de réunion IA - Version 0.1  Utiliser  Leonardo.AI 295 Génération et édition d'images - Version 2.0  Utiliser  Gong 454 Analyse d'appels commerciaux - Version 0.3  Utiliser  Tabnine 720 Autocomplétion de code - Version 0.2  Utiliser  Anthropic 593 IA conversationnelle sécurisée - Version 1.9  Utiliser  Research Rabbit 154 Cartographie de la recherche - Version 0.6  Utiliser  Voicemod 642 Modification de voix en temps réel - Version 8.7  Utiliser  Quillbot 12 Paraphraser et assistant d'écriture - Version 0.3  Utiliser  Anyword 647 Copywriting optimisé - Version 3.4  Utiliser  Claude AI 293 Assistant IA par Anthropic - Version 7.6  Utiliser  Scite 362 Analyse de citations scientifiques - Version 5.4  Utiliser  Runway 225 Outils créatifs avec IA - Version 3.3  Utiliser  Claude AI 154 Assistant IA par Anthropic - Version 2.9  Utiliser  Fliki 232 Vidéos avec voix IA et images - Version 8.7  Utiliser  Runway ML 922 Génération et édition vidéo - Version 8.7  Utiliser  MegaMarket IA La plus grande collection d'assistants IA prêts à l'emploi avec 9,898,989 outils réels.  Catégories Populaires Tous (9 898 989) Chatbots (1 250 000) Génération d'Images (980 000) Productivité (875 000) Développement (765 000) Audio & Voix (654 000) Vidéo (543 000) Ressources Documentation Blog Tutoriels API Newsletter Recevez les nouveaux outils IA chaque jour.  Votre email  © 2023 MegaMarket IA. Tous droits réservés.  Conditions Confidentialité CGU Made with DeepSite LogoDeepSite - 🧬 Remix

 je veux que vous afficher les boutons des 325k + service en vrai reel , ouver chaque bouton apuiyer dans une nouvelle page
 activer tout les boutons
 Créez votre plateforme de cours en ligne automatiquement Notre IA spécialisée génère des plateformes éducatives complètes en quelques minutes, sans aucune compétence technique requise. en 10 seconde
+ MegaMarket IA Rechercher parmi 9,898,989 outils IA...  9,898,989 Outils IA 100% Fonctionnels Ouverture Automatique Mise à jour en Temps Réel Prêts à l'Emploi 9,898,989 Assistants IA 247 Catégories 24/7 Disponibilité ∞ Possibilités Tous (9 898 989) Chatbots (1 250 000) Génération d'Images (980 000) Productivité (875 000) Développement (765 000) Audio & Voix (654 000) Vidéo (543 000) Marketing (432 000) Recherche (321 000) Business (210 000) Éducation (198 000) Créativité (187 000) Santé (176 000) Finance (165 000) Juridique (154 000) Design (143 000) Rédaction (132 000) Traduction (121 000) SEO (110 000) Réseaux Sociaux (99 000) Nouveautés (25 000) Khanmigo 690 Tuteur IA de Khan Academy - Version 4.6  Utiliser  Grammarly 438 Correcteur et assistant d'écriture - Version 8.4  Utiliser  Anthropic 317 IA conversationnelle sécurisée - Version 3.6  Utiliser  Notion AI 767 Assistant d'écriture intégré à Notion - Version 7.1  Utiliser  Adept 4 IA pour automatiser les workflows - Version 3.0  Utiliser  Runway ML 792 Génération et édition vidéo - Version 2.5  Utiliser  Pictory 275 Création de vidéos à partir de texte - Version 0.8  Utiliser  Anyword 50 Copywriting optimisé - Version 7.2  Utiliser  Bard 729 Assistant IA conversationnel par Google - Version 8.1  Utiliser  Notion AI 552 Assistant d'écriture intégré à Notion - Version 6.6  Utiliser  Peppertype 191 Génération de contenu - Version 6.7  Utiliser  Tabnine 457 Autocomplétion de code - Version 7.0  Utiliser  Anyword 309 Copywriting optimisé - Version 1.5  Utiliser  Voicemod 832 Modification de voix en temps réel - Version 4.5  Utiliser  Peppertype 688 Génération de contenu - Version 8.1  Utiliser  Midjourney 525 Génération d'images par IA - Version 3.1  Utiliser  Notion AI 49 Assistant d'écriture intégré à Notion - Version 0.7  Utiliser  Murf AI 440 Générateur de voix réalistes - Version 9.8  Utiliser  Pictory 837 Création de vidéos à partir de texte - Version 1.0  Utiliser  Quillbot 946 Paraphraser et assistant d'écriture - Version 8.9  Utiliser  Peppertype 736 Génération de contenu - Version 7.6  Utiliser  Adobe Sensei 571 IA créative d'Adobe - Version 1.6  Utiliser  Notion AI 973 Assistant d'écriture intégré à Notion - Version 2.0  Utiliser  Canva AI 710 Design assisté par IA - Version 5.2  Utiliser  Tabnine 273 Autocomplétion de code - Version 4.8  Utiliser  Replit Ghostwriter 758 IA pour coder dans le navigateur - Version 1.2  Utiliser  NightCafe 475 Génération d'art par IA - Version 4.0  Utiliser  Elicit 161 Assistant de recherche académique - Version 4.9  Utiliser  Voicemod 793 Modification de voix en temps réel - Version 7.1  Utiliser  Murf AI 475 Générateur de voix réalistes - Version 0.7  Utiliser  Runway ML 9 Génération et édition vidéo - Version 2.9  Utiliser  Khanmigo 255 Tuteur IA de Khan Academy - Version 9.2  Utiliser  Stable Diffusion 395 Génération d'images open-source - Version 7.5  Utiliser  Cohere 627 IA pour les entreprises - Version 4.2  Utiliser  Quillbot 427 Paraphraser et assistant d'écriture - Version 8.4  Utiliser  Adept 431 IA pour automatiser les workflows - Version 7.6  Utiliser  Adobe Sensei 435 IA créative d'Adobe - Version 7.9  Utiliser  Midjourney 563 Génération d'images par IA - Version 1.1  Utiliser  HeyGen 33 Création de vidéos avec avatars - Version 8.0  Utiliser  ElevenLabs 122 Synthèse vocale avancée - Version 7.2  Utiliser  Leonardo.AI 236 Génération et édition d'images - Version 5.7  Utiliser  Tabnine 625 Autocomplétion de code - Version 8.3  Utiliser  ChatGPT 894 Assistant conversationnel avancé par OpenAI - Version 5.4  Utiliser  Adobe Sensei 361 IA créative d'Adobe - Version 9.2  Utiliser  Elicit 46 Assistant de recherche académique - Version 6.0  Utiliser  Fireflies 958 Assistant de réunion IA - Version 0.1  Utiliser  Leonardo.AI 295 Génération et édition d'images - Version 2.0  Utiliser  Gong 454 Analyse d'appels commerciaux - Version 0.3  Utiliser  Tabnine 720 Autocomplétion de code - Version 0.2  Utiliser  Anthropic 593 IA conversationnelle sécurisée - Version 1.9  Utiliser  Research Rabbit 154 Cartographie de la recherche - Version 0.6  Utiliser  Voicemod 642 Modification de voix en temps réel - Version 8.7  Utiliser  Quillbot 12 Paraphraser et assistant d'écriture - Version 0.3  Utiliser  Anyword 647 Copywriting optimisé - Version 3.4  Utiliser  Claude AI 293 Assistant IA par Anthropic - Version 7.6  Utiliser  Scite 362 Analyse de citations scientifiques - Version 5.4  Utiliser  Runway 225 Outils créatifs avec IA - Version 3.3  Utiliser  Claude AI 154 Assistant IA par Anthropic - Version 2.9  Utiliser  Fliki 232 Vidéos avec voix IA et images - Version 8.7  Utiliser  Runway ML 922 Génération et édition vidéo - Version 8.7  Utiliser  MegaMarket IA La plus grande collection d'assistants IA prêts à l'emploi avec 9,898,989 outils réels.  Catégories Populaires Tous (9 898 989) Chatbots (1 250 000) Génération d'Images (980 000) Productivité (875 000) Développement (765 000) Audio & Voix (654 000) Vidéo (543 000) Ressources Documentation Blog Tutoriels API Newsletter Recevez les nouveaux outils IA chaque jour.  Votre email  © 2023 MegaMarket IA. Tous droits réservés.  Conditions Confidentialité CGU Made with DeepSite LogoDeepSite - 🧬 Remix
+ajouter bouton paypal , stripe , avec mes information pour etre payer , ajouter panier d'achat , obligatio de sabonner pour utiliser le site gratuitement    ajouter tableau de bord avec les information de paiement paypal, stripe, avec bouton stripe ,bouton paypal etc.. plus panier d'achat pour les information de paiement pour recevoir mes paement