|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Produits Vedettes Distributeurs</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://gradio.s3-us-west-2.amazonaws.com/3.50.2/gradio.js"></script> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#6366f1', |
|
|
secondary: '#8b5cf6', |
|
|
accent: '#ec4899', |
|
|
dark: '#0f172a', |
|
|
light: '#f8fafc' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background-color: #f1f5f9; |
|
|
} |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%); |
|
|
} |
|
|
|
|
|
.product-card { |
|
|
transition: all 0.3s ease; |
|
|
border-radius: 16px; |
|
|
overflow: hidden; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
.product-card:hover { |
|
|
transform: translateY(-8px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
|
|
|
.animated-check { |
|
|
animation: checkmark 0.5s ease; |
|
|
} |
|
|
|
|
|
@keyframes checkmark { |
|
|
0% { transform: scale(0); } |
|
|
50% { transform: scale(1.2); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
|
|
|
.tag { |
|
|
position: absolute; |
|
|
top: 12px; |
|
|
right: 12px; |
|
|
padding: 4px 12px; |
|
|
border-radius: 20px; |
|
|
font-weight: 600; |
|
|
font-size: 0.75rem; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.5px; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.trend-tag { |
|
|
background: linear-gradient(135deg, #3b82f6, #60a5fa); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.bestseller-tag { |
|
|
background: linear-gradient(135deg, #10b981, #34d399); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.new-tag { |
|
|
background: linear-gradient(135deg, #f59e0b, #fbbf24); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.seasonal-tag { |
|
|
background: linear-gradient(135deg, #ef4444, #f87171); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.stats-card { |
|
|
transition: all 0.3s ease; |
|
|
border-radius: 16px; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.stats-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
.floating-btn { |
|
|
position: fixed; |
|
|
bottom: 24px; |
|
|
right: 24px; |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
|
|
z-index: 50; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.floating-btn:hover { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.modal-overlay { |
|
|
position: fixed; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
background-color: rgba(0, 0, 0, 0.7); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
z-index: 100; |
|
|
opacity: 0; |
|
|
visibility: hidden; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.modal-overlay.active { |
|
|
opacity: 1; |
|
|
visibility: visible; |
|
|
} |
|
|
|
|
|
.modal-content { |
|
|
background-color: white; |
|
|
border-radius: 20px; |
|
|
width: 90%; |
|
|
max-width: 500px; |
|
|
max-height: 80vh; |
|
|
overflow-y: auto; |
|
|
transform: translateY(20px); |
|
|
transition: transform 0.3s ease; |
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); |
|
|
} |
|
|
|
|
|
.modal-overlay.active .modal-content { |
|
|
transform: translateY(0); |
|
|
} |
|
|
|
|
|
.product-image { |
|
|
height: 180px; |
|
|
object-fit: cover; |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.product-card:hover .product-image { |
|
|
transform: scale(1.05); |
|
|
} |
|
|
|
|
|
.rating-stars { |
|
|
color: #fbbf24; |
|
|
} |
|
|
|
|
|
.price-old { |
|
|
text-decoration: line-through; |
|
|
color: #94a3b8; |
|
|
} |
|
|
|
|
|
.price-new { |
|
|
font-weight: 700; |
|
|
font-size: 1.25rem; |
|
|
color: #6366f1; |
|
|
} |
|
|
|
|
|
.stats-icon { |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
border-radius: 12px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 1.25rem; |
|
|
} |
|
|
|
|
|
.top-product-card { |
|
|
transition: all 0.3s ease; |
|
|
border-radius: 16px; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.top-product-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
.top-product-image { |
|
|
height: 160px; |
|
|
object-fit: cover; |
|
|
} |
|
|
|
|
|
.platform-tag { |
|
|
position: absolute; |
|
|
bottom: 12px; |
|
|
left: 12px; |
|
|
padding: 4px 12px; |
|
|
border-radius: 20px; |
|
|
font-weight: 600; |
|
|
font-size: 0.75rem; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.5px; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.amazon-tag { |
|
|
background: linear-gradient(135deg, #ff9900, #ffad33); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.ebay-tag { |
|
|
background: linear-gradient(135deg, #0064d2, #3385db); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.etsy-tag { |
|
|
background: linear-gradient(135deg, #f16521, #f48a5b); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.tip-card { |
|
|
transition: all 0.3s ease; |
|
|
border-radius: 16px; |
|
|
overflow: hidden; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
.tip-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
.tip-icon { |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
border-radius: 16px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 1.5rem; |
|
|
} |
|
|
|
|
|
.newsletter-input { |
|
|
border-radius: 12px 0 0 12px; |
|
|
border: none; |
|
|
padding: 16px 20px; |
|
|
width: 100%; |
|
|
font-size: 1rem; |
|
|
} |
|
|
|
|
|
.newsletter-btn { |
|
|
border-radius: 0 12px 12px 0; |
|
|
padding: 16px 24px; |
|
|
font-weight: 600; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.newsletter-btn:hover { |
|
|
opacity: 0.9; |
|
|
} |
|
|
|
|
|
.footer-link { |
|
|
transition: all 0.2s ease; |
|
|
display: block; |
|
|
padding: 4px 0; |
|
|
} |
|
|
|
|
|
.footer-link:hover { |
|
|
color: white; |
|
|
transform: translateX(5px); |
|
|
} |
|
|
|
|
|
.filter-select { |
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); |
|
|
background-position: right 0.5rem center; |
|
|
background-repeat: no-repeat; |
|
|
background-size: 1.5em 1.5em; |
|
|
padding-right: 2.5rem; |
|
|
-webkit-print-color-adjust: exact; |
|
|
print-color-adjust: exact; |
|
|
} |
|
|
|
|
|
.sort-select { |
|
|
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); |
|
|
background-position: right 0.5rem center; |
|
|
background-repeat: no-repeat; |
|
|
background-size: 1.5em 1.5em; |
|
|
padding-right: 2.5rem; |
|
|
-webkit-print-color-adjust: exact; |
|
|
print-color-adjust: exact; |
|
|
} |
|
|
|
|
|
.progress-bar { |
|
|
height: 8px; |
|
|
border-radius: 4px; |
|
|
background-color: #e2e8f0; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.progress-fill { |
|
|
height: 100%; |
|
|
border-radius: 4px; |
|
|
background: linear-gradient(90deg, #6366f1, #8b5cf6); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50"> |
|
|
|
|
|
<header class="gradient-bg text-white py-8 px-4 relative overflow-hidden"> |
|
|
<div class="absolute top-0 left-0 w-full h-full opacity-10"> |
|
|
<div class="absolute top-10 left-10 w-32 h-32 bg-white rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div> |
|
|
<div class="absolute top-0 right-10 w-32 h-32 bg-white rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div> |
|
|
<div class="absolute bottom-10 left-1/2 w-32 h-32 bg-white rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div> |
|
|
</div> |
|
|
<div class="container mx-auto relative z-10"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="mb-6 md:mb-0 text-center md:text-left"> |
|
|
<h1 class="text-3xl md:text-4xl font-bold mb-2">Produits Vedettes des Distributeurs</h1> |
|
|
<p class="text-lg opacity-90 max-w-2xl">Découvrez les produits les plus vendus de la semaine provenant de nos distributeurs partenaires</p> |
|
|
</div> |
|
|
<div class="bg-white rounded-xl p-4 shadow-xl w-full md:w-64"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-chart-line text-indigo-600 text-2xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-gray-500 text-sm">Potentiel de profit</p> |
|
|
<p class="text-xl font-bold text-gray-800">Élevé</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="container mx-auto px-4 py-8"> |
|
|
|
|
|
<section class="bg-white rounded-2xl shadow-lg p-6 mb-8"> |
|
|
<h2 class="text-2xl font-bold mb-6 text-gray-800">Filtrez par Distributeurs</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
<div> |
|
|
<label class="block text-gray-700 font-medium mb-2">Distributeur</label> |
|
|
<select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 filter-select"> |
|
|
<option>Tous les distributeurs</option> |
|
|
<option>Amazon</option> |
|
|
<option>eBay</option> |
|
|
<option>Etsy</option> |
|
|
<option>AliExpress</option> |
|
|
<option>Cdiscount</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 font-medium mb-2">Catégorie</label> |
|
|
<select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 filter-select"> |
|
|
<option>Toutes catégories</option> |
|
|
<option>Mode & Accessoires</option> |
|
|
<option>Électronique</option> |
|
|
<option>Maison & Jardin</option> |
|
|
<option>Beauté & Santé</option> |
|
|
<option>Sports & Loisirs</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 font-medium mb-2">Tendance</label> |
|
|
<select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 filter-select"> |
|
|
<option>Toutes tendances</option> |
|
|
<option>En forte croissance</option> |
|
|
<option>Produits saisonniers</option> |
|
|
<option>Classiques durables</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6 flex justify-end"> |
|
|
<button class="gradient-bg text-white px-6 py-3 rounded-lg font-medium hover:opacity-90 transition shadow-lg">Voir les produits</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section> |
|
|
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 gap-4"> |
|
|
<h2 class="text-2xl font-bold text-gray-800">Produits Vedettes de la Semaine</h2> |
|
|
<div class="flex items-center bg-white rounded-lg px-3 py-2 shadow"> |
|
|
<span class="text-gray-600 mr-2 whitespace-nowrap">Trier par:</span> |
|
|
<select class="p-2 border-0 focus:ring-0 sort-select"> |
|
|
<option>Ventes cette semaine</option> |
|
|
<option>Tendance croissante</option> |
|
|
<option>Prix croissant</option> |
|
|
<option>Prix décroissant</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> |
|
|
|
|
|
<div class="product-card bg-white"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Montre intelligente" class="w-full product-image"> |
|
|
<div class="tag trend-tag">Tendance</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold text-lg mb-1">Montre Intelligente Fitness</h3> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="flex rating-stars"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star-half-alt"></i> |
|
|
</div> |
|
|
<span class="text-gray-600 text-sm ml-2">(124 avis)</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center mb-3"> |
|
|
<span class="price-old">89€</span> |
|
|
<span class="price-new">59€</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center text-sm text-gray-600 mb-3"> |
|
|
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-full"> |
|
|
<i class="fas fa-store mr-1"></i> Amazon |
|
|
</span> |
|
|
<div> |
|
|
<span class="mr-3"><i class="fas fa-shopping-cart mr-1 text-indigo-500"></i> 1,240/sem</span> |
|
|
<span><i class="fas fa-percentage mr-1 text-indigo-500"></i> 35%</span> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full gradient-bg text-white py-2 rounded-lg font-medium hover:opacity-90 transition">Ajouter à ma sélection</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="product-card bg-white"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1594035910387-fea47794261f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Oreillers ergonomiques" class="w-full product-image"> |
|
|
<div class="tag bestseller-tag">Best-seller</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold text-lg mb-1">Oreiller Ergonomique Mémoire</h3> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="flex rating-stars"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
<span class="text-gray-600 text-sm ml-2">(217 avis)</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center mb-3"> |
|
|
<span class="price-old">65€</span> |
|
|
<span class="price-new">49€</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center text-sm text-gray-600 mb-3"> |
|
|
<span class="bg-green-100 text-green-800 text-xs font-medium px-2.5 py-0.5 rounded-full"> |
|
|
<i class="fas fa-store mr-1"></i> eBay |
|
|
</span> |
|
|
<div> |
|
|
<span class="mr-3"><i class="fas fa-shopping-cart mr-1 text-indigo-500"></i> 2,170/sem</span> |
|
|
<span><i class="fas fa-percentage mr-1 text-indigo-500"></i> 40%</span> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full gradient-bg text-white py-2 rounded-lg font-medium hover:opacity-90 transition">Ajouter à ma sélection</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="product-card bg-white"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1595341595379-cf2a0a90821e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Brosse nettoyante visage" class="w-full product-image"> |
|
|
<div class="tag new-tag">Nouveauté</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold text-lg mb-1">Brosse Nettoyante Visage</h3> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="flex rating-stars"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="far fa-star"></i> |
|
|
</div> |
|
|
<span class="text-gray-600 text-sm ml-2">(89 avis)</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center mb-3"> |
|
|
<span class="price-old">39€</span> |
|
|
<span class="price-new">29€</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center text-sm text-gray-600 mb-3"> |
|
|
<span class="bg-orange-100 text-orange-800 text-xs font-medium px-2.5 py-0.5 rounded-full"> |
|
|
<i class="fas fa-store mr-1"></i> Etsy |
|
|
</span> |
|
|
<div> |
|
|
<span class="mr-3"><i class="fas fa-shopping-cart mr-1 text-indigo-500"></i> 890/sem</span> |
|
|
<span><i class="fas fa-percentage mr-1 text-indigo-500"></i> 50%</span> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full gradient-bg text-white py-2 rounded-lg font-medium hover:opacity-90 transition">Ajouter à ma sélection</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="product-card bg-white"> |
|
|
<div class="relative"> |
|
|
<img src="https://images.unsplash.com/photo-1572635196188-84cd0aaad1d3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Lunettes de soleil" class="w-full product-image"> |
|
|
<div class="tag seasonal-tag">Saisonnier</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold text-lg mb-1">Lunettes de Soleil Polarisees</h3> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="flex rating-stars"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="far fa-star"></i> |
|
|
</div> |
|
|
<span class="text-gray-600 text-sm ml-2">(156 avis)</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center mb-3"> |
|
|
<span class="price-old">45€</span> |
|
|
<span class="price-new">32€</span> |
|
|
</div> |
|
|
<div class="flex justify-between items-center text-sm text-gray-600 mb-3"> |
|
|
<span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded-full"> |
|
|
<i class="fas fa-store mr-1"></i> Cdiscount |
|
|
</span> |
|
|
<div> |
|
|
<span class="mr-3"><i class="fas fa-shopping-cart mr-1 text-indigo-500"></i> 1,560/sem</span> |
|
|
<span><i class="fas fa-percentage mr-1 text-indigo-500"></i> 45%</span> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full gradient-bg text-white py-2 rounded-lg font-medium hover:opacity-90 transition">Ajouter à ma sélection</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="bg-white rounded-2xl shadow-lg p-6 mt-12"> |
|
|
<h2 class="text-2xl font-bold mb-6 text-gray-800">Recommandations IA de Produits Cosmiques</h2> |
|
|
<div id="gradio-container" class="min-h-[500px] py-4"> |
|
|
|
|
|
<script> |
|
|
function charger_produits() { |
|
|
|
|
|
const data = [ |
|
|
{ |
|
|
"nom": "Montre connectée NebulaPulse", |
|
|
"description": "Synchronisation cosmique et suivi galactique de santé.", |
|
|
"prix": "129,99€", |
|
|
"fournisseur": "Amazon", |
|
|
"lien": "https://amazon.ca/nebula-pulse", |
|
|
"image": "https://images.unsplash.com/photo-1523275335684-37898b6baf30", |
|
|
"popularite": "⭐⭐⭐⭐⭐" |
|
|
}, |
|
|
{ |
|
|
"nom": "Lampe stellaire 3D", |
|
|
"description": "Éclaire ton espace comme une supernova personnelle.", |
|
|
"prix": "39,99€", |
|
|
"fournisseur": "Etsy", |
|
|
"lien": "https://etsy.com/star-lamp", |
|
|
"image": "https://images.unsplash.com/photo-1519861531473-9200262188bf", |
|
|
"popularite": "⭐⭐⭐⭐" |
|
|
} |
|
|
]; |
|
|
|
|
|
let html = "<div class='space-y-6'>"; |
|
|
data.forEach(produit => { |
|
|
html += ` |
|
|
<div class='p-6 bg-gray-50 rounded-lg border border-gray-200'> |
|
|
<div class='flex flex-col md:flex-row gap-6'> |
|
|
<div class='flex-shrink-0'> |
|
|
<img src='${produit.image}' class='w-48 rounded-lg object-cover h-48'/> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class='text-xl font-bold mb-2'>${produit.nom}</h3> |
|
|
<p class='text-gray-600 mb-3'>${produit.description}</p> |
|
|
<div class='flex flex-wrap gap-4 text-sm'> |
|
|
<div><span class='font-semibold'>💰 Prix:</span> ${produit.prix}</div> |
|
|
<div><span class='font-semibold'>🏢 Fournisseur:</span> ${produit.fournisseur}</div> |
|
|
<div><span class='font-semibold'>🔥 Popularité:</span> ${produit.popularite}</div> |
|
|
</div> |
|
|
<a href='${produit.lien}' target='_blank' class='mt-4 inline-block gradient-bg text-white px-4 py-2 rounded-lg font-medium hover:opacity-90 transition'>Acheter maintenant</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
}); |
|
|
html += "</div>"; |
|
|
|
|
|
document.getElementById('gradio-container').innerHTML = html; |
|
|
} |
|
|
|
|
|
charger_produits(); |
|
|
</script> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="bg-white rounded-2xl shadow-lg p-6 mt-12"> |
|
|
<h2 class="text-2xl font-bold mb-6 text-gray-800">Calculateur de Profit sur Distributeurs</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
|
|
<div> |
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 font-medium mb-2">Prix d'achat chez le distributeur (€)</label> |
|
|
<input type="number" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="20"> |
|
|
</div> |
|
|
<div class="mb-6"> |
|
|
<label class="block text-gray-700 font-medium mb-2">Votre prix de revente (€)</label> |
|
|
<input type="number" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="50"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 font-medium mb-2">Volume estimé/semaine</label> |
|
|
<input type="number" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500" placeholder="100"> |
|
|
</div> |
|
|
</div> |
|
|
<div class="bg-gray-50 rounded-xl p-6"> |
|
|
<h3 class="text-lg font-bold mb-4 text-gray-800">Projection de Vos Profits</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex justify-between"> |
|
|
<span class="text-gray-600">Marge unitaire:</span> |
|
|
<span class="font-bold">30€</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span class="text-gray-600">Profit hebdomadaire:</span> |
|
|
<span class="font-bold text-green-600">3,000€</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span class="text-gray-600">Profit mensuel:</span> |
|
|
<span class="font-bold text-green-600">12,000€</span> |
|
|
</div> |
|
|
<div class="pt-4 border-t border-gray-200"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-gray-600">Retour sur investissement:</span> |
|
|
<span class="font-bold text-indigo-600">150%</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full mt-6 gradient-bg text-white py-3 rounded-lg font-medium hover:opacity-90 transition">Calculer mes profits</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mt-12 bg-gradient-to-br from-gray-900 to-indigo-900 rounded-2xl shadow-xl p-6 border border-indigo-500/20"> |
|
|
<h2 class="text-2xl font-bold mb-6 text-white flex items-center"> |
|
|
<span class="bg-gradient-to-r from-indigo-500 to-purple-500 p-2 rounded-lg mr-3"> |
|
|
<i class="fas fa-rocket"></i> |
|
|
</span> |
|
|
Produits Vedettes de la Semaine |
|
|
</h2> |
|
|
<p class="text-indigo-200 mb-6">Découvrez les produits les plus vendus cette semaine chez nos distributeurs partenaires</p> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="top-product-card bg-gray-800 border border-indigo-500/20"> |
|
|
<div class="relative"> |
|
|
<img src="https://m.media-amazon.com/images/I/71zny7BTRlL._AC_UL320_.jpg" alt="Produit" class="w-full top-product-image"> |
|
|
<div class="platform-tag amazon-tag">Amazon</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold text-white mb-2">Écouteurs Sans Fil Bluetooth</h3> |
|
|
<p class="text-indigo-200 text-sm mb-3">Écouteurs avec réduction de bruit et 30h d'autonomie</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-white font-bold">49€</span> |
|
|
<a href="#" class="text-indigo-300 hover:text-indigo-100 text-sm flex items-center"> |
|
|
Voir produit <i class="fas fa-external-link-alt ml-1"></i> |
|
|
</a> |
|
|
</div> |
|
|
<div class="mt-3"> |
|
|
<span class="inline-block bg-gray-700 text-indigo-200 text-xs px-2 py-1 rounded">Tech</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="top-product-card bg-gray-800 border border-indigo-500/20"> |
|
|
<div class="relative"> |
|
|
<img src="https://m.media-amazon.com/images/I/71OZY035QCL._AC_UL320_.jpg" alt="Produit" class="w-full top-product-image"> |
|
|
<div class="platform-tag ebay-tag">eBay</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold text-white mb-2">Tapis de Yoga Premium</h3> |
|
|
<p class="text-indigo-200 text-sm mb-3">Tapis antidérapant extra épais (6mm) pour yoga et fitness</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-white font-bold">29€</span> |
|
|
<a href="#" class="text-indigo-300 hover:text-indigo-100 text-sm flex items-center"> |
|
|
Voir produit <i class="fas fa-external-link-alt ml-1"></i> |
|
|
</a> |
|
|
</div> |
|
|
<div class="mt-3"> |
|
|
<span class="inline-block bg-gray-700 text-indigo-200 text-xs px-2 py-1 rounded">Sport</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="top-product-card bg-gray-800 border border-indigo-500/20"> |
|
|
<div class="relative"> |
|
|
<img src="https://m.media-amazon.com/images/I/61OZrSLf2GL._AC_UL320_.jpg" alt="Produit" class="w-full top-product-image"> |
|
|
<div class="platform-tag etsy-tag">Etsy</div> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<h3 class="font-bold text-white mb-2">Bracelet en Pierre Naturelle</h3> |
|
|
<p class="text-indigo-200 text-sm mb-3">Bracelet artisanal en pierres semi-précieuses</p> |
|
|
<div class="flex justify-between items-center"> |
|
|
<span class="text-white font-bold">22€</span> |
|
|
<a href="#" class="text-indigo-300 hover:text-indigo-100 text-sm flex items-center"> |
|
|
Voir produit <i class="fas fa-external-link-alt ml-1"></i> |
|
|
</a> |
|
|
</div> |
|
|
<div class="mt-3"> |
|
|
<span class="inline-block bg-gray-700 text-indigo-200 text-xs px-2 py-1 rounded">Mode</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8 text-center"> |
|
|
<button class="bg-gradient-to-r from-indigo-600 to-purple-600 text-white px-6 py-3 rounded-lg font-medium hover:opacity-90 transition flex items-center mx-auto shadow-lg"> |
|
|
<i class="fas fa-sync-alt mr-2"></i> Voir plus de produits |
|
|
</button> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="mt-12"> |
|
|
<h2 class="text-2xl font-bold mb-6 text-gray-800">Conseils pour Choisir les Meilleurs Produits Distributeurs</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
|
|
<div class="tip-card bg-white p-6"> |
|
|
<div class="tip-icon bg-indigo-100 text-indigo-600 mb-4"> |
|
|
<i class="fas fa-fire"></i> |
|
|
</div> |
|
|
<h3 class="font-bold text-lg mb-2">Produits Tendance</h3> |
|
|
<p class="text-gray-600">Sélectionnez des produits déjà populaires chez les distributeurs. Ces articles ont fait leurs preuves et ont une demande établie.</p> |
|
|
</div> |
|
|
<div class="tip-card bg-white p-6"> |
|
|
<div class="tip-icon bg-indigo-100 text-indigo-600 mb-4"> |
|
|
<i class="fas fa-percentage"></i> |
|
|
</div> |
|
|
<h3 class="font-bold text-lg mb-2">Marge de Revente</h3> |
|
|
<p class="text-gray-600">Ciblez des produits avec au moins 30% de marge. Les produits entre 20€ et 100€ offrent souvent le meilleur équilibre entre volume et profit.</p> |
|
|
</div> |
|
|
<div class="tip-card bg-white p-6"> |
|
|
<div class="tip-icon bg-indigo-100 text-indigo-600 mb-4"> |
|
|
<i class="fas fa-box-open"></i> |
|
|
</div> |
|
|
<h3 class="font-bold text-lg mb-2">Qualité du Distributeur</h3> |
|
|
<p class="text-gray-600">Travaillez avec des distributeurs fiables ayant de bons retours clients. Cela protège votre réputation et réduit les retours.</p> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</main> |
|
|
|
|
|
|
|
|
<section class="gradient-bg text-white py-12 px-4 mt-12 relative overflow-hidden"> |
|
|
<div class="absolute top-0 left-0 w-full h-full opacity-10"> |
|
|
<div class="absolute top-10 left-10 w-32 h-32 bg-white rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob"></div> |
|
|
<div class="absolute top-0 right-10 w-32 h-32 bg-white rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-2000"></div> |
|
|
<div class="absolute bottom-10 left-1/2 w-32 h-32 bg-white rounded-full mix-blend-multiply filter blur-xl opacity-70 animate-blob animation-delay-4000"></div> |
|
|
</div> |
|
|
<div class="container mx-auto max-w-4xl text-center relative z-10"> |
|
|
<h2 class="text-2xl md:text-3xl font-bold mb-4">Recevez des Idées de Produits Directement</h2> |
|
|
<p class="mb-6 text-lg opacity-90 max-w-2xl mx-auto">Abonnez-vous à notre newsletter hebdomadaire pour recevoir les dernières tendances et produits à fort potentiel.</p> |
|
|
<div class="flex flex-col sm:flex-row gap-3 max-w-md mx-auto"> |
|
|
<input type="email" placeholder="Votre email" class="newsletter-input"> |
|
|
<button class="newsletter-btn gradient-bg text-white font-bold hover:opacity-90 transition">S'abonner</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white py-12 px-4"> |
|
|
<div class="container mx-auto"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="font-bold text-xl mb-4">Produits Lucratifs</h3> |
|
|
<p class="text-gray-400 mb-4">Notre plateforme vous aide à identifier les meilleurs produits e-commerce pour maximiser vos profits.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg mb-4">Catégories</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="footer-link text-gray-400 hover:text-white">Mode & Accessoires</a></li> |
|
|
<li><a href="#" class="footer-link text-gray-400 hover:text-white">Électronique</a></li> |
|
|
<li><a href="#" class="footer-link text-gray-400 hover:text-white">Maison & Jardin</a></li> |
|
|
<li><a href="#" class="footer-link text-gray-400 hover:text-white">Beauté & Santé</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg mb-4">Ressources</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="footer-link text-gray-400 hover:text-white">Blog</a></li> |
|
|
<li><a href="#" class="footer-link text-gray-400 hover:text-white">Guides</a></li> |
|
|
<li><a href="#" class="footer-link text-gray-400 hover:text-white">Outils</a></li> |
|
|
<li><a href="#" class="footer-link text-gray-400 hover:text-white">FAQ</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-bold text-lg mb-4">Contact</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-envelope mr-3 text-indigo-400 mt-1"></i> |
|
|
<a href="mailto:contact@produits-lucratifs.com" class="text-gray-400 hover:text-white">contact@produits-lucratifs.com</a> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-phone mr-3 text-indigo-400 mt-1"></i> |
|
|
<span class="text-gray-400">+33 1 23 45 67 89</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i class="fas fa-map-marker-alt mr-3 text-indigo-400 mt-1"></i> |
|
|
<span class="text-gray-400">Paris, France</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-gray-800 mt-10 pt-8 text-center text-gray-500"> |
|
|
<p>© 2023 Produits Lucratifs. Tous droits réservés.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
|
|
|
<div id="modal-overlay" class="modal-overlay"> |
|
|
<div class="modal-content"> |
|
|
<div class="p-6"> |
|
|
<div class="flex justify-between items-center mb-4"> |
|
|
<h3 class="text-xl font-bold">Ma Sélection</h3> |
|
|
<button id="close-modal" class="text-gray-500 hover:text-gray-700"> |
|
|
<i class="fas fa-times text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div id="selected-products" class="space-y-4"> |
|
|
|
|
|
<p class="text-gray-500 text-center py-8">Aucun produit sélectionné pour le moment</p> |
|
|
</div> |
|
|
<div class="mt-6 pt-4 border-t border-gray-200"> |
|
|
<button class="w-full gradient-bg text-white py-3 rounded-lg font-medium hover:opacity-90 transition">Exporter ma sélection</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<button id="fab" class="floating-btn gradient-bg text-white text-xl"> |
|
|
<i class="fas fa-truck"></i> |
|
|
<span id="item-count" class="absolute -top-2 -right-2 bg-red-500 text-white text-xs rounded-full w-6 h-6 flex items-center justify-center hidden">0</span> |
|
|
</button> |
|
|
|
|
|
<script> |
|
|
|
|
|
const products = [ |
|
|
{ |
|
|
id: 1, |
|
|
name: "Montre Intelligente Fitness", |
|
|
price: 59, |
|
|
originalPrice: 89, |
|
|
margin: 35, |
|
|
demand: 45, |
|
|
image: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80", |
|
|
rating: 4.5, |
|
|
reviews: 124, |
|
|
tag: "Tendance" |
|
|
}, |
|
|
{ |
|
|
id: 2, |
|
|
name: "Oreiller Ergonomique Mémoire", |
|
|
price: 49, |
|
|
originalPrice: 65, |
|
|
margin: 40, |
|
|
demand: 32, |
|
|
image: "https://images.unsplash.com/photo-1594035910387-fea47794261f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80", |
|
|
rating: 5, |
|
|
reviews: 217, |
|
|
tag: "Best-seller" |
|
|
}, |
|
|
{ |
|
|
id: 3, |
|
|
name: "Brosse Nettoyante Visage", |
|
|
price: 29, |
|
|
originalPrice: 39, |
|
|
margin: 50, |
|
|
demand: 68, |
|
|
image: "https://images.unsplash.com/photo-1595341595379-cf2a0a90821e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80", |
|
|
rating: 4, |
|
|
reviews: 89, |
|
|
tag: "Nouveauté" |
|
|
}, |
|
|
{ |
|
|
id: 4, |
|
|
name: "Lunettes de Soleil Polarisees", |
|
|
price: 32, |
|
|
originalPrice: 45, |
|
|
margin: 45, |
|
|
demand: 55, |
|
|
image: "https://images.unsplash.com/photo-1572635196188-84cd0aaad1d3?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80", |
|
|
rating: 4, |
|
|
reviews: 156, |
|
|
tag: "Saisonnier" |
|
|
} |
|
|
]; |
|
|
|
|
|
|
|
|
let selectedProducts = []; |
|
|
|
|
|
|
|
|
const modalOverlay = document.getElementById('modal-overlay'); |
|
|
const closeModal = document.getElementById('close-modal'); |
|
|
const fab = document.getElementById('fab'); |
|
|
const selectedProductsContainer = document.getElementById('selected-products'); |
|
|
const itemCount = document.getElementById('item-count'); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.product-card button').forEach((button, index) => { |
|
|
button.addEventListener('click', () => { |
|
|
const product = products[index]; |
|
|
|
|
|
|
|
|
const isSelected = selectedProducts.some(p => p.id === product.id); |
|
|
|
|
|
if (!isSelected) { |
|
|
selectedProducts.push(product); |
|
|
updateSelection(); |
|
|
|
|
|
|
|
|
const icon = document.createElement('i'); |
|
|
icon.className = 'fas fa-check absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-2xl animated-check'; |
|
|
|
|
|
const overlay = document.createElement('div'); |
|
|
overlay.className = 'absolute inset-0 bg-green-500 bg-opacity-80 flex items-center justify-center'; |
|
|
overlay.appendChild(icon); |
|
|
|
|
|
const card = button.closest('.product-card'); |
|
|
card.appendChild(overlay); |
|
|
|
|
|
setTimeout(() => { |
|
|
card.removeChild(overlay); |
|
|
}, 1000); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
function updateSelection() { |
|
|
|
|
|
itemCount.textContent = selectedProducts.length; |
|
|
|
|
|
if (selectedProducts.length > 0) { |
|
|
itemCount.classList.remove('hidden'); |
|
|
} else { |
|
|
itemCount.classList.add('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
if (modalOverlay.classList.contains('active')) { |
|
|
renderSelectedProducts(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function renderSelectedProducts() { |
|
|
if (selectedProducts.length === 0) { |
|
|
selectedProductsContainer.innerHTML = '<p class="text-gray-500 text-center py-8">Aucun produit sélectionné pour le moment</p>'; |
|
|
return; |
|
|
} |
|
|
|
|
|
let html = ''; |
|
|
selectedProducts.forEach(product => { |
|
|
html += ` |
|
|
<div class="flex items-center border-b border-gray-100 pb-4"> |
|
|
<img src="${product.image}" alt="${product.name}" class="w-16 h-16 object-cover rounded-lg"> |
|
|
<div class="ml-4 flex-grow"> |
|
|
<h4 class="font-medium">${product.name}</h4> |
|
|
<p class="text-sm text-gray-600">${product.price}€ (${product.margin}% marge)</p> |
|
|
</div> |
|
|
<button class="text-red-500 hover:text-red-700 remove-product" data-id="${product.id}"> |
|
|
<i class="fas fa-trash"></i> |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
}); |
|
|
|
|
|
selectedProductsContainer.innerHTML = html; |
|
|
|
|
|
|
|
|
document.querySelectorAll('.remove-product').forEach(button => { |
|
|
button.addEventListener('click', (e) => { |
|
|
const productId = parseInt(e.currentTarget.getAttribute('data-id')); |
|
|
selectedProducts = selectedProducts.filter(p => p.id !== productId); |
|
|
updateSelection(); |
|
|
renderSelectedProducts(); |
|
|
}); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
fab.addEventListener('click', () => { |
|
|
modalOverlay.classList.add('active'); |
|
|
renderSelectedProducts(); |
|
|
}); |
|
|
|
|
|
closeModal.addEventListener('click', () => { |
|
|
modalOverlay.classList.remove('active'); |
|
|
}); |
|
|
|
|
|
|
|
|
modalOverlay.addEventListener('click', (e) => { |
|
|
if (e.target === modalOverlay) { |
|
|
modalOverlay.classList.remove('active'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const calculateBtn = document.querySelector('.bg-gray-50 button'); |
|
|
if (calculateBtn) { |
|
|
calculateBtn.addEventListener('click', () => { |
|
|
const purchasePrice = parseFloat(document.querySelector('input[placeholder="20"]').value) || 20; |
|
|
const salePrice = parseFloat(document.querySelector('input[placeholder="50"]').value) || 50; |
|
|
const quantity = parseFloat(document.querySelector('input[placeholder="100"]').value) || 100; |
|
|
|
|
|
const unitMargin = salePrice - purchasePrice; |
|
|
const monthlyProfit = unitMargin * quantity; |
|
|
const annualProfit = monthlyProfit * 12; |
|
|
const roi = ((salePrice - purchasePrice) / purchasePrice) * 100; |
|
|
|
|
|
document.querySelector('.bg-gray-50 .flex.justify-between:nth-child(1) span:nth-child(2)').textContent = unitMargin.toFixed(2) + '€'; |
|
|
document.querySelector('.bg-gray-50 .flex.justify-between:nth-child(2) span:nth-child(2)').textContent = monthlyProfit.toFixed(2) + '€'; |
|
|
document.querySelector('.bg-gray-50 .flex.justify-between:nth-child(3) span:nth-child(2)').textContent = annualProfit.toFixed(2) + '€'; |
|
|
document.querySelector('.bg-gray-50 .flex.justify-between.items-center span:nth-child(2)').textContent = roi.toFixed(0) + '%'; |
|
|
}); |
|
|
} |
|
|
</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=FRENCHIIE/collection-dition-limit-e" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
