Composant du lecteur vidéo
Un composant de lecteur vidéo réactif conçu avec une esthétique inspirée du papier/de l’impression et une palette de couleurs complémentaire, adapté aux forums ou aux plates-formes communautaires. Inclut la prise en charge du mode sombre et du HTML sémantique.
HTML Code
<div class="font-sans antialiased bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200 p-4 sm:p-6 lg:p-8 flex items-center justify-center min-h-screen">
<div class="w-full max-w-4xl bg-white dark:bg-gray-850 shadow-lg rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 relative">
<!-- Faux paper texture / watermark -->
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/notebook-dark.png')] opacity-10 dark:opacity-5 pointer-events-none z-0"></div>
<div class="relative z-10 p-4 sm:p-6 lg:p-8">
<!-- Header -->
<div class="flex justify-between items-start mb-6 border-b pb-4 border-amber-200 dark:border-violet-600">
<div>
<h2 class="text-2xl sm:text-3xl font-bold text-amber-700 dark:text-amber-300 leading-tight">Community Highlight: 'The Future of AI'</h2>
<p class="text-sm sm:text-base text-gray-600 dark:text-gray-400 mt-1">Dive into cutting-edge discussions.</p>
</div>
<div class="flex-shrink-0">
<a href="#" class="text-violet-600 dark:text-violet-400 hover:underline text-sm sm:text-base">View Thread</a>
</div>
</div>
<!-- Video Player Area -->
<div class="relative w-full aspect-video bg-black rounded-lg overflow-hidden shadow-md mb-6 border border-gray-300 dark:border-gray-700">
<img src="https://picsum.photos/800/450?random=1" alt="Video Thumbnail" class="w-full h-full object-cover" />
<div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-40">
<button class="p-4 sm:p-5 rounded-full bg-amber-500 text-white shadow-xl hover:bg-amber-600 focus:outline-none focus:ring-4 focus:ring-amber-300 dark:bg-violet-700 dark:hover:bg-violet-800 dark:focus:ring-violet-500 transition-all duration-300 ease-in-out transform hover:scale-105">
<svg class="w-8 h-8 sm:w-10 sm:h-10" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M8 5v14l11-7z"></path>
</svg>
<span class="sr-only">Play Video</span>
</button>
</div>
</div>
<!-- Video Details and Actions -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
<div class="md:col-span-2">
<h3 class="text-xl sm:text-2xl font-semibold text-amber-700 dark:text-amber-300 leading-snug mb-2">Unlocking the Potential of Generative AI</h3>
<p class="text-sm text-gray-700 dark:text-gray-300 leading-relaxed">
Join leading experts as they explore the groundbreaking advancements and ethical considerations of generative artificial intelligence.
This session delves into practical applications and future implications.
</p>
</div>
<div class="md:col-span-1 flex flex-col items-start md:items-end">
<div class="flex items-center text-sm mb-2 text-gray-600 dark:text-gray-400">
<svg class="w-4 h-4 mr-1 text-amber-600 dark:text-amber-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
<span>Posted: <time datetime="2023-10-26">Oct 26, 2023</time></span>
</div>
<div class="flex items-center text-sm mb-4 text-gray-600 dark:text-gray-400">
<svg class="w-4 h-4 mr-1 text-violet-600 dark:text-violet-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 4v-4H4a2 2 0 01-2-2V5zm10 4a1 1 0 100-2 1 1 0 000 2zm-1-4a1 1 0 100-2 1 1 0 000 2zm-5 0a1 1 0 100-2 1 1 0 000 2z"></path></svg>
<span>Views: 1.2K</span>
</div>
<div class="flex space-x-2">
<button class="flex items-center px-3 py-2 rounded-full text-white bg-violet-600 hover:bg-violet-700 dark:bg-violet-700 dark:hover:bg-violet-800 text-sm transition-colors duration-200">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18 13v6a2 2 0 01-2 2H4a2 2 0 01-2-2V8c0-1.1.9-2 2-2h4l2-2h6a2 2 0 012 2v3zM7 6a1 1 0 01-2 0V4a1 1 0 012 0h2a1 1 0 010 2H7z"></path></svg>
Share
</button>
<button class="flex items-center px-3 py-2 rounded-full text-violet-700 bg-violet-100 hover:bg-violet-200 dark:bg-violet-900 dark:text-violet-300 dark:hover:bg-violet-800 text-sm transition-colors duration-200">
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 11-3 0v-6zM6 10.333v5.5H18V4.467a2 2 0 00-2-2H8a2 2 0 00-2 2v5.866zM10 6a1 1 0 011-1h2a1 1 0 110 2h-2a1 1 0 01-1-1zm0 4a1 1 0 011-1h2a1 1 0 110 2h-2a1 1 0 01-1-1zm-4 4a1 1 0 011-1h2a1 1 0 110 2H7a1 1 0 01-1-1z"></path></svg>
Add to Watchlist
</button>
</div>
</div>
</div>
<!-- Uploader Info -->
<div class="flex items-center p-4 bg-amber-50 dark:bg-amber-900/20 rounded-lg border border-amber-200 dark:border-amber-700">
<img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full mr-4 object-cover border-2 border-amber-400 dark:border-violet-500" src="https://randomuser.me/api/portraits/men/7.jpg" alt="Uploader Avatar">
<div>
<p class="font-medium text-amber-800 dark:text-amber-200">Uploaded by: <a href="#" class="hover:underline text-amber-700 dark:text-amber-300">TechExplorer</a></p>
<p class="text-sm text-gray-600 dark:text-gray-400">Senior Member, AI Innovations Forum</p>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant du lecteur vidéo
Un composant de lecteur vidéo complexe et réactif pour le commerce électronique, avec des couleurs triadiques et un design axé sur la micro-interaction. Comprend les commandes de lecture, le volume, la barre de progression, le plein écran, les paramètres et une superposition de produit, avec une prise en charge complète du mode sombre.
Lecteur vidéo
Composant de lecteur vidéo avec micro-interactions, palette de couleurs complémentaires, complexité modérée et conception réactive avec prise en charge du thème sombre pour une utilisation en portefeuille.