Composant Visionneuse à 360°
Un composant de visionneuse à 360° utilisant le style de conception Glassmorphism avec des effets réactifs et la prise en charge du thème sombre.
HTML Code
<div class="flex justify-center items-center h-screen bg-gray-100 dark:bg-gray-900">
<div class="glass-morphism-container relative w-full max-w-2xl p-6 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 backdrop-blur-lg bg-white bg-opacity-20 dark:bg-gray-800 bg-opacity-70">
<h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-200 mb-4">360° Viewer</h2>
<div class="viewer-wrapper relative">
<img src="https://picsum.photos/600/400?random=1" alt="360° View Image" class="object-cover w-full rounded-lg">
<div class="arrow-buttons absolute w-full flex justify-between top-1/2 transform -translate-y-1/2 px-4">
<button class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full p-2 shadow-md hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none">
<
</button>
<button class="bg-white dark:bg-gray-700 text-gray-800 dark:text-white rounded-full p-2 shadow-md hover:bg-gray-200 dark:hover:bg-gray-600 focus:outline-none">
>
</button>
</div>
</div>
<div class="mt-4 text-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="mx-auto w-12 h-12 rounded-full border-2 border-white bg-white dark:border-gray-700">
<p class="text-gray-800 dark:text-gray-200 mt-2">User Name</p>
</div>
</div>
</div>Composants associés
Composant Visionneuse à 360°
Un composant de visionneuse à 360° simple et réactif conçu pour le commerce électronique avec des micro-interactions attrayantes et une palette de couleurs triadique, prenant en charge le mode sombre.
360_viewer_component
Un composant complexe de visualisation de produits à 360° avec une esthétique industrielle et brute utilisant une palette de couleurs violet/violet, adapté à un portefeuille. Comprend des éléments interactifs, un design réactif et la prise en charge du mode sombre.
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.