<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ReLife RP - Hard Roleplay</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://public.radio.co/playerapi/jquery.radiocoplayer.min.js"></script>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav class="navbar">
        <div class="nav-content">
            <a href="#" class="logo">
                <i class="fas fa-gamepad"></i>
                RELIFE RP
            </a>
            <div class="nav-links">
                <a href="#"><i class="fas fa-home"></i> Acasa</a>
                <a href="https://forum.reliferp.ro/index.php?/topic/2-regulament-relife/#comment-2/" target="_blank"><i class="fas fa-book"></i> Regulament</a>
                <a href="https://shop.reliferp.ro/" target="_blank"><i class="fas fa-store"></i> Shop</a>
                <a href="https://discord.gg/reliferp" target="_blank"><i class="fab fa-discord"></i> Discord</a>
            </div>            
        </div>
    </nav>

    <div class="main-container">
        <div class="left-panel">
            <div class="hero-content">
                <h1 class="title">ReLife RP</h1>
                <p class="subtitle">Exploreaza un server unic de FiveM, cu sisteme custom si o comunitate activa. Traieste experienta unui roleplay autentic!</p>
            </div>
            
            <div class="server-info">
                <div class="server-status">
                    <div class="status-dot"></div>
                    <span>Server Online - 128/128 Jucatocasadasdasdri</span>
                </div>
                <div class="connect-info">
                    <i class="fas fa-play-circle connect-icon"></i>
                    <span class="connect-text">connect server.reliferp.ro</span>
                    <button class="connect-button" onclick="window.location.href='fivem://connect/188.212.101.118'">
                        <i class="fas fa-sign-in-alt"></i>
                    </button>
                </div>
            </div>

            <div class="radio-player">
                <div class="radio-controls">
                    <iframe
                    id="ytplayer"
                    width="590"
                    height="250"
                    src="https://www.youtube.com/embed/c-y1He15t7E?autoplay=1&mute=0&controls=1&enablejsapi=1&origin=http://localhost"
                    title="ReLife Radio"
                    frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                    allowfullscreen>
                </iframe>
                
                </div>
            </div>
        </div>

        <div class="right-panel">
            <div class="server-stats">
                <div class="stat-item">
                    <div class="stat-icon">
                        <i class="fas fa-users"></i>
                    </div>
                    <div class="stat-value">1000+</div>
                    <div class="stat-label">Jucatori Activi</div>
                </div>
                <div class="stat-item">
                    <div class="stat-icon">
                        <i class="fas fa-server"></i>
                    </div>
                    <div class="stat-value">24/7</div>
                    <div class="stat-label">Uptime</div>
                </div>
                <div class="stat-item">
                    <div class="stat-icon">
                        <i class="fas fa-clock"></i>
                    </div>
                    <div class="stat-value">100+</div>
                    <div class="stat-label">Jucatori in Ultimele 24h</div>
                </div>
            </div>
        
            <div class="players-grid">
                <div class="players-header">
                    <h3>Jucatori Online</h3>
                    <div class="players-count">0/128</div>
                </div>
                <div class="players-list" id="playersList">
                </div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>
