360_Viewer_Component
Un composant complexe de visualisation de propriétés à 360 degrés pour les plateformes immobilières, avec un design monospace/développeur, une palette de couleurs rétro/vintage et une réactivité totale avec prise en charge du mode sombre.
HTML Code
<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>Composants associés
Composant Visionneuse à 360°
Un composant de visionneuse 360° réactif conçu dans un style 3D avec prise en charge du thème sombre, à l’aide d’images fictives de picsum.photos.
360_Viewer_Component_Watercolor_Corporate_Blues
Un composant complexe de visualisation à 360° avec un style de conception aquarelle/artistique et une palette de couleurs bleu d’entreprise, spécialement conçu pour les systèmes de réservation et les systèmes de réservation. Il comporte plusieurs éléments interactifs et est entièrement réactif avec la prise en charge du mode sombre.
Visionneuse rétro à 360°
Composant de visionneuse rétro à 360 ° avec effets réactifs et prise en charge du thème sombre à l’aide de Tailwind CSS. Utilise des images de substitution de picsum.photos.