Add 2 files
Browse files- index.html +121 -817
- prompts.txt +3 -1
index.html
CHANGED
|
@@ -3,11 +3,9 @@
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
-
<title>Marketplace IA Puissante</title>
|
| 7 |
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
| 9 |
-
<script src="https://js.stripe.com/v3/"></script>
|
| 10 |
-
<script src="https://www.paypal.com/sdk/js?client-id=VOTRE_ID_CLIENT_PAYPAL¤cy=EUR"></script>
|
| 11 |
<style>
|
| 12 |
@keyframes float {
|
| 13 |
0%, 100% { transform: translateY(0); }
|
|
@@ -26,18 +24,6 @@
|
|
| 26 |
transform: translateY(-5px);
|
| 27 |
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
| 28 |
}
|
| 29 |
-
.pulse {
|
| 30 |
-
animation: pulse 2s infinite;
|
| 31 |
-
}
|
| 32 |
-
@keyframes pulse {
|
| 33 |
-
0% { transform: scale(1); }
|
| 34 |
-
50% { transform: scale(1.05); }
|
| 35 |
-
100% { transform: scale(1); }
|
| 36 |
-
}
|
| 37 |
-
.blur-bg {
|
| 38 |
-
backdrop-filter: blur(10px);
|
| 39 |
-
background-color: rgba(255, 255, 255, 0.1);
|
| 40 |
-
}
|
| 41 |
.admin-badge {
|
| 42 |
position: absolute;
|
| 43 |
top: 10px;
|
|
@@ -49,23 +35,20 @@
|
|
| 49 |
font-size: 0.75rem;
|
| 50 |
font-weight: bold;
|
| 51 |
}
|
| 52 |
-
.
|
| 53 |
-
|
| 54 |
-
|
| 55 |
-
height: 20px;
|
| 56 |
-
border: 3px solid rgba(255,255,255,.3);
|
| 57 |
-
border-radius: 50%;
|
| 58 |
-
border-top-color: #fff;
|
| 59 |
-
animation: spin 1s ease-in-out infinite;
|
| 60 |
}
|
| 61 |
-
|
| 62 |
-
|
|
|
|
|
|
|
| 63 |
}
|
| 64 |
</style>
|
| 65 |
</head>
|
| 66 |
<body class="gradient-bg min-h-screen text-white">
|
| 67 |
<!-- Navigation -->
|
| 68 |
-
<nav class="
|
| 69 |
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 70 |
<div class="flex items-center justify-between h-16">
|
| 71 |
<div class="flex items-center">
|
|
@@ -95,17 +78,9 @@
|
|
| 95 |
</nav>
|
| 96 |
|
| 97 |
<!-- Hero Section -->
|
| 98 |
-
<div class="pt-32 pb-
|
| 99 |
<h1 class="text-5xl font-extrabold mb-6">986200 Boutons IA Puissants</h1>
|
| 100 |
-
<p class="text-xl mb-8 max-w-3xl mx-auto">Accédez à notre collection
|
| 101 |
-
<div class="flex justify-center space-x-4">
|
| 102 |
-
<button id="subscribe-btn" class="bg-white text-purple-600 px-6 py-3 rounded-full font-bold hover:bg-opacity-90 transition transform hover:scale-105 pulse">
|
| 103 |
-
<i class="fas fa-gem mr-2"></i> S'abonner
|
| 104 |
-
</button>
|
| 105 |
-
<a href="#marketplace" class="bg-transparent border-2 border-white px-6 py-3 rounded-full font-bold hover:bg-white hover:bg-opacity-20 transition transform hover:scale-105">
|
| 106 |
-
Explorer les Boutons <i class="fas fa-arrow-down ml-2"></i>
|
| 107 |
-
</a>
|
| 108 |
-
</div>
|
| 109 |
<div class="mt-16">
|
| 110 |
<div class="floating inline-block">
|
| 111 |
<img src="https://cdn-icons-png.flaticon.com/512/2491/2491905.png" alt="IA" class="h-40">
|
|
@@ -113,116 +88,8 @@
|
|
| 113 |
</div>
|
| 114 |
</div>
|
| 115 |
|
| 116 |
-
<!-- Modal de connexion -->
|
| 117 |
-
<div id="login-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
|
| 118 |
-
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
| 119 |
-
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
| 120 |
-
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
|
| 121 |
-
</div>
|
| 122 |
-
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
|
| 123 |
-
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
| 124 |
-
<div class="sm:flex sm:items-start">
|
| 125 |
-
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
|
| 126 |
-
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-4" id="modal-title">Connexion</h3>
|
| 127 |
-
<div id="login-form">
|
| 128 |
-
<div class="mb-4">
|
| 129 |
-
<label for="login-email" class="block text-sm font-medium text-gray-700">Email</label>
|
| 130 |
-
<input type="email" id="login-email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-purple-500 focus:border-purple-500">
|
| 131 |
-
</div>
|
| 132 |
-
|
| 133 |
-
<div class="mb-4">
|
| 134 |
-
<label for="login-password" class="block text-sm font-medium text-gray-700">Mot de passe</label>
|
| 135 |
-
<input type="password" id="login-password" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-purple-500 focus:border-purple-500">
|
| 136 |
-
</div>
|
| 137 |
-
</div>
|
| 138 |
-
</div>
|
| 139 |
-
</div>
|
| 140 |
-
</div>
|
| 141 |
-
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
|
| 142 |
-
<button id="confirm-login" type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-purple-600 text-base font-medium text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:ml-3 sm:w-auto sm:text-sm">
|
| 143 |
-
Se connecter
|
| 144 |
-
</button>
|
| 145 |
-
<button id="cancel-login" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
|
| 146 |
-
Annuler
|
| 147 |
-
</button>
|
| 148 |
-
</div>
|
| 149 |
-
</div>
|
| 150 |
-
</div>
|
| 151 |
-
</div>
|
| 152 |
-
|
| 153 |
-
<!-- Tableau de bord -->
|
| 154 |
-
<section id="dashboard" class="hidden py-16 px-4 sm:px-6 lg:px-8 bg-white bg-opacity-10 rounded-xl max-w-7xl mx-auto my-10 blur-bg">
|
| 155 |
-
<h2 class="text-3xl font-bold mb-8 text-center"><i class="fas fa-tachometer-alt mr-2"></i>Tableau de Bord</h2>
|
| 156 |
-
|
| 157 |
-
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
|
| 158 |
-
<div class="bg-white bg-opacity-20 p-6 rounded-lg card-hover">
|
| 159 |
-
<h3 class="text-xl font-semibold mb-4"><i class="fas fa-wallet mr-2"></i>Solde</h3>
|
| 160 |
-
<p class="text-2xl font-bold">€<span id="balance-amount">0.00</span></p>
|
| 161 |
-
<p class="text-sm opacity-75 mt-2">Votre solde disponible</p>
|
| 162 |
-
</div>
|
| 163 |
-
|
| 164 |
-
<div class="bg-white bg-opacity-20 p-6 rounded-lg card-hover">
|
| 165 |
-
<h3 class="text-xl font-semibold mb-4"><i class="fas fa-shopping-cart mr-2"></i>Commandes</h3>
|
| 166 |
-
<p class="text-2xl font-bold"><span id="orders-count">0</span></p>
|
| 167 |
-
<p class="text-sm opacity-75 mt-2">Boutons achetés</p>
|
| 168 |
-
</div>
|
| 169 |
-
|
| 170 |
-
<div class="bg-white bg-opacity-20 p-6 rounded-lg card-hover">
|
| 171 |
-
<h3 class="text-xl font-semibold mb-4"><i class="fas fa-star mr-2"></i>Abonnement</h3>
|
| 172 |
-
<p class="text-2xl font-bold"><span id="subscription-status">Gratuit</span></p>
|
| 173 |
-
<button id="upgrade-btn" class="mt-2 bg-purple-600 text-white px-4 py-2 rounded-md text-sm hover:bg-purple-700 transition">
|
| 174 |
-
Mettre à niveau
|
| 175 |
-
</button>
|
| 176 |
-
</div>
|
| 177 |
-
</div>
|
| 178 |
-
|
| 179 |
-
<div class="bg-white bg-opacity-20 p-6 rounded-lg mb-6">
|
| 180 |
-
<h3 class="text-xl font-semibold mb-4"><i class="fas fa-credit-card mr-2"></i>Méthodes de Paiement</h3>
|
| 181 |
-
|
| 182 |
-
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
| 183 |
-
<div class="p-4 border border-white border-opacity-30 rounded-lg">
|
| 184 |
-
<h4 class="font-medium mb-2"><i class="fab fa-paypal mr-2"></i>PayPal</h4>
|
| 185 |
-
<p class="text-sm opacity-75 mb-3">Connectez votre compte PayPal pour recevoir des paiements</p>
|
| 186 |
-
<div id="paypal-button-container" class="mt-2"></div>
|
| 187 |
-
</div>
|
| 188 |
-
|
| 189 |
-
<div class="p-4 border border-white border-opacity-30 rounded-lg">
|
| 190 |
-
<h4 class="font-medium mb-2"><i class="fab fa-stripe mr-2"></i>Stripe</h4>
|
| 191 |
-
<p class="text-sm opacity-75 mb-3">Configurez votre compte Stripe pour accepter les paiements</p>
|
| 192 |
-
<button id="stripe-connect" class="bg-blue-600 text-white px-4 py-2 rounded-md text-sm hover:bg-blue-700 transition">
|
| 193 |
-
<i class="fab fa-stripe mr-1"></i> Connecter Stripe
|
| 194 |
-
</button>
|
| 195 |
-
</div>
|
| 196 |
-
</div>
|
| 197 |
-
</div>
|
| 198 |
-
|
| 199 |
-
<div class="bg-white bg-opacity-20 p-6 rounded-lg">
|
| 200 |
-
<h3 class="text-xl font-semibold mb-4"><i class="fas fa-history mr-2"></i>Historique des Transactions</h3>
|
| 201 |
-
<div class="overflow-x-auto">
|
| 202 |
-
<table class="min-w-full divide-y divide-white divide-opacity-20">
|
| 203 |
-
<thead>
|
| 204 |
-
<tr>
|
| 205 |
-
<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Date</th>
|
| 206 |
-
<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Description</th>
|
| 207 |
-
<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Montant</th>
|
| 208 |
-
<th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider">Statut</th>
|
| 209 |
-
</tr>
|
| 210 |
-
</thead>
|
| 211 |
-
<tbody class="divide-y divide-white divide-opacity-10" id="transactions-body">
|
| 212 |
-
<tr>
|
| 213 |
-
<td colspan="4" class="px-6 py-4 text-center text-sm">Aucune transaction pour le moment</td>
|
| 214 |
-
</tr>
|
| 215 |
-
</tbody>
|
| 216 |
-
</table>
|
| 217 |
-
</div>
|
| 218 |
-
</div>
|
| 219 |
-
</section>
|
| 220 |
-
|
| 221 |
<!-- Marketplace -->
|
| 222 |
-
<section id="marketplace" class="py-
|
| 223 |
-
<h2 class="text-3xl font-bold mb-2 text-center">Boutons IA</h2>
|
| 224 |
-
<p class="text-center mb-12 max-w-3xl mx-auto">Parcourez notre collection de 986200 boutons IA spécialement conçus pour automatiser vos tâches.</p>
|
| 225 |
-
|
| 226 |
<div class="mb-8 flex justify-center">
|
| 227 |
<div class="relative w-full max-w-md">
|
| 228 |
<input type="text" placeholder="Rechercher un bouton IA..." class="w-full pl-10 pr-4 py-3 rounded-full bg-white bg-opacity-20 border border-white border-opacity-30 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50">
|
|
@@ -230,149 +97,15 @@
|
|
| 230 |
</div>
|
| 231 |
</div>
|
| 232 |
|
| 233 |
-
<div class="
|
| 234 |
-
<
|
| 235 |
-
|
| 236 |
-
|
| 237 |
-
<div class="mt-12 text-center">
|
| 238 |
-
<button id="load-more-btn" class="bg-white text-purple-600 px-6 py-3 rounded-full font-bold hover:bg-opacity-90 transition transform hover:scale-105">
|
| 239 |
-
<i class="fas fa-sync-alt mr-2"></i> <span id="load-more-text">Charger plus de boutons</span>
|
| 240 |
-
</button>
|
| 241 |
-
</div>
|
| 242 |
-
</section>
|
| 243 |
-
|
| 244 |
-
<!-- Modal d'abonnement -->
|
| 245 |
-
<div id="subscription-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
|
| 246 |
-
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
| 247 |
-
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
| 248 |
-
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
|
| 249 |
-
</div>
|
| 250 |
-
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
|
| 251 |
-
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
| 252 |
-
<div class="sm:flex sm:items-start">
|
| 253 |
-
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
|
| 254 |
-
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">Abonnement Premium</h3>
|
| 255 |
-
<p class="text-sm text-gray-500 mb-6">Pour accéder à tous les boutons IA, vous devez souscrire à un abonnement premium.</p>
|
| 256 |
-
|
| 257 |
-
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
|
| 258 |
-
<div class="border-2 border-purple-500 rounded-lg p-4">
|
| 259 |
-
<h4 class="font-bold text-lg mb-2">Mensuel</h4>
|
| 260 |
-
<p class="text-2xl font-bold mb-2">€29.99<span class="text-sm font-normal">/mois</span></p>
|
| 261 |
-
<button class="w-full bg-purple-600 text-white px-4 py-2 rounded-md text-sm hover:bg-purple-700 transition">
|
| 262 |
-
Choisir
|
| 263 |
-
</button>
|
| 264 |
-
</div>
|
| 265 |
-
<div class="border-2 border-gray-200 rounded-lg p-4">
|
| 266 |
-
<h4 class="font-bold text-lg mb-2">Annuel</h4>
|
| 267 |
-
<p class="text-2xl font-bold mb-2">€299.99<span class="text-sm font-normal">/an</span></p>
|
| 268 |
-
<p class="text-xs text-gray-500 mb-2">Économisez 20%</p>
|
| 269 |
-
<button class="w-full bg-purple-600 text-white px-4 py-2 rounded-md text-sm hover:bg-purple-700 transition">
|
| 270 |
-
Choisir
|
| 271 |
-
</button>
|
| 272 |
-
</div>
|
| 273 |
-
</div>
|
| 274 |
-
</div>
|
| 275 |
-
</div>
|
| 276 |
-
</div>
|
| 277 |
-
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
|
| 278 |
-
<button id="cancel-subscription" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
|
| 279 |
-
Plus tard
|
| 280 |
-
</button>
|
| 281 |
-
</div>
|
| 282 |
-
</div>
|
| 283 |
-
</div>
|
| 284 |
-
</div>
|
| 285 |
-
|
| 286 |
-
<!-- Panier d'achat (Modal) -->
|
| 287 |
-
<div id="cart-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
|
| 288 |
-
<div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
| 289 |
-
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
| 290 |
-
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
|
| 291 |
-
</div>
|
| 292 |
-
<div class="inline-block align-bottom bg-white rounded-t-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full" style="position: fixed; bottom: 0; left: 0; right: 0; margin: 0 auto;">
|
| 293 |
-
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
| 294 |
-
<div class="sm:flex sm:items-start">
|
| 295 |
-
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
|
| 296 |
-
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
|
| 297 |
-
<i class="fas fa-shopping-cart mr-2"></i> Votre Panier
|
| 298 |
-
</h3>
|
| 299 |
-
|
| 300 |
-
<div id="cart-items" class="mb-4 max-h-64 overflow-y-auto">
|
| 301 |
-
<!-- Les éléments du panier seront ajoutés ici dynamiquement -->
|
| 302 |
-
<p class="text-center text-gray-500 py-4">Votre panier est vide</p>
|
| 303 |
-
</div>
|
| 304 |
-
|
| 305 |
-
<div class="border-t border-gray-200 pt-4">
|
| 306 |
-
<div class="flex justify-between mb-2">
|
| 307 |
-
<span class="font-medium">Total:</span>
|
| 308 |
-
<span id="cart-total" class="font-bold">€0.00</span>
|
| 309 |
-
</div>
|
| 310 |
-
</div>
|
| 311 |
-
</div>
|
| 312 |
-
</div>
|
| 313 |
-
</div>
|
| 314 |
-
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
|
| 315 |
-
<button id="checkout-btn" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-purple-600 text-base font-medium text-white hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:ml-3 sm:w-auto sm:text-sm disabled:opacity-50" disabled>
|
| 316 |
-
<i class="fas fa-credit-card mr-2"></i> Payer maintenant
|
| 317 |
-
</button>
|
| 318 |
-
<button id="close-cart" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
|
| 319 |
-
Continuer mes achats
|
| 320 |
-
</button>
|
| 321 |
-
</div>
|
| 322 |
-
</div>
|
| 323 |
-
</div>
|
| 324 |
-
</div>
|
| 325 |
-
|
| 326 |
-
<!-- Modal de paiement -->
|
| 327 |
-
<div id="payment-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
|
| 328 |
-
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
|
| 329 |
-
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
|
| 330 |
-
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
|
| 331 |
-
</div>
|
| 332 |
-
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
|
| 333 |
-
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
| 334 |
-
<div class="sm:flex sm:items-start">
|
| 335 |
-
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
|
| 336 |
-
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-4">
|
| 337 |
-
<i class="fas fa-credit-card mr-2"></i> Paiement
|
| 338 |
-
</h3>
|
| 339 |
-
|
| 340 |
-
<div class="mb-6">
|
| 341 |
-
<p class="text-sm text-gray-500 mb-2">Montant à payer:</p>
|
| 342 |
-
<p id="payment-amount" class="text-2xl font-bold text-purple-600">€0.00</p>
|
| 343 |
-
</div>
|
| 344 |
-
|
| 345 |
-
<div class="mb-6">
|
| 346 |
-
<p class="text-sm font-medium text-gray-700 mb-2">Méthode de paiement:</p>
|
| 347 |
-
<div class="grid grid-cols-2 gap-4">
|
| 348 |
-
<button id="pay-with-paypal" class="border-2 border-gray-200 rounded-md p-3 hover:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500">
|
| 349 |
-
<i class="fab fa-paypal text-blue-500 text-2xl"></i>
|
| 350 |
-
<p class="text-sm mt-1">PayPal</p>
|
| 351 |
-
</button>
|
| 352 |
-
<button id="pay-with-stripe" class="border-2 border-gray-200 rounded-md p-3 hover:border-purple-400 focus:outline-none focus:ring-2 focus:ring-purple-500">
|
| 353 |
-
<i class="fab fa-stripe text-purple-500 text-2xl"></i>
|
| 354 |
-
<p class="text-sm mt-1">Stripe</p>
|
| 355 |
-
</button>
|
| 356 |
-
</div>
|
| 357 |
-
</div>
|
| 358 |
-
|
| 359 |
-
<div class="border-t border-gray-200 pt-4">
|
| 360 |
-
<p class="text-xs text-gray-500">En cliquant sur Payer, vous acceptez nos <a href="#" class="text-purple-600 hover:text-purple-500">conditions générales</a>.</p>
|
| 361 |
-
</div>
|
| 362 |
-
</div>
|
| 363 |
-
</div>
|
| 364 |
-
</div>
|
| 365 |
-
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
|
| 366 |
-
<button id="cancel-payment" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
|
| 367 |
-
Annuler
|
| 368 |
-
</button>
|
| 369 |
-
</div>
|
| 370 |
</div>
|
| 371 |
</div>
|
| 372 |
-
</
|
| 373 |
|
| 374 |
<!-- Footer -->
|
| 375 |
-
<footer class="bg-black bg-opacity-20 py-12 px-4 sm:px-6 lg:px-8 mt-
|
| 376 |
<div class="max-w-7xl mx-auto">
|
| 377 |
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
| 378 |
<div>
|
|
@@ -427,125 +160,36 @@
|
|
| 427 |
"doctorblog.fr@gmail.com": "Admin270574@"
|
| 428 |
};
|
| 429 |
|
| 430 |
-
//
|
| 431 |
-
const
|
| 432 |
-
|
| 433 |
-
|
| 434 |
-
|
| 435 |
-
description: "Générez des campagnes marketing performantes en un clic.",
|
| 436 |
-
price: 49.99,
|
| 437 |
-
image: "https://cdn-icons-png.flaticon.com/512/2103/2103633.png"
|
| 438 |
-
},
|
| 439 |
-
{
|
| 440 |
-
id: 2,
|
| 441 |
-
name: "IA Analyse de Données",
|
| 442 |
-
description: "Analysez des volumes massifs de données en temps réel.",
|
| 443 |
-
price: 79.99,
|
| 444 |
-
image: "https://cdn-icons-png.flaticon.com/512/2933/2933245.png"
|
| 445 |
-
},
|
| 446 |
-
{
|
| 447 |
-
id: 3,
|
| 448 |
-
name: "IA Chat Avancé",
|
| 449 |
-
description: "Assistant conversationnel ultra-performant.",
|
| 450 |
-
price: 59.99,
|
| 451 |
-
image: "https://cdn-icons-png.flaticon.com/512/1995/1995515.png"
|
| 452 |
-
},
|
| 453 |
-
{
|
| 454 |
-
id: 4,
|
| 455 |
-
name: "IA Design Graphique",
|
| 456 |
-
description: "Créez des designs professionnels automatiquement.",
|
| 457 |
-
price: 69.99,
|
| 458 |
-
image: "https://cdn-icons-png.flaticon.com/512/3069/3069172.png"
|
| 459 |
-
},
|
| 460 |
-
{
|
| 461 |
-
id: 5,
|
| 462 |
-
name: "IA Optimisation SEO",
|
| 463 |
-
description: "Boostez votre référencement naturel automatiquement.",
|
| 464 |
-
price: 89.99,
|
| 465 |
-
image: "https://cdn-icons-png.flaticon.com/512/2936/2936886.png"
|
| 466 |
-
},
|
| 467 |
-
{
|
| 468 |
-
id: 6,
|
| 469 |
-
name: "IA Génération de Code",
|
| 470 |
-
description: "Générez du code optimisé en plusieurs langages.",
|
| 471 |
-
price: 99.99,
|
| 472 |
-
image: "https://cdn-icons-png.flaticon.com/512/1055/1055687.png"
|
| 473 |
-
},
|
| 474 |
-
{
|
| 475 |
-
id: 7,
|
| 476 |
-
name: "IA Édition Vidéo",
|
| 477 |
-
description: "Montez et optimisez vos vidéos automatiquement.",
|
| 478 |
-
price: 119.99,
|
| 479 |
-
image: "https://cdn-icons-png.flaticon.com/512/3059/3059518.png"
|
| 480 |
-
},
|
| 481 |
-
{
|
| 482 |
-
id: 8,
|
| 483 |
-
name: "IA Traitement Audio",
|
| 484 |
-
description: "Améliorez et transformez vos fichiers audio.",
|
| 485 |
-
price: 79.99,
|
| 486 |
-
image: "https://cdn-icons-png.flaticon.com/512/3059/3059534.png"
|
| 487 |
-
}
|
| 488 |
];
|
| 489 |
|
| 490 |
-
//
|
| 491 |
-
|
| 492 |
-
|
| 493 |
-
|
| 494 |
-
|
| 495 |
-
|
| 496 |
-
|
| 497 |
-
|
| 498 |
-
|
| 499 |
-
|
| 500 |
-
|
| 501 |
-
|
| 502 |
-
|
| 503 |
-
|
| 504 |
-
|
| 505 |
-
|
| 506 |
-
|
| 507 |
-
|
| 508 |
-
|
| 509 |
-
|
| 510 |
-
|
| 511 |
-
|
| 512 |
-
|
| 513 |
-
{
|
| 514 |
-
id: 12,
|
| 515 |
-
name: "IA Génération de Contenu",
|
| 516 |
-
description: "Créez du contenu original et optimisé automatiquement.",
|
| 517 |
-
price: 79.99,
|
| 518 |
-
image: "https://cdn-icons-png.flaticon.com/512/3069/3069172.png"
|
| 519 |
-
},
|
| 520 |
-
{
|
| 521 |
-
id: 13,
|
| 522 |
-
name: "IA Détection d'Anomalies",
|
| 523 |
-
description: "Détectez les comportements anormaux dans vos données.",
|
| 524 |
-
price: 99.99,
|
| 525 |
-
image: "https://cdn-icons-png.flaticon.com/512/2103/2103633.png"
|
| 526 |
-
},
|
| 527 |
-
{
|
| 528 |
-
id: 14,
|
| 529 |
-
name: "IA Prédiction de Tendance",
|
| 530 |
-
description: "Anticipez les tendances futures avec une précision élevée.",
|
| 531 |
-
price: 109.99,
|
| 532 |
-
image: "https://cdn-icons-png.flaticon.com/512/2933/2933245.png"
|
| 533 |
-
},
|
| 534 |
-
{
|
| 535 |
-
id: 15,
|
| 536 |
-
name: "IA Gestion de Projet",
|
| 537 |
-
description: "Optimisez et automatisez la gestion de vos projets.",
|
| 538 |
-
price: 89.99,
|
| 539 |
-
image: "https://cdn-icons-png.flaticon.com/512/3059/3059518.png"
|
| 540 |
-
},
|
| 541 |
-
{
|
| 542 |
-
id: 16,
|
| 543 |
-
name: "IA Assistance Client",
|
| 544 |
-
description: "Offrez un support client 24/7 avec notre IA conversationnelle.",
|
| 545 |
-
price: 69.99,
|
| 546 |
-
image: "https://cdn-icons-png.flaticon.com/512/3059/3059534.png"
|
| 547 |
-
}
|
| 548 |
-
];
|
| 549 |
|
| 550 |
// État de l'application
|
| 551 |
let state = {
|
|
@@ -553,108 +197,31 @@
|
|
| 553 |
user: null,
|
| 554 |
isAdmin: false,
|
| 555 |
isSubscribed: false,
|
| 556 |
-
|
| 557 |
-
totalProducts: 986200,
|
| 558 |
-
productsPerLoad: 8,
|
| 559 |
-
currentLoad: 0
|
| 560 |
};
|
| 561 |
|
| 562 |
// Éléments du DOM
|
| 563 |
-
const cartModal = document.getElementById('cart-modal');
|
| 564 |
-
const cartItemsContainer = document.getElementById('cart-items');
|
| 565 |
-
const cartTotalElement = document.getElementById('cart-total');
|
| 566 |
-
const cartCountElement = document.getElementById('cart-count');
|
| 567 |
-
const checkoutBtn = document.getElementById('checkout-btn');
|
| 568 |
-
const closeCartBtn = document.getElementById('close-cart');
|
| 569 |
const productsContainer = document.getElementById('products-container');
|
| 570 |
-
const
|
| 571 |
-
const paymentAmountElement = document.getElementById('payment-amount');
|
| 572 |
-
const cancelPaymentBtn = document.getElementById('cancel-payment');
|
| 573 |
-
const payWithPaypalBtn = document.getElementById('pay-with-paypal');
|
| 574 |
-
const payWithStripeBtn = document.getElementById('pay-with-stripe');
|
| 575 |
-
const loginModal = document.getElementById('login-modal');
|
| 576 |
const loginBtn = document.getElementById('login-btn');
|
| 577 |
const loginText = document.getElementById('login-text');
|
| 578 |
-
const subscribeBtn = document.getElementById('subscribe-btn');
|
| 579 |
-
const confirmLoginBtn = document.getElementById('confirm-login');
|
| 580 |
-
const cancelLoginBtn = document.getElementById('cancel-login');
|
| 581 |
-
const loginEmailInput = document.getElementById('login-email');
|
| 582 |
-
const loginPasswordInput = document.getElementById('login-password');
|
| 583 |
-
const dashboardSection = document.getElementById('dashboard');
|
| 584 |
-
const subscriptionModal = document.getElementById('subscription-modal');
|
| 585 |
-
const cancelSubscriptionBtn = document.getElementById('cancel-subscription');
|
| 586 |
-
const upgradeBtn = document.getElementById('upgrade-btn');
|
| 587 |
-
const balanceAmount = document.getElementById('balance-amount');
|
| 588 |
-
const ordersCount = document.getElementById('orders-count');
|
| 589 |
-
const subscriptionStatus = document.getElementById('subscription-status');
|
| 590 |
-
const loadMoreBtn = document.getElementById('load-more-btn');
|
| 591 |
-
const loadMoreText = document.getElementById('load-more-text');
|
| 592 |
-
|
| 593 |
-
// Initialisation de l'application
|
| 594 |
-
function init() {
|
| 595 |
-
// Charger les premiers produits
|
| 596 |
-
state.loadedProducts = [...INITIAL_PRODUCTS];
|
| 597 |
-
state.currentLoad = 1;
|
| 598 |
-
|
| 599 |
-
renderProducts();
|
| 600 |
-
setupEventListeners();
|
| 601 |
-
checkSession();
|
| 602 |
-
|
| 603 |
-
// Mettre à jour le texte du bouton "Charger plus"
|
| 604 |
-
updateLoadMoreButton();
|
| 605 |
-
}
|
| 606 |
-
|
| 607 |
-
// Vérifier la session utilisateur
|
| 608 |
-
function checkSession() {
|
| 609 |
-
const user = localStorage.getItem('user');
|
| 610 |
-
if (user) {
|
| 611 |
-
state.user = JSON.parse(user);
|
| 612 |
-
state.isAdmin = ADMIN_ACCOUNTS.hasOwnProperty(state.user.email);
|
| 613 |
-
state.isSubscribed = state.isAdmin || localStorage.getItem('subscribed') === 'true';
|
| 614 |
-
|
| 615 |
-
updateUIAfterLogin();
|
| 616 |
-
|
| 617 |
-
if (state.isAdmin) {
|
| 618 |
-
showAdminFeatures();
|
| 619 |
-
}
|
| 620 |
-
}
|
| 621 |
-
}
|
| 622 |
-
|
| 623 |
-
// Afficher les fonctionnalités admin
|
| 624 |
-
function showAdminFeatures() {
|
| 625 |
-
// Ajouter un badge admin sur les produits
|
| 626 |
-
document.querySelectorAll('.product-card').forEach(card => {
|
| 627 |
-
const badge = document.createElement('div');
|
| 628 |
-
badge.className = 'admin-badge';
|
| 629 |
-
badge.textContent = 'GRATUIT';
|
| 630 |
-
card.appendChild(badge);
|
| 631 |
-
});
|
| 632 |
-
|
| 633 |
-
// Mettre à jour le statut d'abonnement
|
| 634 |
-
subscriptionStatus.textContent = "Admin (Accès complet)";
|
| 635 |
-
upgradeBtn.classList.add('hidden');
|
| 636 |
-
}
|
| 637 |
|
| 638 |
-
//
|
| 639 |
-
function
|
| 640 |
-
loginText.textContent = state.user.email;
|
| 641 |
-
dashboardSection.classList.remove('hidden');
|
| 642 |
-
|
| 643 |
-
if (state.isSubscribed) {
|
| 644 |
-
subscribeBtn.classList.add('hidden');
|
| 645 |
-
subscriptionStatus.textContent = "Premium";
|
| 646 |
-
} else if (!state.isAdmin) {
|
| 647 |
-
subscribeBtn.classList.remove('hidden');
|
| 648 |
-
}
|
| 649 |
-
}
|
| 650 |
-
|
| 651 |
-
// Rendre les produits
|
| 652 |
-
function renderProducts() {
|
| 653 |
let html = '';
|
|
|
|
|
|
|
|
|
|
| 654 |
|
| 655 |
-
|
| 656 |
-
|
| 657 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 658 |
<div class="flex justify-center mb-4">
|
| 659 |
<img src="${product.image}" alt="${product.name}" class="h-16">
|
| 660 |
</div>
|
|
@@ -669,143 +236,62 @@
|
|
| 669 |
<i class="fas fa-cart-plus mr-1"></i> Ajouter
|
| 670 |
</button>
|
| 671 |
</div>
|
| 672 |
-
|
| 673 |
-
|
| 674 |
-
|
| 675 |
-
|
| 676 |
-
productsContainer.innerHTML = html;
|
| 677 |
-
|
| 678 |
-
// Réattacher les événements aux nouveaux boutons
|
| 679 |
-
document.querySelectorAll('.add-to-cart').forEach(button => {
|
| 680 |
-
button.addEventListener('click', addToCart);
|
| 681 |
-
});
|
| 682 |
-
|
| 683 |
-
// Si admin, ajouter les badges
|
| 684 |
-
if (state.isAdmin) {
|
| 685 |
-
document.querySelectorAll('.product-card').forEach(card => {
|
| 686 |
-
const badge = document.createElement('div');
|
| 687 |
-
badge.className = 'admin-badge';
|
| 688 |
-
badge.textContent = 'GRATUIT';
|
| 689 |
-
card.appendChild(badge);
|
| 690 |
-
});
|
| 691 |
-
}
|
| 692 |
-
}
|
| 693 |
-
|
| 694 |
-
// Charger plus de produits
|
| 695 |
-
function loadMoreProducts() {
|
| 696 |
-
// Simuler un chargement asynchrone
|
| 697 |
-
loadMoreBtn.disabled = true;
|
| 698 |
-
loadMoreText.innerHTML = '<span class="loading-spinner"></span> Chargement...';
|
| 699 |
-
|
| 700 |
-
setTimeout(() => {
|
| 701 |
-
// Ajouter les produits supplémentaires
|
| 702 |
-
state.loadedProducts = [...state.loadedProducts, ...ADDITIONAL_PRODUCTS];
|
| 703 |
-
state.currentLoad++;
|
| 704 |
-
|
| 705 |
-
// Re-rendre tous les produits
|
| 706 |
-
renderProducts();
|
| 707 |
|
| 708 |
-
|
| 709 |
-
updateLoadMoreButton();
|
| 710 |
|
| 711 |
-
|
| 712 |
-
|
| 713 |
-
|
| 714 |
-
|
| 715 |
-
|
| 716 |
-
|
| 717 |
-
|
| 718 |
-
|
| 719 |
-
|
| 720 |
-
|
| 721 |
-
|
| 722 |
-
|
| 723 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
| 724 |
}
|
| 725 |
-
}
|
| 726 |
-
|
| 727 |
-
// Configurer les écouteurs d'événements
|
| 728 |
-
function setupEventListeners() {
|
| 729 |
-
// Panier
|
| 730 |
-
document.querySelectorAll('.add-to-cart').forEach(button => {
|
| 731 |
-
button.addEventListener('click', addToCart);
|
| 732 |
-
});
|
| 733 |
-
|
| 734 |
-
closeCartBtn.addEventListener('click', closeCart);
|
| 735 |
-
checkoutBtn.addEventListener('click', openPaymentModal);
|
| 736 |
-
cancelPaymentBtn.addEventListener('click', closePaymentModal);
|
| 737 |
-
|
| 738 |
-
// Connexion
|
| 739 |
-
loginBtn.addEventListener('click', toggleLoginModal);
|
| 740 |
-
subscribeBtn.addEventListener('click', openSubscriptionModal);
|
| 741 |
-
confirmLoginBtn.addEventListener('click', login);
|
| 742 |
-
cancelLoginBtn.addEventListener('click', closeLoginModal);
|
| 743 |
|
| 744 |
-
//
|
| 745 |
-
|
| 746 |
-
upgradeBtn.addEventListener('click', openSubscriptionModal);
|
| 747 |
-
|
| 748 |
-
// Paiement
|
| 749 |
-
payWithPaypalBtn.addEventListener('click', payWithPaypal);
|
| 750 |
-
payWithStripeBtn.addEventListener('click', payWithStripe);
|
| 751 |
-
|
| 752 |
-
// Gestion du clic sur le lien Panier dans la nav
|
| 753 |
-
document.querySelector('a[href="#cart"]').addEventListener('click', function(e) {
|
| 754 |
-
e.preventDefault();
|
| 755 |
-
openCart();
|
| 756 |
-
});
|
| 757 |
-
|
| 758 |
-
// Bouton "Charger plus"
|
| 759 |
-
loadMoreBtn.addEventListener('click', loadMoreProducts);
|
| 760 |
}
|
| 761 |
|
| 762 |
-
//
|
| 763 |
-
function
|
| 764 |
-
|
| 765 |
-
|
| 766 |
-
|
| 767 |
-
|
| 768 |
-
state.
|
| 769 |
-
|
| 770 |
-
|
| 771 |
-
loginText.textContent = 'Connexion';
|
| 772 |
-
dashboardSection.classList.add('hidden');
|
| 773 |
-
subscribeBtn.classList.remove('hidden');
|
| 774 |
-
} else {
|
| 775 |
-
openLoginModal();
|
| 776 |
}
|
| 777 |
}
|
| 778 |
|
| 779 |
-
//
|
| 780 |
-
function
|
| 781 |
-
|
| 782 |
-
openLoginModal();
|
| 783 |
-
return;
|
| 784 |
-
}
|
| 785 |
|
| 786 |
-
if (
|
| 787 |
-
|
| 788 |
-
|
|
|
|
| 789 |
}
|
| 790 |
-
|
| 791 |
-
cartModal.classList.remove('hidden');
|
| 792 |
-
renderCartItems();
|
| 793 |
-
}
|
| 794 |
-
|
| 795 |
-
// Fermer le panier
|
| 796 |
-
function closeCart() {
|
| 797 |
-
cartModal.classList.add('hidden');
|
| 798 |
}
|
| 799 |
|
| 800 |
// Ajouter un article au panier
|
| 801 |
function addToCart(event) {
|
| 802 |
if (!state.user) {
|
| 803 |
-
|
| 804 |
-
return;
|
| 805 |
-
}
|
| 806 |
-
|
| 807 |
-
if (!state.isSubscribed && !state.isAdmin) {
|
| 808 |
-
openSubscriptionModal();
|
| 809 |
return;
|
| 810 |
}
|
| 811 |
|
|
@@ -829,217 +315,35 @@
|
|
| 829 |
}
|
| 830 |
|
| 831 |
updateCart();
|
| 832 |
-
openCart();
|
| 833 |
-
}
|
| 834 |
-
|
| 835 |
-
// Supprimer un article du panier
|
| 836 |
-
function removeFromCart(id) {
|
| 837 |
-
state.cart = state.cart.filter(item => item.id !== id);
|
| 838 |
-
updateCart();
|
| 839 |
-
}
|
| 840 |
-
|
| 841 |
-
// Mettre à jour la quantité d'un article
|
| 842 |
-
function updateQuantity(id, newQuantity) {
|
| 843 |
-
const item = state.cart.find(item => item.id === id);
|
| 844 |
-
if (item) {
|
| 845 |
-
item.quantity = parseInt(newQuantity);
|
| 846 |
-
if (item.quantity <= 0) {
|
| 847 |
-
removeFromCart(id);
|
| 848 |
-
} else {
|
| 849 |
-
updateCart();
|
| 850 |
-
}
|
| 851 |
-
}
|
| 852 |
-
}
|
| 853 |
-
|
| 854 |
-
// Calculer le total du panier
|
| 855 |
-
function calculateTotal() {
|
| 856 |
-
return state.cart.reduce((total, item) => total + (item.price * item.quantity), 0);
|
| 857 |
}
|
| 858 |
|
| 859 |
-
// Mettre à jour le panier
|
| 860 |
function updateCart() {
|
| 861 |
-
renderCartItems();
|
| 862 |
-
|
| 863 |
-
const total = calculateTotal();
|
| 864 |
-
cartTotalElement.textContent = `€${total.toFixed(2)}`;
|
| 865 |
cartCountElement.textContent = state.cart.reduce((count, item) => count + item.quantity, 0);
|
| 866 |
-
|
| 867 |
-
// Activer/désactiver le bouton de paiement
|
| 868 |
-
checkoutBtn.disabled = state.cart.length === 0;
|
| 869 |
}
|
| 870 |
|
| 871 |
-
//
|
| 872 |
-
function
|
| 873 |
-
|
| 874 |
-
|
| 875 |
-
|
| 876 |
-
|
| 877 |
-
|
| 878 |
-
|
| 879 |
-
|
| 880 |
-
|
| 881 |
-
|
| 882 |
-
|
| 883 |
-
|
| 884 |
-
|
| 885 |
-
|
| 886 |
-
|
| 887 |
-
|
| 888 |
-
|
| 889 |
-
<button class="increase-quantity px-2 py-1 bg-gray-200 rounded-r-md" data-id="${item.id}">+</button>
|
| 890 |
-
<button class="remove-item ml-2 text-red-500 hover:text-red-700" data-id="${item.id}">
|
| 891 |
-
<i class="fas fa-trash-alt"></i>
|
| 892 |
-
</button>
|
| 893 |
-
</div>
|
| 894 |
-
</div>
|
| 895 |
-
`;
|
| 896 |
-
});
|
| 897 |
-
|
| 898 |
-
cartItemsContainer.innerHTML = html;
|
| 899 |
-
|
| 900 |
-
// Ajouter les événements aux nouveaux boutons
|
| 901 |
-
document.querySelectorAll('.decrease-quantity').forEach(button => {
|
| 902 |
-
button.addEventListener('click', function() {
|
| 903 |
-
const id = this.getAttribute('data-id');
|
| 904 |
-
const item = state.cart.find(item => item.id === id);
|
| 905 |
-
if (item) {
|
| 906 |
-
updateQuantity(id, item.quantity - 1);
|
| 907 |
-
}
|
| 908 |
-
});
|
| 909 |
-
});
|
| 910 |
-
|
| 911 |
-
document.querySelectorAll('.increase-quantity').forEach(button => {
|
| 912 |
-
button.addEventListener('click', function() {
|
| 913 |
-
const id = this.getAttribute('data-id');
|
| 914 |
-
const item = state.cart.find(item => item.id === id);
|
| 915 |
-
if (item) {
|
| 916 |
-
updateQuantity(id, item.quantity + 1);
|
| 917 |
-
}
|
| 918 |
-
});
|
| 919 |
-
});
|
| 920 |
-
|
| 921 |
-
document.querySelectorAll('.remove-item').forEach(button => {
|
| 922 |
-
button.addEventListener('click', function() {
|
| 923 |
-
const id = this.getAttribute('data-id');
|
| 924 |
-
removeFromCart(id);
|
| 925 |
-
});
|
| 926 |
-
});
|
| 927 |
-
|
| 928 |
-
document.querySelectorAll('.quantity-input').forEach(input => {
|
| 929 |
-
input.addEventListener('change', function() {
|
| 930 |
-
const id = this.getAttribute('data-id');
|
| 931 |
-
updateQuantity(id, this.value);
|
| 932 |
-
});
|
| 933 |
});
|
| 934 |
}
|
| 935 |
|
| 936 |
-
//
|
| 937 |
-
function openPaymentModal() {
|
| 938 |
-
const total = calculateTotal();
|
| 939 |
-
paymentAmountElement.textContent = `€${total.toFixed(2)}`;
|
| 940 |
-
paymentModal.classList.remove('hidden');
|
| 941 |
-
cartModal.classList.add('hidden');
|
| 942 |
-
}
|
| 943 |
-
|
| 944 |
-
// Fermer le modal de paiement
|
| 945 |
-
function closePaymentModal() {
|
| 946 |
-
paymentModal.classList.add('hidden');
|
| 947 |
-
}
|
| 948 |
-
|
| 949 |
-
// Ouvrir le modal de connexion
|
| 950 |
-
function openLoginModal() {
|
| 951 |
-
loginModal.classList.remove('hidden');
|
| 952 |
-
}
|
| 953 |
-
|
| 954 |
-
// Fermer le modal de connexion
|
| 955 |
-
function closeLoginModal() {
|
| 956 |
-
loginModal.classList.add('hidden');
|
| 957 |
-
}
|
| 958 |
-
|
| 959 |
-
// Ouvrir le modal d'abonnement
|
| 960 |
-
function openSubscriptionModal() {
|
| 961 |
-
if (!state.user) {
|
| 962 |
-
openLoginModal();
|
| 963 |
-
return;
|
| 964 |
-
}
|
| 965 |
-
|
| 966 |
-
subscriptionModal.classList.remove('hidden');
|
| 967 |
-
}
|
| 968 |
-
|
| 969 |
-
// Fermer le modal d'abonnement
|
| 970 |
-
function closeSubscriptionModal() {
|
| 971 |
-
subscriptionModal.classList.add('hidden');
|
| 972 |
-
}
|
| 973 |
-
|
| 974 |
-
// Connexion
|
| 975 |
-
function login() {
|
| 976 |
-
const email = loginEmailInput.value;
|
| 977 |
-
const password = loginPasswordInput.value;
|
| 978 |
-
|
| 979 |
-
// Vérifier les comptes admin
|
| 980 |
-
if (ADMIN_ACCOUNTS[email] && ADMIN_ACCOUNTS[email] === password) {
|
| 981 |
-
state.user = { email };
|
| 982 |
-
state.isAdmin = true;
|
| 983 |
-
state.isSubscribed = true;
|
| 984 |
-
|
| 985 |
-
localStorage.setItem('user', JSON.stringify(state.user));
|
| 986 |
-
localStorage.setItem('subscribed', 'true');
|
| 987 |
-
|
| 988 |
-
closeLoginModal();
|
| 989 |
-
updateUIAfterLogin();
|
| 990 |
-
showAdminFeatures();
|
| 991 |
-
return;
|
| 992 |
-
}
|
| 993 |
-
|
| 994 |
-
// Pour les autres utilisateurs (simulation)
|
| 995 |
-
if (email && password) {
|
| 996 |
-
state.user = { email };
|
| 997 |
-
state.isAdmin = false;
|
| 998 |
-
state.isSubscribed = false;
|
| 999 |
-
|
| 1000 |
-
localStorage.setItem('user', JSON.stringify(state.user));
|
| 1001 |
-
|
| 1002 |
-
closeLoginModal();
|
| 1003 |
-
updateUIAfterLogin();
|
| 1004 |
-
} else {
|
| 1005 |
-
alert('Veuillez entrer un email et un mot de passe valides');
|
| 1006 |
-
}
|
| 1007 |
-
}
|
| 1008 |
-
|
| 1009 |
-
// Payer avec PayPal
|
| 1010 |
-
function payWithPaypal() {
|
| 1011 |
-
if (state.isAdmin) {
|
| 1012 |
-
// Pour les admins, tout est gratuit
|
| 1013 |
-
alert('Paiement complété (gratuit pour admin)');
|
| 1014 |
-
state.cart = [];
|
| 1015 |
-
updateCart();
|
| 1016 |
-
closePaymentModal();
|
| 1017 |
-
return;
|
| 1018 |
-
}
|
| 1019 |
-
|
| 1020 |
-
alert('Redirection vers PayPal pour le paiement...');
|
| 1021 |
-
// En production, vous utiliseriez:
|
| 1022 |
-
// paypal.Buttons({...}).render('#paypal-button-container');
|
| 1023 |
-
}
|
| 1024 |
-
|
| 1025 |
-
// Payer avec Stripe
|
| 1026 |
-
function payWithStripe() {
|
| 1027 |
-
if (state.isAdmin) {
|
| 1028 |
-
// Pour les admins, tout est gratuit
|
| 1029 |
-
alert('Paiement complété (gratuit pour admin)');
|
| 1030 |
-
state.cart = [];
|
| 1031 |
-
updateCart();
|
| 1032 |
-
closePaymentModal();
|
| 1033 |
-
return;
|
| 1034 |
-
}
|
| 1035 |
-
|
| 1036 |
-
alert('Redirection vers Stripe pour le paiement...');
|
| 1037 |
-
// En production, vous utiliseriez:
|
| 1038 |
-
// const stripe = Stripe('VOTRE_CLE_PUBLIQUE_STRIPE');
|
| 1039 |
-
// stripe.redirectToCheckout({ sessionId: 'ID_DE_SESSION' });
|
| 1040 |
-
}
|
| 1041 |
-
|
| 1042 |
-
// Initialisation
|
| 1043 |
init();
|
| 1044 |
</script>
|
| 1045 |
<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/boutique" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
|
|
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Marketplace IA Puissante - Tous les boutons</title>
|
| 7 |
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
|
|
|
| 9 |
<style>
|
| 10 |
@keyframes float {
|
| 11 |
0%, 100% { transform: translateY(0); }
|
|
|
|
| 24 |
transform: translateY(-5px);
|
| 25 |
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
| 26 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 27 |
.admin-badge {
|
| 28 |
position: absolute;
|
| 29 |
top: 10px;
|
|
|
|
| 35 |
font-size: 0.75rem;
|
| 36 |
font-weight: bold;
|
| 37 |
}
|
| 38 |
+
.virtual-scroll {
|
| 39 |
+
height: 70vh;
|
| 40 |
+
overflow-y: auto;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 41 |
}
|
| 42 |
+
.product-grid {
|
| 43 |
+
display: grid;
|
| 44 |
+
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
| 45 |
+
gap: 1.5rem;
|
| 46 |
}
|
| 47 |
</style>
|
| 48 |
</head>
|
| 49 |
<body class="gradient-bg min-h-screen text-white">
|
| 50 |
<!-- Navigation -->
|
| 51 |
+
<nav class="bg-black bg-opacity-20 fixed w-full z-50">
|
| 52 |
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 53 |
<div class="flex items-center justify-between h-16">
|
| 54 |
<div class="flex items-center">
|
|
|
|
| 78 |
</nav>
|
| 79 |
|
| 80 |
<!-- Hero Section -->
|
| 81 |
+
<div class="pt-32 pb-12 px-4 sm:px-6 lg:px-8 text-center">
|
| 82 |
<h1 class="text-5xl font-extrabold mb-6">986200 Boutons IA Puissants</h1>
|
| 83 |
+
<p class="text-xl mb-8 max-w-3xl mx-auto">Accédez à notre collection complète de boutons IA pour automatiser et optimiser tous vos processus métiers.</p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 84 |
<div class="mt-16">
|
| 85 |
<div class="floating inline-block">
|
| 86 |
<img src="https://cdn-icons-png.flaticon.com/512/2491/2491905.png" alt="IA" class="h-40">
|
|
|
|
| 88 |
</div>
|
| 89 |
</div>
|
| 90 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 91 |
<!-- Marketplace -->
|
| 92 |
+
<section id="marketplace" class="py-8 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
|
|
|
|
|
|
|
|
|
|
| 93 |
<div class="mb-8 flex justify-center">
|
| 94 |
<div class="relative w-full max-w-md">
|
| 95 |
<input type="text" placeholder="Rechercher un bouton IA..." class="w-full pl-10 pr-4 py-3 rounded-full bg-white bg-opacity-20 border border-white border-opacity-30 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-50">
|
|
|
|
| 97 |
</div>
|
| 98 |
</div>
|
| 99 |
|
| 100 |
+
<div class="virtual-scroll">
|
| 101 |
+
<div class="product-grid" id="products-container">
|
| 102 |
+
<!-- Les 986200 produits seront générés ici -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 103 |
</div>
|
| 104 |
</div>
|
| 105 |
+
</section>
|
| 106 |
|
| 107 |
<!-- Footer -->
|
| 108 |
+
<footer class="bg-black bg-opacity-20 py-12 px-4 sm:px-6 lg:px-8 mt-10">
|
| 109 |
<div class="max-w-7xl mx-auto">
|
| 110 |
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
| 111 |
<div>
|
|
|
|
| 160 |
"doctorblog.fr@gmail.com": "Admin270574@"
|
| 161 |
};
|
| 162 |
|
| 163 |
+
// Catégories de produits IA
|
| 164 |
+
const PRODUCT_CATEGORIES = [
|
| 165 |
+
"Marketing", "Analyse", "Chat", "Design", "SEO", "Code",
|
| 166 |
+
"Vidéo", "Audio", "Traduction", "Reconnaissance", "Sentiment",
|
| 167 |
+
"Contenu", "Anomalies", "Prédiction", "Gestion", "Support"
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 168 |
];
|
| 169 |
|
| 170 |
+
// Fonction pour générer un produit aléatoire
|
| 171 |
+
function generateRandomProduct(id) {
|
| 172 |
+
const category = PRODUCT_CATEGORIES[Math.floor(Math.random() * PRODUCT_CATEGORIES.length)];
|
| 173 |
+
const price = (Math.random() * 200 + 10).toFixed(2);
|
| 174 |
+
const icons = [
|
| 175 |
+
"https://cdn-icons-png.flaticon.com/512/2103/2103633.png",
|
| 176 |
+
"https://cdn-icons-png.flaticon.com/512/2933/2933245.png",
|
| 177 |
+
"https://cdn-icons-png.flaticon.com/512/1995/1995515.png",
|
| 178 |
+
"https://cdn-icons-png.flaticon.com/512/3069/3069172.png",
|
| 179 |
+
"https://cdn-icons-png.flaticon.com/512/2936/2936886.png",
|
| 180 |
+
"https://cdn-icons-png.flaticon.com/512/1055/1055687.png",
|
| 181 |
+
"https://cdn-icons-png.flaticon.com/512/3059/3059518.png",
|
| 182 |
+
"https://cdn-icons-png.flaticon.com/512/3059/3059534.png"
|
| 183 |
+
];
|
| 184 |
+
|
| 185 |
+
return {
|
| 186 |
+
id: id,
|
| 187 |
+
name: `IA ${category} ${Math.floor(Math.random() * 1000)}`,
|
| 188 |
+
description: `Solution IA avancée pour ${category.toLowerCase()} avec algorithmes optimisés.`,
|
| 189 |
+
price: parseFloat(price),
|
| 190 |
+
image: icons[Math.floor(Math.random() * icons.length)]
|
| 191 |
+
};
|
| 192 |
+
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 193 |
|
| 194 |
// État de l'application
|
| 195 |
let state = {
|
|
|
|
| 197 |
user: null,
|
| 198 |
isAdmin: false,
|
| 199 |
isSubscribed: false,
|
| 200 |
+
totalProducts: 986200
|
|
|
|
|
|
|
|
|
|
| 201 |
};
|
| 202 |
|
| 203 |
// Éléments du DOM
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 204 |
const productsContainer = document.getElementById('products-container');
|
| 205 |
+
const cartCountElement = document.getElementById('cart-count');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 206 |
const loginBtn = document.getElementById('login-btn');
|
| 207 |
const loginText = document.getElementById('login-text');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 208 |
|
| 209 |
+
// Générer tous les produits
|
| 210 |
+
function generateAllProducts() {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 211 |
let html = '';
|
| 212 |
+
const fragment = document.createDocumentFragment();
|
| 213 |
+
const batchSize = 1000;
|
| 214 |
+
const totalBatches = Math.ceil(state.totalProducts / batchSize);
|
| 215 |
|
| 216 |
+
function generateBatch(batchIndex) {
|
| 217 |
+
const start = batchIndex * batchSize;
|
| 218 |
+
const end = Math.min(start + batchSize, state.totalProducts);
|
| 219 |
+
|
| 220 |
+
for (let i = start; i < end; i++) {
|
| 221 |
+
const product = generateRandomProduct(i + 1);
|
| 222 |
+
const productElement = document.createElement('div');
|
| 223 |
+
productElement.className = 'bg-white bg-opacity-10 rounded-xl p-6 card-hover product-card relative';
|
| 224 |
+
productElement.innerHTML = `
|
| 225 |
<div class="flex justify-center mb-4">
|
| 226 |
<img src="${product.image}" alt="${product.name}" class="h-16">
|
| 227 |
</div>
|
|
|
|
| 236 |
<i class="fas fa-cart-plus mr-1"></i> Ajouter
|
| 237 |
</button>
|
| 238 |
</div>
|
| 239 |
+
`;
|
| 240 |
+
fragment.appendChild(productElement);
|
| 241 |
+
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 242 |
|
| 243 |
+
productsContainer.appendChild(fragment);
|
|
|
|
| 244 |
|
| 245 |
+
if (batchIndex < totalBatches - 1) {
|
| 246 |
+
setTimeout(() => generateBatch(batchIndex + 1), 0);
|
| 247 |
+
} else {
|
| 248 |
+
// Tous les produits sont générés, attacher les événements
|
| 249 |
+
document.querySelectorAll('.add-to-cart').forEach(button => {
|
| 250 |
+
button.addEventListener('click', addToCart);
|
| 251 |
+
});
|
| 252 |
+
|
| 253 |
+
if (state.isAdmin) {
|
| 254 |
+
document.querySelectorAll('.product-card').forEach(card => {
|
| 255 |
+
const badge = document.createElement('div');
|
| 256 |
+
badge.className = 'admin-badge';
|
| 257 |
+
badge.textContent = 'GRATUIT';
|
| 258 |
+
card.appendChild(badge);
|
| 259 |
+
});
|
| 260 |
+
}
|
| 261 |
+
}
|
| 262 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 263 |
|
| 264 |
+
// Démarrer la génération par lots
|
| 265 |
+
generateBatch(0);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 266 |
}
|
| 267 |
|
| 268 |
+
// Vérifier la session utilisateur
|
| 269 |
+
function checkSession() {
|
| 270 |
+
const user = localStorage.getItem('user');
|
| 271 |
+
if (user) {
|
| 272 |
+
state.user = JSON.parse(user);
|
| 273 |
+
state.isAdmin = ADMIN_ACCOUNTS.hasOwnProperty(state.user.email);
|
| 274 |
+
state.isSubscribed = state.isAdmin || localStorage.getItem('subscribed') === 'true';
|
| 275 |
+
|
| 276 |
+
updateUIAfterLogin();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 277 |
}
|
| 278 |
}
|
| 279 |
|
| 280 |
+
// Mettre à jour l'UI après connexion
|
| 281 |
+
function updateUIAfterLogin() {
|
| 282 |
+
loginText.textContent = state.user.email;
|
|
|
|
|
|
|
|
|
|
| 283 |
|
| 284 |
+
if (state.isSubscribed) {
|
| 285 |
+
subscribeBtn.classList.add('hidden');
|
| 286 |
+
} else if (!state.isAdmin) {
|
| 287 |
+
subscribeBtn.classList.remove('hidden');
|
| 288 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 289 |
}
|
| 290 |
|
| 291 |
// Ajouter un article au panier
|
| 292 |
function addToCart(event) {
|
| 293 |
if (!state.user) {
|
| 294 |
+
alert('Veuillez vous connecter pour ajouter des articles au panier');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 295 |
return;
|
| 296 |
}
|
| 297 |
|
|
|
|
| 315 |
}
|
| 316 |
|
| 317 |
updateCart();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 318 |
}
|
| 319 |
|
| 320 |
+
// Mettre à jour le panier
|
| 321 |
function updateCart() {
|
|
|
|
|
|
|
|
|
|
|
|
|
| 322 |
cartCountElement.textContent = state.cart.reduce((count, item) => count + item.quantity, 0);
|
|
|
|
|
|
|
|
|
|
| 323 |
}
|
| 324 |
|
| 325 |
+
// Initialisation
|
| 326 |
+
function init() {
|
| 327 |
+
checkSession();
|
| 328 |
+
generateAllProducts();
|
| 329 |
+
|
| 330 |
+
// Événements
|
| 331 |
+
loginBtn.addEventListener('click', function() {
|
| 332 |
+
if (state.user) {
|
| 333 |
+
// Déconnexion
|
| 334 |
+
localStorage.removeItem('user');
|
| 335 |
+
localStorage.removeItem('subscribed');
|
| 336 |
+
state.user = null;
|
| 337 |
+
state.isAdmin = false;
|
| 338 |
+
state.isSubscribed = false;
|
| 339 |
+
loginText.textContent = 'Connexion';
|
| 340 |
+
} else {
|
| 341 |
+
alert('Fonction de connexion à implémenter');
|
| 342 |
+
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 343 |
});
|
| 344 |
}
|
| 345 |
|
| 346 |
+
// Démarrer l'application
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 347 |
init();
|
| 348 |
</script>
|
| 349 |
<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/boutique" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
|
prompts.txt
CHANGED
|
@@ -1,3 +1,5 @@
|
|
| 1 |
creer un site de marketplace composer de 986200 bouton d'assisat IA TRES puissant avec des vrais bouton reel et actif pas des bouton d'exemple je veux un vrais site avec des bouton reel : 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 paiement : le tout en automatique ouvrer chaque bouton cliquéé dans une nouvel fenetre , je veut un tres belle interface tres animer et un jolie arriere plant
|
| 2 |
je veux acces et toute produit pour moi seul les autre devront payer un abonnement : vgp.bavol@gmail.com : Admin270574@ et doctorblog.fr@gmail.com : Admin270574@
|
| 3 |
-
ACTIVER LE OUTON CHARGER PLUS
|
|
|
|
|
|
|
|
|
| 1 |
creer un site de marketplace composer de 986200 bouton d'assisat IA TRES puissant avec des vrais bouton reel et actif pas des bouton d'exemple je veux un vrais site avec des bouton reel : 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 paiement : le tout en automatique ouvrer chaque bouton cliquéé dans une nouvel fenetre , je veut un tres belle interface tres animer et un jolie arriere plant
|
| 2 |
je veux acces et toute produit pour moi seul les autre devront payer un abonnement : vgp.bavol@gmail.com : Admin270574@ et doctorblog.fr@gmail.com : Admin270574@
|
| 3 |
+
ACTIVER LE OUTON CHARGER PLUS
|
| 4 |
+
ACTIVER TOUTES LES BOUTONS ACTIVER PLUS
|
| 5 |
+
afficher les 986200 bouton directement
|