|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>MegaMarket AI - La Plus Grande Marketplace de Services</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: #6e45e2; |
|
|
--secondary: #88d3ce; |
|
|
--dark: #1a1a2e; |
|
|
--light: #f8f9fa; |
|
|
--accent: #ff6b6b; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Roboto', sans-serif; |
|
|
background-color: #f5f7fa; |
|
|
color: #333; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.orbitron { |
|
|
font-family: 'Orbitron', sans-serif; |
|
|
} |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); |
|
|
} |
|
|
|
|
|
.card-glow { |
|
|
box-shadow: 0 0 20px rgba(110, 69, 226, 0.1); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.card-glow:hover { |
|
|
box-shadow: 0 0 30px rgba(110, 69, 226, 0.2); |
|
|
transform: translateY(-5px); |
|
|
} |
|
|
|
|
|
.ai-pulse { |
|
|
animation: aiPulse 3s infinite; |
|
|
} |
|
|
|
|
|
@keyframes aiPulse { |
|
|
0% { opacity: 0.8; } |
|
|
50% { opacity: 1; } |
|
|
100% { opacity: 0.8; } |
|
|
} |
|
|
|
|
|
.dashboard-grid { |
|
|
display: grid; |
|
|
grid-template-columns: 250px 1fr; |
|
|
min-height: 100vh; |
|
|
} |
|
|
|
|
|
.sidebar { |
|
|
background: rgba(26, 26, 46, 0.95); |
|
|
backdrop-filter: blur(10px); |
|
|
border-right: 1px solid rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
.main-content { |
|
|
background-color: #f5f7fa; |
|
|
} |
|
|
|
|
|
.category-chip { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
|
|
|
.category-chip:hover { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
|
|
|
.product-card { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.product-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.ai-badge { |
|
|
position: absolute; |
|
|
top: -10px; |
|
|
right: -10px; |
|
|
background: linear-gradient(135deg, #ff6b6b, #ff8e53); |
|
|
color: white; |
|
|
border-radius: 50%; |
|
|
width: 30px; |
|
|
height: 30px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 12px; |
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
|
|
|
.modal { |
|
|
transition: opacity 0.3s ease, transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.modal-enter { |
|
|
opacity: 0; |
|
|
transform: scale(0.9); |
|
|
} |
|
|
|
|
|
.modal-enter-active { |
|
|
opacity: 1; |
|
|
transform: scale(1); |
|
|
} |
|
|
|
|
|
.blink { |
|
|
animation: blink 1s step-end infinite; |
|
|
} |
|
|
|
|
|
@keyframes blink { |
|
|
from, to { opacity: 1; } |
|
|
50% { opacity: 0; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="dashboard-grid"> |
|
|
|
|
|
<div class="sidebar p-4 flex flex-col"> |
|
|
<div class="flex items-center mb-8"> |
|
|
<div class="w-12 h-12 gradient-bg rounded-full flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-robot text-white text-xl"></i> |
|
|
</div> |
|
|
<h1 class="orbitron text-xl font-bold text-white">MegaMarket AI</h1> |
|
|
</div> |
|
|
|
|
|
<nav class="flex-1"> |
|
|
<ul class="space-y-2"> |
|
|
<li> |
|
|
<a href="#" class="flex items-center p-3 rounded-lg bg-indigo-900 text-white"> |
|
|
<i class="fas fa-home mr-3"></i> |
|
|
Accueil |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-indigo-800 text-gray-300 hover:text-white"> |
|
|
<i class="fas fa-th-large mr-3"></i> |
|
|
Catégories |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-indigo-800 text-gray-300 hover:text-white"> |
|
|
<i class="fas fa-fire mr-3"></i> |
|
|
Tendances |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-indigo-800 text-gray-300 hover:text-white"> |
|
|
<i class="fas fa-download mr-3"></i> |
|
|
Mes téléchargements |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-indigo-800 text-gray-300 hover:text-white"> |
|
|
<i class="fas fa-heart mr-3"></i> |
|
|
Favoris |
|
|
</a> |
|
|
</li> |
|
|
<li> |
|
|
<a href="#" class="flex items-center p-3 rounded-lg hover:bg-indigo-800 text-gray-300 hover:text-white"> |
|
|
<i class="fas fa-cog mr-3"></i> |
|
|
Paramètres |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
</nav> |
|
|
|
|
|
<div class="mt-auto"> |
|
|
<div class="p-4 bg-indigo-900 rounded-lg"> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div> |
|
|
<span class="text-sm text-white">Système actif</span> |
|
|
</div> |
|
|
<div class="text-xs text-gray-300">987,000 IA opérationnelles</div> |
|
|
<div class="text-xs text-gray-300 mt-1">7,560,000 produits disponibles</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="main-content p-8 overflow-y-auto"> |
|
|
<header class="flex justify-between items-center mb-8"> |
|
|
<div> |
|
|
<h1 class="orbitron text-3xl font-bold text-gray-800">MegaMarket AI</h1> |
|
|
<p class="text-gray-600">La plus grande marketplace de services en ligne, alimentée par 987,000 IA</p> |
|
|
</div> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<input type="text" placeholder="Rechercher parmi 7.56M produits..." class="bg-white border border-gray-300 rounded-full py-2 px-4 pl-10 focus:outline-none focus:ring-2 focus:ring-indigo-500 w-64"> |
|
|
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
|
|
</div> |
|
|
<button id="notificationBtn" class="bg-white hover:bg-gray-100 text-gray-700 p-2 rounded-full border border-gray-300"> |
|
|
<i class="fas fa-bell"></i> |
|
|
<span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span> |
|
|
</button> |
|
|
<button id="loginBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg"> |
|
|
<i class="fas fa-user mr-2"></i> |
|
|
Connexion |
|
|
</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="gradient-bg rounded-2xl p-8 text-white mb-8"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-6 md:mb-0"> |
|
|
<h2 class="orbitron text-4xl font-bold mb-4">Accédez à 7.56 millions de produits</h2> |
|
|
<p class="text-lg mb-6">Téléchargez gratuitement après inscription et abonnement à notre plateforme révolutionnaire gérée par IA.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<button id="registerBtn" class="bg-white text-indigo-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium"> |
|
|
S'inscrire maintenant |
|
|
</button> |
|
|
<button id="learnMoreBtn" class="bg-transparent border-2 border-white hover:bg-white hover:bg-opacity-20 px-6 py-3 rounded-lg font-medium"> |
|
|
En savoir plus |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 relative"> |
|
|
<div class="bg-white bg-opacity-20 rounded-xl p-6 backdrop-blur-md"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-10 h-10 bg-white rounded-full flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-robot text-indigo-600"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold">Assistant IA MegaMarket</h3> |
|
|
<p class="text-sm text-white text-opacity-80">En ligne - Prêt à vous aider</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-white bg-opacity-30 rounded-lg p-4 mb-3"> |
|
|
<p>Bonjour ! Je peux vous aider à trouver exactement ce dont vous avez besoin parmi nos 7.56 millions de produits.</p> |
|
|
</div> |
|
|
<div class="flex"> |
|
|
<input type="text" placeholder="Posez votre question..." class="flex-1 bg-white bg-opacity-50 border-0 rounded-l-lg py-2 px-4 text-white placeholder-white placeholder-opacity-70 focus:outline-none focus:ring-2 focus:ring-white"> |
|
|
<button class="bg-white text-indigo-600 px-4 rounded-r-lg"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute -bottom-4 -right-4 bg-yellow-400 text-gray-900 px-3 py-1 rounded-full text-xs font-bold"> |
|
|
<i class="fas fa-bolt mr-1"></i> |
|
|
Powered by 987K IA |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="orbitron text-2xl font-bold text-gray-800">Catégories populaires</h2> |
|
|
<a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Voir toutes (287)</a> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4"> |
|
|
<div class="category-chip bg-white rounded-xl p-4 text-center cursor-pointer hover:shadow-md"> |
|
|
<div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-3"> |
|
|
<i class="fas fa-code text-indigo-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="font-medium">Développement</h3> |
|
|
<p class="text-xs text-gray-500">1.2M produits</p> |
|
|
</div> |
|
|
<div class="category-chip bg-white rounded-xl p-4 text-center cursor-pointer hover:shadow-md"> |
|
|
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-3"> |
|
|
<i class="fas fa-paint-brush text-purple-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="font-medium">Design</h3> |
|
|
<p class="text-xs text-gray-500">980K produits</p> |
|
|
</div> |
|
|
<div class="category-chip bg-white rounded-xl p-4 text-center cursor-pointer hover:shadow-md"> |
|
|
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3"> |
|
|
<i class="fas fa-chart-line text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="font-medium">Marketing</h3> |
|
|
<p class="text-xs text-gray-500">750K produits</p> |
|
|
</div> |
|
|
<div class="category-chip bg-white rounded-xl p-4 text-center cursor-pointer hover:shadow-md"> |
|
|
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3"> |
|
|
<i class="fas fa-camera text-green-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="font-medium">Photo/Vidéo</h3> |
|
|
<p class="text-xs text-gray-500">620K produits</p> |
|
|
</div> |
|
|
<div class="category-chip bg-white rounded-xl p-4 text-center cursor-pointer hover:shadow-md"> |
|
|
<div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-3"> |
|
|
<i class="fas fa-music text-red-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="font-medium">Audio</h3> |
|
|
<p class="text-xs text-gray-500">510K produits</p> |
|
|
</div> |
|
|
<div class="category-chip bg-white rounded-xl p-4 text-center cursor-pointer hover:shadow-md"> |
|
|
<div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-3"> |
|
|
<i class="fas fa-gamepad text-yellow-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="font-medium">Jeux</h3> |
|
|
<p class="text-xs text-gray-500">890K produits</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<h2 class="orbitron text-2xl font-bold text-gray-800">Produits générés par IA</h2> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-sm text-gray-600 mr-3">Gérés par 987,000 IA</span> |
|
|
<a href="#" class="text-indigo-600 hover:text-indigo-800 font-medium">Voir plus</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> |
|
|
|
|
|
<div class="product-card bg-white rounded-xl overflow-hidden shadow-sm relative"> |
|
|
<div class="ai-badge"> |
|
|
<i class="fas fa-brain"></i> |
|
|
</div> |
|
|
<div class="h-48 bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center"> |
|
|
<i class="fas fa-robot text-white text-5xl opacity-30"></i> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="font-bold text-lg">AI Website Builder Pro</h3> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Gratuit</span> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm mb-3">Créez des sites web professionnels en quelques minutes avec notre IA avancée</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
|
<span class="text-sm font-medium">4.9</span> |
|
|
<span class="text-sm text-gray-500 ml-1">(12K)</span> |
|
|
</div> |
|
|
<span class="text-xs text-gray-500">1.2M téléchargements</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="px-4 pb-4"> |
|
|
<button class="download-btn w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 rounded-lg text-sm font-medium"> |
|
|
<i class="fas fa-download mr-2"></i>Télécharger |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="product-card bg-white rounded-xl overflow-hidden shadow-sm relative"> |
|
|
<div class="ai-badge"> |
|
|
<i class="fas fa-brain"></i> |
|
|
</div> |
|
|
<div class="h-48 bg-gradient-to-r from-blue-500 to-teal-400 flex items-center justify-center"> |
|
|
<i class="fas fa-paint-brush text-white text-5xl opacity-30"></i> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="font-bold text-lg">AI Design Master</h3> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Gratuit</span> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm mb-3">Générez des designs professionnels en quelques secondes avec notre IA créative</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
|
<span class="text-sm font-medium">4.8</span> |
|
|
<span class="text-sm text-gray-500 ml-1">(8.7K)</span> |
|
|
</div> |
|
|
<span class="text-xs text-gray-500">980K téléchargements</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="px-4 pb-4"> |
|
|
<button class="download-btn w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 rounded-lg text-sm font-medium"> |
|
|
<i class="fas fa-download mr-2"></i>Télécharger |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="product-card bg-white rounded-xl overflow-hidden shadow-sm relative"> |
|
|
<div class="ai-badge"> |
|
|
<i class="fas fa-brain"></i> |
|
|
</div> |
|
|
<div class="h-48 bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center"> |
|
|
<i class="fas fa-music text-white text-5xl opacity-30"></i> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="font-bold text-lg">AI Music Composer</h3> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Gratuit</span> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm mb-3">Composez de la musique professionnelle en quelques clics avec notre IA musicale</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
|
<span class="text-sm font-medium">4.7</span> |
|
|
<span class="text-sm text-gray-500 ml-1">(6.5K)</span> |
|
|
</div> |
|
|
<span class="text-xs text-gray-500">750K téléchargements</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="px-4 pb-4"> |
|
|
<button class="download-btn w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 rounded-lg text-sm font-medium"> |
|
|
<i class="fas fa-download mr-2"></i>Télécharger |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="product-card bg-white rounded-xl overflow-hidden shadow-sm relative"> |
|
|
<div class="ai-badge"> |
|
|
<i class="fas fa-brain"></i> |
|
|
</div> |
|
|
<div class="h-48 bg-gradient-to-r from-red-500 to-orange-500 flex items-center justify-center"> |
|
|
<i class="fas fa-video text-white text-5xl opacity-30"></i> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="flex justify-between items-start mb-2"> |
|
|
<h3 class="font-bold text-lg">AI Video Editor Pro</h3> |
|
|
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded">Gratuit</span> |
|
|
</div> |
|
|
<p class="text-gray-600 text-sm mb-3">Éditez des vidéos professionnelles automatiquement avec notre IA vidéo</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
|
<span class="text-sm font-medium">4.9</span> |
|
|
<span class="text-sm text-gray-500 ml-1">(15.2K)</span> |
|
|
</div> |
|
|
<span class="text-xs text-gray-500">1.8M téléchargements</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="px-4 pb-4"> |
|
|
<button class="download-btn w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 rounded-lg text-sm font-medium"> |
|
|
<i class="fas fa |
|
|
</html> |
