Brutalist_RealEstate_VideoPlayer
一个复杂的野兽派风格的视频播放器组件，适用于房地产列表，具有高对比度、森林/绿色调色板和响应式设计，支持深色模式。包括属性详细信息、代理信息和作按钮。
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>相关组件
Real Estate Video Player 组件
一个适用于房地产平台的复杂响应式视频播放器组件，具有 Material Design 美学和森林/绿色调色板。包括视频控件、属性详细信息和播放列表，并完全支持深色模式。
视频播放器组件
Glassmorphism 风格的视频播放器，具有磨砂玻璃般的半透明元素、柔和的配色方案和适用于商业/公司网站的复杂界面。它支持使用 Tailwind CSS 的响应式设计和深色主题，无需 JavaScript。