Work on responsive.

Work on apis

assets/haditha/scss/haditha.css

@@ -19,6 +19,12 @@
 
 @theme {
   --font-sans: "IRANSansX", "Public Sans", sans-serif;
+  --breakpoint-sm: 360px;
+  --breakpoint-md: 720px;
+  --breakpoint-lg: 992px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
+  --breakpoint-3xl: 1900px;
 }
 
 @layer {
@@ -44,12 +50,14 @@ html {
   direction: rtl;
   text-align: right;
   font-family: IRANSansX;
+  scroll-behavior: smooth;
 
   body {
     height: 100%;
     direction: rtl;
     text-align: right;
     font-family: IRANSansX;
+    scroll-behavior: smooth;
   }
 }
 .haditha-system {
@@ -65,3 +73,5 @@ html {
   scrollbar-width: thin;
   scrollbar-color: #ccc #eee;
 }
+
+@import "./responsive/responsive.css";

components/haditha/AutoComplation.vue

@@ -25,6 +25,9 @@ const props = defineProps({
   showPrevSearch: {
     default: false,
   },
+  autoRedirection: {
+    default: true,
+  },
 });
 // #endregion props
 
@@ -172,7 +175,7 @@ const onKeyDown = () => {
 const onKeyUp = () => {
   clearTimeout(typingTimer.value);
   typingTimer.value = setTimeout(() => {
-    sendQuery();
+    if (props.autoRedirection) sendQuery();
   }, doneTypingInterval.value);
 };
 
@@ -225,7 +228,7 @@ const sendQuery = async (payload = {}) => {
       emit("response-ready", {
         res: res,
         searchQuery: searchTerm.value,
-        disableAutoRedirect:true
+        disableAutoRedirect: true,
       });
 
       loading.value = false;
@@ -581,7 +584,7 @@ onMounted(() => {
       </div>
 
       <!-- #region نوع -->
-      <div>
+      <div class="ms-2">
         <USelect
           :items="state.type.items"
           :content="{
@@ -916,4 +919,18 @@ onMounted(() => {
     }
   }
 }
+
+@media screen and (max-width: 719.99px) {
+  .haditha-search-root-wrapper {
+    .search-filter {
+      /* width: 361px; */
+      overflow-x: auto;
+      white-space: nowrap;
+      width: 92dvw;
+    }
+  }
+}
+
+@media scrren and (min-width: 720px) and (max-width: 991.99px) {
+}
 </style>

components/haditha/NavigationMenu.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useAuthStore } from "@stores/authStore";
+
 const items = ref([
   {
     label: "حانه",
@@ -39,8 +41,20 @@ const items = ref([
   {
     label: "دیگر",
     icon: "i-haditha-menu",
-    class: "flex flex-col lg:hidden justify-center items-center hide-chevron",
+
+    class:
+      "flex flex-col lg:hidden justify-center items-center hide-chevron other /haditha/other",
     children: [
+      {
+        label: "ورود / ثبت نام",
+        icon: "i-haditha-user",
+        to: "/haditha/login",
+      },
+      {
+        label: "کتابخانه",
+        icon: "i-haditha-library",
+        to: "/haditha/library",
+      },
       {
         label: "در باره ما",
         icon: "i-haditha-about-us",
@@ -110,13 +124,36 @@ const leftItem = computed(() => [
 
 const isMobile = ref(false);
 const rerenderNavigation = ref(1);
+const { isAuthenticatedGetter } = useAuthStore();
+
+const setMenu = () => {
+  if (isAuthenticatedGetter) {
+    let otherItem = items.value.find((item) => {
+      return item.class.includes("/haditha/other");
+    });
+
+    let otherItemChildren = otherItem.children.filter(
+      (i) => i.to != "/haditha/login"
+    );
+    otherItem.children = otherItemChildren;
+  } else {
+    let otherItem = items.value.find((item) => {
+      return item.class.includes("/haditha/other");
+    });
+
+    let otherItemChildren = otherItem.children.filter(
+      (i) => i.icon != "i-haditha-logout"
+    );
+    otherItem.children = otherItemChildren;
+  }
+};
+
+setMenu();
 
 onMounted(() => {
-  if (window?.outerWidth < 576) {
+  if (window?.outerWidth < 991) {
     isMobile.value = true;
-    console.info("is less than 576");
+    items.value = items.value.filter((item) => item.to != "/haditha/library");
-
-    items.value = items.value.filter((item) => item.to != "/haditha/favorites");
     rerenderNavigation.value++;
   }
 });
@@ -124,15 +161,15 @@ onMounted(() => {
 
 <template>
   <div class="fixed bottom-2 lg:bottom-auto lg:top-2 right-0 left-0">
-    <UContainer class="flex justify-center my-navbar mx-3 lg:mx-auto">
+    <UContainer class="flex  my-navbar mx-3 lg:mx-auto">
       <!-- :disableHoverTrigge="isMobile" -->
       <UNavigationMenu
         :key="rerenderNavigation"
         :items="items"
-        class="data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-48"
+        content-orientation="vertical"
         :ui="{
-          root: 'root',
+          root: 'root grow-1',
-          list: 'list',
+          list: 'list md:justify-between lg:justify-start',
           label: 'label',
           item: 'item',
           link: 'link',
@@ -208,23 +245,15 @@ onMounted(() => {
     border: 0.3px solid #e0e0e0;
     box-shadow: 0px 4px 15px 0px #0000001a;
 
-    @media screen and (max-width: 991.99px) {
-      height: 5em; // 76px;
-    }
-
     nav > div {
       width: 100%;
       display: flex;
       flex-direction: column;
 
-      ul {
+      .isolate.min-w-0.flex.items-center.list {
         li {
           padding: 0;
 
-          @media screen and (max-width: 991.99px) {
-            flex: 1;
-          }
-
           .group {
             &::before {
               border-radius: 12px;
@@ -266,10 +295,6 @@ onMounted(() => {
                 color: #fff;
               }
             }
-
-            @media screen and (max-width: 991.99px) {
-              height: 5em;
-            }
           }
 
           .hide-label {
@@ -312,4 +337,70 @@ onMounted(() => {
     }
   }
 }
+
+@media screen and (max-width: 719.99px) {
+  .fixed {
+    .my-navbar {
+      height: 4.8em; // 76px;
+
+      .absolute.top-full.left-0.flex.w-full {
+        width: 200px;
+        bottom: 100%;
+        top: auto;
+
+        .absolute.top-0.left-0.w-60 {
+          width: 200px;
+        }
+      }
+
+      nav > div {
+        ul.isolate.min-w-0.flex.items-center.list {
+          li {
+            flex: 1;
+
+            .group {
+              height: 6em;
+
+              font-size: 10px;
+              line-height: 150%;
+            }
+            .hide-label {
+              .truncate {
+                display: inline;
+              }
+            }
+          }
+        }
+
+        ul.grid.p-2.gap-1 {
+          li {
+            .group {
+              width: 186;
+              height: 45;
+              gap: 10px;
+              border-radius: 8px;
+              padding: 12px;
+
+              font-family: IRANSansX;
+              font-weight: 400;
+              font-size: 14px;
+              line-height: 100%;
+              letter-spacing: 0%;
+              text-align: center;
+              vertical-align: middle;
+
+              &:hover {
+                background: linear-gradient(
+                  320.71deg,
+                  #b9fde0 6.56%,
+                  #e4f9f0 69.69%
+                );
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
 </style>

components/haditha/hero-page/SectionFive.vue

@@ -211,4 +211,15 @@ const state = reactive({
     }
   }
 }
+
+@media screen and (max-width: 719.99px) {
+  .section-five {
+    .prev,
+    .next {
+      width: 40;
+      height: 64;
+      padding: 1.5em 0.7em;
+    }
+  }
+}
 </style>

components/haditha/hero-page/SectionFour.vue

@@ -54,7 +54,7 @@ const state = reactive({
 
       <!-- grid-cols-1 md:grid-cols-2 lg:grid-cols-3 -->
       <div
-        class="content flex justify-center flex-wrap items-start p-4 space-y-3"
+        class="content flex justify-center flex-wrap items-start p-0 p-xl-4 space-y-3"
       >
         <UCard
           :ui="{
@@ -119,4 +119,23 @@ const state = reactive({
     }
   }
 }
+
+@media screen and (max-width: 719.99px) {
+  .section-four {
+    .header {
+      .title {
+        line-height: 100%;
+      }
+    }
+    .card-item {
+      .body {
+        .title {
+          font-weight: 500;
+          font-size: 1.2rem; /*18px;*/
+          letter-spacing: 0%;
+        }
+      }
+    }
+  }
+}
 </style>

components/haditha/hero-page/SectionOne.vue

@@ -3,25 +3,24 @@ const img = useImage();
 const router = useRouter();
 import { useStorage } from "@vueuse/core";
 
-const backgroundImageStyle = computed(() => {
+// const backgroundImageStyle = computed(() => {
-  // // Use $img to generate an optimized image URL
+//   // // Use $img to generate an optimized image URL
-  // const optimizedImageUrl = img("/img/haditha/background.webp", {
+//   // const optimizedImageUrl = img("/img/haditha/background.webp", {
-  //   quality: 80,
+//   //   quality: 80,
-  //   fit: "auto",
+//   //   fit: "auto",
-  // });
+//   // });
+//   // return {
+//   //   backgroundImage: `url(${optimizedImageUrl}), linear-gradient(199.05deg, #ffffff 9.99%, #e4fff7 42.07%, #ffffff 97.12%)`,
+//   // };
 //   return {
-  //   backgroundImage: `url(${optimizedImageUrl}), linear-gradient(199.05deg, #ffffff 9.99%, #e4fff7 42.07%, #ffffff 97.12%)`,
+//     backgroundImage: `url(/img/haditha/background.webp), linear-gradient(199.05deg, #ffffff 9.99%, #e4fff7 42.07%, #ffffff 97.12%)`,
 //   };
-  return {
+// });
-    backgroundImage: `url(/img/haditha/background.webp), linear-gradient(199.05deg, #ffffff 9.99%, #e4fff7 42.07%, #ffffff 97.12%)`,
-  };
-});
 
 const searchPhrase = useStorage("searchPhrase", "");
-searchPhrase.value = '';
+searchPhrase.value = "";
 
 const handleResponseReady = (payload) => {
-  
   router.push({
     name: "hadithaSearch",
     query: {
@@ -39,16 +38,11 @@ const AutoComplation = defineAsyncComponent(() =>
 </script>
 <template>
   <section class="section-one flex flex-col justify-center">
-    <div class="background-image h-full" :style="backgroundImageStyle">
+    <div class="background-image h-full">
       <navigation-menu></navigation-menu>
 
       <div class="logo-container flex justify-center flex-col items-center">
-        <img
+        <img fit="auto" quality="80" placeholder src="/img/haditha/logo.webp" />
-          fit="auto"
-          quality="80"
-          placeholder
-          src="/img/haditha/logo.webp"
-        />
         <div class="title">
           کاوش با
           <span class="badge-style me-1"> هوش مصنوعی </span>
@@ -58,6 +52,7 @@ const AutoComplation = defineAsyncComponent(() =>
     </div>
     <div class="search-box-container flex justify-center">
       <auto-complation
+        :autoRedirection="false"
         @response-ready="handleResponseReady($event)"
       ></auto-complation>
     </div>
@@ -67,10 +62,12 @@ const AutoComplation = defineAsyncComponent(() =>
 <style scoped>
 .section-one {
   .background-image {
-    height: 521px;
+    height: 32.56em; /*521px;*/
     background-size: 100% auto;
     background-repeat: no-repeat;
     background-attachment: fixed;
+    background-image: url("/img/haditha/background.webp"),
+      linear-gradient(199.05deg, #ffffff 9.99%, #e4fff7 42.07%, #ffffff 97.12%);
     /* background-image: url("/img/haditha/background.svg"),
         linear-gradient(199.05deg, #ffffff 9.99%, #e4fff7 42.07%, #ffffff 97.12%); */
   }
@@ -107,4 +104,46 @@ const AutoComplation = defineAsyncComponent(() =>
     padding-bottom: 4em; /*64px */
   }
 }
+
+@media screen and (max-width: 719.99px) {
+  .section-one {
+    .background-image {
+      height: 26.875em; /*430px;*/
+      background-size: contain;
+      background-image: url("/img/haditha/mobile/backgorund.png");
+    }
+
+    .logo-container {
+      padding-top: 7.5em;
+
+      .title {
+        font-weight: 300;
+        font-size: 0.75rem;
+        line-height: 150%;
+        letter-spacing: 0%;
+        text-align: center;
+        vertical-align: middle;
+      }
+      .badge-style {
+        width: 100;
+        height: 23;
+        border-radius: 2.5em; /*40px;*/
+        padding-right: 0.65em; /*8px;*/
+        padding-bottom: 2px; /*40px;*/
+        padding-left: 0.65em; /*8px;*/
+        gap: 10px;
+        color: #fff;
+
+        font-weight: 500;
+        font-size: 0.75rem;
+        line-height: 100%;
+        letter-spacing: 0%;
+        text-align: center;
+        vertical-align: middle;
+
+        background: linear-gradient(270.29deg, #d284ff 8.12%, #4d00ff 109.58%);
+      }
+    }
+  }
+}
 </style>

components/haditha/hero-page/SectionThree.vue

@@ -1,23 +1,23 @@
 <script setup>
 const img = useImage();
 
-const backgroundImageStyle = computed(() => {
+// const backgroundImageStyle = computed(() => {
-  // Use $img to generate an optimized image URL
+//   // Use $img to generate an optimized image URL
-  // const optimizedImageUrl = img("/img/haditha/section-three-bgi.webp", {
+//   // const optimizedImageUrl = img("/img/haditha/section-three-bgi.webp", {
-  //   quality: 30,
+//   //   quality: 30,
-  //   fit: "auto",
+//   //   fit: "auto",
-  // });
+//   // });
+//   // return {
+//   //   backgroundImage: `url(${optimizedImageUrl})`,
+//   // };
 //   return {
-  //   backgroundImage: `url(${optimizedImageUrl})`,
+//     backgroundImage: `url(/img/haditha/section-three-bgi.webp)`,
 //   };
-  return {
+// });
-    backgroundImage: `url(/img/haditha/section-three-bgi.webp)`,
-  };
-});
 </script>
 <template>
-  <section class="section-three flex" :style="backgroundImageStyle">
+  <section class="section-three flex">
-    <div class="section-container mx-auto">
+    <div class="section-container md:flex md:flex-col md:items-center xl:block mx-auto">
       <div class="header flex items-center mb-2">
         <img
           fit="auto"
@@ -42,15 +42,17 @@ const backgroundImageStyle = computed(() => {
 </template>
 <style scoped>
 .section-three {
-  padding-top: 11em; /*120px;*/
+  padding-top: 10.5em; /*120px;*/
-  padding-bottom: 11em; /*65px;*/
+  padding-bottom: 10.5em; /*65px;*/
   background-repeat: no-repeat;
-
+  background-image: url("/img/haditha/section-three-bgi.webp");
+  background-blend-mode: exclusion;
   /*height: 37.5em;600px;*/
   gap: 8.75em; /*140px;*/
   padding-right: 2em; /*32px;*/
   padding-left: 2em; /*32px;*/
   background-color: #1b2132;
+  background-size: cover;
 
   .section-container {
     width: 56.7em; /*907px;*/
@@ -108,4 +110,98 @@ const backgroundImageStyle = computed(() => {
     }
   }
 }
+
+@media screen and (max-width: 1199.99px) {
+  .section-three {
+    background-image: url("/img/haditha/mobile/section-three-bgi_md.png");
+    height: 46.87em;
+    background-position: center 65%;
+    padding-top: 7.5em;
+    padding-bottom: 7.5em;
+    background-size: cover;
+
+    .section-container {
+      width: 100%;
+
+      .header {
+        width: auto;
+        background: transparent;
+
+        .haditha-text {
+          width: 4em; /*"61px";*/
+          height: 1.5em; /*"22px";*/
+        }
+        .title {
+          font-size: 1.5rem; /*"20px";*/
+          line-height: 100%;
+        }
+      }
+
+      .content {
+        background: transparent;
+        color: #626b84;
+        max-width: 40em; /*480px;*/
+
+        font-size: 1rem;
+        letter-spacing: 0%;
+        background: transparent;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 991.99px) {
+  .section-three {
+    /* background-image: url("/img/haditha/mobile/section-three-bgi_md.png"); */
+    /* height: 46.87em; */
+    /* background-position: center 65%; */
+    /* padding-top: 7.5em; */
+    /* padding-bottom: 7.5em; */
+
+    .section-container {
+      /* width: 100%; */
+
+      .header {
+        /* width: auto; */
+        /* background: transparent; */
+
+        .haditha-text {
+          width: 3.8em; /*"61px";*/
+          height: 1.3em; /*"22px";*/
+        }
+        .title {
+          font-size: 1.2rem; /*"20px";*/
+          /* line-height: 100%; */
+        }
+      }
+
+      .content {
+        /* background: transparent; */
+        /* color: #626b84; */
+        max-width: 36em; /*480px;*/
+
+        font-size: 0.84rem;
+        /* letter-spacing: 0%; */
+        /* background: transparent; */
+      }
+    }
+  }
+}
+@media screen and (max-width: 719.99px) {
+  .section-three {
+    .section-container {
+      width: 100%;
+
+      .header {
+        .haditha-text {
+          width: 3em; /*"49px";*/
+          height: 1.1em; /*"18px";*/
+        }
+        .title {
+          font-size: 1.3rem; /*"20px";*/
+        }
+      }
+    }
+  }
+}
 </style>

components/haditha/hero-page/SectionTwo.vue

@@ -1,9 +1,10 @@
 <template>
   <section class="section-two">
-    <div class="flex flex-col items-center py-6">
+    <div class="flex flex-col items-center py-6 features">
-      <div>قابلیت ها</div>
+      <a href="#features-section">قابلیت ها</a>
       <div>
         <img
+          class="arrow-down-image"
           width="32"
           height="32"
           fit="auto"
@@ -14,7 +15,7 @@
       </div>
     </div>
 
-    <div class="flex flex-col lg:flex-row">
+    <div class="flex flex-col lg:flex-row" id="features-section">
       <div class="my-card card-one basis-full flex justify-center items-center">
         <div class="inner-container">
           <div class="px-4">
@@ -127,4 +128,52 @@
     }
   }
 }
+
+@media screen and (max-width: 719.99px) {
+  .section-two {
+    .features {
+      font-weight: 200;
+      font-size: 1.25rem; /*20px;*/
+      line-height: 1.8rem; /*30px;*/
+      letter-spacing: 0%;
+      text-align: center;
+    }
+
+    .arrow-down-image {
+      width: 1em; /*8px;*/
+      height: 1em; /*8px;*/
+    }
+
+    .my-card {
+      background-repeat: no-repeat;
+      background-size: auto;
+      height: 41.25em; /* 660px*/
+      padding: 4.7em 0;
+
+      .inner-container {
+        max-width: 21.25em;
+        margin: auto;
+      }
+      .title {
+        font-weight: 500;
+        font-size: 1.1rem; /* 18px;*/
+        line-height: 100%;
+        letter-spacing: 0%;
+      }
+
+      .description {
+        font-weight: 300;
+        color: #626b84;
+        font-size: 1rem;
+        line-height: 120%;
+        letter-spacing: 0%;
+      }
+
+      img {
+        width: 15.8em; /* 316px;*/
+        height: 15.3em; /* 306px;*/
+      }
+    }
+  }
+}
 </style>

json/haditha/headLinks.json

@@ -0,0 +1,77 @@
+[
+  {
+    "rel": "icon",
+    "type": "image/x-icon",
+    "href": "/img/haditha/fav-icons/favicon.ico"
+  },
+  { "rel": "manifest", "href": "/img/haditha/fav-icons/manifest.json" },
+  {
+    "rel": "icon",
+    "type": "image/png",
+    "sizes": "16x16",
+    "href": "/img/haditha/fav-icons/favicon-16x16.png"
+  },
+  {
+    "rel": "icon",
+    "type": "image/png",
+    "sizes": "32x32",
+    "href": "/img/haditha/fav-icons/favicon-32x32.png"
+  },
+  {
+    "rel": "icon",
+    "type": "image/png",
+    "sizes": "96x96",
+    "href": "/img/haditha/fav-icons/favicon-96x96.png"
+  },
+  {
+    "rel": "icon",
+    "sizes": "192x192",
+    "type": "image/png",
+    "href": "/img/haditha/fav-icons/android-icon-192x192.png"
+  },
+  {
+    "rel": "apple-touch-icon",
+    "sizes": "57x57",
+    "href": "/img/haditha/fav-icons/apple-icon-57x57.png"
+  },
+  {
+    "rel": "apple-touch-icon",
+    "sizes": "60x60",
+    "href": "/img/haditha/fav-icons/android-icon-60x60.png"
+  },
+  {
+    "rel": "apple-touch-icon",
+    "sizes": "72x72",
+    "href": "/img/haditha/fav-icons/android-icon-72x72.png"
+  },
+  {
+    "rel": "apple-touch-icon",
+    "sizes": "76x76",
+    "href": "/img/haditha/fav-icons/android-icon-76x76.png"
+  },
+  {
+    "rel": "apple-touch-icon",
+    "sizes": "114x114",
+    "href": "/img/haditha/fav-icons/android-icon-114x114.png"
+  },
+  {
+    "rel": "apple-touch-icon",
+    "sizes": "120x120",
+    "href": "/img/haditha/fav-icons/android-icon-120x120.png"
+  },
+  {
+    "rel": "apple-touch-icon",
+    "sizes": "144x144",
+    "href": "/img/haditha/fav-icons/android-icon-144x144.png"
+  },
+  {
+    "rel": "apple-touch-icon",
+    "sizes": "152x152",
+    "href": "/img/haditha/fav-icons/android-icon-152x152.png"
+  },
+  {
+    "rel": "apple-touch-icon",
+    "sizes": "180x180",
+    "href": "/img/haditha/fav-icons/android-icon-180x180.png"
+  }
+]

json/haditha/headMetas.json

@@ -0,0 +1,8 @@
+[
+  { "name": "msapplication-TileColor", "content": "#ffffff" },
+  {
+    "name": "msapplication-TileImage",
+    "content": "/img/haditha/fav-icons/ms-icon-144x144.png"
+  },
+  { "name": "theme-color", "content": "#ffffff" }
+]

pages/haditha/chat-bot.vue

@@ -226,6 +226,9 @@ const NavigationMenu = defineAsyncComponent(() =>
                   class="p-0 copy-icon align-self-end"
                   icon="i-lucide-clipboard-copy"
                   variant=""
+                  @click="
+                    copyTextToClipboard('متن تستی جهت تست عملکرد دکمه کپی')
+                  "
                 >
                 </UButton>
               </div>
@@ -260,6 +263,9 @@ const NavigationMenu = defineAsyncComponent(() =>
                   class="p-0 copy-icon align-self-end"
                   icon="i-lucide-clipboard-copy"
                   variant=""
+                  @click="
+                    copyTextToClipboard('متن تستی جهت تست عملکرد دکمه کپی')
+                  "
                 >
                 </UButton>
               </div>
@@ -397,46 +403,7 @@ const NavigationMenu = defineAsyncComponent(() =>
         }
       }
 
-      .editor {
-        width: 672;
-        height: 64;
       
-        border-radius: 12px;
-        border-width: 0.5px;
-        padding-top: 12px;
-        padding-right: 24px;
-        padding-bottom: 12px;
-        padding-left: 12px;
-
-        background: linear-gradient(0deg, #ffffff 32.03%, #e5e0ff 135.16%);
-        border: 0.5px solid;
-
-        border-image-source: linear-gradient(
-          268.94deg,
-          #d284ff -0.65%,
-          #4d00ff 104.59%
-        );
-        box-shadow: 0px 1px 4px 0px #0000000d;
-
-        font-family: IRANSansX;
-        font-weight: 300;
-        font-size: 14px;
-        line-height: 21px;
-        letter-spacing: 0%;
-        text-align: right;
-        color: #8a92a8;
-        .send {
-          width: 3em; /*40px;*/
-          height: 2.8em; /*40px;*/
-          gap: 1px;
-          border-radius: 24px;
-          background: #1b2132;
-          color: #fff;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
-      }
       .filters {
         .filter-dropdown {
           width: 122.5999984741211;
@@ -489,13 +456,60 @@ const NavigationMenu = defineAsyncComponent(() =>
   .page-container {
     .page-inner-container {
       .editor {
+        width: 672;
+        height: 64;
+
+        border-radius: 12px;
+        border-width: 0.5px;
+        padding-top: 12px;
+        padding-right: 24px;
+        padding-bottom: 12px;
+        padding-left: 12px;
+
+        background: linear-gradient(0deg, #ffffff 32.03%, #e5e0ff 135.16%);
+        border: 0.5px solid;
+
+        border-image-source: linear-gradient(
+          268.94deg,
+          #d284ff -0.65%,
+          #4d00ff 104.59%
+        );
+        box-shadow: 0px 1px 4px 0px #0000000d;
+
+        font-family: IRANSansX;
+        font-weight: 300;
+        font-size: 14px;
+        line-height: 21px;
+        letter-spacing: 0%;
+        text-align: right;
+        color: #8a92a8;
+
         textarea {
           resize: none;
           background: transparent;
           color: #8a92a8;
         }
+        
+        .send {
+          width: 3em; /*40px;*/
+          height: 2.8em; /*40px;*/
+          gap: 1px;
+          border-radius: 24px;
+          background: #1b2132;
+          color: #fff;
+          display: flex;
+          justify-content: center;
+          align-items: center;
         }
       }
+      /* .editor {
+        textarea {
+          resize: none;
+          background: transparent;
+          color: #8a92a8;
+        }
+      } */
+    }
   }
 }
 .filters-content {

pages/haditha/search/[id]/[slug]/index.vue

@@ -169,7 +169,7 @@ const goToTheSearch = (type: string) => {
 };
 const goToTheChatbot = () => {
   router.push({
-    name: "hadithaChatbot",
+    name: "hadithaChatBot",
   });
 };
 
@@ -232,9 +232,9 @@ const handlePagination = (prevNextIndicator: string) => {
     .finally(() => (loading.value = false));
 };
 
-const localCopyTextToClipboard = (text: string) => {
+// const localCopyTextToClipboard = (text: string) => {
-  copyTextToClipboard(text);
+//   copyTextToClipboard(text);
-};
+// };
 // #endregion methods
 
 // #region hooks
@@ -311,8 +311,8 @@ const localCopyTextToClipboard = (text: string) => {
 
                     <UButton
                       @click="
-                        localCopyTextToClipboard(
+                        copyTextToClipboard(
-                          state.selectedItem?._source?.meta?.hadith_masoum
+                          state.selectedItem?._source?.meta?.hadith_masoum ?? ''
                         )
                       "
                       variant="ghost"
@@ -332,7 +332,7 @@ const localCopyTextToClipboard = (text: string) => {
                     <span class="section-title"> ترجمه </span>
                     <UButton
                       @click="
-                        localCopyTextToClipboard(
+                        copyTextToClipboard(
                           state.selectedItem?._source?.content
                         )
                       "
@@ -361,7 +361,7 @@ const localCopyTextToClipboard = (text: string) => {
                     <span class="section-title"> شرح </span>
                     <UButton
                       @click="
-                        localCopyTextToClipboard(
+                        copyTextToClipboard(
                           state.selectedItem?._source?.content
                         )
                       "

pages/haditha/search/index.vue

@@ -3,100 +3,20 @@ definePageMeta({
   layout: false,
   name: "hadithaSearch",
 });
+import headLinks from "@haditha/json/haditha/headLinks";
+import headMetas from "@haditha/json/haditha/headMetas";
+
 useHead({
   name: "hadithaSearch",
   title: `${import.meta.env.VITE_HADITH_PAGE_TITLE} | جستجو`,
   meta: [
     { name: "description", content: "کاوش با هوش مصنوعی در احادیث اسلامی" },
-    { name: "msapplication-TileColor", content: "#ffffff" },
+    ...headMetas,
-    {
-      name: "msapplication-TileImage",
-      content: "/img/haditha/fav-icons/ms-icon-144x144.png",
-    },
-    { name: "theme-color", content: "#ffffff" },
   ],
   bodyAttrs: {
     class: import.meta.env.VITE_HADITH_SYSTEM,
   },
-  link: [
+  link: headLinks,
-    {
-      rel: "icon",
-      type: "image/x-icon",
-      href: "/img/haditha/fav-icons/favicon.ico",
-    },
-    { rel: "manifest", href: "/img/haditha/fav-icons/manifest.json" },
-    // rel: icon
-    {
-      rel: "icon",
-      type: "image/png",
-      sizes: "16x16",
-      href: "/img/haditha/fav-icons/favicon-16x16.png",
-    },
-    {
-      rel: "icon",
-      type: "image/png",
-      sizes: "32x32",
-      href: "/img/haditha/fav-icons/favicon-32x32.png",
-    },
-    {
-      rel: "icon",
-      type: "image/png",
-      sizes: "96x96",
-      href: "/img/haditha/fav-icons/favicon-96x96.png",
-    },
-    {
-      rel: "icon",
-      sizes: "192x192",
-      type: "image/png",
-      href: "/img/haditha/fav-icons/android-icon-192x192.png",
-    },
-    // rel: apple
-    {
-      rel: "apple-touch-icon",
-      sizes: "57x57",
-      href: "/img/haditha/fav-icons/apple-icon-57x57.png",
-    },
-    {
-      rel: "apple-touch-icon",
-      sizes: "60x60",
-      href: "/img/haditha/fav-icons/android-icon-60x60.png",
-    },
-    {
-      rel: "apple-touch-icon",
-      sizes: "72x72",
-      href: "/img/haditha/fav-icons/android-icon-72x72.png",
-    },
-    {
-      rel: "apple-touch-icon",
-      sizes: "76x76",
-      href: "/img/haditha/fav-icons/android-icon-76x76.png",
-    },
-    {
-      rel: "apple-touch-icon",
-      sizes: "114x114",
-      href: "/img/haditha/fav-icons/android-icon-114x114.png",
-    },
-    {
-      rel: "apple-touch-icon",
-      sizes: "120x120",
-      href: "/img/haditha/fav-icons/android-icon-120x120.png",
-    },
-    {
-      rel: "apple-touch-icon",
-      sizes: "144x144",
-      href: "/img/haditha/fav-icons/android-icon-144x144.png",
-    },
-    {
-      rel: "apple-touch-icon",
-      sizes: "152x152",
-      href: "/img/haditha/fav-icons/android-icon-152x152.png",
-    },
-    {
-      rel: "apple-touch-icon",
-      sizes: "180x180",
-      href: "/img/haditha/fav-icons/android-icon-180x180.png",
-    },
-  ],
 });
 
 const route = useRoute();
@@ -157,7 +77,7 @@ const SearchList = defineAsyncComponent(() =>
       <div class="background-image h-full" :style="backgroundImageStyle">
         <navigation-menu></navigation-menu>
 
-        <div class="logo-container">
+        <div class="logo-container pt-0 xl:pt-18">
           <div
             class="search-box-container flex justify-center"
             :class="{ 'pb-0': route.name == 'hadithaSearch' }"
@@ -223,7 +143,7 @@ const SearchList = defineAsyncComponent(() =>
 }
 
 .logo-container {
-  padding-top: 4.5em;
+  /* padding-top: 4.5em; */
   position: relative;
 
   .title {