360_viewer_marketplace_component
Un composant de visionneuse à 360° réactif pour les places de marché, avec un style de conception aquarelle/artistique avec une palette de couleurs noir et blanc et une seule couleur d’accent vive. Comprend des éléments interactifs, la prise en charge du mode sombre et utilise le HTML sémantique.
HTML Code
<div class="font-sans antialiased bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-50 min-h-screen p-4 sm:p-6 lg:p-8 flex items-center justify-center">
<div class="flex flex-col lg:flex-row max-w-7xl w-full bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 ease-in-out hover:scale-[1.01] border border-gray-100 dark:border-gray-700">
<!-- Image Viewer Section -->
<div class="lg:w-3/5 p-4 sm:p-6 relative overflow-hidden flex flex-col items-center justify-center bg-gradient-to-br from-purple-50 dark:from-gray-700 to-white dark:to-gray-800 group">
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/white-prism.png')] dark:bg-[url('https://www.transparenttextures.com/patterns/dark-fish-skin.png')] opacity-10 rounded-3xl"></div>
<div class="relative w-full aspect-video md:aspect-[16/10] lg:aspect-[16/9] max-w-xl group-hover:scale-[1.02] transform transition-transform duration-500 ease-out">
<img src="https://picsum.photos/id/401/800/600" alt="Product 360 View" class="w-full h-full object-contain rounded-2xl shadow-lg border border-gray-200 dark:border-gray-600 animate-fade-in" loading="lazy">
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<button class="flex items-center justify-center p-3 rounded-full bg-white/80 dark:bg-gray-700/80 backdrop-blur-sm text-gray-800 dark:text-gray-200 shadow-xl hover:scale-110 active:scale-95 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-accent-400/50 dark:focus:ring-accent-600/50" aria-label="Rotate 360 degrees">
<svg class="w-8 h-8 md:w-10 md:h-10 text-rose-500 dark:text-rose-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 13V4m7 14.054V21.5M10 19.5h2M12 2.5v16.054m-2 0H14m1.966-2.502L18 16.5m-3-12l3-2.5m-5.466 2.502L6 16.5m3-12L6 4.5m10 8l-2 2h-4c-1.105 0-2 .895-2 2v-.5c0-1.657 1.343-3 3-3h3a2 2 0 110 4h-3a2 2 0 100 4h3a2 2 0 100 4h-3a2 2 0 100 4H10c-1.105 0-2 .895-2 2z"></path>
</svg>
</button>
</div>
</div>
<div class="flex justify-center mt-4 space-x-1 sm:mt-6">
<button class="w-16 h-12 sm:w-20 sm:h-16 border-2 border-rose-500 dark:border-rose-400 rounded-lg overflow-hidden shadow-md transform scale-110 ring-2 ring-rose-300 dark:ring-rose-600 relative after:content-[''] after:absolute after:inset-0 after:opacity-20 after:bg-rose-500 dark:after:bg-rose-400" aria-label="View 1">
<img src="https://picsum.photos/id/401/100/75" alt="Thumbnail 1" class="w-full h-full object-cover" loading="lazy">
</button>
<button class="w-16 h-12 sm:w-20 sm:h-16 border-2 border-gray-200 dark:border-gray-600 hover:border-rose-300 dark:hover:border-rose-500 rounded-lg overflow-hidden transition-all duration-200 shadow-sm relative after:content-[''] after:absolute after:inset-0 after:opacity-0 hover:after:opacity-5 after:bg-gray-900 dark:after:bg-white" aria-label="View 2">
<img src="https://picsum.photos/id/402/100/75" alt="Thumbnail 2" class="w-full h-full object-cover" loading="lazy">
</button>
<button class="w-16 h-12 sm:w-20 sm:h-16 border-2 border-gray-200 dark:border-gray-600 hover:border-rose-300 dark:hover:border-rose-500 rounded-lg overflow-hidden transition-all duration-200 shadow-sm relative after:content-[''] after:absolute after:inset-0 after:opacity-0 hover:after:opacity-5 after:bg-gray-900 dark:after:bg-white" aria-label="View 3">
<img src="https://picsum.photos/id/403/100/75" alt="Thumbnail 3" class="w-full h-full object-cover" loading="lazy">
</button>
<button class="hidden sm:inline-block w-16 h-12 sm:w-20 sm:h-16 border-2 border-gray-200 dark:border-gray-600 hover:border-rose-300 dark:hover:border-rose-500 rounded-lg overflow-hidden transition-all duration-200 shadow-sm relative after:content-[''] after:absolute after:inset-0 after:opacity-0 hover:after:opacity-5 after:bg-gray-900 dark:after:bg-white" aria-label="View 4">
<img src="https://picsum.photos/id/404/100/75" alt="Thumbnail 4" class="w-full h-full object-cover" loading="lazy">
</button>
</div>
</div>
<!-- Product Details Section -->
<div class="lg:w-2/5 p-6 sm:p-8 lg:p-10 flex flex-col justify-between relative bg-white dark:bg-gray-800">
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/grunge-wall.png')] dark:bg-[url('https://www.transparenttextures.com/patterns/dark-geometric-pattern.png')] opacity-5 rounded-3xl"></div>
<div class="relative z-10">
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-2 leading-tight text-gray-900 dark:text-gray-50 animate-fade-down">
Artisanal Ceramic Vase
</h1>
<p class="text-lg sm:text-xl text-gray-600 dark:text-gray-300 mb-6 font-medium animate-fade-down animation-delay-200">
Hand-painted masterpiece for your home.
</p>
<div class="flex items-baseline mb-6 space-x-3">
<span class="text-4xl sm:text-5xl font-bold text-rose-600 dark:text-rose-400 animate-fade-in animation-delay-400">$89.99</span>
<span class="text-xl sm:text-2xl text-gray-400 dark:text-gray-500 line-through animate-fade-in animation-delay-500">$120.00</span>
<span class="text-base text-green-600 dark:text-green-400 font-semibold animate-fade-in animation-delay-600">(25% OFF)</span>
</div>
<p class="text-sm sm:text-base text-gray-700 dark:text-gray-200 mb-6 leading-relaxed">
Each vase is uniquely crafted by local artisans, featuring intricate watercolor-inspired patterns and a smooth, matte finish. Perfect for adding a touch of elegance to any room. Limited edition. Measures 10" high, 6" diameter.
</p>
<div class="mb-6 flex flex-wrap gap-3">
<span class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full text-sm font-medium shadow-sm border border-gray-200 dark:border-gray-600">Handmade</span>
<span class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full text-sm font-medium shadow-sm border border-gray-200 dark:border-gray-600">Unique Piece</span>
<span class="px-3 py-1 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-full text-sm font-medium shadow-sm border border-gray-200 dark:border-gray-600">Home Decor</span>
</div>
<div class="mb-6 flex flex-col sm:flex-row gap-4">
<button class="flex-1 w-full sm:w-auto px-6 py-3 bg-rose-600 dark:bg-rose-500 text-white font-semibold rounded-xl shadow-lg hover:bg-rose-700 dark:hover:bg-rose-600 transition duration-300 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-rose-300 dark:focus:ring-rose-700 animate-fade-up animation-delay-700">
Add to Cart
</button>
<button class="flex-1 w-full sm:w-auto px-6 py-3 border border-gray-300 dark:border-gray-600 text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-700 font-semibold rounded-xl shadow-md hover:bg-gray-100 dark:hover:bg-gray-600 transition duration-300 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600 animate-fade-up animation-delay-800">
<svg class="w-5 h-5 inline-block mr-2 -mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
Wishlist
</button>
</div>
<div class="mt-8 flex items-center justify-between text-gray-600 dark:text-gray-300 text-sm">
<div class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Vendor Avatar" class="w-10 h-10 rounded-full border-2 border-rose-300 dark:border-rose-600 shadow-md" loading="lazy">
<div>
<p class="font-medium text-gray-800 dark:text-gray-100">Sold by <a href="#" class="text-rose-600 dark:text-rose-400 hover:underline">Artisan Crafts Co.</a></p>
<p class="text-xs">Est. 2018 | 4.9 <span class="text-yellow-500">★</span></p>
</div>
</div>
<div>
<a href="#" class="flex items-center text-rose-600 dark:text-rose-400 hover:underline text-sm">
View Store
<svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<style>
/* Custom animations for a smoother feel */
@keyframes fade-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-down {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-up {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fade-in 0.6s ease-out forwards; }
.animate-fade-down { animation: fade-down 0.6s ease-out forwards; }
.animate-fade-up { animation: fade-up 0.6s ease-out forwards; }
/* Staggered animations */
.animation-delay-100 { animation-delay: 0.1s; }
.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-300 { animation-delay: 0.3s; }
.animation-delay-400 { animation-delay: 0.4s; }
.animation-delay-500 { animation-delay: 0.5s; }
.animation-delay-600 { animation-delay: 0.6s; }
.animation-delay-700 { animation-delay: 0.7s; }
.animation-delay-800 { animation-delay: 0.8s; }
/* This is a placeholder for actual 360 viewer functionality */
/* In a real application, this would be handled by JavaScript */
/* For this HTML/CSS only component, clicking the 360 button
or thumbnails wouldn't change the image, but the hover effects
and visual cues are in place to suggest interactivity. */
</style>
</div>Composants associés
Composant Visionneuse à 360°
Un composant de visionneuse à 360° de style rétro/vintage pour présenter le travail ou les produits d’un portfolio, conçu à l’aide de Tailwind CSS avec une interface complexe comportant plusieurs éléments interactifs et prenant en charge le mode sombre.
PastelBrutalist360AssetViewer
Un composant Asset Viewer 360° simple et réactif avec un style de design brutaliste et une palette de couleurs rose pastel. Conçu pour les tableaux de bord, il dispose d’un espace réservé à l’image statique (simulant une vue à 360°), de boutons de commande non fonctionnels et d’un affichage d’informations. Construit avec Tailwind CSS, il prend en charge le mode sombre et présente une esthétique brute et audacieuse avec des bordures épaisses et des ombres décalées dures.
360_Viewer_Component
Un composant de visualisation à 360° simple et réactif avec un accent sur la micro-interaction pour les sites Web d’entreprise, avec des tons de terre et une prise en charge du mode sombre. Conçu pour simuler une visionneuse interactive à 360°, permettant aux utilisateurs de « cliquer et glisser » pour faire pivoter une image.