ferzui

Entertainment Components

Komponen untuk music player, video gallery, games, streaming, dan social media yang menarik.

Music Player

Music player yang lengkap dengan controls, playlist, dan visual feedback.

🎵

Amazing Song

Amazing Artist

2:30 4:15
🔊
🎵
Amazing Song

Amazing Artist

4:15
🎶
Beautiful Melody

Beautiful Singer

3:45
🎼
Epic Symphony

Epic Orchestra

5:20
<div class="music-player">
  <div class="music-player-header">
    <div class="music-cover">🎵</div>
    <div class="music-info">
      <h4>Amazing Song</h4>
      <p class="music-artist">Amazing Artist</p>
    </div>
  </div>
  
  <div class="music-player-body">
    <div class="music-progress">
      <div class="music-progress-bar">
        <div class="music-progress-fill" style="width: 60%;"></div>
      </div>
      <div class="music-time">
        <span>2:30</span>
        <span>4:15</span>
      </div>
    </div>
    
    <div class="music-controls">
      <button class="music-control-btn">⏮</button>
      <button class="music-control-btn primary">▶</button>
      <button class="music-control-btn">⏭</button>
    </div>
  </div>
</div>

Gallery video dengan thumbnail, play button, dan metadata.

Video thumbnail
▶
5:30

Amazing Video Tutorial

JD
John Doe
1.2K views 45 likes
Video thumbnail
▶
3:15

Cool Video Content

JS
Jane Smith
856 views 32 likes 
<div class="video-gallery">
  <div class="video-card">
    <div class="video-thumbnail">
      <img src="thumbnail.jpg" alt="Video thumbnail">
      <div class="video-play-btn">▶</div>
      <div class="video-duration">5:30</div>
    </div>
    <div class="video-info">
      <h4 class="video-title">Amazing Video Tutorial</h4>
      <div class="video-meta">
        <div class="video-channel">
          <div class="video-channel-avatar">JD</div>
          <span>John Doe</span>
        </div>
        <div class="video-stats">
          <span class="video-views">1.2K views</span>
          <span class="video-likes">45 likes</span>
        </div>
      </div>
    </div>
  </div>
</div>

Game Components

Komponen untuk berbagai jenis game yang interaktif.

Tic Tac Toe

X
O
O
X
Player X's turn
<div class="game-container">
  <h3 class="game-title">Tic Tac Toe</h3>
  <div class="game-board">
    <div class="game-cell x">X</div>
    <div class="game-cell o">O</div>
    <div class="game-cell"></div>
    <!-- More cells -->
  </div>
  <div class="game-status">Player X's turn</div>
  <div class="game-controls">
    <button class="game-btn primary">New Game</button>
    <button class="game-btn secondary">Reset</button>
  </div>
</div>

Memory Game

Game memori dengan kartu yang dapat dibalik.

🎵
🎶
🎼
🎼
🎵
🎶
🎤
🎤
<div class="memory-game">
  <div class="memory-card flipped">
    <div class="memory-card-front">🎵</div>
    <div class="memory-card-back"></div>
  </div>
  <div class="memory-card matched">
    <div class="memory-card-front">🎼</div>
    <div class="memory-card-back"></div>
  </div>
  <!-- More cards -->
</div>

Snake Game

Game snake klasik dengan score tracking.

Score: 150
<div class="snake-game">
  <div class="snake-board">
    <div class="snake-segment" style="top: 20px; left: 20px;"></div>
    <div class="snake-segment" style="top: 20px; left: 40px;"></div>
    <div class="snake-food" style="top: 100px; left: 200px;"></div>
  </div>
  <div class="snake-score">Score: 150</div>
</div>

Social Media Components

Komponen untuk social media posts dengan interactions.

<div class="social-post">
  <div class="social-post-header">
    <div class="social-avatar">JD</div>
    <div class="social-user-info">
      <h5>John Doe</h5>
      <p>2 hours ago</p>
    </div>
  </div>
  
  <div class="social-post-content">
    Just finished building an amazing UI framework! 🚀
  </div>
  
  <img src="image.jpg" class="social-post-image" alt="Post image">
  
  <div class="social-post-actions">
    <button class="social-action liked">
      <span class="social-action-icon">❤️</span>
      <span>42</span>
    </button>
    <button class="social-action">
      <span class="social-action-icon">💬</span>
      <span>8</span>
    </button>
  </div>
</div>

Streaming Components

Komponen untuk live streaming dengan chat dan viewer count.

Live Coding Session

1,234 viewers
User123: Amazing work! 👏
DevMaster: Can you explain the CSS Grid part?
CoderGirl: This is so helpful! Thank you! 🙏 
<div class="stream-player">
  <video class="stream-video" autoplay muted></video>
  
  <div class="stream-overlay">
    <div class="stream-info">
      <h3 class="stream-title">Live Coding Session</h3>
      <div class="stream-viewer-count">1,234 viewers</div>
    </div>
  </div>
  
  <div class="stream-chat">
    <div class="stream-chat-message">
      <span class="stream-chat-username">User123:</span>
      <span>Amazing work! 👏</span>
    </div>
  </div>
</div>