Lecteur vidéo médical Art Déco
Un composant de lecteur vidéo simple et réactif avec une esthétique Art déco en niveaux de gris, conçu pour les applications médicales/de santé, y compris la prise en charge du mode sombre.
HTML Code
<div class="flex justify-center items-center min-h-screen bg-gray-100 dark:bg-gray-900 font-serif p-4">
<div class="w-full max-w-2xl bg-white dark:bg-gray-800 shadow-lg border-2 border-gray-300 dark:border-gray-700 overflow-hidden relative group">
<!-- Top Art Deco Border Element -->
<div class="absolute top-0 left-0 right-0 h-4 bg-gradient-to-r from-gray-700 via-gray-500 to-gray-700 dark:from-gray-300 dark:via-gray-400 dark:to-gray-300 z-10 opacity-75 group-hover:opacity-100 transition-opacity duration-300">
<div class="flex h-full">
<div class="w-1/4 h-full bg-gray-500 dark:bg-gray-400 transform skew-x-12 -ml-2"></div>
<div class="w-1/4 h-full bg-gray-600 dark:bg-gray-500 transform skew-x-12 -ml-2"></div>
<div class="w-1/4 h-full bg-gray-600 dark:bg-gray-500 transform skew-x-12 -ml-2"></div>
<div class="w-1/4 h-full bg-gray-500 dark:bg-gray-400 transform skew-x-12 -ml-2"></div>
</div>
</div>
<div class="p-4 sm:p-6 lg:p-8 pt-8 relative z-20">
<header class="mb-6 text-center">
<h2 class="text-xl sm:text-2xl lg:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-2 tracking-wider uppercase">
<span class="text-gray-600 dark:text-gray-400 mr-1">Medical</span> <span class="text-gray-900 dark:text-white">Procedure Overview</span>
</h2>
<p class="text-sm text-gray-600 dark:text-gray-400 italic">Understanding the Key Steps</p>
</header>
<div class="relative pb-[56.25%] h-0 mb-6 border border-gray-400 dark:border-gray-600 shadow-inner overflow-hidden">
<!-- Placeholder for actual video embed, use a static image for visual representation only -->
<img src="https://picsum.photos/800/450?gravity=center&blur=2" alt="Medical procedure video placeholder" class="absolute inset-0 w-full h-full object-cover filter brightness-75">
<div class="absolute inset-0 flex items-center justify-center">
<button class="relative z-10 p-4 rounded-full bg-gray-900 bg-opacity-70 dark:bg-gray-100 dark:bg-opacity-70 text-white dark:text-gray-800 hover:scale-110 transition-transform duration-300 transform motion-safe:ease-out ring-4 ring-gray-600 dark:ring-gray-400">
<svg class="w-10 h-10 sm:w-12 sm:h-12" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5v14l11-7z"/>
</svg>
<span class="sr-only">Play Video</span>
</button>
</div>
<!-- Geometric Overlay for Video -->
<div class="absolute inset-0 z-0 opacity-20 dark:opacity-30">
<div class="grid grid-cols-4 grid-rows-4 w-full h-full">
<div class="bg-gray-700 dark:bg-gray-300 border border-gray-800 dark:border-gray-200"></div>
<div class="bg-gray-600 dark:bg-gray-400 border border-gray-700 dark:border-gray-300"></div>
<div class="bg-gray-700 dark:bg-gray-300 border border-gray-800 dark:border-gray-200"></div>
<div class="bg-gray-600 dark:bg-gray-400 border border-gray-700 dark:border-gray-300"></div>
<div class="bg-gray-600 dark:bg-gray-400 border border-gray-700 dark:border-gray-300"></div>
<div class="bg-gray-700 dark:bg-gray-300 border border-gray-800 dark:border-gray-200"></div>
<div class="bg-gray-600 dark:bg-gray-400 border border-gray-700 dark:border-gray-300"></div>
<div class="bg-gray-700 dark:bg-gray-300 border border-gray-800 dark:border-gray-200"></div>
<div class="bg-gray-700 dark:bg-gray-300 border border-gray-800 dark:border-gray-200"></div>
<div class="bg-gray-600 dark:bg-gray-400 border border-gray-700 dark:border-gray-300"></div>
<div class="bg-gray-700 dark:bg-gray-300 border border-gray-800 dark:border-gray-200"></div>
<div class="bg-gray-600 dark:bg-gray-400 border border-gray-700 dark:border-gray-300"></div>
<div class="bg-gray-600 dark:bg-gray-400 border border-gray-700 dark:border-gray-300"></div>
<div class="bg-gray-700 dark:bg-gray-300 border border-gray-800 dark:border-gray-200"></div>
<div class="bg-gray-600 dark:bg-gray-400 border border-gray-700 dark:border-gray-300"></div>
<div class="bg-gray-700 dark:bg-gray-300 border border-gray-800 dark:border-gray-200"></div>
</div>
</div>
</div>
<div class="text-center">
<p class="text-base text-gray-700 dark:text-gray-300 leading-relaxed">
This video provides a concise overview of the essential steps involved in a common medical procedure. For detailed information, please consult with a healthcare professional.
</p>
<p class="text-sm text-gray-500 dark:text-gray-500 mt-2">
<time datetime="PT2M30S">Duration: 2:30</time>
</p>
</div>
</div>
<!-- Bottom Art Deco Border Element -->
<div class="absolute bottom-0 left-0 right-0 h-4 bg-gradient-to-r from-gray-700 via-gray-500 to-gray-700 dark:from-gray-300 dark:via-gray-400 dark:to-gray-300 z-10 opacity-75 group-hover:opacity-100 transition-opacity duration-300">
<div class="flex h-full">
<div class="w-1/4 h-full bg-gray-500 dark:bg-gray-400 transform -skew-x-12 -mr-2"></div>
<div class="w-1/4 h-full bg-gray-600 dark:bg-gray-500 transform -skew-x-12 -mr-2"></div>
<div class="w-1/4 h-full bg-gray-600 dark:bg-gray-500 transform -skew-x-12 -mr-2"></div>
<div class="w-1/4 h-full bg-gray-500 dark:bg-gray-400 transform -skew-x-12 -mr-2"></div>
</div>
</div>
</div>
</div>Composants associés
Neon_Glow_Video_Player
Un composant de lecteur vidéo simple et réactif pour les sites Web d’entreprise, avec des effets de néon/lueur et une palette de couleurs chaudes de coucher de soleil. Inclut la prise en charge du mode sombre.
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.
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.