1449 lines
87 KiB
PHP
1449 lines
87 KiB
PHP
@push('style_css')
|
||
<style>
|
||
.max-w-5xl {
|
||
max-width: 1600px !important;
|
||
}
|
||
|
||
.slider-container {
|
||
display: flex;
|
||
overflow-x: scroll;
|
||
scroll-snap-type: x mandatory;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
.slider-item {
|
||
flex: 0 0 80%;
|
||
min-width: 80%;
|
||
scroll-snap-align: start;
|
||
margin-left: 1%;
|
||
}
|
||
|
||
.app {
|
||
transition: width, height, margin-top, cubic-bezier(0.25, 1, 0.5, 1) 100ms;
|
||
}
|
||
|
||
.app:hover {
|
||
width: 90px;
|
||
height: 90px;
|
||
margin-top: -30px;
|
||
}
|
||
|
||
.app:hover+.app {
|
||
width: calc(80px + var(--dock-offset-right, 0px));
|
||
height: calc(80px + var(--dock-offset-right, 0px));
|
||
margin-top: calc(-20px + var(--dock-offset-right, 0px) * -1);
|
||
}
|
||
|
||
.app:hover+.app+.app {
|
||
width: calc(70px + var(--dock-offset-right, 0px));
|
||
height: calc(70px + var(--dock-offset-right, 0px));
|
||
margin-top: calc(-10px + var(--dock-offset-right, 0px) * -1);
|
||
}
|
||
|
||
.app:has(+ .app:hover) {
|
||
width: calc(80px + var(--dock-offset-left, 0px));
|
||
height: calc(80px + var(--dock-offset-left, 0px));
|
||
margin-top: calc(-20px + var(--dock-offset-left, 0px) * -1);
|
||
}
|
||
|
||
.app:has(+ .app + .app:hover) {
|
||
width: calc(70px + var(--dock-offset-left, 0px));
|
||
height: calc(70px + var(--dock-offset-left, 0px));
|
||
margin-top: calc(-10px + var(--dock-offset-left, 0px) * -1);
|
||
}
|
||
|
||
.page {
|
||
min-height: 100dvh;
|
||
display: flex;
|
||
}
|
||
|
||
.dock {
|
||
margin: auto auto 12px auto;
|
||
border-radius: 24px;
|
||
padding: 0 12px;
|
||
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.15));
|
||
box-shadow: rgba(255, 255, 255, 0.17) 0px 0px 0px 1px inset;
|
||
}
|
||
|
||
.dock ul {
|
||
display: flex;
|
||
list-style-type: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.app {
|
||
width: 60px;
|
||
height: 60px;
|
||
position: relative;
|
||
}
|
||
|
||
.app img {
|
||
width: 50px;
|
||
height: 50px;
|
||
}
|
||
|
||
.app a {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
border-radius: 12px;
|
||
color: #fff;
|
||
}
|
||
|
||
.app:hover .tooltip,
|
||
.app:focus-within .tooltip {
|
||
opacity: 1;
|
||
}
|
||
|
||
.tooltip {
|
||
position: absolute;
|
||
top: -40px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
opacity: 0;
|
||
transition: ease-in opacity 100ms;
|
||
display: block;
|
||
background: rgba(0, 0, 0, 0.58);
|
||
padding: 8px;
|
||
border-radius: 12px;
|
||
height: 22px;
|
||
width: auto;
|
||
box-shadow: rgba(0, 0, 0, 0.17) 0px 12px 8px 1px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.source-links {
|
||
position: absolute;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
right: 20px;
|
||
top: 20px;
|
||
text-align: right;
|
||
}
|
||
|
||
.source-links a {
|
||
color: #fff;
|
||
opacity: 0.3;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.source-links a:hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
.mobile-message {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
color: #fff;
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
line-height: 1.2;
|
||
justify-content: center;
|
||
align-items: center;
|
||
display: none;
|
||
}
|
||
|
||
@media only screen and (max-width: 800px) {
|
||
.mobile-message {
|
||
display: flex;
|
||
}
|
||
}
|
||
|
||
.mobile-message p {
|
||
max-width: 70vw;
|
||
}
|
||
|
||
.mobile-message a {
|
||
color: #fff;
|
||
}
|
||
|
||
.mobile-message::before {
|
||
content: "";
|
||
position: fixed;
|
||
inset: 0;
|
||
background-color: rgba(255, 255, 255, 0.3);
|
||
filter: blur(80px);
|
||
-webkit-filter: blur(80px);
|
||
}
|
||
|
||
.loader-image {
|
||
animation: continuousScale 5s linear forwards;
|
||
transform-origin: center;
|
||
}
|
||
|
||
@keyframes continuousScale {
|
||
0% {
|
||
transform: scale(1);
|
||
}
|
||
|
||
100% {
|
||
transform: scale(50);
|
||
width: 100vw;
|
||
height: 100vh;
|
||
}
|
||
}
|
||
|
||
.app-clicked {
|
||
animation: bookBounce 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
|
||
transform-origin: bottom center;
|
||
}
|
||
|
||
@keyframes bookBounce {
|
||
|
||
0%,
|
||
100% {
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
|
||
25% {
|
||
transform: translateY(-10px) scale(1.05);
|
||
}
|
||
|
||
50% {
|
||
transform: translateY(0) scale(1);
|
||
}
|
||
|
||
75% {
|
||
transform: translateY(-5px) scale(1.02);
|
||
}
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.loading-pulse {
|
||
display: none !important;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 768px) {
|
||
.loading-pulse2 {
|
||
display: flex !important;
|
||
}
|
||
}
|
||
</style>
|
||
@endpush
|
||
|
||
@section('title')
|
||
مجله خبری سرمایه گذاری اهرم - آموزش ارز دیجیتال و اخبار روز
|
||
@endsection
|
||
|
||
@section('metaSEO')
|
||
<meta name="description"
|
||
content="در مجله خبری سرمایه گذاری اهرم میتوانید به مقالات تخصصی درباره آموزش ارزهای دیجیتال و بلاکچین و پیگیری اخبار جدید دسترسی داشته باشید." />
|
||
<link rel="canonical" href="{{ env('APP_URL') }}/" />
|
||
<meta property="og:locale" content="fa_IR" />
|
||
<meta property="og:type" content="website" />
|
||
<meta property="og:title" content="مجله خبری سرمایه گذاری اهرم - آموزش ارز دیجیتال و اخبار روز" />
|
||
<meta property="og:description"
|
||
content="در مجله خبری سرمایه گذاری اهرم میتوانید به مقالات تخصصی درباره آموزش ارزهای دیجیتال و بلاکچین و پیگیری اخبار جدید دسترسی داشته باشید." />
|
||
<meta property="og:url" content="{{ env('APP_URL') }}/" />
|
||
<meta property="og:site_name" content="مجله خبری سرمایه گذاری اهرم " />
|
||
<script type="application/ld+json">
|
||
{
|
||
"@context": "https://schema.org/",
|
||
"@type": "WebSite",
|
||
"name": "سرمایه گذاری اهرم",
|
||
"url": "/",
|
||
"potentialAction": {
|
||
"@type": "SearchAction",
|
||
"target": "https://ahrominvest.ir/mag/search?q={search_term_string}",
|
||
"query-input": "required name=search_term_string"
|
||
}
|
||
}
|
||
</script>
|
||
@endsection
|
||
|
||
<div class="mt-10 md:mt-0">
|
||
<div class="px-6 mt-2 sm:px-6">
|
||
<div class="max-w-5xl mx-auto">
|
||
<div x-data="{ getVideoHeight() { if (window.innerWidth < 768) return 400; if (window.innerHeight < 900) return 500; return 650; } }" x-init=" let updateHeight = () => $el.style.height = `${getVideoHeight()}px`; updateHeight(); let throttleTimer; const throttle = (callback, time) => { if (throttleTimer) return; throttleTimer = true; setTimeout(() => { callback(); throttleTimer = false; }, time); }; window.addEventListener('resize', () => throttle(updateHeight, 100)); " class="relative me-auto overflow-hidden w-[70%] rounded-[15px]">
|
||
<div class="absolute inset-0 bg-[#00000086] mix-blend-multiply z-10"></div>
|
||
<video autoplay loop muted playsinline class="w-full h-full object-cover">
|
||
<source src="{{ asset('video/appvideo.mp4') }}" type="video/mp4">
|
||
مرورگر شما از پخش ویدیو پشتیبانی نمیکند.
|
||
</video>
|
||
<div class="absolute inset-0 bg-gradient-to-t bg-[#0a0f52a9] z-10"></div>
|
||
<div x-data="bookList" class="relative">
|
||
<div id="custom-page-loader" class="hidden fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
|
||
<img x-bind:src="currentImage" class="loader-image w-16 h-16 object-contain" />
|
||
</div>
|
||
<nav dir="ltr" class="absolute bg-[#121864bd] bg-gradient-to-t dock dock-transition bottom-10 left-1/2 px-2 pb-2 pt-3 -translate-x-1/2 mx-auto rounded-[15px] z-20">
|
||
@php
|
||
$items = [
|
||
['slug' => 'what-is-walt-disney', 'name' => 'دیزنی'],
|
||
['slug' => 'what-is-cocacola', 'name' => 'کوکاکولا'],
|
||
['slug' => 'what-is-netflix', 'name' => 'نتفلیکس'],
|
||
['slug' => 'what-is-walmart', 'name' => 'والمارت'],
|
||
['slug' => 'what-is-mcdonalds', 'name' => 'مکدونالد'],
|
||
['slug' => 'what-is-amazon', 'name' => 'آمازون'],
|
||
['slug' => 'what-is-microsoft', 'name' => 'مایکروسافت'],
|
||
['slug' => 'what-is-meta', 'name' => 'متا'],
|
||
['slug' => 'what-is-tesla', 'name' => 'تسلا'],
|
||
['slug' => 'what-is-google', 'name' => 'گوگل'],
|
||
['slug' => 'what-is-apple', 'name' => 'اپل'],
|
||
['slug' => 'what-is-nvidia', 'name' => 'انویدیا'],
|
||
]
|
||
@endphp
|
||
<ul>
|
||
@foreach ($items as $item)
|
||
<li class="app" @mousemove="handleAppHover($event, $el)" @click="handleClick($event, $el, '{{ $item['slug'] }}')" x-ref="app-{{ $item['slug'] }}">
|
||
<a href="{{ route('detail', ['slug' => $item['slug']]) }}" wire:navigate target="_blank" @click.prevent>
|
||
<img src="{{ asset('image/shortcut-mini-' . $item['slug'] . '.svg') }}" />
|
||
</a>
|
||
</li>
|
||
@endforeach
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div x-data="catList" class="visible z-10 mx-auto flex max-w-5xl flex-col items-center mt-8 px-4 mb-12 lg:flex-col lg:justify-between">
|
||
<div class="w-full">
|
||
<div class="mb-4 border-b align-items-center justify-between flex ">
|
||
<h2 class="inline-block text-[18px] pb-2 border-b-2 rounded-t-lg text-[#0075e7] border-[#0075e7] ">
|
||
دسته بندی ها</h2>
|
||
</div>
|
||
</div>
|
||
<div class="w-full h-full flex md:flex-wrap items-center overflow-scroll md:overflow-hidden no-scrollbar gap-6 my-4 lg:my-8">
|
||
@php
|
||
$icons = [
|
||
asset("image/cats/financial markets.svg"),
|
||
asset("image/cats/invest.svg"),
|
||
asset("image/cats/blockchain.svg"),
|
||
asset("image/cats/nft.svg"),
|
||
asset("image/cats/metaverse.svg"),
|
||
asset("image/cats/ai.svg"),
|
||
asset("image/cats/tecnology.svg"),
|
||
asset("image/cats/biography.svg"),
|
||
asset("image/cats/company.svg"),
|
||
asset("image/cats/scam.svg")
|
||
];
|
||
@endphp
|
||
@foreach($categories->sortByDesc('priority') as $category)
|
||
<div @click="handleCatClick({{ $category->id }}, '{{ $category->title }}', '{{ $category->slug }}')" class=" cursor-pointer rounded-full text-center my-2 flex flex-col items-center justify-center space-y-2 w-[85px]">
|
||
<img class="object-cover object-center min-w-[55px] h-[55px] w-[55px] rounded-full bg-gray-100 aspect-square" src="{{ $icons[$loop->index] }}"
|
||
loading="lazy" />
|
||
<span class="font-semibold text-sm text-nowrap">{{ ($category->id == 67) ? "کلاهبرداریها" : (($category->id == 29) ? "شرکتها" : $category->title) }}</span>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
<div wire:ignore
|
||
x-show="showBackdrop"
|
||
x-transition:enter="transition-opacity duration-300"
|
||
x-transition:enter-start="opacity-0"
|
||
x-transition:enter-end="opacity-100"
|
||
x-transition:leave="transition-opacity duration-300"
|
||
x-transition:leave-start="opacity-100"
|
||
x-transition:leave-end="opacity-0"
|
||
x-cloak
|
||
style="z-index: 5000; backdrop-filter: brightness(0.5); filter: blur(4px);"
|
||
class="fixed top-0 right-0 h-screen w-screen ">
|
||
</div>
|
||
<div x-show="showBackdrop" x-transition:enter="transition-transform duration-300 ease-out"
|
||
x-transition:enter-start="-translate-x-full"
|
||
x-transition:enter-end="translate-x-0"
|
||
x-transition:leave="transition-transform duration-300 ease-in"
|
||
x-transition:leave-start="translate-x-0"
|
||
x-transition:leave-end="-translate-x-full" @click.outside="closeBackdrop()" x-cloak class="fixed top-0 left-0 z-[8000] flex h-[100vh] mx-auto w-[100%] 2xl:w-[25%] lg:w-[40%] flex-col p-4 md:p-4 md:py-3 rounded-none bg-gray-50 lg:rounded-tr-xl lg:rounded-br-xl">
|
||
<div class="flex items-center justify-between w-full border-b pb-2">
|
||
<span class="font-bold text-[18px]" x-text="selectedTitle">دسته بندی ها</span>
|
||
<button @click="closeBackdrop()"
|
||
class="bg-gray-100 flex h-10 items-center justify-center pb-1 px-2 rounded-full w-10 z-20 block lg:hidden"
|
||
type="button ">
|
||
<svg class="w-4 h-4 fill-[#62686f] cursor-pointer mt-1" xmlns="http://www.w3.org/2000/svg" fill="#000" viewBox="0 0 384 512">
|
||
<path d="M378.4 71.4c8.5-10.1 7.2-25.3-2.9-33.8s-25.3-7.2-33.8 2.9L192 218.7 42.4 40.6C33.9 30.4 18.7 29.1 8.6 37.6S-2.9 61.3 5.6 71.4L160.7 256 5.6 440.6c-8.5 10.2-7.2 25.3 2.9 33.8s25.3 7.2 33.8-2.9L192 293.3 341.6 471.4c8.5 10.1 23.7 11.5 33.8 2.9s11.5-23.7 2.9-33.8L223.3 256l155-184.6z">
|
||
</path>
|
||
</svg>
|
||
</button>
|
||
</butto>
|
||
</div>
|
||
<div style="z-index: 5001" class="flex flex-col justify-between gap-3 py-3 h-full">
|
||
<div class="h-full w-full overflow-auto no-scrollbar">
|
||
<div class="flex items-center gap-3 sticky top-0 bg-gray-50 z-50 pb-4">
|
||
<button
|
||
@click="changeActiveTab('latest')"
|
||
:class="{'bg-blue-100 text-blue-600': activeTab == 'latest', 'bg-gray-100 hover:bg-gray-200': activeTab != 'latest'}"
|
||
class="rounded-md transition-colors font-semibold duration-200 py-1 px-3 text-[14px] flex items-center gap-2 h-10 text-[16px]">
|
||
جدیدترینها
|
||
<div x-ref="lottieIcon" class="w-14 h-14"></div>
|
||
</button>
|
||
<button
|
||
@click="changeActiveTab('hotest')"
|
||
:class="{'bg-blue-100 text-blue-600': activeTab == 'hotest', 'bg-gray-100 hover:bg-gray-200': activeTab != 'hotest'}"
|
||
class="rounded-md transition-colors font-semibold duration-200 py-1 px-3 text-[14px] flex items-center gap-2 h-10 text-[16px]">
|
||
داغترینها
|
||
<div x-ref="lottieIcon2" class="w-[1.7rem] h-[1.7rem]"></div>
|
||
</button>
|
||
</div>
|
||
@php
|
||
$routeTemplate = route('detail', ['slug' => '__SLUG__']).'/';
|
||
$catRoute = route('CategoryBlog.index', ['slug' => '__SLUG__']).'/';
|
||
@endphp
|
||
{{-- <div class="mt-4" x-show="!loadingFetch && fetchedItems.length > 0">--}}
|
||
{{-- <div class="w-full h-full grid grid-cols-1">--}}
|
||
{{-- <template x-for="item in fetchedItems" :key="item.id">--}}
|
||
{{-- <div class="col-span-1 flex items-center gap-4 p-2 h-[100px]">--}}
|
||
{{-- <a :href="getDetailUrl(item.slug)" wire:navigate class="relative w-[100px] h-[80px]">--}}
|
||
{{-- <img class="w-[100px] h-[80px] border rounded-xl" :src="getImageUrl(item.image)" :alt="item.subject">--}}
|
||
{{-- </a>--}}
|
||
{{-- <div class="flex flex-col gap-2 h-full justify-between w-[73%]">--}}
|
||
{{-- <a style="line-height:28px" :href="getDetailUrl(item.slug)" x-text="item.subject" wire:navigate class="text-[#005eb9] text-start font-bold text-[14px]">--}}
|
||
|
||
{{-- </a>--}}
|
||
{{-- <div x-text="item.published_at" class="text-xs text-gray-400 flex flex-col justify-center text-[12px]">--}}
|
||
{{-- --}}{{-- {{ jdate($item->published_at)->ago() }}--}}
|
||
{{-- </div>--}}
|
||
{{-- </div>--}}
|
||
{{-- </div>--}}
|
||
{{-- </template>--}}
|
||
{{-- </div>--}}
|
||
{{-- </div>--}}
|
||
<div class="flex flex-col"
|
||
x-show="!loadingFetch && fetchedItems.length > 0"
|
||
{{-- x-init="--}}
|
||
{{-- calculateVisibleItems();--}}
|
||
{{-- if (!window.__resizeBound) {--}}
|
||
{{-- window.addEventListener('resize', () => calculateVisibleItems());--}}
|
||
{{-- window.__resizeBound = true;--}}
|
||
{{-- }--}}
|
||
{{-- "--}}
|
||
{{-- x-ref="listContainer"--}}>
|
||
<template x-for="item in fetchedItems" :key="item.id">
|
||
<div class="col-span-1 flex items-center gap-4 py-2 px-0 h-[100px]">
|
||
<a :href="getDetailUrl(item.slug)" wire:navigate class="relative w-[100px] h-[80px]">
|
||
<img class="w-[100px] h-[80px] border rounded-xl" :src="getImageUrl(item.image)" :alt="item.subject">
|
||
</a>
|
||
<div class="flex flex-col h-full justify-between w-[73%]">
|
||
<a style="line-height:28px" :href="getDetailUrl(item.slug)" x-text="item.subject" wire:navigate class="text-[#005eb9] text-start font-bold text-[14px]"></a>
|
||
<div x-text="item.published_at" class="text-xs text-gray-400 flex flex-col justify-center text-[12px] mb-[7px]"></div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
</div>
|
||
<div x-show="loadingFetch" class="grid grid-cols-1 gap-4">
|
||
<div class="col-span-1 flex items-center gap-4 py-2 px-0 h-[100px] rounded-lg animate-pulse">
|
||
<div class="w-[100px] h-[80px] bg-gray-200 rounded-xl"></div>
|
||
<div class="flex flex-col gap-2 h-full justify-between w-[73%]">
|
||
<div class="h-4 bg-gray-200 rounded w-full"></div>
|
||
<div class="h-3 bg-gray-200 rounded w-1/2 mb-[7px]"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-span-1 flex items-center gap-4 py-2 px-0 h-[100px] rounded-lg animate-pulse">
|
||
<div class="w-[100px] h-[80px] bg-gray-200 rounded-xl"></div>
|
||
<div class="flex flex-col gap-2 h-full justify-between w-[73%]">
|
||
<div class="h-4 bg-gray-200 rounded w-full"></div>
|
||
<div class="h-3 bg-gray-200 rounded w-1/2 mb-[7px]"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div x-show="loadingFetch" class="grid grid-cols-1 gap-4">
|
||
<div class="col-span-1 flex items-center gap-4 py-2 px-0 h-[100px] rounded-lg animate-pulse">
|
||
<div class="w-[100px] h-[80px] bg-gray-200 rounded-xl"></div>
|
||
<div class="flex flex-col gap-2 h-full justify-between w-[73%]">
|
||
<div class="h-4 bg-gray-200 rounded w-full"></div>
|
||
<div class="h-3 bg-gray-200 rounded w-1/2 mb-[7px]"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-span-1 flex items-center gap-4 py-2 px-0 h-[100px] rounded-lg animate-pulse">
|
||
<div class="w-[100px] h-[80px] bg-gray-200 rounded-xl"></div>
|
||
<div class="flex flex-col gap-2 h-full justify-between w-[73%]">
|
||
<div class="h-4 bg-gray-200 rounded w-full"></div>
|
||
<div class="h-3 bg-gray-200 rounded w-1/2 mb-[7px]"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Show More Button -->
|
||
<div x-show="!loadingFetch && fetchedItems.length > 0" class="flex justify-center mb-8">
|
||
{{-- <button @click="redirectToMore()" class="text-sm text-blue-600 underline">مشاهده همه</button>--}}
|
||
<a :href="showAllCat()" wire:navigate
|
||
class="w-full p-3 rounded-xl text-center border border-black text-black">
|
||
مشاهده همه
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="visible relative z-10 mx-auto flex max-w-5xl flex-col items-center mt-8 px-4 lg:flex-col lg:justify-between">
|
||
<div class="w-full mb-12">
|
||
<div class="mb-4 border-b align-items-center justify-between flex">
|
||
<h2 class="inline-block text-[18px] pb-2 border-b-2 rounded-t-lg text-[#0075e7] border-[#0075e7]">مطالب</h2>
|
||
{{-- <div dir="ltr" class="md:block hidden relative h-[40px] w-[700px] mb-2 overflow-hidden">--}}
|
||
{{-- <div x-data="magsSlider" class="h-full">--}}
|
||
{{-- <a x-show="!isCollapsed"--}}
|
||
{{-- x-transition:enter="transition ease-out duration-300"--}}
|
||
{{-- x-transition:enter-start="-translate-x-full"--}}
|
||
{{-- x-transition:enter-end="translate-x-0"--}}
|
||
{{-- x-transition:leave="transition ease-in duration-300"--}}
|
||
{{-- x-transition:leave-start="translate-x-0"--}}
|
||
{{-- x-transition:leave-end="-translate-x-full"--}}
|
||
{{-- :href="currentMagLink"--}}
|
||
{{-- style="width:max-content"--}}
|
||
{{-- class="absolute h-[40px] flex items-center gap-2 px-2 py-2 rounded-md shadow text-start bg-[#fee5db]">--}}
|
||
{{-- <p dir="rtl" class="text-[#eb7425] text-sm p-0 m-0" x-text="currentMagSubject"></p>--}}
|
||
{{-- <svg xmlns="http://www.w3.org/2000/svg" fill="#eb7425" width="24px" height="24px" viewBox="-80 0 512 512"><path d="M176 80c-52.94 0-96 43.06-96 96 0 8.84 7.16 16 16 16s16-7.16 16-16c0-35.3 28.72-64 64-64 8.84 0 16-7.16 16-16s-7.16-16-16-16zM96.06 459.17c0 3.15.93 6.22 2.68 8.84l24.51 36.84c2.97 4.46 7.97 7.14 13.32 7.14h78.85c5.36 0 10.36-2.68 13.32-7.14l24.51-36.84c1.74-2.62 2.67-5.7 2.68-8.84l.05-43.18H96.02l.04 43.18zM176 0C73.72 0 0 82.97 0 176c0 44.37 16.45 84.85 43.56 115.78 16.64 18.99 42.74 58.8 52.42 92.16v.06h48v-.12c-.01-4.77-.72-9.51-2.15-14.07-5.59-17.81-22.82-64.77-62.17-109.67-20.54-23.43-31.52-53.15-31.61-84.14-.2-73.64 59.67-128 127.95-128 70.58 0 128 57.42 128 128 0 30.97-11.24 60.85-31.65 84.14-39.11 44.61-56.42 91.47-62.1 109.46a47.507 47.507 0 0 0-2.22 14.3v.1h48v-.05c9.68-33.37 35.78-73.18 52.42-92.16C335.55 260.85 352 220.37 352 176 352 78.8 273.2 0 176 0z"/></svg>--}}
|
||
{{-- </a>--}}
|
||
{{-- <div x-show="isCollapsed"--}}
|
||
{{-- x-transition:enter="transition ease-out duration-300"--}}
|
||
{{-- x-transition:leave="transition ease-in duration-300"--}}
|
||
{{-- class="absolute h-[40px] flex items-center gap-2 px-1 py-2 rounded-l-md shadow text-start bg-[#fee5db]"--}}
|
||
{{-- style="width: 2px; left: 0;">--}}
|
||
{{-- </div>--}}
|
||
{{-- </div>--}}
|
||
{{-- </div>--}}
|
||
</div>
|
||
|
||
<div class="flex items-center gap-2 overflow-scroll md:overflow-hidden no-scrollbar md:flex-wrap mb-4">
|
||
<button wire:click="resetCategory('posts')"
|
||
class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap"
|
||
:class="{
|
||
'bg-blue-100 text-blue-600': !$wire.selectedCategoryPosts,
|
||
'bg-gray-100 hover:bg-gray-200': $wire.selectedCategoryPosts
|
||
}">
|
||
آخرین مطالب
|
||
</button>
|
||
@foreach ($categories->sortByDesc('priority') as $item)
|
||
@if (count($item->blogs()->where('status', 1)->get()) > 0)
|
||
<button wire:click="selectCategory({{ $item->id }}, 'posts')"
|
||
class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap"
|
||
:class="{
|
||
'bg-blue-100 text-blue-600': $wire.selectedCategoryPosts == {{ $item->id }},
|
||
'bg-gray-100 hover:bg-gray-200': $wire.selectedCategoryPosts != {{ $item->id }}
|
||
}">
|
||
{{ $item->title }}
|
||
</button>
|
||
@endif
|
||
@endforeach
|
||
<a class="rounded-md transition-colors duration-200 py-1 px-3 font-semibold text-[16px] mr-auto bg-gray-100 hover:bg-gray-200 hidden md:block"
|
||
href="{{ isset($selectedRoutePosts) ? $selectedRoutePosts : route('CategoryBlog.index', ['slug' => 'all']) . '/' }}" wire:navigate>مشاهده
|
||
همه</a>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 justify-between gap-5 my-4 lg:my-8">
|
||
@if($selectedCategoryPosts)
|
||
@foreach($this->getCategoryItems($selectedCategoryPosts, 'posts') as $blog)
|
||
<div wire:loading.remove wire:target="selectCategory" class="loading-pulse2 w-full justify-between md:justify-normal flex items-center px-2 py-2 md:py-0 md:px-0 flex-row-reverse md:flex-col gap-2 border-b md:border md:rounded-xl md:bg-[#F3F4F6] md:shadow">
|
||
<a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate class="relative w-[80px] md:w-full">
|
||
<div x-data="{
|
||
loaded: false,
|
||
init() {
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting && !this.loaded) {
|
||
const img = new Image();
|
||
img.src = '{{ env('APP_URL_IMAGE').'images/'.$blog->image }}';
|
||
img.onload = () => {
|
||
this.loaded = true;
|
||
observer.unobserve(this.$el);
|
||
};
|
||
}
|
||
});
|
||
}, { rootMargin: '200px' });
|
||
observer.observe(this.$el);
|
||
}
|
||
}" class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none bg-gray-200 flex items-center justify-center">
|
||
<img x-cloak x-show="loaded"
|
||
x-transition:enter="transition ease-out duration-300"
|
||
x-transition:enter-start="opacity-0"
|
||
x-transition:enter-end="opacity-100"
|
||
:src="'{{ env('APP_URL_IMAGE').'images/'.$blog->image }}'"
|
||
alt="{{ $blog->subject }}"
|
||
class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none"
|
||
loading="lazy">
|
||
</div>
|
||
</a>
|
||
<div class="flex md:w-full justify-start w-[73%] md:justify-normal flex-col gap-2 h-full md:p-4">
|
||
<a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate class="text-[#005eb9] text-[14px] md:text-[16px] font-bold">
|
||
{!! $blog->subject !!}
|
||
</a>
|
||
<div class="md:block hidden text-[#16205b]">
|
||
@php
|
||
$preview = Str::limit($blog->preview, 80, '...');
|
||
@endphp
|
||
{!! $preview !!}
|
||
</div>
|
||
<div class="flex gap-1 text-white md:mt-auto">
|
||
<div class="hidden md:flex flex-col justify-center">
|
||
<img class="bg-cover bg-center rounded-full size-8" src="{{ env('APP_URL_IMAGE').'images/static/'.$blog->user->picture }}" alt="">
|
||
</div>
|
||
<div class="flex items-center justify-between w-full flex-wrap">
|
||
<div class="flex items-center gap-1">
|
||
<div class="text-xs text-gray-600 hidden md:flex flex-col justify-center">
|
||
{{ $blog->user->full_name }}
|
||
</div>
|
||
<span style="font-variation-settings: 'wght' 500;"
|
||
class="text-xs text-[#A0A4BC] hidden md:flex flex-col justify-center">|</span>
|
||
<div class="text-xs text-gray-600 flex flex-col justify-center">
|
||
{{ jalaliDate($blog->published_at, '%d %B، %Y') }}
|
||
</div>
|
||
</div>
|
||
<div class="text-xs text-gray-600 flex items-center gap-1">
|
||
<svg class="w-3 h-3 stroke-[20px] fill-gray-600" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||
<path d="M430.972,511.871h-10.999c-7.142-2.466-13.451-6.138-18.729-11.711-6.527-6.891-13.598-13.272-20.021-20.253-3.006-3.267-5.237-3.134-8.84-1.088-28.127,15.97-58.257,25.77-90.473,29.319-47.013,5.179-91.431-3.412-133.616-24.417-4.587-2.284-9.583-7.067-13.578-6.325-4.372,.812-7.779,6.72-11.649,10.361-9.586,9.019-17.429,20.289-31.052,24.113h-10.999c-8.202-2.712-15.535-6.634-20.261-14.296-7.688-12.465-5.856-27.038,5.095-38.358,6.698-6.924,13.639-13.613,20.464-20.399C-10.549,340.462-.476,184.709,95.021,96.924c89.903-82.643,229.862-83.648,320.705-.831,45.2,41.207,71.314,92.614,76.822,153.495,6.584,72.768-16.736,135.633-67.656,189.955,1.708,1.156,3.598,2.055,4.997,3.447,6.49,6.46,13.324,12.659,19.129,19.699,8.158,9.893,9.058,21.088,3.402,32.701-4.413,9.062-12.424,13.427-21.449,16.48ZM80.649,256.827c6.65,0,13.342-.58,19.865,.215,3.998,.487,8.445,2.281,11.433,4.915,4.574,4.03,5.346,9.864,3.002,15.643-2.322,5.725-6.668,9.209-12.927,9.446-7.09,.269-14.198,.062-21.344,.062,6.497,90.251,84.175,156.516,160.193,159.907,0-6.988-.24-13.969,.069-20.926,.296-6.655,3.997-11.126,10.273-13.342,5.863-2.07,12.72-.593,16.136,4.561,2.156,3.253,3.324,7.549,3.709,11.497,.6,6.157,.159,12.416,.159,18.676,93.711-8.127,156.121-86.508,159.881-160.355-6.981,0-13.949,.24-20.892-.064-7.73-.338-13.564-6.15-14.21-13.544-.784-8.975,5.554-16.312,14.685-16.616,6.889-.229,13.791-.045,20.734-.045-7.275-89.982-82.342-155.346-160.307-160.017,0,6.973,.225,13.926-.057,20.859-.353,8.684-7.279,14.722-15.937,14.332-7.841-.353-13.932-6.397-14.226-14.576-.247-6.889-.051-13.795-.051-20.737-84.691,6.171-154.306,76.702-160.19,160.109Z" />
|
||
<path d="M317.727,21.635c35.238-27.229,91.729-31.059,133.974,2.822,41.268,33.097,50.437,87.812,32.775,127.807-37.143-67.069-92.524-110.581-166.749-130.629Z" />
|
||
<path d="M194.322,21.62C120.136,41.616,64.83,85.023,27.787,151.768c-14.977-29.145-13.64-83.098,24.228-119.983C94.052-9.162,155.466-8.002,194.322,21.62Z" />
|
||
<path d="M318.68,294.953c-8.33,0-16.662,.116-24.988-.063-2.918-.063-4.789,.78-6.712,3.106-11.939,14.448-32.667,18.701-48.849,10.269-17.717-9.231-25.978-27.547-21.312-46.475,.529-2.148-.168-5.249-1.459-7.096-15.363-21.964-30.993-43.741-46.453-65.638-8.537-12.091-6.535-26.283,4.579-33.894,9.341-6.397,21.933-5.138,29.529,3.365,3.643,4.078,6.677,8.712,9.862,13.184,13.136,18.442,26.28,36.879,39.275,55.421,2.076,2.962,4.251,4.494,8.032,4.748,10.643,.717,19.487,5.564,26.308,13.63,2.329,2.754,4.59,3.613,8.017,3.581,16.491-.157,32.988-.267,49.476-.008,16.712,.263,27.444,15.387,22.095,30.665-3.146,8.987-11.38,14.945-21.414,15.146-8.659,.174-17.325,.036-25.987,.036v.022Z" />
|
||
</svg>
|
||
<span class="text-nowrap text-xs text-gray-600 mt-[2px]" lang="fa">{{ convertEnglishToPersianNumber($blog->reed_time) }} دقیقه</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@endforeach
|
||
|
||
<div wire:loading wire:target="selectCategory" class="grid grid-cols-1 w-full gap-4 block md:hidden loading-pulse">
|
||
<div class="col-span-1 flex items-center gap-4 p-2 h-[100px] rounded-lg animate-pulse justify-between">
|
||
<div class="flex flex-col gap-2 h-full justify-between w-[73%]">
|
||
<div class="h-4 bg-gray-200 rounded w-full"></div>
|
||
<div class="h-3 bg-gray-200 rounded w-1/2"></div>
|
||
</div>
|
||
<div class="w-[80px] h-[80px] bg-gray-200 rounded-xl"></div>
|
||
</div>
|
||
|
||
<div class="col-span-1 flex items-center gap-4 p-2 h-[100px] rounded-lg animate-pulse justify-between">
|
||
<div class="flex flex-col gap-2 h-full justify-between w-[73%]">
|
||
<div class="h-4 bg-gray-200 rounded w-full"></div>
|
||
<div class="h-3 bg-gray-200 rounded w-1/2"></div>
|
||
</div>
|
||
<div class="w-[80px] h-[80px] bg-gray-200 rounded-xl"></div>
|
||
</div>
|
||
</div>
|
||
<div wire:loading wire:target="selectCategory" class="grid grid-cols-1 w-full gap-4 block md:hidden loading-pulse">
|
||
<div class="col-span-1 flex items-center gap-4 p-2 h-[100px] rounded-lg animate-pulse justify-between">
|
||
<div class="flex flex-col gap-2 h-full justify-between w-[73%]">
|
||
<div class="h-4 bg-gray-200 rounded w-full"></div>
|
||
<div class="h-3 bg-gray-200 rounded w-1/2"></div>
|
||
</div>
|
||
<div class="w-[80px] h-[80px] bg-gray-200 rounded-xl"></div>
|
||
</div>
|
||
|
||
<div class="col-span-1 flex items-center gap-4 p-2 h-[100px] rounded-lg animate-pulse justify-between">
|
||
<div class="flex flex-col gap-2 h-full justify-between w-[73%]">
|
||
<div class="h-4 bg-gray-200 rounded w-full"></div>
|
||
<div class="h-3 bg-gray-200 rounded w-1/2"></div>
|
||
</div>
|
||
<div class="w-[80px] h-[80px] bg-gray-200 rounded-xl"></div>
|
||
</div>
|
||
</div>
|
||
@else
|
||
@foreach ($lastNewsPosts as $blog)
|
||
<div wire:loading.remove wire:target="selectCategory,resetCategory" class="loading-pulse2 w-full justify-between md:justify-normal flex items-center px-2 py-2 md:py-0 md:px-0 flex-row-reverse md:flex-col gap-2 border-b md:border md:rounded-xl md:bg-[#F3F4F6] md:shadow">
|
||
<a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate class="relative w-[80px] md:w-full">
|
||
<div x-data="{
|
||
loaded: false,
|
||
init() {
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting && !this.loaded) {
|
||
const img = new Image();
|
||
img.src = '{{ env('APP_URL_IMAGE').'images/'.$blog->image }}';
|
||
img.onload = () => {
|
||
this.loaded = true;
|
||
observer.unobserve(this.$el);
|
||
};
|
||
}
|
||
});
|
||
}, { rootMargin: '200px' });
|
||
observer.observe(this.$el);
|
||
}
|
||
}" class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none bg-gray-200 flex items-center justify-center">
|
||
<img x-cloak x-show="loaded"
|
||
x-transition:enter="transition ease-out duration-300"
|
||
x-transition:enter-start="opacity-0"
|
||
x-transition:enter-end="opacity-100"
|
||
:src="'{{ env('APP_URL_IMAGE').'images/'.$blog->image }}'"
|
||
alt="{{ $blog->subject }}"
|
||
class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none"
|
||
loading="lazy">
|
||
</div>
|
||
</a>
|
||
<div class="flex md:w-full justify-start w-[73%] md:justify-normal flex-col gap-2 h-full md:p-4">
|
||
<a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate class="text-[#005eb9] text-[14px] md:text-[16px] font-bold">
|
||
{!! $blog->subject !!}
|
||
</a>
|
||
<div class="md:block hidden text-[#16205b]">
|
||
@php
|
||
$preview = Str::limit($blog->preview, 80, '...');
|
||
@endphp
|
||
{!! $preview !!}
|
||
</div>
|
||
<div class="flex gap-1 text-white md:mt-auto">
|
||
<div class="hidden md:flex flex-col justify-center">
|
||
<img class="bg-cover bg-center rounded-full size-8" src="{{ env('APP_URL_IMAGE').'images/static/'.$blog->user->picture }}" alt="">
|
||
</div>
|
||
<div class="flex items-center justify-between w-full flex-wrap">
|
||
<div class="flex items-center gap-1">
|
||
<div class="text-xs text-gray-600 hidden md:flex flex-col justify-center">
|
||
{{ $blog->user->full_name }}
|
||
</div>
|
||
<span style="font-variation-settings: 'wght' 500;"
|
||
class="text-xs text-[#A0A4BC] hidden md:flex flex-col justify-center">|</span>
|
||
<div class="text-xs text-gray-600 flex flex-col justify-center">
|
||
{{ jalaliDate($blog->published_at, '%d %B، %Y') }}
|
||
</div>
|
||
</div>
|
||
<div class="text-xs text-gray-600 flex items-center gap-1">
|
||
<svg class="w-3 h-3 stroke-[20px] fill-gray-600" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||
<path d="M430.972,511.871h-10.999c-7.142-2.466-13.451-6.138-18.729-11.711-6.527-6.891-13.598-13.272-20.021-20.253-3.006-3.267-5.237-3.134-8.84-1.088-28.127,15.97-58.257,25.77-90.473,29.319-47.013,5.179-91.431-3.412-133.616-24.417-4.587-2.284-9.583-7.067-13.578-6.325-4.372,.812-7.779,6.72-11.649,10.361-9.586,9.019-17.429,20.289-31.052,24.113h-10.999c-8.202-2.712-15.535-6.634-20.261-14.296-7.688-12.465-5.856-27.038,5.095-38.358,6.698-6.924,13.639-13.613,20.464-20.399C-10.549,340.462-.476,184.709,95.021,96.924c89.903-82.643,229.862-83.648,320.705-.831,45.2,41.207,71.314,92.614,76.822,153.495,6.584,72.768-16.736,135.633-67.656,189.955,1.708,1.156,3.598,2.055,4.997,3.447,6.49,6.46,13.324,12.659,19.129,19.699,8.158,9.893,9.058,21.088,3.402,32.701-4.413,9.062-12.424,13.427-21.449,16.48ZM80.649,256.827c6.65,0,13.342-.58,19.865,.215,3.998,.487,8.445,2.281,11.433,4.915,4.574,4.03,5.346,9.864,3.002,15.643-2.322,5.725-6.668,9.209-12.927,9.446-7.09,.269-14.198,.062-21.344,.062,6.497,90.251,84.175,156.516,160.193,159.907,0-6.988-.24-13.969,.069-20.926,.296-6.655,3.997-11.126,10.273-13.342,5.863-2.07,12.72-.593,16.136,4.561,2.156,3.253,3.324,7.549,3.709,11.497,.6,6.157,.159,12.416,.159,18.676,93.711-8.127,156.121-86.508,159.881-160.355-6.981,0-13.949,.24-20.892-.064-7.73-.338-13.564-6.15-14.21-13.544-.784-8.975,5.554-16.312,14.685-16.616,6.889-.229,13.791-.045,20.734-.045-7.275-89.982-82.342-155.346-160.307-160.017,0,6.973,.225,13.926-.057,20.859-.353,8.684-7.279,14.722-15.937,14.332-7.841-.353-13.932-6.397-14.226-14.576-.247-6.889-.051-13.795-.051-20.737-84.691,6.171-154.306,76.702-160.19,160.109Z" />
|
||
<path d="M317.727,21.635c35.238-27.229,91.729-31.059,133.974,2.822,41.268,33.097,50.437,87.812,32.775,127.807-37.143-67.069-92.524-110.581-166.749-130.629Z" />
|
||
<path d="M194.322,21.62C120.136,41.616,64.83,85.023,27.787,151.768c-14.977-29.145-13.64-83.098,24.228-119.983C94.052-9.162,155.466-8.002,194.322,21.62Z" />
|
||
<path d="M318.68,294.953c-8.33,0-16.662,.116-24.988-.063-2.918-.063-4.789,.78-6.712,3.106-11.939,14.448-32.667,18.701-48.849,10.269-17.717-9.231-25.978-27.547-21.312-46.475,.529-2.148-.168-5.249-1.459-7.096-15.363-21.964-30.993-43.741-46.453-65.638-8.537-12.091-6.535-26.283,4.579-33.894,9.341-6.397,21.933-5.138,29.529,3.365,3.643,4.078,6.677,8.712,9.862,13.184,13.136,18.442,26.28,36.879,39.275,55.421,2.076,2.962,4.251,4.494,8.032,4.748,10.643,.717,19.487,5.564,26.308,13.63,2.329,2.754,4.59,3.613,8.017,3.581,16.491-.157,32.988-.267,49.476-.008,16.712,.263,27.444,15.387,22.095,30.665-3.146,8.987-11.38,14.945-21.414,15.146-8.659,.174-17.325,.036-25.987,.036v.022Z" />
|
||
</svg>
|
||
<span class="text-nowrap text-xs text-gray-600 mt-[2px]" lang="fa">{{ convertEnglishToPersianNumber($blog->reed_time) }} دقیقه</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@endforeach
|
||
|
||
<div wire:loading wire:target="selectCategory,resetCategory" class="grid grid-cols-1 w-full gap-4 block md:hidden loading-pulse">
|
||
<div class="col-span-1 flex items-center gap-4 p-2 h-[100px] rounded-lg animate-pulse justify-between">
|
||
<div class="flex flex-col gap-2 h-full justify-between w-[73%]">
|
||
<div class="h-4 bg-gray-200 rounded w-full"></div>
|
||
<div class="h-3 bg-gray-200 rounded w-1/2"></div>
|
||
</div>
|
||
<div class="w-[80px] h-[80px] bg-gray-200 rounded-xl"></div>
|
||
</div>
|
||
|
||
<div class="col-span-1 flex items-center gap-4 p-2 h-[100px] rounded-lg animate-pulse justify-between">
|
||
<div class="flex flex-col gap-2 h-full justify-between w-[73%]">
|
||
<div class="h-4 bg-gray-200 rounded w-full"></div>
|
||
<div class="h-3 bg-gray-200 rounded w-1/2"></div>
|
||
</div>
|
||
<div class="w-[80px] h-[80px] bg-gray-200 rounded-xl"></div>
|
||
</div>
|
||
</div>
|
||
<div wire:loading wire:target="selectCategory,resetCategory" class="grid grid-cols-1 w-full gap-4 block md:hidden loading-pulse">
|
||
<div class="col-span-1 flex items-center gap-4 p-2 h-[100px] rounded-lg animate-pulse justify-between">
|
||
<div class="flex flex-col gap-2 h-full justify-between w-[73%]">
|
||
<div class="h-4 bg-gray-200 rounded w-full"></div>
|
||
<div class="h-3 bg-gray-200 rounded w-1/2"></div>
|
||
</div>
|
||
<div class="w-[80px] h-[80px] bg-gray-200 rounded-xl"></div>
|
||
</div>
|
||
|
||
<div class="col-span-1 flex items-center gap-4 p-2 h-[100px] rounded-lg animate-pulse justify-between">
|
||
<div class="flex flex-col gap-2 h-full justify-between w-[73%]">
|
||
<div class="h-4 bg-gray-200 rounded w-full"></div>
|
||
<div class="h-3 bg-gray-200 rounded w-1/2"></div>
|
||
</div>
|
||
<div class="w-[80px] h-[80px] bg-gray-200 rounded-xl"></div>
|
||
</div>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
|
||
<div class="md:hidden block">
|
||
@if ($selectedCategoryPosts)
|
||
@foreach ($categories as $item)
|
||
@if (count($item->blogs()->where('status', 1)->get()) > 0 && $selectedCategoryPosts == $item->id)
|
||
<a href="{{ route('CategoryBlog.index', ['slug' => $item->slug]) . '/' }}" wire:navigate class="w-full p-3 md:hidden block mb-6 rounded-xl text-center border border-[#084642] text-[#084642]">مشاهده مطالب بیشتر</a>
|
||
@endif
|
||
@endforeach
|
||
@else
|
||
<a href="{{ route('CategoryBlog.index', ['slug' => 'all']) . '/' }}" wire:navigate class="w-full p-3 md:hidden block mb-6 rounded-xl text-center border border-[#084642] text-[#084642]">مشاهده مطالب بیشتر</a>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
|
||
<div class="w-full">
|
||
<div class="mb-4 border-b align-items-center justify-between flex">
|
||
<h2 class="inline-block text-[18px] pb-2 border-b-2 rounded-t-lg text-[#0075e7] border-[#0075e7]">اخبار</h2>
|
||
{{-- <div dir="ltr" class="md:block hidden relative h-[40px] w-[700px] mb-2 overflow-hidden">--}}
|
||
{{-- <div x-data="newsSlider" class="h-full">--}}
|
||
{{-- <a x-show="!isCollapsed"--}}
|
||
{{-- x-transition:enter="transition ease-out duration-300"--}}
|
||
{{-- x-transition:enter-start="-translate-x-full"--}}
|
||
{{-- x-transition:enter-end="translate-x-0"--}}
|
||
{{-- x-transition:leave="transition ease-in duration-300"--}}
|
||
{{-- x-transition:leave-start="translate-x-0"--}}
|
||
{{-- x-transition:leave-end="-translate-x-full"--}}
|
||
{{-- :href="currentNewsLink"--}}
|
||
{{-- style="width:max-content"--}}
|
||
{{-- class="absolute h-[40px] flex items-center gap-2 px-2 py-2 rounded-md shadow text-start bg-[#fee5db]">--}}
|
||
{{-- <p dir="rtl" class="text-[#eb7425] text-sm p-0 m-0" x-text="currentNewsSubject"></p>--}}
|
||
{{-- <svg xmlns="http://www.w3.org/2000/svg" fill="#eb7425" width="24px" height="24px" viewBox="-80 0 512 512"><path d="M176 80c-52.94 0-96 43.06-96 96 0 8.84 7.16 16 16 16s16-7.16 16-16c0-35.3 28.72-64 64-64 8.84 0 16-7.16 16-16s-7.16-16-16-16zM96.06 459.17c0 3.15.93 6.22 2.68 8.84l24.51 36.84c2.97 4.46 7.97 7.14 13.32 7.14h78.85c5.36 0 10.36-2.68 13.32-7.14l24.51-36.84c1.74-2.62 2.67-5.7 2.68-8.84l.05-43.18H96.02l.04 43.18zM176 0C73.72 0 0 82.97 0 176c0 44.37 16.45 84.85 43.56 115.78 16.64 18.99 42.74 58.8 52.42 92.16v.06h48v-.12c-.01-4.77-.72-9.51-2.15-14.07-5.59-17.81-22.82-64.77-62.17-109.67-20.54-23.43-31.52-53.15-31.61-84.14-.2-73.64 59.67-128 127.95-128 70.58 0 128 57.42 128 128 0 30.97-11.24 60.85-31.65 84.14-39.11 44.61-56.42 91.47-62.1 109.46a47.507 47.507 0 0 0-2.22 14.3v.1h48v-.05c9.68-33.37 35.78-73.18 52.42-92.16C335.55 260.85 352 220.37 352 176 352 78.8 273.2 0 176 0z"/></svg>--}}
|
||
{{-- </a>--}}
|
||
{{-- <div x-show="isCollapsed"--}}
|
||
{{-- x-transition:enter="transition ease-out duration-300"--}}
|
||
{{-- x-transition:leave="transition ease-in duration-300"--}}
|
||
{{-- class="absolute h-[40px] flex items-center gap-2 px-1 py-2 rounded-l-md shadow text-start bg-[#fee5db]"--}}
|
||
{{-- style="width: 2px; left: 0;">--}}
|
||
{{-- </div>--}}
|
||
{{-- </div>--}}
|
||
{{-- </div>--}}
|
||
</div>
|
||
<div class="flex items-center gap-2 overflow-scroll md:overflow-hidden no-scrollbar md:flex-wrap mb-4">
|
||
<button wire:click="resetCategoryNews('news')"
|
||
class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap"
|
||
:class="{
|
||
'bg-blue-100 text-blue-600': !$wire.selectedCategoryNews,
|
||
'bg-gray-100 hover:bg-gray-200': $wire.selectedCategoryNews
|
||
}">
|
||
آخرین اخبار
|
||
</button>
|
||
@foreach ($categorieNews->sortByDesc('priority') as $item)
|
||
@if (!is_null($item->parent_id))
|
||
@php
|
||
$parent = App\Models\Category::where('id', $item->parent_id)->first();
|
||
@endphp
|
||
<button wire:click="selectCategoryNews({{ $item->id }}, 'news')"
|
||
class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap"
|
||
:class="{
|
||
'bg-blue-100 text-blue-600': $wire.selectedCategoryNews == {{ $item->id }},
|
||
'bg-gray-100 hover:bg-gray-200': $wire.selectedCategoryNews != {{ $item->id }}
|
||
}">
|
||
{{ $parent->title }} {{ $item->title }}
|
||
</button>
|
||
@endif
|
||
@endforeach
|
||
<a class="rounded-md transition-colors duration-200 py-1 px-3 font-semibold text-[16px] mr-auto bg-gray-100 hover:bg-gray-200 hidden md:block"
|
||
href="{{ isset($selectedRouteNews) ? $selectedRouteNews : route('CategoryBlog.index', ['slug' => 'news']) . '/' }}" wire:navigate>مشاهده
|
||
همه</a>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 justify-between gap-5 my-4 lg:my-8">
|
||
@if($selectedCategoryNews)
|
||
@foreach($this->getCategoryItems($selectedCategoryNews, 'news') as $blog)
|
||
<div wire:loading.remove wire:target="selectCategoryNews" class="loading-pulse2 w-full justify-between md:justify-normal flex items-center px-2 py-2 md:py-0 md:px-0 flex-row-reverse md:flex-col gap-2 border-b md:border md:rounded-xl md:bg-[#F3F4F6] md:shadow">
|
||
<a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate class="relative w-[80px] md:w-full">
|
||
<div x-data="{
|
||
loaded: false,
|
||
init() {
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting && !this.loaded) {
|
||
const img = new Image();
|
||
img.src = '{{ env('APP_URL_IMAGE').'images/'.$blog->image }}';
|
||
img.onload = () => {
|
||
this.loaded = true;
|
||
observer.unobserve(this.$el);
|
||
};
|
||
}
|
||
});
|
||
}, { rootMargin: '200px' });
|
||
observer.observe(this.$el);
|
||
}
|
||
}" class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none bg-gray-200 flex items-center justify-center">
|
||
<img x-cloak x-show="loaded"
|
||
x-transition:enter="transition ease-out duration-300"
|
||
x-transition:enter-start="opacity-0"
|
||
x-transition:enter-end="opacity-100"
|
||
:src="'{{ env('APP_URL_IMAGE').'images/'.$blog->image }}'"
|
||
alt="{{ $blog->subject }}"
|
||
class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none"
|
||
loading="lazy">
|
||
</div>
|
||
</a>
|
||
<div class="flex md:w-full justify-start w-[73%] md:justify-normal flex-col gap-2 h-full md:p-4">
|
||
<a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate class="text-[#005eb9] text-[14px] md:text-[16px] font-bold">
|
||
{!! $blog->subject !!}
|
||
</a>
|
||
<div class="md:block hidden text-[#16205b]">
|
||
@php
|
||
$preview = Str::limit($blog->preview, 80, '...');
|
||
@endphp
|
||
{!! $preview !!}
|
||
</div>
|
||
<div class="flex gap-1 text-white md:mt-auto">
|
||
<div class="hidden md:flex flex-col justify-center">
|
||
<img class="bg-cover bg-center rounded-full size-8" src="{{ env('APP_URL_IMAGE').'images/static/'.$blog->user->picture }}" alt="">
|
||
</div>
|
||
<div class="flex items-center justify-between w-full flex-wrap">
|
||
<div class="flex items-center gap-1">
|
||
<div class="text-xs text-gray-600 hidden md:flex flex-col justify-center">
|
||
{{ $blog->user->full_name }}
|
||
</div>
|
||
<span style="font-variation-settings: 'wght' 500;"
|
||
class="text-xs text-[#A0A4BC] hidden md:flex flex-col justify-center">|</span>
|
||
<div class="text-xs text-gray-600 flex flex-col justify-center">
|
||
{{ jalaliDate($blog->published_at, '%d %B، %Y') }}
|
||
</div>
|
||
</div>
|
||
<div class="text-xs text-gray-600 flex items-center gap-1">
|
||
<svg class="w-3 h-3 stroke-[20px] fill-gray-600" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||
<path d="M430.972,511.871h-10.999c-7.142-2.466-13.451-6.138-18.729-11.711-6.527-6.891-13.598-13.272-20.021-20.253-3.006-3.267-5.237-3.134-8.84-1.088-28.127,15.97-58.257,25.77-90.473,29.319-47.013,5.179-91.431-3.412-133.616-24.417-4.587-2.284-9.583-7.067-13.578-6.325-4.372,.812-7.779,6.72-11.649,10.361-9.586,9.019-17.429,20.289-31.052,24.113h-10.999c-8.202-2.712-15.535-6.634-20.261-14.296-7.688-12.465-5.856-27.038,5.095-38.358,6.698-6.924,13.639-13.613,20.464-20.399C-10.549,340.462-.476,184.709,95.021,96.924c89.903-82.643,229.862-83.648,320.705-.831,45.2,41.207,71.314,92.614,76.822,153.495,6.584,72.768-16.736,135.633-67.656,189.955,1.708,1.156,3.598,2.055,4.997,3.447,6.49,6.46,13.324,12.659,19.129,19.699,8.158,9.893,9.058,21.088,3.402,32.701-4.413,9.062-12.424,13.427-21.449,16.48ZM80.649,256.827c6.65,0,13.342-.58,19.865,.215,3.998,.487,8.445,2.281,11.433,4.915,4.574,4.03,5.346,9.864,3.002,15.643-2.322,5.725-6.668,9.209-12.927,9.446-7.09,.269-14.198,.062-21.344,.062,6.497,90.251,84.175,156.516,160.193,159.907,0-6.988-.24-13.969,.069-20.926,.296-6.655,3.997-11.126,10.273-13.342,5.863-2.07,12.72-.593,16.136,4.561,2.156,3.253,3.324,7.549,3.709,11.497,.6,6.157,.159,12.416,.159,18.676,93.711-8.127,156.121-86.508,159.881-160.355-6.981,0-13.949,.24-20.892-.064-7.73-.338-13.564-6.15-14.21-13.544-.784-8.975,5.554-16.312,14.685-16.616,6.889-.229,13.791-.045,20.734-.045-7.275-89.982-82.342-155.346-160.307-160.017,0,6.973,.225,13.926-.057,20.859-.353,8.684-7.279,14.722-15.937,14.332-7.841-.353-13.932-6.397-14.226-14.576-.247-6.889-.051-13.795-.051-20.737-84.691,6.171-154.306,76.702-160.19,160.109Z" />
|
||
<path d="M317.727,21.635c35.238-27.229,91.729-31.059,133.974,2.822,41.268,33.097,50.437,87.812,32.775,127.807-37.143-67.069-92.524-110.581-166.749-130.629Z" />
|
||
<path d="M194.322,21.62C120.136,41.616,64.83,85.023,27.787,151.768c-14.977-29.145-13.64-83.098,24.228-119.983C94.052-9.162,155.466-8.002,194.322,21.62Z" />
|
||
<path d="M318.68,294.953c-8.33,0-16.662,.116-24.988-.063-2.918-.063-4.789,.78-6.712,3.106-11.939,14.448-32.667,18.701-48.849,10.269-17.717-9.231-25.978-27.547-21.312-46.475,.529-2.148-.168-5.249-1.459-7.096-15.363-21.964-30.993-43.741-46.453-65.638-8.537-12.091-6.535-26.283,4.579-33.894,9.341-6.397,21.933-5.138,29.529,3.365,3.643,4.078,6.677,8.712,9.862,13.184,13.136,18.442,26.28,36.879,39.275,55.421,2.076,2.962,4.251,4.494,8.032,4.748,10.643,.717,19.487,5.564,26.308,13.63,2.329,2.754,4.59,3.613,8.017,3.581,16.491-.157,32.988-.267,49.476-.008,16.712,.263,27.444,15.387,22.095,30.665-3.146,8.987-11.38,14.945-21.414,15.146-8.659,.174-17.325,.036-25.987,.036v.022Z" />
|
||
</svg>
|
||
<span class="text-nowrap text-xs text-gray-600 mt-[2px]" lang="fa">{{ convertEnglishToPersianNumber($blog->reed_time) }} دقیقه</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@endforeach
|
||
<div wire:loading wire:target="selectCategoryNews" class="grid grid-cols-1 w-full gap-4 block md:hidden loading-pulse">
|
||
<div class="col-span-1 flex items-center gap-4 p-2 h-[100px] rounded-lg animate-pulse justify-between">
|
||
<div class="flex flex-col gap-2 h-full justify-between w-[73%]">
|
||
<div class="h-4 bg-gray-200 rounded w-full"></div>
|
||
<div class="h-3 bg-gray-200 rounded w-1/2"></div>
|
||
</div>
|
||
<div class="w-[80px] h-[80px] bg-gray-200 rounded-xl"></div>
|
||
</div>
|
||
|
||
<div class="col-span-1 flex items-center gap-4 p-2 h-[100px] rounded-lg animate-pulse justify-between">
|
||
<div class="flex flex-col gap-2 h-full justify-between w-[73%]">
|
||
<div class="h-4 bg-gray-200 rounded w-full"></div>
|
||
<div class="h-3 bg-gray-200 rounded w-1/2"></div>
|
||
</div>
|
||
<div class="w-[80px] h-[80px] bg-gray-200 rounded-xl"></div>
|
||
</div>
|
||
</div>
|
||
<div wire:loading wire:target="selectCategoryNews" class="grid grid-cols-1 w-full gap-4 block md:hidden loading-pulse">
|
||
<div class="col-span-1 flex items-center gap-4 p-2 h-[100px] rounded-lg animate-pulse justify-between">
|
||
<div class="flex flex-col gap-2 h-full justify-between w-[73%]">
|
||
<div class="h-4 bg-gray-200 rounded w-full"></div>
|
||
<div class="h-3 bg-gray-200 rounded w-1/2"></div>
|
||
</div>
|
||
<div class="w-[80px] h-[80px] bg-gray-200 rounded-xl"></div>
|
||
</div>
|
||
|
||
<div class="col-span-1 flex items-center gap-4 p-2 h-[100px] rounded-lg animate-pulse justify-between">
|
||
<div class="flex flex-col gap-2 h-full justify-between w-[73%]">
|
||
<div class="h-4 bg-gray-200 rounded w-full"></div>
|
||
<div class="h-3 bg-gray-200 rounded w-1/2"></div>
|
||
</div>
|
||
<div class="w-[80px] h-[80px] bg-gray-200 rounded-xl"></div>
|
||
</div>
|
||
</div>
|
||
@else
|
||
@foreach ($lastNewsArticles as $blog)
|
||
<div wire:loading.remove wire:target="selectCategoryNews,resetCategoryNews" class="loading-pulse2 w-full justify-between md:justify-normal flex items-center px-2 py-2 md:py-0 md:px-0 flex-row-reverse md:flex-col gap-2 border-b md:border md:rounded-xl md:bg-[#F3F4F6] md:shadow">
|
||
<a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate class="relative w-[80px] md:w-full">
|
||
<div x-data="{
|
||
loaded: false,
|
||
init() {
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting && !this.loaded) {
|
||
const img = new Image();
|
||
img.src = '{{ env('APP_URL_IMAGE').'images/'.$blog->image }}';
|
||
img.onload = () => {
|
||
this.loaded = true;
|
||
observer.unobserve(this.$el);
|
||
};
|
||
}
|
||
});
|
||
}, { rootMargin: '200px' });
|
||
observer.observe(this.$el);
|
||
}
|
||
}" class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none bg-gray-200 flex items-center justify-center">
|
||
<img x-cloak x-show="loaded"
|
||
x-transition:enter="transition ease-out duration-300"
|
||
x-transition:enter-start="opacity-0"
|
||
x-transition:enter-end="opacity-100"
|
||
:src="'{{ env('APP_URL_IMAGE').'images/'.$blog->image }}'"
|
||
alt="{{ $blog->subject }}"
|
||
class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none"
|
||
loading="lazy">
|
||
</div>
|
||
</a>
|
||
<div class="flex md:w-full justify-start w-[73%] md:justify-normal flex-col gap-2 h-full md:p-4">
|
||
<a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate class="text-[#005eb9] text-[14px] md:text-[16px] font-bold">
|
||
{!! $blog->subject !!}
|
||
</a>
|
||
<div class="md:block hidden text-[#16205b]">
|
||
@php
|
||
$preview = Str::limit($blog->preview, 80, '...');
|
||
@endphp
|
||
{!! $preview !!}
|
||
</div>
|
||
<div class="flex gap-1 text-white md:mt-auto">
|
||
<div class="hidden md:flex flex-col justify-center">
|
||
<img class="bg-cover bg-center rounded-full size-8" src="{{ env('APP_URL_IMAGE').'images/static/'.$blog->user->picture }}" alt="">
|
||
</div>
|
||
<div class="flex items-center justify-between w-full flex-wrap">
|
||
<div class="flex items-center gap-1">
|
||
<div class="text-xs text-gray-600 hidden md:flex flex-col justify-center">
|
||
{{ $blog->user->full_name }}
|
||
</div>
|
||
<span style="font-variation-settings: 'wght' 500;"
|
||
class="text-xs text-[#A0A4BC] hidden md:flex flex-col justify-center">|</span>
|
||
<div class="text-xs text-gray-600 flex flex-col justify-center">
|
||
{{ jalaliDate($blog->published_at, '%d %B، %Y') }}
|
||
</div>
|
||
</div>
|
||
<div class="text-xs text-gray-600 flex items-center gap-1">
|
||
<svg class="w-3 h-3 stroke-[20px] fill-gray-600" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||
<path d="M430.972,511.871h-10.999c-7.142-2.466-13.451-6.138-18.729-11.711-6.527-6.891-13.598-13.272-20.021-20.253-3.006-3.267-5.237-3.134-8.84-1.088-28.127,15.97-58.257,25.77-90.473,29.319-47.013,5.179-91.431-3.412-133.616-24.417-4.587-2.284-9.583-7.067-13.578-6.325-4.372,.812-7.779,6.72-11.649,10.361-9.586,9.019-17.429,20.289-31.052,24.113h-10.999c-8.202-2.712-15.535-6.634-20.261-14.296-7.688-12.465-5.856-27.038,5.095-38.358,6.698-6.924,13.639-13.613,20.464-20.399C-10.549,340.462-.476,184.709,95.021,96.924c89.903-82.643,229.862-83.648,320.705-.831,45.2,41.207,71.314,92.614,76.822,153.495,6.584,72.768-16.736,135.633-67.656,189.955,1.708,1.156,3.598,2.055,4.997,3.447,6.49,6.46,13.324,12.659,19.129,19.699,8.158,9.893,9.058,21.088,3.402,32.701-4.413,9.062-12.424,13.427-21.449,16.48ZM80.649,256.827c6.65,0,13.342-.58,19.865,.215,3.998,.487,8.445,2.281,11.433,4.915,4.574,4.03,5.346,9.864,3.002,15.643-2.322,5.725-6.668,9.209-12.927,9.446-7.09,.269-14.198,.062-21.344,.062,6.497,90.251,84.175,156.516,160.193,159.907,0-6.988-.24-13.969,.069-20.926,.296-6.655,3.997-11.126,10.273-13.342,5.863-2.07,12.72-.593,16.136,4.561,2.156,3.253,3.324,7.549,3.709,11.497,.6,6.157,.159,12.416,.159,18.676,93.711-8.127,156.121-86.508,159.881-160.355-6.981,0-13.949,.24-20.892-.064-7.73-.338-13.564-6.15-14.21-13.544-.784-8.975,5.554-16.312,14.685-16.616,6.889-.229,13.791-.045,20.734-.045-7.275-89.982-82.342-155.346-160.307-160.017,0,6.973,.225,13.926-.057,20.859-.353,8.684-7.279,14.722-15.937,14.332-7.841-.353-13.932-6.397-14.226-14.576-.247-6.889-.051-13.795-.051-20.737-84.691,6.171-154.306,76.702-160.19,160.109Z" />
|
||
<path d="M317.727,21.635c35.238-27.229,91.729-31.059,133.974,2.822,41.268,33.097,50.437,87.812,32.775,127.807-37.143-67.069-92.524-110.581-166.749-130.629Z" />
|
||
<path d="M194.322,21.62C120.136,41.616,64.83,85.023,27.787,151.768c-14.977-29.145-13.64-83.098,24.228-119.983C94.052-9.162,155.466-8.002,194.322,21.62Z" />
|
||
<path d="M318.68,294.953c-8.33,0-16.662,.116-24.988-.063-2.918-.063-4.789,.78-6.712,3.106-11.939,14.448-32.667,18.701-48.849,10.269-17.717-9.231-25.978-27.547-21.312-46.475,.529-2.148-.168-5.249-1.459-7.096-15.363-21.964-30.993-43.741-46.453-65.638-8.537-12.091-6.535-26.283,4.579-33.894,9.341-6.397,21.933-5.138,29.529,3.365,3.643,4.078,6.677,8.712,9.862,13.184,13.136,18.442,26.28,36.879,39.275,55.421,2.076,2.962,4.251,4.494,8.032,4.748,10.643,.717,19.487,5.564,26.308,13.63,2.329,2.754,4.59,3.613,8.017,3.581,16.491-.157,32.988-.267,49.476-.008,16.712,.263,27.444,15.387,22.095,30.665-3.146,8.987-11.38,14.945-21.414,15.146-8.659,.174-17.325,.036-25.987,.036v.022Z" />
|
||
</svg>
|
||
<span class="text-nowrap text-xs text-gray-600 mt-[2px]" lang="fa">{{ convertEnglishToPersianNumber($blog->reed_time) }} دقیقه</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@endforeach
|
||
|
||
<div wire:loading wire:target="selectCategoryNews,resetCategoryNews" class="grid grid-cols-1 w-full gap-4 block md:hidden loading-pulse">
|
||
<div class="col-span-1 flex items-center gap-4 p-2 h-[100px] rounded-lg animate-pulse justify-between">
|
||
<div class="flex flex-col gap-2 h-full justify-between w-[73%]">
|
||
<div class="h-4 bg-gray-200 rounded w-full"></div>
|
||
<div class="h-3 bg-gray-200 rounded w-1/2"></div>
|
||
</div>
|
||
<div class="w-[80px] h-[80px] bg-gray-200 rounded-xl"></div>
|
||
</div>
|
||
|
||
<div class="col-span-1 flex items-center gap-4 p-2 h-[100px] rounded-lg animate-pulse justify-between">
|
||
<div class="flex flex-col gap-2 h-full justify-between w-[73%]">
|
||
<div class="h-4 bg-gray-200 rounded w-full"></div>
|
||
<div class="h-3 bg-gray-200 rounded w-1/2"></div>
|
||
</div>
|
||
<div class="w-[80px] h-[80px] bg-gray-200 rounded-xl"></div>
|
||
</div>
|
||
</div>
|
||
<div wire:loading wire:target="selectCategoryNews,resetCategoryNews" class="grid grid-cols-1 w-full gap-4 block md:hidden loading-pulse">
|
||
<div class="col-span-1 flex items-center gap-4 p-2 h-[100px] rounded-lg animate-pulse justify-between">
|
||
<div class="flex flex-col gap-2 h-full justify-between w-[73%]">
|
||
<div class="h-4 bg-gray-200 rounded w-full"></div>
|
||
<div class="h-3 bg-gray-200 rounded w-1/2"></div>
|
||
</div>
|
||
<div class="w-[80px] h-[80px] bg-gray-200 rounded-xl"></div>
|
||
</div>
|
||
|
||
<div class="col-span-1 flex items-center gap-4 p-2 h-[100px] rounded-lg animate-pulse justify-between">
|
||
<div class="flex flex-col gap-2 h-full justify-between w-[73%]">
|
||
<div class="h-4 bg-gray-200 rounded w-full"></div>
|
||
<div class="h-3 bg-gray-200 rounded w-1/2"></div>
|
||
</div>
|
||
<div class="w-[80px] h-[80px] bg-gray-200 rounded-xl"></div>
|
||
</div>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
|
||
<div class="md:hidden block">
|
||
@if ($selectedCategoryNews)
|
||
@foreach ($categorieNews as $item)
|
||
@if (!is_null($item->parent_id) && $selectedCategoryNews == $item->id)
|
||
<a href="{{ cleanRouteUrl('NewsCategory.show', ['slug' => $item->slug]) . '/' }}" wire:navigate class="w-full p-3 md:hidden block mb-6 rounded-xl text-center border border-[#084642] text-[#084642]">مشاهده اخبار بیشتر</a>
|
||
@endif
|
||
@endforeach
|
||
@else
|
||
<a href="{{ cleanRouteUrl('NewsCategory.index') . '/' }}" wire:navigate class="w-full p-3 md:hidden block mb-6 rounded-xl text-center border border-[#084642] text-[#084642]">مشاهده اخبار بیشتر</a>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
|
||
<div class="w-full">
|
||
<div class="mb-4 border-b align-items-center justify-between flex ">
|
||
<h2 class="inline-block text-[18px] pb-2 border-b-2 rounded-t-lg text-[#0075e7] border-[#0075e7] ">
|
||
بیوگرافی اشخاص</h2>
|
||
</div>
|
||
<div class="flex items-center gap-2 overflow-scroll md:overflow-hidden no-scrollbar md:flex-wrap mb-4">
|
||
<a class="rounded-md transition-colors duration-200 py-1 px-3 font-semibold text-[16px] mr-auto bg-gray-100 hover:bg-gray-200 hidden md:block"
|
||
href="{{ route('CategoryBlog.index', ['slug' => "biography"]).'/' }}" wire:navigate>مشاهده
|
||
همه</a>
|
||
</div>
|
||
<div class="w-full flex items-center overflow-scroll md:overflow-hidden no-scrollbar md:grid md:grid-cols-4 lg:grid-cols-4 xl:grid-cols-8 justify-between gap-5 my-4 lg:my-8">
|
||
<a href="#" class="aspect-[1/1.7] md:aspect-[5/8] lg:aspect-[9/15] min-w-[180px] md:min-w-full rounded-3xl transition-all duration-300 hover:grayscale cursor-pointer text-center">
|
||
<div class="bg-gray-300 rounded-3xl overflow-hidden h-full w-full mb-2">
|
||
<img
|
||
src="{{ asset('/image/persons/elon-musk.jpg') }}"
|
||
class="object-cover object-center h-full w-full rounded-3xl"
|
||
alt="ایلان ماسک"
|
||
loading="lazy" />
|
||
</div>
|
||
<span class="font-semibold text-nowrap text-xs md:text-base">ایلان ماسک</span>
|
||
</a>
|
||
<a href="#" class="aspect-[1/1.7] md:aspect-[5/8] lg:aspect-[9/15] min-w-[180px] md:min-w-full rounded-3xl transition-all duration-300 hover:grayscale cursor-pointer text-center">
|
||
<div class="bg-gray-300 rounded-3xl overflow-hidden h-full w-full mb-2">
|
||
<img
|
||
src="{{ asset('/image/persons/donald-trump.jpg') }}"
|
||
class="object-cover object-center h-full w-full rounded-3xl"
|
||
alt="دونالد ترامپ"
|
||
loading="lazy" />
|
||
</div>
|
||
<span class="font-semibold text-nowrap text-xs md:text-base">دونالد ترامپ</span>
|
||
</a>
|
||
<a href="#" class="aspect-[1/1.7] md:aspect-[5/8] lg:aspect-[9/15] min-w-[180px] md:min-w-full rounded-3xl transition-all duration-300 hover:grayscale cursor-pointer text-center">
|
||
<div class="bg-gray-300 rounded-3xl overflow-hidden h-full w-full mb-2">
|
||
<img
|
||
src="{{ asset('/image/persons/bill-gates.jpg') }}"
|
||
class="object-cover object-center h-full w-full rounded-3xl"
|
||
alt="بیل گیتس"
|
||
loading="lazy" />
|
||
</div>
|
||
<span class="font-semibold text-nowrap text-xs md:text-base">بیل گیتس</span>
|
||
</a>
|
||
<a href="#" class="aspect-[1/1.7] md:aspect-[5/8] lg:aspect-[9/15] min-w-[180px] md:min-w-full rounded-3xl transition-all duration-300 hover:grayscale cursor-pointer text-center">
|
||
<div class="bg-gray-300 rounded-3xl overflow-hidden h-full w-full mb-2">
|
||
<img
|
||
src="{{ asset('/image/persons/tim-cook.jpg') }}"
|
||
class="object-cover object-center h-full w-full rounded-3xl"
|
||
alt="تیم کوک"
|
||
loading="lazy" />
|
||
</div>
|
||
<span class="font-semibold text-nowrap text-xs md:text-base">تیم کوک</span>
|
||
</a>
|
||
<a href="#" class="aspect-[1/1.7] md:aspect-[5/8] lg:aspect-[9/15] min-w-[180px] md:min-w-full rounded-3xl transition-all duration-300 hover:grayscale cursor-pointer text-center">
|
||
<div class="bg-gray-300 rounded-3xl overflow-hidden h-full w-full mb-2">
|
||
<img
|
||
src="{{ asset('/image/persons/warren-buffett.jpg') }}"
|
||
class="object-cover object-center h-full w-full rounded-3xl"
|
||
alt="وارن بافت"
|
||
loading="lazy" />
|
||
</div>
|
||
<span class="font-semibold text-nowrap text-xs md:text-base">وارن بافت</span>
|
||
</a>
|
||
<a href="#" class="aspect-[1/1.7] md:aspect-[5/8] lg:aspect-[9/15] min-w-[180px] md:min-w-full rounded-3xl transition-all duration-300 hover:grayscale cursor-pointer text-center">
|
||
<div class="bg-gray-300 rounded-3xl overflow-hidden h-full w-full mb-2">
|
||
<img
|
||
src="{{ asset('/image/persons/satushi-nakamoto.jpg') }}"
|
||
class="object-cover object-center h-full w-full rounded-3xl"
|
||
alt="ساتوشی ناکاموتو"
|
||
loading="lazy" />
|
||
</div>
|
||
<span class="font-semibold text-nowrap text-xs md:text-base">ساتوشی ناکاموتو</span>
|
||
</a>
|
||
<a href="#" class="aspect-[1/1.7] md:aspect-[5/8] lg:aspect-[9/15] min-w-[180px] md:min-w-full rounded-3xl transition-all duration-300 hover:grayscale cursor-pointer text-center">
|
||
<div class="bg-gray-300 rounded-3xl overflow-hidden h-full w-full mb-2">
|
||
<img
|
||
src="{{ asset('/image/persons/jeffrey-bazos.jpg') }}"
|
||
class="object-cover object-center h-full w-full rounded-3xl"
|
||
alt="جف بیزوس"
|
||
loading="lazy" />
|
||
</div>
|
||
<span class="font-semibold text-nowrap text-xs md:text-base">جف بیزوس</span>
|
||
</a>
|
||
<a href="#" class="aspect-[1/1.7] md:aspect-[5/8] lg:aspect-[9/15] min-w-[180px] md:min-w-full rounded-3xl transition-all duration-300 hover:grayscale cursor-pointer text-center">
|
||
<div class="bg-gray-300 rounded-3xl overflow-hidden h-full w-full mb-2">
|
||
<img
|
||
src="{{ asset('/image/persons/pavel-durov.jpg') }}"
|
||
class="object-cover object-center h-full w-full rounded-3xl"
|
||
alt="پاول دورف"
|
||
loading="lazy" />
|
||
</div>
|
||
<span class="font-semibold text-nowrap text-xs md:text-base">پاول دورف</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
@script
|
||
{{--<script type="module">--}}
|
||
{{-- import { DotLottie } from "https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web/+esm";--}}
|
||
|
||
{{-- new DotLottie({--}}
|
||
{{-- autoplay: true,--}}
|
||
{{-- loop: true,--}}
|
||
{{-- canvas: document.getElementById("canvas"),--}}
|
||
{{-- src: asset('image/icons/NewLabel.json'), // or .json file--}}
|
||
{{-- });--}}
|
||
{{--</script>--}}
|
||
<script>
|
||
{{--Alpine.data('newsSlider', () => ({--}}
|
||
{{-- currentIndex: 0,--}}
|
||
{{-- isCollapsed: false,--}}
|
||
{{-- interval: null,--}}
|
||
{{-- lightnews: @json($lightnews),--}}
|
||
|
||
{{-- init() {--}}
|
||
{{-- if (!Array.isArray(this.lightnews)) {--}}
|
||
{{-- this.lightnews = Object.values(this.lightnews || {});--}}
|
||
{{-- }--}}
|
||
{{-- this.startSlider();--}}
|
||
{{-- },--}}
|
||
|
||
{{-- get currentNewsSubject() {--}}
|
||
{{-- const item = this.getCurrentItem();--}}
|
||
{{-- return item?.subject || item?.title || 'عنوان پیشفرض';--}}
|
||
{{-- },--}}
|
||
|
||
{{-- get currentNewsLink() {--}}
|
||
{{-- const item = this.getCurrentItem();--}}
|
||
{{-- return '/mag/' + (item?.slug || '') + '/';--}}
|
||
{{-- },--}}
|
||
|
||
{{-- getCurrentItem() {--}}
|
||
{{-- if (!this.lightnews || this.lightnews.length === 0) return {};--}}
|
||
{{-- return Array.isArray(this.lightnews) ? this.lightnews[this.currentIndex] || {} : this.lightnews[this.currentIndex] || {};--}}
|
||
{{-- },--}}
|
||
|
||
{{-- startSlider() {--}}
|
||
{{-- this.interval = setInterval(() => {--}}
|
||
{{-- this.toggleSlide();--}}
|
||
{{-- }, 5000);--}}
|
||
{{-- },--}}
|
||
|
||
{{-- toggleSlide() {--}}
|
||
{{-- this.isCollapsed = true;--}}
|
||
{{-- setTimeout(() => {--}}
|
||
{{-- this.currentIndex = (this.currentIndex + 1) % this.getItemsCount();--}}
|
||
{{-- setTimeout(() => {--}}
|
||
{{-- this.isCollapsed = false;--}}
|
||
{{-- }, 1000);--}}
|
||
{{-- }, 300);--}}
|
||
{{-- },--}}
|
||
|
||
{{-- getItemsCount() {--}}
|
||
{{-- if (!this.lightnews) return 0;--}}
|
||
{{-- return Array.isArray(this.lightnews) ? this.lightnews.length : Object.keys(this.lightnews).length;--}}
|
||
{{-- }--}}
|
||
{{--}));--}}
|
||
|
||
{{--Alpine.data('magsSlider', () => ({--}}
|
||
{{-- currentIndex: 0,--}}
|
||
{{-- isCollapsed: false,--}}
|
||
{{-- interval: null,--}}
|
||
{{-- lightmags: @json($lightmags),--}}
|
||
|
||
{{-- init() {--}}
|
||
{{-- if (!Array.isArray(this.lightmags)) {--}}
|
||
{{-- this.lightmags = Object.values(this.lightmags || {});--}}
|
||
{{-- }--}}
|
||
{{-- this.startSlider();--}}
|
||
{{-- },--}}
|
||
|
||
{{-- get currentMagSubject() {--}}
|
||
{{-- const item = this.getCurrentItem();--}}
|
||
{{-- return item?.subject || item?.title || 'عنوان پیشفرض';--}}
|
||
{{-- },--}}
|
||
|
||
{{-- get currentMagLink() {--}}
|
||
{{-- const item = this.getCurrentItem();--}}
|
||
{{-- return '/mag/' + (item?.slug || '') + '/';--}}
|
||
{{-- },--}}
|
||
|
||
{{-- getCurrentItem() {--}}
|
||
{{-- if (!this.lightmags || this.lightmags.length === 0) return {};--}}
|
||
{{-- return Array.isArray(this.lightmags) ? this.lightmags[this.currentIndex] || {} : this.lightmags[this.currentIndex] || {};--}}
|
||
{{-- },--}}
|
||
|
||
{{-- startSlider() {--}}
|
||
{{-- this.interval = setInterval(() => {--}}
|
||
{{-- this.toggleSlide();--}}
|
||
{{-- }, 5000);--}}
|
||
{{-- },--}}
|
||
|
||
{{-- toggleSlide() {--}}
|
||
{{-- this.isCollapsed = true;--}}
|
||
{{-- setTimeout(() => {--}}
|
||
{{-- this.currentIndex = (this.currentIndex + 1) % this.getItemsCount();--}}
|
||
{{-- setTimeout(() => {--}}
|
||
{{-- this.isCollapsed = false;--}}
|
||
{{-- }, 1000);--}}
|
||
{{-- }, 300);--}}
|
||
{{-- },--}}
|
||
|
||
{{-- getItemsCount() {--}}
|
||
{{-- if (!this.lightmags) return 0;--}}
|
||
{{-- return Array.isArray(this.lightmags) ? this.lightmags.length : Object.keys(this.lightmags).length;--}}
|
||
{{-- }--}}
|
||
{{--}));--}}
|
||
|
||
Alpine.data('bookList', () => ({
|
||
maxAdditionalSize: 5,
|
||
currentImage: null,
|
||
navigationProgress: 0,
|
||
isLoading: false,
|
||
clickedItem: null,
|
||
|
||
|
||
init(){
|
||
document.addEventListener('livewire:navigate', (event) => {
|
||
let all = document.querySelectorAll('.app-clicked');
|
||
all.forEach(element => {
|
||
element.classList.remove('app-clicked');
|
||
});
|
||
});
|
||
document.addEventListener('livewire:navigated', (event) => {
|
||
let all = document.querySelectorAll('.app-clicked');
|
||
all.forEach(element => {
|
||
element.classList.remove('app-clicked');
|
||
});
|
||
});
|
||
},
|
||
|
||
scaleValue(value, from, to) {
|
||
const scale = (to[1] - to[0]) / (from[1] - from[0]);
|
||
const capped = Math.min(from[1], Math.max(from[0], value)) - from[0];
|
||
return Math.floor(capped * scale + to[0]);
|
||
},
|
||
|
||
handleAppHover(event, element) {
|
||
const dock = document.querySelector('.dock');
|
||
if (!dock) return;
|
||
|
||
const mousePosition = event.clientX;
|
||
const iconPositionLeft = element.getBoundingClientRect().left;
|
||
const iconWidth = element.getBoundingClientRect().width;
|
||
|
||
const cursorDistance = (mousePosition - iconPositionLeft) / iconWidth;
|
||
const offsetPixels = this.scaleValue(
|
||
cursorDistance,
|
||
[0, 1],
|
||
[this.maxAdditionalSize * -1, this.maxAdditionalSize]
|
||
);
|
||
|
||
dock.style.setProperty('--dock-offset-left', `${offsetPixels * -1}px`);
|
||
dock.style.setProperty('--dock-offset-right', `${offsetPixels}px`);
|
||
},
|
||
|
||
handleClick(event, element, slug) {
|
||
if (this.isLoading) return;
|
||
this.clickedItem = element;
|
||
element.classList.add('app-clicked');
|
||
},
|
||
|
||
}));
|
||
|
||
Alpine.data('catList', () => ({
|
||
showBackdrop: false,
|
||
loadingFetch: false,
|
||
isExpanded: false,
|
||
selectedTitle: 'دسته بندی ها',
|
||
selectedSlug: '',
|
||
activeTab: "latest",
|
||
fetchedItems: [], // <-- new property
|
||
selectedId: null,
|
||
routeTemplate: '{{ $routeTemplate }}' ,
|
||
catRoute: '{{ $catRoute }}' ,
|
||
visibleItems: [],
|
||
itemHeight: 110, // height of each item in px
|
||
lottieInstance: null,
|
||
lottieInstance2: null,
|
||
|
||
init(){
|
||
document.body.style.overflow='auto' ;
|
||
// Delay Lottie load until DOM is ready
|
||
Alpine.nextTick(()=> {
|
||
if (!this.$refs.lottieIcon) return;
|
||
|
||
// If instance exists, destroy it before creating new
|
||
if (this.lottieInstance) {
|
||
this.lottieInstance.destroy();
|
||
this.lottieInstance = null;
|
||
}
|
||
|
||
this.$refs.lottieIcon.innerHTML = ''
|
||
|
||
this.lottieInstance = lottie.loadAnimation({
|
||
container: this.$refs.lottieIcon,
|
||
renderer: 'svg',
|
||
loop: true,
|
||
autoplay: true,
|
||
path: "{{ asset('image/icons/NewLabel.json') }}"
|
||
});
|
||
|
||
this.lottieInstance.setSpeed(1.5);
|
||
|
||
window.addEventListener('keydown', event => {
|
||
if (event.key === 'Escape') this.closeBackdrop();
|
||
});
|
||
});
|
||
Alpine.nextTick(() => {
|
||
if (!this.$refs.lottieIcon2) return;
|
||
|
||
// If instance exists, destroy it before creating new
|
||
if (this.lottieInstance2) {
|
||
this.lottieInstance2.destroy();
|
||
this.lottieInstance2 = null;
|
||
}
|
||
|
||
this.$refs.lottieIcon2.innerHTML = ''
|
||
|
||
this.lottieInstance2 = lottie.loadAnimation({
|
||
container: this.$refs.lottieIcon2,
|
||
renderer: 'svg',
|
||
loop: true,
|
||
autoplay: true,
|
||
path: "{{ asset('image/icons/Fire.json') }}"
|
||
});
|
||
|
||
this.lottieInstance2.setSpeed(1.5);
|
||
});
|
||
},
|
||
|
||
|
||
// redirectToMore() {
|
||
// // Redirect to a full page (update URL to fit your route)
|
||
// window.location.href = `/category/${this.selectedId}`;
|
||
// },
|
||
|
||
calculateVisibleItems() {
|
||
Alpine.nextTick(() => {
|
||
// Protect against missing context or refs
|
||
if (!this.$refs || !this.$refs.listContainer) return;
|
||
|
||
const container = this.$refs.listContainer;
|
||
|
||
const availableHeight = window.innerHeight - container.getBoundingClientRect().top - 40; // adjust buffer if needed
|
||
const maxItems = Math.floor(availableHeight / this.itemHeight);
|
||
|
||
this.visibleItems = this.fetchedItems.slice(0, maxItems);
|
||
});
|
||
},
|
||
|
||
|
||
handleCatClick(id, title, slug) {
|
||
this.selectedId = id;
|
||
this.selectedTitle = title;
|
||
this.selectedSlug = slug;
|
||
this.showBackdrop = true;
|
||
this.loadingFetch = true;
|
||
document.body.style.overflow = 'hidden';
|
||
fetch(`{{url('api/categoryTabs')}}${"/" + id}`)
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
|
||
console.log(data)
|
||
this.fetchedItems = data?.blogs;
|
||
this.loadingFetch = false;
|
||
// setTimeout(() => {
|
||
// this.calculateVisibleItems();
|
||
// }, 100)
|
||
})
|
||
.catch(error => {
|
||
console.error('Error:', error);
|
||
this.loadingFetch = false;
|
||
});
|
||
},
|
||
|
||
getImageUrl(image) {
|
||
return `{{ env('APP_URL_IMAGE') }}images/${image}`;
|
||
},
|
||
|
||
getDetailUrl(slug) {
|
||
return this.routeTemplate.replace('__SLUG__', slug);
|
||
},
|
||
|
||
showAllCat() {
|
||
return this.catRoute.replace('__SLUG__', this.selectedSlug);
|
||
},
|
||
|
||
closeBackdrop() {
|
||
this.showBackdrop = false;
|
||
this.isExpanded = false;
|
||
document.body.style.overflow = '';
|
||
this.visibleItems = [];
|
||
setTimeout(() => {
|
||
this.fetchedItems = [];
|
||
this.visibleItems = [];
|
||
this.selectedTitle = 'دسته بندی ها';
|
||
this.selectedId = null;
|
||
}, 300)
|
||
},
|
||
|
||
changeActiveTab(tab) {
|
||
this.activeTab = tab;
|
||
this.handleCatClick(this.selectedId, this.selectedTitle)
|
||
}
|
||
}))
|
||
</script>
|
||
@endscript |