Componenti Visualizzatore a 360° 360_Viewer_Component
360_Viewer_Component

Un complesso componente visualizzatore a 360° con design glassmorphism, combinazione di colori in scala di grigi ed elementi interattivi, adatto per piattaforme educative. Include la reattività completa e il supporto per la modalità scura.
Anteprima

Codice HTML

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4 relative font-sans">

  <!-- Background gradient for glassmorphism effect -->
  <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-800 dark:to-gray-950 opacity-20 dark:opacity-30"></div>

  <div class="relative w-full max-w-6xl mx-auto rounded-xl shadow-2xl overflow-hidden backdrop-blur-xl bg-white/30 dark:bg-gray-800/30 border border-white/40 dark:border-gray-700/40 transform transition-all duration-300 ease-in-out sm:p-6 lg:p-8 flex flex-col lg:flex-row gap-6 lg:gap-8">

    <!-- Left Pane: 360 Viewer and Controls -->
    <div class="flex-1 flex flex-col gap-6">
      <!-- Viewer Area -->
      <div class="relative w-full aspect-video bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden shadow-inner border border-white/50 dark:border-gray-600/50 flex items-center justify-center">
        <img src="https://picsum.photos/1200/700?random=1" alt="360 Degree View" class="object-cover w-full h-full pointer-events-none select-none filter blur-sm opacity-70 absolute inset-0">
        <div class="absolute inset-0 flex items-center justify-center z-10">
          <!-- Actual 360 image Placeholder - would be replaced by JS library -->
          <img src="https://picsum.photos/1200/700?random=2" alt="Viewer content" class="w-full h-full object-contain mix-blend-multiply dark:mix-blend-screen opacity-90">
          <div class="absolute inset-0 flex items-center justify-center">
            <div class="w-16 h-16 rounded-full bg-black/30 dark:bg-white/30 backdrop-blur-sm flex items-center justify-center pointer-events-none">
              <svg class="w-8 h-8 text-white dark:text-black" 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 6h16M4 12h16m-7 6h7"></path>
              </svg>
            </div>
          </div>
        </div>

        <!-- Hotspots/Interaction points placeholder -->
        <div class="absolute top-1/4 left-1/4 w-4 h-4 rounded-full bg-white/70 dark:bg-gray-900/70 backdrop-blur-sm shadow-md cursor-pointer hover:scale-125 transition-transform duration-200" title="Hotspot 1"></div>
        <div class="absolute bottom-1/3 right-1/4 w-4 h-4 rounded-full bg-white/70 dark:bg-gray-900/70 backdrop-blur-sm shadow-md cursor-pointer hover:scale-125 transition-transform duration-200" title="Hotspot 2"></div>

        <div class="absolute bottom-4 right-4 flex items-center space-x-2">
          <button class="p-2 rounded-full bg-white/60 dark:bg-gray-700/60 backdrop-blur-md shadow-md text-gray-800 dark:text-gray-100 hover:bg-white/80 dark:hover:bg-gray-700/80 transition-colors" aria-label="Zoom In">
            <svg class="w-5 h-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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"></path></svg>
          </button>
          <button class="p-2 rounded-full bg-white/60 dark:bg-gray-700/60 backdrop-blur-md shadow-md text-gray-800 dark:text-gray-100 hover:bg-white/80 dark:hover:bg-gray-700/80 transition-colors" aria-label="Zoom Out">
            <svg class="w-5 h-5 rotate-90" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"></path></svg>
          </button>
        </div>
      </div>

      <!-- Playback Controls -->
      <div class="bg-white/40 dark:bg-gray-800/40 backdrop-blur-md p-4 rounded-lg shadow-md border border-white/50 dark:border-gray-700/50 flex flex-col sm:flex-row items-center justify-between gap-4">
        <div class="flex items-center space-x-4">
          <button class="p-3 rounded-full bg-gray-200/70 dark:bg-gray-700/70 text-gray-800 dark:text-gray-100 hover:bg-gray-300/80 dark:hover:bg-gray-600/80 transition-colors shadow-sm" aria-label="Previous"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></button>
          <button class="p-3 rounded-full bg-gray-200/70 dark:bg-gray-700/70 text-gray-800 dark:text-gray-100 hover:bg-gray-300/80 dark:hover:bg-gray-600/80 transition-colors shadow-sm" aria-label="Play"><svg class="w-6 h-6 ml-1" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg></button>
          <button class="p-3 rounded-full bg-gray-200/70 dark:bg-gray-700/70 text-gray-800 dark:text-gray-100 hover:bg-gray-300/80 dark:hover:bg-gray-600/80 transition-colors shadow-sm" aria-label="Next"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z"/></svg></button>
        </div>
        <div class="flex-1 min-w-0 flex items-center space-x-4 w-full sm:w-auto">
          <span class="text-gray-700 dark:text-gray-300 text-sm">0:34</span>
          <div class="relative flex-1 h-2 rounded-full bg-gray-300 dark:bg-gray-600 overflow-hidden group">
            <div class="h-full bg-gray-600 dark:bg-gray-300 rounded-full" style="width: 45%;"></div>
            <div class="absolute -top-1 left-[45%] -ml-2 w-4 h-4 bg-gray-800 dark:bg-gray-100 rounded-full shadow-lg group-hover:scale-110 transition-transform duration-200"></div>
          </div>
          <span class="text-gray-700 dark:text-gray-300 text-sm">2:10</span>
        </div>
        <div class="flex items-center space-x-2">
          <button class="p-2 rounded-full bg-gray-200/70 dark:bg-gray-700/70 text-gray-800 dark:text-gray-100 hover:bg-gray-300/80 dark:hover:bg-gray-600/80 transition-colors shadow-sm" aria-label="Toggle Fullscreen">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>
          </button>
        </div>
      </div>

      <!-- Description/Information -->
      <div class="bg-white/40 dark:bg-gray-800/40 backdrop-blur-md p-6 rounded-lg shadow-md border border-white/50 dark:border-gray-700/50">
        <h3 class="text-xl font-bold mb-3 text-gray-900 dark:text-gray-100">Understanding The Solar System</h3>
        <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
          Explore our solar system in a stunning 360-degree interactive tour. 
          Discover fascinating facts about each planet, from the fiery surface of Mercury to the icy rings of Saturn. Navigate through celestial bodies and learn about their unique characteristics and orbital paths. This module provides an immersive learning experience for all enthusiasts.
        </p>
        <div class="mt-4 flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400">
          <span><strong class="text-gray-800 dark:text-gray-200">Topic:</strong> Astronomy</span>
          <span><strong class="text-gray-800 dark:text-gray-200">Duration:</strong> 15 min</span>
          <span><strong class="text-gray-800 dark:text-gray-200">Views:</strong> 1.2k</span>
        </div>
      </div>
    </div>

    <!-- Right Pane: Timeline/Related Content -->
    <div class="w-full lg:w-80 flex-shrink-0 flex flex-col gap-6">

      <!-- Timeline/Navigation -->
      <div class="bg-white/40 dark:bg-gray-800/40 backdrop-blur-md p-6 rounded-lg shadow-md border border-white/50 dark:border-gray-700/50 flex-grow min-h-[200px] lg:min-h-0">
        <h3 class="text-lg font-bold mb-4 text-gray-900 dark:text-gray-100">Planetary Tour Timeline</h3>
        <ul class="space-y-4">
          <li class="flex items-start group relative">
            <div class="flex-shrink-0 w-2 h-2 rounded-full bg-gray-500 dark:bg-gray-400 ring-2 ring-white dark:ring-gray-800 transition-all group-hover:bg-gray-800 dark:group-hover:bg-gray-100 mt-1.5"></div>
            <div class="absolute left-1 top-2.5 bottom-0 w-0.5 bg-gray-300 dark:bg-gray-600 group-last-of-type:hidden"></div>
            <div class="ml-4 text-gray-700 dark:text-gray-300">
              <p class="font-semibold text-gray-800 dark:text-gray-200 leading-tight">Introduction: Welcome to the Cosmos</p>
              <p class="text-sm mt-0.5 text-gray-600 dark:text-gray-400">0:00 - 0:30</p>
            </div>
          </li>
          <li class="flex items-start group relative">
            <div class="flex-shrink-0 w-2 h-2 rounded-full bg-gray-500 dark:bg-gray-400 ring-2 ring-white dark:ring-gray-800 transition-all group-hover:bg-gray-800 dark:group-hover:bg-gray-100 mt-1.5"></div>
            <div class="absolute left-1 top-2.5 bottom-0 w-0.5 bg-gray-300 dark:bg-gray-600 group-last-of-type:hidden"></div>
            <div class="ml-4 text-gray-700 dark:text-gray-300">
              <p class="font-semibold text-gray-800 dark:text-gray-200 leading-tight">Mercury & Venus: Inner Orbit</p>
              <p class="text-sm mt-0.5 text-gray-600 dark:text-gray-400">0:31 - 1:05</p>
            </div>
          </li>
          <li class="flex items-start group relative">
            <div class="flex-shrink-0 w-2 h-2 rounded-full bg-gray-800 dark:bg-gray-100 ring-2 ring-white dark:ring-gray-800 shadow-lg mt-1.5"></div>
            <div class="absolute left-1 top-2.5 bottom-0 w-0.5 bg-gray-300 dark:bg-gray-600 group-last-of-type:hidden"></div>
            <div class="ml-4 text-gray-700 dark:text-gray-300">
              <p class="font-semibold text-gray-900 dark:text-gray-50 leading-tight">Earth & Mars: Terrestrial Neighbors</p>
              <p class="text-sm mt-0.5 font-bold text-gray-800 dark:text-gray-200">1:06 - 2:00 (Current)</p>
            </div>
          </li>
          <li class="flex items-start group relative">
            <div class="flex-shrink-0 w-2 h-2 rounded-full bg-gray-500 dark:bg-gray-400 ring-2 ring-white dark:ring-gray-800 transition-all group-hover:bg-gray-800 dark:group-hover:bg-gray-100 mt-1.5"></div>
            <div class="absolute left-1 top-2.5 bottom-0 w-0.5 bg-gray-300 dark:bg-gray-600 group-last-of-type:hidden"></div>
            <div class="ml-4 text-gray-700 dark:text-gray-300">
              <p class="font-semibold text-gray-800 dark:text-gray-200 leading-tight">Asteroid Belt & Jupiter: Gas Giant</p>
              <p class="text-sm mt-0.5 text-gray-600 dark:text-gray-400">2:01 - 3:15</p>
            </div>
          </li>
          <li class="flex items-start group relative">
            <div class="flex-shrink-0 w-2 h-2 rounded-full bg-gray-500 dark:bg-gray-400 ring-2 ring-white dark:ring-gray-800 transition-all group-hover:bg-gray-800 dark:group-hover:bg-gray-100 mt-1.5"></div>
            <div class="absolute left-1 top-2.5 bottom-0 w-0.5 bg-gray-300 dark:bg-gray-600 group-last-of-type:hidden"></div>
            <div class="ml-4 text-gray-700 dark:text-gray-300">
              <p class="font-semibold text-gray-800 dark:text-gray-200 leading-tight">Saturn, Uranus & Neptune: Outer Giants</p>
              <p class="text-sm mt-0.5 text-gray-600 dark:text-gray-400">3:16 - 4:40</p>
            </div>
          </li>
           <li class="flex items-start group relative">
            <div class="flex-shrink-0 w-2 h-2 rounded-full bg-gray-500 dark:bg-gray-400 ring-2 ring-white dark:ring-gray-800 transition-all group-hover:bg-gray-800 dark:group-hover:bg-gray-100 mt-1.5"></div>
            <div class="absolute left-1 top-2.5 bottom-0 w-0.5 bg-gray-300 dark:bg-gray-600 group-last-of-type:hidden"></div>
            <div class="ml-4 text-gray-700 dark:text-gray-300">
              <p class="font-semibold text-gray-800 dark:text-gray-200 leading-tight">Beyond Neptune: Kuiper Belt & Oort Cloud</p>
              <p class="text-sm mt-0.5 text-gray-600 dark:text-gray-400">4:41 - 5:30</p>
            </div>
          </li>
        </ul>
      </div>

      <!-- Related Modules -->
      <div class="bg-white/40 dark:bg-gray-800/40 backdrop-blur-md p-6 rounded-lg shadow-md border border-white/50 dark:border-gray-700/50">
        <h3 class="text-lg font-bold mb-4 text-gray-900 dark:text-gray-100">Related Modules</h3>
        <div class="space-y-4">
          <div class="flex items-center space-x-3 group cursor-pointer">
            <div class="w-16 h-10 flex-shrink-0 overflow-hidden rounded-md bg-gray-300 dark:bg-gray-600">
              <img src="https://picsum.photos/100/60?random=3" alt="Module thumbnail" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
            </div>
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors">The Life Cycle of Stars</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Advanced Astronomy</p>
            </div>
          </div>
          <div class="flex items-center space-x-3 group cursor-pointer">
            <div class="w-16 h-10 flex-shrink-0 overflow-hidden rounded-md bg-gray-300 dark:bg-gray-600">
              <img src="https://picsum.photos/100/60?random=4" alt="Module thumbnail" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
            </div>
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors">Cosmic Distances & Galaxies</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Space Engineering</p>
            </div>
          </div>
          <div class="flex items-center space-x-3 group cursor-pointer">
            <div class="w-16 h-10 flex-shrink-0 overflow-hidden rounded-md bg-gray-300 dark:bg-gray-600">
              <img src="https://picsum.photos/100/60?random=5" alt="Module thumbnail" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200">
            </div>
            <div>
              <p class="font-semibold text-gray-800 dark:text-gray-200 group-hover:text-gray-600 dark:group-hover:text-gray-400 transition-colors">History of Space Exploration</p>
              <p class="text-sm text-gray-600 dark:text-gray-400">Historical Context</p>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
Componenti correlati

Componente visualizzatore a 360°

Un componente visualizzatore reattivo a 360 gradi progettato per l'e-commerce, con supporto per la modalità scura. Lo stile è retrò/vintage con una combinazione di colori pastello. Utilizza solo HTML e Tailwind CSS.
Aperto
Componente visualizzatore 360

Un componente visualizzatore a 360 gradi con design Glassmorphism, combinazione di colori monocromatici e complessità moderata. È progettato per scopi di blog/contenuti, è reattivo e supporta la modalità oscura utilizzando Tailwind CSS. Non è incluso alcun JavaScript, solo HTML con le classi Tailwind. Utilizza picsum.photos per le immagini.
Aperto
Componente visualizzatore a 360°

Un componente visualizzatore a 360° reattivo progettato per dashboard con uno stile di progettazione 3D e supporto per la modalità scura.
Aperto