@{title('پنل')}

@{section header}

@{end}

<div class="Hrow">
    <div class="Hcontainer Hcontainer-1300 Htxt-left HpaddT-50 HpaddLR-25" id="tec-details">
            <h2>panel Index</h2>
             
    </div>
</div>



<p>&nbsp;</p>

<div class="Hrow scrollHide" id="modal" >
        <div id="Cover"></div>
        <div id="modal-body-box">
                <span id="close" class="fas fa-times"></span>
                <div id="modal-body" class="scrollHide">
                </div>
        </div>
</div>

@{section footer}
<!-- <script src="../../../js/Https-moduls/Https-NumTools.js"></script>
<script src="../../../js/Https-moduls/Https-Date.js"></script>
<script src="../../../js/Https-moduls/Https-Calender.js"></script>  -->
<script>
        //let p=HsP();
        //Hcalender2({"number":2,"name":"month","loc":"demo"});
</script>
<script>

        $('html').click(function(evt){       // this func is for change the display of menu-btn to none if user click anywhere else of menu-btn
                // if(evt.target.class == ".menu-btn")
                //     return;
                 //For descendants of .menu-btn being clicked, remove this check if you do not want to put constraint on descendants.
                 if($(evt.target).closest('.HperCLD').length){
                        return false;
                 }
                 if($(evt.target).closest('.zakharofskykochol').length){
                     return false;
                 }
                 //Do processing of click event here for every element except with class .menu-btn
                 $(".zakharofskykochol>div:first-child").each(function(){$(this).css({display:"none"});});
        });


    $(document).ready(function(){
        $(".demo>.button").click(function(){
                var clsName=$(this).attr("BtnType");
                $(this).parent().children().filter(".button").removeClass("SetActivate_background");
                $(this).addClass("SetActivate_background");
                //alert(clsName);
                var images=$(this).siblings(".Gif-show").children();
                images.removeClass("SetActivate");
                images.filter("."+clsName).addClass("SetActivate");
        });
        $(".options").click(function(){
                var body=$(this).children().filter(".option-details").eq(0).html();
                $("#modal #modal-body").html(body);
                $("#modal").css({"display":"block"});
                $("#modal #Cover").stop();
                $("#modal > #modal-body-box").stop();
                $("#modal #Cover").animate({opacity:"1"},"slow");
                $("#modal > #modal-body-box").animate({top:"50%"},"slow");
        });
        $("#modal #close").click(function(){
                $("#modal #Cover").stop();
                $("#modal > #modal-body-box").stop();
                $("#modal #Cover").animate({opacity:"0"},"slow");
                $("#modal > #modal-body-box").animate({top:"-150%"},"slow",function(){
                        $("#modal").css({"display":"none"});
                });
        });
        $("#modal #Cover").click(function(){
                $("#modal #Cover").stop();
                $("#modal > #modal-body-box").stop();
                $("#modal #Cover").animate({opacity:"0"},"slow");
                $("#modal > #modal-body-box").animate({top:"-150%"},"slow",function(){
                        $("#modal").css({"display":"none"});
                });
        });
    });
</script>
@{end}