template/theme.html

<!DOCTYPE html>
<html lang="vi">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title> Admin Hura Pc </title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <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=Inter:wght@300;400;500;600;700;800;900&display=swap"
    rel="stylesheet">

  <link href="https://cdn.jsdelivr.net/npm/daisyui@4.6.0/dist/full.min.css" rel="stylesheet" type="text/css" />

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />

  <link rel="stylesheet" media="screen" href="{{ 'pc_style.css' | asset_url }}?v=1.99.21" />

  <script src="{{ 'tailwindcss.js' | asset_url }}"></script>

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>

</head>

<body>

  {{global|show_var}}
  {{page|show_var}}

  <div class="admin-global-container">

    <!-- Menu cũ  -->
    <div class="admin-menu-container box-menu sticky top-0 bottom-0 h-[100vh] hidden" id="menu-big">
      <a href="javascript:void(0)" class="icon-close" id="js-hide-menu">
        <i class="fa-solid fa-outdent"></i>
      </a>

      <a href="" class="menu-logo">
        <img src="{{ 'logo.png' | asset_url }}" />
      </a>

      <div class="menu-list">
        <a href="/" class="item">
          <i class="icons icon-home"></i>
          <span class="title"> Home </span>
        </a>

        <details>
          <summary class="item">
            <div class="flex items-center">
              <i class="icons icon-order"></i>
              <span class="title"> Bán hàng </span>
            </div>

            <i class="fa-solid fa-angle-right"></i>
          </summary>
          <div class="sub-menu">
            {% for _item in global.main_menu.order.menu %}
            <a href="?module={{_item.module }}&view={{_item.view }}"> {{_item.name }} </a>
            {% endfor %}
          </div>

        </details>

        <details>
          <summary class="item">
            <div class="flex items-center">
              <i class="icons icon-product"></i>

              <span class="title"> Sản phẩm </span>
            </div>

            <i class="fa-solid fa-angle-right"></i>
          </summary>

          <div class="sub-menu">
            {% for _item in global.main_menu.product.menu %}
            <a href="?module={{_item.module }}&view={{_item.view }}"> {{_item.name }} </a>
            {% endfor %}
          </div>
        </details>

        <details>
          <summary class="item">
            <div class="flex items-center">
              <i class="icons icon-customer"></i>

              <span class="title"> Khách hàng </span>
            </div>

            <i class="fa-solid fa-angle-right"></i>
          </summary>

          <div class="sub-menu">
            {% for _item in global.main_menu.customer.menu %}
            <a href="?module={{_item.module }}&view={{_item.view }}"> {{_item.name }} </a>
            {% endfor %}
          </div>
        </details>

        <details>
          <summary class="item">
            <div class="flex items-center">
              <i class="icons icon-marketing"></i>

              <span class="title"> Marketing </span>
            </div>

            <i class="fa-solid fa-angle-right"></i>
          </summary>

          <div class="sub-menu">
            {% for _item in global.main_menu.marketing.menu %}
            <a href="?module={{_item.module }}&view={{_item.view }}"> {{_item.name }} </a>
            {% endfor %}
          </div>
        </details>

        <details>
          <summary class="item">
            <div class="flex items-center">
              <i class="icons icon-content"></i>

              <span class="title"> Nội dung </span>
            </div>

            <i class="fa-solid fa-angle-right"></i>
          </summary>

          <div class="sub-menu">
            <a href=""> Menu title </a>
            <a href=""> Menu title </a>
            <a href=""> Menu title </a>
            <a href=""> Menu title </a>
          </div>
        </details>

        <details>
          <summary class="item">
            <div class="flex items-center">
              <i class="icons icon-stats"></i>

              <span class="title"> Thống kê </span>
            </div>

            <i class="fa-solid fa-angle-right"></i>
          </summary>

          <div class="sub-menu">
            <a href=""> Menu title </a>
            <a href=""> Menu title </a>
            <a href=""> Menu title </a>
            <a href=""> Menu title </a>
          </div>
        </details>

        <details>
          <summary class="item">
            <div class=" flex items-center">
              <i class="icons icon-system"></i>

              <span class="title"> Hệ thống </span>
            </div>

            <i class="fa-solid fa-angle-right"></i>
          </summary>

          <div class="sub-menu">
            <a href=""> Menu title </a>
            <a href=""> Menu title </a>
            <a href=""> Menu title </a>
            <a href=""> Menu title </a>
          </div>
        </details>
      </div>

      <div class="menu-list">
        <p style="color: #81B5E4;margin: 0 0 10px;font-weight: 700;padding: 0 16px;">TÀI KHOẢN</p>

        <a href="" class="item">
          <i class="icons icon-settings"></i>
          <span class="title"> Cài đặt </span>
        </a>

        <a href="" class="item">
          <i class="icons icon-support"></i>
          <span class="title"> Hỗ trợ </span>
        </a>

        <a href="" class="item">
          <i class="icons icon-account"></i>
          <span class="title"> Quản lý tài khoản </span>
        </a>
      </div>

      <a href="" class="item">
        <i class="icons icon-logout"></i>
        <span class="title"> Thoát quản trị </span>
      </a>

    </div>

    <!-- Menu mới -->
    <div class="admin-menu box-menu sticky top-0 bottom-0 h-[100vh] bg-[#004E99] flex flex-col justify-between"
      id="menu-small">
      <div>
        <div
          class="logo item items-center justify-center border-[rgba(255,255,255,0.15)] border-b p-[20px_0_38px_!important]">
          <a href="/" class="">
            <img src="../assets/images/logo_small.png" alt="">
          </a>
          <a href="javascript:void(0)" class="icon-close" id="js-show-menu">
            <i class="fa-solid fa-indent"></i>
          </a>
        </div>

        <div class="item">
          <a href="/" class="icons icon-home"> </a>

          <div class="sub-menu">
            <p class="font-bold"> Home </p>
          </div>
        </div>

        <div class="item">
          <a href="" class="icons icon-sell"> </a>

          <div class="sub-menu">
            <p class="font-bold"> Bán hàng </p>

            <div class="menu-list">
              {% for _item in global.main_menu.order.menu %}
              <a href="/?module={{_item.module }}&view={{_item.view }}"> {{_item.name }} </a>
              {% endfor %}
            </div>
          </div>
        </div>

        <div class="item">
          <a href="" class="icons icon-product"> </a>

          <div class="sub-menu">
            <p class="font-bold"> Sản phẩm </p>

            <div class="menu-list">
              {% for _item in global.main_menu.product.menu %}
              <a href="/?module={{_item.module }}&view={{_item.view }}"> {{_item.name }} </a>
              {% endfor %}
            </div>
          </div>
        </div>

        <div class="item">
          <a href="" class="icons icon-user"> </a>

          <div class="sub-menu">
            <p class="font-bold"> Khách hàng </p>

            <div class="menu-list">
              {% for _item in global.main_menu.customer.menu %}
              <a href="/?module={{_item.module }}&view={{_item.view }}"> {{_item.name }} </a>
              {% endfor %}
            </div>
          </div>
        </div>

        <div class="item">
          <a href="" class="icons icon-marketing"> </a>

          <div class="sub-menu">
            <p class="font-bold"> Marketing </p>

            <div class="menu-list">
              {% for _item in global.main_menu.marketing.menu %}
              <a href="/?module={{_item.module }}&view={{_item.view }}"> {{_item.name }} </a>
              {% endfor %}
            </div>
          </div>
        </div>

        <div class="item">
          <a href="" class="icons icon-content"> </a>

          <div class="sub-menu">
            <p class="font-bold"> Nội dung </p>

            <div class="menu-list">
              {% for _item in global.main_menu.article.menu %}
              <a href="/?module={{_item.module }}&view={{_item.view }}"> {{_item.name }} </a>
              {% endfor %}
            </div>
          </div>
        </div>

        <div class="item">
          <a href="" class="icons icon-stats"> </a>

          <div class="sub-menu">
            <p class="font-bold"> Thống kê </p>

            <div class="menu-list">
              {% for _item in global.main_menu.report.menu %}
              <a href="/?module={{_item.module }}&view={{_item.view }}"> {{_item.name }} </a>
              {% endfor %}
            </div>
          </div>
        </div>

        <div class="item border-[rgba(255,255,255,0.15)] border-b">
          <a href="" class="icons icon-system"> </a>

          <div class="sub-menu">
            <p class="font-bold"> Hệ thống </p>

            <div class="menu-list">
              {% for _item in global.main_menu.system.menu %}
              <a href="/?module={{_item.module }}&view={{_item.view }}"> {{_item.name }} </a>
              {% endfor %}
            </div>
          </div>
        </div>
      </div>

      <div>
        <div class="item bottom">
          <a href="" class="icons icon-settings"> </a>

          <div class="sub-menu">
            <p class="font-bold"> Cài đặt </p>

            <div class="menu-list">
              {% for _item in global.main_menu.system.menu %}
              <a href="/?module={{_item.module }}&view={{_item.view }}"> {{_item.name }} </a>
              {% endfor %}
            </div>
          </div>
        </div>

        <div class="item bottom">
          <a href="" class="icons icon-support"> </a>

          <div class="sub-menu">
            <p class="font-bold"> Hỗ trợ </p>

            <div class="menu-list">
              <a href=""> Menu title </a>
              <a href=""> Menu title </a>
              <a href=""> Menu title </a>
              <a href=""> Menu title </a>
            </div>
          </div>
        </div>

        <div class="item bottom">
          <a href="" class="icons icon-account"> </a>

          <div class="sub-menu">
            <p class="font-bold"> Quản lý tài khoản </p>

            <div class="menu-list">
              <a href=""> Menu title </a>
              <a href=""> Menu title </a>
              <a href=""> Menu title </a>
              <a href=""> Menu title </a>
            </div>
          </div>
        </div>
      </div>

      <div class="item mb-[20px]">
        <a href="" class="icons icon-logout"> </a>

        <div class="sub-menu">
          <p class="font-bold"> Thoát quản trị </p>
        </div>
      </div>
    </div>

    <div class="admin-content-container w-[100%]">
      <!-- Header -->
      <div class="admin-header-container flex items-center justify-between bg-white px-4 py-3">
        <form class="max-w-[420px] relative w-[100%] menu-hide" id="js-form-search">
          <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
            <i class="icons icon-search"></i>
          </div>

          <input type="search" class="block border h-[36px] ps-10 rounded w-full" placeholder="Tìm kiếm">
        </form>

        <div class="admin-header-right flex items-center justify-end">
          <a href="" title="Truy cập trung tâm hỗ trợ của Hurasoft">
            <i class="icons header-support"></i>
          </a>

          <div
            class="group relative cursor-pointer ml-[20px] mr-[35px] group [&_summary::-webkit-details-marker]:hidden">
            <div class="relative flex">
              <i class="icons icon-notification"></i>

              <span
                class="absolute bg-[#E00000] font-[500] h-[17px] leading-[17px] note right-[-5px] rounded-lg text-[#fff] text-[13px] text-center top-[-3px] w-[17px]">0</span>
            </div>

            <div
              class="group-hover:opacity-[1] group-hover:z-[1] opacity-0 absolute bg-white leading-[30px] note-list shadow whitespace-nowrap z-[-1] rounded-[4px] right-[-10px]">
              <a href=""> Menu title </a>
              <a href=""> Menu title </a>
              <a href=""> Menu title </a>
              <a href=""> Menu title </a>
            </div>
          </div>

          <div class="group relative cursor-pointer group [&_summary::-webkit-details-marker]:hidden">
            <div class="flex items-center">
              <p class="m-0 mr-[10px]"> ducdt@hurasoft.com </p>

              <img src="https://via.placeholder.com/72x72" class="block rounded-[50%] w-[36px] h-[36px] mr-[8px]" />

              <i class="fa-solid fa-sort-down text-[#C9C9C9] mb-[3px]"></i>
            </div>

            <div
              class="group-hover:opacity-[1] group-hover:z-[1] opacity-0 absolute bg-white leading-[30px] note-list shadow whitespace-nowrap z-[-1] rounded-[4px] right-0">
              <a href="">Đổi mật khẩu</a>
              <a href="">Thoát quản trị</a>
            </div>
          </div>
        </div>
      </div>

      <!-- Content -->
      {{page_content}}


    </div>

  </div>
</body>

</html>