Composant Retro File Viewer
Un composant de visionneuse de fichiers complexe et réactif avec une esthétique rétro/vintage des années 80/90, une palette de couleurs neutres chaudes, conçu pour les interfaces finance/banque. Comprend la prise en charge du mode sombre et des éléments interactifs.
HTML Code
<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>Composants associés
Composant Visionneuse de fichiers
Un composant de visionneuse de fichiers de style brutaliste avec un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.
Composant Visionneuse de fichiers
Un composant de visionneuse de fichiers réactif stylisé avec les principes de conception matérielle à l’aide de Tailwind CSS, avec prise en charge du thème sombre.
Composant Visionneuse de fichiers
Visionneuse de fichiers de style neumorphique pour le commerce électronique qui affiche une image et les détails d’un fichier. Fournit une expérience d’interface utilisateur douce avec prise en charge du thème sombre.