haditha_ui/pages/hadith/search.vue

108 lines
2.5 KiB
Vue
Raw Normal View History

2025-02-18 12:56:13 +00:00
<script setup>
definePageMeta({
layout: false,
name: "hadithSearch",
});
useHead({
name: "hadithSearch",
title: `${import.meta.env.VITE_HADITH_PAGE_TITLE} | جستجو`,
meta: [
{ name: "description", content: "کاوش با هوش مصنوعی در احادیث اسلامی" },
],
bodyAttrs: {
class: import.meta.env.VITE_HADITH_SYSTEM,
},
});
const img = useImage();
const HadithLayout = defineAsyncComponent(() =>
import("@hadith/layouts/HadithLayout.vue")
);
const NavigationMenu = defineAsyncComponent(() =>
import("@hadith/components/hadith/NavigationMenu.vue")
);
const AutoComplation = defineAsyncComponent(() =>
import("@hadith/components/hadith/AutoComplation.vue")
);
const backgroundImageStyle = computed(() => {
// Use $img to generate an optimized image URL
const optimizedImageUrl = img("/img/background.png", {
quality: 80,
});
return {
backgroundImage: `url(${optimizedImageUrl}), linear-gradient(199.05deg, #ffffff 9.99%, #e4fff7 42.07%, #ffffff 97.12%)`,
};
});
const renderContent = () => {};
</script>
2025-02-11 10:17:22 +00:00
2025-02-18 12:56:13 +00:00
<template>
<HadithLayout>
<div class="flex flex-col justify-center">
<div class="bg-container h-full" :style="backgroundImageStyle">
<navigation-menu></navigation-menu>
<div class="text-logo">
<div class="search-box-container flex justify-center">
<auto-complation @responseReady="renderContent"></auto-complation>
2025-02-11 10:17:22 +00:00
</div>
2025-02-18 12:56:13 +00:00
<div class="flex justify-center flex-col items-center">
<NuxtImg fit="auto" quality="80" placeholder src="/img/logo.png" />
<div class="title">
کاوش با
<span class="badge-style"> هوش مصنوعی </span>
در احادیث اسلامی
2025-02-11 10:17:22 +00:00
</div>
</div>
</div>
</div>
2025-02-18 12:56:13 +00:00
2025-02-11 10:17:22 +00:00
</div>
2025-02-18 12:56:13 +00:00
</HadithLayout>
2025-02-11 10:17:22 +00:00
</template>
2025-02-18 12:56:13 +00:00
<style scoped>
.bg-container {
height: 100dvh;
background-size: 100% auto;
background-repeat: no-repeat;
2025-02-11 10:17:22 +00:00
}
2025-02-18 12:56:13 +00:00
.text-logo {
padding-top: 4.5em;
position: relative;
.title {
margin-top: 3.5em;
font-family: IRANSansX;
font-size: 14px;
line-height: 21px;
letter-spacing: 0%;
text-align: center;
color: #1b2132;
2025-02-11 10:17:22 +00:00
}
2025-02-18 12:56:13 +00:00
.badge-style {
width: 100;
height: 23;
border-radius: 40px;
padding-right: 8px;
padding-bottom: 2px;
padding-left: 8px;
gap: 10px;
color: #fff;
background: linear-gradient(270.29deg, #d284ff 8.12%, #4d00ff 109.58%);
2025-02-11 10:17:22 +00:00
}
}
2025-02-18 12:56:13 +00:00
.search-box-container {
padding-top: 1em;
padding-bottom: 4em; /*64px */
2025-02-11 10:17:22 +00:00
}
</style>