360_Viewer_Component
부동산 플랫폼을 위한 복잡한 360도 부동산 뷰어 구성 요소로, 고정 공간/개발자 디자인, 레트로/빈티지 색상 팔레트 및 다크 모드 지원으로 완전한 응답성을 제공합니다.
HTML 코드
<div class="font-mono bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200 p-4 sm:p-6 lg:p-8 rounded-lg shadow-xl max-w-6xl mx-auto border border-gray-300 dark:border-gray-700">
<!-- Header: Component Title and Status -->
<div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 border-b border-gray-400 dark:border-gray-600 pb-4">
<h2 class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900 dark:text-gray-100 uppercase tracking-wide mb-2 sm:mb-0">
<span class="text-cyan-600 dark:text-cyan-400">//</span> PROPERTY_VIEWER<span class="animate-pulse text-red-500">_LIVE</span>
</h2>
<div class="flex items-center text-sm sm:text-base">
<span class="mr-2 text-green-600 dark:text-green-400">STATUS: OK</span>
<span class="text-yellow-600 dark:text-yellow-400">[BUILD: 2023.10.26]</span>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
<!-- Main Viewer Area -->
<div class="md:col-span-2 bg-gray-200 dark:bg-gray-800 rounded-lg p-3 sm:p-4 border border-gray-300 dark:border-gray-700 shadow-inner overflow-hidden relative aspect-video">
<div class="w-full h-full bg-cover bg-center rounded-md" style="background-image: url('https://picsum.photos/1000/600?random=1&blur=2');">
<div class="h-full w-full flex items-center justify-center bg-black bg-opacity-20">
<span class="text-white text-3xl sm:text-4xl lg:text-5xl font-extrabold tracking-widest uppercase">VIEW_360°_ACTIVE</span>
</div>
</div>
<!-- Interactive Controls Overlay -->
<div class="absolute bottom-3 left-3 right-3 p-3 sm:p-4 bg-gray-800 bg-opacity-80 dark:bg-gray-900 dark:bg-opacity-80 rounded-lg flex flex-wrap justify-center sm:justify-between items-center space-x-2 sm:space-x-4">
<div class="flex space-x-2">
<button class="px-3 py-1 bg-cyan-600 hover:bg-cyan-700 text-white text-xs sm:text-sm rounded transition duration-200 ease-in-out border border-cyan-700 dark:border-cyan-500 shadow-md transform hover:scale-105">
<p class="hidden sm:inline">//</p> ZOOM<span class="hidden lg:inline">_IN</span>
</button>
<button class="px-3 py-1 bg-cyan-600 hover:bg-cyan-700 text-white text-xs sm:text-sm rounded transition duration-200 ease-in-out border border-cyan-700 dark:border-cyan-500 shadow-md transform hover:scale-105">
<p class="hidden sm:inline">//</p> ZOOM<span class="hidden lg:inline">_OUT</span>
</button>
</div>
<div class="flex space-x-2 mt-2 sm:mt-0">
<button class="px-3 py-1 bg-indigo-600 hover:bg-indigo-700 text-white text-xs sm:text-sm rounded transition duration-200 ease-in-out border border-indigo-700 dark:border-indigo-500 shadow-md transform hover:scale-105">
<p class="hidden sm:inline">//</p> FLOOR<span class="hidden lg:inline">_PLAN</span>
</button>
<button class="px-3 py-1 bg-indigo-600 hover:bg-indigo-700 text-white text-xs sm:text-sm rounded transition duration-200 ease-in-out border border-indigo-700 dark:border-indigo-500 shadow-md transform hover:scale-105">
<p class="hidden sm:inline">//</p> NEXT<span class="hidden lg:inline">_ROOM</span>
</button>
</div>
<input type="range" min="0" max="100" value="50" class="w-24 sm:w-32 lg:w-48 h-2 bg-gray-600 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer range-lg transition duration-200 ease-in-out mt-2 sm:mt-0">
</div>
</div>
<!-- Sidebar / Property Details & Thumbnails -->
<div class="md:col-span-1 flex flex-col space-y-6">
<!-- Property Details -->
<div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 lg:p-5 border border-gray-300 dark:border-gray-700 shadow-lg">
<h3 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100 mb-3 uppercase tracking-wide">
<span class="text-purple-600 dark:text-purple-400">//</span> PROPERTY_DETAILS
</h3>
<p class="text-sm mb-2"><span class="text-yellow-600 dark:text-yellow-400">ID:</span> <span class="tracking-wide">#4815162342</span></p>
<p class="text-sm mb-2"><span class="text-yellow-600 dark:text-yellow-400">TYPE:</span> <span class="tracking-wide">CONDO_UNIT</span></p>
<p class="text-sm mb-2"><span class="text-yellow-600 dark:text-yellow-400">SIZE:</span> <span class="tracking-wide">1200_SQFT</span></p>
<p class="text-sm mb-2"><span class="text-yellow-600 dark:text-yellow-400">BEDS:</span> <span class="tracking-wide">3</span></p>
<p class="text-sm mb-2"><span class="text-yellow-600 dark:text-yellow-400">BATHS:</span> <span class="tracking-wide">2.5</span></p>
<p class="text-sm"><span class="text-yellow-600 dark:text-yellow-400">PRICE:</span> <span class="tracking-wide">$_349,000</span></p>
</div>
<!-- Thumbnail Navigation -->
<div class="bg-gray-200 dark:bg-gray-800 rounded-lg p-4 lg:p-5 border border-gray-300 dark:border-gray-700 shadow-lg">
<h3 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-gray-100 mb-3 uppercase tracking-wide">
<span class="text-fuchsia-600 dark:text-fuchsia-400">//</span> ROOM_SELECT
</h3>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-3 gap-3">
<div class="group relative cursor-pointer overflow-hidden rounded-md border-2 border-transparent hover:border-cyan-500 transition duration-200 ease-in-out transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=2" alt="Thumbnail 1" class="w-full h-24 object-cover rounded-md">
<div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
<span class="text-white text-sm font-semibold">LIVING_RM</span>
</div>
</div>
<div class="group relative cursor-pointer overflow-hidden rounded-md border-2 border-transparent hover:border-cyan-500 transition duration-200 ease-in-out transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=3" alt="Thumbnail 2" class="w-full h-24 object-cover rounded-md">
<div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
<span class="text-white text-sm font-semibold">KITCHEN</span>
</div>
</div>
<div class="group relative cursor-pointer overflow-hidden rounded-md border-2 border-transparent border-cyan-500 shadow-md transform scale-105">
<img src="https://picsum.photos/300/200?random=4" alt="Thumbnail 3" class="w-full h-24 object-cover rounded-md">
<div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
<span class="text-white text-sm font-semibold">MASTER_BD</span>
</div>
</div>
<div class="group relative cursor-pointer overflow-hidden rounded-md border-2 border-transparent hover:border-cyan-500 transition duration-200 ease-in-out transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=5" alt="Thumbnail 4" class="w-full h-24 object-cover rounded-md">
<div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
<span class="text-white text-sm font-semibold">BATHROOM</span>
</div>
</div>
<div class="group relative cursor-pointer overflow-hidden rounded-md border-2 border-transparent hover:border-cyan-500 transition duration-200 ease-in-out transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=6" alt="Thumbnail 5" class="w-full h-24 object-cover rounded-md">
<div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
<span class="text-white text-sm font-semibold">BALCONY</span>
</div>
</div>
<div class="group relative cursor-pointer overflow-hidden rounded-md border-2 border-transparent hover:border-cyan-500 transition duration-200 ease-in-out transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=7" alt="Thumbnail 6" class="w-full h-24 object-cover rounded-md">
<div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
<span class="text-white text-sm font-semibold">DINING_RM</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Footer: Agent Info and System Message -->
<div class="mt-6 pt-4 border-t border-gray-400 dark:border-gray-600 flex flex-col sm:flex-row justify-between items-start sm:items-center">
<div class="flex items-center mb-4 sm:mb-0">
<img src="https://randomuser.me/api/portraits/men/78.jpg" alt="Agent Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-green-500">
<div>
<p class="text-sm text-gray-900 dark:text-gray-100"><span class="text-green-600 dark:text-green-400">AGENT:</span> <span class="font-bold">JOHN_DOE</span></p>
<p class="text-xs text-gray-600 dark:text-gray-400"><span class="text-green-600 dark:text-green-400">CONTACT:</span> +1.555.VIEW.360</p>
</div>
</div>
<p class="text-xs text-gray-500 dark:text-gray-400">SYSTEM: Ready. Awaiting user input. <span class="animate-pulse text-gray-600 dark:text-gray-300">_</span></p>
</div>
</div>관련 구성 요소
360_Viewer_Component
비즈니스/기업 웹 사이트를 위한 마이크로 인터랙션에 초점을 맞춘 간단하고 반응이 빠른 360° 뷰어 구성 요소로, 어스 톤과 다크 모드를 지원합니다. 인터랙티브 360 뷰어를 시뮬레이션하도록 설계되어 사용자가 '클릭 앤 드래그'하여 이미지를 회전할 수 있습니다.
360_Viewer_Component_Watercolor_Corporate_Blues
수채화/예술적 디자인 스타일과 기업 블루 색상 구성표가 있는 복잡한 360° 뷰어 구성 요소로, 예약 및 예약 시스템에 특별히 적합합니다. 여러 대화형 요소를 특징으로 하며 다크 모드 지원으로 완벽하게 반응합니다.