Composant Retro File Viewer
Retro/Vintage File Viewer Composant avec mise en page réactive et prise en charge du thème sombre. Comprend une liste de fichiers avec des icônes et des noms, ainsi qu’une zone de prévisualisation. Utilise des polices et des couleurs de style rétro.
HTML Code
<div class="font-mono bg-gray-200 dark:bg-gray-800 min-h-screen">
<div class="container mx-auto p-4">
<div class="flex flex-col md:flex-row bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg">
<!-- File List -->
<div class="w-full md:w-1/3 pr-4">
<h2 class="text-lg font-bold mb-4 text-gray-800 dark:text-gray-200">Files</h2>
<ul>
<li class="flex items-center py-2 border-b border-gray-300 dark:border-gray-600">
<svg class="w-5 h-5 mr-2 text-blue-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20"><path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"></path></svg>
<span class="text-gray-700 dark:text-gray-300">document.txt</span>
</li>
<li class="flex items-center py-2 border-b border-gray-300 dark:border-gray-600">
<svg class="w-5 h-5 mr-2 text-green-500 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20"><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"></path></svg>
<span class="text-gray-700 dark:text-gray-300">image.jpg</span>
</li>
<li class="flex items-center py-2 border-b border-gray-300 dark:border-gray-600">
<svg class="w-5 h-5 mr-2 text-red-500 dark:text-red-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8.668V14a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
<span class="text-gray-700 dark:text-gray-300">video.mp4</span>
</li>
</ul>
</div>
<!-- File Preview -->
<div class="w-full md:w-2/3 mt-4 md:mt-0">
<h2 class="text-lg font-bold mb-4 text-gray-800 dark:text-gray-200">Preview</h2>
<div class="bg-gray-100 dark:bg-gray-600 p-4 rounded-lg h-64 flex items-center justify-center text-gray-500 dark:text-gray-400">
Select a file to preview
</div>
</div>
</div>
</div>
</div>Composants associés
Composant Visionneuse de fichiers
Composant de visionneuse de fichiers réactif avec brutalisme et design pastel
Composant Visionneuse de fichiers
Composant complexe de visionneuse de fichiers conçu pour un portfolio, doté d’un mode sombre avec des couleurs complémentaires, affichant une arborescence de fichiers, un aperçu du contenu et des informations détaillées. Entièrement réactif.
Composant Visionneuse de fichiers
Un composant de visionneuse de fichiers complexe et réactif avec un style professionnel, une palette de couleurs analogue et une prise en charge du mode sombre, adapté aux environnements professionnels.