360_Viewer_Component
glassmorphism 디자인, 회색조 색 구성표 및 대화형 요소가 있는 복잡한 360° 뷰어 구성 요소로 교육 플랫폼에 적합합니다. 완전한 응답성과 다크 모드 지원이 포함됩니다.
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>관련 구성 요소
360_Viewer_Component_Brutalism_Grayscale
대시보드 애플리케이션을 위해 브루탈리즘 그레이스케일 미학으로 설계된 복잡한 360° 뷰어 구성 요소입니다. 원시적이고 대담한 대비와 인터랙티브 요소를 특징으로 하며, 다크 모드 지원으로 완벽하게 반응합니다.
360_viewer_component
교육용 플랫폼용으로 설계된 단순하고 미니멀한 360 뷰어 구성 요소로, 밝은 네온/일렉트릭 색상과 강력한 타이포그래피를 특징으로 하며 완전한 응답성과 다크 모드를 지원합니다.