Brutalist_RealEstate_VideoPlayer
Un componente complejo de reproducción de video de estilo brutalista para listados de bienes raíces, con alto contraste, una paleta de colores bosque / verde y diseño receptivo con soporte para modo oscuro. Incluye detalles de la propiedad, información del agente y botones de acción.
Código HTML
<div class="font-mono min-h-screen bg-emerald-100 text-emerald-900 dark:bg-emerald-950 dark:text-emerald-100 p-4 sm:p-8 flex items-center justify-center">
<div class="w-full max-w-6xl border-4 border-emerald-900 dark:border-emerald-100 grid grid-cols-1 lg:grid-cols-3 gap-0 bg-emerald-50 dark:bg-emerald-900 shadow-[8px_8px_0px_0px_rgba(4,72,55,1)] dark:shadow-[8px_8px_0px_0px_rgba(204,251,235,1)]">
<!-- Left Column: Video Player & Controls -->
<div class="col-span-1 lg:col-span-2 border-b-4 lg:border-r-4 lg:border-b-0 border-emerald-900 dark:border-emerald-100 flex flex-col">
<div class="relative w-full aspect-video bg-black group overflow-hidden">
<img src="https://picsum.photos/1280/720?random=1" alt="Property Video Thumbnail" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105 opacity-80">
<div class="absolute inset-0 bg-black/60 flex items-center justify-center opacity-100 group-hover:opacity-75 transition-opacity duration-300">
<svg class="h-24 w-24 sm:h-32 sm:w-32 text-emerald-300 dark:text-emerald-700 border-4 border-emerald-300 dark:border-emerald-700 p-2 cursor-pointer transition-colors duration-300 hover:text-emerald-100 hover:bg-emerald-700 dark:hover:text-emerald-900 dark:hover:bg-emerald-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M7.29 14.71L14.71 12 7.29 9.29V14.71zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" clip-rule="evenodd" />
</svg>
</div>
<div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent text-emerald-100 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<div class="flex items-center justify-between pointer-events-none">
<div class="w-full h-2 bg-emerald-700 dark:bg-emerald-300 relative overflow-hidden">
<div class="absolute top-0 left-0 bg-emerald-300 dark:bg-emerald-700 h-full w-2/5"></div>
</div>
</div>
<div class="flex justify-between items-center mt-2 text-sm">
<span>2:35 / 5:10</span>
<div class="flex gap-2">
<button class="flex items-center gap-1 text-emerald-100 border-2 border-emerald-100 px-2 py-1 hover:bg-emerald-700 hover:border-emerald-700 transition-colors duration-200">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"/></svg>
</button>
<button class="flex items-center gap-1 text-emerald-100 border-2 border-emerald-100 px-2 py-1 hover:bg-emerald-700 hover:border-emerald-700 transition-colors duration-200">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
</button>
</div>
</div>
</div>
</div>
<div class="p-4 sm:p-6 space-y-4 flex-grow flex flex-col justify-between">
<div>
<h2 class="text-2xl sm:text-3xl font-extrabold leading-tight tracking-tighter uppercase mb-2 border-b-2 border-emerald-900 dark:border-emerald-100 pb-1">
Modern Forest Residence
</h2>
<p class="text-xl sm:text-2xl font-bold mb-4 flex items-baseline gap-2">
$1,250,000 <span class="text-lg text-emerald-700 dark:text-emerald-300 font-normal ml-2">• 3 beds • 4 baths • 2,800 sqft</span>
</p>
<p class="text-emerald-700 dark:text-emerald-300 mb-4 text-sm sm:text-base">
123 Evergreen Lane, Forest Hills, CA 90210
</p>
<div class="grid grid-cols-2 lg:grid-cols-4 gap-2 text-xs sm:text-sm pt-2 border-t-2 border-emerald-200 dark:border-emerald-700">
<div class="flex items-center space-x-1">
<svg class="h-4 w-4 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
<span>Built 2022</span>
</div>
<div class="flex items-center space-x-1">
<svg class="h-4 w-4 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
<span>Forest Views</span>
</div>
<div class="flex items-center space-x-1">
<svg class="h-4 w-4 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 002-2V4H4zm10 2a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2V8a2 2 0 012-2h10zm-3 8l3-3m0 0l-3-3m3 3H2v2h12v-2zm-3-4l3-3m0 0l-3-3m3 3H2v2h12v-2z" clip-rule="evenodd"></path></svg>
<span>Large Lot</span>
</div>
</div>
</div>
<div class="flex flex-col sm:flex-row gap-4 mt-6">
<button class="flex-1 bg-emerald-900 text-emerald-100 py-3 sm:py-4 px-6 uppercase text-base sm:text-lg font-bold border-2 border-emerald-900 dark:border-emerald-100 hover:bg-emerald-700 hover:border-emerald-700 dark:hover:bg-emerald-300 dark:hover:text-emerald-900 transition-colors duration-200 shadow-[4px_4px_0px_0px_rgba(4,72,55,1)] dark:shadow-[4px_4px_0px_0px_rgba(204,251,235,1)]">
Schedule Tour
</button>
<button class="flex-1 bg-transparent text-emerald-900 dark:text-emerald-100 py-3 sm:py-4 px-6 uppercase text-base sm:text-lg font-bold border-2 border-emerald-900 dark:border-emerald-100 hover:bg-emerald-700 hover:text-emerald-100 dark:hover:bg-emerald-300 dark:hover:text-emerald-900 transition-colors duration-200 shadow-[4px_4px_0px_0px_rgba(4,72,55,1)] dark:shadow-[4px_4px_0px_0px_rgba(204,251,235,1)]">
Download Info Pack
</button>
</div>
</div>
</div>
<!-- Right Column: Agent & Related Properties -->
<div class="col-span-1 border-emerald-900 dark:border-emerald-100 flex flex-col pt-4 sm:pt-6">
<div class="px-4 sm:px-6 mb-6 flex-shrink-0">
<h3 class="text-lg sm:text-xl font-bold uppercase mb-4 border-b-2 border-emerald-900 dark:border-emerald-100 pb-1">
Listing Agent
</h3>
<div class="flex items-center gap-4">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Agent Emily Green" class="w-20 h-20 sm:w-24 sm:h-24 object-cover border-4 border-emerald-900 dark:border-emerald-100 rounded-full shadow-[4px_4px_0px_0px_rgba(4,72,55,1)] dark:shadow-[4px_4px_0px_0px_rgba(204,251,235,1)]">
<div>
<p class="text-lg sm:text-xl font-bold uppercase leading-snug">Emily Green</p>
<p class="text-sm text-emerald-700 dark:text-emerald-300">Verdant Realty Group</p>
<a href="tel:+15551234567" class="text-sm text-emerald-700 dark:text-emerald-300 hover:underline flex items-center mt-1">
<svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.774a11.037 11.037 0 006.103 6.103l.774-1.548a1 1 0 011.06-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" clip-rule="evenodd"></path></svg>
+1 (555) 123-4567
</a>
</div>
</div>
<button class="w-full mt-4 bg-emerald-700 text-emerald-100 py-2.5 sm:py-3 px-4 uppercase text-sm sm:text-base font-bold border-2 border-emerald-700 dark:border-emerald-100 hover:bg-emerald-900 transition-colors duration-200 shadow-[4px_4px_0px_0px_rgba(4,72,55,1)] dark:shadow-[4px_4px_0px_0px_rgba(204,251,235,1)]">
Contact Emily
</button>
</div>
<div class="flex-grow border-t-4 border-emerald-900 dark:border-emerald-100 pb-4 sm:pb-6 px-4 sm:px-6 overflow-hidden flex flex-col">
<h3 class="text-lg sm:text-xl font-bold uppercase mt-4 mb-4 border-b-2 border-emerald-900 dark:border-emerald-100 pb-1">
Explore Similar Listings
</h3>
<div class="space-y-4 overflow-y-auto custom-scrollbar pr-2">
<!-- Related Property 1 -->
<div class="bg-emerald-100 dark:bg-emerald-800 p-3 border-2 border-emerald-900 dark:border-emerald-100 group shadow-[4px_4px_0px_0px_rgba(4,72,55,1)] dark:shadow-[4px_4px_0px_0px_rgba(204,251,235,1)]">
<img src="https://picsum.photos/300/200?random=2" alt="Related property thumbnail" class="w-full h-32 object-cover mb-2 border-2 border-emerald-900 dark:border-emerald-100 group-hover:scale-105 transition-transform duration-200">
<p class="font-bold text-sm sm:text-base uppercase leading-tight">Lakeside Retreat</p>
<p class="text-emerald-700 dark:text-emerald-300 text-xs sm:text-sm mb-1">$980,000 • 3 beds</p>
<button class="block w-full bg-emerald-900 text-emerald-100 text-xs sm:text-sm px-3 py-1.5 uppercase font-bold border-2 border-emerald-900 dark:border-emerald-100 hover:bg-emerald-700 transition-colors duration-200">
View Details
</button>
</div>
<!-- Related Property 2 -->
<div class="bg-emerald-100 dark:bg-emerald-800 p-3 border-2 border-emerald-900 dark:border-emerald-100 group shadow-[4px_4px_0px_0px_rgba(4,72,55,1)] dark:shadow-[4px_4px_0px_0px_rgba(204,251,235,1)]">
<img src="https://picsum.photos/300/200?random=3" alt="Related property thumbnail" class="w-full h-32 object-cover mb-2 border-2 border-emerald-900 dark:border-emerald-100 group-hover:scale-105 transition-transform duration-200">
<p class="font-bold text-sm sm:text-base uppercase leading-tight">Mountain View Chalet</p>
<p class="text-emerald-700 dark:text-emerald-300 text-xs sm:text-sm mb-1">$1,500,000 • 4 beds</p>
<button class="block w-full bg-emerald-900 text-emerald-100 text-xs sm:text-sm px-3 py-1.5 uppercase font-bold border-2 border-emerald-900 dark:border-emerald-100 hover:bg-emerald-700 transition-colors duration-200">
View Details
</button>
</div>
<!-- Related Property 3 -->
<div class="bg-emerald-100 dark:bg-emerald-800 p-3 border-2 border-emerald-900 dark:border-emerald-100 group shadow-[4px_4px_0px_0px_rgba(4,72,55,1)] dark:shadow-[4px_4px_0px_0px_rgba(204,251,235,1)]">
<img src="https://picsum.photos/300/200?random=4" alt="Related property thumbnail" class="w-full h-32 object-cover mb-2 border-2 border-emerald-900 dark:border-emerald-100 group-hover:scale-105 transition-transform duration-200">
<p class="font-bold text-sm sm:text-base uppercase leading-tight">Urban Eco Loft</p>
<p class="text-emerald-700 dark:text-emerald-300 text-xs sm:text-sm mb-1">$850,000 • 2 beds</p>
<button class="block w-full bg-emerald-900 text-emerald-100 text-xs sm:text-sm px-3 py-1.5 uppercase font-bold border-2 border-emerald-900 dark:border-emerald-100 hover:bg-emerald-700 transition-colors duration-200">
View Details
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
/* Custom Scrollbar for brutalism style */
.custom-scrollbar::-webkit-scrollbar {
width: 12px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: #d1fae5; /* emerald-100 */
border: 2px solid #044837; /* emerald-900 */
}
.dark .custom-scrollbar::-webkit-scrollbar-track {
background: #062f27; /* emerald-950 */
border: 2px solid #ccfbeB; /* emerald-100 */
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #044837; /* emerald-900 */
border: 2px solid #d1fae5; /* emerald-100 */
}
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
background: #ccfbeB; /* emerald-100 */
border: 2px solid #044837; /* emerald-900 */
}
.custom-scrollbar {
scrollbar-width: thin;
scrollbar-color: #044837 #d1fae5; /* thumb color track color */
}
.dark .custom-scrollbar {
scrollbar-color: #ccfbeB #062f27; /* thumb color track color */
}
</style>
Componentes relacionados
Neon_Glow_Video_Player
Un componente de reproducción de video simple y receptivo para sitios web comerciales / corporativos, con efectos de neón / brillo y un esquema de color cálido al atardecer. Incluye soporte para modo oscuro.
Componente de reproductor de vídeo
Un componente de reproductor de video receptivo diseñado para un blog o consumo de contenido con microinteracciones y una combinación de colores pastel. Incluye funcionalidad de reproducción/pausa y un control de volumen. El diseño también incluye soporte para el modo oscuro.
Componente de reproductor de vídeo
Un componente de reproductor de video minimalista diseñado para interfaces de redes sociales, con un diseño receptivo con soporte para temas oscuros.