Skeuomorphic_Monochromatic_File_Viewer
Un componente de visor de archivos esqueuomórfico complejo para un mercado, diseñado con un esquema de color monocromático. Incluye una lista de archivos, un panel de vista previa, botones de acción y una sección de información detallada, todo ello sin dejar de responder y ser compatible con el modo oscuro.
Código HTML
<div class="p-4 sm:p-6 lg:p-8 bg-blue-100 dark:bg-gray-900 min-h-screen font-sans antialiased flex items-center justify-center">
<div class="flex flex-col lg:flex-row w-full max-w-7xl mx-auto border-4 border-blue-300 dark:border-gray-700 rounded-3xl shadow-xl overflow-hidden
bg-gradient-to-br from-blue-200 to-blue-300 dark:from-gray-800 dark:to-gray-900 p-2 sm:p-4 lg:p-6
transition-all duration-300 ease-in-out transform hover:scale-[1.005]">
<!-- Left Pane: File List / Navigation -->
<div class="lg:w-1/3 xl:w-1/4 bg-blue-100 dark:bg-gray-850 p-4 rounded-xl mb-4 lg:mb-0 lg:mr-4
shadow-inner-sm border border-blue-200 dark:border-gray-700
flex flex-col">
<div class="text-lg font-bold text-blue-800 dark:text-blue-200 mb-4 pb-2 border-b border-blue-300 dark:border-gray-700
shadow-text-light dark:shadow-text-dark text-center tracking-wide">File Browser</div>
<div class="mb-4 relative">
<input type="text" placeholder="Search files..." class="w-full p-3 rounded-full bg-blue-50 dark:bg-gray-800 text-blue-800 dark:text-blue-200
placeholder-blue-400 dark:placeholder-gray-500 border border-blue-200 dark:border-gray-700
shadow-inset-sm focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600 pl-10">
<svg class="absolute left-3 top-1/2 transform -translate-y-1/2 text-blue-500 dark:text-gray-500" fill="currentColor" viewBox="0 0 24 24" width="20" height="20">
<path d="M10 18a8 8 0 100-16 8 8 0 000 16zM21.707 20.293L17 15.586A8 8 0 0018 10c0-1.89-.5-3.66-1.37-5.18L17.707 4.293a1 1 0 01-1.414 1.414L15 6.414A9.957 9.957 0 0110 0c-5.523 0-10 4.477-10 10s4.477 10 10 10c1.88 0 3.65-.52 5.17-1.38l-.707.707a.999.999 0 010 1.414.999.999 0 01-1.414 0l-5.707-5.707A9.957 9.957 0 010 10C0 4.477 4.477 0 10 0s10 4.477 10 10c0 1.9-.53 3.67-1.42 5.19l5.707 5.707a.999.999 0 010 1.414.999 0 01-1.414 0z" />
</svg>
</div>
<ul class="space-y-2 overflow-y-auto flex-grow pr-2 scrollbar-thumb-blue-400 scrollbar-track-blue-100 dark:scrollbar-thumb-gray-600 dark:scrollbar-track-gray-800 scrollbar-thin">
<!-- File List Item -->
<li class="p-3 rounded-xl cursor-pointer flex items-center justify-between group
bg-blue-150 dark:bg-gray-800 border border-blue-200 dark:border-gray-700
hover:bg-blue-250 dark:hover:bg-gray-750 transition-all duration-200 ease-in-out
shadow-light dark:shadow-dark active:shadow-inset-sm active:bg-blue-300 dark:active:bg-gray-700">
<div class="flex items-center">
<svg class="w-6 h-6 text-blue-600 dark:text-blue-400 mr-3" fill="currentColor" viewBox="0 0 24 24">
<path d="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9l-7-7zM6 4h6v5a1 1 0 01-1 1H6V4zm14 16H6V4h5v6h6v10z" />
</svg>
<span class="text-blue-800 dark:text-blue-200 text-sm truncate font-medium">Product_Catalogue_Q3.pdf</span>
</div>
<small class="text-blue-500 dark:text-gray-400 text-xs">1.2 MB</small>
</li>
<li class="p-3 rounded-xl cursor-pointer flex items-center justify-between group
bg-blue-150 dark:bg-gray-800 border border-blue-200 dark:border-gray-700
hover:bg-blue-250 dark:hover:bg-gray-750 transition-all duration-200 ease-in-out
shadow-light dark:shadow-dark active:shadow-inset-sm active:bg-blue-300 dark:active:bg-gray-700">
<div class="flex items-center">
<svg class="w-6 h-6 text-blue-600 dark:text-blue-400 mr-3" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5l-3.5-3.5L7 11l3 3 6-6 1.5 1.5z" />
</svg>
<span class="text-blue-800 dark:text-blue-200 text-sm truncate font-medium">Market_Research_Report.docx</span>
</div>
<small class="text-blue-500 dark:text-gray-400 text-xs">890 KB</small>
</li>
<li class="p-3 rounded-xl cursor-pointer flex items-center justify-between group
bg-blue-150 dark:bg-gray-800 border border-blue-200 dark:border-gray-700
hover:bg-blue-250 dark:hover:bg-gray-750 transition-all duration-200 ease-in-out
shadow-light dark:shadow-dark active:shadow-inset-sm active:bg-blue-300 dark:active:bg-gray-700">
<div class="flex items-center">
<svg class="w-6 h-6 text-blue-600 dark:text-blue-400 mr-3" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM12 9c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 10.9V22c-5.52-.55-9.98-4.84-10-10H2.05c.02 4.41 3.51 7.9 7.95 7.9zm0-18.9V2c5.52.55 9.98 4.84 10 10h1.95c-.02-4.41-3.51-7.9-7.95-7.9zM12 4.1L2.05 4.1A9.957 9.957 0 0110 0c5.52 0 10 4.48 10 10s-4.48 10-10 10-10-4.48-10-10h1.95A7.95 7.95 0 0012 4.1zm0 15.8c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z" />
</svg>
<span class="text-blue-800 dark:text-blue-200 text-sm truncate font-medium">Contract_Draft_V2.docx</span>
</div>
<small class="text-blue-500 dark:text-gray-400 text-xs">2.1 MB</small>
</li>
<li class="p-3 rounded-xl cursor-pointer flex items-center justify-between group
bg-blue-150 dark:bg-gray-800 border border-blue-200 dark:border-gray-700
hover:bg-blue-250 dark:hover:bg-gray-750 transition-all duration-200 ease-in-out
shadow-light dark:shadow-dark active:shadow-inset-sm active:bg-blue-300 dark:active:bg-gray-700">
<div class="flex items-center">
<svg class="w-6 h-6 text-blue-600 dark:text-blue-400 mr-3" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 14.5l-3.5-3.5L7 11l3 3 6-6 1.5 1.5z" />
</svg>
<span class="text-blue-800 dark:text-blue-200 text-sm truncate font-medium">Quarterly_Sales_2023.xlsx</span>
</div>
<small class="text-blue-500 dark:text-gray-400 text-xs">1.5 MB</small>
</li>
<li class="p-3 rounded-xl cursor-pointer flex items-center justify-between group
bg-blue-150 dark:bg-gray-800 border border-blue-200 dark:border-gray-700
hover:bg-blue-250 dark:hover:bg-gray-750 transition-all duration-200 ease-in-out
shadow-light dark:shadow-dark active:shadow-inset-sm active:bg-blue-300 dark:active:bg-gray-700">
<div class="flex items-center">
<svg class="w-6 h-6 text-blue-600 dark:text-blue-400 mr-3" fill="currentColor" viewBox="0 0 24 24">
<path d="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9l-7-7zM6 4h6v5a1 1 0 01-1 1H6V4zm14 16H6V4h5v6h6v10z" />
</svg>
<span class="text-blue-800 dark:text-blue-200 text-sm truncate font-medium">Marketing_Plan_2024.pptx</span>
</div>
<small class="text-blue-500 dark:text-gray-400 text-xs">4.8 MB</small>
</li>
<li class="p-3 rounded-xl cursor-pointer flex items-center justify-between group
bg-blue-150 dark:bg-gray-800 border border-blue-200 dark:border-gray-700
hover:bg-blue-250 dark:hover:bg-gray-750 transition-all duration-200 ease-in-out
shadow-light dark:shadow-dark active:shadow-inset-sm active:bg-blue-300 dark:active:bg-gray-700">
<div class="flex items-center">
<svg class="w-6 h-6 text-blue-600 dark:text-blue-400 mr-3" fill="currentColor" viewBox="0 0 24 24">
<path d="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9l-7-7zM6 4h6v5a1 1 0 01-1 1H6V4zm14 16H6V4h5v6h6v10z" />
</svg>
<span class="text-blue-800 dark:text-blue-200 text-sm truncate font-medium">User_Manual_V1.pdf</span>
</div>
<small class="text-blue-500 dark:text-gray-400 text-xs">900 KB</small>
</li>
</ul>
<button class="mt-4 w-full p-3 rounded-xl text-white font-semibold flex items-center justify-center
bg-blue-600 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-600
shadow-neumorphic-button dark:shadow-neumorphic-button-dark
active:shadow-inset-button active:bg-blue-800 dark:active:bg-blue-800 transition-all duration-200 ease-in-out">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
</svg>
Upload File
</button>
</div>
<!-- Right Pane: File Preview & Details -->
<div class="lg:w-2/3 xl:w-3/4 flex flex-col p-4
bg-blue-100 dark:bg-gray-850 rounded-xl shadow-inner-sm border border-blue-200 dark:border-gray-700">
<div class="flex justify-between items-center mb-4 pb-4 border-b border-blue-300 dark:border-gray-700">
<h2 class="text-xl font-bold text-blue-800 dark:text-blue-200 shadow-text-light dark:shadow-text-dark tracker-wide">File Preview</h2>
<div class="flex space-x-2">
<button class="p-3 rounded-full bg-blue-200 dark:bg-gray-750 text-blue-700 dark:text-blue-300
hover:bg-blue-300 dark:hover:bg-gray-700 shadow-neumorphic-icon dark:shadow-neumorphic-icon-dark
active:shadow-inset-icon active:bg-blue-400 dark:active:bg-gray-600 transition-all duration-200 ease-in-out">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 9l-7 7 1.41 1.41L12 11.83l5.59 5.58L19 16l-7-7z" />
</svg>
</button>
<button class="p-3 rounded-full bg-blue-200 dark:bg-gray-750 text-blue-700 dark:text-blue-300
hover:bg-blue-300 dark:hover:bg-gray-700 shadow-neumorphic-icon dark:shadow-neumorphic-icon-dark
active:shadow-inset-icon active:bg-blue-400 dark:active:bg-gray-600 transition-all duration-200 ease-in-out">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" />
</svg>
</button>
<button class="p-3 rounded-full bg-blue-200 dark:bg-gray-750 text-blue-700 dark:text-blue-300
hover:bg-blue-300 dark:hover:bg-gray-700 shadow-neumorphic-icon dark:shadow-neumorphic-icon-dark
active:shadow-inset-icon active:bg-blue-400 dark:active:bg-gray-600 transition-all duration-200 ease-in-out">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" />
</svg>
</button>
</div>
</div>
<!-- Preview Area -->
<div class="flex-grow flex items-center justify-center bg-blue-50 dark:bg-gray-900 rounded-xl mb-6
border border-blue-200 dark:border-gray-700 shadow-inset-md overflow-hidden">
<img src="https://picsum.photos/600/400?random=1" alt="File Preview" class="max-w-full max-h-full object-contain rounded-lg shadow-lg opacity-80">
</div>
<!-- File Details -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
<div class="bg-blue-150 dark:bg-gray-800 p-4 rounded-xl border border-blue-200 dark:border-gray-700 shadow-light dark:shadow-dark active:shadow-inset-sm">
<h3 class="text-blue-700 dark:text-blue-300 font-semibold text-sm mb-1">File Name</h3>
<p class="text-blue-900 dark:text-blue-100 text-base overflow-hidden truncate">Product_Catalogue_Q3.pdf</p>
</div>
<div class="bg-blue-150 dark:bg-gray-800 p-4 rounded-xl border border-blue-200 dark:border-gray-700 shadow-light dark:shadow-dark active:shadow-inset-sm">
<h3 class="text-blue-700 dark:text-blue-300 font-semibold text-sm mb-1">File Type</h3>
<p class="text-blue-900 dark:text-blue-100 text-base">PDF Document</p>
</div>
<div class="bg-blue-150 dark:bg-gray-800 p-4 rounded-xl border border-blue-200 dark:border-gray-700 shadow-light dark:shadow-dark active:shadow-inset-sm">
<h3 class="text-blue-700 dark:text-blue-300 font-semibold text-sm mb-1">Size</h3>
<p class="text-blue-900 dark:text-blue-100 text-base">1.2 MB</p>
</div>
<div class="bg-blue-150 dark:bg-gray-800 p-4 rounded-xl border border-blue-200 dark:border-gray-700 shadow-light dark:shadow-dark active:shadow-inset-sm">
<h3 class="text-blue-700 dark:text-blue-300 font-semibold text-sm mb-1">Uploaded On</h3>
<p class="text-blue-900 dark:text-blue-100 text-base">2023-10-26</p>
</div>
<div class="bg-blue-150 dark:bg-gray-800 p-4 rounded-xl border border-blue-200 dark:border-gray-700 shadow-light dark:shadow-dark active:shadow-inset-sm">
<h3 class="text-blue-700 dark:text-blue-300 font-semibold text-sm mb-1">Last Modified</h3>
<p class="text-blue-900 dark:text-blue-100 text-base">2023-11-15</p>
</div>
<div class="bg-blue-150 dark:bg-gray-800 p-4 rounded-xl border border-blue-200 dark:border-gray-700 shadow-light dark:shadow-dark active:shadow-inset-sm flex items-center">
<img class="w-8 h-8 rounded-full mr-3 border border-blue-300 dark:border-gray-600 shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Uploader">
<div>
<h3 class="text-blue-700 dark:text-blue-300 font-semibold text-sm mb-1">Uploaded By</h3>
<p class="text-blue-900 dark:text-blue-100 text-base">John Doe</p>
</div>
</div>
</div>
<!-- File Tags / Categories -->
<div class="mb-6">
<h3 class="text-blue-700 dark:text-blue-300 font-semibold text-sm mb-2">Tags</h3>
<div class="flex flex-wrap gap-2">
<span class="px-4 py-2 rounded-full text-blue-700 dark:text-blue-200 text-xs font-semibold
bg-blue-200 dark:bg-gray-700 border border-blue-300 dark:border-gray-600 shadow-tag">Marketing</span>
<span class="px-4 py-2 rounded-full text-blue-700 dark:text-blue-200 text-xs font-semibold
bg-blue-200 dark:bg-gray-700 border border-blue-300 dark:border-gray-600 shadow-tag">Catalogue</span>
<span class="px-4 py-2 rounded-full text-blue-700 dark:text-blue-200 text-xs font-semibold
bg-blue-200 dark:bg-gray-700 border border-blue-300 dark:border-gray-600 shadow-tag">Q3</span>
</div>
</div>
<!-- Share and Version History -->
<div class="flex flex-col sm:flex-row justify-between items-center pt-4 border-t border-blue-300 dark:border-gray-700">
<button class="flex-1 w-full sm:w-auto p-3 rounded-xl text-white font-semibold flex items-center justify-center
bg-blue-500 dark:bg-blue-600 hover:bg-blue-600 dark:hover:bg-blue-500 mr-0 sm:mr-4 mb-2 sm:mb-0
shadow-neumorphic-button dark:shadow-neumorphic-button-dark
active:shadow-inset-button active:bg-blue-700 dark:active:bg-blue-700 transition-all duration-200 ease-in-out">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
<path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.2.09-.41.09-.6s-.04-.4-.09-.6l7.05-4.11c.52.48 1.2.78 1.96.78 2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4c0 .2.04.4.09.6L7.05 11.9c-.52-.48-1.2-.78-1.96-.78-2.21 0-4 1.79-4 4s1.79 4 4 4c.76 0 1.44-.3 1.96-.77l7.05 4.11c-.05.2-.09.41-.09.6 0 2.21 1.79 4 4 4s4-1.79 4-4-1.79-4-4-4z" />
</svg>
Share File
</button>
<button class="flex-1 w-full sm:w-auto p-3 rounded-xl text-blue-800 dark:text-blue-200 font-semibold flex items-center justify-center
bg-blue-200 dark:bg-gray-700 hover:bg-blue-300 dark:hover:bg-gray-600
shadow-neumorphic-button-alt dark:shadow-neumorphic-button-alt-dark
active:shadow-inset-button active:bg-blue-400 dark:active:bg-gray-600 transition-all duration-200 ease-in-out">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" />
</svg>
Version History
</button>
</div>
</div>
</div>
</div>
<style>
/* Custom tailwind utilities for skeuomorphism */
.shadow-neumorphic-button {
box-shadow: 6px 6px 12px #9bcafa, -6px -6px 12px #d3faff;
}
.dark .shadow-neumorphic-button-dark {
box-shadow: 6px 6px 12px #4a4a4a, -6px -6px 12px #2a2a2a;
}
.shadow-neumorphic-button-alt {
box-shadow: 4px 4px 8px #9bcafa, -4px -4px 8px #d3faff;
}
.dark .shadow-neumorphic-button-alt-dark {
box-shadow: 4px 4px 8px #4a4a4a, -4px -4px 8px #2a2a2a;
}
.shadow-neumorphic-icon {
box-shadow: 4px 4px 8px #9bcafa, -4px -4px 8px #d3faff;
}
.dark .shadow-neumorphic-icon-dark {
box-shadow: 4px 4px 8px #4a4a4a, -4px -4px 8px #2a2a2a;
}
.shadow-inset-button {
box-shadow: inset 4px 4px 8px #9bcafa, inset -4px -4px 8px #d3faff;
}
.dark .shadow-inset-button {
box-shadow: inset 4px 4px 8px #4a4a4a, inset -4px -4px 8px #2a2a2a;
}
.shadow-inset-icon {
box-shadow: inset 3px 3px 6px #9bcafa, inset -3px -3px 6px #d3faff;
}
.dark .shadow-inset-icon {
box-shadow: inset 3px 3px 6px #4a4a4a, inset -3px -3px 6px #2a2a2a;
}
.shadow-light {
box-shadow: 3px 3px 6px #bbd6fb, -3px -3px 6px #e0f6ff;
}
.dark .shadow-dark {
box-shadow: 3px 3px 6px #4a4a4a, -3px -3px 6px #2a2a2a;
}
.shadow-inset-sm {
box-shadow: inset 2px 2px 4px #bbd6fb, inset -2px -2px 4px #e0f6ff;
}
.dark .shadow-inset-sm {
box-shadow: inset 2px 2px 4px #4a4a4a, inset -2px -2px 4px #2a2a2a;
}
.shadow-inset-md {
box-shadow: inset 4px 4px 8px #bbd6fb, inset -4px -4px 8px #e0f6ff;
}
.dark .shadow-inset-md {
box-shadow: inset 4px 4px 8px #4a4a4a, inset -4px -4px 8px #2a2a2a;
}
.shadow-tag {
box-shadow: 2px 2px 4px #9bcafa, -2px -2px 4px #d3faff;
}
.dark .shadow-tag {
box-shadow: 2px 2px 4px #4a4a4a, -2px -2px 4px #2a2a2a;
}
.shadow-text-light {
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.7), -1px -1px 2px rgba(0, 0, 0, 0.2);
}
.dark .shadow-text-dark {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7), -1px -1px 2px rgba(255, 255, 255, 0.2);
}
/* Custom scrollbar styles */
.scrollbar-thin::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.scrollbar-thin::-webkit-scrollbar-track {
background: transparent;
border-radius: 10px;
}
.scrollbar-thumb-blue-400::-webkit-scrollbar-thumb {
background-color: #60a5fa;
border-radius: 10px;
border: 1px solid #93c5fd;
}
.dark .scrollbar-thumb-gray-600::-webkit-scrollbar-thumb {
background-color: #4b5563;
border: 1px solid #6b7280;
}
.scrollbar-track-blue-100::-webkit-scrollbar-track {
background: #dbeafe;
}
.dark .scrollbar-track-gray-800::-webkit-scrollbar-track {
background: #1f2937;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
background-color: #3b82f6;
}
.dark .scrollbar-thin::-webkit-scrollbar-thumb:hover {
background-color: #374151;
}
</style>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 retro/vintage diseñado para aplicaciones de comercio electrónico. Cuenta con un esquema de color monocromático, diseño receptivo y soporte para el modo oscuro.
Componente Visor de archivos
Un componente de visor de archivos complejo diseñado para una cartera, con modo oscuro con colores complementarios, que muestra un árbol de archivos, vista previa del contenido e información detallada. Totalmente responsivo.