heymlz/hossein-por-shop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of https://github.com/Byeto-Company/hossein_por_shop

Browse Source
This commit is contained in:
Mamalizz
2025-04-18 19:54:07 +03:30
parent 1f3b96fe58 8e0c64a7b0
commit dafdc9170b
14 changed files with 221 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/components/global/Footer.vue
+3
View File
@@ -4,6 +4,9 @@
src="/img/footer-bg.jpg"
alt=""
class="absolute z-10 object-cover opacity-45"
:style="{
mask: 'linear-gradient(to bottom, black 0%, rgba(0,0,0,0) 100%',
}"
/>
<div class="flex flex-col gap-4 items-center justify-center relative z-20">
frontend/components/global/LoadingOverlay.vue
+20 -18
View File
@@ -5,6 +5,7 @@ const { $gsap: gsap } = useNuxtApp();
const isSiteLoadingDisabled = useCookie("is-site-loading-disabled", {
default: () => false,
expires: new Date(Date.now() + 15 * 60 * 1000),
});
const shouldRenderLoadingOverlay = ref(true);
@@ -27,8 +28,8 @@ const progressStyle = computed(() => {
// methods
const onAssetLoaded = () => {
criticalLoad.value = false;
clearInterval(progressInterval.value!);
criticalLoad.value = false;
assetLoadingProgress.value = 100;
isAssetLoaded.value = true;
};
@@ -55,30 +56,31 @@ watch([assetLoadingProgress, criticalLoad], ([assetLoadingProgress, criticalLoad
// lifecycle
onMounted(() => {
isWindowScrollLocked.value = true;
if (!isSiteLoadingDisabled.value) {
isWindowScrollLocked.value = true;
const heymlzLoadingAnimation = document.querySelector("#heymlz-loading-animation") as HTMLVideoElement;
if (heymlzLoadingAnimation?.readyState >= HTMLMediaElement.HAVE_ENOUGH_DATA) {
onAssetLoaded();
}
progressInterval.value = setInterval(() => {
assetLoadingProgress.value += Math.random() * 10;
}, 250);
gsap.to("#loading-overlay", {
opacity: 1,
});
} else {
shouldRenderLoadingOverlay.value = false;
}
const heymlzLoadingAnimation = document.querySelector("#heymlz-loading-animation") as HTMLVideoElement;
if (heymlzLoadingAnimation?.readyState >= HTMLMediaElement.HAVE_ENOUGH_DATA) {
onAssetLoaded();
}
progressInterval.value = setInterval(() => {
assetLoadingProgress.value += Math.random() * 10;
}, 250);
gsap.to("#loading-overlay", {
opacity: 1,
});
});
</script>
<template>
<div
v-if="shouldRenderLoadingOverlay"
v-if="shouldRenderLoadingOverlay && !isSiteLoadingDisabled"
id="loading-overlay"
class="fixed inset-0 size-full z-9999 flex-center bg-black"
>
frontend/components/global/OtpInput.vue
+1 -1
View File
@@ -131,7 +131,7 @@ watch(() => status.value, (value) => {
:key="id"
:index="index"
:autofocus="autofocus ? index === 0 ? true : 'off' : 'off'"
class="disabled:text-slate-400 focus-within:border-black transition-all size-12 sm:size-16 bg-slate-50 typo-label-lg rounded-md sm:rounded-lg text-center border-[1.5px] border-slate-200 outline-none"
class="disabled:text-slate-400 persian-number focus-within:border-black transition-all size-10 sm:size-16 bg-slate-50 typo-label-lg rounded-sm sm:rounded-lg text-center border-[1.5px] border-slate-200 outline-none"
/>
</PinInputRoot>
</div>
frontend/components/home/Categories.vue
+2 -13
View File
@@ -22,19 +22,8 @@ const onSwiper = (swiper: SwiperClass) => {
ref="sectionTarget"
class="flex flex-col justify-center gap-4 bg-black h-[110svh] sm:h-[150svh] relative overflow-hidden"
>
<div class="w-full relative translate-y-[-90px] sm:translate-y-[-200px] z-10 container">
<div class="flex-col-center gap-6">
<span class="text-white typo-h-6 md:typo-h-5 lg:typo-h-4">
دسته بندی ها
</span>
<!-- <p
class="text-slate-300 text-center max-w-[750px] typo-p-sm md:typo-p-lg xl:typo-p-xl"
>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و
با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه
و مجله در ستون و سطرآنچنان که
</p> -->
</div>
<div class="w-full relative translate-y-[-55px] sm:translate-y-[-130px] flex-center z-10 container">
<span class="text-white typo-h-6 md:typo-h-5 lg:typo-h-4"> دسته بندی ها </span>
</div>
<div class="w-full my-20 relative">
frontend/components/home/Preview.vue
+18 -40
View File
@@ -19,7 +19,7 @@ const heymlzElementIsVisible = useElementVisibility(heymlzElement, {
rootMargin: "0px 0px -40% 0px",
});
const showHeymlzAnimation = ref(true);
const showHeymlzAnimation = ref(false);
const { x: dragAxisX } = useDraggable(draggableEl, {
initialValue: { x: 0, y: 0 },
@@ -32,10 +32,12 @@ watch(
heymlzElementIsVisible,
(newValue) => {
if (newValue) {
showHeymlzAnimation.value = true;
setTimeout(() => {
showHeymlzAnimation.value = false;
}, 3200);
showHeymlzAnimation.value = true;
setTimeout(() => {
showHeymlzAnimation.value = false;
}, 3200);
}, 400);
}
},
{
@@ -61,9 +63,7 @@ watch(
(newValue) => {
const clientRect = previewContainerEl.value?.getBoundingClientRect()!;
const percent = clientRect.width / 100;
const clipPercent =
(newValue + draggableEl.value!.clientWidth / 2 - clientRect.x - 8) /
percent;
const clipPercent = (newValue + draggableEl.value!.clientWidth / 2 - clientRect.x - 8) / percent;
if (clipPercent >= 5 && clipPercent <= 95) {
clipPathPercent.value = clipPercent;
}
@@ -75,12 +75,8 @@ watch(
<div class="container mb-40 lg:mb-80 mt-20">
<div>
<div class="flex flex-col items-center gap-3 mb-10 lg:mb-16">
<span class="typo-p-sm md:typo-p-md text-slate-500">
مقایسه محصولات
</span>
<span class="typo-h-6 md:typo-h-5 lg:typo-h-3 text-black">
تفاوت محصلات ما را ببینید
</span>
<span class="typo-p-sm md:typo-p-md text-slate-500"> مقایسه محصولات </span>
<span class="typo-h-6 md:typo-h-5 lg:typo-h-3 text-black"> تفاوت محصلات ما را ببینید </span>
</div>
<div
ref="previewContainerEl"
@@ -90,11 +86,7 @@ watch(
<NuxtImg
v-if="activeSlideVideo !== 'right'"
:src="homeData!.difreance_section.image1"
:class="
showHeymlzAnimation
? 'brightness-25 blur-sm'
: 'brightness-[95%] blur-[0px]'
"
:class="showHeymlzAnimation ? 'brightness-25 blur-sm' : 'brightness-[95%] blur-[0px]'"
class="select-none absolute size-full object-cover transition-[filter] duration-250"
:alt="homeData!.difreance_section.title1"
/>
@@ -117,11 +109,7 @@ watch(
<NuxtImg
v-if="activeSlideVideo !== 'left'"
:src="homeData!.difreance_section.image2"
:class="
showHeymlzAnimation
? 'brightness-25 blur-sm'
: 'brightness-[95%] blur-[0px]'
"
:class="showHeymlzAnimation ? 'brightness-25 blur-sm' : 'brightness-[95%] blur-[0px]'"
class="overlay-image select-none absolute object-cover size-full transition-[filter] duration-250"
:alt="homeData!.difreance_section.title2"
/>
@@ -136,7 +124,10 @@ watch(
/>
</Transition>
<Transition name="fade" :duration="250">
<Transition
name="fade"
:duration="250"
>
<NuxtImg
v-if="showHeymlzAnimation"
src="/img/heymlz/heymlz-pullingg.gif"
@@ -160,21 +151,13 @@ watch(
>
<div
ref="draggableEl"
:class="
showHeymlzAnimation
? 'bg-neutral-200'
: 'bg-black'
"
:class="showHeymlzAnimation ? 'bg-neutral-200' : 'bg-black'"
class="touch-none cursor-grab hover:scale-115 transition-transform rounded-full absolute size-9 sm:size-11 flex items-center justify-center"
>
<Icon
name="ci:arrows"
class="transition-all size-5 sm:size-6"
:class="
showHeymlzAnimation
? '**:stroke-black'
: '**:stroke-white'
"
:class="showHeymlzAnimation ? '**:stroke-black' : '**:stroke-white'"
/>
</div>
</div>
@@ -220,11 +203,6 @@ watch(
<style>
.overlay-image {
clip-path: polygon(
v-bind('clipPathPercent + "%"') 0,
100% 0,
100% 100%,
v-bind('clipPathPercent + "%"') 100%
);
clip-path: polygon(v-bind('clipPathPercent + "%"') 0, 100% 0, 100% 100%, v-bind('clipPathPercent + "%"') 100%);
}
</style>