Composants Intégration des médias Médias sportifs cyberpunk Intégrer

Médias sportifs cyberpunk Intégrer

Un composant multimédia complexe et réactif conçu pour les applications de sport/fitness avec une esthétique cyberpunk. Comprend des arrière-plans sombres monochromes avec des accents de néon brillants, plusieurs éléments interactifs et une prise en charge complète du mode sombre.

Aperçu

HTML Code

<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>

Composants associés

Composant d’intégration de média

Un composant d’intégration multimédia réactif conçu avec Skeuomorphism, à l’aide d’un schéma de couleurs monochromatique. Il comprend un lecteur vidéo, une section de transcription et des boutons de partage social. La conception prend en charge le mode sombre et est construite avec Tailwind CSS.

Ouvrir

Composant d’intégration de média

Composant d’intégration de médias réactifs avec style Glassmorphism, modèle de couleurs analogue et prise en charge du mode sombre pour la consommation de contenu.

Ouvrir

Composant d’intégration de média

Un composant d’intégration multimédia doté d’un style de conception 3D pour plus de profondeur et d’engagement, d’effets réactifs et de prise en charge du mode sombre.

Ouvrir