Componente Visualizzatore file retrò
Un componente di visualizzazione di file complesso e reattivo con un'estetica retrò/vintage anni '80/'90, combinazione di colori neutri caldi, progettato per interfacce finanziarie/bancarie. Include il supporto per la modalità oscura ed elementi interattivi.
Codice 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>Componenti correlati
Componente Visualizzatore file
Componente visualizzatore file reattivo con supporto per la modalità oscura
Componente Visualizzatore file
Un componente visualizzatore di file semplice e reattivo con un design ispirato alla carta/stampa adatto a siti Web aziendali/aziendali. Dispone di colori analoghi, HTML semantico e supporto per la modalità scura.
Componente Visualizzatore file
Componente visualizzatore file reattivo con supporto per la modalità oscura