Visionneuse à 360°

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.

Ouvrir l’aperçu

                <div class="flex flex-col items-center justify-center w-full h-screen bg-gray-100 dark:bg-gray-800 transition-all duration-300 p-5">
    <!-- Title -->
    <h1 class="text-2xl font-bold text-gray-800 dark:text-white mb-5">360° Product Viewer</h1>
    
    <!-- 360° Image Viewer -->
    <div class="relative w-full max-w-lg overflow-hidden rounded-lg shadow-lg bg-white dark:bg-gray-900">
        <img src="https://picsum.photos/600/400?random=1" alt="Product Image" class="w-full transition-transform duration-500 ease-in-out transform hover:scale-105" />
        <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-30 opacity-0 hover:opacity-100 transition-opacity duration-300">
            <span class="text-white text-lg">Hover to view</span>
        </div>
    </div>
    
    <!-- Product Details -->
    <div class="mt-5 text-center">
        <h2 class="text-xl font-semibold text-gray-700 dark:text-gray-300">Stylish and Modern Product</h2>
        <p class="text-gray-600 dark:text-gray-400">This product is perfect for your day-to-day activities and brings a fresh touch to your style.</p>
        <div class="flex items-center justify-center space-x-4 mt-4">
            <span class="text-lg font-bold text-gray-800 dark:text-white">$29.99</span>
            <button class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition duration-200">Add to Cart</button>
        </div>
    </div>
</div>

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.

Ouvrir l’aperçu

                <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>

Composant de la visionneuse Neumorphic 360

Un composant de visionneuse à 360° avec un design Neumorphism, une palette de couleurs triadique (exemple : bleu clair, rose, jaune-orange) et une complexité modérée pour les applications de médias sociaux. Le composant est réactif, prend en charge le mode sombre à l’aide des classes Tailwind et utilise picsum.photos pour les images et randomuser.me pour les avatars. Aucun JavaScript n’est requis.

Ouvrir l’aperçu

                <div class="flex justify-center items-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">

  <!-- Neumorphic Container -->
  <div class="relative w-full max-w-sm bg-gray-200 dark:bg-gray-700 rounded-xl shadow-xl p-6
              dark:shadow-[7px_7px_15px_#1c1c1c,-7px_-7px_15px_#343434]
              shadow-[7px_7px_15px_#a3a3a3,-7px_-7px_15px_#ffffff] md:max-w-md">

    <!-- 360 Viewer Placeholder (using an image for demonstration) -->
    <!-- In a real application, this would be a canvas or iframe with a 360 viewer library -->
    <div class="relative w-full h-64 rounded-lg overflow-hidden
                shadow-inner dark:shadow-[inset_5px_5px_10px_#1c1c1c,inset_-5px_-5px_10px_#343434]
                shadow-[inset_5px_5px_10px_#a3a3a3,inset_-5px_-5px_10px_#ffffff]">
      <img src="https://picsum.photos/600/400" alt="360 View Placeholder" class="w-full h-full object-cover">
      <!-- Example Triadic Colors for potential UI elements layered over the image -->
      <div class="absolute top-2 right-2 w-8 h-8 bg-blue-400 dark:bg-blue-600 rounded-full opacity-75"></div>
      <div class="absolute bottom-2 left-2 w-8 h-8 bg-pink-400 dark:bg-pink-600 rounded-full opacity-75"></div>
      <div class="absolute bottom-2 right-2 w-8 h-8 bg-yellow-500 dark:bg-yellow-700 rounded-full opacity-75"></div>
    </div>

    <!-- Component Title -->
    <div class="mt-6 text-center text-gray-700 dark:text-gray-300 text-xl font-semibold">
      Interactive 360° View
    </div>

    <!-- User Avatar and Info -->
    <div class="flex items-center justify-center mt-4">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-blue-400 dark:border-blue-600">
      <div class="ml-3 text-gray-600 dark:text-gray-400">
        <p class="font-medium">John Doe</p>
        <p class="text-sm">Exploring the view</p>
      </div>
    </div>

    <!-- Interactive Buttons Placeholder -->
    <div class="flex justify-around mt-6">
      <button class="p-3 rounded-full bg-gray-200 dark:bg-gray-700
                     shadow-md dark:shadow-[5px_5px_10px_#1c1c1c,-5px_-5px_10px_#343434]
                     shadow-[5px_5px_10px_#a3a3a3,-5px_-5px_10px_#ffffff]
                     text-gray-700 dark:text-gray-300 hover:shadow-inner
                     dark:hover:shadow-[inset_2px_2px_5px_#1c1c1c,inset_-2px_-2px_5px_#343434]
                     hover:shadow-[inset_2px_2px_5px_#a3a3a3,inset_-2px_-2px_5px_#ffffff]
                     transition duration-200">
        <!-- Example Icon - Replace with a real icon -->
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.555-4.555A1.5 1.5 0 0017.444 ..."/>
        </svg>
      </button>
      <button class="p-3 rounded-full bg-gray-200 dark:bg-gray-700
                     shadow-md dark:shadow-[5px_5px_10px_#1c1c1c,-5px_-5px_10px_#343434]
                     shadow-[5px_5px_10px_#a3a3a3,-5px_-5px_10px_#ffffff]
                     text-gray-700 dark:text-gray-300 hover:shadow-inner
                     dark:hover:shadow-[inset_2px_2px_5px_#1c1c1c,inset_-2px_-2px_5px_#343434]
                     hover:shadow-[inset_2px_2px_5px_#a3a3a3,inset_-2px_-2px_5px_#ffffff]
                     transition duration-200">
        <!-- Example Icon - Replace with a real icon -->
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
        </svg>
      </button>
    </div>

  </div>

</div>

Composant Visionneuse à 360°

Un simple composant de visualisation à 360° stylisé en Material Design avec des tons de terre pour un contexte de commerce électronique. Il comprend un design réactif avec prise en charge du mode sombre, présentant des images de picsum.photos et des avatars de randomuser.me.

Ouvrir l’aperçu

                <div class="container mx-auto p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white">360° Product Viewer</h2>
        <div class="mt-4 flex justify-center items-center">
            <img src="https://picsum.photos/500/300?random=1" alt="360° View" class="rounded-lg shadow-md transition-transform duration-300 hover:scale-105">
        </div>
        <div class="mt-4 text-center">
            <p class="text-gray-600 dark:text-gray-300">Explore our product from all angles. Rotate to view details and features.</p>
        </div>
        <div class="mt-6 flex justify-center">
            <button class="bg-green-600 dark:bg-green-800 text-white font-semibold py-2 px-4 rounded shadow-md hover:bg-green-500 dark:hover:bg-green-700 transition duration-200">Buy Now</button>
        </div>
        <div class="mt-6 text-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-12 h-12 shadow-lg">
            <p class="mt-2 text-gray-600 dark:text-gray-300">John Doe - E-commerce Specialist</p>
        </div>
    </div>
</div>

Composant Visionneuse à 360°

Un composant de visionneuse 360° réactif conçu pour les tableaux de bord avec un style de conception 3D et la prise en charge du mode sombre.

Ouvrir l’aperçu

                <div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
    <h1 class="text-4xl font-bold text-center text-gray-800 dark:text-white mb-8">360° Viewer</h1>
    <div class="relative w-full max-w-lg bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
        <img src="https://picsum.photos/600/400" alt="360° View" class="w-full h-full object-cover rounded-lg">
        <div class="absolute inset-0 flex items-center justify-center">
            <div class="bg-white dark:bg-gray-850 p-4 rounded-lg shadow text-center">
                <h2 class="text-2xl font-semibold text-gray-800 dark:text-white">Explore Data</h2>
                <p class="text-gray-600 dark:text-gray-300">Interact with the 3D model to visualize data points.</p>
            </div>
        </div>
    </div>
    <div class="grid grid-cols-3 gap-4 mt-8 w-full max-w-lg">
        <div class="bg-indigo-500 dark:bg-indigo-700 text-white p-4 rounded-lg shadow-lg text-center">
            <h3 class="text-lg font-semibold">Data Point 1</h3>
            <p class="text-sm">Details about this data point.</p>
        </div>
        <div class="bg-orange-500 dark:bg-orange-700 text-white p-4 rounded-lg shadow-lg text-center">
            <h3 class="text-lg font-semibold">Data Point 2</h3>
            <p class="text-sm">Details about this data point.</p>
        </div>
        <div class="bg-teal-500 dark:bg-teal-700 text-white p-4 rounded-lg shadow-lg text-center">
            <h3 class="text-lg font-semibold">Data Point 3</h3>
            <p class="text-sm">Details about this data point.</p>
        </div>
    </div>
    <div class="mt-8 flex items-center justify-center">
        <a href="#" class="bg-indigo-500 dark:bg-indigo-700 text-white py-2 px-4 rounded-lg shadow hover:bg-indigo-600 dark:hover:bg-indigo-800">Explore More</a>
    </div>
</div>

Composant Visionneuse à 360°

Un composant simple de visualisation à 360° conçu avec un style brutaliste et des couleurs pastel, adapté aux interfaces de médias sociaux.

Ouvrir l’aperçu

                <div class="flex flex-col items-center justify-center bg-white dark:bg-gray-900 p-4 rounded-lg shadow-lg">
    <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">360° Viewer</h2>
    <div class="relative w-full max-w-md overflow-hidden rounded-lg border border-gray-300 dark:border-gray-700">
        <img src="https://picsum.photos/seed/picsum/800/400" alt="360 view" class="w-full h-auto transform transition-transform duration-500" />
        <div class="absolute inset-0 flex items-center justify-center">
            <p class="text-lg text-gray-600 dark:text-gray-400 bg-white dark:bg-gray-800 bg-opacity-75 px-4 py-2 rounded-lg shadow-md">Swipe to rotate</p>
        </div>
    </div>
    <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600">
        <div class="ml-3">
            <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Username</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Posted a new photo</p>
        </div>
    </div>
</div>

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.

Ouvrir l’aperçu

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="relative w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg backdrop-filter backdrop-blur-md bg-opacity-30 dark:bg-opacity-30">
        <div class="p-6">
            <h2 class="text-2xl font-semibold text-gray-800 dark:text-white">360° Viewer</h2>
            <p class="mt-2 text-gray-600 dark:text-gray-300">Explore the item from all angles with our 360° viewer. Use your mouse or finger to rotate.</p>
        </div>
        <div class="flex justify-center">
            <img src="https://picsum.photos/600/400?random=1" alt="360° View" class="w-full h-auto rounded-b-lg">
        </div>
        <div class="flex items-center justify-around p-4">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white dark:border-gray-800">
            <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white dark:border-gray-800">
        </div>
    </div>
</div>

Composant Visionneuse à 360°

Un composant de visionneuse à 360° simple et réactif conçu avec le style Glassmorphism et une palette de couleurs pastel pour la consommation de contenu de blog, y compris la prise en charge du mode sombre.

Ouvrir l’aperçu

                <div class="flex flex-col items-center justify-center bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg backdrop-blur-lg bg-opacity-50">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">360° Viewer</h2>
    <div class="relative w-full h-64 rounded-lg overflow-hidden">
        <img src="https://picsum.photos/500/300?random=1" alt="360° image viewer" class="object-cover w-full h-full rounded-lg" />
        <div class="absolute inset-0 flex items-center justify-center bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 rounded-lg"> 
            <span class="text-lg font-semibold text-gray-900 dark:text-gray-100">Interact with the image</span>
        </div>
    </div>
    <div class="mt-4">
        <h3 class="text-lg font-medium text-gray-700 dark:text-gray-300">User Profile</h3>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800" />
            <span class="ml-3 text-base text-gray-900 dark:text-gray-100">John Doe</span>
        </div>
    </div>
</div>

Visionneuse simple à 360° (Glassmorphism, niveaux de gris)

Un composant de visionneuse 360 simple et réactif avec un design de glassmorphisme en niveaux de gris, adapté au commerce électronique. Prend en charge le mode sombre.

Ouvrir l’aperçu

                ```html
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="relative w-full max-w-sm bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20">
    <!-- 360 Viewer Area (Placeholder) -->
    <div class="relative w-full h-64 bg-gray-300 dark:bg-gray-700 flex items-center justify-center">
      <span class="text-gray-600 dark:text-gray-400 text-sm">360° Viewer Placeholder</span>
      <!-- In a real implementation, a JavaScript library or iframe would go here -->
    </div>

    <!-- Product Info -->
    <div class="p-4">
      <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Product Name</h3>
      <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Brief product description goes here.</p>
      <div class="flex justify-between items-center">
        <span class="text-xl font-bold text-gray-900 dark:text-white">$99.99</span>
        <button class="px-4 py-2 bg-gray-700 text-white text-xs font-semibold rounded hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500">Add to Cart</button>
      </div>
    </div>
  </div>
</div>
```

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.

Ouvrir l’aperçu

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg max-w-4xl mx-auto">
    <h2 class="text-2xl font-bold text-white mb-4 text-center">360° Viewer</h2>
    <div class="relative w-full h-64 overflow-hidden rounded-lg shadow-lg">
        <img src="https://picsum.photos/600/400" alt="360 Product View" class="w-full h-full object-cover transition-transform transform hover:scale-105" />
    </div>
    <div class="mt-6 flex justify-center space-x-4">
        <button class="bg-purple-500 dark:bg-purple-700 text-white py-2 px-4 rounded-md hover:bg-purple-600 dark:hover:bg-purple-600">Rotate Left</button>
        <button class="bg-purple-500 dark:bg-purple-700 text-white py-2 px-4 rounded-md hover:bg-purple-600 dark:hover:bg-purple-600">Rotate Right</button>
    </div>
    <div class="mt-8 bg-gray-700 dark:bg-gray-800 p-4 rounded-md">
        <h3 class="text-lg font-semibold text-white">Product Details:</h3>
        <p class="text-gray-300 dark:text-gray-200 mt-2">Explore this item and check out its unique features and craftsmanship.</p>
    </div>
    <div class="mt-6 bg-gray-700 dark:bg-gray-800 p-4 rounded-md">
        <h3 class="text-lg font-semibold text-white">Team Members:</h3>
        <div class="flex space-x-4">
            <img src="https://randomuser.me/api/portraits/men/31.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-purple-500" />
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-purple-500" />
            <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-purple-500" />
        </div>
    </div>
</div>

Catégories