Composant Visionneuse à 360°
Un composant de visionneuse réactif à 360 degrés conçu pour le commerce électronique, avec prise en charge du mode sombre. Le style est rétro/vintage avec une palette de couleurs pastel. Utilise uniquement HTML et Tailwind CSS.
HTML Code
<div class="retro-vintage bg-gradient-to-br from-pastel-pink to-pastel-blue text-pastel-gray min-h-screen p-8 dark:from-pastel-gray dark:to-pastel-purple dark:text-pastel-pink">
<!-- Component Container -->
<div class="max-w-4xl mx-auto bg-white bg-opacity-30 rounded-lg shadow-lg overflow-hidden dark:bg-gray-800 dark:bg-opacity-50">
<!-- 360 Viewer Placeholder -->
<div class="relative w-full" style="padding-top: 75%;">
<!-- This is a placeholder for the 360 viewer. In a real application, a 360 viewer library/script would be initialized here. -->
<div class="absolute top-0 left-0 w-full h-full flex items-center justify-center bg-pastel-light-gray dark:bg-pastel-dark-blue">
<p class="text-pastel-dark-gray text-xl font-bold dark:text-pastel-light-gray">360° Viewer Placeholder</p>
</div>
</div>
<!-- Product Info & Controls (placeholder) -->
<div class="p-6">
<h2 class="text-2xl font-bold mb-4 dark:text-pastel-light-gray">Product Name</h2>
<p class="text-pastel-dark-gray mb-4 dark:text-pastel-light-gray">Product description goes here. This is a placeholder.</p>
<!-- Controls Placeholder -->
<div class="flex justify-center space-x-4">
<button class="px-4 py-2 bg-pastel-pink text-white rounded hover:bg-pastel-red transition duration-300 dark:bg-pastel-purple dark:hover:bg-pastel-pink">Rotate Left</button>
<button class="px-4 py-2 bg-pastel-blue text-white rounded hover:bg-pastel-dark-blue transition duration-300 dark:bg-pastel-pink dark:hover:bg-pastel-purple">Rotate Right</button>
</div>
</div>
</div>
</div>Composants associés
Composant Visionneuse à 360°
Un composant de visualisation simple à 360° utilisant le style Glassmorphism et un design réactif avec prise en charge du mode sombre.
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.
Composant Visionneuse à 360°
Un composant de visionneuse à 360° conçu avec un style skeuomorphe, utilisant une palette de couleurs en niveaux de gris. Il dispose d’une interface de complexité moyenne adaptée aux applications de médias sociaux, prenant en charge les thèmes clairs et sombres.