Composant Visionneuse de fichiers
Un composant de visionneuse de fichiers réactif avec un style aquarelle/artistique et une palette de couleurs bleu d’entreprise, adapté aux sites Web de voyage/tourisme. Inclut la prise en charge du mode sombre.
HTML Code
<div class="font-sans antialiased text-gray-800 dark:text-gray-200 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-900 dark:to-gray-800 p-4 sm:p-6 md:p-8 rounded-lg shadow-xl overflow-hidden relative">
<!-- Background texture / Artistic elements -->
<div class="absolute inset-0 bg-cover bg-center opacity-30 dark:opacity-10" style="background-image: url('https://www.transparenttextures.com/patterns/water-color.png');"></div>
<div class="relative z-10 max-w-6xl mx-auto">
<div class="mb-6 text-center">
<h2 class="text-3xl sm:text-4xl font-extrabold text-blue-900 dark:text-blue-200 mb-2 drop-shadow-md">Your Travel Documents</h2>
<p class="text-blue-700 dark:text-blue-300 text-lg sm:text-xl font-medium">Explore your flight details, bookings, and itinerary.</p>
</div>
<!-- File Viewer Layout -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Left Panel: File List/Navigation -->
<div class="md:col-span-1 bg-white dark:bg-gray-850 bg-opacity-80 dark:bg-opacity-80 rounded-lg shadow-lg backdrop-blur-sm p-4 border border-blue-200 dark:border-blue-900">
<h3 class="text-xl font-bold text-blue-800 dark:text-blue-300 mb-4 pb-2 border-b border-blue-300 dark:border-blue-700">My Documents</h3>
<ul class="space-y-3">
<li class="flex items-center p-3 rounded-lg cursor-pointer transition duration-300 ease-in-out bg-blue-100 dark:bg-blue-900 border border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-100 shadow-md transform hover:scale-[1.02] hover:shadow-xl">
<svg class="w-6 h-6 mr-3 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L14.414 5A2 2 0 0115 6.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg>
<span class="font-semibold">Flight Booking Confirmation.pdf</span>
</li>
<li class="flex items-center p-3 rounded-lg cursor-pointer transition duration-300 ease-in-out hover:bg-blue-50 dark:hover:bg-gray-700 border border-blue-100 dark:border-gray-700 text-gray-700 dark:text-gray-300">
<svg class="w-6 h-6 mr-3 text-blue-500 dark:text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 2a2 2 0 00-2 2v8a2 2 0 002 2h6a2 2 0 002-2V6.414A2 2 0 0016.414 5L14 2.586A2 2 0 0012.586 2H9zM13 10V7h-2v3h2z"/></svg>
<span>Hotel Reservation.pdf</span>
</li>
<li class="flex items-center p-3 rounded-lg cursor-pointer transition duration-300 ease-in-out hover:bg-blue-50 dark:hover:bg-gray-700 border border-blue-100 dark:border-gray-700 text-gray-700 dark:text-gray-300">
<svg class="w-6 h-6 mr-3 text-blue-500 dark:text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V7.414A2 2 0 0015.414 6L12 2.586A2 2 0 0010.586 2H6zm5 6a1 1 0 10-2 0v5a1 1 0 102 0V8z" clip-rule="evenodd"></path></svg>
<span>Travel Itinerary.docx</span>
</li>
<li class="flex items-center p-3 rounded-lg cursor-pointer transition duration-300 ease-in-out hover:bg-blue-50 dark:hover:bg-gray-700 border border-blue-100 dark:border-gray-700 text-gray-700 dark:text-gray-300">
<svg class="w-6 h-6 mr-3 text-blue-500 dark:text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 6h4a1 1 0 011 1v5a1 1 0 01-1 1H2a1 1 0 01-1-1V7a1 1 0 011-1zM14 6h4a1 1 0 011 1v5a1 1 0 01-1 1h-4a1 1 0 01-1-1V7a1 1 0 011-1zM6 16v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1H7a1 1 0 01-1-1zm8 0v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 01-1 1h-2a1 1 0 01-1-1z"/></svg>
<span>Boarding Pass.pdf</span>
</li>
</ul>
<div class="mt-6 pt-4 border-t border-blue-300 dark:border-blue-700 flex justify-center">
<button class="px-5 py-2 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold rounded-full shadow-lg hover:from-blue-700 hover:to-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75 transition duration-300 transform hover:-translate-y-0.5">
<svg class="w-5 h-5 inline-block mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
Download All
</button>
</div>
</div>
<!-- Right Panel: File Preview -->
<div class="md:col-span-2 bg-white dark:bg-gray-850 rounded-lg shadow-lg backdrop-blur-sm p-4 border border-blue-200 dark:border-blue-900 flex flex-col">
<div class="flex justify-between items-center mb-4 pb-3 border-b border-blue-300 dark:border-blue-700">
<h3 class="text-xl font-bold text-blue-800 dark:text-blue-300">Preview: Flight Booking Confirmation.pdf</h3>
<div class="flex space-x-3">
<button class="p-2 rounded-full bg-blue-100 dark:bg-blue-900 border border-blue-200 dark:border-blue-800 text-blue-700 dark:text-blue-300 hover:bg-blue-200 dark:hover:bg-blue-800 transition transform hover:scale-105" title="Previous Page">
<svg class="w-5 h-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="M15 19l-7-7 7-7"></path></svg>
</button>
<button class="p-2 rounded-full bg-blue-100 dark:bg-blue-900 border border-blue-200 dark:border-blue-800 text-blue-700 dark:text-blue-300 hover:bg-blue-200 dark:hover:bg-blue-800 transition transform hover:scale-105" title="Next Page">
<svg class="w-5 h-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="M9 5l7 7-7 7"></path></svg>
</button>
<button class="p-2 rounded-full bg-blue-600 text-white shadow-md hover:bg-blue-700 transition transform hover:scale-105" title="Download File">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
</div>
</div>
<div class="flex-grow overflow-hidden rounded-lg border border-blue-300 dark:border-blue-700 bg-gray-50 dark:bg-gray-900 flex items-center justify-center">
<!-- Placeholder for PDF/Document Viewer -->
<img src="https://picsum.photos/seed/traveldoc/900/600" alt="Document Preview" class="w-full h-full object-contain rounded-md shadow-inner">
</div>
<div class="mt-4 flex justify-between items-center text-sm text-gray-500 dark:text-gray-400">
<span>Page 1 of 3</span>
<span>Last modified: 2023-10-26</span>
</div>
</div>
</div>
<!-- Recent Activity / Shared Files (Optional Add-on) -->
<div class="mt-8 pt-6 border-t border-blue-200 dark:border-blue-800">
<h3 class="text-xl font-bold text-blue-800 dark:text-blue-300 mb-4">Recent Activity</h3>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-850 rounded-lg shadow-md p-4 flex items-center space-x-4 border border-blue-100 dark:border-gray-700">
<img class="w-12 h-12 rounded-full object-cover border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div>
<p class="font-medium text-gray-800 dark:text-gray-200">John Doe viewed "Flight Booking"</p>
<p class="text-sm text-gray-500 dark:text-gray-400">5 minutes ago</p>
</div>
</div>
<div class="bg-white dark:bg-gray-850 rounded-lg shadow-md p-4 flex items-center space-x-4 border border-blue-100 dark:border-gray-700">
<img class="w-12 h-12 rounded-full object-cover border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div>
<p class="font-medium text-gray-800 dark:text-gray-200">Jane Smith shared "Itinerary"</p>
<p class="text-sm text-gray-500 dark:text-gray-400">1 hour ago</p>
</div>
</div>
<div class="bg-white dark:bg-gray-850 rounded-lg shadow-md p-4 flex items-center space-x-4 border border-blue-100 dark:border-gray-700">
<img class="w-12 h-12 rounded-full object-cover border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/88.jpg" alt="User Avatar">
<div>
<p class="font-medium text-gray-800 dark:text-gray-200">Admin updated "Boarding Pass"</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Yesterday</p>
</div>
</div>
</div>
</div>
</div>
</div>
Composants associés
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.
Composant Visionneuse de fichiers
Un composant de visualisation de fichiers réactif avec le style Material Design et la prise en charge du mode sombre à l’aide de Tailwind CSS. Le composant affiche une liste de fichiers avec des icônes, des noms, des tailles et des dates de modification.
Composant Visionneuse de fichiers
Un composant de visualisation de fichiers nostalgique inspiré de l’esthétique rétro des années 80/90, conçu avec Tailwind CSS et prenant en charge les effets réactifs et les thèmes sombres.