Bootstrap 5
Product Card
Luxury
Premium
Elegant Design
Carte produit luxe avec effets dorés, typographie élégante et animations sophistiquées. Idéal pour les produits haut de gamme.
<!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 042120102 | AngularForAll</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.float-animation {
animation: float 3s ease-in-out infinite;
}
.product-canvas {
cursor: grab;
transition: all 0.3s ease;
}
.product-canvas:active {
cursor: grabbing;
}
.glass-effect {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
</style>
</head>
<body class="bg-gradient-to-br from-gray-900 to-gray-700 min-h-screen">
<div class="container mx-auto px-4 py-8 max-w-7xl">
<!-- En-tête -->
<div class="text-center mb-8">
<h1 class="text-4xl md:text-5xl font-bold text-white mb-2">
Samsung Galaxy <span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-400">A26 5G</span>
</h1>
<p class="text-gray-300 text-lg">Découvrez le smartphone nouvelle génération</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Partie gauche - Visualisation 360° -->
<div class="space-y-4">
<div class="bg-gradient-to-br from-purple-600 to-blue-600 rounded-2xl p-6 shadow-2xl float-animation">
<div class="bg-black/20 rounded-xl p-4">
<canvas id="productCanvas" class="product-canvas w-full h-auto" width="500" height="400"></canvas>
</div>
</div>
<!-- Contrôles -->
<div class="bg-white/10 backdrop-blur-lg rounded-xl p-4 glass-effect">
<div class="flex justify-between items-center mb-4">
<div class="bg-black/50 rounded-full px-4 py-2">
<i class="fas fa-sync-alt text-purple-400"></i>
<span class="text-white ml-2">Angle: <span id="angleDisplay" class="font-bold text-purple-400">0</span>°</span>
</div>
<div class="flex gap-2">
<button id="prevBtn360" aria-label="Previous angle"
class="bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg transition">
<i class="fas fa-chevron-left"></i>
</button>
<button id="autoRotateBtn360" aria-label="Auto rotate"
class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg transition">
<i class="fas fa-play"></i>
</button>
<button id="nextBtn360" aria-label="Next angle" class="bg-white/20 hover:bg-white/30 text-white px-4 py-2 rounded-lg transition">
<i class="fas fa-chevron-right"></i>
</button>
</div>
</div>
<input type="range" id="angleSlider360" min="0" max="360" step="1" value="0" class="w-full h-2 bg-gray-300 rounded-lg appearance-none cursor-pointer">
<div class="mt-3 text-center text-gray-300 text-sm">
<i class="fas fa-hand-pointer"></i> Glissez sur l'image pour faire pivoter le produit
</div>
</div>
<!-- Miniatures des angles -->
<div class="grid grid-cols-6 gap-2">
<div class="text-center">
<div class="bg-white/10 rounded-lg p-2 cursor-pointer hover:bg-white/20 transition angle-thumb" data-angle="0">
<i class="fas fa-mobile-alt text-white text-xl"></i>
<p class="text-white text-xs mt-1">Face</p>
</div>
</div>
<div class="text-center">
<div class="bg-white/10 rounded-lg p-2 cursor-pointer hover:bg-white/20 transition angle-thumb" data-angle="72">
<i class="fas fa-rotate-right text-white text-xl"></i>
<p class="text-white text-xs mt-1">72°</p>
</div>
</div>
<div class="text-center">
<div class="bg-white/10 rounded-lg p-2 cursor-pointer hover:bg-white/20 transition angle-thumb" data-angle="144">
<i class="fas fa-rotate-right text-white text-xl"></i>
<p class="text-white text-xs mt-1">144°</p>
</div>
</div>
<div class="text-center">
<div class="bg-white/10 rounded-lg p-2 cursor-pointer hover:bg-white/20 transition angle-thumb" data-angle="216">
<i class="fas fa-mobile-alt text-white text-xl"></i>
<p class="text-white text-xs mt-1">216°</p>
</div>
</div>
<div class="text-center">
<div class="bg-white/10 rounded-lg p-2 cursor-pointer hover:bg-white/20 transition angle-thumb" data-angle="288">
<i class="fas fa-rotate-left text-white text-xl"></i>
<p class="text-white text-xs mt-1">288°</p>
</div>
</div>
<div class="text-center">
<div class="bg-white/10 rounded-lg p-2 cursor-pointer hover:bg-white/20 transition angle-thumb" data-angle="360">
<i class="fas fa-redo-alt text-white text-xl"></i>
<p class="text-white text-xs mt-1">360°</p>
</div>
</div>
</div>
</div>
<!-- Partie droite - Informations produit -->
<div class="space-y-6">
<!-- Prix et offre -->
<div class="bg-gradient-to-r from-purple-600 to-pink-600 rounded-2xl p-6 text-white">
<div class="flex justify-between items-start">
<div>
<p class="text-sm opacity-90">À partir de</p>
<p class="text-4xl font-bold">349€ <span class="text-lg line-through opacity-70">399€</span></p>
<p class="text-sm mt-1">Soit 50€ d'économies</p>
</div>
<div class="bg-yellow-500 rounded-full px-4 py-2">
<i class="fas fa-gem"></i>
<span class="font-bold ml-1">-10%</span>
</div>
</div>
</div>
<!-- Options -->
<div class="bg-white/10 backdrop-blur-lg rounded-2xl p-6 glass-effect">
<h3 class="text-white font-bold text-lg mb-4">Personnalisez votre appareil</h3>
<!-- Couleurs -->
<div class="mb-4">
<label class="text-gray-300 text-sm block mb-2">Couleurs</label>
<div class="flex gap-3">
<button aria-label="Blue color" class="w-12 h-12 rounded-full bg-blue-600 ring-2 ring-white hover:scale-110 transition color-btn" data-color="blue"></button>
<button aria-label="Black color" class="w-12 h-12 rounded-full bg-gray-800 ring-2 ring-white hover:scale-110 transition color-btn" data-color="black"></button>
<button aria-label="White color" class="w-12 h-12 rounded-full bg-white ring-2 ring-white hover:scale-110 transition color-btn" data-color="white"></button>
<button aria-label="Green color" class="w-12 h-12 rounded-full bg-green-600 ring-2 ring-white hover:scale-110 transition color-btn" data-color="green"></button>
</div>
</div>
<!-- Stockage -->
<div class="mb-4">
<label class="text-gray-300 text-sm block mb-2">Stockage</label>
<div class="grid grid-cols-2 gap-3">
<button class="storage-btn bg-white/20 text-white px-4 py-2 rounded-lg hover:bg-white/30 transition" data-storage="128">
128 Go <span class="text-sm opacity-70">(Recommandé)</span>
</button>
<button class="storage-btn bg-white/20 text-white px-4 py-2 rounded-lg hover:bg-white/30 transition" data-storage="256">
256 Go <span class="text-sm opacity-70">+50€</span>
</button>
</div>
</div>
<button class="w-full bg-gradient-to-r from-purple-500 to-pink-500 text-white font-bold py-3 rounded-xl hover:shadow-xl transition transform hover:scale-105">
<i class="fas fa-shopping-cart mr-2"></i>
Ajouter au panier
</button>
</div>
<!-- Caractéristiques -->
<div class="bg-white/10 backdrop-blur-lg rounded-2xl p-6 glass-effect">
<h3 class="text-white font-bold text-lg mb-4">
<i class="fas fa-microchip mr-2"></i>
Caractéristiques techniques
</h3>
<div class="grid grid-cols-2 gap-4">
<div>
<p class="text-gray-400 text-sm">Écran</p>
<p class="text-white font-semibold">6.7" Super AMOLED</p>
</div>
<div>
<p class="text-gray-400 text-sm">Résolution</p>
<p class="text-white font-semibold">FHD+ 1080 x 2340</p>
</div>
<div>
<p class="text-gray-400 text-sm">Processeur</p>
<p class="text-white font-semibold">Exynos 1380</p>
</div>
<div>
<p class="text-gray-400 text-sm">RAM</p>
<p class="text-white font-semibold">6 Go / 8 Go</p>
</div>
<div>
<p class="text-gray-400 text-sm">Appareil photo</p>
<p class="text-white font-semibold">50 MP + OIS</p>
</div>
<div>
<p class="text-gray-400 text-sm">Batterie</p>
<p class="text-white font-semibold">5000 mAh</p>
</div>
</div>
</div>
<!-- Avis clients -->
<div class="bg-white/10 backdrop-blur-lg rounded-2xl p-6 glass-effect">
<div class="flex items-center justify-between mb-3">
<h3 class="text-white font-bold text-lg">Avis clients</h3>
<div class="flex items-center">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star-half-alt text-yellow-400"></i>
<span class="text-white ml-2">4.5/5</span>
</div>
</div>
<div class="space-y-3">
<div class="border-t border-white/20 pt-3">
<p class="text-gray-300 text-sm">"Excellent rapport qualité-prix, la batterie tient toute la journée !"</p>
<p class="text-purple-400 text-xs mt-1">- Michel D.</p>
</div>
<div class="border-t border-white/20 pt-3">
<p class="text-gray-300 text-sm">"L'écran est magnifique, parfait pour les vidéos et les jeux."</p>
<p class="text-purple-400 text-xs mt-1">- Sophie L.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// Configuration du canvas 360°
const canvas = document.getElementById('productCanvas');
const ctx = canvas.getContext('2d');
let currentAngle = 0;
let autoRotateInterval = null;
let isDragging = false;
let dragStartX = 0;
let dragStartAngle = 0;
function resizeCanvas() {
const container = canvas.parentElement;
const size = Math.min(container.clientWidth, 500);
canvas.width = size;
canvas.height = size * 0.8;
canvas.style.width = '100%';
canvas.style.height = 'auto';
drawPhone();
}
function drawPhone() {
if (!ctx) return;
const w = canvas.width;
const h = canvas.height;
ctx.clearRect(0, 0, w, h);
const angleRad = (currentAngle * Math.PI) / 180;
ctx.save();
const centerX = w / 2;
const centerY = h / 2;
const phoneWidth = Math.min(w * 0.5, 250);
const phoneHeight = phoneWidth * 2.1;
const perspective = Math.cos(angleRad) * 0.3 + 0.7;
const currentWidth = phoneWidth * perspective;
const currentHeight = phoneHeight;
const x = centerX - currentWidth / 2;
const y = centerY - currentHeight / 2;
// Corps du téléphone
ctx.save();
ctx.shadowColor = 'rgba(0,0,0,0.3)';
ctx.shadowBlur = 15;
const gradient = ctx.createLinearGradient(x, y, x + currentWidth, y + currentHeight);
if (currentAngle < 90 || currentAngle > 270) {
gradient.addColorStop(0, '#667eea');
gradient.addColorStop(0.5, '#764ba2');
gradient.addColorStop(1, '#f093fb');
} else {
gradient.addColorStop(0, '#1a252f');
gradient.addColorStop(0.5, '#2c3e50');
gradient.addColorStop(1, '#1a252f');
}
ctx.fillStyle = gradient;
ctx.fillRect(x, y, currentWidth, currentHeight);
ctx.restore();
// Écran
if (currentAngle > 270 || currentAngle < 90) {
ctx.save();
const screenMargin = currentWidth * 0.08;
const screenWidth = currentWidth - (screenMargin * 2);
const screenHeight = currentHeight - (screenMargin * 2.5);
const screenX = x + screenMargin;
const screenY = y + screenMargin;
ctx.fillStyle = '#0a0e27';
ctx.fillRect(screenX, screenY, screenWidth, screenHeight);
ctx.fillStyle = '#00ff88';
ctx.font = `bold ${Math.max(12, screenWidth * 0.08)}px Arial`;
ctx.textAlign = 'center';
ctx.fillText('SAMSUNG', screenX + screenWidth/2, screenY + screenHeight/3);
ctx.fillStyle = '#ffffff';
ctx.font = `${Math.max(10, screenWidth * 0.05)}px Arial`;
ctx.fillText('Galaxy A26', screenX + screenWidth/2, screenY + screenHeight/2);
ctx.fillStyle = '#00aaff';
ctx.font = `${Math.max(8, screenWidth * 0.04)}px Arial`;
ctx.fillText('5G', screenX + screenWidth/2, screenY + screenHeight * 0.7);
ctx.restore();
}
// Caméra arrière
if (currentAngle > 90 && currentAngle < 270) {
ctx.save();
const cameraY = y + currentHeight * 0.25;
const cameraSize = currentWidth * 0.1;
ctx.fillStyle = '#111';
ctx.fillRect(x + currentWidth * 0.35, cameraY, currentWidth * 0.3, cameraSize * 2.5);
ctx.fillStyle = '#333';
ctx.beginPath();
ctx.arc(x + currentWidth * 0.45, cameraY + cameraSize * 0.8, cameraSize * 0.35, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = '#222';
ctx.beginPath();
ctx.arc(x + currentWidth * 0.55, cameraY + cameraSize * 0.8, cameraSize * 0.35, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
}
ctx.restore();
}
function updateAngle(angle) {
currentAngle = angle;
document.getElementById('angleDisplay').textContent = currentAngle;
document.getElementById('angleSlider360').value = currentAngle;
drawPhone();
}
function nextAngle() {
let newAngle = currentAngle + 10;
if (newAngle >= 360) newAngle = 0;
updateAngle(newAngle);
}
function prevAngle() {
let newAngle = currentAngle - 10;
if (newAngle < 0) newAngle = 350;
updateAngle(newAngle);
}
function toggleAutoRotate() {
if (autoRotateInterval) {
clearInterval(autoRotateInterval);
autoRotateInterval = null;
document.getElementById('autoRotateBtn360').innerHTML = '<i class="fas fa-play"></i>';
} else {
autoRotateInterval = setInterval(nextAngle, 100);
document.getElementById('autoRotateBtn360').innerHTML = '<i class="fas fa-pause"></i>';
}
}
// Événements drag
function handleMouseDown(e) {
isDragging = true;
dragStartX = e.clientX;
dragStartAngle = currentAngle;
canvas.style.cursor = 'grabbing';
if (autoRotateInterval) toggleAutoRotate();
}
function handleMouseMove(e) {
if (!isDragging) return;
const deltaX = e.clientX - dragStartX;
const angleChange = (deltaX / canvas.width) * 180;
let newAngle = dragStartAngle + angleChange;
newAngle = ((newAngle % 360) + 360) % 360;
updateAngle(Math.round(newAngle));
}
</script>
</body>
</html>
Ouvrir cet aperçu dans un nouvel onglet du navigateur
🔗 Ouvrir dans le navigateur