Componenti Visualizzatore di file Componente Visualizzatore file

Componente Visualizzatore file

Un componente visualizzatore di file reattivo con uno stile acquerello/artistico e una combinazione di colori blu aziendale, adatto per siti Web di viaggi/turismo. Include il supporto per la modalità oscura.

Anteprima

Codice HTML

<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>

Componenti correlati

Componente Visualizzatore file retrò

Componente visualizzatore di file retrò/vintage con layout reattivo e supporto per temi scuri. Include un elenco di file con icone e nomi e un'area di anteprima. Utilizza caratteri e colori in stile retrò.

Aperto

Componente Visualizzatore file

Un componente visualizzatore di file reattivo con i principi di Material Design utilizzando Tailwind CSS, con supporto per il tema scuro.

Aperto

Componente Visualizzatore file

Un componente complesso per la visualizzazione di file progettato per un portfolio, dotato di modalità scura con colori complementari, che mostra un albero di file, un'anteprima del contenuto e informazioni dettagliate. Completamente reattivo.

Aperto