360_Viewer_Component_Brutalism_Grayscale
Un composant complexe de visualisation à 360° conçu avec une esthétique brutaliste en niveaux de gris pour les applications de tableau de bord. Présente des contrastes bruts et audacieux et des éléments interactifs, entièrement réactifs avec prise en charge du mode sombre.
HTML Code
<div class="p-4 sm:p-6 md:p-8 min-h-screen bg-neutral-100 dark:bg-neutral-950 font-mono text-neutral-900 dark:text-neutral-100 transition-colors duration-300">
<!-- Component Wrapper -->
<div class="max-w-7xl mx-auto border-4 border-neutral-900 dark:border-neutral-100 p-4 sm:p-6 lg:p-8 bg-neutral-200 dark:bg-neutral-900 shadow-[8px_8px_0px_2px_rgba(0,0,0,1)] dark:shadow-[8px_8px_0px_2px_rgba(255,255,255,1)]">
<!-- Header -->
<header class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-6 sm:mb-8 pb-4 border-b-4 border-neutral-900 dark:border-neutral-100">
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold uppercase leading-none mb-2 sm:mb-0">360° Object <span class="hidden sm:inline">Viewer</span></h1>
<div class="flex space-x-2">
<button class="px-4 py-2 text-sm sm:text-base font-bold uppercase border-2 border-neutral-900 dark:border-neutral-100 bg-neutral-300 dark:bg-neutral-700 hover:bg-neutral-400 dark:hover:bg-neutral-600 transition-colors duration-200 shadow-md">Live Feed</button>
<button class="px-4 py-2 text-sm sm:text-base font-bold uppercase border-2 border-neutral-900 dark:border-neutral-100 bg-neutral-300 dark:bg-neutral-700 hover:bg-neutral-400 dark:hover:bg-neutral-600 transition-colors duration-200 shadow-md">Settings</button>
</div>
</header>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 sm:gap-8">
<!-- Main Viewer Area -->
<section class="lg:col-span-2 relative aspect-video bg-neutral-300 dark:bg-neutral-800 border-4 border-neutral-900 dark:border-neutral-100 overflow-hidden shadow-lg p-2 sm:p-4 md:p-6">
<div class="absolute inset-0 flex items-center justify-center p-4">
<img src="https://picsum.photos/1200/800?grayscale&random=1" alt="360 object view placeholder" class="w-full h-full object-contain filter grayscale border-2 border-neutral-600 dark:border-neutral-400">
</div>
<!-- Overlay Controls -->
<div class="absolute bottom-0 left-0 right-0 p-2 sm:p-4 bg-neutral-900 dark:bg-neutral-100 bg-opacity-70 dark:bg-opacity-70 text-neutral-100 dark:text-neutral-900 flex justify-between items-center">
<div class="flex space-x-2 sm:space-x-4">
<button class="p-2 border-2 border-neutral-100 dark:border-neutral-900 hover:bg-neutral-700 dark:hover:bg-neutral-300 transition-colors duration-200 shadow-md" aria-label="Rotate Left">
<svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M11 2C6.03 2 2 6.03 2 11h3c0-3.87 3.13-7 7-7s7 3.13 7 7c0 1.93-.78 3.68-2.05 4.95L15.36 12H19v7h-7l2.84-2.84C10.71 18.29 8.91 19 7 19c-3.87 0-7-3.13-7-7c0-3.87 3.13-7 7-7zm-4 4h2v5h5v2h-7zm6 3l-3 3h3zm-3 8h-2v-5h-5v-2h7z" />
</svg>
</button>
<button class="p-2 border-2 border-neutral-100 dark:border-neutral-900 hover:bg-neutral-700 dark:hover:bg-neutral-300 transition-colors duration-200 shadow-md" aria-label="Rotate Right">
<svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M13 2c4.97 0 9 4.03 9 9h-3c0-3.87-3.13-7-7-7s-7 3.13-7 7c0 1.93.78 3.68 2.05 4.95L8.64 12H5v7h7l-2.84-2.84C13.29 18.29 15.09 19 17 19c3.87 0 7-3.13 7-7c0-3.87-3.13-7-7-7zm4 4h-2v5h-5v2h7zm-6 3l3 3h-3zm3 8h2v-5h5v-2h-7z" />
</svg>
</button>
</div>
<div class="flex space-x-2 sm:space-x-4">
<button class="p-2 border-2 border-neutral-100 dark:border-neutral-900 hover:bg-neutral-700 dark:hover:bg-neutral-300 transition-colors duration-200 shadow-md" aria-label="Toggle Fullscreen">
<svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 24 24">
<path d="M5 5h5v2H7v3H5zm14 0h-5v2h3v3h2zm-5 14h5v-2h-3v-3h-2zm-7 0H5v-2h3v-3h2z" />
</svg>
</button>
</div>
</div>
</section>
<!-- Side Panel: Stats & Controls -->
<aside class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-6 sm:gap-8">
<!-- Object Details -->
<section class="p-4 border-4 border-neutral-900 dark:border-neutral-100 bg-neutral-300 dark:bg-neutral-800 shadow-lg">
<h2 class="text-xl sm:text-2xl font-extrabold uppercase mb-4 pb-2 border-b-2 border-neutral-900 dark:border-neutral-100">Object Info</h2>
<dl class="text-sm sm:text-base">
<div class="flex justify-between border-b border-neutral-500 py-1">
<dt class="font-bold">ID:</dt>
<dd>OBJ-734X</dd>
</div>
<div class="flex justify-between border-b border-neutral-500 py-1">
<dt class="font-bold">Type:</dt>
<dd>Heavy Unit</dd>
</div>
<div class="flex justify-between border-b border-neutral-500 py-1">
<dt class="font-bold">Status:</dt>
<dd class="text-green-700 dark:text-green-400 font-bold">ONLINE</dd>
</div>
<div class="flex justify-between py-1">
<dt class="font-bold">Last Scan:</dt>
<dd>2023-10-27 14:30 UTC</dd>
</div>
</dl>
</section>
<!-- Control Panel -->
<section class="p-4 border-4 border-neutral-900 dark:border-neutral-100 bg-neutral-300 dark:bg-neutral-800 shadow-lg">
<h2 class="text-xl sm:text-2xl font-extrabold uppercase mb-4 pb-2 border-b-2 border-neutral-900 dark:border-neutral-100">Actions</h2>
<div class="grid grid-cols-1 gap-4">
<button class="w-full px-4 py-3 text-base sm:text-lg font-bold uppercase border-2 border-neutral-900 dark:border-neutral-100 bg-neutral-400 dark:bg-neutral-600 hover:bg-neutral-500 dark:hover:bg-neutral-500 transition-colors duration-200 shadow-md">Initiate Scan</button>
<button class="w-full px-4 py-3 text-base sm:text-lg font-bold uppercase border-2 border-neutral-900 dark:border-neutral-100 bg-neutral-400 dark:bg-neutral-600 hover:bg-negative-700 transition-colors duration-200 shadow-md">Deactivate Unit</button>
<select class="w-full px-4 py-3 text-base sm:text-lg font-bold uppercase border-2 border-neutral-900 dark:border-neutral-100 bg-neutral-400 dark:bg-neutral-600 appearance-none shadow-md">
<option>Select View Mode</option>
<option>Wireframe</option>
<option>Thermal</option>
<option>X-Ray</option>
</select>
</div>
</section>
</aside>
</div>
<!-- Activity Log / Footer -->
<section class="mt-8 p-4 border-4 border-neutral-900 dark:border-neutral-100 bg-neutral-300 dark:bg-neutral-800 shadow-lg">
<h2 class="text-xl sm:text-2xl font-extrabold uppercase mb-4 pb-2 border-b-2 border-neutral-900 dark:border-neutral-100">Recent Activity</h2>
<div class="space-y-2 text-sm sm:text-base max-h-48 overflow-y-auto pr-2">
<p><span class="text-neutral-700 dark:text-neutral-300">[14:35:01]</span> <span class="font-bold">SYSTEM:</span> User 'JOHN.DOE' requested full scan.</p>
<p><span class="text-neutral-700 dark:text-neutral-300">[14:34:20]</span> <span class="font-bold">ALERT:</span> Environmental anomaly detected. Severity LOW.</p>
<p><span class="text-neutral-700 dark:text-neutral-300">[14:30:00]</span> <span class="font-bold">REPORT:</span> Scan 'OBJ-734X' completed. No critical deviations.</p>
<p><span class="text-neutral-700 dark:text-neutral-300">[14:29:15]</span> <span class="font-bold">SYSTEM:</span> Object 'OBJ-734X' power cycle initiated.</p>
<p><span class="text-neutral-700 dark:text-neutral-300">[14:28:50]</span> <span class="font-bold">USER:</span> 'JANE.SMITH' logged in from Console 03.</p>
<p><span class="text-neutral-700 dark:text-neutral-300">[14:27:05]</span> <span class="font-bold">SYSTEM:</span> Module 'ALPHA-01' diagnostics complete. OK.</p>
</div>
</section>
<!-- Dark Mode Toggle (Conceptual - outside core component) -->
<div class="absolute top-4 right-4">
<button class="px-3 py-2 text-sm font-bold uppercase border-2 border-neutral-900 dark:border-neutral-100 bg-neutral-300 dark:bg-neutral-700 hover:bg-neutral-400 dark:hover:bg-neutral-600 transition-colors duration-200 shadow-md" onclick="document.documentElement.classList.toggle('dark')">Toggle Dark Mode</button>
</div>
</div>
</div>Composants associés
Composant Visionneuse 360
Composant de visualisation à 360 degrés avec prise en charge du mode sombre.
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.