u

assets/script/hura.global.css

@@ -0,0 +1,252 @@
+/* ===========================
+   FONT IMPORT (Dùng chung)
+   =========================== */
+@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@100;200;300;400;500;600;700;800;900;1000&display=swap";
+@import "https://fonts.googleapis.com/css2?family=Wix+Madefor+Text:wght@400;500;600;700;800;1000&display=swap";
+@import "https://fonts.googleapis.com/css2?family=Inclusive+Sans:wght@400;500;600;700;800;900;1000&display=swap";
+@import "https://fonts.googleapis.com/css2?family=AR+One+Sans:wght@400;500;600;700;800;1000&display=swap";
+
+@layer properties {
+  :root {
+    --font-sans: "Inclusive Sans", sans-serif;
+    --text-base: 16px;
+    --bg-body: #fafbfd;
+    --color-hura: #0041e8;
+    --color-header: #002bb5;
+    --text-base--line-height: 1.5;
+    --color-black: #000;
+    --color-white: #fff;
+    --spacing: 0.25rem;
+    --layout-topbar-background: #fff;
+    --menu-active: #e9f2ff;
+    --menu-text: #177bff;
+    --menu-sub-bg: #fff;
+  }
+}
+
+@layer base {
+  html,
+  body {
+    font-family: var(--font-sans);
+    font-size: var(--text-base);
+    line-height: var(--text-base--line-height);
+  }
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+}
+
+@layer components {
+  #layout-topbar {
+    background: var(--layout-topbar-background);
+    top: calc(var(--spacing) * 0);
+    z-index: 10;
+    transition-property: top, margin, border-radius;
+    transition-timing-function: var(
+      --tw-ease,
+      var(--default-transition-timing-function)
+    );
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 0.3s;
+    transition-duration: 0.3s;
+    position: sticky;
+    border-bottom-style: solid;
+    border-bottom-width: 1px;
+    border-color: var(--color-base-300);
+  }
+  #layout-content {
+    padding: calc(var(--spacing) * 6);
+    transition-property: all;
+    transition-timing-function: var(
+      --tw-ease,
+      var(--default-transition-timing-function)
+    );
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    flex-grow: 1;
+    background: var(--bg-body);
+  }
+  .bg-menu {
+    background-color: var(--color-header);
+  }
+  /*  menu */
+  .menu {
+    & {
+      --menu-active-bg: #e9f2ff;
+    }
+  }
+  .menu-horizontal {
+    display: inline-flex;
+    flex-direction: row;
+  }
+  .menu-horizontal li {
+    position: relative;
+  }
+
+  /* ACTIVE STATE (LEVEL 1) */
+  .menu-horizontal li.active {
+    background: var(--menu-active);
+  }
+
+  .menu-horizontal li.active .grow,
+  .menu-horizontal li.active svg {
+    color: var(--menu-text);
+  }
+
+  /* ACTIVE STATE (LEVEL 2)  */
+  .menu-horizontal li.active ul li.active {
+    background: var(--color-hura);
+  }
+
+  .menu-horizontal li.active ul li.active a {
+    color: #fff;
+  }
+  /*  HOVER LEVEL 1 */
+
+  .menu-horizontal li:hover {
+    background: var(--menu-active);
+  }
+
+  .menu-horizontal li:hover .grow,
+  .menu-horizontal li:hover svg {
+    color: var(--color-hura);
+  }
+
+  /* Dải hover giữ submenu không bị mất */
+  .menu-horizontal li::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: -18px;
+    width: 100%;
+    height: 30px;
+    display: none;
+  }
+
+  .menu-horizontal li:hover::before {
+    display: block;
+  }
+
+  /* ==========================
+   SUBMENU (UL)
+  ========================== */
+  .menu-horizontal li .submenu {
+    position: absolute !important;
+    top: 125%;
+    left: 0;
+    background: var(--menu-sub-bg);
+    margin-left: 0 !important;
+    padding: 0.5rem;
+    z-index: 999;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    max-height: 500px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    display: none;
+    margin-top: 0 !important;
+  }
+
+  /* DaisyUI details submenu spacing */
+  .menu-horizontal > li:not(.menu-title) > details > ul {
+    margin-top: 1rem;
+    padding-inline-end: 0.5rem;
+  }
+
+  /* SHOW SUBMENU ON HOVER */
+  .menu-horizontal li:hover .submenu,
+  .menu-horizontal li:hover > details > ul {
+    display: block;
+  }
+
+  /* Remove extra before from DaisyUI */
+  .menu-horizontal > li > details > ul:before {
+    content: none;
+  }
+  /* ==========================
+   SUBMENU HOVER ITEMS
+  ========================== */
+  .menu-horizontal li ul li:hover {
+    background: var(--color-hura);
+  }
+
+  .menu-horizontal li ul li:hover a {
+    color: #fff;
+  }
+
+  .menu-horizontal li ul li:hover::before {
+    display: none;
+  }
+  /* Font weight chung */
+  .menu-horizontal .grow {
+    font-weight: 500;
+  }
+  .menu-icon-color {
+    color: #838383;
+  }
+  .card-body {
+    padding: calc(var(--spacing) * 4);
+  }
+  .choices {
+    margin-top: calc(var(--spacing) * 2);
+    --tw-shadow:
+      0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)),
+      0 1px 2px -1px var(--tw-shadow-color, #0000001a);
+    box-shadow:
+      var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
+      var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    border-radius: var(--radius-sm);
+  }
+  .choices__inner {
+    background: #fff !important;
+    min-height: 38px !important;
+    padding: 5px !important;
+  }
+}
+
+@layer hura {
+  .hura-btn-active {
+    --btn-bg: var(--color-hura);
+    --btn-fg: #ffffff;
+    --btn-border: var(--color-hura);
+    color: var(--color-white);
+  }
+  .hura-btn-active:hover {
+    --btn-bg: #002bb5;
+    --btn-border: #002bb5;
+  }
+  .hura-btn-outline {
+    background: #f5f7ff;
+    color: var(--color-hura);
+    border: 1px solid var(--color-hura);
+  }
+  .hura-btn-outline:hover {
+    background: var(--color-hura);
+    color: #fff;
+  }
+  .hura-checkbox:checked,
+  .hura-checkbox[aria-checked="true"] {
+    background: var(--color-hura);
+    color: #fff;
+  }
+  .hura-radio:checked,
+  .hura-radio[aria-checked="true"] {
+    border-color: var(--color-hura);
+  }
+  .hura-radio:checked::before,
+  .hura-radio[aria-checked="true"]::before {
+    background-color: var(--color-hura);
+  }
+  .hura-text-blue {
+    color: var(--color-hura);
+  }
+  .hura-bg-blue {
+    background: var(--color-hura);
+  }
+  .hura-shadow-blue {
+    box-shadow:
+      0 10px 15px -3px rgb(var(--color-hura) / 0.35),
+      0 4px 6px -4px rgb(var(--color-hura) / 0.25);
+  }
+}

assets/script/tailwind-daisyui.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@plugin "daisyui";

assets/typescript/main.ts

@@ -0,0 +1,32 @@
+"use strict";
+
+interface AdminFunctions {
+    addProductToCategory(productId: string): void;
+    markProductAsHot(productId: string): void;
+}
+
+const AdminFunctions: AdminFunctions = (() => {
+
+    function addProductToCategory(productId: string): void {
+        const statusElement = $('#status_' + productId);
+        statusElement.html('<span class="loading loading-bars loading-sm"></span><span class="ml-[3px]">Processing...</span>');
+        setTimeout(() => {
+            statusElement.html('');
+        }, 1000);
+    }
+
+    function markProductAsHot(productId: string): void {
+        const statusElement = $('#js-status-hottype-' + productId);
+        statusElement.html('<span class="loading loading-bars loading-sm"></span><span class="ml-[3px]">Processing...</span>');
+        setTimeout(() => {
+            statusElement.html('');
+        }, 1000);
+    }
+
+    return {
+        addProductToCategory,
+        markProductAsHot
+    };
+})();
+
+export default AdminFunctions;