- Esporta Lista Carrello (Totale)
- Sconto Applicato
This commit is contained in:
Surya Paolo
467
_LIMBO/esempio.htm
Normal file
467
_LIMBO/esempio.htm
Normal file
@@ -0,0 +1,467 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user