Componente Visor de archivos
Un componente de visor de archivos complejo y receptivo con una interfaz de usuario de modo oscuro y tonos tierra, diseñado para aplicaciones deportivas y de fitness. Secciones de lista de archivos, vista previa y detalles de características.
Código HTML
<div class="dark:bg-stone-900 bg-stone-800 text-stone-300 min-h-screen p-4 sm:p-6 lg:p-8 font-sans antialiased">
<!-- Main Grid Container -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 lg:gap-6">
<!-- Left Column: File List -->
<div class="lg:col-span-1 bg-stone-900 dark:bg-stone-950 rounded-lg shadow-xl overflow-hidden">
<div class="p-4 sm:p-5 border-b border-stone-700 dark:border-stone-800 flex items-center justify-between">
<h2 class="text-lg sm:text-xl font-semibold text-stone-200">Documents & Media</h2>
<button class="p-2 rounded-full border border-stone-600 text-stone-400 hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-1 1H4a1 1 0 01-1-1V3zm0 7a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zm10 0a1 1 0 011-1h3a1 1 0 011 1v6a1 1 0 01-1 1h-3a1 1 0 01-1-1v-6z" clip-rule="evenodd" />
</svg>
</button>
</div>
<div class="p-4 sm:p-5 space-y-3">
<!-- Search Bar -->
<div class="relative">
<input type="text" placeholder="Search files..." class="w-full p-2 pl-10 rounded-md bg-stone-800 dark:bg-stone-900 border border-stone-700 dark:border-stone-800 focus:outline-none focus:ring-1 focus:ring-amber-600 text-stone-200 placeholder-stone-400">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-stone-500" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
</svg>
</div>
</div>
<!-- File Categories -->
<div class="space-y-2">
<a href="#" class="flex items-center justify-between p-3 rounded-md bg-stone-700 dark:bg-stone-800 hover:bg-stone-600 dark:hover:bg-stone-700 transition-colors duration-200">
<span class="text-stone-100 font-medium flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-orange-400" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.414L14.586 5A2 2 0 0115 5.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd" /></svg> Documents</span>
<span class="text-sm text-stone-400">124</span>
</a>
<a href="#" class="flex items-center justify-between p-3 rounded-md hover:bg-stone-700 dark:hover:bg-stone-800 transition-colors duration-200">
<span class="text-stone-300 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-green-400" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 7a2 2 0 012-2h8a2 2 0 012 2v6a2 2 0 01-2 2H6a2 2 0 01-2-2V7zm5 0a1 1 0 011-1h1a1 1 0 110 2H9a1 1 0 01-1-1zm0 4a1 1 0 011-1h1a1 1 0 110 2H9a1 1 0 01-1-1z" clip-rule="evenodd" /></svg> Videos</span>
<span class="text-sm text-stone-400">32</span>
</a>
<a href="#" class="flex items-center justify-between p-3 rounded-md hover:bg-stone-700 dark:hover:bg-stone-800 transition-colors duration-200">
<span class="text-stone-300 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-blue-400" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd" /></svg> Images</span>
<span class="text-sm text-stone-400">210</span>
</a>
<a href="#" class="flex items-center justify-between p-3 rounded-md hover:bg-stone-700 dark:hover:bg-stone-800 transition-colors duration-200">
<span class="text-stone-300 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-fuchsia-400" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm4 0a1 1 0 012 0v6a1 1 0 11-2 0V8z" clip-rule="evenodd" /></svg> Audio</span>
<span class="text-sm text-stone-400">45</span>
</a>
</div>
</div>
</div>
<!-- Right Column: File Preview & Details -->
<div class="lg:col-span-2 space-y-4 lg:space-y-6">
<!-- Top Section: Preview -->
<div class="bg-stone-900 dark:bg-stone-950 rounded-lg shadow-xl overflow-hidden">
<div class="p-4 sm:p-5 border-b border-stone-700 dark:border-stone-800 flex items-center justify-between">
<h2 class="text-lg sm:text-xl font-semibold text-stone-200">Preview</h2>
<div class="flex space-x-2">
<button class="p-2 rounded-full border border-stone-600 text-stone-400 hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z" clip-rule="evenodd" />
</svg>
</button>
<button class="p-2 rounded-full border border-stone-600 text-stone-400 hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
<div class="p-4 sm:p-5 aspect-w-16 aspect-h-9 flex items-center justify-center bg-stone-800 dark:bg-stone-900 overflow-hidden">
<!-- Placeholder for file preview -->
<img src="https://picsum.photos/1280/720?random=1" alt="File preview" class="object-contain max-h-full max-w-full rounded-md shadow-md">
</div>
</div>
<!-- Bottom Section: File Details -->
<div class="bg-stone-900 dark:bg-stone-950 rounded-lg shadow-xl overflow-hidden">
<div class="p-4 sm:p-5 border-b border-stone-700 dark:border-stone-800">
<h2 class="text-lg sm:text-xl font-semibold text-stone-200">File Details</h2>
</div>
<div class="p-4 sm:p-5 grid grid-cols-1 md:grid-cols-2 gap-4 text-stone-300">
<div>
<p class="text-stone-400 text-sm mb-1">File Name</p>
<p class="text-stone-200 font-medium text-lg">Fitness-Plan-2023-Q3.pdf</p>
</div>
<div>
<p class="text-stone-400 text-sm mb-1">Category</p>
<p class="text-stone-200 font-medium text-lg">Documents</p>
</div>
<div>
<p class="text-stone-400 text-sm mb-1">Size</p>
<p class="text-stone-200 font-medium text-lg">2.4 MB</p>
</div>
<div>
<p class="text-stone-400 text-sm mb-1">Last Modified</p>
<p class="text-stone-200 font-medium text-lg">2023-09-15 10:30 AM</p>
</div>
<div class="md:col-span-2">
<p class="text-stone-400 text-sm mb-1">Description</p>
<p class="text-stone-300 leading-relaxed text-sm">This document contains the comprehensive fitness plan for the third quarter of 2023, including workout routines, nutrition guidelines, and progress tracking templates for peak athletic performance.</p>
</div>
<!-- Shared With -->
<div class="md:col-span-2 mt-4">
<h3 class="text-md font-semibold text-stone-200 mb-2">Shared With</h3>
<div class="flex flex-wrap gap-3">
<div class="flex items-center space-x-2 bg-stone-800 dark:bg-stone-900 py-1.5 px-3 rounded-full border border-stone-700">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar of Athlete" class="w-6 h-6 rounded-full object-cover">
<span class="text-stone-300 text-sm">John Doe (Athlete)</span>
</div>
<div class="flex items-center space-x-2 bg-stone-800 dark:bg-stone-900 py-1.5 px-3 rounded-full border border-stone-700">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar of Coach" class="w-6 h-6 rounded-full object-cover">
<span class="text-stone-300 text-sm">Jane Smith (Coach)</span>
</div>
<div class="flex items-center space-x-2 bg-stone-800 dark:bg-stone-900 py-1.5 px-3 rounded-full border border-stone-700">
<img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Avatar of Team Manager" class="w-6 h-6 rounded-full object-cover">
<span class="text-stone-300 text-sm">Mike Brown (Manager)</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componente Visor de archivos
Un componente de visor de archivos con diseño 3D, efectos responsivos y compatibilidad con el modo oscuro.
Componente Visor de archivos
Un componente de visor de archivos interactivo con estilo de Material Design y compatibilidad con el modo oscuro mediante Tailwind CSS. El componente muestra una lista de archivos con iconos, nombres, tamaños y fechas de modificación.
Componente Visor de archivos
Un componente de visor de archivos responsivo diseñado con los principios de Material Design utilizando Tailwind CSS, con soporte para temas oscuros.