<!DOCTYPE html>
{% for lang in site['languages'] %}
{% if lang['active'] %}
<html lang="{{ lang['code'] }}">
{% endif %}
{% endfor %}
<head>
  <base href="{{ site['url'] }}/">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{ title }}</title>
  <meta name="keywords" content="{{ keywords }}">
  <meta name="description" content="{{ description }}">
  {% if site['favicon'] %}
    <link rel="shortcut icon" type="image/ico" href="{{ site['favicon'] }}" />
  {% endif %}

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
  
  
 <link rel="stylesheet" type="text/css" href="https://cdn.mypanel.link/a3vltc/7j4kauifzjbbi8l2.css">
                <link rel="stylesheet" type="text/css" href="https://res.cloudinary.com/dsdwwnkmq/raw/upload/v1734082373/bigsmm/knbpf8eujb9u042mlfgh.css">
                    <link rel="stylesheet" type="text/css" href="https://cdn.mypanel.link/libs/bootstrap-datetimepicker/4.17.47/bootstrap-datetimepicker.min.css">
                    <link rel="stylesheet" type="text/css" href="https://cdn.mypanel.link/css/font-awesome/css/all.min.css">
                    <link rel="stylesheet" type="text/css" href="https://cdn.mypanel.link/global/cuw6iix855efzrw3.css">
                    <link rel="stylesheet" type="text/css" href="https://cdn.mypanel.link/global/ny6mhzbbh07u28pq.css">
                <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
  
    {{ headerCode }}


    
   
   
     <script src="https://smmpaw.com/css/panel/smmgenie/cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.2/umd/popper.min.js"></script>

   
   
   <!-- end -->
    
  </head>
<style>
@media only screen and (max-width: 991.98px) {
    .sidebar .menu .nav-link, .sidebar .menu .nav-link.active {
        margin: 0px;
    }
}
@media (max-width: 3000.98px) {
    label.switch-theme {
       height: 48px;
        width: 85px;
        margin-left: -47px;
        padding: 4px;
    }
}
.sidebar .menu .nav-link {
    transition: all 0.15s ease;
    color: #fff !important;
    justify-content: center;
    border-radius: 1px;
    margin-bottom: 7px;
}
.mb-2, .my-2 {
    
    margin-bottom: -8px !important;

}
.sidebar .menu .nav-link.active {
    box-shadow: inset 0px -2px 1px rgba(0, 0, 0, 0.05), inset 0px 1px 1px var(--color-1);
    background-color: #FF7700;
    color: #ffffff !important;
}
.sidebar .menu .nav-link{
    color: black !important;
}
.dark .sidebar .menu .nav-link{
    color: white !important;
}
.close-sidebar{
    background-color: #FF7700;
}
.sidebar .menu .nav-link:hover {
    color: #fff;
    background: #f9d9d9;
}
.card {
    transition: all 0.15s ease;
    background-color: var(--color-1);
    border-radius: 15px;
    border: 2px solid #FF7700;
}
body.dark{
    --color-1: #161b22;
    --color-2: #0d1117;
    --color-3: #bfd5fd;
    --color-4: #111620;
    --color-5: #FFFFFF;
    --color-6: #62bff8;
    --color-7: #43aef0;
    --color-8: rgb(98, 191, 248, .15);

}
html {
    --color-1: #FCFCFC;
    --color-2: #e5e5e5;
    --color-3: #6F767E;
    --color-4: #EFEFEF;
    --color-5: #1A1D1F;
    --color-6: #62bff8;
    --color-7: #43aef0;
    --color-8: rgb(98, 191, 248, .15);
}
.pt-4, .py-4 {
     padding-top: 0rem !important;
}
.border-top {
    border-top: 0px solid red !important;
        width: 43px;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    white-space: none;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
    .form-control{
    color: black;
    border: 1px solid #FF7700;
}
.dark .form-control{
    color: white;
}
.panel-body{
    color: black;
}
.dark body{
    
}
.dark .panel-body{
    color: white;
}
.mobile-navbar{
    display: none;
}
.dark header{
    background-color: #282828;
}
header{
    background-color: #FFEDE0;

    height: 70px;
}
.dark .sidebar{
     background-color: #282828;
}
.sidebar{
  background-color: #FFEDE0;
body{
    background: var(--color-1) url(https://cdn.mypanel.link/hghbyr/yh0d5zfexh6g596d.png);
}
.card-head{
    background: none;
}
@media (max-width: 766.98px) {
    .navbar {
        width: 67% !important;
    }
}
    @media (max-width: 3000.98px) {
    label.switch-theme {
        height: 35px !important;
        width: 43px !important;
    }
}
label.switch-theme .mode-dark, label.switch-theme .mode-light {
   
    margin: -7px !important;
}
</style>
    {%  if settings['demo_mode'] == 1 %}
        
       <style>
            .fixed-footer{
                position: fixed;
                background: #fff;
                border:1px solid #000;
                width:100%;
                bottom:0;
                z-index:99999;
                padding:10px;
            }
        </style>
        
    <div class="fixed-footer">
            <h4 style="color:#000">Choose Theme: 
                
                   {% for thm in site['themes'] %}
<a href="/select-theme/{{thm['dirname']}}" style="color:blue;margin:0 10px;font-size:16px">[ {{thm['name']}} ]</a>
{% endfor %}

            </h4>
    </div>
  
{% endif %}
 

{% if user['auth'] %}

<body class="dashboard">
     <script>
         if (localStorage.getItem("darkMode") == null) {
             localStorage.setItem("darkMode", true);
             document.body.classList.add("dark");
         }
         else if (JSON.parse(localStorage.getItem('darkMode'))) {
             document.body.classList.add("dark");
             document.addEventListener("DOMContentLoaded", function() {
                 document.querySelector('#switch-theme-input').checked = true;
             });
         }
      </script>
  <div class="overlay"></div>	

      <header class="d-flex align-items-center px-xl-7 px-4 py-3">
        <button class="close-sidebar js-close-sidebar" style="display: block !important;">
                      <i class="ri-arrow-right-s-line"></i>
                  </button>
        
        <div class="header-msg">
                            <h6 class="header-title">Welcome To panel</h6>
                    </div>
         <div class="navbar d-flex align-items-center ms-auto">
           
                <!-- Night Mode -->
                                <div class="border-top bottom pt-4">
            <input id="switch-theme-input" type="checkbox">
            <label class="switch-theme js-theme-switch d-flex" for="switch-theme-input">
               <div class="mode-light d-flex flex-fill align-items-center justify-content-center">
                  <div class="theme-icon">
                     <i class="ri-sun-line"></i>
                  </div>
                  <div class="theme-text">
                                            Light
                                     </div>
               </div>
               <div class="mode-dark d-flex flex-fill align-items-center justify-content-center">
                  <div class="theme-icon">
                     <i class="ri-moon-line"></i>
                  </div>
                  <div class="theme-text">
                                            Dark
                                     
                  </div>
               </div>
            </label>
         </div>   
            <div class="nav-item currencyItem toggle-item" style="margin-top: 7px">
               <button class="toggle-head nav-link">
                    <i class="ri-earth-line"></i>
               </button>
               <div class="toggle-body">
                  <div class="top d-flex align-items-center justify-content-between mb-3">
                     <div class="toggle-title ms-3">
                           Language
                      </div>
                  </div>
                  <div class="currencyList" id="currencies-list" style="max-height: 250px; overflow-x: scroll">
                                         <a class="item d-flex align-items-center justify-content-start p-3 position-relative" href="#">
                        <div class="content">
                           <div class="item-title mb-1 d-flex align-items-center justify-content-between">
                              <div class="name"><span class="cText">English</span></div>
                           </div>
                        </div>
                     </a>
                                         <a class="item d-flex align-items-center justify-content-start p-3 position-relative" href="#">
                        <div class="content">
                           <div class="item-title mb-1 d-flex align-items-center justify-content-between">
                              <div class="name"><span class="cText">Bengali</span></div>
                           </div>
                        </div>
                     </a>
                                      </div>
               </div>
            </div>
           
            <div class="nav-item currencyItem toggle-item">
               <a href="/account" class="toggle-head nav-link">
                    <i class="ri-account-circle-line"></i>
               </a>
            </div>
            
                       
                       
                       <div class="nav-item currencyItem toggle-item" style="margin-top: 7px">
               <button class="toggle-head nav-link">
                    <i class="ri-swap-line"></i>
               </button>
               <div class="toggle-body">
                  <div class="top d-flex align-items-center justify-content-between mb-3">
                     <div class="toggle-title ms-3">
                           Currency
                    </div>
                  </div>
                  <div class="currencyList" id="currencies-list" style="max-height: 250px; overflow-x: scroll">
                              {{ currencies_dropdown }}
                                      </div>
               </div>
            </div>
                      
            <div class="nav-item currencyItem toggle-item">
               <a href="/logout" class="toggle-head nav-link">
                    <i class="ri-shut-down-line" style="color: #dc3545; border-color: #dc3545; background: rgb(220, 53, 69, .15);"></i>
               </a>
           </div>
         </div>
         
      </header>
      
      
       <script>
         const name = "{{ user['username'] }}"
         document.getElementById('named').innerHTML = name.substring(0, 1).toUpperCase()
       </script>
      
      
      <aside class="sidebar passive d-flex flex-column position-fixed flex-nowrap p-1 pt-4">
         <div class="d-flex sidebar-top justify-content-center align-items-center mb-3 w-100">
            <a class="logo flex-shrink-0" href="/">
                <img class="main-logo" src="{{ site['logo'] }}">
                                        <img src="{{ site['logo'] }}" class="main-logo-lg light" alt="{{ site["site_name"] }}">
                                            <img src="{{ site['logo'] }}" class="main-logo-lg dark" alt="{{ site["site_name"] }}">
            </a>
            <button class="close-sidebar js-close-sidebar d-block d-md-none">
                <i class="ri-close-line"></i>
            </button>
         </div>
         
               <div class="nav nav-pills mb-auto mt-3 menu">
                                    <div  class="nav-item mb-2 active" >
                         <a {% if active_menu == "neworder" %} href="/"   class="nav-link d-flex align-items-center p-3 active"  {% endif %} href="/"   class="nav-link d-flex align-items-center p-3"> 
                       
                                                     <i class="ri-home-line"></i>
                                                     <span class="menu-text">New order</span>
                        </a>
                     </div>
                  <!--   <div class="nav nav-pills mb-auto mt-3 menu">
                                    <div  class="nav-item mb-2 active" >
                         <a {% if active_menu == "massorder" %} href="/massorder"   class="nav-link d-flex align-items-center p-3 active"  {% endif %} href="/massorder"   class="nav-link d-flex align-items-center p-3"> 
                       
                                                     <i class="ri-shopping-basket-2-line"></i>
                                                     <span class="menu-text">Massorder</span>
                        </a>
                     </div> -->
                   
                    
                                    <div   class="nav-item mb-2 " >
                        <a {% if active_menu == "orders" %} href="/orders"   class="nav-link d-flex align-items-center p-3 active"  {% endif %} href="/orders"   class="nav-link d-flex align-items-center p-3"> 
                                                     <i class="ri-archive-line"></i>
                                                     <span class="menu-text">My Orders</span>
                        </a>
                     </div>
                                    <div  class="nav-item mb-2" >
                          <a {% if active_menu == "services" %} href="/services"   class="nav-link d-flex align-items-center p-3 active"  {% endif %} href="/services"   class="nav-link d-flex align-items-center p-3"> 
                      
                                                     <i class="ri-file-list-3-line"></i>
                                                     <span class="menu-text">Services List</span>
                        </a>
                     </div>
                                    <div  class="nav-item mb-2" >
                    <a {% if active_menu == "addfunds" %} href="/addfunds"   class="nav-link d-flex align-items-center p-3 active"  {% endif %} href="/addfunds"   class="nav-link d-flex align-items-center p-3"> 
                      
                                                     <i class="ri-money-dollar-circle-line"></i>
                                                     <span class="menu-text">Add funds</span>
                        </a>
                     </div>
                                <!--	<div  class="nav-item mb-2" >
                        <a href="/massorder"  class="nav-link d-flex align-items-center p-3"   >
                                                     <i class="ri-shopping-basket-2-line"></i>
                                                     <span class="menu-text">Mass order</span>
                        </a>
                     </div> -->
                                    <div  class="nav-item mb-2" >
                     <a {% if active_menu == "tickets" %} href="/tickets"   class="nav-link d-flex align-items-center p-3 active"  {% endif %} href="/tickets"   class="nav-link d-flex align-items-center p-3"> 
                                                     <i class="ri-chat-1-line"></i>
                                                     <span class="menu-text">Support</span>
                        </a>
                     </div>
                                    <div  class="nav-item mb-2" >
                     <a href="/refer"   class="nav-link d-flex align-items-center p-3" href="/refer"   class="nav-link d-flex align-items-center p-3"> 
                                                  <i class="ri-link-unlink"></i>
                                                     <span class="menu-text">Affiliate Program</span>
                        </a>
                     </div>
                                    <div  class="nav-item mb-2" >
                     <a  href="/child-panels"   class="nav-link d-flex align-items-center p-3"  href="/child-panels"   class="nav-link d-flex align-items-center p-3"> 
                                                 <i class="ri-store-line"></i>
                                                     <span class="menu-text">Child Panel</span>
                        </a>
                     </div>
                            
                                
                                    <div  class="nav-item mb-2" >
                <a {% if active_menu == "api" %} href="/api"   class="nav-link d-flex align-items-center p-3 active"  {% endif %} href="/api"   class="nav-link d-flex align-items-center p-3"> 
                                                   <i class="ri-code-box-line"></i>
                                                     <span class="menu-text">API</span>
                        </a>
                     </div>
                       
                        <div  class="nav-item mb-2" >
              <a {% if active_menu == "account" %} href="/account"   class="nav-link d-flex align-items-center p-3 active"  {% endif %} href="/account"   class="nav-link d-flex align-items-center p-3"> 
                                                  <i class="ri-home-gear-fill"></i>
                                                      <span class="menu-text">Account</span>
                        </a>
                     </div>
                        <div  class="nav-item mb-2" >
              <a {% if active_menu == "logout" %} href="/logout"   class="nav-link d-flex align-items-center p-3 active"  {% endif %} href="/logout"   class="nav-link d-flex align-items-center p-3"> 
                                                 <i class="ri-logout-box-line"></i>
                                                      <span class="menu-text">Logout</span>
                        </a>
                     </div>
                                <!--	<div  class="nav-item mb-2" >
                        <a href="/updates"  class="nav-link d-flex align-items-center p-3"   >
                                                     <i class="ri-refresh-line"></i>
                                                     <span class="menu-text">Updates</span>
                        </a>
                     </div> -->
                   
               </div>
         
         
         
      </aside>

    <div class="basket-overlay"></div>
    <div class="basket-drawer">
      <div class="drawer-header">
          <h3 class="drawer-header-title">
                            My Cart
                    
          </h3>
        <div class="basket-header-close">
          <i class="ri-close-line"></i>
        </div>
      </div>
        <div class="drawer-body topbar">
            <div class="sepetmodal">
                <div class="sepetbos" style="display: flex;">
                    <i class="ri-shopping-bag-3-line"></i>
                    <p>
                                              There are no orders in your cart.
                                           </p>
                </div>
                        
                <div id="sepetListe">
                
                </div>

                <div id="sepetAlt">
                    
                </div>
          </div>
        </div>        
    </div>        
        
         
         
         
{% else %}
<body id="outside" class="dark ">
        <div id="header" class="headOut">
            <div class="b-menu-wrapper">
                <button class="b-menu-close" onclick="noAuthMenu()">
                    <i class="ri-close-line"></i>
                </button>
                <div class="container">
                    <div class="row row-btn align-items-center">
                        <div class="col-lg-auto d-none d-lg-block">
                            <div class="home-logo">
                              <a href="/">
                                                                    <img src="{{ site["logo"] }}" height="45" alt="{{ site["site_name"] }}" title="">
                                                              </a>
                            </div>
                        </div>
                        <div class="col">
                       <div class="nav-item currencyItem toggle-item">
               <button class="toggle-head nav-link">
                    <i class="ri-earth-line outside-lang"></i>
               </button>
               <div class="toggle-body outside-toggle" >
                  <div class="currencyList" id="currencies-list">
                                          {% for lang in site['languages'] %}
                                         <a class="item d-flex align-items-center justify-content-start p-3 position-relative" onclick="changeLang('{{lang['code']}}')" >
                        <div class="content">
                           <div class="item-title mb-1 d-flex align-items-center justify-content-between">
                              <div class="name"><span class="cText">{{lang['name']}}</span></div>
                           </div>
                        </div>
                     </a>{% endfor %}
                                      </div>
               </div>
            </div>
                                    </div>
                        <div class="col text-center">
                            <ul class="nmenu">
                                                            <li class="nmenu-item">
                                    <a href="/services"   class="nmenu-link" >
                                        Services
                                    </a>
                                </li>
                                                            <li class="nmenu-item">
                                    <a href="/api"   class="nmenu-link" >
                                        API
                                    </a>
                                </li>
                                                        </ul>
                        </div>
                        <div class="row align-items-center">
                            <div class="col-lg-auto col-6">
                              <a href="/" class="header-btn btn-100 without-icon">
                                <span class="text">Sign in</span>
                                <span class="icon">
                                  <i class="ri-arrow-right-line icon-ri"></i>
                                </span>
                              </a>
                            </div>
                            <div class="col-lg-auto col-6">
                              <a href="/signup" class="header-btn btn-100">
                                <span class="text">Sign up</span>
                                <span class="icon">
                                  <i class="ri-arrow-right-line icon-ri"></i>
                                </span>
                              </a>
                            </div>
                          </div>
                    </div>
                </div>
            </div>
            <div class="sm-header">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col">
                            <a href="/">
                                                                    <img src="{{ site["logo"] }}" height="45" alt="{{ site["site_name"] }}" title="">
                                                            </a>
                        </div>
                                            <div class="col-auto">
                       <div class="nav-item currencyItem toggle-item">
               <button class="toggle-head nav-link">
                    <i class="ri-earth-line outside-lang"></i>
               </button>
               <div class="toggle-body outside-toggle" >
                  <div class="currencyList" id="currencies-list" style="max-height: 250px; overflow-x: scroll">
                                     {% for lang in site['languages'] %}
                                         <a class="item d-flex align-items-center justify-content-start p-3 position-relative" onclick="changeLang('{{lang['code']}}')" >
                        <div class="content">
                           <div class="item-title mb-1 d-flex align-items-center justify-content-between">
                              <div class="name"><span class="cText">{{lang['name']}}</span></div>
                           </div>
                        </div>
                     </a>{% endfor %}        </div>
               </div>
            </div>
                                    </div>
                        <div class="col-auto">
                            <button class="menu-btn" onclick="noAuthMenu()">
                                <i class="ri-menu-line"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
{% endif %}



        
<style>

    .cookie-overlay {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  background: #fff;
  z-index: 2051;
  line-height: 20px;
  font-size: 14px;
  border-radius: 6px;

  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);

  > div:first-child {
    width: 458px;
  }

  a {
    text-decoration: underline;
  }

  .close-cookies {
    cursor: pointer;
  }

  @include media-breakpoint-down(md) {
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0;

    > div:first-child {
      width: auto;
    }
  }
}
</style>

   
<script>
    
    
      $('.langs-btn').hover(function(){
    $('.langs-btn-content').toggle();
  });
  
    $('.currency-btn').hover(function(){
    $('.currency-btn-content').toggle();
  });
  
   $('.theme-btn').hover(function(){
    $('.theme-btn-content').toggle();
  });
  
$(document).on('ready', function() {
  if (document.cookie.indexOf("accepted_cookies=") < 0) {
    $('.cookie-overlay').removeClass('d-none').addClass('d-block');
  }

  $('.accept-cookies').on('click', function() {
    document.cookie = "accepted_cookies=yes;"
    $('.cookie-overlay').removeClass('d-block').addClass('d-none');
  })

  // expand depending on your needs
  $('.close-cookies').on('click', function() {
    $('.cookie-overlay').removeClass('d-block').addClass('d-none');
  })
  

  
  
})
</script>

<script src="https://unpkg.com/wavesurfer.js"></script>

<script>


 $('.langs-btn').hover(function(){
    $('.langs-btn-content').toggle();
  });
  
    $('.currency-btn').hover(function(){
    $('.currency-btn-content').toggle();
  });
  
  
 function changeLang(newLang){
        $.ajax
        ({ 
            url: '/account/change_lang/',
            data: {lang: newLang},
            type: 'post',
            success: function(result)
            {
                
               location.href  = "";
            }
        });
    }
    
    var wavesurfer = WaveSurfer.create({
    container: '#waveform',
    waveColor: 'violet',
    progressColor: 'purple',
    mediaControls:true
});
wavesurfer.load('{{settings['music_url']}}');

wavesurfer.on('ready', wavesurfer.play.bind(wavesurfer));


</script>