| | <!DOCTYPE html> |
| | <html lang="fr"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>NexusMarket - La plus grande marketplace 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> |
| | @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@300;400;700&display=swap'); |
| | |
| | :root { |
| | --primary: #6e00ff; |
| | --secondary: #00f0ff; |
| | --dark: #0f0f1a; |
| | --light: #f0f0ff; |
| | } |
| | |
| | body { |
| | font-family: 'Roboto', sans-serif; |
| | background-color: var(--dark); |
| | color: var(--light); |
| | overflow-x: hidden; |
| | } |
| | |
| | .font-orbitron { |
| | font-family: 'Orbitron', sans-serif; |
| | } |
| | |
| | .gradient-text { |
| | background: linear-gradient(90deg, var(--primary), var(--secondary)); |
| | -webkit-background-clip: text; |
| | background-clip: text; |
| | color: transparent; |
| | } |
| | |
| | .neon-border { |
| | border: 2px solid transparent; |
| | border-image: linear-gradient(45deg, var(--primary), var(--secondary)) 1; |
| | } |
| | |
| | .glow { |
| | box-shadow: 0 0 15px rgba(110, 0, 255, 0.5); |
| | } |
| | |
| | .glow-hover:hover { |
| | box-shadow: 0 0 25px rgba(0, 240, 255, 0.7); |
| | } |
| | |
| | .product-card { |
| | transition: all 0.3s ease; |
| | background: rgba(15, 15, 26, 0.7); |
| | backdrop-filter: blur(10px); |
| | } |
| | |
| | .product-card:hover { |
| | transform: translateY(-10px); |
| | } |
| | |
| | .ai-generated-tag { |
| | position: absolute; |
| | top: 10px; |
| | right: 10px; |
| | background: linear-gradient(45deg, var(--primary), var(--secondary)); |
| | clip-path: polygon(0 0, 100% 0, 100% 70%, 85% 100%, 0 100%); |
| | } |
| | |
| | .robot-avatar { |
| | width: 40px; |
| | height: 40px; |
| | background: linear-gradient(45deg, var(--primary), var(--secondary)); |
| | border-radius: 50%; |
| | display: flex; |
| | align-items: center; |
| | justify-content: center; |
| | } |
| | |
| | .loading-bar { |
| | height: 4px; |
| | background: linear-gradient(90deg, var(--primary), var(--secondary)); |
| | animation: loading 2s infinite; |
| | } |
| | |
| | @keyframes loading { |
| | 0% { width: 0%; left: 0; } |
| | 50% { width: 100%; left: 0; } |
| | 100% { width: 0%; left: 100%; } |
| | } |
| | |
| | .floating { |
| | animation: floating 3s ease-in-out infinite; |
| | } |
| | |
| | @keyframes floating { |
| | 0% { transform: translateY(0px); } |
| | 50% { transform: translateY(-15px); } |
| | 100% { transform: translateY(0px); } |
| | } |
| | |
| | .stats-counter { |
| | font-size: 2.5rem; |
| | font-weight: bold; |
| | background: linear-gradient(90deg, var(--primary), var(--secondary)); |
| | -webkit-background-clip: text; |
| | background-clip: text; |
| | color: transparent; |
| | } |
| | |
| | button, a.button-like { |
| | cursor: pointer; |
| | transition: all 0.3s ease; |
| | user-select: none; |
| | outline: none; |
| | } |
| | |
| | button:active, a.button-like:active { |
| | transform: scale(0.98); |
| | } |
| | |
| | .modal { |
| | display: none; |
| | position: fixed; |
| | z-index: 100; |
| | left: 0; |
| | top: 0; |
| | width: 100%; |
| | height: 100%; |
| | background-color: rgba(0,0,0,0.8); |
| | } |
| | |
| | .modal-content { |
| | background-color: #0f0f1a; |
| | margin: 10% auto; |
| | padding: 20px; |
| | border: 1px solid #6e00ff; |
| | width: 80%; |
| | max-width: 600px; |
| | border-radius: 10px; |
| | box-shadow: 0 0 20px rgba(110, 0, 255, 0.5); |
| | } |
| | |
| | .close { |
| | color: #aaa; |
| | float: right; |
| | font-size: 28px; |
| | font-weight: bold; |
| | cursor: pointer; |
| | } |
| | |
| | .close:hover { |
| | color: white; |
| | } |
| | |
| | .category-chip { |
| | transition: all 0.3s ease; |
| | } |
| | |
| | .category-chip:hover { |
| | transform: translateY(-3px); |
| | box-shadow: 0 5px 15px rgba(110, 0, 255, 0.3); |
| | } |
| | |
| | |
| | .btn-primary { |
| | background: linear-gradient(90deg, var(--primary), var(--secondary)); |
| | color: white; |
| | border: none; |
| | padding: 12px 24px; |
| | border-radius: 6px; |
| | font-weight: bold; |
| | text-transform: uppercase; |
| | letter-spacing: 1px; |
| | } |
| | |
| | .btn-primary:hover { |
| | background: linear-gradient(90deg, #5a00d6, #00c8d6); |
| | transform: translateY(-2px); |
| | } |
| | |
| | .btn-secondary { |
| | background: transparent; |
| | color: white; |
| | border: 2px solid var(--primary); |
| | padding: 10px 22px; |
| | border-radius: 6px; |
| | font-weight: bold; |
| | } |
| | |
| | .btn-secondary:hover { |
| | background: rgba(110, 0, 255, 0.1); |
| | border-color: var(--secondary); |
| | } |
| | |
| | .btn-download { |
| | background: var(--primary); |
| | color: white; |
| | border: none; |
| | padding: 6px 12px; |
| | border-radius: 4px; |
| | font-size: 0.8rem; |
| | } |
| | |
| | .btn-download:hover { |
| | background: #5a00d6; |
| | } |
| | |
| | |
| | #all-categories { |
| | padding: 4rem 0; |
| | background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 100%); |
| | } |
| | </style> |
| | </head> |
| | <body> |
| | |
| | <div id="loadingScreen" class="fixed inset-0 bg-black z-50 flex flex-col items-center justify-center"> |
| | <div class="text-4xl font-orbitron gradient-text mb-4">NEXUS MARKET</div> |
| | <div class="w-64 h-1 bg-gray-800 rounded-full overflow-hidden"> |
| | <div class="loading-bar"></div> |
| | </div> |
| | <div class="mt-4 text-sm text-gray-400">Chargement de 6,548,850 produits IA...</div> |
| | </div> |
| |
|
| | |
| | <nav class="bg-black bg-opacity-80 backdrop-filter backdrop-blur-lg border-b border-gray-800 fixed w-full z-40"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| | <div class="flex justify-between h-16 items-center"> |
| | <div class="flex items-center"> |
| | <div class="flex-shrink-0 flex items-center"> |
| | <div class="font-orbitron text-2xl gradient-text">NEXUS<span class="text-white">MARKET</span></div> |
| | </div> |
| | <div class="hidden md:block"> |
| | <div class="ml-10 flex items-baseline space-x-4"> |
| | <a href="#" class="text-white px-3 py-2 rounded-md text-sm font-medium">Accueil</a> |
| | <a href="#featured" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Explorer</a> |
| | <a href="#categories" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Catégories</a> |
| | <a href="#creators" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Créateurs IA</a> |
| | <a href="#subscriptions" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Abonnements</a> |
| | </div> |
| | </div> |
| | </div> |
| | <div class="hidden md:block"> |
| | <div class="ml-4 flex items-center md:ml-6"> |
| | <div class="relative mx-4"> |
| | <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
| | <i class="fas fa-search text-gray-400"></i> |
| | </div> |
| | <input class="block w-full pl-10 pr-3 py-2 bg-gray-900 border border-gray-700 rounded-md text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Rechercher parmi 6M+ produits..." type="search"> |
| | </div> |
| | <button id="accountBtn" class="btn-secondary px-4 py-2 rounded-md text-sm font-medium"> |
| | <i class="fas fa-robot mr-2"></i>Mon compte |
| | </button> |
| | </div> |
| | </div> |
| | <div class="-mr-2 flex md:hidden"> |
| | <button id="mobileMenuBtn" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none"> |
| | <span class="sr-only">Open main menu</span> |
| | <i class="fas fa-bars"></i> |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div id="mobileMenu" class="hidden md:hidden bg-gray-900"> |
| | <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> |
| | <a href="#" class="text-white block px-3 py-2 rounded-md text-base font-medium">Accueil</a> |
| | <a href="#featured" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Explorer</a> |
| | <a href="#categories" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Catégories</a> |
| | <a href="#creators" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Créateurs IA</a> |
| | <a href="#subscriptions" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Abonnements</a> |
| | <div class="pt-4 pb-3 border-t border-gray-7 |
| | </html> |
