Componente Visor de archivos retro
Un componente de visor de archivos complejo y receptivo con una estética retro/vintage de los 80/90, esquema de color neutro cálido, diseñado para interfaces financieras/bancarias. Incluye soporte para modo oscuro y elementos interactivos.
Código HTML
<div class="font-['Press_Start_2P'] antialiased dark:bg-gray-900 bg-gray-100 p-4 sm:p-6 md:p-8 min-h-screen">
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<style>
/* Custom scrollbar for retro feel */
.retro-scrollbar::-webkit-scrollbar {
width: 12px;
height: 12px;
}
.retro-scrollbar::-webkit-scrollbar-track {
background: #e0e0e0; /* Light beige for track */
border: 1px solid #c0c0c0; /* Gray border */
box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
}
.dark .retro-scrollbar::-webkit-scrollbar-track {
background: #343f50; /* Darker blue-gray for track */
border: 1px solid #2a3340; /* Darker border */
}
.retro-scrollbar::-webkit-scrollbar-thumb {
background-color: #8b8b8b; /* Medium gray for thumb */
border-radius: 6px;
border: 2px solid #555555;
}
.dark .retro-scrollbar::-webkit-scrollbar-thumb {
background-color: #6a7c90; /* Darker blue-gray for thumb */
border: 2px solid #4a5c70;
}
.retro-scrollbar::-webkit-scrollbar-corner {
background: #c0c0c0;
}
.dark .retro-scrollbar::-webkit-scrollbar-corner {
background: #2a3340;
}
/* CRT scanline effect for main display */
.crt-effect {
position: relative;
overflow: hidden;
}
.crt-effect::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(18, 18, 18, 0.1) 50%, transparent 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.04), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
background-size: 100% 4px, 3px 100%;
z-index: 10;
pointer-events: none;
}
.crt-effect::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
opacity: 0.2;
z-index: 11;
pointer-events: none;
}
/* Text shadow for retro feel */
.text-retro-shadow {
text-shadow: 2px 2px #b0b0b0;
}
.dark .text-retro-shadow {
text-shadow: 2px 2px #1a1a1a;
}
</style>
<div class="max-w-7xl mx-auto dark:bg-gray-800 bg-gray-200 rounded-lg shadow-2xl overflow-hidden border-4 border-gray-400 dark:border-gray-600">
<!-- Top Bar / Header -->
<div class="flex items-center justify-between p-4 bg-gray-300 dark:bg-gray-700 border-b-4 border-gray-400 dark:border-gray-600 relative">
<div class="flex items-center space-x-2">
<span class="h-4 w-4 bg-red-500 rounded-full border border-gray-600 dark:border-gray-400"></span>
<span class="h-4 w-4 bg-yellow-500 rounded-full border border-gray-600 dark:border-gray-400"></span>
<span class="h-4 w-4 bg-green-500 rounded-full border border-gray-600 dark:border-gray-400"></span>
</div>
<p class="text-xs sm:text-base font-bold text-gray-800 dark:text-gray-200 text-retro-shadow">FINANCE OS v3.1</p>
<div class="flex items-center space-x-2">
<button aria-label="Minimize" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors duration-200">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path></svg>
</button>
<button aria-label="Maximize" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors duration-200">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-5v4m0 0h-4m4 0l-5-5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 0h-4m4 0l-5 5"></path></svg>
</button>
<button aria-label="Close" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors duration-200">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
</button>
</div>
<!-- Floppy Disk Icon -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-20 dark:opacity-10 pointer-events-none">
<svg class="w-12 h-12 text-gray-500" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M20 2H8C6.9 2 6 2.9 6 4v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM10 4h8v6h-8V4zm8 16H8v-8h10v8z"/>
<circle cx="14" cy="7" r="1"/>
<path d="M12 14c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
</svg>
</div>
</div>
<!-- Main Content Area -->
<div class="flex flex-col md:flex-row bg-gray-100 dark:bg-gray-900">
<!-- Left Sidebar: Navigation/Directory -->
<aside class="w-full md:w-64 p-4 md:p-6 bg-gray-200 dark:bg-gray-800 border-b-4 md:border-b-0 md:border-r-4 border-gray-400 dark:border-gray-600 flex-shrink-0">
<h3 class="text-base font-bold mb-4 text-gray-800 dark:text-gray-200 text-retro-shadow before:content-['C:\\SYSTEM>_'] before:text-blue-600 dark:before:text-blue-400 before:mr-2">Directories</h3>
<ul class="space-y-3">
<li>
<a href="#" class="flex items-center text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-500 transition-colors duration-200 font-bold">
<svg class="w-5 h-5 mr-2 text-blue-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M10 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.1.89 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"></path></svg>
CLIENTS
</a>
</li>
<li>
<a href="#" class="flex items-center text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-500 transition-colors duration-200">
<svg class="w-5 h-5 mr-2 text-blue-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M10 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.1.89 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"></path></svg>
REPORTS
</a>
</li>
<li>
<a href="#" class="flex items-center text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-500 transition-colors duration-200">
<svg class="w-5 h-5 mr-2 text-blue-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M10 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.1.89 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"></path></svg>
ARCHIVE
</a>
</li>
<li>
<a href="#" class="flex items-center text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-500 transition-colors duration-200">
<svg class="w-5 h-5 mr-2 text-blue-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M10 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.1.89 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"></path></path></svg>
SYSFILES
</a>
</li>
</ul>
<div class="mt-8 border-t border-gray-400 dark:border-gray-600 pt-4">
<p class="text-xs text-gray-600 dark:text-gray-400">Drive C: 2.1MB Free</p>
<div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2 mt-1">
<div class="bg-green-500 h-2 rounded-full" style="width: 10%;"></div>
</div>
</div>
</aside>
<!-- Main File View Area -->
<main class="flex-1 p-4 md:p-6">
<div class="flex flex-col sm:flex-row justify-between items-center mb-6">
<h2 class="text-base sm:text-lg font-bold text-gray-800 dark:text-gray-200 mb-2 sm:mb-0 text-retro-shadow"><span class="text-blue-600 dark:text-blue-400">C:\\CLIENTS\></span> Current Directory</h2>
<div class="flex space-x-2">
<button class="px-3 py-1 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-bold rounded shadow-md border border-gray-400 dark:border-gray-600 hover:bg-gray-400 dark:hover:bg-gray-600 active:bg-gray-500 dark:active:bg-gray-500 transition-colors duration-200 outline-none focus:ring-2 focus:ring-blue-500">
New File
</button>
<button class="px-3 py-1 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-bold rounded shadow-md border border-gray-400 dark:border-gray-600 hover:bg-gray-400 dark:hover:bg-gray-600 active:bg-gray-500 dark:active:bg-gray-500 transition-colors duration-200 outline-none focus:ring-2 focus:ring-blue-500">
Upload
</button>
<button class="px-3 py-1 bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 text-xs font-bold rounded shadow-md border border-gray-400 dark:border-gray-600 hover:bg-gray-400 dark:hover:bg-gray-600 active:bg-gray-500 dark:active:bg-gray-500 transition-colors duration-200 outline-none focus:ring-2 focus:ring-blue-500">
Refresh
</button>
</div>
</div>
<div class="bg-gray-50 dark:bg-gray-950 p-4 rounded-lg shadow-inner border-2 border-gray-300 dark:border-gray-700 h-[60vh] md:h-[calc(100vh-250px)] overflow-y-auto crt-effect retro-scrollbar">
<!-- File List Headers -->
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 pb-2 mb-2 border-b border-dashed border-gray-400 dark:border-gray-600 text-xs uppercase font-bold text-gray-700 dark:text-gray-300">
<div>Name</div>
<div class="hidden lg:block">Type</div>
<div class="text-right">Size</div>
<div class="text-right">Last Modified</div>
</div>
<!-- File Item 1 -->
<a href="#" class="grid grid-cols-2 lg:grid-cols-4 gap-4 p-2 rounded-md hover:bg-yellow-200 dark:hover:bg-yellow-800 transition-colors duration-150 group cursor-pointer border border-transparent hover:border-gray-400 dark:hover:border-gray-600">
<div class="flex items-center space-x-2">
<svg class="w-4 h-4 text-blue-500 dark:text-blue-400 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14 2H6c-1.11 0-2 .89-2 2v16c0 1.11.89 2 2 2h12c1.11 0 2-.89 2-2V8l-6-6zM16 18H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"></path></svg>
<span class="truncate text-gray-800 dark:text-gray-200 group-hover:text-blue-700 dark:group-hover:text-blue-400 text-xs sm:text-sm">ANNUAL_REPORT_2023.PDF</span>
</div>
<div class="hidden lg:block text-gray-600 dark:text-gray-400 text-xs sm:text-sm truncate">PDF Document</div>
<div class="text-right text-gray-600 dark:text-gray-400 text-xs sm:text-sm">1.2MB</div>
<div class="text-right text-gray-600 dark:text-gray-400 text-xs sm:text-sm">2023-12-25</div>
</a>
<!-- File Item 2 -->
<a href="#" class="grid grid-cols-2 lg:grid-cols-4 gap-4 p-2 rounded-md hover:bg-yellow-200 dark:hover:bg-yellow-800 transition-colors duration-150 group cursor-pointer border border-transparent hover:border-gray-400 dark:hover:border-gray-600">
<div class="flex items-center space-x-2">
<svg class="w-4 h-4 text-green-500 dark:text-green-400 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z"></path></svg>
<span class="truncate text-gray-800 dark:text-gray-200 group-hover:text-blue-700 dark:group-hover:text-blue-400 text-xs sm:text-sm">Q4_PROJECTIONS.XLS</span>
</div>
<div class="hidden lg:block text-gray-600 dark:text-gray-400 text-xs sm:text-sm truncate">Spreadsheet</div>
<div class="text-right text-gray-600 dark:text-gray-400 text-xs sm:text-sm">850KB</div>
<div class="text-right text-gray-600 dark:text-gray-400 text-xs sm:text-sm">2023-11-15</div>
</a>
<!-- File Item 3 -->
<a href="#" class="grid grid-cols-2 lg:grid-cols-4 gap-4 p-2 rounded-md hover:bg-yellow-200 dark:hover:bg-yellow-800 transition-colors duration-150 group cursor-pointer border border-transparent hover:border-gray-400 dark:hover:border-gray-600">
<div class="flex items-center space-x-2">
<svg class="w-4 h-4 text-red-500 dark:text-red-400 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14 2H6c-1.11 0-1.99.89-1.99 2L4 20c0 1.11.89 2 2 2h12c1.11 0 2-.89 2-2V8l-6-6zm-1 2H6v3c0 .55.45 1 1 1h7V4.5L13 2zm7 16H6v-6h14v6z"></path></svg>
<span class="truncate text-gray-800 dark:text-gray-200 group-hover:text-blue-700 dark:group-hover:text-blue-400 text-xs sm:text-sm">HR_POLICY_UPDATE.DOC</span>
</div>
<div class="hidden lg:block text-gray-600 dark:text-gray-400 text-xs sm:text-sm truncate">Word Document</div>
<div class="text-right text-gray-600 dark:text-gray-400 text-xs sm:text-sm">210KB</div>
<div class="text-right text-gray-600 dark:text-gray-400 text-xs sm:text-sm">2023-10-01</div>
</a>
<!-- File Item 4 -->
<a href="#" class="grid grid-cols-2 lg:grid-cols-4 gap-4 p-2 rounded-md hover:bg-yellow-200 dark:hover:bg-yellow-800 transition-colors duration-150 group cursor-pointer border border-transparent hover:border-gray-400 dark:hover:border-gray-600">
<div class="flex items-center space-x-2">
<svg class="w-4 h-4 text-orange-500 dark:text-orange-400 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 14h-2v-6h2v6zm0-8h-2V7h2v1z"></path></svg>
<span class="truncate text-gray-800 dark:text-gray-200 group-hover:text-blue-700 dark:group-hover:text-blue-400 text-xs sm:text-sm">README.TXT</span>
</div>
<div class="hidden lg:block text-gray-600 dark:text-gray-400 text-xs sm:text-sm truncate">Text Document</div>
<div class="text-right text-gray-600 dark:text-gray-400 text-xs sm:text-sm">5KB</div>
<div class="text-right text-gray-600 dark:text-gray-400 text-xs sm:text-sm">2023-09-01</div>
</a>
<!-- File Item 5 -->
<a href="#" class="grid grid-cols-2 lg:grid-cols-4 gap-4 p-2 rounded-md hover:bg-yellow-200 dark:hover:bg-yellow-800 transition-colors duration-150 group cursor-pointer border border-transparent hover:border-gray-400 dark:hover:border-gray-600">
<div class="flex items-center space-x-2">
<svg class="w-4 h-4 text-purple-500 dark:text-purple-400 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 10V8H8v4h8zm-1 2h-6v2h6v-2zm-1-8h-6V4h6v2z"></path></svg>
<span class="truncate text-gray-800 dark:text-gray-200 group-hover:text-blue-700 dark:group-hover:text-blue-400 text-xs sm:text-sm">CLIENT_DB_BACKUP_202312.ZIP</span>
</div>
<div class="hidden lg:block text-gray-600 dark:text-gray-400 text-xs sm:text-sm truncate">ZIP Archive</div>
<div class="text-right text-gray-600 dark:text-gray-400 text-xs sm:text-sm">7.8MB</div>
<div class="text-right text-gray-600 dark:text-gray-400 text-xs sm:text-sm">2023-12-31</div>
</a>
<!-- File Item 6 -->
<a href="#" class="grid grid-cols-2 lg:grid-cols-4 gap-4 p-2 rounded-md hover:bg-yellow-200 dark:hover:bg-yellow-800 transition-colors duration-150 group cursor-pointer border border-transparent hover:border-gray-400 dark:hover:border-gray-600">
<div class="flex items-center space-x-2">
<svg class="w-4 h-4 text-red-500 dark:text-red-400 flex-shrink-0" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M14 2H6c-1.11 0-1.99.89-1.99 2L4 20c0 1.11.89 2 2 2h12c1.11 0 2-.89 2-2V8l-6-6zm-1 2H6v3c0 .55.45 1 1 1h7V4.5L13 2zm7 16H6v-6h14v6z"></path></svg>
<span class="truncate text-gray-800 dark:text-gray-200 group-hover:text-blue-700 dark:group-hover:text-blue-400 text-xs sm:text-sm">BUDGET_FY2024.DOCX</span>
</div>
<div class="hidden lg:block text-gray-600 dark:text-gray-400 text-xs sm:text-sm truncate">Word Document</div>
<div class="text-right text-gray-600 dark:text-gray-400 text-xs sm:text-sm">450KB</div>
<div class="text-right text-gray-600 dark:text-gray-400 text-xs sm:text-sm">2024-01-15</div>
</a>
</div>
</main>
</div>
<!-- Status Bar / Footer -->
<footer class="flex flex-col sm:flex-row items-center justify-between p-4 bg-gray-300 dark:bg-gray-700 border-t-4 border-gray-400 dark:border-gray-600">
<p class="text-xs sm:text-sm text-gray-700 dark:text-gray-300 mb-2 sm:mb-0 text-retro-shadow"><span class="text-blue-600 dark:text-blue-400">STATUS:</span> READY.</p>
<div class="flex items-center space-x-4">
<div class="flex items-center space-x-1">
<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="w-6 h-6 rounded-full border border-gray-500 dark:border-gray-400" loading="lazy">
<span class="text-xs text-gray-700 dark:text-gray-300 hidden sm:inline">USER: JSMITH</span>
</div>
<span class="text-xs text-gray-700 dark:text-gray-300 text-retro-shadow">15:30:00 EST</span>
</div>
</footer>
</div>
</div>Componentes relacionados
Componente Visor de archivos
Un componente de visor de archivos de estilo brutalista con diseño responsivo y compatibilidad con el modo oscuro mediante Tailwind CSS.
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.