467 lines
14 KiB
HTML
467 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="it">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Carrello Prodotti - Design Moderno</title>
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
}
|
|
|
|
.cart-container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(20px);
|
|
border-radius: 24px;
|
|
padding: 32px;
|
|
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.cart-header {
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.cart-title {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.cart-subtitle {
|
|
color: #6b7280;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.product-card {
|
|
background: #ffffff;
|
|
border-radius: 20px;
|
|
padding: 24px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
|
border: 1px solid rgba(0, 0, 0, 0.05);
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.product-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.product-card.removing {
|
|
opacity: 0;
|
|
transform: translateX(100px);
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
.product-content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
.product-image {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 16px;
|
|
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 2rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.product-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.product-name {
|
|
font-size: 1.3rem;
|
|
font-weight: 600;
|
|
color: #1f2937;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.product-price {
|
|
font-size: 1.1rem;
|
|
color: #6b7280;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.product-total {
|
|
font-size: 1.2rem;
|
|
font-weight: 700;
|
|
color: #059669;
|
|
}
|
|
|
|
.quantity-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.quantity-btn {
|
|
width: 48px;
|
|
height: 48px;
|
|
border: none;
|
|
border-radius: 12px;
|
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
|
color: white;
|
|
font-size: 1.2rem;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
|
|
}
|
|
|
|
.quantity-btn:hover:not(:disabled) {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
|
|
}
|
|
|
|
.quantity-btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.quantity-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
}
|
|
|
|
.quantity-display {
|
|
min-width: 60px;
|
|
text-align: center;
|
|
font-size: 1.4rem;
|
|
font-weight: 600;
|
|
color: #1f2937;
|
|
background: #f8fafc;
|
|
border-radius: 12px;
|
|
padding: 12px 16px;
|
|
border: 2px solid #e2e8f0;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.quantity-display.updating {
|
|
transform: scale(1.1);
|
|
border-color: #667eea;
|
|
background: #eff6ff;
|
|
}
|
|
|
|
.remove-btn {
|
|
background: linear-gradient(135deg, #ef4444, #dc2626);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 12px;
|
|
padding: 12px 20px;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.remove-btn:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 20px rgba(239, 68, 68, 0.3);
|
|
}
|
|
|
|
.cart-summary {
|
|
background: linear-gradient(135deg, #667eea, #764ba2);
|
|
color: white;
|
|
border-radius: 20px;
|
|
padding: 24px;
|
|
margin-top: 32px;
|
|
text-align: center;
|
|
opacity: 1;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.cart-summary.hidden {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
.total-amount {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.total-items {
|
|
opacity: 0.9;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.checkout-btn {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
|
color: white;
|
|
padding: 16px 32px;
|
|
border-radius: 12px;
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.checkout-btn:hover {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.empty-cart {
|
|
text-align: center;
|
|
padding: 60px 20px;
|
|
color: #6b7280;
|
|
opacity: 0;
|
|
transition: opacity 0.5s ease;
|
|
}
|
|
|
|
.empty-cart.show {
|
|
opacity: 1;
|
|
}
|
|
|
|
.empty-cart i {
|
|
font-size: 4rem;
|
|
margin-bottom: 20px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { transform: scale(1); }
|
|
50% { transform: scale(1.05); }
|
|
}
|
|
|
|
.pulse {
|
|
animation: pulse 0.3s ease-in-out;
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.fade-in {
|
|
animation: fadeInUp 0.5s ease forwards;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.product-content {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
|
|
.quantity-controls {
|
|
justify-content: center;
|
|
}
|
|
|
|
.remove-btn {
|
|
margin: 16px auto 0;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="cart-container">
|
|
<div class="cart-header">
|
|
<h1 class="cart-title">
|
|
<i class="fas fa-shopping-cart"></i>
|
|
Il Tuo Carrello
|
|
</h1>
|
|
<p class="cart-subtitle">Gestisci i tuoi prodotti preferiti</p>
|
|
</div>
|
|
|
|
<div id="empty-cart" class="empty-cart">
|
|
<i class="fas fa-shopping-bag"></i>
|
|
<h3>Il tuo carrello è vuoto</h3>
|
|
<p>Aggiungi alcuni prodotti per iniziare!</p>
|
|
</div>
|
|
|
|
<div id="cart-items"></div>
|
|
|
|
<div id="cart-summary" class="cart-summary">
|
|
<div class="total-amount" id="total-amount">€0.00</div>
|
|
<p class="total-items" id="total-items">0 articoli nel carrello</p>
|
|
<button class="checkout-btn" onclick="checkout()">
|
|
<i class="fas fa-credit-card"></i>
|
|
Procedi al Checkout
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Dati del carrello
|
|
let cartItems = [
|
|
{ id: 1, name: 'iPhone 15 Pro', price: 1199.99, quantity: 1, emoji: '📱' },
|
|
{ id: 2, name: 'MacBook Air M3', price: 1299.99, quantity: 2, emoji: '💻' },
|
|
{ id: 3, name: 'AirPods Pro', price: 279.99, quantity: 1, emoji: '🎧' },
|
|
{ id: 4, name: 'Apple Watch', price: 399.99, quantity: 1, emoji: '⌚' }
|
|
];
|
|
|
|
// Elementi DOM
|
|
const cartItemsContainer = document.getElementById('cart-items');
|
|
const emptyCartDiv = document.getElementById('empty-cart');
|
|
const cartSummaryDiv = document.getElementById('cart-summary');
|
|
const totalAmountSpan = document.getElementById('total-amount');
|
|
const totalItemsSpan = document.getElementById('total-items');
|
|
|
|
// Funzioni di calcolo
|
|
function calculateTotal() {
|
|
return cartItems.reduce((total, item) => total + (item.price * item.quantity), 0);
|
|
}
|
|
|
|
function calculateTotalItems() {
|
|
return cartItems.reduce((total, item) => total + item.quantity, 0);
|
|
}
|
|
|
|
// Funzione per creare HTML di un prodotto
|
|
function createProductHTML(item) {
|
|
return `
|
|
<div class="product-card fade-in" data-id="${item.id}">
|
|
<div class="product-content">
|
|
<div class="product-image">
|
|
${item.emoji}
|
|
</div>
|
|
<div class="product-info">
|
|
<h3 class="product-name">${item.name}</h3>
|
|
<p class="product-price">€${item.price.toFixed(2)} / unità</p>
|
|
<p class="product-total">Totale: €${(item.price * item.quantity).toFixed(2)}</p>
|
|
|
|
<div class="quantity-controls">
|
|
<button
|
|
class="quantity-btn"
|
|
onclick="decreaseQuantity(${item.id})"
|
|
${item.quantity <= 1 ? 'disabled' : ''}
|
|
>
|
|
<i class="fas fa-minus"></i>
|
|
</button>
|
|
|
|
<div class="quantity-display" id="qty-${item.id}">
|
|
${item.quantity}
|
|
</div>
|
|
|
|
<button
|
|
class="quantity-btn"
|
|
onclick="increaseQuantity(${item.id})"
|
|
>
|
|
<i class="fas fa-plus"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
class="remove-btn"
|
|
onclick="removeItem(${item.id})"
|
|
>
|
|
<i class="fas fa-trash"></i>
|
|
Rimuovi
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
// Funzione per aggiornare l'interfaccia
|
|
function updateUI() {
|
|
// Aggiorna contenuto carrello
|
|
if (cartItems.length === 0) {
|
|
cartItemsContainer.innerHTML = '';
|
|
emptyCartDiv.classList.add('show');
|
|
cartSummaryDiv.classList.add('hidden');
|
|
} else {
|
|
emptyCartDiv.classList.remove('show');
|
|
cartSummaryDiv.classList.remove('hidden');
|
|
cartItemsContainer.innerHTML = cartItems.map(createProductHTML).join('');
|
|
}
|
|
|
|
// Aggiorna totali
|
|
const total = calculateTotal();
|
|
const totalItems = calculateTotalItems();
|
|
|
|
totalAmountSpan.textContent = `€${total.toFixed(2)}`;
|
|
totalItemsSpan.textContent = `${totalItems} ${totalItems === 1 ? 'articolo' : 'articoli'} nel carrello`;
|
|
}
|
|
|
|
// Funzioni per gestire quantità
|
|
function increaseQuantity(itemId) {
|
|
const item = cartItems.find(item => item.id === itemId);
|
|
if (item) {
|
|
item.quantity++;
|
|
|
|
// Animazione feedback
|
|
const qtyDisplay = document.getElementById(`qty-${itemId}`);
|
|
qtyDisplay.classList.add('updating');
|
|
setTimeout(() => qtyDisplay.classList.remove('updating'), 300);
|
|
|
|
updateUI();
|
|
}
|
|
}
|
|
|
|
function decreaseQuantity(itemId) {
|
|
const item = cartItems.find(item => item.id === itemId);
|
|
if (item && item.quantity > 1) {
|
|
item.quantity--;
|
|
|
|
// Animazione feedback
|
|
const qtyDisplay = document.getElementById(`qty-${itemId}`);
|
|
qtyDisplay.classList.add('updating');
|
|
setTimeout(() => qtyDisplay.classList.remove('updating'), 300);
|
|
|
|
updateUI();
|
|
}
|
|
}
|
|
|
|
// Funzione per rimuovere prodotto
|
|
function removeItem(itemId) {
|
|
const productCard = document.querySelector(`[data-id="${itemId}"]`);
|
|
productCard.classList.add('removing');
|
|
|
|
setTimeout(() => {
|
|
cartItems = cartItems.filter(item => item.id !== itemId);
|
|
updateUI();
|
|
}, 500);
|
|
}
|
|
|
|
// Funzione checkout
|
|
function checkout() {
|
|
const total = calculateTotal();
|
|
const totalItems = calculateTotalItems();
|
|
alert(`Checkout per €${total.toFixed(2)} - ${totalItems} articoli`);
|
|
}
|
|
|
|
// Inizializza l'interfaccia
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
updateUI();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |