<!DOCTYPE html>
<html translate="no">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> APP DEMO </title>
    <link rel="icon" type="image/x-icon" href="APP DEMO">
    <meta property="og:title" content="APP DEMO">
    <meta property="og:image" content="../Requirements/IMG/WebsiteThumb.jpg">
    <meta name="description" content="APP DEMO">
    <meta name="keywords" content="APP DEMO">
    <meta name="google" content="notranslate">
    <link rel="stylesheet" href="../Requirements/CSS/bootstrap.min.css">
    <link rel="stylesheet" href="../Requirements/CSS/slick.css">
    <link rel="stylesheet" href="../Requirements/CSS/animate.min.css"/>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
          integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    <link rel="stylesheet" href="../Requirements/CSS/style.css">
</head>
<body>
<main>
    <section class="MainView animate__animated animate__fadeInRight" id="Home">
        <div class="HomeHeader">
            <div class="HomeHeaderLogo" onclick="toggleFullScreen()">
                <img src="../Requirements/IMG/Logo.png">
            </div>

            <div class="HomeHeaderBtn">
                <button type="button" onclick="ShowChat()">
                    <span>2</span>
                    <img src="../Requirements/IMG/Chat.png">
                </button>
                <button type="button" onclick="$('.SideMenu ').show()">
                    <img src="../Requirements/IMG/Menu.png">
                </button>
            </div>
        </div>

        <div class="HomeStoriesParent">
            <div class="HomeStories">
                <div class="HomeStoriesItem" onclick="AddStory()">
                    <g>
                        <i class="fa fa-plus"></i>
                    </g>
                    <label> Add Story </label>
                </div>
                <div class="HomeStoriesItem" onclick="ShowStory()">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg">
                    <label>Mohammad Al-Turk</label>
                </div>

                <div class="HomeStoriesItem" onclick="ShowStory()">
                    <img src="https://randomuser.me/api/portraits/women/2.jpg">
                    <label>Sarah Al-Jamal</label>
                </div>

                <div class="HomeStoriesItem" onclick="ShowStory()">
                    <img src="https://randomuser.me/api/portraits/men/3.jpg">
                    <label>Omar Haddad</label>
                </div>

                <div class="HomeStoriesItem" onclick="ShowStory()">
                    <img src="https://randomuser.me/api/portraits/women/4.jpg">
                    <label>Laila Abu Khaled</label>
                </div>

                <div class="HomeStoriesItem" onclick="ShowStory()">
                    <img src="https://randomuser.me/api/portraits/men/5.jpg">
                    <label>Khaled Yousef</label>
                </div>

                <div class="HomeStoriesItem" onclick="ShowStory()">
                    <img src="https://randomuser.me/api/portraits/women/6.jpg">
                    <label>Reem Taha</label>
                </div>

                <div class="HomeStoriesItem" onclick="ShowStory()">
                    <img src="https://randomuser.me/api/portraits/men/7.jpg">
                    <label>Yousef Ali</label>
                </div>

                <div class="HomeStoriesItem" onclick="ShowStory()">
                    <img src="https://randomuser.me/api/portraits/women/8.jpg">
                    <label>Amal Ismail</label>
                </div>

                <div class="HomeStoriesItem" onclick="ShowStory()">
                    <img src="https://randomuser.me/api/portraits/men/9.jpg">
                    <label>Ahmed Saeed</label>
                </div>

                <div class="HomeStoriesItem" onclick="ShowStory()">
                    <img src="https://randomuser.me/api/portraits/women/10.jpg">
                    <label>Hana Ibrahim</label>
                </div>
            </div>
        </div>

        <div class="HomeSectionHeader">
            <h4>
                Upcoming Lectures:
                <a href="#"
                   onclick="event.preventDefault();$('#Calender').show();$('.NavbarInner button').removeClass('ActiveNavBar')">
                    Open Calender
                    <i class="fa fa-angle-right"></i>
                </a>
            </h4>
        </div>

        <div class="UpcomingLectures">
            <div class="UpcomingLecturesItem UpcomingLecturesItemToday">
                <i class="fa fa-calendar-alt"></i>
                <h1>
                    TODAY
                </h1>
                <label>
                    <i class="fa fa-clock"></i>
                    2:00 PM
                </label>
            </div>

            <div class="UpcomingLecturesItem">
                <i class="fa fa-calendar-alt"></i>
                <h1>
                    5
                    <u>February</u>
                </h1>
                <label>
                    <i class="fa fa-clock"></i>
                    12:30 PM
                </label>
            </div>

            <div class="UpcomingLecturesItem">
                <i class="fa fa-calendar-alt"></i>
                <h1>
                    11
                    <u>February</u>
                </h1>
                <label>
                    <i class="fa fa-clock"></i>
                    5:30 PM
                </label>
            </div>
        </div>

        <div class="HomeSlider">
            <div class="HomeSliderItem">
                <div class="HomeSliderItemInner">
                    <img src="../Requirements/IMG/HomeSlider/1.jpg">
                </div>
            </div>
            <div class="HomeSliderItem">
                <div class="HomeSliderItemInner">
                    <img src="../Requirements/IMG/HomeSlider/2.jpg">
                </div>
            </div>
            <div class="HomeSliderItem">
                <div class="HomeSliderItemInner">
                    <img src="../Requirements/IMG/HomeSlider/3.jpg">
                </div>
            </div>
        </div>

        <div class="HomeSearch">
            <div class="HomeSearchHolder">
                <img src="../Requirements/IMG/SearchArt.gif" class="SearchArt">
                <input type="text" placeholder="Search Here">
                <g>
                    <i class="fa fa-search"></i>
                </g>
            </div>
        </div>

        <div class="HomeSectionHeader">
            <h4>
                Popular Courses:
                <a href="#" onclick="event.preventDefault();$('#CourseBtn').click()">
                    See All
                    <i class="fa fa-angle-right"></i>
                </a>
            </h4>
        </div>

        <div class="PopularCourses">
            <div class="PopularCoursesItem PuchasedPopularCoursesItem">
                <h4>Introduction to Watercolor Techniques</h4>
                <label>
                    <g>
                        <i class="fa fa-user"></i>
                        Layla Ahmed
                    </g>
                    <g>
                        <i class="fa fa-camera"></i>
                        8 Lectures
                    </g>
                    <g>
                        <i class="fa fa-clock"></i>
                        12 Hours
                    </g>
                </label>
                <h6 class="CourseIsPurchased">
                    Purchased
                </h6>
                <button type="button" class="OpenCourseBtn">
                    Open Course
                </button>
            </div>
            <div class="PopularCoursesItem">
                <h4>Advanced Sketching and Shading</h4>
                <label>
                    <g>
                        <i class="fa fa-user"></i>
                        Omar Al-Tamimi
                    </g>
                    <g>
                        <i class="fa fa-camera"></i>
                        10 Lectures
                    </g>
                    <g>
                        <i class="fa fa-clock"></i>
                        20 Hours
                    </g>
                </label>
                <h6>
                    <s>30.00</s>
                    20.00
                    <u>JOD</u>
                </h6>
                <button type="button">
                    Get Course
                </button>
            </div>
            <div class="PopularCoursesItem">
                <h4>Basics of Digital Illustration</h4>
                <label>
                    <g>
                        <i class="fa fa-user"></i>
                        Hana Khalid
                    </g>
                    <g>
                        <i class="fa fa-camera"></i>
                        6 Lectures
                    </g>
                    <g>
                        <i class="fa fa-clock"></i>
                        10 Hours
                    </g>
                </label>
                <h6>
                    18.00
                    <u>JOD</u>
                </h6>
                <button type="button">
                    Get Course
                </button>
            </div>
            <div class="PopularCoursesItem">
                <h4>Mastering Acrylic Painting</h4>
                <label>
                    <g>
                        <i class="fa fa-user"></i>
                        Nour Abu Saleh
                    </g>
                    <g>
                        <i class="fa fa-camera"></i>
                        7 Lectures
                    </g>
                    <g>
                        <i class="fa fa-clock"></i>
                        15 Hours
                    </g>
                </label>
                <h6>
                    22.00
                    <u>JOD</u>
                </h6>
                <button type="button">
                    Get Course
                </button>
            </div>
        </div>

        <div class="PlatformTops">
            <div class="PlatformTopsInner">
                <h3 class="PlatformTopsHeader">
                    This Week Top 3
                </h3>

                <div class="PlatformTopsItem PlatformTopsItemFst">
                    <div class="PlatformTopsUser">
                        <img src="https://randomuser.me/api/portraits/men/1.jpg" class="PlatformTopsUserThumb">
                        <label>Mohammad</label>
                    </div>

                    <div class="PlatformTopsItemScore">
                        <h5>
                            1
                            <u>156 Pts</u>
                        </h5>
                    </div>
                </div>

                <div class="PlatformTopsItem PlatformTopsItemScnd">
                    <div class="PlatformTopsUser">
                        <img src="https://randomuser.me/api/portraits/men/7.jpg" class="PlatformTopsUserThumb">
                        <label>Yousef</label>
                    </div>

                    <div class="PlatformTopsItemScore">
                        <h5>
                            2
                            <u>142 Pts</u>
                        </h5>
                    </div>
                </div>

                <div class="PlatformTopsItem PlatformTopsItemThrd">
                    <div class="PlatformTopsUser">
                        <img src="https://randomuser.me/api/portraits/women/4.jpg" class="PlatformTopsUserThumb">
                        <label>Laila</label>
                    </div>

                    <div class="PlatformTopsItemScore">
                        <h5>
                            3
                            <u>112 Pts</u>
                        </h5>
                    </div>
                </div>
            </div>
        </div>

        <div class="HomeSectionHeader">
            <h4>
                Latest Products:
                <a href="#" onclick="event.preventDefault();$('#ShopBtn').click()">
                    All Products
                    <i class="fa fa-angle-right"></i>
                </a>
            </h4>
        </div>

        <div class="HomeProductsSlider" onmouseup="$('.SwhipeHere').fadeOut(600)">
            <img src="../Requirements/IMG/SwhipeHere.gif" class="SwhipeHere">
            <div class="HomeProductsSliderGH">
                <div class="HomeProductsSliderItem">
                    <img class="HomeProductsSliderThumb"
                         src="https://www.artstoreonline.com.au/cdn/shop/files/ArtSpectrum_SustainableWatercolourPad_A3_300gsm_1600x1600_03d019eb-173e-40ba-937b-6f9850242302_220x220.webp?v=1729043398">
                    <div class="HomeProductsSliderItemText">
                        <h1>Staedtler Graphite Pencils Set</h1>
                        <h4>
                            <s>4.00</s>
                            3.00<u>JOD</u>
                        </h4>
                    </div>
                </div>

                <div class="HomeProductsSliderItem">
                    <img class="HomeProductsSliderThumb"
                         src="https://www.artstoreonline.com.au/cdn/shop/files/Liquitex_ProfessionalSprayPaint_400ml_FluorescentGreen_1600x1600_5b58e2cd-3d00-464d-9ef1-cf797526b7d5_220x220.webp?v=1729123935">
                    <div class="HomeProductsSliderItemText">
                        <h1>Sakura Pigma Micron Fineliners - 6 Pack</h1>
                        <h4>7.50<u>JOD</u></h4>
                    </div>
                </div>

                <div class="HomeProductsSliderItem">
                    <img class="HomeProductsSliderThumb"
                         src="https://www.artstoreonline.com.au/cdn/shop/files/Jasart_FloaterFrame_12x16_Group_1600x1600_e23691bf-8d10-4288-b0f4-f05f727d79c4_220x220.webp?v=1729123610">
                    <div class="HomeProductsSliderItemText">
                        <h1>Faber-Castell Kneadable Eraser</h1>
                        <h4>1.50<u>JOD</u></h4>
                    </div>
                </div>

                <div class="HomeProductsSliderItem">
                    <img class="HomeProductsSliderThumb"
                         src="https://www.artstoreonline.com.au/cdn/shop/files/GelPress_GelPrintingPlate_5x7_1600x1600_84268f4f-b8a6-4382-91b7-ea27a7c3bf34_220x220.webp?v=1729124698">
                    <div class="HomeProductsSliderItemText">
                        <h1>Liquitex Basics Acrylic Paint Set - 6 Colors</h1>
                        <h4>
                            <s>14.00</s>
                            10.00<u>JOD</u>
                        </h4>
                    </div>
                </div>

                <div class="HomeProductsSliderItem">
                    <img class="HomeProductsSliderThumb"
                         src="https://www.artstoreonline.com.au/cdn/shop/files/8607856_236x236.jpg?v=1712878496">
                    <div class="HomeProductsSliderItemText">
                        <h1>Canson Artist Sketchbook - 100 Sheets</h1>
                        <h4>5.00<u>JOD</u></h4>
                    </div>
                </div>

                <div class="HomeProductsSliderItem">
                    <img class="HomeProductsSliderThumb"
                         src="https://www.artstoreonline.com.au/cdn/shop/files/0006670_236x236.jpg?v=1712816871">
                    <div class="HomeProductsSliderItemText">
                        <h1>Professional Paint Brushes - 10 Pack</h1>
                        <h4>
                            <s>8.00</s>
                            6.50<u>JOD</u>
                        </h4>
                    </div>
                </div>

                <div class="HomeProductsSliderItem">
                    <img class="HomeProductsSliderThumb"
                         src="https://www.artstoreonline.com.au/cdn/shop/files/0378080_512x512.jpg?v=1712878898">
                    <div class="HomeProductsSliderItemText">
                        <h1>Canvas Panels - Set of 3</h1>
                        <h4>3.00<u>JOD</u></h4>
                    </div>
                </div>

                <div class="HomeProductsSliderItem">
                    <img class="HomeProductsSliderThumb"
                         src="https://www.artstoreonline.com.au/cdn/shop/files/51bQjhjlb3L._AC_SL1500-3_386a3979-2eb7-430e-a251-985e354fedcd_236x236.jpg?v=1713233341">
                    <div class="HomeProductsSliderItemText">
                        <h1>Winsor & Newton Watercolor Paints</h1>
                        <h4>
                            <s>10.00</s>
                            8.00<u>JOD</u>
                        </h4>
                    </div>
                </div>

                <div class="HomeProductsSliderItem">
                    <img class="HomeProductsSliderThumb"
                         src="https://www.artstoreonline.com.au/cdn/shop/files/0101950_236x236.jpg?v=1712897125">
                    <div class="HomeProductsSliderItemText">
                        <h1>Blending Stumps - 6 Pack</h1>
                        <h4>2.50<u>JOD</u></h4>
                    </div>
                </div>

                <div class="HomeProductsSliderItem">
                    <img class="HomeProductsSliderThumb"
                         src="https://www.artstoreonline.com.au/cdn/shop/files/SMA4E_236x236.jpg?v=1709169152">
                    <div class="HomeProductsSliderItemText">
                        <h1>Graphite Pencil Kit - Artist Edition</h1>
                        <h4>9.00<u>JOD</u></h4>
                    </div>
                </div>

            </div>
        </div>
    </section>

    <section class="MainView animate__animated animate__fadeInRight" id="Profile">
        <div class="UserCover">
            <img src="https://i0.wp.com/inesepogagallery.com/wp-content/uploads/I12-MG_6974-2-draw-buildings.jpg?ssl=1">
        </div>
        <div class="UserIntroduction">
            <img src="https://randomuser.me/api/portraits/men/1.jpg">
            <h4> Mohammad AL-Turk </h4>
            <label>
                @MohammadAvsar_96
            </label>
            <button type="button">
                <i class="fa fa-pen"></i>
            </button>
        </div>

        <div class="ProfileNumbers">
            <div class="ProfileNumbersItem">
                <label>Points</label>
                <h4 style="color: #6fb36b;">1,250</h4>
            </div>
            <div class="ProfileNumbersItem">
                <label>Followers</label>
                <h4>420</h4>
            </div>
            <div class="ProfileNumbersItem">
                <label>Following</label>
                <h4>64</h4>
            </div>
            <div class="ProfileNumbersItem">
                <label>Posts</label>
                <h4>95</h4>
            </div>
        </div>

        <div class="HomeStoriesParent">
            <div class="HomeStories">
                <div class="HomeStoriesItem" onclick="AddStory()">
                    <g>
                        <i class="fa fa-plus"></i>
                    </g>
                    <label> Add Story </label>
                </div>

                <div class="HomeStoriesItem" onclick="ShowStory()">
                    <img src="https://i0.wp.com/inesepogagallery.com/wp-content/uploads/I12-MG_6974-2-draw-buildings.jpg?ssl=1">
                    <label>🏙️ Urban Sketches</label>
                </div>

                <div class="HomeStoriesItem" onclick="ShowStory()">
                    <img src="https://skyryedesign.com/wp-content/uploads/2024/10/Blinded-9x12-Charcoal-on-Paper.jpeg">
                    <label>🖤 Charcoal Magic</label>
                </div>

                <div class="HomeStoriesItem" onclick="ShowStory()">
                    <img src="https://img.freepik.com/free-photo/bird-coloring-page-line-art_23-2151550195.jpg">
                    <label>🦜 Bird Art</label>
                </div>

                <div class="HomeStoriesItem" onclick="ShowStory()">
                    <img src="https://arts-sciences.buffalo.edu/content/dam/arts-sciences/art/photos/research/drawing/DSC_0063.jpg">
                    <label>✏️ Artistic Studies</label>
                </div>

                <div class="HomeStoriesItem" onclick="ShowStory()">
                    <img src="https://theoldkennels.co.uk/wp-content/uploads/2020/08/IMG_6222-scaled.jpg">
                    <label>🎨 Colorful Moments</label>
                </div>

            </div>
        </div>

        <div class="UserPosts">
            <div class="UserPostsItem">
                <img class="UserPostsItemImage" src="https://static.wikia.nocookie.net/5a7ab3e5-f54e-4071-a477-e965db070a60/scale-to-width/755">
            </div>
            <div class="UserPostsItem">
                <g>
                    <img src="https://cdn-icons-png.flaticon.com/128/11820/11820168.png">
                </g>
                <img class="UserPostsItemImage" src="https://cdn.class101.net/images/4e6882b6-73e1-47f4-941c-f38f606b14eb">
            </div>
            <div class="UserPostsItem">
                <img class="UserPostsItemImage" src="https://cdn.class101.net/images/5d8a609c-5cc8-41ec-a570-351eb5327c81">
            </div>
            <div class="UserPostsItem">
                <img class="UserPostsItemImage" src="https://artsology.com/blog/wp-content/uploads/2024/03/A-minimalist-tattoo-line-art-of-a-pressed-daisy-an.jpg">
            </div>
            <div class="UserPostsItem">
                <img class="UserPostsItemImage" src="https://5.imimg.com/data5/ANDROID/Default/2020/11/US/HM/RQ/114030731/product-jpeg-500x500.jpg">
            </div>
            <div class="UserPostsItem">
                <img class="UserPostsItemImage" src="https://theartandbeyond.com/wp-content/uploads/2022/11/pencil-sketch-80.jpg">
            </div>
            <div class="UserPostsItem">
                <img class="UserPostsItemImage" src="https://i.pinimg.com/736x/f7/cd/db/f7cddb1d1f9ee99f6b0e0009cf8e7944.jpg">
            </div>
            <div class="UserPostsItem">
                <img class="UserPostsItemImage" src="https://5.imimg.com/data5/SELLER/Default/2021/3/AB/OU/BC/124806607/img-20201026-194517-800-jpg-500x500.jpg">
            </div>
            <div class="UserPostsItem">
                <img class="UserPostsItemImage" src="https://bingedrawing.com/wp-content/uploads/2023/02/1-1-1024x733.png">
            </div>
        </div>
    </section>

    <section class="MainView animate__animated animate__fadeInRight" id="Shop">
        <div class="ShopSlider">
            <!-- Slide 1 -->
            <div class="ShopSliderItem">
                <div class="ShopSliderItemInner">
                    <img src="https://arteza.com/cdn/shop/products/drawing-detailing-accessory-tools-35-piece-set_OV9zGlp5.jpg?v=1652894137" alt="Paint Brush Set">
                    <div class="ShopSliderItemContent">
                        <div class="ShopSliderItemContentInner">
                            <h1> Paint Brush Set </h1>
                            <label>
                                <s>10.00</s>
                                8.00
                                <u>JOD</u>
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Slide 2 -->
            <div class="ShopSliderItem">
                <div class="ShopSliderItemInner">
                    <img src="https://arteza.com/cdn/shop/files/Arteza_SketchingSet_ARTZ-9520_Cam_1_9bab6522-70af-4ab1-a1a3-ca5b7c0175c1.png?v=1683107270&width=823" alt="Acrylic Paint Pack">
                    <div class="ShopSliderItemContent">
                        <div class="ShopSliderItemContentInner">
                            <h1> Acrylic Paint Pack </h1>
                            <label>
                                <s>15.00</s>
                                12.50
                                <u>JOD</u>
                            </label>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Slide 3 -->
            <div class="ShopSliderItem">
                <div class="ShopSliderItemInner">
                    <img src="https://arteza.com/cdn/shop/products/kids-activity-book-connect-the-dots-50sheets_gUNpYkLd.jpg?v=1652895015&width=823" alt="Sketch Pad">
                    <div class="ShopSliderItemContent">
                        <div class="ShopSliderItemContentInner">
                            <h1> Sketch Pad </h1>
                            <label>
                                <s>7.00</s>
                                5.50
                                <u>JOD</u>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="ShopSearch">
            <div class="HomeSearchHolder">
                <img src="../Requirements/IMG/SearchArt.gif" class="SearchArt">
                <input type="text" placeholder="Search For Products Here">
                <g>
                    <i class="fa fa-search"></i>
                </g>
            </div>
        </div>

        <div class="StoreCategories">
            <!-- Category 1 -->
            <div class="StoreCategoriesItem">
                <div class="StoreCategoriesItemInner">
                    <img src="../Requirements/IMG/Categories/Category1.png">
                    <label> Paint Brushes </label>
                </div>
            </div>

            <!-- Category 2 -->
            <div class="StoreCategoriesItem">
                <div class="StoreCategoriesItemInner">
                    <img src="../Requirements/IMG/Categories/Category2.png">
                    <label> Paint Palettes </label>
                </div>
            </div>

            <!-- Category 3 -->
            <div class="StoreCategoriesItem">
                <div class="StoreCategoriesItemInner">
                    <img src="../Requirements/IMG/Categories/Category3.png">
                    <label> Pencils & Erasers </label>
                </div>
            </div>

            <!-- Category 4 -->
            <div class="StoreCategoriesItem">
                <div class="StoreCategoriesItemInner">
                    <img src="../Requirements/IMG/Categories/Category4.png">
                    <label> Sketch Pads </label>
                </div>
            </div>

            <!-- Category 5 -->
            <div class="StoreCategoriesItem">
                <div class="StoreCategoriesItemInner">
                    <img src="../Requirements/IMG/Categories/Category5.png">
                    <label> Markers </label>
                </div>
            </div>

            <!-- Category 6 -->
            <div class="StoreCategoriesItem">
                <div class="StoreCategoriesItemInner">
                    <img src="../Requirements/IMG/Categories/StoreCategory1.png">
                    <label> Sharpeners </label>
                </div>
            </div>
        </div>

        <div class="HomeSectionHeader">
            <h4>
                Just Arrived:
            </h4>
        </div>

        <div class="StoreJustArrived">
            <div class="HomeProductsSliderItem">
                <img class="HomeProductsSliderThumb"
                     src="https://www.artstoreonline.com.au/cdn/shop/files/ArtSpectrum_SustainableWatercolourPad_A3_300gsm_1600x1600_03d019eb-173e-40ba-937b-6f9850242302_220x220.webp?v=1729043398">
                <div class="HomeProductsSliderItemText">
                    <h1>Staedtler Graphite Pencils Set</h1>
                    <h4>
                        <s>4.00</s>
                        3.00<u>JOD</u>
                    </h4>
                </div>
            </div>

            <div class="HomeProductsSliderItem">
                <img class="HomeProductsSliderThumb"
                     src="https://www.artstoreonline.com.au/cdn/shop/files/Liquitex_ProfessionalSprayPaint_400ml_FluorescentGreen_1600x1600_5b58e2cd-3d00-464d-9ef1-cf797526b7d5_220x220.webp?v=1729123935">
                <div class="HomeProductsSliderItemText">
                    <h1>Sakura Pigma Micron Fineliners - 6 Pack</h1>
                    <h4>7.50<u>JOD</u></h4>
                </div>
            </div>

            <div class="HomeProductsSliderItem">
                <img class="HomeProductsSliderThumb"
                     src="https://www.artstoreonline.com.au/cdn/shop/files/Jasart_FloaterFrame_12x16_Group_1600x1600_e23691bf-8d10-4288-b0f4-f05f727d79c4_220x220.webp?v=1729123610">
                <div class="HomeProductsSliderItemText">
                    <h1>Faber-Castell Kneadable Eraser</h1>
                    <h4>1.50<u>JOD</u></h4>
                </div>
            </div>

            <div class="HomeProductsSliderItem">
                <img class="HomeProductsSliderThumb"
                     src="https://www.artstoreonline.com.au/cdn/shop/files/GelPress_GelPrintingPlate_5x7_1600x1600_84268f4f-b8a6-4382-91b7-ea27a7c3bf34_220x220.webp?v=1729124698">
                <div class="HomeProductsSliderItemText">
                    <h1>Liquitex Basics Acrylic Paint Set - 6 Colors</h1>
                    <h4>
                        <s>14.00</s>
                        10.00<u>JOD</u>
                    </h4>
                </div>
            </div>

            <div class="HomeProductsSliderItem">
                <img class="HomeProductsSliderThumb"
                     src="https://www.artstoreonline.com.au/cdn/shop/files/8607856_236x236.jpg?v=1712878496">
                <div class="HomeProductsSliderItemText">
                    <h1>Canson Artist Sketchbook - 100 Sheets</h1>
                    <h4>5.00<u>JOD</u></h4>
                </div>
            </div>

            <div class="HomeProductsSliderItem">
                <img class="HomeProductsSliderThumb"
                     src="https://www.artstoreonline.com.au/cdn/shop/files/0006670_236x236.jpg?v=1712816871">
                <div class="HomeProductsSliderItemText">
                    <h1>Professional Paint Brushes - 10 Pack</h1>
                    <h4>
                        <s>8.00</s>
                        6.50<u>JOD</u>
                    </h4>
                </div>
            </div>

            <div class="HomeProductsSliderItem">
                <img class="HomeProductsSliderThumb"
                     src="https://www.artstoreonline.com.au/cdn/shop/files/0378080_512x512.jpg?v=1712878898">
                <div class="HomeProductsSliderItemText">
                    <h1>Canvas Panels - Set of 3</h1>
                    <h4>3.00<u>JOD</u></h4>
                </div>
            </div>

            <div class="HomeProductsSliderItem">
                <img class="HomeProductsSliderThumb"
                     src="https://www.artstoreonline.com.au/cdn/shop/files/51bQjhjlb3L._AC_SL1500-3_386a3979-2eb7-430e-a251-985e354fedcd_236x236.jpg?v=1713233341">
                <div class="HomeProductsSliderItemText">
                    <h1>Winsor & Newton Watercolor Paints</h1>
                    <h4>
                        <s>10.00</s>
                        8.00<u>JOD</u>
                    </h4>
                </div>
            </div>

            <div class="HomeProductsSliderItem">
                <img class="HomeProductsSliderThumb"
                     src="https://www.artstoreonline.com.au/cdn/shop/files/0101950_236x236.jpg?v=1712897125">
                <div class="HomeProductsSliderItemText">
                    <h1>Blending Stumps - 6 Pack</h1>
                    <h4>2.50<u>JOD</u></h4>
                </div>
            </div>

            <div class="HomeProductsSliderItem">
                <img class="HomeProductsSliderThumb"
                     src="https://www.artstoreonline.com.au/cdn/shop/files/SMA4E_236x236.jpg?v=1709169152">
                <div class="HomeProductsSliderItemText">
                    <h1>Graphite Pencil Kit - Artist Edition</h1>
                    <h4>9.00<u>JOD</u></h4>
                </div>
            </div>
        </div>
    </section>

    <section class="MainView animate__animated animate__fadeInRight" id="Cart">
        <div class="CalenderHeader">
            <h4>
                <i class="fa fa-shopping-cart"></i>
                My Cart
            </h4>
        </div>

        <div class="MyCartGH">
            <div class="MyCartItem">
                <img src="https://www.artstoreonline.com.au/cdn/shop/files/Liquitex_ProfessionalSprayPaint_400ml_FluorescentGreen_1600x1600_5b58e2cd-3d00-464d-9ef1-cf797526b7d5_220x220.webp?v=1729123935" class="MyCartItemThumb">
                <div class="MyCartItemText">
                    <h4> Acrylic Paint Set </h4>
                    <label> Art Supplies > Paints </label>
                    <h5>
                        <s>20.00</s>
                        15.50 <u>JOD</u>
                    </h5>
                    <div class="CartIncreaserGH">
                        <div class="CartIncreaser">
                            <button type="button" onclick="Increase($(this))">
                                <i class="fa fa-plus"></i>
                            </button>
                            <input type="number" value="1">
                            <button type="button" onclick="Increase($(this))">
                                <i class="fa fa-minus"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="MyCartItem">
                <img src="https://www.artstoreonline.com.au/cdn/shop/files/GelPress_GelPrintingPlate_5x7_1600x1600_84268f4f-b8a6-4382-91b7-ea27a7c3bf34_220x220.webp?v=1729124698" class="MyCartItemThumb">
                <div class="MyCartItemText">
                    <h4> Sketching Pencil Kit </h4>
                    <label> Drawing Tools > Pencils </label>
                    <h5>
                        10.00 <u>JOD</u>
                    </h5>
                    <div class="CartIncreaserGH">
                        <div class="CartIncreaser">
                            <button type="button" onclick="Increase($(this))">
                                <i class="fa fa-plus"></i>
                            </button>
                            <input type="number" value="1">
                            <button type="button" onclick="Increase($(this))">
                                <i class="fa fa-minus"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="MyCartItem">
                <img src="https://www.artstoreonline.com.au/cdn/shop/files/0378080_512x512.jpg?v=1712878898" class="MyCartItemThumb">
                <div class="MyCartItemText">
                    <h4> Canvas Boards Pack </h4>
                    <label> Art Supplies > Canvas </label>
                    <h5>
                        25.00 <u>JOD</u>
                    </h5>
                    <div class="CartIncreaserGH">
                        <div class="CartIncreaser">
                            <button type="button" onclick="Increase($(this))">
                                <i class="fa fa-plus"></i>
                            </button>
                            <input type="number" value="1">
                            <button type="button" onclick="Increase($(this))">
                                <i class="fa fa-minus"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <button type="button" class="PlaceOrderBtn animate__animated animate__fadeInUp animate__delay-1s">
            <img src="https://cdn-icons-png.flaticon.com/128/665/665865.png">
            Place Order
        </button>
    </section>

    <section class="MainView animate__animated animate__fadeInRight" id="Wishlist">
        <h1> Wishlist </h1>
        <h1> Wishlist </h1>
    </section>

    <section class="MainView animate__animated animate__fadeInRight" id="Courses">
        <div class="CoursesSlider">
            <div class="CoursesSliderItem">
                <div class="CoursesSliderItemInner">
                    <img src="https://img-c.udemycdn.com/course/750x422/2022460_8546.jpg">
                    <div class="CoursesSliderItemContent">
                        <div class="CoursesSliderItemContentInner">
                            <h1>Mastering Oil Painting Techniques</h1>
                            <label>
                                <s>15.00</s>
                                12.00
                                <u>JOD</u>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="CoursesSliderItem">
                <div class="CoursesSliderItemInner">
                    <img src="https://img-c.udemycdn.com/course/750x422/5387582_f621_3.jpg">
                    <div class="CoursesSliderItemContent">
                        <div class="CoursesSliderItemContentInner">
                            <h1>Introduction to Watercolor Painting</h1>
                            <label>
                                <s>18.00</s>
                                14.00
                                <u>JOD</u>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="CoursesSliderItem">
                <div class="CoursesSliderItemInner">
                    <img src="https://cdn.domestika.org/c_fill,dpr_auto,f_auto,q_auto,w_1200/v1660738736/blog-post-open-graph-covers/000/008/220/8220-original.png?1660738736">
                    <div class="CoursesSliderItemContent">
                        <div class="CoursesSliderItemContentInner">
                            <h1>Basics of Sketching and Shading</h1>
                            <label>
                                <s>12.00</s>
                                10.00
                                <u>JOD</u>
                            </label>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div class="HomeSearch">
            <div class="HomeSearchHolder">
                <img src="../Requirements/IMG/SearchArt.gif" class="SearchArt">
                <input type="text" placeholder="Search For Courses Here ..">
                <g>
                    <i class="fa fa-search"></i>
                </g>
            </div>
        </div>

        <div class="PopularCourses">
            <!-- Course 1: Purchased -->
            <div class="PopularCoursesItem PuchasedPopularCoursesItem">
                <h4>Introduction to Watercolor Techniques</h4>
                <label>
                    <g>
                        <i class="fa fa-user"></i>
                        Layla Ahmed
                    </g>
                    <g>
                        <i class="fa fa-camera"></i>
                        8 Lectures
                    </g>
                    <g>
                        <i class="fa fa-clock"></i>
                        12 Hours
                    </g>
                </label>
                <h6 class="CourseIsPurchased">
                    FREE
                </h6>
                <button type="button" class="OpenCourseBtn">
                    Open Course
                </button>
            </div>

            <!-- Course 2 -->
            <div class="PopularCoursesItem">
                <h4>Advanced Sketching and Shading</h4>
                <label>
                    <g>
                        <i class="fa fa-user"></i>
                        Omar Al-Tamimi
                    </g>
                    <g>
                        <i class="fa fa-camera"></i>
                        10 Lectures
                    </g>
                    <g>
                        <i class="fa fa-clock"></i>
                        20 Hours
                    </g>
                </label>
                <h6>
                    <s>30.00</s>
                    20.00
                    <u>JOD</u>
                </h6>
                <button type="button">
                    Get Course
                </button>
            </div>

            <!-- Course 3 -->
            <div class="PopularCoursesItem">
                <h4>Basics of Digital Illustration</h4>
                <label>
                    <g>
                        <i class="fa fa-user"></i>
                        Hana Khalid
                    </g>
                    <g>
                        <i class="fa fa-camera"></i>
                        6 Lectures
                    </g>
                    <g>
                        <i class="fa fa-clock"></i>
                        10 Hours
                    </g>
                </label>
                <h6>
                    18.00
                    <u>JOD</u>
                </h6>
                <button type="button">
                    Get Course
                </button>
            </div>

            <!-- Course 4 -->
            <div class="PopularCoursesItem">
                <h4>Mastering Acrylic Painting</h4>
                <label>
                    <g>
                        <i class="fa fa-user"></i>
                        Nour Abu Saleh
                    </g>
                    <g>
                        <i class="fa fa-camera"></i>
                        7 Lectures
                    </g>
                    <g>
                        <i class="fa fa-clock"></i>
                        15 Hours
                    </g>
                </label>
                <h6>
                    22.00
                    <u>JOD</u>
                </h6>
                <button type="button">
                    Get Course
                </button>
            </div>

            <!-- Course 5 -->
            <div class="PopularCoursesItem">
                <h4>Oil Painting Techniques</h4>
                <label>
                    <g>
                        <i class="fa fa-user"></i>
                        Sara Al-Momani
                    </g>
                    <g>
                        <i class="fa fa-camera"></i>
                        10 Lectures
                    </g>
                    <g>
                        <i class="fa fa-clock"></i>
                        20 Hours
                    </g>
                </label>
                <h6>
                    <s>40.00</s>
                    35.00
                    <u>JOD</u>
                </h6>
                <button type="button">
                    Get Course
                </button>
            </div>

            <!-- Course 6: Purchased -->
            <div class="PopularCoursesItem PuchasedPopularCoursesItem">
                <h4>Color Theory for Artists</h4>
                <label>
                    <g>
                        <i class="fa fa-user"></i>
                        Tamer Hussain
                    </g>
                    <g>
                        <i class="fa fa-camera"></i>
                        5 Lectures
                    </g>
                    <g>
                        <i class="fa fa-clock"></i>
                        8 Hours
                    </g>
                </label>
                <h6 class="CourseIsPurchased">
                    Purchased
                </h6>
                <button type="button" class="OpenCourseBtn">
                    Open Course
                </button>
            </div>

            <!-- Course 7 -->
            <div class="PopularCoursesItem">
                <h4>Creating Realistic Portraits</h4>
                <label>
                    <g>
                        <i class="fa fa-user"></i>
                        Mohammed Al-Turk
                    </g>
                    <g>
                        <i class="fa fa-camera"></i>
                        9 Lectures
                    </g>
                    <g>
                        <i class="fa fa-clock"></i>
                        15 Hours
                    </g>
                </label>
                <h6>
                    28.00
                    <u>JOD</u>
                </h6>
                <button type="button">
                    Get Course
                </button>
            </div>

            <!-- Course 8 -->
            <div class="PopularCoursesItem">
                <h4>Introduction to 3D Art</h4>
                <label>
                    <g>
                        <i class="fa fa-user"></i>
                        Ahmed Ziad
                    </g>
                    <g>
                        <i class="fa fa-camera"></i>
                        5 Lectures
                    </g>
                    <g>
                        <i class="fa fa-clock"></i>
                        10 Hours
                    </g>
                </label>
                <h6 class="CourseIsPurchased">
                    20.00
                    <u>JOD</u>
                </h6>
                <button type="button">
                    Get Course
                </button>
            </div>

            <!-- Course 9 -->
            <div class="PopularCoursesItem">
                <h4>Exploring Abstract Art</h4>
                <label>
                    <g>
                        <i class="fa fa-user"></i>
                        Laila Khatib
                    </g>
                    <g>
                        <i class="fa fa-camera"></i>
                        6 Lectures
                    </g>
                    <g>
                        <i class="fa fa-clock"></i>
                        10 Hours
                    </g>
                </label>
                <h6>
                    <s>25.00</s>
                    20.00
                    <u>JOD</u>
                </h6>
                <button type="button">
                    Get Course
                </button>
            </div>

            <!-- Course 10 -->
            <div class="PopularCoursesItem">
                <h4>Introduction to Calligraphy</h4>
                <label>
                    <g>
                        <i class="fa fa-user"></i>
                        Majd Fathi
                    </g>
                    <g>
                        <i class="fa fa-camera"></i>
                        4 Lectures
                    </g>
                    <g>
                        <i class="fa fa-clock"></i>
                        6 Hours
                    </g>
                </label>
                <h6>
                    12.00
                    <u>JOD</u>
                </h6>
                <button type="button">
                    Get Course
                </button>
            </div>
        </div>
    </section>

    <section class="MainView animate__animated animate__fadeInRight" id="Calender">
        <div class="CalenderHeader">
            <h4>
                <i class="fa fa-calendar-alt"></i>
                January Lectures Calendar
            </h4>
        </div>

        <div class="UpcomingLecturesCalender">
            <div class="UpcomingLecturesCalenderIem">
                <h1> 1 </h1>
                <label> January </label>
            </div>
            <div class="UpcomingLecturesCalenderIem">
                <h1> 2 </h1>
                <label> January </label>
            </div>
            <div class="UpcomingLecturesCalenderIem">
                <h1> 3 </h1>
                <label> January </label>
            </div>
            <div class="UpcomingLecturesCalenderIem UpcomingLecturesCalenderIemToday">
                <h1> TODAY </h1>
            </div>
            <div class="UpcomingLecturesCalenderIem">
                <h2>
                    <i class="fa fa-clock"></i>
                    Lecture 5:30 PM
                </h2>
                <h1> 5 </h1>
                <label> January </label>
            </div>
            <div class="UpcomingLecturesCalenderIem">
                <h1> 6 </h1>
                <label> January </label>
            </div>
            <div class="UpcomingLecturesCalenderIem">
                <h1> 7 </h1>
                <label> January </label>
            </div>
            <div class="UpcomingLecturesCalenderIem">
                <h1> 8 </h1>
                <label> January </label>
            </div>
            <div class="UpcomingLecturesCalenderIem">
                <h2>
                    <i class="fa fa-clock"></i>
                    Lecture 6:00 PM
                </h2>
                <h1> 9 </h1>
                <label> January </label>
            </div>
            <div class="UpcomingLecturesCalenderIem">
                <h1> 10 </h1>
                <label> January </label>
            </div>
            <div class="UpcomingLecturesCalenderIem">
                <h1> 11 </h1>
                <label> January </label>
            </div>
            <div class="UpcomingLecturesCalenderIem">
                <h2>
                    <i class="fa fa-clock"></i>
                    Lecture 7:00 PM
                </h2>
                <h1> 12 </h1>
                <label> January </label>
            </div>
            <div class="UpcomingLecturesCalenderIem">
                <h1> 13 </h1>
                <label> January </label>
            </div>
            <div class="UpcomingLecturesCalenderIem">
                <h1> 14 </h1>
                <label> January </label>
            </div>
            <div class="UpcomingLecturesCalenderIem">
                <h1> 15 </h1>
                <label> January </label>
            </div>
            <div class="UpcomingLecturesCalenderIem">
                <h2>
                    <i class="fa fa-clock"></i>
                    Lecture 8:00 PM
                </h2>
                <h1> 16 </h1>
                <label> January </label>
            </div>
            <div class="UpcomingLecturesCalenderIem">
                <h1> 17 </h1>
                <label> January </label>
            </div>
            <div class="UpcomingLecturesCalenderIem">
                <h1> 18 </h1>
                <label> January </label>
            </div>
            <div class="UpcomingLecturesCalenderIem">
                <h1> 19 </h1>
                <label> January </label>
            </div>
            <div class="UpcomingLecturesCalenderIem">
                <h2>
                    <i class="fa fa-clock"></i>
                    Lecture 4:00 PM
                </h2>
                <h1> 20 </h1>
                <label> January </label>
            </div>
            <div class="UpcomingLecturesCalenderIem">
                <h1> 21 </h1>
                <label> January </label>
            </div>
            <div class="UpcomingLecturesCalenderIem">
                <h1> 22 </h1>
                <label> January </label>
            </div>
            <div class="UpcomingLecturesCalenderIem">
                <h1> 23 </h1>
                <label> January </label>
            </div>
            <div class="UpcomingLecturesCalenderIem">
                <h2>
                    <i class="fa fa-clock"></i>
                    Lecture 6:30 PM
                </h2>
                <h1> 24 </h1>
                <label> January </label>
            </div>
            <div class="UpcomingLecturesCalenderIem">
                <h1> 25 </h1>
                <label> January </label>
            </div>
            <div class="UpcomingLecturesCalenderIem">
                <h1> 26 </h1>
                <label> January </label>
            </div>
            <div class="UpcomingLecturesCalenderIem">
                <h1> 27 </h1>
                <label> January </label>
            </div>
            <div class="UpcomingLecturesCalenderIem">
                <h2>
                    <i class="fa fa-clock"></i>
                    Lecture 7:30 PM
                </h2>
                <h1> 28 </h1>
                <label> January </label>
            </div>
            <div class="UpcomingLecturesCalenderIem">
                <h1> 29 </h1>
                <label> January </label>
            </div>
            <div class="UpcomingLecturesCalenderIem">
                <h1> 30 </h1>
                <label> January </label>
            </div>
        </div>
    </section>

    <section class="MainView animate__animated animate__fadeInRight" id="Charts">
        <h1> Charts </h1>
        <h1> Charts </h1>
    </section>

    <section class="MainView animate__animated animate__fadeInRight" id="Settings">
        <h1> Settings </h1>
        <h1> Settings </h1>
    </section>

    <section class="MainView animate__animated animate__fadeInRight" id="Terms">
        <h1> Terms </h1>
        <h1> Terms </h1>
    </section>

    <section class="MainView animate__animated animate__fadeInRight" id="OrderBook">
        <h1> OrderBook </h1>
        <h1> OrderBook </h1>
    </section>
</main>

<navbar>
    <div class="NavbarInner">
        <button type="button" onclick="NavBar($(this));$('.HomeSlider .slick-next')[0].click()" id="HomeBtn" rel="#Home">
            <img src="../Requirements/IMG/Home.png">
            Home
        </button>
        <button type="button" id="ShopBtn" onclick="NavBar($(this));$('.ShopSlider .slick-next')[0].click()" rel="#Shop">
            <img src="../Requirements/IMG/Shop.png">
            Shop
        </button>
        <button type="button" id="CourseBtn" onclick="NavBar($(this));$('.CoursesSlider .slick-next')[0].click()" rel="#Courses">
            <img src="../Requirements/IMG/Courses.png">
            Courses
        </button>
        <button type="button" onclick="NavBar($(this))" rel="#Profile" id="ProfileBtn">
            <img src="../Requirements/IMG/Profile.png">
            Profile
        </button>
    </div>
</navbar>

<section class="MainView animate__animated animate__fadeInRight" id="Chat">
    <img src="../Requirements/IMG/ChatBG.jpg" class="ChatBG">

    <div class="ChatHeader animate__animated animate__fadeInDown">
        <img src="../Requirements/IMG/Chat.png" class="ChatHeaderIcon">
        <h4>
            Chat With Us
        </h4>
        <button type="button" onclick="$('#HomeBtn').click();$('.ChatItem').hide()">
            <img src="https://cdn-icons-png.flaticon.com/128/10100/10100000.png">
        </button>
    </div>

    <div class="ChatBody">
        <div class="ChatItem">
            <div class="ChatItemInner animate__animated animate__zoomIn">
                <h5>
                    <img src="../Requirements/IMG/PreloaderLogo.png">
                    Karlos Academy
                </h5>
                <p>
                    Welcome to our platform! 🎉
                    Don't miss out on the upcoming live session tomorrow at 3 PM. Make sure to check the schedule for more updates!
                </p>
                <label>
                    2 Hours ago
                </label>
            </div>
        </div>

        <div class="ChatItem">
            <div class="ChatItemInner animate__animated animate__zoomIn">
                <h5>
                    <img src="../Requirements/IMG/PreloaderLogo.png">
                    Karlos Academy
                </h5>
                <p>
                    Reminder: 📝 Today is the last day to submit your assignments for the first module.
                    Please log in and upload your work by midnight. Good luck!
                </p>
                <label>
                    30 Minutes ago
                </label>
            </div>
        </div>

    </div>

    <div class="ChatActions">
        <button type="button" onclick="$(this).find('input')[0].click()">
            <input type="file" class="d-none" accept="image/*">
            <img src="https://cdn-icons-png.flaticon.com/128/54/54719.png">
        </button>
        <input type="text" placeholder="Lets Talk ...">
        <h1>
            <img src="https://cdn-icons-png.flaticon.com/128/16397/16397660.png">
        </h1>
    </div>
</section>

<div class="Story">
    <div class="StoryInner animate__animated animate__fadeInDown">
        <div class="StoryHeader">
            <img src="https://randomuser.me/api/portraits/men/1.jpg">
            <h4>Mohammad Al-Turk</h4>
            <label>2 hours ago</label>
            <button type="button" onclick="CloseStory()">
                <i class="fa fa-times-circle"></i>
            </button>
        </div>
        <video src="../Requirements/Videos/Story.mp4" loop></video>
    </div>
</div>

<div class="SideMenu">
    <div class="SideMenuInner">
        <div class="SideMenuFade" onclick="$('.SideMenu').fadeOut(500)"></div>
        <div class="SideMenuDiv animate__animated animate__fadeInRight">
            <div class="SideMenuLogo">
                <img src="../Requirements/IMG/LogoFull.png">
            </div>

            <ul>
                <li onclick="$('#ProfileBtn').click()">
                    <img src="https://cdn-icons-png.flaticon.com/128/1077/1077114.png">
                    Profile
                </li>
                <li onclick="SideMenuClicker($(this))" rel="#Calender">
                    <img src="https://cdn-icons-png.flaticon.com/128/2886/2886665.png">
                    My Calendar
                </li>
                <li onclick="SideMenuClicker($(this))" rel="#Cart">
                    <label><g>3</g></label>
                    <img src="https://cdn-icons-png.flaticon.com/128/665/665865.png">
                    Cart
                </li>
                <li onclick="SideMenuClicker($(this))" rel="#Wishlist">
                    <img src="https://cdn-icons-png.flaticon.com/128/4240/4240564.png">
                    Wishlist
                </li>
                <li onclick="SideMenuClicker($(this))" rel="#Charts">
                    <img src="https://cdn-icons-png.flaticon.com/128/2137/2137695.png">
                    Charts
                </li>
                <li onclick="SideMenuClicker($(this))" rel="#Settings">
                    <img src="https://cdn-icons-png.flaticon.com/128/503/503849.png">
                    Settings
                </li>
                <li onclick="SideMenuClicker($(this))" rel="#Terms">
                    <img src="https://cdn-icons-png.flaticon.com/128/7358/7358516.png">
                    Terms & Conditions
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="Preloader">
    <div class="PreloaderInner animate__animated">
        <img src="../Requirements/IMG/PreloaderBG.png" class="PreloaderBG">
        <div class="PreloaderDiv">
            <img src="../Requirements/IMG/PreloaderLogo.png">
            <label>
                Just a second ...
            </label>
        </div>
    </div>
</div>

<audio id="ChatPopUpSound" src="../Requirements/ChatPopUpSound.mp3" class="d-none"></audio>

<script src="../Requirements/JS/bootstrap.min.js" crossorigin="anonymous"></script>
<script src="../Requirements/JS/jquery-3.6.0.min.js"></script>
<script src="../Requirements/JS/slick.min.js"></script>
<script src="../Requirements/JS/javascript.js"></script>
</body>
</html>
