<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com"> 
     
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link src="./fonts/burbankbigcondensed-bold-webfont.woff" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="./script.js"></script>
    <link rel="stylesheet" href="./style.css">
    <title>INVENTORY NEVERDIEPVP</title>
</head>
<body>
    <div class="bg">
        <div class="avatar-container">
            <div class="text-container">
                <span class="player-name" id="playerName">Nom du joueur</span>
                <span class="player-points" id="playerPoints">0 Points</span>
            </div>
            <img class="steam-avatar" id="steamAvatar" src="img/profilsteam.png" alt="Steam Avatar">
        </div>
        <div class="button-container">
            <button class="my-button" onclick="SetCurrentPage('leaderboard')">LEADERBOARD</button>
            <button class="my-button" onclick="SetCurrentPage('inventaire')">INVENTORY</button>
            <img class="imgg" src="assets/logo.png" onclick="opendiscord()">
            <button class="my-button" onclick="SetCurrentPage('gfxprofile-main-contain')">CREW</button>
            <button class="my-button" onclick="SetCurrentPage('settings')">SETTINGS</button>
        </div>
        <div class="blueline"></div>
    </div>
    <div id="context-menu" style="display:none; z-index:1000;">
        <p class="contexte-title">Trade Menu<p> 
        <ul id="player-list">
            <!-- Player names  -->
        </ul>
    </div>
    </div>
    <div class="gfxinv-main-contain">
        <div class="gfxinv-player-inv">
            <div class="gfxinv-inv-header">
                <h1>MY BAG</h1>
                <div class="header-weight">
                </div>
            </div>
            <div class="gfxinv-inv-content">
                <div class="gfxinv-item-slot ${v.rarity}-item" data-key=${v.name} data-itemdata=${JSON.stringify({itemName: v.name, itemCount: v.count, currentContainer: inventoryType})}>
                    <div class="item-slot-state"></div>
                    <div class="image-bg">
                        <img src="assets/deluxo.png" alt="">
                    </div>
                    <div class="item-slot-info">
                        <h1>Deluxo</h1>
                    </div>
                    <p class="item-count">2x</p>
                </div>
                <div class="gfxinv-item-slot ${v.rarity}-item" data-key=${v.name} data-itemdata=${JSON.stringify({itemName: v.name, itemCount: v.count, currentContainer: inventoryType})}>
                    <div class="item-slot-state"></div>
                    <div class="image-bg">
                        <img src="assets/deluxo.png" alt="">
                    </div>
                    <div class="item-slot-info">
                        <h1>Deluxo</h1>
                    </div>
                    <p class="item-count">2x</p>
                </div>
                <div class="gfxinv-item-slot ${v.rarity}-item" data-key=${v.name} data-itemdata=${JSON.stringify({itemName: v.name, itemCount: v.count, currentContainer: inventoryType})}>
                    <div class="item-slot-state"></div>
                    <div class="image-bg">
                        <img src="assets/deluxo.png" alt="">
                    </div>
                    <div class="item-slot-info">
                        <h1>Deluxo</h1>
                    </div>
                    <p class="item-count">2x</p>
                </div>
            </div>
        </div>
        <div class="gfxinv-protected-inv"> 
            <div class="gfxinv-inv-header">
                <h1>PROTECTED CONTAINER</h1>    
                <div class="header-weight">
                    <div class="weight-text">
                    </div>
                </div>
            </div>
            <div class="gfxinv-inv-content">
                <div class="gfxinv-item-slot ${v.rarity}-item" data-key=${v.name} data-itemdata=${JSON.stringify({itemName: v.name, itemCount: v.count, currentContainer: inventoryType})}>
                    <div class="item-slot-state"></div>
                    <div class="image-bg">
                        <img src="assets/deluxo.png" alt="">
                    </div>
                    <div class="item-slot-info">
                        <h1>Deluxo</h1>
                    </div>
                    <p class="item-count">2x</p>
                </div>
                <div class="gfxinv-item-slot ${v.rarity}-item" data-key=${v.name} data-itemdata=${JSON.stringify({itemName: v.name, itemCount: v.count, currentContainer: inventoryType})}>
                    <div class="item-slot-state"></div>
                    <div class="image-bg">
                        <img src="assets/deluxo.png" alt="">
                    </div>
                    <div class="item-slot-info">
                        <h1>Deluxo</h1>
                    </div>
                    <p class="item-count">2x</p>
                </div>
            </div>
        </div>
        <div class="gfxinv-hotbar-inv"> 
            <div class="gfxinv-hotbarinv-header">
                <h1>HOTBAR</h1>
            </div>
            <div class="gfxinv-hotbarinv-content">
                <div class="gfxinv-item-slot common-item" data-id="1" name="hotbar">
                    <div class="item-slot-state"></div>
                    <div class="item-slot-info">
                        <h1></h1>
                    </div>
                    <div class="hotbarslot-numbers">
                        <h1>1</h1>
                    </div>
                </div>
                <div class="gfxinv-item-slot common-item" data-id="2" name="hotbar">
                    <div class="item-slot-state"></div>
                    <div class="item-slot-info">
                        <h1></h1>
                    </div>
                    <div class="hotbarslot-numbers">
                        <h1>2</h1>
                    </div>
                </div>
                <div class="gfxinv-item-slot common-item" data-id="3" name="hotbar">
                    <div class="item-slot-state"></div>
                    <div class="item-slot-info">
                        <h1></h1>
                    </div>
                    <div class="hotbarslot-numbers">
                        <h1>3</h1>
                    </div>
                </div>
                <div class="gfxinv-item-slot common-item" data-id="4" name="hotbar">
                    <div class="item-slot-state"></div>
                    <div class="item-slot-info">
                        <h1></h1>
                    </div>
                    <div class="hotbarslot-numbers">
                        <h1>4</h1>
                    </div>
                </div>
                <div class="gfxinv-item-slot common-item" data-id="5" name="hotbar">
                    <div class="item-slot-state"></div>
                    <div class="item-slot-info">
                        <h1></h1>
                    </div>
                    <div class="hotbarslot-numbers">
                        <h1>5</h1>
                    </div>
                </div>
                <div class="gfxinv-item-slot common-item" data-id="6" name="hotbar">
                    <div class="item-slot-state"></div>
                    <div class="item-slot-info">
                        <h1></h1>
                    </div>
                    <div class="hotbarslot-numbers">
                        <h1>6</h1>
                    </div>
                </div>
                <div class="gfxinv-item-slot common-item" data-id="7" name="hotbar">
                    <div class="item-slot-state"></div>
                    <div class="item-slot-info">
                        <h1></h1>
                    </div>
                    <div class="hotbarslot-numbers">
                        <h1>7</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="GunGameInfo" style="display:none;">
        <div class="GunGameInfo-container">
            <div class="GunGameInfo-right-hud">
                <h>Gun Game</h>
                <p id="playerCount">0 Player</p>
            </div>
        </div>
    </div>

    <div class="GunGameHud" style="display:none;">
        <div class="GunGameInterfarce">
            <p class="GunGameHud-First">First: Dross 0/17 kills</p>
            <div>
                <p class="GunGameWeaponText">Next Weapon (0/17):</p>
                <img src="./assets/weapon_heavysniper.png">
            </div>
        </div>
    </div>

    <div class="deathmatchleader">
        <div class="onelead">
            <div class="rectaledeallah">
                <h1>1er</h1>
            </div>
            <div class="allahlebatard">
                <p id="nameofplayers">RioOzZ</p>
            </div>
            <div class="killssss">
                <img src="./assets/fdpallag.png">
                <p class="killsofplayers">999</p>
            </div>
        </div>
        <div class="twolead">
            <div class="rectaledeallahs">
                <h1>2eme</h1>
            </div>
            <div class="allahlebatards">
                <p id="nameofplayerss">RioOzZ</p>
            </div>
            <div class="killlssss">
                <img src="./assets/fdpallag.png">
                <p class="killsofplayerss">999</p>
            </div>
        </div>
        <div class="threelead">
            <div class="rectaledeallahss">
                <h1>3eme</h1>
            </div>
            <div class="allahlebatardss">
                <p id="nameofplayersss">RioOzZ</p>
            </div>
            <div class="killssssss">
                <img src="./assets/fdpallag.png">
                <p class="killsofplayersss">999</p>
            </div>
        </div>
    </div>
    <div class="arena">
        <div class="containere">
            <section class="aren-module">
                <div class="aren arene-one">
                    <span class="headline8"> <br> <p>GUNGAME</p></span>
    
                    <button class="play-btn" onclick="playntm(1)">Play</button>
                </div>
    
                <div class="aren arene-two">
                    <span class="headline7">Only pistol and headshot<br> <p>Pistol Game</p></span>
    
                    <button class="play-btn1" onclick="playntm(2)">Play</button>
                </div>
                

                <div class="aren arene-three">
                    <span class="headline6"><p>Point Zones</p></span>

                    <button class="play-btn2" onclick="pointzone()">Play</button>
                </div>

                <div class="aren arene-five">
                    <span class="headline6"><p>Military Zones</p></span>

                    <button class="play-btn2" onclick="militaryzone()">Play</button>
                </div>

                <div class="aren arene-four" onclick="playDuel()">
                  
                    <span class="headline5">Duel 1v1 <br> <p>Duel</p></span>
                </div>
            </section>
        </div>
    </div>

    <div class="settings">
        <div class="navbar-settings">
            <button class="setbtn" onclick="SetCurrentPage('gameplay')">SETTINGS</button>
        </div>
        <div class="gameplay">
            <div class="k-contents">
                <h1>Badge Menu</h1>
                <input class="badgemenu" type="submit" value="Open"  onclick="openBadgeMenu()"> 
            </div>
            <div class="k-contents">
                <h1>FPS Boost</h1>
                <select class="fpsboost-dropdown" onchange="changeFpsboost()">
                    <option value="false">Off</option>
                    <option value="0.8">Low</option>
                    <option value="0.6">Normal</option>
                    <option value="0.4">Big</option>
                </select>
            </div>
            <div class="k-contents">
                <h1>Hitmarker (size)</h1>
                <select class="hitmarker-dropdown" onchange="changeHitmarker()">
                    <option value="normal">Normal</option>
                    <option value="small">Small</option>
                    <option value="big">Big</option>
                </select>
            </div>
            <div class="k-contents">
                <h1>Hitmarker Type</h1>
                <select class="hitmarkertype-dropdown" onchange="changeHitmarkerType()">
                    <option value="damage">Damage</option>
                    <option value="healthremaining">Health Remaining</option>
                </select>
            </div>
            <div class="k-contents">
                <h1>Hitmarker Sound</h1>
                <select class="hitmarkersound-dropdown" onchange="changeHitmarkerSound()">
                    <option value="0">Default</option>
                    <option value="1">Sound 1</option>
                    <option value="2">Sound 2</option>
                    <option value="3">Sound 3</option>
                </select>
            </div>
            <div class="k-contents volume-container">
                <h1>Hitmarker Volume</h1>
                <div class="volume-control">
                    <input type="range" class="volume-slider" min="0.1" max="1.0" step="0.1" value="0.2" oninput="updateVolume(this.value)">
                    <span id="volume-value">20%</span>
                </div>
            </div>                        
            <div class="k-contents">
                <h1>Crosshair</h1>
                <input class="allcheck-crosshair" type="checkbox" id="slidersss" checked onclick="crosshair()">
                <label class="allchecki-crosshair" for="slidersss"></label>
            </div>
            <div class="k-contents">
                <h1>Killfeed</h1>
                <input class="allcheck-killfeed" type="checkbox" id="sliderkillfeed" checked onclick="killfeed()">
                <label class="allchecki-killfeed" for="sliderkillfeed"></label>
            </div>        
            <div class="k-contents">
                <h1>Hit Sound</h1>
                <input class="allcheck-hitsound" type="checkbox" id="slidersss1" checked onclick="hitsound()">
                <label class="allchecki-hitsound" for="slidersss1"></label>
            </div>
            <div class="k-contents">
                <h1>Death Sound</h1>
                <input class="allcheck-deadsound" type="checkbox" id="slidersssssssss1" checked onclick="deadsound()">
                <label class="allchecki-deadsound" for="slidersssssssss1"></label>
            </div>
            <div class="k-contents">
                <h1>Health/Shield Hud</h1>
                <input class="allcheck-hud" type="checkbox" id="sliderssss1" checked onclick="hudshow()">
                <label class="allchecki-hud" for="sliderssss1"></label>
            </div>
            <div class="k-contents">
                <h1>Compass Bar</h1>
                <input class="hudbarre-hud" type="checkbox" id="slidersssss1" onclick="compasshud()">
                <label class="hudbarre-hud1" for="slidersssss1"></label>
            </div>
            <!-- <div class="k-contents">
                <h1>Squad Hud</h1>
                <input class="hudsquad-hud" type="checkbox" id="sq-slider" checked onclick="squadhud()">
                <label class="hudsquad-hud1" for="sq-slider"></label>
            </div> -->
            <div class="blueline"></div>
            <div class="settingsdiam">
             <h1>Diamond Option</h1>
            </div>
            <div class="blueline"></div>

            <div class="k-contents">
                <h1>Deathmessage</h1>
                <input class="allinput" type="text" placeholder="Exemple text">
                <input class="allsave" type="submit" value="Save">                
            </div>  
        </div>
        </div>
    </div>

<div class="gfxprofile-main-contain">
    <h1 id="profile-user-name">Loading</h1>
    <div class="profile-user-poınt">
        <div class="stick"></div>
        --<div class="rect"></div>
            
            <div class="point-main-contain">
                <svg class="point-contain" viewBox="0 0 301 83" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M36.582 4H264.418L295 41.463L264.418 78.926H36.582L6 41.463L36.582 4Z" fill="red" fill-opacity="0.2"/>
                    <path d="M36.582 2H35.6329L35.0327 2.73525L4.45068 40.1982L3.41823 41.463L4.45068 42.7278L35.0327 80.1908L35.6329 80.926H36.582H264.418H265.367L265.967 80.1908L296.549 42.7278L297.582 41.463L296.549 40.1982L265.967 2.73525L265.367 2H264.418H36.582Z" stroke="darkred" stroke-opacity="0.8" stroke-width="4"/>
                </svg>
            </div>
        <div class="rect"></div>
        <div class="stick"></div>
    </div>
    <div class="profile-user-informations">
        <div class="info user-kill-info">                  
            <svg width="100%" height="100%" viewBox="0 0 378 448" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M378 12C378 5.37259 372.627 0 366 0H12C5.37259 0 0 5.37258 0 12V436C0 442.627 5.37259 448 12 448H233.505C238.091 448 242.276 445.386 244.288 441.264L299.712 327.736C301.724 323.614 305.909 321 310.495 321H366C372.627 321 378 315.627 378 309V12Z" fill="#1C2224" fill-opacity="0.9"/>
            </svg>
        </div>
        <div class="info user-death-info">
            <svg width="100%" height="100%" viewBox="0 0 378 448" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 12C0 5.37259 5.37258 0 12 0H366C372.627 0 378 5.37258 378 12V436C378 442.627 372.627 448 366 448H144.495C139.909 448 135.724 445.386 133.712 441.264L78.2882 327.736C76.2762 323.614 72.091 321 67.5046 321H12C5.37259 321 0 315.627 0 309V12Z" fill="#1C2224" fill-opacity="0.9"/>
            </svg>  
        </div>
        <div class="kdinfo">
            <svg width="100%" height="100%" viewBox="0 0 248 116" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M49.3857 3.46783C50.3703 1.35259 52.492 0 54.8252 0H192.205C194.522 0 196.633 1.33509 197.626 3.42947L246.936 107.429C248.824 111.41 245.921 116 241.515 116H6.41137C2.02411 116 -0.879678 111.445 0.971875 107.468L49.3857 3.46783Z" fill="red" fill-opacity="0.8"/>
            </svg>
        </div>
    </div>
</body>
</html>