Skeuomorphic_Farm_Video_Player
Un componente de reproductor de video skeuomórfico diseñado para sitios web agrícolas y agrícolas, con blanco y negro con un color de acento brillante, diseño receptivo y soporte para modo oscuro.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 sm:p-6 lg:p-8">
<div class="w-full max-w-4xl bg-gray-200 dark:bg-gray-800 rounded-3xl shadow-xl border-4 border-gray-300 dark:border-gray-700 p-6 sm:p-8 transform perspective-1000">
<!-- Top Bezel / Screen Area -->
<div class="relative bg-black rounded-xl overflow-hidden shadow-inner-lg shadow-gray-400/30 dark:shadow-black/50 aspect-video mb-6">
<img src="https://picsum.photos/1280/720?random=1" alt="Video Thumbnail" class="object-cover w-full h-full" />
<!-- Play Button Overlay -->
<div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-30">
<button class="w-24 h-24 rounded-full bg-green-500 hover:bg-green-600 focus:outline-none focus:ring-4 focus:ring-green-400 focus:ring-opacity-75 transition-all duration-300 transform active:scale-95 shadow-lg shadow-green-500/50 flex items-center justify-center group">
<svg class="w-12 h-12 text-white group-hover:scale-110 transition-transform duration-300" 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 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
</div>
<!-- Controls Area -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Left Controls: Playback & Volume -->
<div class="flex justify-around items-center bg-gray-300 dark:bg-gray-700 rounded-2xl p-4 shadow-inner shadow-gray-400/40 dark:shadow-black/60">
<button class="p-3 rounded-full bg-gray-400 dark:bg-gray-600 shadow-md shadow-gray-500/50 dark:shadow-black/70 hover:bg-gray-500 dark:hover:bg-gray-500 transition-colors active:scale-95 transform">
<svg class="w-6 h-6 text-gray-800 dark:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a1 1 0 011-1h4a1 1 0 110 2H6v10a1 1 0 11-2 0V4zm10 0a1 1 0 011-1h4a1 1 0 110 2h-3v10a1 1 0 11-2 0V4z" clip-rule="evenodd"></path></svg>
</button>
<button class="p-3 rounded-full bg-green-500 dark:bg-green-600 shadow-md shadow-green-500/40 dark:shadow-green-700/60 hover:bg-green-600 dark:hover:bg-green-700 transition-colors active:scale-95 transform">
<svg class="w-8 h-8 text-white" 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 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
</button>
<button class="p-3 rounded-full bg-gray-400 dark:bg-gray-600 shadow-md shadow-gray-500/50 dark:shadow-black/70 hover:bg-gray-500 dark:hover:bg-gray-500 transition-colors active:scale-95 transform">
<svg class="w-6 h-6 text-gray-800 dark:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4 4a1 1 0 011-1h4a1 1 0 110 2H6v10a1 1 0 11-2 0V4zm10 0a1 1 0 011-1h4a1 1 0 110 2h-3v10a1 1 0 11-2 0V4z" clip-rule="evenodd"></path></svg>
</button>
</div>
<!-- Right Controls: Progress Bar & More Options -->
<div class="flex flex-col justify-between bg-gray-300 dark:bg-gray-700 rounded-2xl p-4 shadow-inner shadow-gray-400/40 dark:shadow-black/60">
<div class="relative w-full h-4 bg-gray-400 dark:bg-gray-600 rounded-full mb-4 shadow-inset-sm shadow-gray-500/30 dark:shadow-black/40">
<div class="absolute h-full w-3/4 bg-green-500 rounded-full shadow-md shadow-green-500/50 dark:shadow-green-700/60"></div>
<div class="absolute h-6 w-6 -right-1 top-1/2 -translate-y-1/2 bg-white dark:bg-gray-200 rounded-full border-2 border-green-500 dark:border-green-600 shadow-lg shadow-black/30 dark:shadow-black/50 cursor-pointer"></div>
</div>
<div class="flex justify-between items-center">
<span class="text-gray-700 dark:text-gray-300 text-sm font-semibold mr-2">0:45 / 2:30</span>
<button class="p-2 rounded-full bg-gray-400 dark:bg-gray-600 shadow-md shadow-gray-500/50 dark:shadow-black/70 hover:bg-gray-500 dark:hover:bg-gray-500 transition-colors active:scale-95 transform">
<svg class="w-5 h-5 text-gray-800 dark:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 00-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM17 4a1 1 0 00-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4z"></path></svg>
</button>
<button class="p-2 rounded-full bg-gray-400 dark:bg-gray-600 shadow-md shadow-gray-500/50 dark:shadow-black/70 hover:bg-gray-500 dark:hover:bg-gray-500 transition-colors active:scale-95 transform">
<svg class="w-5 h-5 text-gray-800 dark:text-gray-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9.546 15.58a.75.75 0 01.442.263l6.5-6.5a.75.75 0 011.06 1.06l-6.208 6.207a2.25 2.25 0 01-3.182 0l-4.25-4.25a.75.75 0 011.06-1.06l4.25 4.25a.75.75 0 001.06 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.5 10.5a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H5.25a.75.75 0 01-.75-.75z" clip-rule="evenodd"></path></svg>
</button>
</div>
</div>
</div>
</div>
</div>
<style>
/* Custom shadow utilities for skeuomorphism */
.shadow-inner-lg {
box-shadow: inset 0 6px 12px -2px rgba(0, 0, 0, 0.4), inset 0 -6px 12px -2px rgba(255, 255, 255, 0.2), inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.dark .shadow-inner-lg {
box-shadow: inset 0 6px 12px -2px rgba(0, 0, 0, 0.6), inset 0 -6px 12px -2px rgba(255, 255, 255, 0.05), inset 0 2px 4px rgba(0, 0, 0, 0.2);
}
.shadow-inset-sm {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 -1px 2px rgba(255, 255, 255, 0.1);
}
.dark .shadow-inset-sm {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 -1px 2px rgba(255, 255, 255, 0.05);
}
/* Perspective for a slight 3D tilt */
.perspective-1000 {
transform: rotateX(2deg) rotateY(0deg);
}
@media (max-width: 639px) {
.perspective-1000 {
transform: none; /* Disable perspective on small screens */
}
}
</style>Componentes relacionados
Componente de reproductor de vídeo
Un componente de reproductor de vídeo responsivo diseñado con el estilo Neumorphism, utilizando Tailwind CSS. Cuenta con soporte para el modo oscuro con sombras sutiles para dar una apariencia de interfaz de usuario suave.
Componente de reproductor de video de modo oscuro retro
Un componente de reproductor de video receptivo diseñado para aplicaciones deportivas / fitness, con una paleta de colores retro apagados y soporte completo para el modo oscuro. Incluye vídeo de marcador de posición y controles con una línea de tiempo.
Componente del reproductor de vídeo Gradient Rainbow
Un componente de reproductor de video limpio y minimalista para tableros, con un esquema de colores de arco iris degradado, diseño receptivo y compatibilidad con modo oscuro, que encarna el estilo de tipografía suiza / internacional.