<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Black Market</title>
    <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <script src="nui://game/ui/jquery.js"></script>
</head>
<body>
    <div id="blackmarket">
        <div class="market-container">
            <div class="header">
                <div class="title-container">
                    <h1>BLACK MARKET</h1>
                    <p class="description">Les meilleures armes, la meilleure qualité. Paiement en argent sale uniquement.</p>
                    <div class="scan-line"></div>
                </div>
                <p class="subtitle">SYSTÈME D'ARMEMENT AVANCÉ</p>
            </div>

            <div class="weapons-grid">
       
                <div class="weapon-card">
                    <div class="weapon-header">
                        <span class="weapon-type">FUSIL D'ASSAUT</span>
                        <span class="weapon-price">$300,000</span>
                    </div>
                    <div class="weapon-content">
                        <div class="weapon-image">
                            <img src="img/special_carbine.png" alt="Special Carbine">
                        </div>
                        <h2>SPECIAL CARBINE</h2>
                        <div class="weapon-stats">
                            <div class="stat">
                                <div class="stat-label">
                                    <span>DÉGÂTS</span>
                                    <span class="stat-value">75%</span>
                                </div>
                                <div class="stat-bar">
                                    <div class="stat-fill" style="width: 75%"></div>
                                </div>
                            </div>
                            <div class="stat">
                                <div class="stat-label">
                                    <span>PRÉCISION</span>
                                    <span class="stat-value">85%</span>
                                </div>
                                <div class="stat-bar">
                                    <div class="stat-fill" style="width: 85%"></div>
                                </div>
                            </div>
                            <div class="stat">
                                <div class="stat-label">
                                    <span>PORTÉE</span>
                                    <span class="stat-value">65%</span>
                                </div>
                                <div class="stat-bar">
                                    <div class="stat-fill" style="width: 65%"></div>
                                </div>
                            </div>
                        </div>
                        <div class="weapon-footer">
                            <span class="ammo">30 MUNITIONS</span>
                            <div class="purchase-container">
                                <button class="purchase-button" id="purchaseButton">Commander</button>
                            </div>
                        </div>
                    </div>
                </div>

     
                <div class="weapon-card">
                    <div class="weapon-header">
                        <span class="weapon-type">FUSIL TACTIQUE</span>
                        <span class="weapon-price">$480,000</span>
                    </div>
                    <div class="weapon-content">
                        <div class="weapon-image">
                            <img src="img/advanced_carbine.png" alt="Advanced Rifle">
                        </div>
                        <h2>ADVANCED RIFLE</h2>
                        <div class="weapon-stats">
                            <div class="stat">
                                <div class="stat-label">
                                    <span>DÉGÂTS</span>
                                    <span class="stat-value">80%</span>
                                </div>
                                <div class="stat-bar">
                                    <div class="stat-fill" style="width: 80%"></div>
                                </div>
                            </div>
                            <div class="stat">
                                <div class="stat-label">
                                    <span>PRÉCISION</span>
                                    <span class="stat-value">90%</span>
                                </div>
                                <div class="stat-bar">
                                    <div class="stat-fill" style="width: 90%"></div>
                                </div>
                            </div>
                            <div class="stat">
                                <div class="stat-label">
                                    <span>PORTÉE</span>
                                    <span class="stat-value">70%</span>
                                </div>
                                <div class="stat-bar">
                                    <div class="stat-fill" style="width: 70%"></div>
                                </div>
                            </div>
                        </div>
                        <div class="weapon-footer">
                            <span class="ammo">45 MUNITIONS</span>
                            <div class="purchase-container">
                                <button class="purchase-button" id="purchaseButton">Commander</button>
                            </div>
                        </div>
                    </div>
                </div>

           
                <div class="weapon-card">
                    <div class="weapon-header">
                        <span class="weapon-type">FUSIL DE COMBAT</span>
                        <span class="weapon-price">$550,000</span>
                    </div>
                    <div class="weapon-content">
                        <div class="weapon-image">
                            <img src="img/blacked_ak.png" alt="Assault Rifle">
                        </div>
                        <h2>BLACKED OUT AK-47</h2>
                        <div class="weapon-stats">
                            <div class="stat">
                                <div class="stat-label">
                                    <span>DÉGÂTS</span>
                                    <span class="stat-value">95%</span>
                                </div>
                                <div class="stat-bar">
                                    <div class="stat-fill" style="width: 95%"></div>
                                </div>
                            </div>
                            <div class="stat">
                                <div class="stat-label">
                                    <span>PRÉCISION</span>
                                    <span class="stat-value">75%</span>
                                </div>
                                <div class="stat-bar">
                                    <div class="stat-fill" style="width: 75%"></div>
                                </div>
                            </div>
                            <div class="stat">
                                <div class="stat-label">
                                    <span>PORTÉE</span>
                                    <span class="stat-value">85%</span>
                                </div>
                                <div class="stat-bar">
                                    <div class="stat-fill" style="width: 85%"></div>
                                </div>
                            </div>
                        </div>
                        <div class="weapon-footer">
                            <span class="ammo">60 MUNITIONS</span>
                            <div class="purchase-container">
                                <button class="purchase-button" id="purchaseButton">Commander</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>
