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.
HTML Code
<div class="min-h-screen bg-gray-100 p-4 dark:bg-gray-950 transition-colors duration-300">
<div class="container mx-auto rounded-lg shadow-xl overflow-hidden md:flex flex-col md:flex-row dark:bg-gray-900 border border-gray-200 dark:border-gray-800">
<!-- Sidebar / File Tree -->
<div class="w-full md:w-1/4 bg-gray-50 dark:bg-gray-850 p-4 border-b md:border-b-0 md:border-r border-gray-200 dark:border-gray-800 flex-shrink-0">
<h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-100 flex items-center">
<svg class="w-5 h-5 mr-2 text-indigo-600 dark:text-orange-400" 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="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path>
</svg>
Projects
</h3>
<ul class="space-y-2 text-sm text-gray-700 dark:text-gray-300">
<li>
<button class="flex items-center w-full text-left p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-orange-700">
<svg class="w-4 h-4 mr-2 text-indigo-500 dark:text-orange-500" 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 7v10l2 2h12a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H4z"></path>
</svg>
<span class="font-medium">My Portfolio (Active)</span>
</button>
<ul class="ml-4 mt-1 space-y-1">
<li>
<button class="flex items-center w-full text-left p-2 rounded-md bg-indigo-50 dark:bg-orange-950 text-indigo-700 dark:text-orange-300 font-semibold hover:bg-indigo-100 dark:hover:bg-orange-900 transition-colors duration-200 focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-orange-700">
<svg class="w-4 h-4 mr-2 text-indigo-600 dark:text-orange-400" 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="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
</svg>
README.md
</button>
</li>
<li>
<button class="flex items-center w-full text-left p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-orange-700">
<svg class="w-4 h-4 mr-2 text-emerald-500 dark:text-emerald-400" 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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg>
index.html
</button>
</li>
<li>
<button class="flex items-center w-full text-left p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-orange-700">
<svg class="w-4 h-4 mr-2 text-yellow-500 dark:text-yellow-400" 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="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
</svg>
styles.css
</button>
</li>
<li>
<button class="flex items-center w-full text-left p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-orange-700">
<svg class="w-4 h-4 mr-2 text-blue-500 dark:text-blue-400" 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="M9.75 17L9 20l-1 1h8l-1-1-1.25-3M15 10V5.293a1 1 0 00-.293-.707l-2.414-2.414A1 1 0 0012.586 2H7a2 2 0 00-2 2v16a2 2 0 002 2h10a2 2 0 002-2V10h-6z"></path>
</svg>
script.js
</button>
</li>
<li>
<button class="flex items-center w-full text-left p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-orange-700">
<svg class="w-4 h-4 mr-2 text-purple-500 dark:text-purple-400" 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 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
assets/
</button>
</li>
</ul>
</li>
<li>
<button class="flex items-center w-full text-left p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-orange-700">
<svg class="w-4 h-4 mr-2 text-indigo-500 dark:text-orange-500" 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 7v10l2 2h12a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H4z"></path>
</svg>
Old Projects
</button>
</li>
</ul>
</div>
<!-- Main Content / File Preview -->
<div class="flex-1 flex flex-col">
<!-- Top Bar / File Name & Actions -->
<div class="bg-white dark:bg-gray-850 p-4 border-b border-gray-200 dark:border-gray-800 flex items-center justify-between flex-wrap gap-2">
<h2 class="text-lg font-medium text-gray-800 dark:text-gray-100 flex items-center">
<svg class="w-5 h-5 mr-2 text-indigo-600 dark:text-orange-400" 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="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
</svg>
README.md
</h2>
<div class="flex space-x-2">
<button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-orange-800 dark:text-orange-100 dark:hover:bg-orange-700 dark:focus:ring-orange-600 dark:focus:ring-offset-gray-900 transition-colors duration-200">
<svg class="-ml-0.5 mr-2 h-4 w-4" 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="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
</svg>
Preview
</button>
<button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-700 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600 dark:focus:ring-gray-600 dark:focus:ring-offset-gray-900 transition-colors duration-200">
<svg class="-ml-0.5 mr-2 h-4 w-4" 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
</svg>
Edit
</button>
</div>
</div>
<!-- File Content / Preview Area -->
<div class="flex-grow overflow-y-auto p-6 bg-white dark:bg-gray-900 scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-gray-400 dark:scrollbar-thumb-gray-600 scrollbar-track-gray-200 dark:scrollbar-track-gray-800">
<div class="prose dark:prose-invert max-w-none text-gray-800 dark:text-gray-200">
<h1 class="text-3xl font-bold mb-4 text-indigo-700 dark:text-orange-400">README.md - My Portfolio</h1>
<p class="mb-4">Welcome to my personal portfolio project! This repository showcases a collection of my best work in web development, focusing on responsive design, modern UI/UX, and performance.</p>
<h2 class="text-2xl font-semibold mb-3 text-gray-800 dark:text-gray-100">Features:</h2>
<ul class="list-disc list-inside space-y-2 mb-4">
<li>Fully responsive design for desktop, tablet, and mobile.</li>
<li>Implemented with <strong class="text-indigo-600 dark:text-orange-400">HTML5</strong>, <strong class="text-indigo-600 dark:text-orange-400">CSS3</strong> (Tailwind CSS), and Vanilla <strong class="text-indigo-600 dark:text-orange-400">JavaScript</strong>.</li>
<li>Dark mode support for reduced eye strain.</li>
<li>Interactive components and smooth animations.</li>
<li>Optimized for performance and accessibility.</li>
</ul>
<h2 class="text-2xl font-semibold mb-3 text-gray-800 dark:text-gray-100">Sections:</h2>
<ol class="list-decimal list-inside space-y-2 mb-4">
<li><strong>Home:</strong> Introduction and quick overview.</li>
<li><strong>About Me:</strong> My background, skills, and values.</li>
<li><strong>Projects:</strong> Detailed view of key projects with live demos and source code.</li>
<li><strong>Contact:</strong> How to get in touch.</li>
</ol>
<h2 class="text-2xl font-semibold mb-3 text-gray-800 dark:text-gray-100">Technologies Used:</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
<span class="p-3 bg-gray-100 dark:bg-gray-800 rounded-lg text-center shadow-sm text-gray-700 dark:text-gray-300">
<img src="https://picsum.photos/40/40?random=1" alt="Tech Icon" class="w-8 h-8 rounded-full mx-auto mb-2">
HTML5
</span>
<span class="p-3 bg-gray-100 dark:bg-gray-800 rounded-lg text-center shadow-sm text-gray-700 dark:text-gray-300">
<img src="https://picsum.photos/40/40?random=2" alt="Tech Icon" class="w-8 h-8 rounded-full mx-auto mb-2">
Tailwind CSS
</span>
<span class="p-3 bg-gray-100 dark:bg-gray-800 rounded-lg text-center shadow-sm text-gray-700 dark:text-gray-300">
<img src="https://picsum.photos/40/40?random=3" alt="Tech Icon" class="w-8 h-8 rounded-full mx-auto mb-2">
JavaScript
</span>
<span class="p-3 bg-gray-100 dark:bg-gray-800 rounded-lg text-center shadow-sm text-gray-700 dark:text-gray-300">
<img src="https://picsum.photos/40/40?random=4" alt="Tech Icon" class="w-8 h-8 rounded-full mx-auto mb-2">
Responsive Design
</span>
</div>
<h2 class="text-2xl font-semibold mb-3 text-gray-800 dark:text-gray-100">Setup:</h2>
<p class="mb-4">To run this project locally, clone the repository and open <code>index.html</code> in your browser.</p>
<pre class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 text-sm overflow-x-auto border border-gray-200 dark:border-gray-700"><code class="text-gray-800 dark:text-gray-200">git clone https://github.com/yourusername/my-portfolio.git
cd my-portfolio
# Open index.html in your browser</code></pre>
<p class="mt-4 text-gray-600 dark:text-gray-400">Feel free to explore and provide feedback. Thank you for visiting!</p>
</div>
</div>
<!-- File Details / Bottom Bar (optional, could also be on the side) -->
<div class="bg-white dark:bg-gray-850 p-4 border-t border-gray-200 dark:border-gray-800 text-sm text-gray-600 dark:text-gray-300 flex justify-between items-center flex-wrap gap-2">
<div>
<span class="font-medium text-gray-700 dark:text-gray-200">Updated:</span> 2 hours ago by
<img class="inline-block h-6 w-6 rounded-full ring-2 ring-indigo-300 dark:ring-orange-600 ml-1 mr-1" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<span class="font-medium text-gray-700 dark:text-gray-200">John Doe</span>
</div>
<div>
<span class="font-medium text-gray-700 dark:text-gray-200">Size:</span> 1.2 KB
</div>
<div>
<span class="font-medium text-gray-700 dark:text-gray-200">Type:</span> Markdown File
</div>
</div>
</div>
</div>
</div>Composants associés
Composant Visionneuse de fichiers
Un composant de visionneuse de fichiers réactif conçu pour les sites Web de commerce électronique en mode sombre avec une palette de couleurs monochromatiques. Il comprend des fonctionnalités interactives telles que le téléchargement et l’aperçu des fichiers.
Composant Brutalist File Viewer
Un composant de visionneuse de fichiers brut et audacieux avec des principes de conception brutalistes. Présente un contraste élevé, une disposition non conventionnelle et des éléments intentionnellement grossiers. Le composant comprend l’aperçu des fichiers, l’affichage des métadonnées et les boutons d’action dans un schéma de couleurs en niveaux de gris austère. Entièrement réactif avec prise en charge du mode sombre à l’aide des classes utilitaires Tailwind CSS dark :. Convient aux sites Web d’entreprise/d’entreprise à la recherche d’une approche visuelle distinctive.
Composant Visionneuse de fichiers
Un composant de visionneuse de fichiers réactif avec des micro-interactions, des couleurs vives et une prise en charge du mode sombre, adapté à la consommation de blogs ou de contenu. Il affiche les détails du fichier, un aperçu et les actions associées.