Carte Produit - Vue 360° Interactive

Bootstrap 5 Product Card 360 View Interactive 3D Ecommerce
Carte produit révolutionnaire avec visualisation 360° interactive, zoom sur image et détails techniques. Expérience utilisateur immersive.
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8" />
    <meta name="copyright" content="MEZGANI Said" />
    <meta name="author" content="AngularForAll" />
    <meta name="robots" content="noindex, nofollow" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Snippet Product Bootstrap 5 2026 042158 | AngularForAll</title>
<!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

    <style>
        * {
            font-family: 'Inter', sans-serif;
        }

        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 2rem 0;
        }

        .product-card {
            background: white;
            border-radius: 2rem;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            margin: 2rem auto;
            max-width: 1400px;
        }

        .product-gallery {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            padding: 2rem;
            height: 100%;
        }

        .main-image {
            border-radius: 1rem;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            margin-bottom: 1.5rem;
            background: white;
            padding: 2rem;
            text-align: center;
        }

        .main-image img {
            max-width: 100%;
            height: auto;
            transition: transform 0.3s ease;
        }

        .main-image img:hover {
            transform: scale(1.05);
        }

        .thumbnail {
            display: flex;
            gap: 1rem;
            justify-content: center;
        }

        .thumbnail img {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 0.5rem;
            cursor: pointer;
            border: 2px solid transparent;
            transition: all 0.3s ease;
        }

        .thumbnail img:hover {
            border-color: #667eea;
            transform: translateY(-5px);
        }

        .product-info {
            padding: 2rem;
        }

        .badge-custom {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 2rem;
            font-size: 0.8rem;
            font-weight: 600;
            display: inline-block;
            margin-bottom: 1rem;
        }

        .product-title {
            font-size: 2.5rem;
            font-weight: 800;
            margin-bottom: 1rem;
            background: linear-gradient(135deg, #667eea, #764ba2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .price {
            font-size: 2rem;
            font-weight: 700;
            color: #667eea;
            margin: 1rem 0;
        }

        .old-price {
            font-size: 1.2rem;
            color: #999;
            text-decoration: line-through;
            margin-left: 1rem;
        }

        .rating {
            color: #ffc107;
            margin-bottom: 1rem;
        }

        .feature-list {
            list-style: none;
            padding: 0;
            margin: 1.5rem 0;
        }

        .feature-list li {
            padding: 0.5rem 0;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .feature-list i {
            color: #667eea;
            font-weight: bold;
        }

        .quantity-selector {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin: 1.5rem 0;
        }

        .quantity-btn {
            width: 40px;
            height: 40px;
            border: 1px solid #ddd;
            background: white;
            border-radius: 0.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .quantity-btn:hover {
            background: #667eea;
            color: white;
            border-color: #667eea;
        }

        .quantity-input {
            width: 80px;
            height: 40px;
            text-align: center;
            border: 1px solid #ddd;
            border-radius: 0.5rem;
            font-size: 1rem;
        }

        .form-section {
            background: #f8f9fa;
            padding: 2rem;
            border-radius: 1rem;
        }

        .form-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            color: #333;
        }

        .form-control, .form-select {
            border-radius: 0.5rem;
            padding: 0.75rem 1rem;
            border: 1px solid #e0e0e0;
            transition: all 0.3s ease;
        }

        .form-control:focus, .form-select:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
        }

        .btn-submit {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            border: none;
            padding: 1rem;
            border-radius: 0.5rem;
            font-weight: 600;
            font-size: 1rem;
            width: 100%;
            transition: all 0.3s ease;
        }

        .btn-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }

        .delivery-info {
            background: #e8f5e9;
            padding: 1rem;
            border-radius: 0.5rem;
            margin-top: 1rem;
        }

        .payment-methods {
            display: flex;
            gap: 1rem;
            justify-content: center;
            margin-top: 1rem;
            font-size: 2rem;
            color: #666;
        }

        .stock-status {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background: #e8f5e9;
            color: #4caf50;
            padding: 0.5rem 1rem;
            border-radius: 2rem;
            font-size: 0.9rem;
            font-weight: 600;
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        .loading {
            animation: pulse 1.5s ease-in-out infinite;
        }

        @media (max-width: 768px) {
            .product-title {
                font-size: 1.8rem;
            }

            .product-card {
                margin: 1rem;
            }

            .product-gallery {
                padding: 1rem;
            }
        }

        .toast-custom {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1000;
            min-width: 250px;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="product-card">
        <div class="row g-0">
            <!-- Left Column - Product Gallery -->
            <div class="col-lg-6 product-gallery">
                <div class="main-image">
                    <img src="public/mobile.png"
                         alt="Product X" id="mainProductImage">
                </div>
                <div class="thumbnail">
                    <img src="public/mobile1.png"
                         alt="Thumb 1" onclick="changeImage(this.src)">
                    <img src="public/mobile2.png"
                         alt="Thumb 2" onclick="changeImage(this.src)">
                    <img src="public/mobile3.png"
                         alt="Thumb 3" onclick="changeImage(this.src)">
                    <img src="public/mobile4.png"
                         alt="Thumb 4" onclick="changeImage(this.src)">
                </div>

                <!-- Product Features Highlights -->
                <div class="mt-4">
                    <div class="row g-2">
                        <div class="col-6">
                            <div class="delivery-info text-center">
                                <i class="fas fa-truck fa-2x mb-2" style="color: #667eea;"></i>
                                <p class="mb-0 small">Livraison gratuite</p>
                                <p class="mb-0 small text-muted">Sous 24-48h</p>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="delivery-info text-center">
                                <i class="fas fa-undo-alt fa-2x mb-2" style="color: #667eea;"></i>
                                <p class="mb-0 small">Retour gratuit</p>
                                <p class="mb-0 small text-muted">30 jours satisfait</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right Column - Product Info & Form -->
            <div class="col-lg-6 product-info">
                <div class="d-flex justify-content-between align-items-start mb-3">
                    <span class="badge-custom">
                        <i class="fas fa-star me-1"></i> Nouveauté 2024
                    </span>
                    <span class="stock-status">
                        <i class="fas fa-check-circle"></i> En stock
                    </span>
                </div>

                <h1 class="product-title">ProductX Pro Max</h1>

                <div class="rating">
                    <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>
                    <span class="text-muted ms-2">(4.8/5 - 1,284 avis)</span>
                </div>

                <div class="price">
                    299,99 €
                    <span class="old-price">499,99 €</span>
                    <span class="badge bg-danger ms-2">-40%</span>
                </div>

                <p class="text-muted">
                    Découvrez la nouvelle génération de ProductX Pro Max. Performances exceptionnelles,
                    design élégant et technologies de pointe pour une expérience utilisateur inégalée.
                </p>

                <ul class="feature-list">
                    <li><i class="fas fa-microchip"></i> Processeur dernière génération</li>
                    <li><i class="fas fa-battery-full"></i> Autonomie de 24 heures</li>
                    <li><i class="fas fa-wifi"></i> Connectivité 5G intégrée</li>
                    <li><i class="fas fa-shield-alt"></i> Garantie constructeur 3 ans</li>
                    <li><i class="fas fa-sync-alt"></i> Mises à jour gratuites à vie</li>
                </ul>

                <div class="quantity-selector">
                    <button class="quantity-btn" onclick="changeQuantity(-1)" aria-label="Diminuer la quantité">
                        <i class="fas fa-minus"></i>
                    </button>
                    <input type="number" class="quantity-input" id="quantity" value="1" min="1" max="10" readonly>
                    <button class="quantity-btn" onclick="changeQuantity(1)" aria-label="Augmenter la quantité">
                        <i class="fas fa-plus"></i>
                    </button>
                </div>

                <!-- Order Form -->
                <div class="form-section">
                    <h3 class="form-title">
                        <i class="fas fa-shopping-cart me-2"></i>
                        Commander maintenant
                    </h3>

                    <form id="orderForm" onsubmit="return submitOrder(event)">
                        <div class="mb-3">
                            <label class="form-label fw-bold">Nom complet *</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-user"></i></span>
                                <input type="text" class="form-control" id="fullName" required placeholder="Jean Dupont">
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-bold">Email *</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-envelope"></i></span>
                                <input type="email" class="form-control" id="email" required placeholder="jean@exemple.com">
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-bold">Téléphone *</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-phone"></i></span>
                                <input type="tel" class="form-control" id="phone" required placeholder="06 12 34 56 78">
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-bold">Adresse de livraison *</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-location-dot"></i></span>
                                <input type="text" class="form-control" id="address" required placeholder="Votre adresse complète">
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Code postal *</label>
                                <input type="text" class="form-control" id="zipcode" required placeholder="75001">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Ville *</label>
                                <input type="text" class="form-control" id="city" required placeholder="Paris">
                            </div>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-bold">Mode de livraison</label>
                            <select class="form-select" id="delivery">
                                <option value="standard">Standard - Gratuite (3-5 jours)</option>
                                <option value="express">Express - 9,99€ (24-48h)</option>
                                <option value="premium">Premium - 19,99€ (J+1)</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label fw-bold">Instructions spéciales (optionnel)</label>
                            <textarea class="form-control" id="notes" rows="3"
                                      placeholder="Informations complémentaires..."></textarea>
                        </div>

                        <div class="mb-3 form-check">
                            <input type="checkbox" class="form-check-input" id="terms" required>
                            <label class="form-check-label small" for="terms">
                                J'accepte les <a href="#" data-bs-toggle="modal" data-bs-target="#termsModal">conditions générales</a>
                                et je confirme mon intention d'achat
                            </label>
                        </div>

                        <div class="mb-3">
                            <div class="alert alert-info small">
                                <i class="fas fa-info-circle me-2"></i>
                                Total à payer: <strong id="totalPrice">299,99 €</strong>
                                <br><small>(TVA incluse, livraison calculée à l'étape suivante)</small>
                            </div>
                        </div>

                        <button type="submit" class="btn-submit" id="submitBtn">
                            <i class="fas fa-lock me-2"></i>
                            Commander maintenant
                        </button>

                        <div class="payment-methods">
                            <i class="fab fa-cc-visa"></i>
                            <i class="fab fa-cc-mastercard"></i>
                            <i class="fab fa-cc-amex"></i>
                            <i class="fab fa-cc-paypal"></i>
                            <i class="fab fa-apple-pay"></i>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Success Toast -->
<div class="toast-custom" id="successToast" style="display: none;">
    <div class="bg-white rounded shadow-lg p-3">
        <div class="d-flex align-items-center">
            <div class="bg-success rounded-circle p-2 me-3">
                <i class="fas fa-check text-white"></i>
            </div>
            <div class="flex-grow-1">
                <h6 class="mb-0 fw-bold">Commande confirmée !</h6>
                <small class="text-muted">Nous vous contacterons sous 24h</small>
            </div>
            <button class="btn-close" onclick="closeToast()" aria-label="Fermer"></button>
        </div>
    </div>
</div>

<!-- Terms Modal -->
<div class="modal fade" id="termsModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Conditions générales</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
            </div>
            <div class="modal-body">
                <p>En passant commande, vous acceptez nos conditions de vente. Les produits sont garantis 3 ans.
                Vous disposez d'un droit de rétractation de 14 jours conformément à la loi.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">J'ai compris</button>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
    let currentQuantity = 1;
    const basePrice = 299.99;

    // Change product image
    function changeImage(src) {
        document.getElementById('mainProductImage').src = src;
    }

    // Change quantity
    function changeQuantity(delta) {
        currentQuantity += delta;
        if (currentQuantity < 1) currentQuantity = 1;
        if (currentQuantity > 10) currentQuantity = 10;
        document.getElementById('quantity').value = currentQuantity;
        updateTotalPrice();
    }

    // Update total price
    function updateTotalPrice() {
        const total = basePrice * currentQuantity;
        document.getElementById('totalPrice').innerHTML = total.toFixed(2) + ' €';
    }

    // Submit order
    function submitOrder(event) {
        event.preventDefault();

        // Get form data
        const formData = {
            fullName: document.getElementById('fullName').value,
            email: document.getElementById('email').value,
            phone: document.getElementById('phone').value,
            address: document.getElementById('address').value,
            zipcode: document.getElementById('zipcode').value,
            city: document.getElementById('city').value,
            delivery: document.getElementById('delivery').value,
            notes: document.getElementById('notes').value,
            quantity: currentQuantity,
            totalPrice: (basePrice * currentQuantity).toFixed(2)
        };

        // Validate form
        if (!formData.fullName || !formData.email || !formData.phone ||
            !formData.address || !formData.zipcode || !formData.city) {
            alert('Veuillez remplir tous les champs obligatoires *');
            return false;
        }

        // Email validation
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(formData.email)) {
            alert('Veuillez entrer une adresse email valide');
            return false;
        }

        // Phone validation (simple)
        const phoneRegex = /^[0-9\s\+\-\(\)]{10,}$/;
        if (!phoneRegex.test(formData.phone)) {
            alert('Veuillez entrer un numéro de téléphone valide');
            return false;
        }

        // Simulate order submission
        const submitBtn = document.getElementById('submitBtn');
        const originalText = submitBtn.innerHTML;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Traitement en cours...';
        submitBtn.disabled = true;

        // Simulate API call
        setTimeout(() => {
            console.log('Commande soumise:', formData);

            // Show success message
            showSuccessToast();

            // Reset form
            document.getElementById('orderForm').reset();
            currentQuantity = 1;
            document.getElementById('quantity').value = 1;
            updateTotalPrice();

            // Reset button
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;

            // You would typically send this data to your server
            // fetch('/api/order', { method: 'POST', body: JSON.stringify(formData) })

        }, 1500);

        return false;
    }

    // Show success toast
    function showSuccessToast() {
        const toast = document.getElementById('successToast');
        toast.style.display = 'block';

        // Auto hide after 5 seconds
        setTimeout(() => {
            closeToast();
        }, 5000);
    }

    // Close toast
    function closeToast() {
        const toast = document.getElementById('successToast');
        toast.style.display = 'none';
    }

    // Update total price when delivery changes
    document.getElementById('delivery').addEventListener('change', function() {
        updateTotalPrice();
    });

    // Initialize tooltips
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
</script>

</body>
</html>
Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur
📌 Voir aussi

🏷️ Explorer par mot clé
