<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <!-- Custom CSS -->
        <link rel="stylesheet" type="text/css" href="css/main.css" />
        <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
        <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
            integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
            crossorigin="anonymous"
            referrerpolicy="no-referrer"
        />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
    </head>
    <body>
        <div class="generalSection">
            <div class="logoArea">
                <img src="./images/logo.png" alt="" />
            </div>
            <div class="generalDescription">
                Lorem ipsum, welchen Text das hier wohl übersetzt?
                TGA-X000001.
            </div>
            <div class="categoryButtons">
                <div class="catButton selected" id="wikiButton">WIKI</div>
                <div class="catButton" id="marketButton">MARKT</div>
                <div class="catButton" id="salesButton">VERKAUFEN</div>
                <div class="catButton" id="tasksButton">AUFGABEN</div>
                <div class="catButton" id="lvlBuyButton">LVL KAUF</div>
            </div>
            <div class="mainWrapper">
                <div class="leftWrapper">
                    <div class="charInfoContainer">
                        <div class="profileImageSection">
                            <img class="profilePhotoTGA" src="./images/profilePhoto.jpg" alt="" />
                        </div>
                        <div class="helloTextArea">
                            <div class="helloRectangle"></div>
                            <div class="helloText">Hallo</div>
                            <div class="helloRectangle"></div>
                        </div>
                        <div class="charNameArea">
                            <div class="firstName">Odins</div>
                            <div class="lastName">Sohn</div>
                        </div>
                        <div class="levelTextArea">
                            <div class="bigLevelText">LEVEL</div>
                            <div class="bigCurrentMyLevel">20</div>
                        </div>
                        <div class="miniExperienceInfoArea">
                            <div class="myCurrentExperience">300</div>
                            <div class="requiredExperience">/ 1000</div>
                        </div>
                        <div class="experienceFillSection">
                            <div class="expFill"></div>
                        </div>
                        <div class="experienceInfoSecondArea">
                            <div class="leftExperience">
                                <div class="myCurrentXPCount">300</div>
                                <div class="expText">EXP</div>
                            </div>
                            <div class="rightExperience">
                                <i id="upIcon" class="fa-solid fa-angles-up"></i>
                                <div class="reqExpCount">1000</div>
                                <div class="expText">EXP</div>
                            </div>
                        </div>
                        <div class="buyinLevelTextArea">
                            <span class="BuyingFirst">Wie wäre es</span>
                            <span class="spawnBuyingSecond">mit einem Level Kaufen?</span>
                        </div>
                        <div class="levelBuyButton">LEVEL KAUF</div>
                    </div>
                </div>
                <div class="rightWrapper">
                    <div class="marketSection">
                        <div class="marketItem">
                            <div class="marketItemName">SHOTGUN</div>
                            <div class="marketItemImgArea">
                                <img src="./images/shotgunItem.png" alt="" />
                            </div>
                            <div class="marketItemCount">X1</div>
                            <div class="marketItemBottomSection">
                                <div class="marketItemMoneyArea">
                                    <span class="marketItemDollarIcon">$</span>
                                    <span class="marketItemPrice">50.000</span>
                                </div>
                                <div class="marketItemBuyButton">KAUFEN</div>
                            </div>
                        </div>

                        <div class="marketItem">
                            <div class="marketItemName">SHOTGUN</div>
                            <div class="marketItemImgArea">
                                <img src="./images/shotgunItem.png" alt="" />
                            </div>
                            <div class="marketItemCount">X1</div>
                            <div class="marketItemBottomSection">
                                <div class="marketItemMoneyArea">
                                    <span class="marketItemDollarIcon">$</span>
                                    <span class="marketItemPrice">50.000</span>
                                </div>
                                <div class="marketItemBuyButton">KAUFEN</div>
                            </div>
                        </div>

                        <div class="marketItem">
                            <div class="marketItemName">SHOTGUN</div>
                            <div class="marketItemImgArea">
                                <img src="./images/shotgunItem.png" alt="" />
                            </div>
                            <div class="marketItemCount">X1</div>
                            <div class="marketItemBottomSection">
                                <div class="marketItemMoneyArea">
                                    <span class="marketItemDollarIcon">$</span>
                                    <span class="marketItemPrice">50.000</span>
                                </div>
                                <div class="marketItemBuyButton">KAUFEN</div>
                            </div>
                        </div>

                        <div class="marketItem">
                            <div class="marketItemName">SHOTGUN</div>
                            <div class="marketItemImgArea">
                                <img src="./images/shotgunItem.png" alt="" />
                            </div>
                            <div class="marketItemCount">X1</div>
                            <div class="marketItemBottomSection">
                                <div class="marketItemMoneyArea">
                                    <span class="marketItemDollarIcon">$</span>
                                    <span class="marketItemPrice">50.000</span>
                                </div>
                                <div class="marketItemBuyButton">KAUFEN</div>
                            </div>
                        </div>

                        <div class="marketItem">
                            <div class="marketItemName">SHOTGUN</div>
                            <div class="marketItemImgArea">
                                <img src="./images/shotgunItem.png" alt="" />
                            </div>
                            <div class="marketItemCount">X1</div>
                            <div class="marketItemBottomSection">
                                <div class="marketItemMoneyArea">
                                    <span class="marketItemDollarIcon">$</span>
                                    <span class="marketItemPrice">50.000</span>
                                </div>
                                <div class="marketItemBuyButton">KAUFEN</div>
                            </div>
                        </div>

                        <div class="marketItem">
                            <div class="marketItemName">SHOTGUN</div>
                            <div class="marketItemImgArea">
                                <img src="./images/shotgunItem.png" alt="" />
                            </div>
                            <div class="marketItemCount">X1</div>
                            <div class="marketItemBottomSection">
                                <div class="marketItemMoneyArea">
                                    <span class="marketItemDollarIcon">$</span>
                                    <span class="marketItemPrice">50.000</span>
                                </div>
                                <div class="marketItemBuyButton">KAUFEN</div>
                            </div>
                        </div>

                        <div class="marketItem">
                            <div class="marketItemName">SHOTGUN</div>
                            <div class="marketItemImgArea">
                                <img src="./images/shotgunItem.png" alt="" />
                            </div>
                            <div class="marketItemCount">X1</div>
                            <div class="marketItemBottomSection">
                                <div class="marketItemMoneyArea">
                                    <span class="marketItemDollarIcon">$</span>
                                    <span class="marketItemPrice">50.000</span>
                                </div>
                                <div class="marketItemBuyButton">KAUFEN</div>
                            </div>
                        </div>

                        <div class="marketItem">
                            <div class="marketItemName">SHOTGUN</div>
                            <div class="marketItemImgArea">
                                <img src="./images/shotgunItem.png" alt="" />
                            </div>
                            <div class="marketItemCount">X1</div>
                            <div class="marketItemBottomSection">
                                <div class="marketItemMoneyArea">
                                    <span class="marketItemDollarIcon">$</span>
                                    <span class="marketItemPrice">50.000</span>
                                </div>
                                <div class="marketItemBuyButton">KAUFEN</div>
                            </div>
                        </div>
                    </div>
                    <div class="salesSection">
                        <div class="salesItem">
                            <div class="salesItemName">REH FLEISCH</div>
                            <div class="salesItemImgArea">
                                <img src="./images/dearMeat.png" alt="" />
                            </div>
                            <div class="salesItemStarSection">
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                            </div>
                            <div class="salesItemInfoArea">
                                <div class="salesInfoLeftWrapper">
                                    <div class="salesItemCount">X1</div>
                                </div>
                                <div class="salesInfoRightWrapper">
                                    <div class="salesItemPrice">
                                        <span class="salesItemDollarIcon">$</span>
                                        <span class="salesItemRealPrice">350</span>
                                    </div>
                                </div>
                            </div>
                            <div class="salesItemBottomSection">
                                <input
                                    id="amountInput"
                                    type="text"
                                    class="amountInput"
                                    value="Menge..."
                                    onblur="if(this.value == '') { this.value='Menge...'}"
                                    onfocus="if (this.value == 'Menge...') {this.value=''}"
                                />
                                <div class="salesItemBuyButton">VERKAUFEN</div>
                            </div>
                        </div>
                        <div class="salesItem">
                            <div class="salesItemName">DEER MEAT</div>
                            <div class="salesItemImgArea">
                                <img src="./images/dearMeat.png" alt="" />
                            </div>
                            <div class="salesItemStarSection">
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                            </div>
                            <div class="salesItemInfoArea">
                                <div class="salesInfoLeftWrapper">
                                    <div class="salesItemCount">X1</div>
                                </div>
                                <div class="salesInfoRightWrapper">
                                    <div class="salesItemPrice">
                                        <span class="salesItemDollarIcon">$</span>
                                        <span class="salesItemRealPrice">350</span>
                                    </div>
                                </div>
                            </div>
                            <div class="salesItemBottomSection">
                                <input
                                    id="amountInput"
                                    type="text"
                                    class="amountInput"
                                    value="Menge..."
                                    onblur="if(this.value == '') { this.value='Menge...'}"
                                    onfocus="if (this.value == 'Menge...') {this.value=''}"
                                />
                                <div class="salesItemBuyButton">VERKAUFEN</div>
                            </div>
                        </div>
                        <div class="salesItem">
                            <div class="salesItemName">DEER MEAT</div>
                            <div class="salesItemImgArea">
                                <img src="./images/dearMeat.png" alt="" />
                            </div>
                            <div class="salesItemStarSection">
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                            </div>
                            <div class="salesItemInfoArea">
                                <div class="salesInfoLeftWrapper">
                                    <div class="salesItemCount">X1</div>
                                </div>
                                <div class="salesInfoRightWrapper">
                                    <div class="salesItemPrice">
                                        <span class="salesItemDollarIcon">$</span>
                                        <span class="salesItemRealPrice">350</span>
                                    </div>
                                </div>
                            </div>
                            <div class="salesItemBottomSection">
                                <input
                                    id="amountInput"
                                    type="text"
                                    class="amountInput"
                                    value="Menge..."
                                    onblur="if(this.value == '') { this.value='Menge...'}"
                                    onfocus="if (this.value == 'Menge...') {this.value=''}"
                                />
                                <div class="salesItemBuyButton">VERKAUFEN</div>
                            </div>
                        </div>
                        <div class="salesItem">
                            <div class="salesItemName">DEER MEAT</div>
                            <div class="salesItemImgArea">
                                <img src="./images/dearMeat.png" alt="" />
                            </div>
                            <div class="salesItemStarSection">
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                            </div>
                            <div class="salesItemInfoArea">
                                <div class="salesInfoLeftWrapper">
                                    <div class="salesItemCount">X1</div>
                                </div>
                                <div class="salesInfoRightWrapper">
                                    <div class="salesItemPrice">
                                        <span class="salesItemDollarIcon">$</span>
                                        <span class="salesItemRealPrice">350</span>
                                    </div>
                                </div>
                            </div>
                            <div class="salesItemBottomSection">
                                <input
                                    id="amountInput"
                                    type="text"
                                    class="amountInput"
                                    value="Menge..."
                                    onblur="if(this.value == '') { this.value='Menge...'}"
                                    onfocus="if (this.value == 'Menge...') {this.value=''}"
                                />
                                <div class="salesItemBuyButton">VERKAUFEN</div>
                            </div>
                        </div>
                        <div class="salesItem">
                            <div class="salesItemName">DEER MEAT</div>
                            <div class="salesItemImgArea">
                                <img src="./images/dearMeat.png" alt="" />
                            </div>
                            <div class="salesItemStarSection">
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                            </div>
                            <div class="salesItemInfoArea">
                                <div class="salesInfoLeftWrapper">
                                    <div class="salesItemCount">X1</div>
                                </div>
                                <div class="salesInfoRightWrapper">
                                    <div class="salesItemPrice">
                                        <span class="salesItemDollarIcon">$</span>
                                        <span class="salesItemRealPrice">350</span>
                                    </div>
                                </div>
                            </div>
                            <div class="salesItemBottomSection">
                                <input
                                    id="amountInput"
                                    type="text"
                                    class="amountInput"
                                    value="Menge..."
                                    onblur="if(this.value == '') { this.value='Menge...'}"
                                    onfocus="if (this.value == 'Menge...') {this.value=''}"
                                />
                                <div class="salesItemBuyButton">VERKAUFEN</div>
                            </div>
                        </div>
                        <div class="salesItem">
                            <div class="salesItemName">DEER MEAT</div>
                            <div class="salesItemImgArea">
                                <img src="./images/dearMeat.png" alt="" />
                            </div>
                            <div class="salesItemStarSection">
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                            </div>
                            <div class="salesItemInfoArea">
                                <div class="salesInfoLeftWrapper">
                                    <div class="salesItemCount">X1</div>
                                </div>
                                <div class="salesInfoRightWrapper">
                                    <div class="salesItemPrice">
                                        <span class="salesItemDollarIcon">$</span>
                                        <span class="salesItemRealPrice">350</span>
                                    </div>
                                </div>
                            </div>
                            <div class="salesItemBottomSection">
                                <input
                                    id="amountInput"
                                    type="text"
                                    class="amountInput"
                                    value="Menge..."
                                    onblur="if(this.value == '') { this.value='Menge...'}"
                                    onfocus="if (this.value == 'Menge...') {this.value=''}"
                                />
                                <div class="salesItemBuyButton">VERKAUFEN</div>
                            </div>
                        </div>
                        <div class="salesItem">
                            <div class="salesItemName">DEER MEAT</div>
                            <div class="salesItemImgArea">
                                <img src="./images/dearMeat.png" alt="" />
                            </div>
                            <div class="salesItemStarSection">
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                            </div>
                            <div class="salesItemInfoArea">
                                <div class="salesInfoLeftWrapper">
                                    <div class="salesItemCount">X1</div>
                                </div>
                                <div class="salesInfoRightWrapper">
                                    <div class="salesItemPrice">
                                        <span class="salesItemDollarIcon">$</span>
                                        <span class="salesItemRealPrice">350</span>
                                    </div>
                                </div>
                            </div>
                            <div class="salesItemBottomSection">
                                <input
                                    id="amountInput"
                                    type="text"
                                    class="amountInput"
                                    value="Menge..."
                                    onblur="if(this.value == '') { this.value='Menge...'}"
                                    onfocus="if (this.value == 'Menge...') {this.value=''}"
                                />
                                <div class="salesItemBuyButton">VERKAUFEN</div>
                            </div>
                        </div>
                        <div class="salesItem">
                            <div class="salesItemName">DEER MEAT</div>
                            <div class="salesItemImgArea">
                                <img src="./images/dearMeat.png" alt="" />
                            </div>
                            <div class="salesItemStarSection">
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                            </div>
                            <div class="salesItemInfoArea">
                                <div class="salesInfoLeftWrapper">
                                    <div class="salesItemCount">X1</div>
                                </div>
                                <div class="salesInfoRightWrapper">
                                    <div class="salesItemPrice">
                                        <span class="salesItemDollarIcon">$</span>
                                        <span class="salesItemRealPrice">350</span>
                                    </div>
                                </div>
                            </div>
                            <div class="salesItemBottomSection">
                                <input
                                    id="amountInput"
                                    type="text"
                                    class="amountInput"
                                    value="Menge..."
                                    onblur="if(this.value == '') { this.value='Menge...'}"
                                    onfocus="if (this.value == 'Menge...') {this.value=''}"
                                />
                                <div class="salesItemBuyButton">VERKAUFEN</div>
                            </div>
                        </div>
                    </div>
                    <div class="tasksSection">
                        <div class="taskItem">
                            <div class="taskCompletedText">GET REWARD</div>
                            <div class="taskItemTopArea">
                                <div class="taskTopLeftWrapper">
                                    <div class="taskTitle">HUNTING 10 DEER</div>
                                </div>
                                <div class="taskTopRightWrapper">
                                    <i id="clockIcon" class="fa-solid fa-clock"></i>
                                    <div class="taskRemainingTime">1 hour</div>
                                </div>
                            </div>
                            <div class="taskItemDescription">
                                TRANSLATE
                                TGA-X000002
                            </div>
                            <div class="taskInfoSection">
                                <div class="taskItemRewardArea">
                                    <i id="giftIcon" class="fa-solid fa-gift"></i>
                                    <div class="rewardTextArea">
                                        <div class="rewardText">REWARD</div>
                                        <div class="rewardItemName">$10.000</div>
                                    </div>
                                </div>
                                <div class="taskCountArea">
                                    <div class="currentTaskCount">6</div>
                                    <div class="requiredTaskCount">/10</div>
                                </div>
                            </div>
                            <div class="taskItemFillArea">
                                <div class="taskItemFill"></div>
                            </div>
                        </div>
                        <div class="taskItem">
                            <div class="taskItemTopArea">
                                <div class="taskTopLeftWrapper">
                                    <div class="taskTitle">HUNTING 10 DEER</div>
                                </div>
                                <div class="taskTopRightWrapper">
                                    <i id="clockIcon" class="fa-solid fa-clock"></i>
                                    <div class="taskRemainingTime">1 hour</div>
                                </div>
                            </div>
                            <div class="taskItemDescription">
                                TRANSLATE
                                TGA-X000003
                            </div>
                            <div class="taskInfoSection">
                                <div class="taskItemRewardArea">
                                    <i id="giftIcon" class="fa-solid fa-gift"></i>
                                    <div class="rewardTextArea">
                                        <div class="rewardText">REWARD</div>
                                        <div class="rewardItemName">$10.000</div>
                                    </div>
                                </div>
                                <div class="taskCountArea">
                                    <div class="currentTaskCount">6</div>
                                    <div class="requiredTaskCount">/10</div>
                                </div>
                            </div>
                            <div class="taskItemFillArea">
                                <div class="taskItemFill"></div>
                            </div>
                        </div>
                        <div class="taskItem">
                            <div class="taskItemTopArea">
                                <div class="taskTopLeftWrapper">
                                    <div class="taskTitle">HUNTING 10 DEER</div>
                                </div>
                                <div class="taskTopRightWrapper">
                                    <i id="clockIcon" class="fa-solid fa-clock"></i>
                                    <div class="taskRemainingTime">1 hour</div>
                                </div>
                            </div>
                            <div class="taskItemDescription">
                                TRANSLATE
                                TGA-X000004
                            </div>
                            <div class="taskInfoSection">
                                <div class="taskItemRewardArea">
                                    <i id="giftIcon" class="fa-solid fa-gift"></i>
                                    <div class="rewardTextArea">
                                        <div class="rewardText">REWARD</div>
                                        <div class="rewardItemName">$10.000</div>
                                    </div>
                                </div>
                                <div class="taskCountArea">
                                    <div class="currentTaskCount">6</div>
                                    <div class="requiredTaskCount">/10</div>
                                </div>
                            </div>
                            <div class="taskItemFillArea">
                                <div class="taskItemFill"></div>
                            </div>
                        </div>
                        <div class="taskItem">
                            <div class="taskItemTopArea">
                                <div class="taskTopLeftWrapper">
                                    <div class="taskTitle">HUNTING 10 DEER</div>
                                </div>
                                <div class="taskTopRightWrapper">
                                    <i id="clockIcon" class="fa-solid fa-clock"></i>
                                    <div class="taskRemainingTime">1 hour</div>
                                </div>
                            </div>
                            <div class="taskItemDescription">
                                TRANSLATE
                                TGA-X000005
                            </div>
                            <div class="taskInfoSection">
                                <div class="taskItemRewardArea">
                                    <i id="giftIcon" class="fa-solid fa-gift"></i>
                                    <div class="rewardTextArea">
                                        <div class="rewardText">REWARD</div>
                                        <div class="rewardItemName">$10.000</div>
                                    </div>
                                </div>
                                <div class="taskCountArea">
                                    <div class="currentTaskCount">6</div>
                                    <div class="requiredTaskCount">/10</div>
                                </div>
                            </div>
                            <div class="taskItemFillArea">
                                <div class="taskItemFill"></div>
                            </div>
                        </div>
                        <div class="taskItem">
                            <div class="taskItemTopArea">
                                <div class="taskTopLeftWrapper">
                                    <div class="taskTitle">HUNTING 10 DEER</div>
                                </div>
                                <div class="taskTopRightWrapper">
                                    <i id="clockIcon" class="fa-solid fa-clock"></i>
                                    <div class="taskRemainingTime">1 hour</div>
                                </div>
                            </div>
                            <div class="taskItemDescription">
                                TRANSLATE
                                TGA-X000006
                            </div>
                            <div class="taskInfoSection">
                                <div class="taskItemRewardArea">
                                    <i id="giftIcon" class="fa-solid fa-gift"></i>
                                    <div class="rewardTextArea">
                                        <div class="rewardText">REWARD</div>
                                        <div class="rewardItemName">$10.000</div>
                                    </div>
                                </div>
                                <div class="taskCountArea">
                                    <div class="currentTaskCount">6</div>
                                    <div class="requiredTaskCount">/10</div>
                                </div>
                            </div>
                            <div class="taskItemFillArea">
                                <div class="taskItemFill"></div>
                            </div>
                        </div>
                        <div class="taskItem">
                            <div class="taskItemTopArea">
                                <div class="taskTopLeftWrapper">
                                    <div class="taskTitle">HUNTING 10 DEER</div>
                                </div>
                                <div class="taskTopRightWrapper">
                                    <i id="clockIcon" class="fa-solid fa-clock"></i>
                                    <div class="taskRemainingTime">1 hour</div>
                                </div>
                            </div>
                            <div class="taskItemDescription">
                                TRANSLATE
                                TGA-X000007
                            </div>
                            <div class="taskInfoSection">
                                <div class="taskItemRewardArea">
                                    <i id="giftIcon" class="fa-solid fa-gift"></i>
                                    <div class="rewardTextArea">
                                        <div class="rewardText">REWARD</div>
                                        <div class="rewardItemName">$10.000</div>
                                    </div>
                                </div>
                                <div class="taskCountArea">
                                    <div class="currentTaskCount">6</div>
                                    <div class="requiredTaskCount">/10</div>
                                </div>
                            </div>
                            <div class="taskItemFillArea">
                                <div class="taskItemFill"></div>
                            </div>
                        </div>
                        <div class="taskItem">
                            <div class="taskItemTopArea">
                                <div class="taskTopLeftWrapper">
                                    <div class="taskTitle">HUNTING 10 DEER</div>
                                </div>
                                <div class="taskTopRightWrapper">
                                    <i id="clockIcon" class="fa-solid fa-clock"></i>
                                    <div class="taskRemainingTime">1 hour</div>
                                </div>
                            </div>
                            <div class="taskItemDescription">
                                TRANSLATE
                                TGA-X000008
                            </div>
                            <div class="taskInfoSection">
                                <div class="taskItemRewardArea">
                                    <i id="giftIcon" class="fa-solid fa-gift"></i>
                                    <div class="rewardTextArea">
                                        <div class="rewardText">REWARD</div>
                                        <div class="rewardItemName">$10.000</div>
                                    </div>
                                </div>
                                <div class="taskCountArea">
                                    <div class="currentTaskCount">6</div>
                                    <div class="requiredTaskCount">/10</div>
                                </div>
                            </div>
                            <div class="taskItemFillArea">
                                <div class="taskItemFill"></div>
                            </div>
                        </div>
                        <div class="taskItem">
                            <div class="taskItemTopArea">
                                <div class="taskTopLeftWrapper">
                                    <div class="taskTitle">HUNTING 10 DEER</div>
                                </div>
                                <div class="taskTopRightWrapper">
                                    <i id="clockIcon" class="fa-solid fa-clock"></i>
                                    <div class="taskRemainingTime">1 hour</div>
                                </div>
                            </div>
                            <div class="taskItemDescription">
                                TRANSLATE
                                TGA-X000009
                            </div>
                            <div class="taskInfoSection">
                                <div class="taskItemRewardArea">
                                    <i id="giftIcon" class="fa-solid fa-gift"></i>
                                    <div class="rewardTextArea">
                                        <div class="rewardText">REWARD</div>
                                        <div class="rewardItemName">$10.000</div>
                                    </div>
                                </div>
                                <div class="taskCountArea">
                                    <div class="currentTaskCount">6</div>
                                    <div class="requiredTaskCount">/10</div>
                                </div>
                            </div>
                            <div class="taskItemFillArea">
                                <div class="taskItemFill"></div>
                            </div>
                        </div>
                        <div class="taskItem">
                            <div class="taskItemTopArea">
                                <div class="taskTopLeftWrapper">
                                    <div class="taskTitle">HUNTING 10 DEER</div>
                                </div>
                                <div class="taskTopRightWrapper">
                                    <i id="clockIcon" class="fa-solid fa-clock"></i>
                                    <div class="taskRemainingTime">1 hour</div>
                                </div>
                            </div>
                            <div class="taskItemDescription">
                                TRANSLATE
                                TGA-X000010
                            </div>
                            <div class="taskInfoSection">
                                <div class="taskItemRewardArea">
                                    <i id="giftIcon" class="fa-solid fa-gift"></i>
                                    <div class="rewardTextArea">
                                        <div class="rewardText">REWARD</div>
                                        <div class="rewardItemName">$10.000</div>
                                    </div>
                                </div>
                                <div class="taskCountArea">
                                    <div class="currentTaskCount">6</div>
                                    <div class="requiredTaskCount">/10</div>
                                </div>
                            </div>
                            <div class="taskItemFillArea">
                                <div class="taskItemFill"></div>
                            </div>
                        </div>
                        <div class="taskItem">
                            <div class="taskItemTopArea">
                                <div class="taskTopLeftWrapper">
                                    <div class="taskTitle">HUNTING 10 DEER</div>
                                </div>
                                <div class="taskTopRightWrapper">
                                    <i id="clockIcon" class="fa-solid fa-clock"></i>
                                    <div class="taskRemainingTime">1 hour</div>
                                </div>
                            </div>
                            <div class="taskItemDescription">
                                TRANSLATE
                                TGA-X000010
                            </div>
                            <div class="taskInfoSection">
                                <div class="taskItemRewardArea">
                                    <i id="giftIcon" class="fa-solid fa-gift"></i>
                                    <div class="rewardTextArea">
                                        <div class="rewardText">REWARD</div>
                                        <div class="rewardItemName">$10.000</div>
                                    </div>
                                </div>
                                <div class="taskCountArea">
                                    <div class="currentTaskCount">6</div>
                                    <div class="requiredTaskCount">/10</div>
                                </div>
                            </div>
                            <div class="taskItemFillArea">
                                <div class="taskItemFill"></div>
                            </div>
                        </div>
                    </div>
                    <div class="levelBuySection">
                        <div class="levelRedeemSection">
                            <input
                                id="redeemInput"
                                type="text"
                                class="redeemInput"
                                value="Code..."
                                onblur="if(this.value == '') { this.value='Menge...'}"
                                onfocus="if (this.value == 'Menge...') {this.value=''}"
                            />
                            <div class="redeemAcceptButton">TEBEX CODE</div>
                        </div>
                        <div class="levelPackageItemArea">
                            <div class="levelPackage">
                                <div class="levelPackageNameArea">
                                    <div class="itemLevelText">LEVEL</div>
                                    <div class="itemLevelPackageTag">UP #1</div>
                                </div>
                                <div class="levelPackageMiddleSection">
                                    <i id="bigUpIcon" class="fa-solid fa-angles-up"></i>
                                    <div class="levelSectionUpInfoArea">
                                        <div class="itemUpLevelCount">+10</div>
                                        <div class="itemMiddleLevelText">LEVEL</div>
                                        <div class="itemMiddleUPText">UP</div>
                                    </div>
                                    <i id="bigUpIcon" class="fa-solid fa-angles-up"></i>
                                </div>
                                <div class="levelItemBuyButton">
                                    <span class="levelItemRealPrice">25€</span>
                                    <span class="levelItemBuyText">BUY</span>
                                </div>
                            </div>
                            <div class="levelPackage">
                                <div class="levelPackageNameArea">
                                    <div class="itemLevelText">LEVEL</div>
                                    <div class="itemLevelPackageTag">UP #1</div>
                                </div>
                                <div class="levelPackageMiddleSection">
                                    <i id="bigUpIcon" class="fa-solid fa-angles-up"></i>
                                    <div class="levelSectionUpInfoArea">
                                        <div class="itemUpLevelCount">+10</div>
                                        <div class="itemMiddleLevelText">LEVEL</div>
                                        <div class="itemMiddleUPText">UP</div>
                                    </div>
                                    <i id="bigUpIcon" class="fa-solid fa-angles-up"></i>
                                </div>
                                <div class="levelItemBuyButton">
                                    <span class="levelItemRealPrice">25€</span>
                                    <span class="levelItemBuyText">BUY</span>
                                </div>
                            </div>
                            <div class="levelPackage">
                                <div class="levelPackageNameArea">
                                    <div class="itemLevelText">LEVEL</div>
                                    <div class="itemLevelPackageTag">UP #1</div>
                                </div>
                                <div class="levelPackageMiddleSection">
                                    <i id="bigUpIcon" class="fa-solid fa-angles-up"></i>
                                    <div class="levelSectionUpInfoArea">
                                        <div class="itemUpLevelCount">+10</div>
                                        <div class="itemMiddleLevelText">LEVEL</div>
                                        <div class="itemMiddleUPText">UP</div>
                                    </div>
                                    <i id="bigUpIcon" class="fa-solid fa-angles-up"></i>
                                </div>
                                <div class="levelItemBuyButton">
                                    <span class="levelItemRealPrice">25€</span>
                                    <span class="levelItemBuyText">BUY</span>
                                </div>
                            </div>
                            <div class="levelPackage">
                                <div class="levelPackageNameArea">
                                    <div class="itemLevelText">LEVEL</div>
                                    <div class="itemLevelPackageTag">UP #1</div>
                                </div>
                                <div class="levelPackageMiddleSection">
                                    <i id="bigUpIcon" class="fa-solid fa-angles-up"></i>
                                    <div class="levelSectionUpInfoArea">
                                        <div class="itemUpLevelCount">+10</div>
                                        <div class="itemMiddleLevelText">LEVEL</div>
                                        <div class="itemMiddleUPText">UP</div>
                                    </div>
                                    <i id="bigUpIcon" class="fa-solid fa-angles-up"></i>
                                </div>
                                <div class="levelItemBuyButton">
                                    <span class="levelItemRealPrice">25€</span>
                                    <span class="levelItemBuyText">BUY</span>
                                </div>
                            </div>
                            <div class="levelPackage">
                                <div class="levelPackageNameArea">
                                    <div class="itemLevelText">LEVEL</div>
                                    <div class="itemLevelPackageTag">UP #1</div>
                                </div>
                                <div class="levelPackageMiddleSection">
                                    <i id="bigUpIcon" class="fa-solid fa-angles-up"></i>
                                    <div class="levelSectionUpInfoArea">
                                        <div class="itemUpLevelCount">+10</div>
                                        <div class="itemMiddleLevelText">LEVEL</div>
                                        <div class="itemMiddleUPText">UP</div>
                                    </div>
                                    <i id="bigUpIcon" class="fa-solid fa-angles-up"></i>
                                </div>
                                <div class="levelItemBuyButton">
                                    <span class="levelItemRealPrice">25€</span>
                                    <span class="levelItemBuyText">BUY</span>
                                </div>
                            </div>
                            <div class="levelPackage">
                                <div class="levelPackageNameArea">
                                    <div class="itemLevelText">LEVEL</div>
                                    <div class="itemLevelPackageTag">UP #1</div>
                                </div>
                                <div class="levelPackageMiddleSection">
                                    <i id="bigUpIcon" class="fa-solid fa-angles-up"></i>
                                    <div class="levelSectionUpInfoArea">
                                        <div class="itemUpLevelCount">+10</div>
                                        <div class="itemMiddleLevelText">LEVEL</div>
                                        <div class="itemMiddleUPText">UP</div>
                                    </div>
                                    <i id="bigUpIcon" class="fa-solid fa-angles-up"></i>
                                </div>
                                <div class="levelItemBuyButton">
                                    <span class="levelItemRealPrice">$25</span>
                                    <span class="levelItemBuyText">BUY</span>
                                </div>
                            </div>
                            <div class="levelPackage">
                                <div class="levelPackageNameArea">
                                    <div class="itemLevelText">LEVEL</div>
                                    <div class="itemLevelPackageTag">UP #1</div>
                                </div>
                                <div class="levelPackageMiddleSection">
                                    <i id="bigUpIcon" class="fa-solid fa-angles-up"></i>
                                    <div class="levelSectionUpInfoArea">
                                        <div class="itemUpLevelCount">+10</div>
                                        <div class="itemMiddleLevelText">LEVEL</div>
                                        <div class="itemMiddleUPText">UP</div>
                                    </div>
                                    <i id="bigUpIcon" class="fa-solid fa-angles-up"></i>
                                </div>
                                <div class="levelItemBuyButton">
                                    <span class="levelItemRealPrice">$25</span>
                                    <span class="levelItemBuyText">BUY</span>
                                </div>
                            </div>
                            <div class="levelPackage">
                                <div class="levelPackageNameArea">
                                    <div class="itemLevelText">LEVEL</div>
                                    <div class="itemLevelPackageTag">UP #1</div>
                                </div>
                                <div class="levelPackageMiddleSection">
                                    <i id="bigUpIcon" class="fa-solid fa-angles-up"></i>
                                    <div class="levelSectionUpInfoArea">
                                        <div class="itemUpLevelCount">+10</div>
                                        <div class="itemMiddleLevelText">LEVEL</div>
                                        <div class="itemMiddleUPText">UP</div>
                                    </div>
                                    <i id="bigUpIcon" class="fa-solid fa-angles-up"></i>
                                </div>
                                <div class="levelItemBuyButton">
                                    <span class="levelItemRealPrice">$25</span>
                                    <span class="levelItemBuyText">BUY</span>
                                </div>
                            </div>
                            <div class="levelPackage">
                                <div class="levelPackageNameArea">
                                    <div class="itemLevelText">LEVEL</div>
                                    <div class="itemLevelPackageTag">UP #1</div>
                                </div>
                                <div class="levelPackageMiddleSection">
                                    <i id="bigUpIcon" class="fa-solid fa-angles-up"></i>
                                    <div class="levelSectionUpInfoArea">
                                        <div class="itemUpLevelCount">+10</div>
                                        <div class="itemMiddleLevelText">LEVEL</div>
                                        <div class="itemMiddleUPText">UP</div>
                                    </div>
                                    <i id="bigUpIcon" class="fa-solid fa-angles-up"></i>
                                </div>
                                <div class="levelItemBuyButton">
                                    <span class="levelItemRealPrice">$25</span>
                                    <span class="levelItemBuyText">BUY</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="wikiSection">
                        <div class="wikiItem">
                            <div class="wikiItemArea">
                                <div class="wikiStarSection">
                                    <i id="starIcon" class="fa-solid fa-star"></i>
                                    <i id="starIcon" class="fa-solid fa-star"></i>
                                    <i id="starIcon" class="fa-solid fa-star"></i>
                                    <i id="starIcon" class="fa-regular fa-star"></i>
                                    <i id="starIcon" class="fa-regular fa-star"></i>
                                </div>
                                <div class="wikiRegionName">LOS SANTOS</div>
                                <div class="wikiRegionAnimalsType">VERDANT BLUFFS</div>
                                <div class="wikiDescription">
                                    TRANSLATE
                                    TGA-X000011
                                </div>
                                <div class="wikiWeaponTitle">WEAPON</div>
                                <div class="wikiRectangle"></div>
                                <div class="wikiWeaponArea">
                                    <div class="wikiWeaponName">JAGD MESSER</div>
                                    <div class="wikiWeaponName">SHOTGUN</div>
                                </div>
                                <div class="wikiAnimalsTitle">ANIMALS</div>
                                <div class="wikiRectangle"></div>
                                <div class="wikiAnimalsArea">
                                    <div class="wikiAnimalsName">JAGD MESSER</div>
                                    <div class="wikiAnimalsName">SHOTGUN</div>
                                </div>
                                <div class="wikiSetGps">SET GPS</div>
                            </div>
                            <div class="wikiItemImgBgArea">
                                <img src="./images/bgImage.png" alt="" />
                            </div>
                        </div>
                        <div class="wikiItem">
                            <div class="wikiItemArea">
                                <div class="wikiStarSection">
                                    <i id="starIcon" class="fa-solid fa-star"></i>
                                    <i id="starIcon" class="fa-solid fa-star"></i>
                                    <i id="starIcon" class="fa-solid fa-star"></i>
                                    <i id="starIcon" class="fa-regular fa-star"></i>
                                    <i id="starIcon" class="fa-regular fa-star"></i>
                                </div>
                                <div class="wikiRegionName">LOS SANTOS</div>
                                <div class="wikiRegionAnimalsType">VERDANT BLUFFS</div>
                                <div class="wikiDescription">
                                    TRANSLATE
                                    TGA-X000012
                                </div>
                                <div class="wikiWeaponTitle">WEAPON</div>
                                <div class="wikiRectangle"></div>
                                <div class="wikiWeaponArea">
                                    <div class="wikiWeaponName">JAGD MESSER</div>
                                    <div class="wikiWeaponName">SHOTGUN</div>
                                </div>
                                <div class="wikiAnimalsTitle">ANIMALS</div>
                                <div class="wikiRectangle"></div>
                                <div class="wikiAnimalsArea">
                                    <div class="wikiAnimalsName">JAGD MESSER</div>
                                    <div class="wikiAnimalsName">SHOTGUN</div>
                                </div>
                                <div class="wikiSetGps">SET GPS</div>
                            </div>
                            <div class="wikiItemImgBgArea">
                                <img src="./images/bgImage.png" alt="" />
                            </div>
                        </div>
                        <div class="wikiItem">
                            <div class="wikiItemArea">
                                <div class="wikiStarSection">
                                    <i id="starIcon" class="fa-solid fa-star"></i>
                                    <i id="starIcon" class="fa-solid fa-star"></i>
                                    <i id="starIcon" class="fa-solid fa-star"></i>
                                    <i id="starIcon" class="fa-regular fa-star"></i>
                                    <i id="starIcon" class="fa-regular fa-star"></i>
                                </div>
                                <div class="wikiRegionName">LOS SANTOS</div>
                                <div class="wikiRegionAnimalsType">VERDANT BLUFFS</div>
                                <div class="wikiDescription">
                                    TRANSLATE
                                    TGA-X000013
                                </div>
                                <div class="wikiWeaponTitle">WEAPON</div>
                                <div class="wikiRectangle"></div>
                                <div class="wikiWeaponArea">
                                    <div class="wikiWeaponName">JAGD MESSER</div>
                                    <div class="wikiWeaponName">SHOTGUN</div>
                                </div>
                                <div class="wikiAnimalsTitle">ANIMALS</div>
                                <div class="wikiRectangle"></div>
                                <div class="wikiAnimalsArea">
                                    <div class="wikiAnimalsName">JAGD MESSER</div>
                                    <div class="wikiAnimalsName">SHOTGUN</div>
                                </div>
                                <div class="wikiSetGps">SET GPS</div>
                            </div>
                            <div class="wikiItemImgBgArea">
                                <img src="./images/bgImage.png" alt="" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="progressMain">
            <div class="progressTopArea">
                <div class="progressImgArea">
                    <img class="progressBarImage" src="./images/animalDeer.png" alt="" />
                </div>
                <div class="progressBarInfoArea">
                    <div class="progressAnimalName">DEER</div>
                    <div class="progressBarDescription">
                                TRANSLATE TGA-X000014
                    </div>
                </div>
            </div>
            <div class="progressBarBottomArea">
                <div class="progressBarTextArea">
                    <div class="progressBeforeText">
                        <div class="pressText">PRESS</div>
                        <div class="progressEButton">E</div>
                        <div class="chopText">CHOP</div>
                    </div>
                    <div class="progressAfterText">Schneiden...</div>
                </div>
                <div class="progressBarFillArea">
                    <div class="progressBarFill" id="myProgress"></div>
                </div>
            </div>
        </div>
        <div class="purchaseNotify">
            <div class="purchaseTitleArea">
                <span class="purchaseText">PURCHASE</span>
                <span class="successfullText">ERFOLGREICH</span>
            </div>
            <div class="addedLevelTextSection">
                <span class="addedLevelCountText">+10</span>
                <span class="levelAddedText">LEVEL HINZUGEFÜGT</span>
            </div>
            <div class="levelUpNotifyArea">
                <i id="bigUpIcon" class="fa-solid fa-angles-up"></i>
                <div class="levelSectionUpInfoArea">
                    <div class="notifyLevelCount">+10</div>
                    <div class="itemMiddleLevelText">LEVEL</div>
                    <div class="itemMiddleUPText">UP</div>
                </div>
                <i id="bigUpIcon" class="fa-solid fa-angles-up"></i>
            </div>
        </div>
        <div class="purchaseSale">
            <span class="succesfullTextSale">ERFOLGREICH</span>
            <span class="saleText">VERKAUFT</span>
        </div>
        <div class="taskCompleteNotify">
            <div class="taskCompleteArea">
                <span class="taskText">TASK</span>
                <span class="completedText">COMPLETED</span>
            </div>
            <div class="receivedTextArea">
                <span class="receivedText">ERHALTEN</span>
                <span class="receivedItemNameText">- $10000</span>
                <!-- <span class="receivedItemCountText">(x1)</span> -->
            </div>
        </div>
        <div class="completeBuySection">
            <i id="checkIcon" class="fa-solid fa-check"></i>
        </div>
        <script src="js/fontawesome.min.js"></script>
        <script src="js/jquery-3.6.0.min.js"></script>
        <script src="js/jquery-ui.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
        <script src="js/app.js?v=1"></script>
    </body>
</html>
