赛博朋克体育媒体嵌入
一个复杂的响应式媒体嵌入组件，专为具有赛博朋克美感的运动/健身应用程序而设计。具有单色深色背景和明亮的霓虹灯点缀、多个交互式元素和完整的深色模式支持。
HTML 代码
<div class="font-sans bg-gray-950 text-emerald-300 min-h-screen p-4 sm:p-8 dark:bg-gray-900 overflow-hidden">
<div class="max-w-7xl mx-auto bg-gray-900 rounded-none shadow-neon-emerald border-t-2 border-l-2 border-emerald-500 overflow-hidden dark:bg-gray-800 dark:border-emerald-700 relative">
<!-- Glitch effect pseudo-element -->
<div class="absolute inset-0 z-0 pointer-events-none after:content-[''] after:absolute after:inset-0 after:bg-gradient-to-br after:from-emerald-900/50 after:to-transparent after:animate-flicker">
</div>
<!-- Header -->
<div class="relative z-10 px-6 py-4 border-b border-emerald-700/50 flex items-center justify-between">
<h2 class="text-2xl sm:text-3xl font-bold tracking-wider uppercase text-emerald-400 drop-shadow-md shadow-emerald-500/50">
<span class="block transform -skew-x-12">Live Stream_</span>
<span class="block text-xs sm:text-sm text-emerald-500 uppercase ml-2">// Cyber-Arena</span>
</h2>
<div class="flex space-x-2">
<button class="px-3 py-1 bg-emerald-700 hover:bg-emerald-600 text-white text-xs font-semibold uppercase rounded-sm transition-colors duration-200 border border-emerald-500 shadow-sm shadow-emerald-500/30">RECORD</button>
<button class="px-3 py-1 bg-gray-800 hover:bg-gray-700 text-emerald-300 text-xs font-semibold uppercase rounded-sm border border-emerald-700 shadow-sm shadow-emerald-700/30">VIEW ALL</button>
</div>
</div>
<div class="relative z-10 grid grid-cols-1 lg:grid-cols-3 gap-0">
<!-- Main Video Player Section -->
<div class="lg:col-span-2 bg-black overflow-hidden relative group">
<div class="aspect-video w-full bg-gray-900 flex items-center justify-center">
<!-- Placeholder for video player -->
<img src="https://picsum.photos/1280/720?random=1" alt="Live Sports Event" class="w-full h-full object-cover opacity-80 group-hover:scale-105 transition-transform duration-500 ease-in-out">
<div class="absolute inset-0 flex items-center justify-center p-4">
<div class="bg-emerald-800/60 backdrop-blur-sm p-4 rounded-lg border border-emerald-600 text-center text-white/90 shadow-lg shadow-emerald-500/40">
<svg class="w-16 h-16 mx-auto mb-2 text-emerald-300 animate-pulse" 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>
<p class="text-sm sm:text-lg font-bold uppercase tracking-wide">STREAM PENDING: ARENA INITIALIZING...</p>
<p class="text-xs text-emerald-200 mt-1">Estimated Start: 13:00 GMT+1</p>
</div>
</div>
</div>
<!-- Player Controls (simple placeholders) -->
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-gray-900 to-transparent p-4 flex items-center justify-between text-emerald-300 text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<div class="flex items-center space-x-2">
<svg class="w-5 h-5" 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>
<span>00:15 / 23:45</span>
</div>
<div class="flex items-center space-x-2">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11 5H6a2 2 0 00-2 2v2a2 2 0 002 2h1v4a2 2 0 002 2h2a2 2 0 002-2v-4h1a2 2 0 002-2V7a2 2 0 00-2-2h-3zm-1 9v-3h-3V7h7v4h-3v3z"></path></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"></path><path fill-rule="evenodd" d="M.458 10C1.732 5.552 6.858 2 12 2c5.142 0 10.268 3.552 11.542 8-.268.587-.542 1.25-.8 1.9-.3-.55-.6-1.127-.9-1.7zm13.197-2.316l-3.3 3.3a1 1 0 01-1.414 0l-3.3-3.3a1 1 0 011.414-1.414L10 8.586l2.096-2.096a1 1 0 011.414 1.414z" clip-rule="evenodd"></path></svg>
</div>
</div>
</div>
<!-- Information / Chat Sidebar -->
<div class="lg:col-span-1 border-t-2 border-emerald-700/50 lg:border-t-0 lg:border-l-2 bg-gray-900 flex flex-col dark:bg-gray-800">
<!-- Tabs for Info / Chat -->
<div class="flex text-sm sm:text-base border-b-2 border-emerald-700/50">
<button class="flex-1 py-3 px-2 text-center uppercase tracking-wide font-bold text-emerald-300 border-r border-emerald-700/50 hover:bg-emerald-900/40 dark:hover:bg-emerald-700/40 transition-colors duration-200 active-tab">
OVERVIEW
</button>
<button class="flex-1 py-3 px-2 text-center uppercase tracking-wide font-bold text-emerald-500 hover:bg-emerald-900/40 dark:hover:bg-emerald-700/40 transition-colors duration-200">
LIVE CHAT
</button>
</div>
<!-- Content Area -->
<div class="flex-1 p-4 sm:p-6 overflow-y-auto space-y-4 max-h-[400px] lg:max-h-[unset]">
<!-- Overview Content -->
<div class="space-y-4">
<div>
<h3 class="text-xl font-bold text-emerald-400 mb-2 uppercase border-b border-emerald-700/50 pb-1">Event Details_</h3>
<p class="text-emerald-200 text-sm leading-relaxed tracking-tight">
Witness the ultimate showdown: 'Gravity Gauntlet' Season Finals. Teams 'Neon Raptors' and 'Circuit Breakers' clash in a zero-G tactical combat for championship supremacy.
Expected duration: 2 hours. High-tension action guaranteed.
</p>
</div>
<div>
<h3 class="text-xl font-bold text-emerald-400 mb-2 uppercase border-b border-emerald-700/50 pb-1">Key Players_</h3>
<div class="space-y-3">
<div class="flex items-center space-x-3 bg-gray-800 p-2 rounded-sm border border-emerald-800/50 shadow-inner shadow-emerald-900/20">
<img class="w-10 h-10 rounded-full border-2 border-emerald-500" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Player Avatar">
<div>
<p class="font-semibold text-emerald-300">SYNTAX_ERROR</p>
<p class="text-emerald-400 text-xs">Neon Raptors - Striker</p>
</div>
</div>
<div class="flex items-center space-x-3 bg-gray-800 p-2 rounded-sm border border-emerald-800/50 shadow-inner shadow-emerald-900/20">
<img class="w-10 h-10 rounded-full border-2 border-emerald-500" src="https://randomuser.me/api/portraits/women/67.jpg" alt="Player Avatar">
<div>
<p class="font-semibold text-emerald-300">GHOST_PRØPHET</p>
<p class="text-emerald-400 text-xs">Circuit Breakers - Architect</p>
</div>
</div>
</div>
</div>
<div>
<h3 class="text-xl font-bold text-emerald-400 mb-2 uppercase border-b border-emerald-700/50 pb-1">Stats & Analytics_</h3>
<ul class="text-emerald-200 text-sm space-y-1">
<li class="flex justify-between"><span>AVG. APM:</span> <span class="text-emerald-300">320</span></li>
<li class="flex justify-between"><span>K/D Ratio:</span> <span class="text-emerald-300">1.87</span></li>
<li class="flex justify-between"><span>ACCURACY:</span> <span class="text-emerald-300">89.2%</span></li>
</ul>
</div>
</div>
</div>
<!-- Ad/Sponsor Section -->
<div class="p-4 sm:p-6 border-t-2 border-emerald-700/50 bg-gray-950 dark:bg-gray-850">
<h3 class="text-lg font-bold text-emerald-500 mb-2 uppercase">Sponsored By_</h3>
<div class="flex items-center justify-center bg-gray-800 h-20 rounded-sm border border-emerald-700/50 shadow-inner shadow-emerald-900/20">
<span class="text-emerald-600 text-3xl font-mono opacity-80 animate-pulse">NEXUS_TECH</span>
</div>
</div>
</div>
</div>
<!-- Footer (simple for status) -->
<div class="relative z-10 px-6 py-3 bg-gray-950 border-t-2 border-emerald-700/50 text-emerald-500 flex items-center justify-end text-xs sm:text-sm uppercase tracking-wide dark:bg-gray-850">
<span class="block transform -skew-x-6 text-emerald-400">STATUS: </span>
<span class="ml-1 text-emerald-300 animate-pulse">_ONLINE</span>
</div>
</div>
</div>
<style>
/* Define the flicker animation for the pseudo-element */
@keyframes flicker {
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
filter: brightness(1) opacity(0);
}
20%, 24%, 55% {
filter: brightness(1.5) opacity(0.2);
}
}
.shadow-neon-emerald {
box-shadow: 0 0 15px rgba(52, 211, 153, 0.6), /* emerald-300 */
0 0 30px rgba(16, 185, 129, 0.4), /* emerald-500 */
0 0 45px rgba(5, 150, 105, 0.2); /* emerald-700 */
}
/* Custom scrollbar for Webkit browsers */
.overflow-y-auto::-webkit-scrollbar {
width: 8px;
}
.overflow-y-auto::-webkit-scrollbar-track {
background: #111827; /* gray-900 */
}
.overflow-y-auto::-webkit-scrollbar-thumb {
background: #065F46; /* emerald-700 */
border-radius: 4px;
}
.overflow-y-auto::-webkit-scrollbar-thumb:hover {
background: #047857; /* emerald-600 */
}
/* Specific glitch effect on header for more subtle animation */
.drop-shadow-md {
text-shadow: 0 0 5px currentColor,
0 0 10px currentColor,
0 0 15px currentColor;
animation: text-glitch 1s infinite alternate;
}
@keyframes text-glitch {
0% { transform: translate(1px, 1px) skewX(0); }
20% { transform: translate(-1px, 2px) skewX(-2deg); }
40% { transform: translate(-2px, -1px) skewX(0); }
60% { transform: translate(2px, 1px) skewX(2deg); }
80% { transform: translate(-1px, -2px) skewX(0); }
100% { transform: translate(1px, 1px) skewX(-1deg); }
}
@media (prefers-color-scheme: dark) {
.dark\:bg-gray-900 {
background-color: #111827 !important; /* Tailwind's gray-900 */
}
.dark\:border-emerald-700 {
border-color: #047857 !important; /* Tailwind's emerald-700 */
}
.dark\:bg-gray-800 {
background-color: #1F2937 !important; /* Tailwind's gray-800 */
}
.dark\:hover\:bg-emerald-700\/40:hover {
background-color: rgba(4, 120, 87, 0.4) !important; /* emerald-700/40 */
}
.dark\:bg-gray-850 {
background-color: #18202b !important; /* Slightly lighter than 900 for distinction */
}
}
</style>