Boutique

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f8f8f8;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

.products {
display: flex;
flex-wrap: wrap;
gap: 20px;
}

.product {
background: white;
border: 1px solid #ddd;
border-radius: 5px;
width: calc(33.33% – 20px);
padding: 15px;
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
}

.product:hover {
transform: translateY(-5px);
}

.product img {
max-width: 100%;
border-radius: 5px;
}

.product h3 {
font-size: 18px;
margin: 15px 0 10px;
}

.product button {
padding: 10px 15px;
background: #73c700;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

.product button:hover {
background: #66b000;
}

.cart {
margin-top: 20px;
background: #fff;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
position: sticky;
top: 20px;
}

.cart h3 {
margin: 0 0 10px;
}

.progress-bar {
background: #eaeaea;
border-radius: 5px;
height: 10px;
overflow: hidden;
margin: 10px 0;
}

.progress-bar-fill {
background: #73c700;
height: 100%;
width: 0%;
transition: width 0.3s ease-in-out;
}

.validate-button {
width: 100%;
padding: 10px;
background: #ccc;
color: white;
border: none;
border-radius: 5px;
cursor: not-allowed;
}

.validate-button.active {
background: #73c700;
cursor: pointer;
}

.validate-button.active:hover {
background: #66b000;
}

@media (max-width: 768px) {
.product {
width: calc(50% – 20px);
}
}

@media (max-width: 480px) {
.product {
width: 100%;
}
}

document.addEventListener(‘DOMContentLoaded’, function () {
const maxItems = 6; // Limite définie
let currentItems = 0;

const products = [
{ id: 1, name: ‘Produit 1’, image: ‘https://via.placeholder.com/150’ },
{ id: 2, name: ‘Produit 2’, image: ‘https://via.placeholder.com/150’ },
{ id: 3, name: ‘Produit 3’, image: ‘https://via.placeholder.com/150’ },
{ id: 4, name: ‘Produit 4’, image: ‘https://via.placeholder.com/150’ },
{ id: 5, name: ‘Produit 5’, image: ‘https://via.placeholder.com/150’ },
{ id: 6, name: ‘Produit 6’, image: ‘https://via.placeholder.com/150’ },
];

const cartStatus = document.getElementById(‘cart-status’);
const progressBarFill = document.getElementById(‘cart-progress-fill’);
const validateButton = document.getElementById(‘validate-selection’);
const productList = document.getElementById(‘product-list’);

// Charger les produits
products.forEach(product => {
const productElement = document.createElement(‘div’);
productElement.classList.add(‘product’);
productElement.innerHTML = `

${product.name}

Ajouter
`;
productList.appendChild(productElement);
});

// Mise à jour du panier
function updateCart() {
const remainingItems = maxItems – currentItems;
cartStatus.textContent = `Encore ${remainingItems} plats`;
progressBarFill.style.width = `${(currentItems / maxItems) * 100}%`;

if (remainingItems {
button.addEventListener(‘click’, () => {
if (currentItems < maxItems) {
currentItems++;
updateCart();
} else {
alert('Vous avez atteint la limite.');
}
});
});

updateCart();
});