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

merge

Browse Source
This commit is contained in:
Mamalizz
2025-03-06 18:07:13 +03:30
parent a6e7ef37cd 0e7879f9ec
commit 426937e38d
32 changed files with 15673 additions and 16831 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/.env.local
-2
View File
@@ -1,6 +1,4 @@
### keep the env name to .env.local if you want to change this .env name you should change it in django setting too when you load this env
DEBUG = True # keep debug true to set the database to sqlite
# postgres database info
DB_NAME = 'hshop'
DB_USER = 'byeto'
backend/account/views.py
+2 -1
View File
@@ -177,11 +177,12 @@ class GetIDUserAddressView(generics.RetrieveAPIView):
class SubscribeView(APIView):
serializer_class = PushSubscriptionSerializer
permission_classes = [IsAuthenticated]
def post(self, request):
push_ser = self.serializer_class(data=request.data)
if push_ser.is_valid():
PushSubscription.objects.update_or_create(
user=User.objects.all().first(),
user=request.user,
defaults=(push_ser.validated_data)
)
return Response(status=status.HTTP_201_CREATED)
backend/core/asgi.py
+1 -1
View File
@@ -11,6 +11,6 @@ import os
from django.core.asgi import get_asgi_application
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'core.settings')
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'core.settings.production')
application = get_asgi_application()
backend/core/wsgi.py
+1 -1
View File
@@ -11,6 +11,6 @@ import os
from django.core.wsgi import get_wsgi_application
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'core.settings')
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'core.settings.production')
application = get_wsgi_application()
backend/dockerfile
+4 -1
View File
@@ -11,4 +11,7 @@ RUN pip install --no-cache-dir -r requirements.txt
COPY . /app/
CMD ["sh", "-c", "python manage.py makemigrations && python manage.py migrate && python manage.py collectstatic && python manage.py runserver 0.0.0.0:8000"]
CMD ["sh", "-c", "python manage.py makemigrations && \
python manage.py migrate && \
python manage.py collectstatic --no-input && \
gunicorn core.wsgi:application --bind 0.0.0.0:8000 --workers 3"]
backend/requirements.txt
+2
View File
@@ -48,6 +48,7 @@ geoip2==4.8.0
ghasedak_sms==1.0.3
ghasedakpack==0.1.13
gnupg==2.3.1
gunicorn==23.0.0
h11==0.14.0
http_ece==1.2.1
httpagentparser==1.9.5
@@ -73,6 +74,7 @@ oauthlib==3.2.2
odfpy==1.4.1
openai==1.58.1
openpyxl==3.1.2
packaging==24.2
pillow==10.4.0
platformdirs==4.2.2
propcache==0.2.0
docker-compose.yml
+1 -1
View File
@@ -24,7 +24,7 @@ services:
[
"sh",
"-c",
"python manage.py migrate && python manage.py collectstatic --no-input && python manage.py runserver 0.0.0.0:8000",
"python manage.py migrate && python manage.py collectstatic --no-input && gunicorn core.wsgi:application --bind 0.0.0.0:8000 --workers 3",
]
networks:
- default
frontend/app.vue
+4 -1
View File
@@ -1,4 +1,7 @@
<script setup>
<script lang="ts" setup>
// import
import { VueQueryDevtools } from "@tanstack/vue-query-devtools";
// state
frontend/assets/css/tailwind.css
+28 -1
View File
@@ -119,6 +119,11 @@
--breakpoint-3xl: 1700px;
--breakpoint-2xs: 400px;
--breakpoint-xs: 480px;
--breakpoint-sm: 640px;
--breakpoint-md: 768px;
--breakpoint-lg: 1024px;
--breakpoint-xl: 1280px;
--breakpoint-2xl: 1536px;
/* ANIMATIONS */
--animate-marquee: marquee 20s linear infinite;
@@ -261,7 +266,29 @@
@utility container {
@apply mx-auto;
padding-inline: 3rem;
padding-inline: 1.5rem;
max-width: 1380px;
@screen 2xs {
padding-inline: 1rem;
}
@screen xs {
padding-inline: 1rem;
}
@screen sm {
padding-inline: 1rem;
}
@screen md {
padding-inline: 2rem;
}
@screen lg {
padding-inline: 3rem;
}
@screen xl {
padding-inline: 5rem;
}
frontend/components/articles/ArticlesList.vue
+2 -35
View File
@@ -1,9 +1,5 @@
<script lang="ts" setup>
// import
import Masonry from "masonry-layout";
// type
type Props = {
@@ -15,29 +11,13 @@ type Props = {
const props = defineProps<Props>();
const { articles } = toRefs(props);
// state
onMounted(() => {
new Masonry(".masonry-articles-container", {
itemSelector: ".grid-item",
columnWidth: ".grid-sizer",
percentPosition: true,
gutter: ".gutter-sizer"
});
});
</script>
<template>
<div class="masonry-articles-container w-full">
<div class="grid-sizer"></div>
<div class="gutter-sizer"></div>
<div class="columns-2 gap-8 w-full space-y-8">
<BlogPost
v-for="article in articles"
:key="article.id"
class="grid-item"
:image="article.cover_image"
:description="article.summery"
:title="article.title"
@@ -46,18 +26,5 @@ onMounted(() => {
:date="article.created_at"
tag="تگ ندارد"
/>
</div>
</template>
<style>
.grid-sizer,
.grid-item {
margin-bottom: 24px;
width: 48%;
}
.gutter-sizer {
width: 4%;
}
</style>
</template>
frontend/components/global/BlogPost.vue
+19 -19
View File
@@ -22,15 +22,15 @@ const {} = toRefs(props);
</script>
<template>
<NuxtLink :to="`/article/${id}`">
<NuxtLink :to="`/article/${id}`" class="block">
<div
:class="variant === 'lg' ? 'h-[600px] rounded-150 overflow-hidden' : 'h-fit'"
:class="variant === 'lg' ? 'aspect-square rounded-150 overflow-hidden' : 'h-fit'"
class="group w-full relative"
>
<Tag
v-if="variant === 'lg'"
class="bg-success-500 absolute left-10 top-10 z-20"
class="bg-success-500 absolute left-6 lg:left-10 top-6 lg:top-10 z-20"
>
اسپیکر
</Tag>
@@ -53,11 +53,11 @@ const {} = toRefs(props);
</div>
<div
:class="variant === 'lg' ? 'absolute px-10' : 'invert mt-8'"
class="bottom-10 flex flex-col gap-6 z-20"
:class="variant === 'lg' ? 'absolute px-6 lg:px-10' : 'invert mt-8'"
class="bottom-6 lg:bottom-10 flex flex-col gap-4 lg:gap-6 z-20"
>
<div class="flex items-center gap-6">
<div class="flex items-center gap-4 lg:gap-6">
<div class="flex items-center gap-2">
<Icon
name="ci:comment"
@@ -65,8 +65,8 @@ const {} = toRefs(props);
class="**:stroke-white"
/>
<span class="typo-p-sm text-white">
۰ نظر
</span>
۰ نظر
</span>
</div>
<div class="flex items-center gap-2">
<Icon
@@ -81,17 +81,17 @@ const {} = toRefs(props);
</div>
<div class="flex gap-4 flex-col">
<span
:class="variant === 'lg' ? 'typo-h-5' : 'typo-h-6'"
class="text-white"
>
{{ title }}
</span>
<p
:class="variant === 'lg' ? 'typo-h-4' : 'typo-h-6 text-slate-500'"
class="typo-p-md text-white text-justify"
v-html="description"
/>
<span
:class="variant === 'lg' ? 'line-clamp-2' : ''"
class="text-lg font-medium lg:typo-h-6 text-white"
>
{{ title }}
</span>
<!-- <p-->
<!-- :class="variant === 'lg' ? 'typo-h-4' : 'typo-h-6 text-slate-500'"-->
<!-- class="text-white text-justify"-->
<!-- v-html="description"-->
<!-- />-->
</div>
<NuxtLink :to="`/article/${id}`" class="underline text-white typo-p-md">
frontend/components/global/Brands.vue
+6 -6
View File
@@ -15,17 +15,17 @@ const {} = toRefs(props);
<div class="relative w-full flex flex-col justify-center min-h-[700px] h-[80svh]">
<div class="-rotate-z-2 z-20">
<div
class="bg-warning-500 flex pr-20 gap-20 py-2 w-max animate-marquee-reverse"
class="bg-warning-500 flex pr-20 gap-12 sm:gap-20 py-2 w-max animate-marquee-reverse"
>
<span
v-for="i in 10"
class="text-[50px] text-white whitespace-nowrap font-semibold"
class="text-[20px] sm:text-[30px] lg:text-[50px] text-white whitespace-nowrap font-semibold"
>
TEST {{ i }}
</span>
<span
v-for="i in 10"
class="text-[50px] text-white whitespace-nowrap font-semibold"
class="text-[20px] sm:text-[30px] lg:text-[50px] text-white whitespace-nowrap font-semibold"
>
TEST {{ i }}
</span>
@@ -34,17 +34,17 @@ const {} = toRefs(props);
<div class="rotate-z-2 z-10">
<div
class="bg-slate-50 flex pr-20 gap-20 py-2 w-max animate-marquee"
class="bg-slate-50 flex pr-20 gap-12 sm:gap-20 py-2 w-max animate-marquee"
>
<span
v-for="i in 10"
class="text-[50px] text-slate-300 whitespace-nowrap font-semibold"
class="text-[20px] sm:text-[30px] lg:text-[50px] text-slate-300 whitespace-nowrap font-semibold"
>
TEST {{ i }}
</span>
<span
v-for="i in 10"
class="text-[50px] text-slate-300 whitespace-nowrap font-semibold"
class="text-[20px] sm:text-[30px] lg:text-[50px] text-slate-300 whitespace-nowrap font-semibold"
>
TEST {{ i }}
</span>
frontend/components/global/CategoryCard.vue
+11 -12
View File
@@ -24,7 +24,7 @@ const { colorObject } = useImageColor(`#category-image-${id.value}`);
<template>
<NuxtLink :to="`/products?category=${id}`">
<div class="group relative rounded-150 overflow-hidden w-full h-[500px] bg-white brightness-[97%]">
<div class="group relative rounded-150 overflow-hidden w-full aspect-square bg-white brightness-[97%]">
<img
:id="`category-image-${id}`"
class="group-hover:scale-105 transition-transform duration-200 absolute object-contain size-full"
@@ -37,7 +37,7 @@ const { colorObject } = useImageColor(`#category-image-${id.value}`);
/>
<div
class="absolute z-20 bottom-0 p-6 flex items-end justify-between w-full"
class="absolute z-20 bottom-0 p-4 md:p-6 flex items-end justify-between w-full"
>
<div
:class="
@@ -47,24 +47,23 @@ const { colorObject } = useImageColor(`#category-image-${id.value}`);
"
class="flex flex-col gap-2"
>
<div class="typo-s-h-md">
<div class="typo-sub-h-sm md:typo-sub-h-md">
{{ category }}
<span class="typo-p-xs -translate-y-1 inline-block mr-1">
{{ count }}
</span>
{{ count }}
</span>
</div>
<span class="typo-p-md">محصولات ما را مشاهده کنید</span>
<span class="typo-p-sm md:typo-p-md">محصولات ما را مشاهده کنید</span>
</div>
<Icon
size="24"
name="ci:arrow-left"
class="mb-1"
class="mb-1 size-5 md:size-6"
:class="
colorObject?.isLight && !darkLayer
? '**:stroke-black'
: '**:stroke-white'
"
colorObject?.isLight && !darkLayer
? '**:stroke-black'
: '**:stroke-white'
"
/>
</div>
</div>
frontend/components/global/Header.vue
+16 -14
View File
@@ -8,8 +8,8 @@ import { NAV_LINKS } from "~/constants";
// state
const route = useRoute();
const { token } = useAuth();
const isSideDrawerOpen = ref(false);
// queries
@@ -18,6 +18,7 @@ const { data: account } = useGetAccount();
// computed
const isHomePage = computed(() => route.path === "/");
</script>
<template>
@@ -27,10 +28,13 @@ const isHomePage = computed(() => route.path === "/");
:class="isHomePage ? 'fixed top-0 left-0 z-999' : 'z-999'"
>
<div
class="size-full flex items-center justify-between container py-[2.25rem] shrink-0 grow-0"
class="size-full flex items-center justify-between container h-[65px] lg:h-[85px] shrink-0 grow-0"
>
<div class="flex items-center gap-16">
<div class="flex items-center justify-end gap-[1.5rem]">
<button class="md:hidden" @click="isSideDrawerOpen = true">
<Icon name="humbleicons:bars" size="28"/>
</button>
<div class="max-md:hidden flex items-center gap-8 lg:gap-16">
<div class="flex items-center justify-end gap-4 lg:gap-[1.5rem]">
<Tooltip v-if="!!account && !!token" title="حساب کاربری">
<NuxtLink
:to="{ name: 'profile' }"
@@ -53,8 +57,7 @@ const isHomePage = computed(() => route.path === "/");
<NuxtLink to="/signin" class="flex-center">
<Icon
name="ci:profile"
size="24px"
class="**:stroke-black"
class="**:stroke-black size-5 lg:size-6"
/>
</NuxtLink>
</Tooltip>
@@ -62,8 +65,7 @@ const isHomePage = computed(() => route.path === "/");
<NuxtLink to="/products" class="flex-center">
<Icon
name="ci:search"
size="21px"
class="**:stroke-black"
class="**:stroke-black size-4.5 lg:size-[21px]"
/>
</NuxtLink>
</Tooltip>
@@ -71,15 +73,14 @@ const isHomePage = computed(() => route.path === "/");
<NuxtLink to="/cart" class="flex-center">
<Icon
name="ci:cart"
size="24px"
class="**:stroke-black"
class="**:stroke-black size-5 lg:size-6"
/>
</NuxtLink>
</Tooltip>
</div>
<nav
class="flex-center gap-[2.5rem] typo-label-sm font-light text-black/80"
class="flex-center gap-6 lg:gap-[2.5rem] typo-label-xs lg:typo-label-sm font-light text-black/80"
>
<NuxtLink
v-for="(link, index) in NAV_LINKS"
@@ -94,7 +95,7 @@ const isHomePage = computed(() => route.path === "/");
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
height="23"
class="h-5 lg:h-6"
fill="none"
viewBox="0 0 220 40"
>
@@ -110,6 +111,7 @@ const isHomePage = computed(() => route.path === "/");
</div>
</div>
</header>
</template>
<style lang="scss" scoped></style>
<SideDrawer v-model="isSideDrawerOpen"/>
</template>
frontend/components/global/LoadingOverlay.vue
+2 -10
View File
@@ -1,18 +1,10 @@
<script lang="ts" setup>
// import
import type { LoadingOverlayProvideType } from "~/pages/index.vue";
// provide / inject
const { showLoadingOverlay } = inject("loadingOverlay") as LoadingOverlayProvideType;
// state
const { $gsap: gsap } = useNuxtApp();
const shouldRenderLoadingOverlay = ref(true);
const showLoadingOverlay = useState('showLoadingOverlay');
// lifecycle
@@ -27,7 +19,7 @@ watch(() => showLoadingOverlay.value, (value) => {
.to("#loading-overlay", {
scale: 0.8,
opacity: 0,
delay: 3
delay: 2.5
})
.to("#loading-overlay", {
opacity: 0,
frontend/components/global/Rate.vue
+2 -2
View File
@@ -13,8 +13,8 @@ defineProps<Props>();
</script>
<template>
<div class="bg-white flex justify-center items-center gap-2 rounded-full border-[0.5px] border-slate-300 px-4 py-2 typo-p-sm">
<Icon name="ci:star-solid" class="**:fill-warning-400 size-4.5" />
<div class="bg-white flex justify-center items-center gap-1.5 lg:gap-2 rounded-full border-[0.5px] border-slate-300 px-3 lg:px-4 py-1 lg:py-2 typo-p-xs lg:typo-p-sm">
<Icon name="ci:star-solid" class="**:fill-warning-400 size-3.5 lg:size-4.5" />
<span class="mt-0.5">
{{ rate }}
</span>
frontend/components/global/SideDrawer.vue
+112
View File
@@ -0,0 +1,112 @@
<script lang="ts" setup>
// import
import { NAV_LINKS } from "~/constants";
import { useAuth } from "~/composables/api/auth/useAuth";
import useGetAccount from "~/composables/api/account/useGetAccount";
// type
type Props = {
modelValue: boolean
}
// props
const props = defineProps<Props>();
// state
const { token } = useAuth();
const { data: account } = useGetAccount();
// emit
const emit = defineEmits(["update:modelValue"]);
// method
const closeSideDrawer = () => {
emit("update:modelValue", false);
};
</script>
<template>
<Transition name="fade">
<div
v-if="modelValue"
class="md:hidden fixed inset-0 h-svh z-999 size-full bg-black/50 cursor-pointer"
@click="closeSideDrawer"
/>
</Transition>
<div
@click.stop
:class="modelValue ? 'translate-x-0' : 'translate-x-[100%]'"
class="md:hidden cursor-default flex top-0 right-0 fixed z-999 transition-all flex-col bg-white w-[350px] h-full gap-8 pt-12"
>
<div class="flex items-center flex-col justify-end gap-[1.5rem]">
<Tooltip v-if="!!account && !!token" title="حساب کاربری">
<NuxtLink
:to="{ name: 'profile' }"
class="!size-[1.6rem] flex items-center justify-center relative overflow-hidden rounded-full border-[1.2px] border-black"
>
<Avatar
class="!size-[1.6rem]"
:src="account.profile_photo"
:alt="
account.first_name && account.last_name
? `${account.first_name.charAt(
0
)} ${account.last_name.charAt(0)}`
: 'بدون نام کاربری'
"
/>
</NuxtLink>
</Tooltip>
<Tooltip v-else title="ورود">
<NuxtLink to="/signin" class="flex-center">
<Icon
name="ci:profile"
size="24px"
class="**:stroke-black"
/>
</NuxtLink>
</Tooltip>
<Tooltip title="محصولات">
<NuxtLink to="/products" class="flex-center">
<Icon
name="ci:search"
size="21px"
class="**:stroke-black"
/>
</NuxtLink>
</Tooltip>
<Tooltip title="سبد خرید">
<NuxtLink to="/cart" class="flex-center">
<Icon
name="ci:cart"
size="24px"
class="**:stroke-black"
/>
</NuxtLink>
</Tooltip>
</div>
<nav
class="flex-center flex-col gap-[2.5rem] typo-label-sm font-light text-black/80"
>
<NuxtLink
v-for="(link, index) in NAV_LINKS"
:key="index"
:to="link.path"
>
{{ link.title }}
</NuxtLink>
</nav>
</div>
</template>
frontend/components/global/product-detail/ProductsSlider.vue
+26 -9
View File
@@ -30,12 +30,13 @@ await suspense();
const onSwiper = (swiper: SwiperClass) => {
swiper_instance.value = swiper;
};
</script>
<template>
<section class="w-full flex flex-col gap-[4rem] px-0 py-[5rem] container">
<div class="w-full flex justify-between items-center">
<span class="text-black typo-h-4">
<section class="w-full flex flex-col gap-10 md:gap-[4rem] py-[5rem] lg:container">
<div class="w-full flex justify-between items-center max-lg:container">
<span class="text-black typo-h-6 md:typo-h-5 lg:typo-h-4">
{{ title }}
</span>
<div class="flex-center gap-[.5rem]">
@@ -47,16 +48,16 @@ const onSwiper = (swiper: SwiperClass) => {
? 'border-slate-200 cursor-not-allowed'
: 'border-black cursor-pointer'
"
class="size-[2.75rem] rounded-full border-[1.5px] click-effect flex-center"
class="size-[30px] md:size-[35px] lg:size-[2.75rem] rounded-full border-[1.5px] click-effect flex-center"
>
<Icon
name="ci:chevron-right"
class="size-5 lg:size-6"
:class="
swiper_instance?.isBeginning
? '**:stroke-slate-200'
: '**:stroke-black'
"
size="24"
/>
</button>
<button
@@ -67,24 +68,40 @@ const onSwiper = (swiper: SwiperClass) => {
? 'border-slate-200 cursor-not-allowed'
: 'border-black cursor-pointer'
"
class="size-[2.75rem] rounded-full border-[1.5px] click-effect flex-center"
class="size-[30px] md:size-[35px] lg:size-[2.75rem] rounded-full border-[1.5px] click-effect flex-center"
>
<Icon
name="ci:chevron-left"
class="size-5 lg:size-6"
:class="
swiper_instance?.isEnd
? '**:stroke-slate-200'
: '**:stroke-black'
"
size="24"
/>
</button>
</div>
</div>
<div class="w-full">
<Swiper :slides-per-view="3" :space-between="24" @swiper="onSwiper">
<Swiper
:slides-per-view="1.5"
:loop="true"
:centered-slides="true"
:space-between="24"
@swiper="onSwiper"
:breakpoints="{
640: {
centeredSlides: true,
slidesPerView : 2.5
},
1024 : {
centeredSlides: false,
slidesPerView : 3
}
}"
>
<SwiperSlide
v-for="product in homeData!.products"
v-for="product in [...homeData!.products,...homeData!.products]"
:key="product.id"
>
<ProductCard
frontend/components/global/product/ProductCard.vue
+9 -7
View File
@@ -1,4 +1,5 @@
<script lang="ts" setup>
// import
import Tag from "~/components/global/Tag.vue";
@@ -34,7 +35,7 @@ const { colorObject } = useImageColor(`#product-image-${id.value}`);
<template>
<NuxtLink :to="'/product/' + id">
<div
class="group relative size-full min-h-[31.25rem] rounded-2xl bg-white brightness-[98%] overflow-hidden p-6"
class="group relative size-full aspect-square rounded-2xl bg-white brightness-[98%] overflow-hidden p-6"
>
<img
:id="`product-image-${id}`"
@@ -45,7 +46,7 @@ const { colorObject } = useImageColor(`#product-image-${id.value}`);
<div
v-if="darkLayer"
class="bg-linear-to-t inset-0 from-black/50 to-transparent to-40% absolute z-10 size-full"
class="bg-linear-to-t inset-0 from-black/50 to-transparent to-55% absolute z-10 size-full"
/>
<div
@@ -62,25 +63,26 @@ const { colorObject } = useImageColor(`#product-image-${id.value}`);
? 'text-black'
: 'text-white'
"
class="absolute inset-x-0 bottom-0 pb-6 px-6 flex flex-row-reverse justify-between items-end z-10"
class="absolute inset-x-0 bottom-0 pb-4 md:pb-6 px-4 md:px-6 flex flex-row-reverse justify-between items-end z-10"
>
<div class="flex flex-col gap-2 items-start w-full">
<span class="typo-p-md font-medium">
<span class="typo-p-sm md:typo-p-md !font-medium">
{{ brand }}
</span>
<span class="typo-sub-h-lg">
<span class="typo-sub-h-md md:typo-sub-h-lg">
{{ title }}
</span>
<div class="flex items-center justify-between w-full mt-1">
<div class="flex items-center gap-2 mt-1">
<div class="flex items-center gap-2 md:mt-1">
<ColorCircle
v-for="color in colors"
:key="color"
:style="{ backgroundColor: color }"
class="!size-5 md:!size-6"
/>
</div>
<span class="typo-p-md font-medium whitespace-nowrap">
<span class="typo-p-sm md:typo-p-md font-medium whitespace-nowrap">
{{ price }}
</span>
</div>
frontend/components/home/Categories.vue
+21 -10
View File
@@ -26,14 +26,17 @@ const onSwiper = (swiper: SwiperClass) => {
>
<div class="w-full flex justify-center items-center relative z-10">
<span class="text-white typo-h-4">
<span class="text-white typo-h-6 md:typo-h-5 lg:typo-h-4">
دسته بندی ها
</span>
</div>
<img
src="/img/gradient-2.png"
class="animate-spin [animation-duration:16s] object-cover absolute size-full brightness-45 scale-115"
class="animate-spin [animation-duration:16s] object-cover absolute size-full brightness-45 scale-115 aspect-square"
:style="{
maskImage: 'radial-gradient(black, transparent 50%)'
}"
alt=""
/>
@@ -41,9 +44,19 @@ const onSwiper = (swiper: SwiperClass) => {
<Swiper
:loop="true"
:centered-slides="true"
:slides-per-view="3.65"
:slides-per-view="1.5"
:space-between="20"
@swiper="onSwiper"
:breakpoints="{
640: {
centeredSlides: true,
slidesPerView : 2.65
},
1024 : {
centeredSlides: true,
slidesPerView : 3.65
}
}"
>
<SwiperSlide
v-for="slide in homeData!.sub_categories"
@@ -63,31 +76,29 @@ const onSwiper = (swiper: SwiperClass) => {
<div
v-if="!swiper_instance?.isBeginning"
@click="swiper_instance?.slidePrev()"
class="absolute z-20 right-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] bg-white rounded-full size-11.5 flex justify-center items-center"
class="max-xs:hidden absolute z-20 right-10 xs:right-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] translate-y-1/2 bg-white rounded-full size-10 xs:size-11.5 flex justify-center items-center"
>
<Icon
name="ci:arrow-right"
class="**:stroke-black"
size="24"
class="**:stroke-black size-5 xs:size-6"
/>
</div>
<div
v-if="!swiper_instance?.isEnd"
@click="swiper_instance?.slideNext()"
class="absolute z-20 left-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] bg-white rounded-full size-11.5 flex justify-center items-center"
class="max-xs:hidden absolute z-20 left-10 xs:left-20 shadow-lg cursor-pointer shadow-black/25 bottom-[50%] translate-y-1/2 bg-white rounded-full size-10 xs:size-11.5 flex justify-center items-center"
>
<Icon
name="ci:arrow-left"
class="**:stroke-black"
size="24"
class="**:stroke-black size-5 xs:size-6"
/>
</div>
</div>
<div class="w-full flex justify-center items-center">
<NuxtLink to="/category">
<Button variant="solid" class="invert rounded-full px-8" end-icon="ci:arrow-left">
<Button variant="solid" class="invert rounded-full max-xs:typo-label-sm !px-4 xs:!px-8" end-icon="ci:arrow-left">
مشاهده همه دسته ها
</Button>
</NuxtLink>
frontend/components/home/Hero.vue
+107 -75
View File
@@ -5,17 +5,13 @@
import { Swiper, SwiperSlide } from "swiper/vue";
import type { SwiperClass } from "swiper/react";
import useHomeData from "~/composables/api/home/useHomeData";
import type { LoadingOverlayProvideType } from "~/pages/index.vue";
// provide / inject
const { changeLoadingOverlay } = inject("loadingOverlay") as LoadingOverlayProvideType;
// state
const { data: homeData } = useHomeData();
const { $gsap: gsap, $ScrollTrigger: ScrollTrigger } = useNuxtApp();
const swiper_instance = ref<SwiperClass | null>(null);
const showLoadingOverlay = useState("showLoadingOverlay");
const observerTarget = ref(null);
const shouldPauseVideos = ref(false);
@@ -23,7 +19,6 @@ const shouldPauseVideos = ref(false);
useIntersectionObserver(
observerTarget,
([entry], observerElement) => {
console.log(entry.rootBounds ? !entry.isIntersecting : false, "asdad");
shouldPauseVideos.value = entry.rootBounds ? !entry.isIntersecting : false;
}
);
@@ -32,11 +27,12 @@ const isMuted = ref(true);
const slidesPerView = ref(1);
let gsapTimeline: gsap.core.Timeline;
let scrollTrigger: ScrollTrigger;
// methods
const onSwiper = (swiper: SwiperClass) => {
changeLoadingOverlay(false);
showLoadingOverlay.value = false;
swiper_instance.value = swiper;
};
@@ -60,11 +56,7 @@ watch(() => [shouldPauseVideos.value, swiper_instance.value?.realIndex], () => {
// lifecycle
onMounted(() => {
updateVideoStates();
gsapTimeline = gsap.timeline();
const initializeGsapAnimation = () => {
gsap.to("#header-navbar", {
background: "transparent",
filter: "invert(100%)"
@@ -99,21 +91,33 @@ onMounted(() => {
marginTop: "0px",
scale: 1.025
}, {
marginTop: "96px",
marginTop: () => {
const navbarEl = document.querySelector("#header-navbar") as HTMLDivElement;
return `${navbarEl.clientHeight}px`;
},
scale: 1
}, "=")
.fromTo("#header-slider-pagination-child", {
padding: "0px 0px"
}, {
padding: "0px 80px"
}, "=")
.fromTo(".header-slider-item-child", {
padding: "0px 80px"
}, {
padding: "0px 40px"
}, "=");
};
ScrollTrigger.create({
const resetTimelineForMobile = () => {
gsap.to("#header-navbar", {
background: "white",
filter: "invert(0%)"
});
gsap.set(".header-slider-item", {
borderRadius: "20px",
height: "450px"
});
};
onMounted(() => {
updateVideoStates();
gsapTimeline = gsap.timeline();
initializeGsapAnimation();
scrollTrigger = ScrollTrigger.create({
trigger: "#header-slider-container",
animation: gsapTimeline,
scrub: 1,
@@ -123,6 +127,24 @@ onMounted(() => {
end: "bottom top"
});
setTimeout(() => {
if (window.innerWidth > 768) {
scrollTrigger.enable();
} else {
resetTimelineForMobile();
scrollTrigger.disable();
}
}, 100);
window.addEventListener("resize", () => {
if (window.innerWidth > 768) {
scrollTrigger.enable();
} else {
resetTimelineForMobile();
scrollTrigger.disable();
}
});
});
onUnmounted(() => {
@@ -133,23 +155,30 @@ onUnmounted(() => {
</script>
<template>
<div id="header-slider-container" class="w-full mb-20 z-50">
<div
id="header-slider-container"
class="w-full mb-20 z-50 max-md:mt-[80px]"
>
<div id="header-slider-wrapper" class="relative">
<Swiper
ref="observerTarget"
:slides-per-view="slidesPerView"
:loop="true"
:space-between="40"
:centered-slides="true"
:breakpoints="{
768: {
spaceBetween : 40
}
}"
@swiper="onSwiper"
>
<SwiperSlide
v-for="(slide, index) in homeData!.sliders"
:key="slide.id"
class="max-md:container"
>
<div
class="header-slider-item relative w-full overflow-hidden"
class="header-slider-item relative w-full overflow-hidden max-md:rounded-[20px]"
>
<template v-if="!!slide.video">
<video
@@ -160,19 +189,26 @@ onUnmounted(() => {
:src="slide.video"
/>
</template>
<img
v-else
class="absolute inset-0 size-full object-cover"
:src="slide.image!"
:alt="slide.title"
/>
<div class="size-full absolute z-10 bg-linear-to-t from-black/50 to-transparent" />
<div class="header-slider-item-child absolute z-10 w-full bottom-36">
<div class="w-full container">
<div class="border-b border-white/10 pb-6 flex flex-col gap-4">
<div class="flex items-center gap-8">
<div
:class="swiper_instance?.realIndex !== index ? 'opacity-0' : ''"
class="w-full transition-opacity pb-6 xs:pb-10 lg:pb-16 px-6 xs:px-10 lg:px-16 gap-6 xs:gap-10 lg:gap-12 container flex flex-col h-full justify-end relative z-10"
>
<div class="header-slider-item-child w-full">
<div class="border-b border-white/10 pb-6 flex flex-col gap-2 md:gap-4">
<div class="flex items-center gap-4 lg:gap-8">
<div
class="hover:scale-110 size-[50px] relative flex items-center justify-center">
class="hover:scale-110 size-[36px] md:size-[42px] lg:size-[50px] relative flex items-center justify-center">
<div
class="size-full scale-75 bg-white absolute rounded-full animate-ping" />
<button
@@ -181,63 +217,59 @@ onUnmounted(() => {
>
<Icon
:name="isMuted ? 'bi:volume-mute-fill' : 'bi:volume-up-fill'"
class="text-black"
size="24px"
class="text-black size-4 md:size-[18px] lg:size-[24px]"
/>
</button>
</div>
<h3 class="typo-h-1 tracking-[-2px] text-white">
<h3 class="typo-h-6 md:typo-h-4 lg:typo-h-1 tracking-[-2px] text-white">
{{ slide.title }}
</h3>
</div>
<div class="flex justify-between items-end">
<span class="typo-p-lg text-white">
{{ slide.description }}
</span>
<Button class="invert rounded-full hover:bg-transparent">
<div class="flex justify-between items-center">
<span class="truncate typo-p-xs md:typo-p-sm lg:typo-p-lg text-white">
{{ slide.description }}
</span>
<Button
class="max-sm:hidden max-lg:typo-label-xs invert rounded-full hover:bg-transparent">
مشاهده
</Button>
</div>
</div>
</div>
<div
id="header-slider-pagination-child"
class="flex items-center justify-between"
>
<button @click="swiper_instance?.slidePrev()">
<Icon
class="**:stroke-white cursor-pointer size-5 md:size-6"
name="ci:arrow-right"
/>
</button>
<div class="flex items-center justify-center gap-3 text-white">
<div
v-for="(_slide, index) in homeData!.sliders"
:class="swiper_instance?.realIndex === index ? 'bg-white' : 'bg-transparent'"
class="border border-white size-2 md:size-3 rounded-full transition-all duration-200"
@click="swiper_instance?.slideTo(index)"
>
</div>
</div>
<button>
<Icon
@click="swiper_instance?.slideNext()"
class="**:stroke-white cursor-pointer size-5 md:size-6"
name="ci:arrow-left"
/>
</button>
</div>
</div>
</div>
</SwiperSlide>
</Swiper>
<div
id="header-slider-pagination"
class="absolute w-full left-1/2 -translate-x-1/2 z-100"
:style="{ bottom : '80px' }"
>
<div class="container h-full">
<div id="header-slider-pagination-child" class="h-full flex items-center justify-between">
<button @click="swiper_instance?.slidePrev()">
<Icon
class="**:stroke-white cursor-pointer"
name="ci:arrow-right"
size="24"
/>
</button>
<div class="flex items-center justify-center gap-3 text-white">
<div
v-for="(_slide, index) in homeData!.sliders"
:class="swiper_instance?.realIndex === index ? 'bg-white' : 'bg-transparent'"
class="border border-white size-3 rounded-full transition-all duration-200"
@click="swiper_instance?.slideTo(index)"
>
</div>
</div>
<button>
<Icon
@click="swiper_instance?.slideNext()"
class="**:stroke-white cursor-pointer"
name="ci:arrow-left"
size="24"
/>
</button>
</div>
</div>
</div>
</div>
</div>
frontend/components/home/LatestStories.vue
+3 -5
View File
@@ -14,19 +14,17 @@ await suspense();
</script>
<template>
<section class="mt-20 px-20">
<section class="mt-20 container">
<div class="flex items-center justify-between mb-20">
<span class="typo-h-4 text-black">
<span class="typo-h-6 md:typo-h-5 lg:typo-h-4 text-black">
مقالات اخیر سایت
</span>
<NuxtLink to="/articles">
<Button variant="outlined" class="rounded-full" start-icon="ci:paper">
<Button variant="outlined" class="rounded-full max-sm:typo-label-sm max-sm:py-2" end-icon="ci:arrow-left">
نمایش همه
</Button>
</NuxtLink>
</div>
<ClientOnly>
<ArticlesList :articles="articles!.results" />
</ClientOnly>
</section>
</template>
frontend/components/home/MostRecentComments.vue
+5 -5
View File
@@ -51,14 +51,14 @@ const onSwiper = (swiper: SwiperClass) => {
<div class="flex justify-center items-center">
<div class="max-w-[900px] px-4 text-white flex flex-col items-center gap-4">
<Icon name="ci:instagram" size="28" class="**:stroke-white" />
<p class="typo-h-5 leading-[150%] text-center">
<p class="text-base xs:text-lg sm:typo-h-6 lg:typo-h-5 !font-medium leading-[150%] lg:leading-[175%] max-sm:px-4 sm:max-w-[600px] lg:max-w-[800px] text-center">
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با
استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله
در ستون و سطرآنچنان که لازم.
</p>
<span class="typo-p-xl text-center">
- منصور مرزبان
</span>
<span class="typo-p-sm md:typo-p-xl text-center">
- منصور مرزبان
</span>
</div>
</div>
</SwiperSlide>
@@ -68,7 +68,7 @@ const onSwiper = (swiper: SwiperClass) => {
<div
v-for="(i, index) in 6"
:class="swiper_instance?.realIndex === index ? 'bg-white' : 'bg-transparent'"
class="border border-white size-2 rounded-full transition-all duration-200"
class="border border-white size-1.5 md:size-2 rounded-full transition-all duration-200"
>
</div>
</div>
frontend/components/home/Preview.vue
+10 -11
View File
@@ -46,17 +46,16 @@ watch(
</script>
<template>
<div class="container">
<div class="flex flex-col items-center gap-3 mb-16">
<span class="typo-p-md text-slate-500">مقایسه محصولات</span>
<span class="typo-h-3 text-black">
<div class="container max-w-[1000px]">
<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">
تفاوت محصلات ما را ببینید
{{ activeSlideVideo }}
</span>
</div>
<div
ref="previewContainerEl"
class="rounded-200 overflow-hidden h-[90svh] relative"
class="rounded-200 overflow-hidden h-[60svh] md:h-[70svh] relative"
>
<Transition name="fade">
<img
@@ -110,21 +109,21 @@ watch(
</div>
<div
class="absolute bottom-0 p-10 w-full flex justify-between items-end"
class="max-xs:hidden absolute bottom-0 p-6 md:p-10 w-full flex justify-between items-end"
>
<div class="flex flex-col gap-2 text-black">
<span class="typo-p-md">
<span class="typo-p-sm md:typo-p-md">
{{ homeData!.difreance_section.description1 }}
</span>
<span class="typo-h-3">
<span class="typo-h-6 md:typo-h-5 lg:typo-h-3">
{{ homeData!.difreance_section.title1 }}
</span>
</div>
<div class="flex flex-col gap-2 text-black">
<span class="typo-p-md text-end">
<span class="typo-p-sm md:typo-p-md text-end">
{{ homeData!.difreance_section.description2 }}
</span>
<span class="typo-h-3 text-end">
<span class="typo-h-6 md:typo-h-5 lg:typo-h-3 text-end">
{{ homeData!.difreance_section.title2 }}
</span>
</div>
frontend/components/home/ProductsShowcase.vue
+11 -26
View File
@@ -1,29 +1,14 @@
<script lang="ts" setup>
// import
import useHomeData from "~/composables/api/home/useHomeData";
// state
const { $gsap: gsap, $ScrollTrigger: ScrollTrigger } = useNuxtApp();
const { data : homeData } = useHomeData();
const slides = [
{
id: 1,
title: "موبایل iPhone 16 Pro Max",
description: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم.",
image: "/img/showcase-1.png"
},
{
id: 2,
title: "موبایل iPhone 16 Pro Max",
description: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم.",
image: "/img/showcase-2.png"
},
{
id: 3,
title: "موبایل iPhone 16 Pro Max",
description: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم.",
image: "/img/showcase-1.png"
}
];
const { $gsap: gsap, $ScrollTrigger: ScrollTrigger } = useNuxtApp();
let gsapTimeline: gsap.core.Timeline;
@@ -107,15 +92,15 @@ onUnmounted(() => {
class="mt-80 mb-40 perspective-midrange w-full h-[125svh] bg-black flex items-center justify-center"
>
<div
v-for="slide in slides"
v-for="slide in homeData!.show_case_slider"
:key="slide.id"
class="showcase-slide origin-bottom absolute size-full bg-transparent flex items-center justify-center"
>
<div
class="blur-[150px] w-[600px] h-[80px] bg-white/70 absolute z-10"
class="blur-[150px] w-[400px] sm:w-[600px] h-[80px] sm:h-[80px] bg-white/70 absolute z-10"
/>
<img
class="w-[650px] z-20 mb-30"
class="w-[280px] xs:w-[350px] lg:w-[500px] xl:w-[650px] z-20 mb-30 sm:mb-20 lg:mb-30"
:src="slide.image"
:style="{
mask: 'linear-gradient(to bottom, black 0%, rgba(0,0,0,0) 100%)',
@@ -123,10 +108,10 @@ onUnmounted(() => {
alt=""
/>
<div class="flex flex-col items-center justify-center gap-4 text-center absolute z-20 mt-20">
<span class="text-white typo-h-3">
<span class="text-white typo-h-6 sm:typo-h-5 lg:typo-h-4 xl:typo-h-3">
{{ slide.title }}
</span>
<p class="text-white max-w-[750px] typo-p-lg">
<p class="text-white max-w-[320px] xs:max-w-[360px] sm:max-w-[480px] lg:max-w-[550px] xl:max-w-[750px] typo-p-sm lg:typo-p-md xl:typo-p-lg">
{{ slide.description }}
</p>
</div>
frontend/composables/api/home/useHomeData.ts
+8 -1
View File
@@ -25,7 +25,14 @@ export type GetHomeDataResponse = {
"description2": string,
"link1": string,
"link2": string
}
},
"show_case_slider" : {
"id": number,
"title": string,
"description": string,
"link": string,
"image": string,
}[]
};
const useHomeData = () => {
frontend/dockerfile
+1 -1
View File
@@ -10,4 +10,4 @@ WORKDIR /app
COPY --from=build-stage /app /app
EXPOSE 3000
ENV NODE_ENV=production
CMD ["npm", "run", "start"]
CMD ["npm", "run", "start"]
frontend/package-lock.json
Generated
+15204 -16488
View File
File diff suppressed because it is too large Load Diff
frontend/package.json
+52 -57
View File
@@ -1,59 +1,54 @@
{
"name": "nuxt-app",
"private": true,
"type": "module",
"scripts": {
"start": "node .output/server/index.mjs",
"build": "nuxt build",
"dev": "nuxt dev",
"dev-o": "nuxt dev -- -o",
"test": "vitest",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"dependencies": {
"@formkit/auto-animate": "^0.8.2",
"@nuxt/icon": "^1.9.1",
"@nuxtjs/google-fonts": "^3.2.0",
"@tanstack/vue-query": "^5.62.2",
"@tanstack/vue-query-devtools": "^5.62.3",
"@vite-pwa/nuxt": "^0.10.6",
"@vuelidate/core": "^2.0.3",
"@vuelidate/validators": "^2.0.4",
"@vueuse/integrations": "^12.4.0",
"@vueuse/nuxt": "^12.3.0",
"animate.css": "^4.1.1",
"axios": "^1.7.9",
"date-fns-jalali": "^4.1.0-0",
"fast-average-color": "^9.4.0",
"gsap": "^3.12.5",
"isomorphic-dompurify": "^2.21.0",
"jalali-ts": "^8.0.0",
"masonry-layout": "^4.2.2",
"nuxt": "^3.14.1592",
"reka-ui": "^1.0.0-alpha.6",
"swiper": "^11.1.15",
"universal-cookie": "^7.2.2",
"vue": "latest",
"vue-router": "latest",
"vue-scrollto": "^2.20.0",
"vue-skeletor": "^1.0.6",
"vue3-marquee": "^4.2.2",
"vue3-persian-datetime-picker": "^1.2.2",
"workbox-window": "^7.3.0"
},
"devDependencies": {
"@nuxt/test-utils": "^3.15.4",
"@tailwindcss/postcss": "^4.0.0-beta.5",
"@types/masonry-layout": "^4.2.8",
"@vue/test-utils": "^2.4.6",
"autoprefixer": "^10.4.20",
"happy-dom": "^16.8.1",
"msw": "^2.7.0",
"playwright-core": "^1.50.1",
"postcss": "^8.4.49",
"tailwindcss": "^4.0.0-beta.5",
"vitest": "^3.0.4"
}
"name": "nuxt-app",
"private": true,
"type": "module",
"scripts": {
"start": "node .output/server/index.mjs",
"build": "nuxt build",
"dev": "nuxt dev",
"dev-network": "nuxi dev --host",
"dev-o": "nuxt dev -- -o",
"test": "vitest",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"dependencies": {
"@formkit/auto-animate": "^0.8.2",
"@nuxt/icon": "^1.10.3",
"@nuxtjs/google-fonts": "^3.2.0",
"@tanstack/vue-query": "^5.62.2",
"@tanstack/vue-query-devtools": "^5.62.3",
"@vite-pwa/nuxt": "^0.10.6",
"@vuelidate/core": "^2.0.3",
"@vuelidate/validators": "^2.0.4",
"@vueuse/integrations": "^12.7.0",
"@vueuse/nuxt": "^12.7.0",
"animate.css": "^4.1.1",
"axios": "^1.8.1",
"date-fns-jalali": "^4.1.0-0",
"fast-average-color": "^9.4.0",
"gsap": "^3.12.7",
"isomorphic-dompurify": "^2.22.0",
"jalali-ts": "^8.0.0",
"masonry-layout": "^4.2.2",
"nuxt": "^3.15.4",
"reka-ui": "^1.0.0-alpha.6",
"swiper": "^11.2.4",
"universal-cookie": "^7.2.2",
"vue": "latest",
"vue-router": "latest",
"vue-scrollto": "^2.20.0",
"vue-skeletor": "^1.0.6",
"vue3-marquee": "^4.2.2",
"vue3-persian-datetime-picker": "^1.2.2",
"workbox-window": "^7.3.0"
},
"devDependencies": {
"@tailwindcss/postcss": "^4.0.9",
"@types/masonry-layout": "^4.2.8",
"autoprefixer": "^10.4.20",
"postcss": "^8.5.3",
"tailwindcss": "^4.0.9"
}
}
frontend/pages/index.vue
-22
View File
@@ -4,32 +4,10 @@
import useHomeData from "~/composables/api/home/useHomeData";
// type
export type LoadingOverlayProvideType = {
showLoadingOverlay: Ref<boolean>,
changeLoadingOverlay: (value: boolean) => void,
}
// state
const { suspense } = useHomeData();
const showLoadingOverlay = ref(true);
// method
const changeLoadingOverlay = (value: boolean) => {
showLoadingOverlay.value = value;
};
// provide / inject
provide("loadingOverlay", {
showLoadingOverlay,
changeLoadingOverlay
});
// ssr
const response = await suspense();
frontend/tools/logger.ts
-1
View File
@@ -1,5 +1,4 @@
import fs from "fs/promises";
import type { AxiosError } from "axios";
type LogType = {
title: string;
frontend/types/global.d.ts
Vendored
+3 -6
View File
@@ -88,10 +88,7 @@ declare global {
colors: string[];
};
type ProductListItem = Pick<
Product,
"id" | "variants" | "name" | "rating" | "slug" | "category" | "colors"
>;
type ProductListItem = Pick<Product, "id" | "variants" | "name" | "rating" | "slug" | "category" | "colors">
type Article = {
id: number;
@@ -126,7 +123,7 @@ declare global {
name: string;
slug: string;
icon: string;
product_count: string;
product_count: number;
subcategorys: SubCategory[];
};
@@ -136,7 +133,7 @@ declare global {
slug: string;
icon: string;
image: string;
product_count: string;
product_count: number;
parent: string;
show: boolean;
};