<html >
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" type="text/css" href="css/main.css" />
        <link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v6.2.0/css/pro.min.css" rel="stylesheet">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
        <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
        <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js" integrity="sha256-xH4q8N0pEzrZMaRmd7gQVcTZiFei+HfRTBPJ1OGXC0k=" crossorigin="anonymous"></script>
        
    </head>
    <body class="general">
        <div id="qbcore-inventory">
        <div class="haku"><span>حقوق Haku</span></div>
            <div class="background"></div>
            <div class="inventory-info">
                <div class="player-inv-info">
                    <div class="player-inv-info-main">
                        <div class="icon"><i class="fa-solid fa-user"></i></div>
                        <div class="player-inv-labels">
                            <div class="player-inv-label">PLAYER</div>
                            <div class="player-inv-label" style="color: transparent; position: relative; top: 0vh;-webkit-text-stroke: 1.5px var(--AG-color);">INVENTORY</div>
                        </div>
                    </div>
                    <div class="player-inv-labels">
                        <div id="player-inv-weight" class="player-inv-label" style="font-size: 20px;">120</div>
                        <div id="player-inv-maxweight" class="player-inv-label" style="color: gray; font-size: 20px; position: relative; top: 0vh;">/50</div>
                    </div>
                    <div class="player-inv-line"></div>
                    <div class="main-inventory-filter-content">
                        <div class="main-inventory-input">
                            <i class="fa-solid fa-magnifying-glass input-icon"></i>
                            <input class="main-inventory-inputmeow" placeholder="Search">
                        </div>
                        <div class="main-inventory-boxes-container">
                            <div id="FilterWeapons" class="main-inventory-boxes"><i class="fa-solid fa-gun"></i></div>
                            <div id="FilterGeneral" class="main-inventory-boxes"><i class="fa-solid fa-cube"></i></div>
                            <div id="FilterTools" class="main-inventory-boxes"><i class="fa-solid fa-wrench"></i></div>
                            <div id="FilterFood" class="main-inventory-boxes"><i class="fa-solid fa-burger"></i></div>
                        </div>
                    </div>
                </div>
                <div class="other-inv-info">
                    <div class="player-inv-info-main">
                        <div id="other-inv-icon" class="icon"><i class="fa-solid fa-user"></i></div>
                        <div class="player-inv-labels">
                            <div id="first-other-inv-label" class="player-inv-label">WEIGHT</div>
                            <div id="second-other-inv-label" class="player-inv-label" style="color: transparent; position: relative; top: 0vh;-webkit-text-stroke: 1.5px var(--AG-color);">DROP</div>
                        </div>
                    </div>
                    <div class="player-inv-labels">
                        <div id="other-inv-weight" class="player-inv-label" style="font-size: 20px;">120</div>
                        <div id="other-inv-maxweight" class="player-inv-label" style="color: gray; font-size: 20px; position: relative; top: 0vh;">/50</div>
                    </div>
                    <!-- <div class="player-inv-line" style="width:100%;"></div> -->
                </div>
            </div>
            <div class="line-container">
                <div class="line-between-inventorys"></div>
                <!-- <div class="line-text">DC Store</div> -->
            </div>
            <div class="inv-container">
                <div class="ply-inv-container">
                    <div class="player-inventory" data-inventory="player"></div>
                </div>
                <div class="oth-inv-container">
                    <div class="other-inventory" data-inventory="other"></div>
                </div>
                <div class="hotbar-inv-container">
                    <div class="ply-hotbar-inventory" data-inventory="hotbar"></div>
                </div>
            </div>
            <div class="inv-options">
                <div class="inv-options-list">
                    <input type="number" id="item-amount" class="inv-option-item" min=1 max="10000" placeholder="Amount" pattern="[0-9]" onfocus="this.value=''" placeholder="" oninput="validity.valid||(value='');"></input>
                </div>
            </div>
            <div class="player-information">
                
                <!-- Head titel player in..... -->
                <!-- <div class="player-header">
                    <div class="player-icon inprogress"></div>
                    <div class="player-header-col" style="display:flex;flex-direction: column; position: relative; left: .7vh;">
                        <div class="player-header-text">PERSONAL</div>
                        <div class="player-header-text" style="color: #E4630C; position: relative; top: -1vh;">INFORMATION</div>
                    </div>
                </div> -->


                <div class="player-information-flex">
                    <h1 class="personal-information-ag" style="-webkit-text-stroke: 1.2px #000000;">personal information</h1>
                    <div class="cover-image-ag"></div>
                    <div class="player-information-content">
                        <div style="color: gray; font-weight: bolder;" class="player-information-text"><i class="fa-solid fa-id-badge"></i> StateID:</div>
                        <div id="info-stateid" style="font-size: 16px;margin-left: 9px;" class="player-information-text">dato</div>
                    </div>
                    <div class="player-information-content">
                        <div style="color: gray; font-weight: bolder;" class="player-information-text"><i class="fa-solid fa-bridge"></i> CitizenID:</div>
                        <div id="info-citizenid" style="font-size: 16px;margin-left: 9px;" class="player-information-text">dato</div>
                    </div>
                    <div class="player-information-content">
                        <div style="color: gray; font-weight: bolder;" class="player-information-text"><i class="fa-solid fa-sack-dollar"></i> Cash:</div>
                        <div id="info-cash" style="font-size: 16px;margin-left: 9px;" class="player-information-text">dato</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="weapon-attachments-container">
            <div class="weapon-attachments-container-title">Pistol | <span style="font-size: 2vh;">9mm</span></div>
            <div class="weapon-attachments-container-description">This is a water gun yaay ...</div>
            <div class="weapon-attachments-container-details"><span style="font-weight: bold; letter-spacing: .1vh;">Serial Number</span><br> 12345678<br><br><span style="font-weight: bold; letter-spacing: .1vh;">Durability</span> <div class="weapon-attachments-container-detail-durability"><div class="weapon-attachments-container-detail-durability-total"></div></div></div>
            <img src="./attachment_images/weapon_pistol.png" class="weapon-attachments-container-image">
            <div class="weapon-attachments-title"><span style="font-weight: bold; letter-spacing: .1vh;">Attachments</span></div>
            <div class="weapon-attachments"></div>
            <div class="weapon-attachments-remove"><i class="fas fa-trash"></i></div>
            <div class="weapon-attachments-back"><p>RETURN</p></div>
        </div>
        <div class="combine-option-container">
            <div class="inv-option-item CombineItem"><p>Combine</p></div>
            <div class="inv-option-item SwitchItem"><p>Switch</p></div>
        </div>
        <div class="itemboxes-container"></div>
        <div class="requiredItem-container"></div>
        <div class="z-hotbar-inventory"></div>
        <div class="ply-iteminfo-container">
            <div class="iteminfo-content">
                <div class="item-info-titlee">
                    <div class="item-info-title"></div>
                    <div class="item-info-description"></div>
                    <div class="item-uselessinfo">
                        <div class="item-uselessinfo-weight">10kg</div>
                        <div class="item-uselessinfo-decay">99%</div>
                    </div>
                </div>
            </div>
            <div class="item-split" style="display: none;">
                <div class="item-split-amount">
                    <div class="item-split-label">Amount:</div>
                    <div id="item-split-amount">1</div>
                </div>
                <div class="item-split-selected-range">
                    <div class="item-split-range">
                    </div>
                </div>
                <div class="item-split-action">
                    Split
                </div>
                <div class="item-split-cancel">
                    Cancel
                </div>
            </div>
            <div class="item-shit" style="display: none;">
                <div id="Use" class="item-shit-option"><i class="fa-solid fa-angles-right"></i> Use</div>
                <!-- <div id="ItemSplit" class="item-shit-option"><i class="fa-solid fa-cut"></i> Split</div> -->
                <div id="Give" class="item-shit-option"><i class="fa-solid fa-hand-holding-hand"></i> Give</div>
                <!-- <div id="Drop" class="item-shit-option"><i class="fa-solid fa-hands-bubbles"></i> Drop</div> -->
                <!-- <div class="item-shit-option">Spilt</div> -->
            </div>
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
        <script src="js/app.js" type="text/javascript"></script>
    </body>
</html>