Initial commit
This commit is contained in:
Ahrom
971
resources/views/livewire/category-blog.blade.php
Normal file
971
resources/views/livewire/category-blog.blade.php
Normal file
@@ -0,0 +1,971 @@
|
||||
@push('style_css')
|
||||
<style>
|
||||
.max-w-5xl {
|
||||
max-width: 1600px !important;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.pagination li {}
|
||||
|
||||
.pagination li a,
|
||||
.pagination li span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
/*background-color: #e9e9e9;*/
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
border-radius: 50%;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
padding-top: 3px;
|
||||
transition: background-color 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.pagination li span:hover,
|
||||
.pagination li a:hover {
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
|
||||
.pagination li.active span {
|
||||
background-color: #0875E1;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1200) {
|
||||
.customxl\:grid-cols-3 {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.text-sm.font-medium.text-center.border-b.border-\[\#e2e3eb\] ul li a.active {
|
||||
border-bottom: 4px solid #0075e7;
|
||||
color: #0075e7;
|
||||
}
|
||||
|
||||
.header--above-sheet {
|
||||
z-index: 10 !important;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@section('title')
|
||||
دسته بندی مطالب {{ $title }} - سرمایه گذاری اهرم
|
||||
@endsection
|
||||
|
||||
<div>
|
||||
<div x-data="{
|
||||
isOpen: false,
|
||||
observer: null,
|
||||
isDragging: false,
|
||||
startY: 0,
|
||||
currentY: 0,
|
||||
translateY: 1000, // start off-screen (adjust later)
|
||||
selectedUrl: null,
|
||||
selectedCatId: null,
|
||||
fetchedSubCat:[],
|
||||
fetchedParentCat: [],
|
||||
selected_parent: null,
|
||||
selected_sub_cat: {{ (isset($selectedSecondLevelCategory?->id)) ? $selectedSecondLevelCategory->id : 0 }},
|
||||
selected_sub_sub_cat: {{ (isset($selectedThirdLevelCategory?->id)) ? $selectedThirdLevelCategory->id : 0 }},
|
||||
selected_sub_parent: null,
|
||||
fetchedSubSubCat: [],
|
||||
allCats: null,
|
||||
init() {
|
||||
this.$wire.loadCategoriesAndChilds().then(data => {
|
||||
this.allCats = data?.original
|
||||
})
|
||||
},
|
||||
open() {
|
||||
this.isOpen = true;
|
||||
@if(isset($selectedTopLevelCategoryId))
|
||||
this.handlePCatClick({{$selectedTopLevelCategoryId}}, true)
|
||||
@endif
|
||||
@if(isset($selectedThirdLevelCategory))
|
||||
setTimeout(() => {
|
||||
this.handleSCatClick({{ $selectedSecondLevelCategory->id }}, true)
|
||||
}, 500)
|
||||
@endif
|
||||
this.$nextTick(() => {
|
||||
const header = document.querySelector('#main_header');
|
||||
if (header) {
|
||||
header.style.zIndex = '10';
|
||||
|
||||
// Start observing the header's style changes
|
||||
this.observer = new MutationObserver(mutations => {
|
||||
mutations.forEach(mutation => {
|
||||
if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
|
||||
const currentZ = header.style.zIndex;
|
||||
if (this.isOpen && currentZ !== '10') {
|
||||
header.style.zIndex = '10'; // force back
|
||||
console.log('Resetting z-index to 10 because it was changed.');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
this.observer.observe(header, { attributes: true, attributeFilter: ['style'] });
|
||||
}
|
||||
});
|
||||
this.translateY = 500; // start below view (adjust to your sheet height)
|
||||
setTimeout(() => {
|
||||
this.translateY = 0;
|
||||
}, 10);
|
||||
document.body.style.overflow = 'hidden';
|
||||
{{-- window.dispatchEvent(new CustomEvent('sheet-opened'));--}}
|
||||
},
|
||||
close() {
|
||||
this.translateY = 700; // animate down
|
||||
setTimeout(() => {
|
||||
this.isOpen = false;
|
||||
this.translateY = 1000;
|
||||
}, 200);
|
||||
setTimeout(() => {
|
||||
// Stop observing
|
||||
if (this.observer) {
|
||||
this.observer.disconnect();
|
||||
this.observer = null;
|
||||
}
|
||||
const header = document.querySelector('#main_header');
|
||||
if (header) {
|
||||
header.style.zIndex = '3000'; // restore or reset if needed
|
||||
}
|
||||
}, 400)
|
||||
document.body.style.overflow = ''
|
||||
{{-- window.dispatchEvent(new CustomEvent('sheet-closed'));--}}
|
||||
},
|
||||
startDrag(event) {
|
||||
this.isDragging = true;
|
||||
this.startY = event.touches ? event.touches[0].clientY : event.clientY;
|
||||
this.currentY = this.startY;
|
||||
},
|
||||
handlePCatClick(catId, ignore = false) {
|
||||
if(!ignore) {
|
||||
this.resetSubCat();
|
||||
this.resetSubSubCat()
|
||||
}
|
||||
if (this.allCats) {
|
||||
// Find the selected parent category by ID
|
||||
const selectedCat = this.allCats.find(cat => cat.id === catId);
|
||||
console.log(selectedCat?.children_recursive)
|
||||
this.selected_parent = selectedCat ?? null
|
||||
|
||||
if (selectedCat && selectedCat?.children_recursive) {
|
||||
// Access subcategories (children)
|
||||
this.fetchedSubCat = selectedCat?.children_recursive;
|
||||
|
||||
console.log('Subcategories:', this.fetchedSubCat);
|
||||
} else {
|
||||
this.fetchedSubCat = []; // No subcategories found
|
||||
}
|
||||
}
|
||||
{{-- fetch(`{{url('api/category')}}${`/` + catId + `?is_news=` + is_news}`)--}}
|
||||
{{-- .then(response => response.json())--}}
|
||||
{{-- .then(data => {--}}
|
||||
{{-- this.fetchedParentCat = data?.prents ?? [];--}}
|
||||
{{-- this.fetchedSubCat = data?.sub_category ?? [];--}}
|
||||
{{-- this.selected_parent = data?.selected_parent ?? null--}}
|
||||
{{-- console.log(data)--}}
|
||||
{{-- })--}}
|
||||
{{-- .catch(error => {--}}
|
||||
{{-- console.error('Error:', error);--}}
|
||||
{{-- });--}}
|
||||
},
|
||||
handleSCatClick(catId, ignore = false) {
|
||||
if(!ignore) {
|
||||
this.resetSubSubCat()
|
||||
}
|
||||
if (this.fetchedSubCat) {
|
||||
// Find the selected parent category by ID
|
||||
const selectedCat = this.fetchedSubCat.find(cat => cat.id === catId);
|
||||
console.log(selectedCat?.children_recursive)
|
||||
this.selected_sub_parent = selectedCat ?? null
|
||||
|
||||
if (selectedCat && selectedCat?.children_recursive) {
|
||||
// Access subcategories (children)
|
||||
this.fetchedSubSubCat = selectedCat?.children_recursive;
|
||||
|
||||
console.log('SubSubcategories:', this.fetchedSubSubCat);
|
||||
} else {
|
||||
this.fetchedSubSubCat = []; // No subcategories found
|
||||
}
|
||||
}
|
||||
{{-- fetch(`{{url('api/sub-category')}}${`/` + catId + `?is_news=` + is_news}`)--}}
|
||||
{{-- .then(response => response.json())--}}
|
||||
{{-- .then(data => {--}}
|
||||
{{-- this.fetchedSubSubCat = data?.sub_sub_category ?? [];--}}
|
||||
{{-- this.selected_sub_parent = data?.sub_selected_parent ?? null--}}
|
||||
{{-- console.log(data)--}}
|
||||
{{-- })--}}
|
||||
{{-- .catch(error => {--}}
|
||||
{{-- console.error('Error:', error);--}}
|
||||
{{-- });--}}
|
||||
},
|
||||
resetSubCat() {
|
||||
this.fetchedParentCat = [];
|
||||
this.fetchedSubCat = [];
|
||||
this.selected_parent = null;
|
||||
this.selected_sub_cat = 0;
|
||||
this.selected_sub_sub_cat = 0;
|
||||
},
|
||||
resetSubSubCat() {
|
||||
this.fetchedSubSubCat = [];
|
||||
this.selected_sub_parent = null;
|
||||
this.selected_sub_sub_cat = 0;
|
||||
},
|
||||
drag(event) {
|
||||
if (!this.isDragging) return;
|
||||
this.currentY = event.touches ? event.touches[0].clientY : event.clientY;
|
||||
let delta = this.currentY - this.startY;
|
||||
if (delta > 0) {
|
||||
this.translateY = delta;
|
||||
} else {
|
||||
this.translateY = 0;
|
||||
}
|
||||
},
|
||||
endDrag() {
|
||||
this.isDragging = false;
|
||||
if (this.translateY > 100) {
|
||||
this.close();
|
||||
} else {
|
||||
this.translateY = 0;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
selectedUrl(value) {
|
||||
@this.set('selectedUrl', value);
|
||||
}
|
||||
},
|
||||
}" @keydown.escape.window="close()"
|
||||
class="visible relative z-10 mx-auto flex max-w-5xl flex-col items-center px-4 py-8 lg:flex-col lg:justify-between">
|
||||
<div class="text-[#16205b] my-3 w-full font-bold text-[16px] lg:text-[18px] text-start items-center flex gap-2">
|
||||
<div class="text-[#16205b] my-3 w-full font-bold text-[16px] lg:text-[18px] text-start items-center flex gap-2">
|
||||
<div class="text-transparent bg-[#084642] w-[8px] h-[23px] rounded-[2px]"></div>
|
||||
<span class="text-[#16205b]">
|
||||
@if ($blogOrNotBlog == 'blog')
|
||||
مطالب {{ $title }}
|
||||
@else
|
||||
{{ $title }}
|
||||
@endif
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
@click="open()"
|
||||
wire:loading.attr="disabled"
|
||||
wire:target="loadCategoriesAndChilds,goToCategory"
|
||||
x-cloak
|
||||
class="bg-gray-100 items-center justify-center py-2 px-2 rounded-full z-20 flex lg:hidden"
|
||||
type="button">
|
||||
<svg wire:loading.remove
|
||||
wire:target="goToCategory,loadCategoriesAndChilds,generateSlugAndNavigate" fill="#000000" height="18px" width="18px" class="dark-fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M0 73.7C0 50.7 18.7 32 41.7 32H470.3c23 0 41.7 18.7 41.7 41.7c0 9.6-3.3 18.9-9.4 26.3L336 304.5V447.7c0 17.8-14.5 32.3-32.3 32.3c-7.3 0-14.4-2.5-20.1-7l-92.5-73.4c-9.6-7.6-15.1-19.1-15.1-31.3V304.5L9.4 100C3.3 92.6 0 83.3 0 73.7zM55 80L218.6 280.8c3.5 4.3 5.4 9.6 5.4 15.2v68.4l64 50.8V296c0-5.5 1.9-10.9 5.4-15.2L457 80H55z"></path>
|
||||
</svg>
|
||||
<svg wire:loading wire:target="goToCategory,loadCategoriesAndChilds,generateSlugAndNavigate" class=" animate-spin text-black w-[18px] h-[18px] stroke-black" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Backdrop -->
|
||||
<div
|
||||
x-show="isOpen"
|
||||
@click="close()"
|
||||
x-transition.opacity
|
||||
class="fixed inset-0 bg-black bg-opacity-50 z-40"
|
||||
style="display: none;"></div>
|
||||
|
||||
<!-- Bottom Sheet -->
|
||||
<div
|
||||
x-show="isOpen"
|
||||
x-cloak
|
||||
style="will-change: transform;"
|
||||
:style="`transform: translateY(${translateY}px); transition: transform 300ms ease`"
|
||||
class="fixed bottom-0 left-0 right-0 bg-white rounded-t-xl shadow-xl pt-4 z-50">
|
||||
<div
|
||||
@touchstart="startDrag($event)"
|
||||
@touchmove.prevent="drag($event)"
|
||||
@touchend="endDrag()"
|
||||
@mousedown="startDrag($event)"
|
||||
@mousemove.prevent="drag($event)"
|
||||
@mouseup="endDrag()"
|
||||
@mouseleave="isDragging && endDrag()"
|
||||
class="w-12 h-1.5 bg-gray-300 rounded mx-auto mb-4 cursor-grab"
|
||||
:class="{ 'cursor-grabbing': isDragging }"></div>
|
||||
<!-- Sheet Content -->
|
||||
<div class="h-fit max-h-[70vh] overflow-y-auto no-scrollbar rounded-2xl space-y-1 mt-3 relative">
|
||||
|
||||
{{-- <div wire:loading wire:target="goToCategory" class="fixed inset-0 bg-black bg-opacity-50 z-50">--}}
|
||||
{{-- <svg class="mr-3 -ml-1 size-5 animate-spin text-white absolute top-[45%] right-[45%]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>--}}
|
||||
{{-- </div>--}}
|
||||
<div x-data="{
|
||||
selectedId: @js($selectedTopLevelCategoryId ?? ($is_news ? (is_array($category) ? $category['id'] : $category->id) : 0)),
|
||||
scrollToSelected() {
|
||||
this.$nextTick(() => {
|
||||
const el = this.$refs['category-' + this.selectedId];
|
||||
if (el) {
|
||||
el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
}
|
||||
});
|
||||
}
|
||||
}"
|
||||
x-init="scrollToSelected()">
|
||||
<ul
|
||||
{{-- class="flex items-center py-3 -mb-px bg-gray-100 rounded-2xl relative">--}}
|
||||
class="flex items-center py-3 -mb-px rounded-2xl relative">
|
||||
<div class="w-full relative">
|
||||
{{-- <li class="text-sm font-semibold rounded-md transition-colors duration-200 text-nowrap w-full px-3 sticky top-0 bg-gray-100 pb-3 shadow-sm">--}}
|
||||
<li class="text-sm font-semibold rounded-md transition-colors duration-200 text-nowrap w-full sticky bg-white top-0 px-3 pb-3">
|
||||
<span>دستهبندیها</span>
|
||||
</li>
|
||||
<li class="text-sm rounded-md font-semibold transition-colors duration-200 text-nowrap w-full flex items-center px-3">
|
||||
<div
|
||||
{{-- wire:navigate--}}
|
||||
|
||||
{{-- onclick="document.getElementById('pc-{{ $parent->id }}').checked=true;"--}}
|
||||
class="flex items-center text-sm rounded-md transition-colors duration-200 text-nowrap w-full h-full cursor-pointer"
|
||||
aria-current="page">
|
||||
<input
|
||||
{{-- wire:click="goToCategory(`{{ $is_news ? 'news' : 'all' }}`, `{{ $is_news ? route('NewsCategory.index').'/' : route('CategoryBlog.index', ['slug' => 'all']).'/' }}`)" --}}
|
||||
{{-- @click="selectedId = {{ ($is_news && url()->current() == route('NewsCategory.index') || $selectedUrl == route('NewsCategory.index') || $selectedUrl == route('NewsCategory.index') . '/page/' . $page) ? $category->id : 0 }};selectedUrl=`{{ $is_news ? route('NewsCategory.index').'/' : route('CategoryBlog.index', ['slug' => 'all']).'/' }}`" --}}
|
||||
@click="handlePCatClick({{ $is_news ? $selectedTopLevelCategoryId : 0 }});selectedId={{ $is_news ? $selectedTopLevelCategoryId : 0 }};selectedCatId = {{ $is_news ? $selectedTopLevelCategoryId : 0}};"
|
||||
:checked="selectedId == {{ $is_news ? $selectedTopLevelCategoryId : 0}}"
|
||||
name="mpc"
|
||||
id="mpc-0"
|
||||
type="radio" class="rounded-[4px] cursor-pointer border-2" @if (url()->current() == route('CategoryBlog.index', ['slug' => 'all']) || url()->current() == route('CategoryBlog.index', ['slug' => 'all']) . '/page/' . $page) checked @endif>
|
||||
<label for="mpc-0" class=" w-full cursor-pointer px-3 py-3 border-b">
|
||||
همه
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
@foreach ($parentCategories->sortByDesc('priority') as $parent)
|
||||
<li x-ref="category-{{ $parent->id }}" class="text-sm rounded-md font-semibold transition-colors duration-200 text-nowrap w-full flex items-center px-3">
|
||||
<div
|
||||
{{-- wire:navigate--}}
|
||||
|
||||
{{-- onclick="document.getElementById('pc-{{ $parent->id }}').checked=true;"--}}
|
||||
class="flex items-center text-sm rounded-md transition-colors duration-200 text-nowrap w-full h-full cursor-pointer"
|
||||
aria-current="page">
|
||||
<input
|
||||
{{-- wire:click="goToCategory(`{{ $parent->slug }}`, `{{ $is_news ? route('NewsCategory.show', ['slug' => $parent->slug]).'/' : route('CategoryBlog.index', ['slug' => $parent->slug]).'/' }}`)"--}}
|
||||
{{-- @click="selectedId = {{ $parent->id }};selectedUrl=`{{ $is_news ? route('NewsCategory.show', ['slug' => $parent->slug]).'/' : route('CategoryBlog.index', ['slug' => $parent->slug]).'/' }}`"--}}
|
||||
{{-- @click="handlePCatClick({{ $parent->id }}, {{ $is_news ? 1 : 0 }});selectedCatId={{$parent->id}};"--}}
|
||||
@click="handlePCatClick({{ $parent->id }});selectedCatId = {{$parent->id}}"
|
||||
:checked="selectedId == {{ $parent->id }}" name="mpc" id="mpc-{{ $parent->id }}" type="radio" class="rounded-[4px] cursor-pointer border-2" @if (url()->current() == route('CategoryBlog.index', ['slug' => $parent->slug]) || url()->current() == route('NewsCategory.show', ['slug' => $parent->slug]) || url()->current() == route('CategoryBlog.index', ['slug' => $parent->slug]) . '/page/' . $page || $parent->id == $selectedTopLevelCategoryId) checked @endif>
|
||||
<label for="mpc-{{ $parent->id }}" class=" w-full cursor-pointer px-3 py-3 @if(!$loop->last) border-b @endif">
|
||||
{{ $parent->title }}
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
@endforeach
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<ul x-show="fetchedSubCat.length > 0" class="flex items-center py-3 -mb-px rounded-2xl">
|
||||
<div class="w-full relative">
|
||||
<li class="text-sm font-semibold rounded-md transition-colors duration-200 text-nowrap w-full sticky bg-white top-0 px-3 pb-3">
|
||||
<span>دستهبندی <span x-text="selected_parent?.title"></span></span>
|
||||
</li>
|
||||
|
||||
<li class="text-sm rounded-md font-semibold transition-colors duration-200 text-nowrap w-full flex items-center px-3">
|
||||
<div class="flex items-center text-sm rounded-md transition-colors duration-200 text-nowrap w-full h-full cursor-pointer" aria-current="page">
|
||||
<input
|
||||
type="radio"
|
||||
name="mcc"
|
||||
id="mcc-0"
|
||||
class="rounded-[4px] cursor-pointer border-2"
|
||||
:checked="selected_sub_cat == 0"
|
||||
{{-- @click="handlePCatClick(selected_parent?.id, {{ $is_news ? 1 : 0 }});selected_sub_cat=0;selectedCatId=selected_parent?.id;"--}}
|
||||
@click="selected_sub_cat = 0;selectedCatId = selected_parent?.id;">
|
||||
<label for="mcc-0" class="w-full cursor-pointer px-3 py-3 border-b">
|
||||
همه
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<template x-for="(item, index) in fetchedSubCat" :key="item.id">
|
||||
<li class="text-sm rounded-md font-semibold transition-colors duration-200 text-nowrap w-full flex items-center px-3">
|
||||
<div class="flex items-center text-sm rounded-md transition-colors duration-200 text-nowrap w-full h-full cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
:name="'mcc'"
|
||||
:id="`mcc-${item.id}`"
|
||||
class="rounded-[4px] cursor-pointer border-2"
|
||||
:checked="selected_sub_cat == item.id"
|
||||
@click="selected_sub_cat = item.id;handleSCatClick(item.id);selectedCatId = item?.id">
|
||||
<label
|
||||
:for="`mcc-${item.id}`"
|
||||
:class="index !== fetchedSubCat.length - 1 ? 'border-b' : ''"
|
||||
class="w-full cursor-pointer px-3 py-3"
|
||||
x-text="item.title"></label>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
<ul x-show="fetchedSubSubCat.length > 0" class="flex items-center py-3 -mb-px rounded-2xl">
|
||||
<div class="w-full relative">
|
||||
<li class="text-sm font-semibold rounded-md transition-colors duration-200 text-nowrap w-full sticky bg-white top-0 px-3 pb-3">
|
||||
<span>دستهبندی <span x-text="selected_sub_parent?.title"></span></span>
|
||||
</li>
|
||||
|
||||
<li class="text-sm rounded-md font-semibold transition-colors duration-200 text-nowrap w-full flex items-center px-3">
|
||||
<div class="flex items-center text-sm rounded-md transition-colors duration-200 text-nowrap w-full h-full cursor-pointer" aria-current="page">
|
||||
<input
|
||||
type="radio"
|
||||
name="mss"
|
||||
id="mss-0"
|
||||
class="rounded-[4px] cursor-pointer border-2"
|
||||
:checked="selected_sub_sub_cat === 0"
|
||||
@click="selected_sub_sub_cat = 0;selectedCatId = selected_sub_parent?.id">
|
||||
<label for="mss-0" class="w-full cursor-pointer px-3 py-3 border-b">
|
||||
همه
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<template x-for="(item, index) in fetchedSubSubCat" :key="item.id">
|
||||
<li class="text-sm rounded-md font-semibold transition-colors duration-200 text-nowrap w-full flex items-center px-3">
|
||||
<div class="flex items-center text-sm rounded-md transition-colors duration-200 text-nowrap w-full h-full cursor-pointer">
|
||||
<input
|
||||
type="radio"
|
||||
:name="'mss'"
|
||||
:id="`mss-${item.id}`"
|
||||
class="rounded-[4px] cursor-pointer border-2"
|
||||
:checked="selected_sub_sub_cat === item.id"
|
||||
@click="selected_sub_sub_cat = item.id;selectedCatId = item?.id">
|
||||
<label
|
||||
:for="`mss-${item.id}`"
|
||||
:class="index !== fetchedSubSubCat.length - 1 ? 'border-b' : ''"
|
||||
class="w-full cursor-pointer px-3 py-3"
|
||||
x-text="item.title"></label>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
</div>
|
||||
</ul>
|
||||
|
||||
<div class="sticky bottom-0 bg-white border-t p-4 flex items-center justify-between gap-2">
|
||||
<div @navigate-to.window="Livewire.navigate($event.detail)" class="w-full" x-data="{ isNews: {{ $is_news ? 1 : 0 }} }">
|
||||
{{-- <button--}}
|
||||
{{-- class="w-full bg-blue-600 text-white py-2 rounded-md"--}}
|
||||
{{-- wire:navigate--}}
|
||||
{{-- wire:click="goToCategory(selectedCatId, isNews)"--}}
|
||||
{{-- @click="close()"--}}
|
||||
{{-- :disabled="selectedCatId < 0"--}}
|
||||
{{-- @click="if (selectedCatId >= 0) { $wire.goToCategory(selectedCatId, isNews); close(); }"--}}
|
||||
{{-- >--}}
|
||||
{{-- ثبت--}}
|
||||
{{-- </button>--}}
|
||||
<button
|
||||
class="w-full bg-blue-600 text-white py-2 rounded-md"
|
||||
wire:click="generateSlugAndNavigate(selectedCatId, {{ $is_news ? 'true' : 'false' }})"
|
||||
@click="close()"
|
||||
:disabled="selectedCatId < 0">
|
||||
ثبت
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
class="w-full border border-red-600 text-red-600 py-2 rounded-md"
|
||||
@click="close()">
|
||||
بستن
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full mb-6">
|
||||
<div class="text-sm font-medium text-center border-b border-[#e2e3eb] py-3">
|
||||
<ul class="flex items-center gap-2 overflow-scroll md:overflow-hidden no-scrollbar md:flex-wrap -mb-px">
|
||||
@if (!$is_news )
|
||||
<!-- mag -->
|
||||
<li class="text-sm rounded-md transition-colors duration-200 text-nowrap py-1">
|
||||
<a href="{{ route('CategoryBlog.index', ['slug' => 'all']).'/' }}"
|
||||
wire:navigate
|
||||
class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap @if (url()->current() == route('CategoryBlog.index', ['slug' => 'all']) || url()->current() == route('CategoryBlog.index', ['slug' => 'all']) . '/page/' . $page) bg-blue-100 text-blue-600 @else bg-gray-100 hover:bg-gray-200 @endif"
|
||||
aria-current="page">همه دستهها</a>
|
||||
</li>
|
||||
|
||||
{{-- @if ($category['id'] == 0)--}}
|
||||
{{-- <!-- main mag show-->--}}
|
||||
@foreach ($parentCategories->sortByDesc('priority') as $parent)
|
||||
<li class="text-sm rounded-md transition-colors duration-200 text-nowrap py-1">
|
||||
@if(isset($topParent->id))
|
||||
<a href="{{ route('CategoryBlog.index', ['slug' => $parent->slug]).'/' }}"
|
||||
wire:navigate
|
||||
class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap @if (url()->current() == route('CategoryBlog.index', ['slug' => $parent->slug]) || url()->current() == route('CategoryBlog.index', ['slug' => $parent->slug]) . '/page/' . $page || $topParent->id == $parent->id) bg-blue-100 text-blue-600 @else bg-gray-100 hover:bg-gray-200 @endif"
|
||||
aria-current="page">{{ $parent->title }}</a>
|
||||
@else
|
||||
<a href="{{ route('CategoryBlog.index', ['slug' => $parent->slug]).'/' }}"
|
||||
wire:navigate
|
||||
class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap @if (url()->current() == route('CategoryBlog.index', ['slug' => $parent->slug]) || url()->current() == route('CategoryBlog.index', ['slug' => $parent->slug]) . '/page/' . $page ) bg-blue-100 text-blue-600 @else bg-gray-100 hover:bg-gray-200 @endif"
|
||||
aria-current="page">{{ $parent->title }}</a>
|
||||
@endif
|
||||
</li>
|
||||
@endforeach
|
||||
{{-- @else--}}
|
||||
{{-- --}}
|
||||
{{-- @endif--}}
|
||||
@else
|
||||
<!-- news -->
|
||||
|
||||
{{-- @if ($category['slug'] == 'news')--}}
|
||||
<!-- nain news-->
|
||||
<li class="text-sm rounded-md transition-colors duration-200 text-nowrap py-1">
|
||||
<a href="{{ route('NewsCategory.index').'/' }}"
|
||||
wire:navigate
|
||||
class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap @if (url()->current() == route('NewsCategory.index') || url()->current() == route('NewsCategory.index') . '/page/' . $page || $selectedTopLevelCategoryId == 15 ) bg-blue-100 text-blue-600 @else bg-gray-100 hover:bg-gray-200 @endif"
|
||||
aria-current="page">همه اخبار</a>
|
||||
</li>
|
||||
@foreach ($parentCategories->sortByDesc('priority') as $parent)
|
||||
<li class="text-sm rounded-md transition-colors duration-200 text-nowrap py-1">
|
||||
@if(isset($category))
|
||||
<a href="{{ route('NewsCategory.show', ['slug' => $parent->slug]).'/' }}"
|
||||
wire:navigate
|
||||
class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap @if (url()->current() == route('NewsCategory.show', ['slug' => $parent->slug]) || url()->current() == route('NewsCategory.show', ['slug' => $parent->slug]) . '/page/' . $page || (is_array($category) ? $category['id'] : $category->id) == $parent->id) bg-blue-100 text-blue-600 @else bg-gray-100 hover:bg-gray-200 @endif"
|
||||
aria-current="page">{{ $parent->title }}</a>
|
||||
@else
|
||||
<a href="{{ route('NewsCategory.show', ['slug' => $parent->slug]).'/' }}"
|
||||
wire:navigate
|
||||
class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap @if (url()->current() == route('NewsCategory.show', ['slug' => $parent->slug]) || url()->current() == route('NewsCategory.show', ['slug' => $parent->slug]) . '/page/' . $page) bg-blue-100 text-blue-600 @else bg-gray-100 hover:bg-gray-200 @endif"
|
||||
aria-current="page">{{ $parent->title }}</a>
|
||||
@endif
|
||||
</li>
|
||||
@endforeach
|
||||
{{-- @else--}}
|
||||
{{-- <!-- sub news show-->--}}
|
||||
{{-- @php--}}
|
||||
{{-- $parentCategory = null;--}}
|
||||
{{-- if ($this->category->parent_id) {--}}
|
||||
{{-- $parentCategory = App\Models\Category::find($this->category->parent_id);--}}
|
||||
{{-- } elseif ($this->category->parent_below) {--}}
|
||||
{{-- $parentCategory = App\Models\Category::find($this->category->parent_below);--}}
|
||||
{{-- }--}}
|
||||
{{-- @endphp--}}
|
||||
{{-- @if ($parentCategory)--}}
|
||||
{{-- <li class="text-sm rounded-md transition-colors duration-200 text-nowrap py-1">--}}
|
||||
{{-- <a href="{{ route('NewsCategory.index', ['slug' => $parentCategory->slug]).'/' }}"--}}
|
||||
{{-- wire:navigate--}}
|
||||
{{-- class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap @if (url()->current() == route('NewsCategory.index' ) || url()->current() == route('NewsCategory.index', ['slug' => $parentCategory->slug]) . '/page/' . $page) bg-blue-100 text-blue-600 @else bg-gray-100 hover:bg-gray-200 @endif"--}}
|
||||
{{-- aria-current="page">{{ $parentCategory->title }}</a>--}}
|
||||
{{-- </li>--}}
|
||||
{{-- @endif--}}
|
||||
|
||||
{{-- <li class="text-sm rounded-md transition-colors duration-200 text-nowrap py-1">--}}
|
||||
{{-- <a href="{{ route('NewsCategory.show', ['slug' => $category->slug]).'/' }}"--}}
|
||||
{{-- wire:navigate--}}
|
||||
{{-- class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap @if (url()->current() == route('NewsCategory.show', ['slug' => $category->slug]) || url()->current() == route('NewsCategory.index', ['slug' => $category->slug]) . '/page/' . $page) bg-blue-100 text-blue-600 @else bg-gray-100 hover:bg-gray-200 @endif"--}}
|
||||
{{-- aria-current="page">{{ $category->title }}</a>--}}
|
||||
{{-- </li>--}}
|
||||
|
||||
{{-- @foreach ($categoriesNotBlog->sortByDesc('priority') as $item)--}}
|
||||
{{-- <li class="text-sm rounded-md transition-colors duration-200 text-nowrap py-1">--}}
|
||||
{{-- <a href="{{ route('NewsCategory.show', ['slug' => $item['slug']]) .'/' }}"--}}
|
||||
{{-- wire:navigate--}}
|
||||
{{-- class="px-3 py-1 text-sm rounded-md transition-colors duration-200 text-nowrap @if (url()->current() == route('NewsCategory.index', ['slug' => $item['slug']]) || url()->current() == route('NewsCategory.index', ['slug' => $item['slug']]) . '/page/' . $page) bg-blue-100 text-blue-600 @else bg-gray-100 hover:bg-gray-200 @endif"--}}
|
||||
{{-- aria-current="page">{{ $item['title'] }}</a>--}}
|
||||
{{-- </li>--}}
|
||||
{{-- @endforeach--}}
|
||||
{{-- @endif--}}
|
||||
@endif
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@if ($blogs && $blogs->count() > 0)
|
||||
<div
|
||||
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-9 justify-between gap-5 my-4 lg:my-8 w-full relative">
|
||||
<div class="col-span-2 h-fit max-h-[83vh] rounded-2xl sticky top-[100px] space-y-1 hidden lg:block">
|
||||
<div x-data="{
|
||||
selectedId: @js($selectedTopLevelCategoryId ?? ($is_news ? (is_array($category) ? $category['id'] : $category->id) : 0)),
|
||||
scrollToSelected() {
|
||||
this.$nextTick(() => {
|
||||
const el = this.$refs['category-' + this.selectedId];
|
||||
if (el) {
|
||||
el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
}
|
||||
});
|
||||
}
|
||||
}"
|
||||
x-init="scrollToSelected()">
|
||||
<ul
|
||||
class="flex items-center py-3 -mb-px bg-gray-100 rounded-2xl relative">
|
||||
<div class="max-h-[25vh] scroll-smooth overflow-y-auto md:flex-wrap w-full relative" style="scrollbar-color: gray #F3F4F6 !important;">
|
||||
<li class="text-sm font-semibold rounded-md transition-colors duration-200 text-nowrap w-full px-3 sticky top-0 bg-gray-100 pb-3 shadow-sm">
|
||||
<span>دستهبندیها</span>
|
||||
</li>
|
||||
<li class="text-sm rounded-md font-semibold transition-colors duration-200 text-nowrap w-full flex items-center px-3">
|
||||
<a href="{{ $is_news ? route('NewsCategory.index').'/' : route('CategoryBlog.index', ['slug' => 'all']).'/' }}"
|
||||
wire:navigate
|
||||
@click.prevent="selectedId = {{ ($is_news && url()->current() == route('NewsCategory.index') || url()->current() == route('NewsCategory.index') . '/page/' . $page) ? $category->id : 0 }}"
|
||||
{{-- onclick="document.getElementById('pc-{{ $parent->id }}').checked=true;"--}}
|
||||
class="flex items-center text-sm rounded-md transition-colors duration-200 text-nowrap w-full h-full cursor-pointer"
|
||||
aria-current="page">
|
||||
<input :checked="selectedId == {{ ($is_news && url()->current() == route('NewsCategory.index') || url()->current() == route('NewsCategory.index') . '/page/' . $page) ? $category->id : 0 }}" name="pc-0" id="pc-0" type="checkbox" class="rounded-[4px] cursor-pointer border-2" @if (url()->current() == route('CategoryBlog.index', ['slug' => 'all']) || url()->current() == route('CategoryBlog.index', ['slug' => 'all']) . '/page/' . $page) checked @endif>
|
||||
<label for="pc-0" class=" w-full cursor-pointer px-3 py-3 border-b">
|
||||
همه
|
||||
</label>
|
||||
</a>
|
||||
</li>
|
||||
@foreach ($parentCategories->sortByDesc('priority') as $parent)
|
||||
<li x-ref="category-{{ $parent->id }}" class="text-sm rounded-md font-semibold transition-colors duration-200 text-nowrap w-full flex items-center px-3">
|
||||
<a href="{{ $is_news ? route('NewsCategory.show', ['slug' => $parent->slug]).'/' : route('CategoryBlog.index', ['slug' => $parent->slug]).'/' }}"
|
||||
wire:navigate
|
||||
@click.prevent="selectedId = {{ $parent->id }}"
|
||||
{{-- onclick="document.getElementById('pc-{{ $parent->id }}').checked=true;"--}}
|
||||
class="flex items-center text-sm rounded-md transition-colors duration-200 text-nowrap w-full h-full cursor-pointer"
|
||||
aria-current="page">
|
||||
<input :checked="selectedId === {{ $parent->id }}" name="pc-{{ $parent->id }}" id="pc-{{ $parent->id }}" type="checkbox" class="rounded-[4px] cursor-pointer border-2" @if (url()->current() == route('CategoryBlog.index', ['slug' => $parent->slug]) || url()->current() == route('NewsCategory.show', ['slug' => $parent->slug]) || url()->current() == route('CategoryBlog.index', ['slug' => $parent->slug]) . '/page/' . $page || $parent->id == $selectedTopLevelCategoryId) checked @endif>
|
||||
<label for="pc-{{ $parent->id }}" class=" w-full cursor-pointer px-3 py-3 @if(!$loop->last) border-b @endif">
|
||||
{{ $parent->title }}
|
||||
</label>
|
||||
</a>
|
||||
</li>
|
||||
@endforeach
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@if($childCategories->isNotEmpty())
|
||||
<div x-data="{
|
||||
selectedId: @js($selectedSecondLevelCategory->id ?? 0),
|
||||
scrollToSelected() {
|
||||
this.$nextTick(() => {
|
||||
const el = this.$refs['psub_category_' + this.selectedId];
|
||||
if (el) {
|
||||
el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
}
|
||||
});
|
||||
}
|
||||
}"
|
||||
x-init="scrollToSelected()">
|
||||
<ul class="flex items-center py-3 -mb-px bg-gray-100 rounded-2xl">
|
||||
<div class="max-h-[30vh] scroll-smooth overflow-y-auto md:flex-wrap w-full" style="scrollbar-color: gray #F3F4F6 !important;">
|
||||
<li class="text-sm font-semibold rounded-md transition-colors duration-200 text-nowrap w-full px-3 sticky top-0 bg-gray-100 pb-3 shadow-sm">
|
||||
<span>دستهبندی {{ $topParent->title }}</span>
|
||||
</li>
|
||||
<li class="text-sm rounded-md font-semibold transition-colors duration-200 text-nowrap w-full flex items-center px-3">
|
||||
<a href="{{ $is_news ? route('NewsCategory.show', ['slug' => $topParent->slug]).'/' : route('CategoryBlog.index', ['slug' => $topParent->slug]).'/' }}"
|
||||
wire:navigate
|
||||
@click.prevent="selectedId = 0"
|
||||
{{-- onclick="document.getElementById('pc-{{ $parent->id }}').checked=true;"--}}
|
||||
class="flex items-center text-sm rounded-md transition-colors duration-200 text-nowrap w-full h-full cursor-pointer"
|
||||
aria-current="page">
|
||||
<input :checked="selectedId == 0" name="cc-0" id="cc-0" type="checkbox" class="rounded-[4px] cursor-pointer border-2" @if (url()->current() == route('CategoryBlog.index', ['slug' => $topParent->slug]) || url()->current() == route('NewsCategory.show', ['slug' => $topParent->slug]) || url()->current() == route('CategoryBlog.index', ['slug' => $topParent->slug]) . '/page/' . $page) checked @endif>
|
||||
<label for="cc-0" class=" w-full cursor-pointer px-3 py-3 border-b">
|
||||
همه
|
||||
</label>
|
||||
</a>
|
||||
</li>
|
||||
@foreach ($childCategories->sortByDesc('priority') as $child)
|
||||
<li x-ref="psub_category_{{ $child->id }}" class="text-sm rounded-md font-semibold transition-colors duration-200 text-nowrap w-full flex items-center px-3">
|
||||
<a href="{{ $is_news ? route('NewsCategory.show', ['slug' => $child->slug]).'/' : route('CategoryBlog.index', ['slug' => $child->slug]).'/' }}"
|
||||
wire:navigate
|
||||
@click.prevent="selectedId = {{ $child->id }}"
|
||||
{{-- onclick="document.getElementById('pc-{{ $child->id }}').checked=true;"--}}
|
||||
class="flex items-center text-sm rounded-md transition-colors duration-200 text-nowrap w-full h-full cursor-pointer"
|
||||
aria-current="page">
|
||||
@if(isset($selectedSecondLevelCategory->id))
|
||||
<input :checked="selectedId === {{ $child->id }}" name="cc-{{ $child->id }}" id="cc-{{ $child->id }}" type="checkbox" class="rounded-[4px] cursor-pointer border-2" @if (url()->current() == route('CategoryBlog.index', ['slug' => $child->slug]) || url()->current() == route('CategoryBlog.index', ['slug' => $child->slug]) . '/page/' . $page || $selectedSecondLevelCategory->id == $child->id) checked @endif>
|
||||
@else
|
||||
<input :checked="selectedId === {{ $child->id }}" name="cc-{{ $child->id }}" id="cc-{{ $child->id }}" type="checkbox" class="rounded-[4px] cursor-pointer border-2" @if (url()->current() == route('CategoryBlog.index', ['slug' => $child->slug]) || url()->current() == route('CategoryBlog.index', ['slug' => $child->slug]) . '/page/' . $page) checked @endif>
|
||||
@endif
|
||||
<label for="cc-{{ $child->id }}" class=" w-full cursor-pointer px-3 py-3 @if(!$loop->last) border-b @endif">
|
||||
{{ $child->title }}
|
||||
</label>
|
||||
</a>
|
||||
</li>
|
||||
@endforeach
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
@endif
|
||||
@if($subChildCategories->isNotEmpty())
|
||||
<div x-data="{
|
||||
selectedId: @js($category->id),
|
||||
scrollToSelected() {
|
||||
this.$nextTick(() => {
|
||||
const el = this.$refs['sub_category_' + this.selectedId];
|
||||
if (el) {
|
||||
el.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
}
|
||||
});
|
||||
}
|
||||
}"
|
||||
x-init="scrollToSelected()">
|
||||
<ul class="flex items-center py-3 -mb-px bg-gray-100 rounded-2xl">
|
||||
<div class="max-h-[20vh] scroll-smooth overflow-y-auto md:flex-wrap w-full relative" style="scrollbar-color: gray #F3F4F6 !important;">
|
||||
<li class="text-sm font-semibold rounded-md transition-colors duration-200 text-nowrap w-full px-3 sticky top-0 bg-gray-100 pb-3 shadow-sm">
|
||||
<span>دستهبندی {{ $selectedSecondLevelCategory->title }}</span>
|
||||
</li>
|
||||
<li class="text-sm rounded-md font-semibold transition-colors duration-200 text-nowrap w-full flex items-center px-3">
|
||||
<a href="{{ $is_news ? route('NewsCategory.show', ['slug' => $selectedSecondLevelCategory->slug]).'/' : route('CategoryBlog.index', ['slug' => $selectedSecondLevelCategory->slug]).'/' }}"
|
||||
wire:navigate
|
||||
@click.prevent="selectedId = {{ $selectedSecondLevelCategory->id }}"
|
||||
{{-- onclick="document.getElementById('pc-{{ $parent->id }}').checked=true;"--}}
|
||||
class="flex items-center text-sm rounded-md transition-colors duration-200 text-nowrap w-full h-full cursor-pointer"
|
||||
aria-current="page">
|
||||
<input :checked="selectedId == {{ $selectedSecondLevelCategory->id }}" name="sc-0" id="sc-0" type="checkbox" class="rounded-[4px] cursor-pointer border-2" @if (url()->current() == route('CategoryBlog.index', ['slug' => $selectedSecondLevelCategory->slug]) || url()->current() == route('NewsCategory.show', ['slug' => $selectedSecondLevelCategory->slug]) || url()->current() == route('CategoryBlog.index', ['slug' => $selectedSecondLevelCategory->slug]) . '/page/' . $page) checked @endif>
|
||||
<label for="sc-0" class=" w-full cursor-pointer px-3 py-3 border-b">
|
||||
همه
|
||||
</label>
|
||||
</a>
|
||||
</li>
|
||||
@foreach ($subChildCategories->sortByDesc('priority') as $subChild)
|
||||
<li x-ref="sub_category_{{ $subChild->id }}" class="text-sm rounded-md font-semibold transition-colors duration-200 text-nowrap w-full flex items-center px-3">
|
||||
<a href="{{ $is_news ? route('NewsCategory.index', ['slug' => $subChild->slug]) : route('CategoryBlog.index', ['slug' => $subChild->slug]).'/' }}"
|
||||
wire:navigate
|
||||
@click.prevent="selectedId = {{ $subChild->id }}"
|
||||
class="flex items-center text-sm rounded-md transition-colors duration-200 text-nowrap w-full h-full cursor-pointer"
|
||||
aria-current="page">
|
||||
{{-- @if(isset($selectedSecondLevelCategory->id))--}}
|
||||
<input :checked="selectedId === {{ $subChild->id }}" name="sc-{{ $subChild->id }}" id="sc-{{ $subChild->id }}" type="checkbox" class="rounded-[4px] cursor-pointer border-2" @if (url()->current() == route('CategoryBlog.index', ['slug' => $subChild->slug]) || url()->current() == route('CategoryBlog.index', ['slug' => $subChild->slug]) . '/page/' . $page) checked @endif>
|
||||
{{-- @else--}}
|
||||
{{-- <input name="sc-{{ $subChild->id }}" id="sc-{{ $subChild->id }}" type="checkbox" class="rounded-[4px] cursor-pointer border-2" @if (url()->current() == route('CategoryBlog.index', ['slug' => $subChild->slug]) || url()->current() == route('CategoryBlog.index', ['slug' => $subChild->slug]) . '/page/' . $page) checked @endif>--}}
|
||||
{{-- @endif--}}
|
||||
|
||||
<label for="sc-{{ $subChild->id }}" class=" w-full cursor-pointer px-3 py-3 @if(!$loop->last) border-b @endif">
|
||||
{{ $subChild->title }}
|
||||
</label>
|
||||
</a>
|
||||
</li>
|
||||
@endforeach
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
<div class="col-span-7 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 h-fit gap-5">
|
||||
@foreach ($blogs as $index => $blog)
|
||||
<div
|
||||
class="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-slate-100 md:shadow">
|
||||
<a href="{{ route('detail', ['slug' => $blog->slug]) .'/'}}" wire:navigate
|
||||
class="relative w-[80px] md:w-full">
|
||||
<img class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none"
|
||||
src="{{ env('APP_URL_IMAGE').'images/'.$blog->image }}" alt="">
|
||||
</a>
|
||||
<div
|
||||
class="flex w-[74%] justify-start md:justify-normal flex-col md:w-full 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 items-center gap-1 text-white md:mt-auto">
|
||||
<div class="hidden md:flex md: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 flex flex-col justify-center hidden md:block">
|
||||
{{ $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]">{{ convertEnglishToPersianNumber($blog->reed_time) }} دقیقه</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if ($blogs->hasPages())
|
||||
<nav class="mt-6">
|
||||
<ul class="pagination flex gap-4">
|
||||
|
||||
{{-- First + Prev (only show if not on first page) --}}
|
||||
@if (!$blogs->onFirstPage())
|
||||
<li>
|
||||
<a class="pb-[4px]"
|
||||
href="{{ $is_news
|
||||
? ($category['id'] == 0
|
||||
? route('NewsCategory.index')
|
||||
: route('NewsCategory.show', ['slug' => $slug]))
|
||||
: route('CategoryBlog.index', ['slug' => $slug]).'/' }}"
|
||||
wire:navigate rel="first">
|
||||
<svg style="width: 12px; height: 12px" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 233.91 226.965">
|
||||
<path d="M139.099,113.926c7.785-7.807,14.811-14.878,21.865-21.921,20.745-20.71,41.523-41.387,62.244-62.121,7.631-7.635,7.275-18.796-.662-24.879-5.824-4.463-14.02-4.42-19.781,.152-1.071,.85-2.04,1.834-3.01,2.803-30.792,30.774-61.581,61.55-92.362,92.334-8.813,8.814-8.798,17.48,.051,26.329,30.87,30.872,61.777,61.706,92.6,92.625,5.006,5.022,10.648,7.376,17.58,5.229,10.645-3.298,14.599-16.097,7.775-24.894-1.065-1.373-2.333-2.596-3.568-3.828-26.395-26.351-52.796-52.697-79.216-79.023-.96-.956-2.126-1.706-3.517-2.806Z" />
|
||||
<path d="M43.716,113.46c7.308-7.331,14.332-14.404,21.387-21.447,20.573-20.538,41.144-41.078,61.751-61.582,4.559-4.537,6.232-9.891,4.569-16.05-1.631-6.039-5.739-9.877-11.817-11.285-5.789-1.341-10.825,.331-15.034,4.542-11.729,11.737-23.476,23.456-35.212,35.187-19.236,19.228-38.475,38.454-57.701,57.693-8.661,8.666-8.718,17.444-.124,26.044,30.958,30.975,62.066,61.802,92.832,92.966,9.589,9.713,24.356,6.018,27.766-5.415,1.972-6.612,.065-12.214-4.786-17.025-12.492-12.387-24.921-24.836-37.373-37.262-14.661-14.629-29.321-29.258-43.976-43.892-.696-.695-1.336-1.444-2.282-2.474Z" />
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
@if(($blogs->currentPage() - 1) === 1)
|
||||
<li>
|
||||
<a class="pb-[4px]"
|
||||
href="{{ $is_news
|
||||
? ($category['id'] == 0
|
||||
? route('NewsCategory.index')
|
||||
: route('NewsCategory.show', ['slug' => $slug]))
|
||||
: route('CategoryBlog.index', ['slug' => $slug]).'/' }}"
|
||||
wire:navigate rel="prev">
|
||||
<svg style="width: 12px; height: 12px" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 233.91 226.965">
|
||||
<path d="M91.264,113.926c7.785-7.807,14.811-14.878,21.865-21.921,20.745-20.71,41.523-41.387,62.244-62.121,7.631-7.635,7.275-18.796-.662-24.879-5.824-4.463-14.02-4.42-19.781,.152-1.071,.85-2.04,1.834-3.01,2.803-30.792,30.774-61.581,61.55-92.362,92.334-8.813,8.814-8.798,17.48,.051,26.329,30.87,30.872,61.777,61.706,92.6,92.625,5.006,5.022,10.648,7.376,17.58,5.229,10.645-3.298,14.599-16.097,7.775-24.894-1.065-1.373-2.333-2.596-3.568-3.828-26.395-26.351-52.796-52.697-79.216-79.023-.96-.956-2.126-1.706-3.517-2.806Z" />
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
@else
|
||||
<li>
|
||||
<a class="pb-[4px]"
|
||||
href="{{ $is_news
|
||||
? ($category['id'] == 0
|
||||
? route('NewsCategorySimple', ['page' => $blogs->currentPage() - 1])
|
||||
: route('NewsCategory.show.page', ['slug' => $slug, 'page' => $blogs->currentPage() - 1]))
|
||||
: route('CategoryBlogSimple', ['slug' => $slug, 'page' => $blogs->currentPage() - 1]).'/' }}"
|
||||
wire:navigate rel="prev">
|
||||
<svg style="width: 12px; height: 12px" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 233.91 226.965">
|
||||
<path d="M91.264,113.926c7.785-7.807,14.811-14.878,21.865-21.921,20.745-20.71,41.523-41.387,62.244-62.121,7.631-7.635,7.275-18.796-.662-24.879-5.824-4.463-14.02-4.42-19.781,.152-1.071,.85-2.04,1.834-3.01,2.803-30.792,30.774-61.581,61.55-92.362,92.334-8.813,8.814-8.798,17.48,.051,26.329,30.87,30.872,61.777,61.706,92.6,92.625,5.006,5.022,10.648,7.376,17.58,5.229,10.645-3.298,14.599-16.097,7.775-24.894-1.065-1.373-2.333-2.596-3.568-3.828-26.395-26.351-52.796-52.697-79.216-79.023-.96-.956-2.126-1.706-3.517-2.806Z" />
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
@endif
|
||||
@endif
|
||||
{{-- Page Numbers: show only 2 before and 2 after current --}}
|
||||
@for ($page = max(1, $blogs->currentPage() - 2); $page <= min($blogs->lastPage(), $blogs->currentPage() + 2); $page++)
|
||||
@if ($page == $blogs->currentPage())
|
||||
<li class="active"><span>{{ $page }}</span></li>
|
||||
@else
|
||||
@if($page == 1)
|
||||
<li>
|
||||
<a href="{{ $is_news
|
||||
? ($category['id'] == 0
|
||||
? route('NewsCategory.index')
|
||||
: route('NewsCategory.show', ['slug' => $slug]))
|
||||
: route('CategoryBlog.index', ['slug' => $slug]).'/' }}"
|
||||
wire:navigate>{{ $page }}</a>
|
||||
</li>
|
||||
@else
|
||||
<li>
|
||||
<a href="{{ $is_news
|
||||
? ($category['id'] == 0
|
||||
? route('NewsCategorySimple', ['page' => $page])
|
||||
: route('NewsCategory.show.page', ['slug' => $slug, 'page' => $page]))
|
||||
: route('CategoryBlogSimple', ['slug' => $slug, 'page' => $page]).'/' }}"
|
||||
wire:navigate>{{ $page }}</a>
|
||||
</li>
|
||||
@endif
|
||||
@endif
|
||||
@endfor
|
||||
|
||||
{{-- Next + Last (only show if not on last page) --}}
|
||||
@if ($blogs->hasMorePages())
|
||||
<li>
|
||||
<a class="pb-[4px]"
|
||||
href="{{ $is_news
|
||||
? ($category['id'] == 0
|
||||
? route('NewsCategorySimple', ['page' => $blogs->currentPage() + 1])
|
||||
: route('NewsCategory.show.page', ['slug' => $slug, 'page' => $blogs->currentPage() + 1]))
|
||||
: route('CategoryBlogSimple', ['slug' => $slug, 'page' => $blogs->currentPage() + 1]).'/' }}"
|
||||
wire:navigate rel="next">
|
||||
<svg style="width: 12px; height: 12px" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 233.91 226.965">
|
||||
<path d="M142.646,112.233c-7.785-7.807-14.811-14.878-21.865-21.921-20.745-20.71-41.523-41.387-62.244-62.121-7.631-7.635-7.275-18.796,.662-24.879,5.824-4.463,14.02-4.42,19.781,.152,1.071,.85,2.04,1.834,3.01,2.803,30.792,30.774,61.581,61.55,92.362,92.334,8.813,8.814,8.798,17.48-.051,26.329-30.87,30.872-61.777,61.706-92.6,92.625-5.006,5.022-10.648,7.376-17.58,5.229-10.645-3.298-14.599-16.097-7.775-24.894,1.065-1.373,2.333-2.596,3.568-3.828,26.395-26.351,52.796-52.697,79.216-79.023,.96-.956,2.126-1.706,3.517-2.806Z" />
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="pb-[4px]"
|
||||
href="{{ $is_news
|
||||
? ($category['id'] == 0
|
||||
? route('NewsCategorySimple', ['page' => $blogs->lastPage()])
|
||||
: route('NewsCategory.show.page', ['slug' => $slug, 'page' => $blogs->lastPage()]))
|
||||
: route('CategoryBlogSimple', ['slug' => $slug, 'page' => $blogs->lastPage()]).'/' }}"
|
||||
wire:navigate rel="last">
|
||||
<svg style="width: 12px; height: 12px" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 233.91 226.965">
|
||||
<path d="M94.81,113.926c-7.785-7.807-14.811-14.878-21.865-21.921C52.199,71.296,31.422,50.618,10.7,29.885c-7.631-7.635-7.275-18.796,.662-24.879,5.824-4.463,14.02-4.42,19.781,.152,1.071,.85,2.04,1.834,3.01,2.803,30.792,30.774,61.581,61.55,92.362,92.334,8.813,8.814,8.798,17.48-.051,26.329-30.87,30.872-61.777,61.706-92.6,92.625-5.006,5.022-10.648,7.376-17.58,5.229-10.645-3.298-14.599-16.097-7.775-24.894,1.065-1.373,2.333-2.596,3.568-3.828,26.395-26.351,52.796-52.697,79.216-79.023,.96-.956,2.126-1.706,3.517-2.806Z" />
|
||||
<path d="M190.194,113.46c-7.308-7.331-14.332-14.404-21.387-21.447-20.573-20.538-41.144-41.078-61.751-61.582-4.559-4.537-6.232-9.891-4.569-16.05,1.631-6.039,5.739-9.877,11.817-11.285,5.789-1.341,10.825,.331,15.034,4.542,11.729,11.737,23.476,23.456,35.212,35.187,19.236,19.228,38.475,38.454,57.701,57.693,8.661,8.666,8.718,17.444,.124,26.044-30.958,30.975-62.066,61.802-92.832,92.966-9.589,9.713-24.356,6.018-27.766-5.415-1.972-6.612-.065-12.214,4.786-17.025,12.492-12.387,24.921-24.836,37.373-37.262,14.661-14.629,29.321-29.258,43.976-43.892,.696-.695,1.336-1.444,2.282-2.474Z" />
|
||||
</svg>
|
||||
</a>
|
||||
</li>
|
||||
@endif
|
||||
|
||||
</ul>
|
||||
</nav>
|
||||
@endif
|
||||
|
||||
@section('metaSEO')
|
||||
<meta name="description"
|
||||
content="مطالب مربوط به {{ $title }} را می توانید از این دسته بندی مشاهده کنید" />
|
||||
@if ($blogs->currentPage() > 1)
|
||||
@if ($blogs->currentPage() == 2)
|
||||
<link rel="prev"
|
||||
href="{{ $is_news ? route('NewsCategory.index', ['slug' => $slug]) : route('CategoryBlog.index', ['slug' => $slug]) .'/'}}" />
|
||||
@else
|
||||
<link rel="prev"
|
||||
href="{{ $is_news ? route('NewsCategorySimple', ['slug' => $slug, 'page' => $blogs->currentPage() - 1]) : route('CategoryBlogSimple', ['slug' => $slug, 'page' => $blogs->currentPage() - 1]) .'/'}} " />
|
||||
@endif
|
||||
@endif
|
||||
<link rel="canonical"
|
||||
href="{{ $is_news ? route('NewsCategory.index', ['slug' => $slug]).'/' : route('CategoryBlog.index', ['slug' => $slug]).'/' }}" />
|
||||
<link rel="next"
|
||||
href="{{ $blogs->currentPage() < $blogs->lastPage() ? ($is_news ? route('NewsCategorySimple', ['slug' => $slug, 'page' => $blogs->currentPage() + 1]) : route('CategoryBlogSimple', ['slug' => $slug, 'page' => $blogs->currentPage() + 1])) : '' }}/" />
|
||||
<meta property="og:locale" content="fa_IR" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:title" content="دسته بندی مطالب {{ $title }} - سرمایه گذاری اهرم" />
|
||||
<meta property="og:description"
|
||||
content="مطالب مربوط به {{ $title }} را می توانید از این دسته بندی مشاهده کنید" />
|
||||
<meta property="og:url" content="{{ url()->current() }}/" />
|
||||
<meta property="og:site_name" content="مجله خبری سرمایه گذاری اهرم" />
|
||||
@if (!$is_news && $slug == 'all')
|
||||
<meta name='robots'
|
||||
content='noindex, nofollow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' />
|
||||
@endif
|
||||
@endsection
|
||||
@else
|
||||
<div class="text-center text-gray-500">
|
||||
هیچ مطلبی یافت نشد.
|
||||
</div>
|
||||
@section('metaSEO')
|
||||
<meta name="description"
|
||||
content="مطالب مربوط به {{ $title }} را می توانید از این دسته بندی مشاهده کنید" />
|
||||
<meta property="og:locale" content="fa_IR" />
|
||||
<meta property="og:type" content="article" />
|
||||
<meta property="og:title" content="دسته بندی مطالب {{ $title }} - سرمایه گذاری اهرم" />
|
||||
<meta property="og:description"
|
||||
content="مطالب مربوط به {{ $title }} را می توانید از این دسته بندی مشاهده کنید" />
|
||||
<meta property="og:url" content="{{ url()->current() }}/" />
|
||||
<meta property="og:site_name" content="مجله خبری سرمایه گذاری اهرم" />
|
||||
@if (!$is_news && $slug == 'all')
|
||||
<meta name='robots'
|
||||
content='noindex, nofollow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' />
|
||||
@endif
|
||||
@endsection
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@script
|
||||
<script>
|
||||
document.addEventListener('livewire:update', () => {
|
||||
const alpineComponent = document.querySelector('[x-data]');
|
||||
if (alpineComponent && alpineComponent.__x) {
|
||||
alpineComponent.__x.$data.loadCats();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@endscript
|
||||
25
resources/views/livewire/dictionary.blade.php
Normal file
25
resources/views/livewire/dictionary.blade.php
Normal file
@@ -0,0 +1,25 @@
|
||||
@push('style_css')
|
||||
<style>
|
||||
.max-w-5xl {
|
||||
max-width: 1600px !important;
|
||||
}
|
||||
|
||||
.max-w-4xl {
|
||||
max-width: 1400px !important;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
<div>
|
||||
<div class="visible relative z-10 mx-auto flex max-w-5xl flex-col px-4 py-20 lg:flex-col">
|
||||
<h2 class="pb-4 border-b mb-4 text-[22px] lg:text-[26px]">
|
||||
فرهنگ لغت
|
||||
</h2>
|
||||
<div class="flex flex-nowrap items-center gap-3">
|
||||
@foreach ($dictionareis as $item)
|
||||
<a class="p-4 border rounded-xl shadow" href="{{ url('/dictionary/show/' . $item->id) }}"
|
||||
wire:navigate>{{ $item->title }}</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
804
resources/views/livewire/home.blade.php
Normal file
804
resources/views/livewire/home.blade.php
Normal file
@@ -0,0 +1,804 @@
|
||||
@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%;
|
||||
|
||||
}
|
||||
</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">
|
||||
<button
|
||||
class="fixed hidden left-4 bottom-4 z-20 rounded-2xl bg-ahrom p-3 text-white opacity-0 transition-opacity ease-out lg:bottom-6 lg:left-6 lg:p-4"
|
||||
id="btnGoTop" title="Go to top">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
||||
stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6">
|
||||
<polyline points="18 15 12 9 6 15"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
@if (count($blogs2) > 0)
|
||||
<div href="#"
|
||||
class="text-black hidden mb-3 font-bold px-4 pt-10 lg:my-8 text-[16px] lg:text-[20px] text-start items-center gap-2">
|
||||
<span> مطالب منتخب</span>
|
||||
</div>
|
||||
<div x-cloak x-show="window.innerWidth > 1024 "
|
||||
class="visible relative z-10 mx-auto max-w-5xl mb-5 flex-col items-center px-4 lg:flex-row lg:justify-between no-scrollbar">
|
||||
<div class=" w-full mt-3">
|
||||
@php
|
||||
$step = 0;
|
||||
@endphp
|
||||
<div
|
||||
class="lg:grid mb-0 mt-5 lg:my-5 flex lg:grid-cols-2 gap-4 lg:gap-1 lg:h-[60vh] overflow-scroll lg:overflow-hidden no-scrollbar">
|
||||
@foreach ($blogs2 as $key => $item)
|
||||
@php
|
||||
if ($step == 0) {
|
||||
$count = 0;
|
||||
$step = 1;
|
||||
}
|
||||
@endphp
|
||||
@endforeach
|
||||
@if (isset($blogs2[$count]) )
|
||||
<div lazy class="col-span-1 grid-cols-1 h-full ">
|
||||
<div
|
||||
class="relative group rounded-xl overflow-hidden h-[200px] lg:h-full lg:w-auto w-[300px]">
|
||||
<a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}" wire:navigate
|
||||
class="w-full group-hover:transform group-hover:scale-110 duration-700 h-full absolute rounded-xl">
|
||||
<img src="{{ env('APP_URL_IMAGE').'images/'.$blogs2[$count]->image }}"
|
||||
alt="{{ $blogs2[$count]->slug }}" class="bg-cover bg-center w-full h-full ">
|
||||
</a>
|
||||
<a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}" wire:navigate>
|
||||
<div class="relative p-6 lg:p-7 h-full text-white rounded-xl overflow-hidden">
|
||||
@if (true)
|
||||
<div
|
||||
class="w-[120px] pt-[16px] pb-[3px] items-center content-center -left-[48px] -rotate-45 flex justify-center bg-[#2163E8] absolute -top-[8px]">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
|
||||
viewBox="0 0 576 512">
|
||||
<path fill="#ffffff"
|
||||
d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" />
|
||||
</svg>
|
||||
</div>
|
||||
@endif
|
||||
<div class="h-full flex flex-col gap-2 justify-end">
|
||||
|
||||
<div class="text-white text-sm">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
@php
|
||||
$count++;
|
||||
@endphp
|
||||
</div>
|
||||
@endif
|
||||
<div class="col-span-1 lg:grid flex lg:grid-rows-2 gap-1">
|
||||
|
||||
<div class="row-span-1 lg:grid lg:grid-cols-2 flex gap-4 lg:gap-1 ">
|
||||
@if (isset($blogs2[$count]) )
|
||||
<div class="relative group rounded-xl overflow-hidden h-full lg:w-auto w-[300px]">
|
||||
<a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}"
|
||||
wire:navigate
|
||||
class="w-full group-hover:transform group-hover:scale-110 duration-700 h-full absolute rounded-xl">
|
||||
<img src="{{ env('APP_URL_IMAGE').'images/'.$blogs2[$count]->image }}"
|
||||
alt="{{ $blogs2[$count]->slug }}"
|
||||
class="bg-cover bg-center w-full h-full ">
|
||||
</a>
|
||||
<a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}"
|
||||
wire:navigate>
|
||||
<div class="relative p-7 h-full text-white rounded-xl overflow-hidden">
|
||||
@if (true)
|
||||
<div
|
||||
class="w-[120px] pt-[16px] pb-[3px] items-center content-center -left-[48px] -rotate-45 flex justify-center bg-[#2163E8] absolute -top-[8px]">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20"
|
||||
height="20" viewBox="0 0 576 512">
|
||||
<path fill="#ffffff"
|
||||
d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" />
|
||||
</svg>
|
||||
</div>
|
||||
@endif
|
||||
<div class="h-full flex flex-col gap-2 justify-end">
|
||||
|
||||
<div class="text-white text-sm">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@php
|
||||
$count++;
|
||||
@endphp
|
||||
@endif
|
||||
@if (isset($blogs2[$count]) )
|
||||
<div class="relative group rounded-xl overflow-hidden h-full lg:w-auto w-[300px]">
|
||||
<a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}"
|
||||
wire:navigate
|
||||
class="w-full group-hover:transform group-hover:scale-110 duration-700 h-full absolute rounded-xl">
|
||||
<img src="{{ env('APP_URL_IMAGE').'images/'.$blogs2[$count]->image }}"
|
||||
alt="{{ $blogs2[$count]->slug }}"
|
||||
class="bg-cover bg-center w-full h-full ">
|
||||
</a>
|
||||
<a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}"
|
||||
wire:navigate>
|
||||
<div class="relative p-7 h-full text-white rounded-xl overflow-hidden">
|
||||
@if (true)
|
||||
<div
|
||||
class="w-[120px] pt-[16px] pb-[3px] items-center content-center -left-[48px] -rotate-45 flex justify-center bg-[#2163E8] absolute -top-[8px]">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20"
|
||||
height="20" viewBox="0 0 576 512">
|
||||
<path fill="#ffffff"
|
||||
d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" />
|
||||
</svg>
|
||||
</div>
|
||||
@endif
|
||||
<div class="h-full flex flex-col gap-2 justify-end">
|
||||
|
||||
<div class="text-white text-sm">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@php
|
||||
$count++;
|
||||
@endphp
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="row-span-1 lg:grid lg:grid-cols-2 flex gap-4 lg:gap-1">
|
||||
{{-- order 3 --}}
|
||||
@if (isset($blogs2[$count]) )
|
||||
<div class="col-span-1 ">
|
||||
<div
|
||||
class="relative group rounded-xl overflow-hidden h-[200px] lg:h-full lg:w-auto w-[300px]">
|
||||
<a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}"
|
||||
wire:navigate
|
||||
class="w-full group-hover:transform group-hover:scale-110 duration-700 h-full absolute rounded-xl">
|
||||
<img src="{{ env('APP_URL_IMAGE').'images/'.$blogs2[$count]->image }}"
|
||||
alt="{{ $blogs2[$count]->slug }}"
|
||||
class="bg-cover bg-center w-full h-full ">
|
||||
</a>
|
||||
<a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}"
|
||||
wire:navigate>
|
||||
<div
|
||||
class="relative p-6 lg:p-7 h-full text-white rounded-xl overflow-hidden">
|
||||
@if (true)
|
||||
<div
|
||||
class="w-[120px] pt-[16px] pb-[3px] items-center content-center -left-[48px] -rotate-45 flex justify-center bg-[#2163E8] absolute -top-[8px]">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20"
|
||||
height="20" viewBox="0 0 576 512">
|
||||
<path fill="#ffffff"
|
||||
d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" />
|
||||
</svg>
|
||||
</div>
|
||||
@endif
|
||||
<div class="h-full flex flex-col gap-2 justify-end">
|
||||
<div class=" flex-wrap gap-2 items-center hidden lg:flex">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="text-white text-sm">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@php
|
||||
$count++;
|
||||
@endphp
|
||||
</div>
|
||||
@endif
|
||||
|
||||
|
||||
@if (isset($blogs2[$count]) )
|
||||
<div class="col-span-1 ">
|
||||
<div
|
||||
class="relative group rounded-xl overflow-hidden h-[200px] lg:h-full lg:w-auto w-[300px]">
|
||||
<a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}"
|
||||
wire:navigate
|
||||
class="w-full group-hover:transform group-hover:scale-110 duration-700 h-full absolute rounded-xl">
|
||||
<img src="{{ env('APP_URL_IMAGE').'images/'.$blogs2[$count]->image }}"
|
||||
alt="{{ $blogs2[$count]->slug }}"
|
||||
class="bg-cover bg-center w-full h-full ">
|
||||
</a>
|
||||
<a href="{{ route('detail', ['slug' => $blogs2[$count]->slug]) . '/' }}"
|
||||
wire:navigate>
|
||||
<div
|
||||
class="relative p-6 lg:p-7 h-full text-white rounded-xl overflow-hidden">
|
||||
@if (true)
|
||||
<div
|
||||
class="w-[120px] pt-[16px] pb-[3px] items-center content-center -left-[48px] -rotate-45 flex justify-center bg-[#2163E8] absolute -top-[8px]">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20"
|
||||
height="20" viewBox="0 0 576 512">
|
||||
<path fill="#ffffff"
|
||||
d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" />
|
||||
</svg>
|
||||
</div>
|
||||
@endif
|
||||
<div class="h-full flex flex-col gap-2 justify-end">
|
||||
<div class=" flex-wrap gap-2 items-center hidden lg:flex">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="text-white text-sm">
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@php
|
||||
$count++;
|
||||
@endphp
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div x-cloak x-data="{ show: window.innerWidth < 1024 }" x-show="show"
|
||||
class="visible relative z-10 mt-10 mb-5 mx-auto max-w-5xl flex-col items-center px-4 lg:flex-row lg:justify-between no-scrollbar">
|
||||
<div class="slider-container gap-4 no-scrollbar w-full ">
|
||||
@php
|
||||
$step = 0;
|
||||
@endphp
|
||||
@foreach ($blogs2 as $key => $item)
|
||||
@if (isset($item) )
|
||||
<div class="col-span-1 grid-cols-1 h-full slider-item">
|
||||
<div class="relative group rounded-xl overflow-hidden h-[200px] lg:h-full lg:w-auto ">
|
||||
<a href="{{ route('detail', ['slug' => $item->slug]) . '/' }}" wire:navigate
|
||||
class="w-full group-hover:transform group-hover:scale-110 duration-700 h-full absolute rounded-xl">
|
||||
<img src="{{ env('APP_URL_IMAGE').'images/'.$item->image }}"
|
||||
alt="{{ $item->slug }}"
|
||||
class="bg-cover bg-center w-full h-full">
|
||||
</a>
|
||||
<a href="{{ route('detail', ['slug' => $item->slug]) . '/' }}" wire:navigate>
|
||||
<div class="relative p-6 lg:p-7 h-full text-white rounded-xl overflow-hidden">
|
||||
@if (true)
|
||||
<div
|
||||
class="w-[120px] pt-[16px] pb-[3px] items-center content-center -left-[48px] -rotate-45 flex justify-center bg-[#2163E8] absolute -top-[8px]">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
|
||||
viewBox="0 0 576 512">
|
||||
<path fill="#ffffff"
|
||||
d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z" />
|
||||
</svg>
|
||||
</div>
|
||||
@endif
|
||||
<div class="h-full flex flex-col gap-2 justify-end">
|
||||
|
||||
<div class="text-white text-sm"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<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 class="md:block hidden">--}}
|
||||
{{-- @if ($selectedCategoryPosts)--}}
|
||||
{{-- @foreach ($categories as $item)--}}
|
||||
{{-- @if (count($item->blogs) > 0 && $selectedCategoryPosts == $item->id)--}}
|
||||
{{-- <a class="text-[#16205b] rounded-xl px-2 text-[16px]"--}}
|
||||
{{-- href=" {{ route('CategoryBlog.index', ['slug' => $item->slug]) . '/' }}"--}}
|
||||
{{-- wire:navigate>مشاهده همه</a>--}}
|
||||
{{-- @endif--}}
|
||||
{{-- @endforeach--}}
|
||||
{{-- @else--}}
|
||||
{{-- <a class="text-[#16205b] rounded-xl px-2 text-[16px]"--}}
|
||||
{{-- href=" {{ route('CategoryBlog.index', ['slug' => 'all']) . '/' }}" wire:navigate>مشاهده--}}
|
||||
{{-- همه</a>--}}
|
||||
{{-- @endif--}}
|
||||
{{-- </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) > 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
|
||||
class="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 flex-col justify-center hidden md:flex">
|
||||
{{ $blog->user->full_name }}
|
||||
</div>
|
||||
<span style="font-variation-settings: 'wght' 500;"
|
||||
class="text-xs text-[#A0A4BC] 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 hidden md: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]">{{ convertEnglishToPersianNumber($blog->reed_time) }} دقیقه</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
@else
|
||||
@foreach ($lastNewsPosts as $blog)
|
||||
<div
|
||||
class="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 flex-col justify-center hidden md:flex">
|
||||
{{ $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]">{{ convertEnglishToPersianNumber($blog->reed_time) }} دقیقه</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
@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 class="md:block hidden">--}}
|
||||
{{-- @if ($selectedCategoryNews)--}}
|
||||
{{-- @foreach ($categorieNews as $item)--}}
|
||||
{{-- @if (!is_null($item->parent_id) && $selectedCategoryNews == $item->id)--}}
|
||||
{{-- <a class="text-[#16205b] rounded-xl px-2 text-[16px]"--}}
|
||||
{{-- href=" {{ route('NewsCategory.show', ['slug' => $item->slug]) . '/' }}"--}}
|
||||
{{-- wire:navigate>مشاهده همه</a>--}}
|
||||
{{-- @endif--}}
|
||||
{{-- @endforeach--}}
|
||||
{{-- @else--}}
|
||||
{{-- <a class="text-[#16205b] rounded-xl px-2 text-[16px]"--}}
|
||||
{{-- href=" {{ route('NewsCategory.index') . '/' }}" wire:navigate>مشاهده همه</a>--}}
|
||||
{{-- @endif--}}
|
||||
{{-- </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('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="selectCategory({{ $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
|
||||
class="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 flex-col justify-center hidden md:flex">
|
||||
{{ $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]">{{ convertEnglishToPersianNumber($blog->reed_time) }} دقیقه</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
@else
|
||||
@foreach ($lastNewsArticles as $blog)
|
||||
<div
|
||||
class="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 flex-col justify-center hidden md:flex">
|
||||
{{ $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
|
||||
@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>
|
||||
|
||||
</div>
|
||||
104
resources/views/livewire/home/_comment.blade.php
Normal file
104
resources/views/livewire/home/_comment.blade.php
Normal file
@@ -0,0 +1,104 @@
|
||||
@php
|
||||
$comments = App\Models\Comment::find($comments['id']);
|
||||
$counter = count($comments->other) ;
|
||||
@endphp
|
||||
@foreach ($comments->other as $other_comment)
|
||||
<div class=" relative">
|
||||
<div>
|
||||
@if ($other_comment->status == 1)
|
||||
<div>
|
||||
<div class="flex flex-col gap-3 my-3 @if( $counter > 1) border-b @endif">
|
||||
<div x-data="{ reply_id: 0 }">
|
||||
<div class="relative rounded-xl mr-10 flex gap-4">
|
||||
<div class="flex w-[64px]">
|
||||
<img wire:ignore alt="" class=" rounded-full w-[50px] h-[50px] md:w-[60px] md:h-[60px]" src="{{ asset('image/profile/'.$other_comment->image_url) }}">
|
||||
</div>
|
||||
<div class="flex flex-col gap-5 w-full">
|
||||
<div class="flex items-center justify-between gap-1">
|
||||
<span class="text_class font-bold text-[14px] text-[#6a7196]"> {{Str::limit($other_comment->name, 25, '...') }} </span>
|
||||
<span class=" text_class font-bold text-[14px] text-[#6a7196] ">
|
||||
{{ how_long($other_comment->created_at) }}</span>
|
||||
</div>
|
||||
<p class="text-[#6a7196] text-[14px]">{{ $other_comment->message }}</p>
|
||||
<div class="flex gap-10">
|
||||
<div class="flex flex-col justify-end">
|
||||
<button type="button" @click="reply_id = {{ $other_comment->id }}">
|
||||
<div class="flex gap-1 items-center content-center">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16.000000 16.000000" preserveAspectRatio="xMidYMid meet">
|
||||
<g transform="translate(0.000000,16.000000) scale(0.100000,-0.100000)" fill="#4f5053" stroke="none">
|
||||
<path d="M131 123 c-2 -29 -27 -53 -56 -53 -18 0 -23 4 -18 16 8 21 -16 14 -31 -8 -7 -12 -6 -21 3 -32 17 -20 32 -21 25 -1 -5 12 2 15 29 15 42 0 60 19 54 57 -3 21 -4 22 -6 6z" />
|
||||
</g>
|
||||
</svg>
|
||||
<span class=" text-[14px] text-[#a0a4bc]">پاسخ</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div x-cloak @click.outside="reply_id = 0" x-show="reply_id == {{ $other_comment->id }}" class="mt-5">
|
||||
<form x-data="{ name_reply:'', message_reply:'' , timeout:null , errors: {},selected: null,
|
||||
imageName: '',
|
||||
submit(){
|
||||
if(this.timeout) {
|
||||
return;
|
||||
}
|
||||
if (this.imageName == '') {
|
||||
this.errors.imageName = 'انتخاب تصویر الزامی است.';
|
||||
}
|
||||
if(this.message_reply == ''){
|
||||
this.errors.message_reply = 'متن نمیتواند خالی باشد.' ;
|
||||
}
|
||||
if( Object.keys(this.errors).length == 0){
|
||||
$wire.set('image_url' , this.imageName );
|
||||
|
||||
$wire.reply({{ $comment->id }},{{ $comment->id }});
|
||||
}else{
|
||||
this.timeout = setTimeout(() => {
|
||||
this.errors = {};
|
||||
this.timeout = null;
|
||||
}, 3000);
|
||||
}
|
||||
}}">
|
||||
<div class=" border border-black flex flex-col p-3 rounded-xl">
|
||||
<input :class="errors.name_reply ? 'border-red-500' : 'border-gray-400'" style=" box-shadow: none;" x-model="name_reply" wire:model="comment_name_reply" class="bg-transparent focus:border-1 border focus:border-black focus:ring-1 my-3 p-3 resize-none placeholder-gray-600 rounded-2xl text-black" placeholder="نام شما">
|
||||
<textarea :class="errors.message_reply ? 'border-red-500' : 'border-gray-400'" style=" box-shadow: none;" x-model="message_reply" wire:model="comment_message_reply" class="bg-transparent focus:border-1 focus:border-black focus:ring-1 my-3 p-3 resize-none placeholder-gray-600 rounded-2xl pt-4 text-black" placeholder="نظر خود را بنویسید "></textarea>
|
||||
<div class="flex justify-between flex-col md:flex-row mt-3">
|
||||
<div id="selected_image" class="flex items-center gap-2 ">
|
||||
<template x-for="(src, index) in ['image/profile/1.png', 'image/profile/2.png', 'image/profile/3.png', 'image/profile/4.png', 'image/profile/5.png', 'image/profile/6.png']" :key="index">
|
||||
<img :src="src" :class="selected === index ? 'border-green-500' : 'border-gray-200'"
|
||||
class="w-10 h-10 border-2 rounded-full"
|
||||
@click="selected = index; imageName = src.split('/').pop()">
|
||||
</template>
|
||||
<span :class="errors.imageName ? 'block' : ' hidden'" x-text="errors.imageName" class="text-red-500 text-sm"></span>
|
||||
</div>
|
||||
<div class="flex items-center mt-4 md:mt-0 justify-end gap-3">
|
||||
<button @click="reply_id = 0" type="button" class="text-black p-2 px-4 w-max text-sm rounded">لغو پاسخ</button>
|
||||
<button @click="submit" type="button" class="bg-ahrom p-2 text-white text-sm px-4 w-max rounded-xl">
|
||||
<div wire:loading wire:target="comment" class=" top-5 left-10">
|
||||
<div role="status">
|
||||
<svg aria-hidden="true" class="w-5 h-5 text-gray-200 animate-spin fill-green-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor" />
|
||||
<path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill" />
|
||||
</svg>
|
||||
<span class="sr-only">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<span wire:loading.remove wire:target="comment">ارسال نظر</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@include('livewire.home._comment', ['comments' => $other_comment, 'comment' => $comment, 'blog_id' => $blog_id])
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
112
resources/views/livewire/home/_commentc.blade.php
Normal file
112
resources/views/livewire/home/_commentc.blade.php
Normal file
@@ -0,0 +1,112 @@
|
||||
@php
|
||||
$comments = App\Models\Comment::where('id' , $comments['id'])->first() ;
|
||||
@endphp
|
||||
@if (!is_null( $comments))
|
||||
@foreach ($comments->other as $other_comment)
|
||||
<div style="margin-right: 40px" class="mr-10 relative">
|
||||
<div>
|
||||
@if ($other_comment->status == 1)
|
||||
<div>
|
||||
<div class="flex flex-col gap-3 m-3">
|
||||
<div x-data="{ reply_id: 0 }">
|
||||
<div class="relative rounded-xl p-5 flex gap-4">
|
||||
<div class="flex">
|
||||
<img wire:ignore alt="" class=" rounded-full w-[60px] h-[60px]" src="{{ asset('image/profile/'.$other_comment->image_url) }}">
|
||||
</div>
|
||||
<div class="flex flex-col gap-5">
|
||||
<div class="flex gap-1">
|
||||
<span class="text_class text-[18px] text-[#1f1f20]">{{ $other_comment->name }}</span>
|
||||
|
||||
</div>
|
||||
<p class="text-black">{{ $other_comment->message }}</p>
|
||||
<div class="flex gap-10">
|
||||
<div class="flex flex-col justify-end">
|
||||
<button type="button" @click="reply_id = {{ $other_comment->id }}">
|
||||
<div class="flex gap-1 items-center content-center">
|
||||
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16.000000 16.000000" preserveAspectRatio="xMidYMid meet">
|
||||
<g transform="translate(0.000000,16.000000) scale(0.100000,-0.100000)" fill="#4f5053" stroke="none">
|
||||
<path d="M131 123 c-2 -29 -27 -53 -56 -53 -18 0 -23 4 -18 16 8 21 -16 14 -31 -8 -7 -12 -6 -21 3 -32 17 -20 32 -21 25 -1 -5 12 2 15 29 15 42 0 60 19 54 57 -3 21 -4 22 -6 6z" />
|
||||
</g>
|
||||
</svg>
|
||||
<span class="text-xs text-[#1f1f20]">پاسخ</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class=" flex text-end ms-auto">
|
||||
<span class=" text_class text-[18px] text-black ">
|
||||
{{ how_long($other_comment->created_at) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div x-cloak @click.outside="reply_id = 0" x-show="reply_id == {{ $other_comment->id }}" class="mt-5">
|
||||
<form x-data="{ name_reply:'', message_reply:'' , timeout:null , errors: {},selected: null,
|
||||
imageName: '',
|
||||
submit(){
|
||||
if(this.timeout) {
|
||||
return;
|
||||
}
|
||||
if (this.imageName == '') {
|
||||
this.errors.imageName = 'انتخاب تصویر الزامی است.';
|
||||
}
|
||||
if(this.message_reply == ''){
|
||||
this.errors.message_reply = 'متن نمیتواند خالی باشد.' ;
|
||||
}
|
||||
if( Object.keys(this.errors).length == 0){
|
||||
$wire.set('image_url' , this.imageName );
|
||||
|
||||
$wire.reply({{ $comment->id }},{{ $comment->id }});
|
||||
}else{
|
||||
this.timeout = setTimeout(() => {
|
||||
this.errors = {};
|
||||
this.timeout = null;
|
||||
}, 3000);
|
||||
}
|
||||
}}">
|
||||
<div class=" border border-black flex flex-col h-60 p-3 rounded-xl">
|
||||
<input :class="errors.name_reply ? 'border-red-500' : 'border-gray-400'" style=" box-shadow: none;" x-model="name_reply" wire:model="comment_name_reply" class="bg-transparent focus:border-2 border focus:border-black focus:ring-1 my-3 p-3 resize-none placeholder-gray-600 rounded-2xl text-black" placeholder="نام شما">
|
||||
<textarea :class="errors.message_reply ? 'border-red-500' : 'border-gray-400'" style=" box-shadow: none;" x-model="message_reply" wire:model="comment_message_reply" class="bg-transparent focus:border-2 focus:border-black focus:ring-1 my-3 p-3 resize-none placeholder-gray-600 rounded-2xl text-black" placeholder="نظر خود را بنویسید "></textarea>
|
||||
<div class="flex justify-between ">
|
||||
<div id="selected_image" class="flex items-center gap-2 justify-evenly ps-3">
|
||||
<template x-for="(src, index) in ['image/profile/1.png', 'image/profile/2.png', 'image/profile/3.png', 'image/profile/4.png', 'image/profile/5.png', 'image/profile/6.png']" :key="index">
|
||||
<img :src="src" :class="selected === index ? 'border-green-500' : 'border-gray-200'"
|
||||
class="w-10 h-10 border-2 rounded-full"
|
||||
@click="selected = index; imageName = src.split('/').pop()">
|
||||
</template>
|
||||
<span :class="errors.imageName ? 'block' : ' hidden'" x-text="errors.imageName" class="text-red-500 text-sm"></span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<button @click="reply_id = 0" type="button" class="text-white p-2 px-4 w-max text-sm rounded">لغو پاسخ</button>
|
||||
<button @click="submit" type="button" class="bg-ahrom p-2 text-white text-sm px-4 w-max rounded-xl">
|
||||
<div wire:loading wire:target="comment" class=" top-5 left-10">
|
||||
<div role="status">
|
||||
<svg aria-hidden="true" class="w-5 h-5 text-gray-200 animate-spin fill-green-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor" />
|
||||
<path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill" />
|
||||
</svg>
|
||||
<span class="sr-only">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<span wire:loading.remove wire:target="comment">ارسال نظر</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@if ($other_comment->status == 1)
|
||||
<hr>
|
||||
@endif
|
||||
<div>
|
||||
@include('livewire.home._comment', ['comments' => $other_comment, 'comment' => $comment, 'blog_id' => $blog_id])
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
@endif
|
||||
3
resources/views/livewire/home/auth/login-page.blade.php
Normal file
3
resources/views/livewire/home/auth/login-page.blade.php
Normal file
@@ -0,0 +1,3 @@
|
||||
<div>
|
||||
{{-- If your happiness depends on money, you will never be happy with yourself. --}}
|
||||
</div>
|
||||
1248
resources/views/livewire/home/detail-page.blade.php
Normal file
1248
resources/views/livewire/home/detail-page.blade.php
Normal file
File diff suppressed because it is too large
Load Diff
24
resources/views/livewire/home/dictionary.blade.php
Normal file
24
resources/views/livewire/home/dictionary.blade.php
Normal file
@@ -0,0 +1,24 @@
|
||||
@push('style_css')
|
||||
<style>
|
||||
.max-w-5xl {
|
||||
max-width: 1600px !important;
|
||||
}
|
||||
|
||||
.max-w-4xl {
|
||||
max-width: 1400px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@endpush
|
||||
<div>
|
||||
<div class=" visible relative z-10 mx-auto flex max-w-5xl flex-col px-4 py-20 lg:flex-col ">
|
||||
<h2 class="pb-4 border-b mb-4 text-[22px] lg:text-[26px]">
|
||||
فرهنگ لغت {{$dictionary->title}}
|
||||
</h2>
|
||||
<div class="flex flex-nowrap items-center gap-3">
|
||||
<p>
|
||||
{{$dictionary->subject}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
1449
resources/views/livewire/home2.blade.php
Normal file
1449
resources/views/livewire/home2.blade.php
Normal file
File diff suppressed because it is too large
Load Diff
20
resources/views/livewire/images.blade.php
Normal file
20
resources/views/livewire/images.blade.php
Normal file
@@ -0,0 +1,20 @@
|
||||
@push('style_css') <style>
|
||||
.max-w-5xl {
|
||||
max-width: 1600px !important;
|
||||
}
|
||||
</style> @endpush
|
||||
|
||||
<div class="max-w-5xl mx-auto py-20">
|
||||
<div class="grid grid-cols-8 gap-4 ">
|
||||
@foreach ($images as $image)
|
||||
<a x-data="{ loaded: false, init() { const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting && !this.loaded) { const img = new Image(); img.src = '{{ asset('images/' . $image) }}'; img.onload = () => { this.loaded = true; observer.unobserve(this.$el); }; } }); }, { rootMargin: '200px' }); observer.observe(this.$el); } }" href="#" wire:navigate style="height: 230px " class="hover:backdrop-blur cursor-pointer bg-gray-200 col-span-1 border overflow-hidden rounded-xl shadow">
|
||||
<div x-show="!loaded" class="animate-pulse flex items-center justify-center w-full h-full">
|
||||
<div role="status" class="!bg-gray-200 animate-pulse h-full w-full">
|
||||
<div class="h-full bg-gray-200 rounded-full dark:bg-gray-700 w-full mb-2.5"></div> <span class="sr-only">Loading...</span>
|
||||
</div>
|
||||
</div>
|
||||
<img height="300" x-cloak x-show="loaded" class="bg-cover bg-center border w-full h-[230px] " x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" :src="'{{ asset('images/' . $image) }}'" loading="lazy">
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
56
resources/views/livewire/partials/_nested_index.blade.php
Normal file
56
resources/views/livewire/partials/_nested_index.blade.php
Normal file
@@ -0,0 +1,56 @@
|
||||
{{-- _nested_index.blade.php --}}
|
||||
|
||||
@if($category->children->isNotEmpty())
|
||||
<div class="mb-1 border-b pb-2 ">
|
||||
<div class="flex items-center justify-between cursor-pointer mb-2 py-1 rounded">
|
||||
<a href="{{ route('CategoryBlog.index', ['slug' => $category->slug]).'/' }}" wire:navigate class=" text-sm font-medium gap-1 flex items-center mt-1 ">
|
||||
@if (!is_null($category->image_url))
|
||||
<img class="w-8 h-8 rounded" src="{{asset('image').'/'.$category->image_url}}" alt="">
|
||||
@endif
|
||||
<span>{{ $category->title }}</span>
|
||||
</a>
|
||||
|
||||
|
||||
<button x-show="loadingNested != {{$category->id}}" type="button" :disabled="loadingFetch" class="flex items-center justify-center rounded-full bg-gray-100 p-2 me-2 cursor-pointer" @click.prevent=" fetchCategoryBlogs('{{ $category->id }}', '{{ $topLevelCategory->id }}'); showLoadingAnimation('{{ $category->id }}', 'loading-anim-{{ $category->id }}') ">
|
||||
<img class="w-5 h-5" src="{{asset('image/wizard-stick.svg')}}" alt="">
|
||||
</button>
|
||||
<div id="loading-anim-{{$category->id}}" class="flex items-center justify-center rounded-full bg-gray-100 p-2 me-2 cursor-pointer" x-show="loadingNested == {{$category->id}}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pl-4 flex items-center gap-2 ">
|
||||
|
||||
@foreach($category->children->sortByDesc('priority') as $child)
|
||||
<a href="{{ route('CategoryBlog.index', ['slug' => $child->slug]).'/' }}" wire:navigate class=" text-sm font-medium gap-1 flex items-center bg-gray-100 rounded-lg px-1 py-1 mt-1 ">
|
||||
@if (!is_null($child->image_url))
|
||||
<img class="w-8 h-8 rounded" src="{{asset('image').'/'.$child->image_url}}" alt="">
|
||||
@endif
|
||||
<span>{{ $child->title }}</span>
|
||||
</a>
|
||||
@if($child->children->isNotEmpty())
|
||||
<div class="pl-4 ">
|
||||
@foreach($child->children->sortByDesc('priority') as $grandchild)
|
||||
<a href="{{ route('CategoryBlog.index', ['slug' => $grandchild->slug]) .'/'}}" wire:navigate
|
||||
class="block px-3 py-1 text-sm rounded mb-1">
|
||||
{{ $grandchild->title }}
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<div class=" border-b flex justify-between items-center mb-1 mt-1 py-1 ">
|
||||
<a href="{{ route('CategoryBlog.index', ['slug' => $category->slug]).'/' }}" wire:navigate
|
||||
class=" block text-sm w-full ">
|
||||
<span>{{ $category->title }}</span>
|
||||
</a>
|
||||
|
||||
<button x-show="loadingNested != {{$category->id}}" type="button" :disabled="loadingFetch" class="flex items-center justify-center rounded-full bg-gray-100 p-2 me-2 cursor-pointer" @click.prevent=" fetchCategoryBlogs('{{ $category->id }}', '{{ $topLevelCategory->id }}'); showLoadingAnimation('{{ $category->id }}', 'loading-anim-{{ $category->id }}') ">
|
||||
<img class="w-5 h-5" src="{{asset('image/wizard-stick.svg')}}" alt="">
|
||||
</button>
|
||||
<div id="loading-anim-{{$category->id}}" class="flex items-center justify-center rounded-full bg-gray-100 p-2 me-2 cursor-pointer" x-show="loadingNested == {{$category->id}}">
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
321
resources/views/livewire/partials/form.blade.php
Normal file
321
resources/views/livewire/partials/form.blade.php
Normal file
@@ -0,0 +1,321 @@
|
||||
<div>
|
||||
<!-- Consulting -->
|
||||
<div x-data="formCons" class="px-6 py-20 sm:px-8 lg:py-24" id="consulting">
|
||||
<div class="pb-12 text-center">
|
||||
<h2 class="pb-4 text-2xl font-bold text-slate-900 md:text-3xl">
|
||||
درخواست مشاوره
|
||||
</h2>
|
||||
<p class="text-slate-900">
|
||||
اگر برای سرمایه‌گذاری نیاز به مشاوره دارید کافیست فرم زیر را تکمیل کنید.
|
||||
</p>
|
||||
</div>
|
||||
<div class="mx-auto flex flex-col-reverse lg:grid max-w-5xl grid-cols-12 gap-4 lg:gap-6">
|
||||
<div
|
||||
class="col-span-12 flex flex-col justify-between space-y-16 rounded-2xl bg-gray-100 p-6 shadow sm:col-span-6 sm:space-y-0 lg:col-span-4">
|
||||
<div>
|
||||
<h3 class="pb-2 text-2xl font-semibold text-slate-800">
|
||||
اطلاعات تماس
|
||||
</h3>
|
||||
<p class="text-slate-900">
|
||||
از روش‌های زیر می‌توانید با ما در ارتباط باشید.
|
||||
</p>
|
||||
<p class="text-slate-900 mt-2">
|
||||
همه روزه از ساعت ۹ الی ۱۷ پاسخگوی شما هستیم.
|
||||
</p>
|
||||
</div>
|
||||
<div class="space-y-4 font-sans">
|
||||
<div class="flex items-center gap-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6">
|
||||
<rect x="5" y="2" width="14" height="20" rx="2" ry="2">
|
||||
</rect>
|
||||
<line x1="12" y1="18" x2="12.01" y2="18"></line>
|
||||
</svg>
|
||||
<a href="tel:02191558184">
|
||||
<span class="rtl inline-block align-middle font-vazir-vf text-slate-900">
|
||||
۰۲۱-۹۱۵۵۸۱۸۴
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6">
|
||||
<circle cx="12" cy="12" r="4"></circle>
|
||||
<path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94"></path>
|
||||
</svg>
|
||||
<a href="mailto:info@ahrominvest.net">
|
||||
<span class="inline-block align-middle font-vazir-vf text-slate-900">
|
||||
info@ahrominvest.ir
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black"
|
||||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6">
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
|
||||
<circle cx="12" cy="10" r="3"></circle>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
<span class="rtl inline-block align-middle font-vazir-vf text-slate-900">
|
||||
البرز، کرج، بلوار بلال، ساختمان پارسیان، طبقه ۴، واحد ۲۲
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="consultationForm"
|
||||
class="mt-4 lg:mt-0 col-span-12 grid grid-cols-12 gap-4 sm:col-span-6 lg:col-span-8">
|
||||
<input type="hidden" name="_token" value="ZnRTSHIl27iRnnZvNyonWa1QaZQ4xlfrxLPmhhis"> <input
|
||||
type="hidden" id="FTF_input" name="FTF" value="1">
|
||||
<div class="col-span-12">
|
||||
<label for="full_name"
|
||||
class="block pb-2 text-sm font-medium text-slate-900 after:text-red-600 after:content-['*']">
|
||||
نام و نام خانوادگی
|
||||
</label>
|
||||
<input wire:model="full_name" x-ref="full_name" id="full_name" type="text" name="full_name"
|
||||
class="block w-full rounded-xl border border-slate-300 bg-white p-3 text-sm placeholder-slate-400 shadow-sm focus:border-ahrom focus:outline-none focus:ring-1 focus:ring-ahrom"
|
||||
placeholder="نام و نام خانوادگی خود را وارد کنید.">
|
||||
</div>
|
||||
<div class="col-span-12">
|
||||
<label for="phone_number"
|
||||
class="block pb-2 text-sm font-medium text-slate-900 after:text-red-600 after:content-['*']">
|
||||
شماره تماس
|
||||
</label>
|
||||
<input wire:model="phone_number" dir="rtl" x-ref="phone_number" id="phone_number"
|
||||
type="tel" name="phone_number"
|
||||
class="block w-full rounded-xl border border-slate-300 bg-white p-3 text-sm placeholder-slate-400 shadow-sm focus:border-ahrom focus:outline-none focus:ring-1 focus:ring-ahrom"
|
||||
placeholder="شماره تماس خود را وارد کنید. "
|
||||
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
|
||||
min="1" maxlength="11">
|
||||
</div>
|
||||
<div class="col-span-12">
|
||||
<label for="description"
|
||||
class="block pb-2 text-sm font-medium text-slate-900 after:text-red-600 after:content-['*']">متن
|
||||
پیام
|
||||
</label>
|
||||
<textarea wire:model="description" x-ref="description" id="description" style="resize: none" name="description"
|
||||
placeholder="توضیحات خود را وارد کنید."
|
||||
class="block min-h-[10rem] w-full rounded-xl border border-slate-300 bg-white p-3 text-sm placeholder-slate-400 shadow-sm focus:border-ahrom focus:outline-none focus:ring-1 focus:ring-ahrom"></textarea>
|
||||
</div>
|
||||
<div id="errorCheck" class="text-red-400 p-4 h-7 invisible">
|
||||
خطایی پیش آمده
|
||||
</div>
|
||||
<div class="col-span-12">
|
||||
<button @click="checkFormRequest()" id="confirm_opt_button" type="button"
|
||||
class="btn w-full bg-ahrom text-white hover:bg-opacity-90 flex justify-center items-center">ارسال</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class=" lg:block hidden relative mx-auto max-w-5xl px-8 lg:px-0 pt-12 pb-24 bg-white">
|
||||
<div id="advertise_section" class="px-8">
|
||||
<div class="absolute z-10 left-5 bottom-10">
|
||||
<img class="w-96" src="https://ahrominvest.ir/page/advertise-2.png" alt="">
|
||||
</div>
|
||||
<div class="border rounded-xl border-slate-300 w-full h-full ps-16 pe-10 flex justify-between">
|
||||
<div class="py-10 flex space-x-reverse space-x-12">
|
||||
<div class="border rounded-xl border-slate-300 pt-2 pb-1 px-2 space-y-1">
|
||||
<div>
|
||||
<img src="https://ahrominvest.ir/page/qr.svg" class="w-28 h-28" alt=""
|
||||
srcset="">
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs font-black flex justify-center">برای دانلود اسکن کنید!</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col justify-between">
|
||||
<div>
|
||||
<p class="text-xl font-extrabold">سرمایه‌گذاری اهرم</p>
|
||||
<p class="text-lg font-medium">سریع و مطمئن سرمایه‌گذاری کنید.</p>
|
||||
</div>
|
||||
|
||||
<a href="#" class="flex space-x-1 space-x-reverse">
|
||||
<div>
|
||||
<p class="text-blue-500 text-lg">مشاهده لینک‌های دانلود</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-center mt-1.5">
|
||||
<svg class="w-5 h-5 fill-blue-500" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 576 512" style="rotate: 90deg">
|
||||
<path
|
||||
d="M241 337c-9.4 9.4-24.6 9.4-33.9 0L47 177c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l143 143L367 143c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9L241 337z">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="flex space-x-2 space-x-reverse">
|
||||
<div class="flex space-x-1 space-x-reverse">
|
||||
<div>
|
||||
<svg class="w-4 h-4 fill-slate-300" xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 22.773 22.773">
|
||||
<g xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
<path
|
||||
d="M15.769,0c0.053,0,0.106,0,0.162,0c0.13,1.606-0.483,2.806-1.228,3.675c-0.731,0.863-1.732,1.7-3.351,1.573 c-0.108-1.583,0.506-2.694,1.25-3.561C13.292,0.879,14.557,0.16,15.769,0z">
|
||||
</path>
|
||||
<path
|
||||
d="M20.67,16.716c0,0.016,0,0.03,0,0.045c-0.455,1.378-1.104,2.559-1.896,3.655c-0.723,0.995-1.609,2.334-3.191,2.334 c-1.367,0-2.275-0.879-3.676-0.903c-1.482-0.024-2.297,0.735-3.652,0.926c-0.155,0-0.31,0-0.462,0 c-0.995-0.144-1.798-0.932-2.383-1.642c-1.725-2.098-3.058-4.808-3.306-8.276c0-0.34,0-0.679,0-1.019 c0.105-2.482,1.311-4.5,2.914-5.478c0.846-0.52,2.009-0.963,3.304-0.765c0.555,0.086,1.122,0.276,1.619,0.464 c0.471,0.181,1.06,0.502,1.618,0.485c0.378-0.011,0.754-0.208,1.135-0.347c1.116-0.403,2.21-0.865,3.652-0.648 c1.733,0.262,2.963,1.032,3.723,2.22c-1.466,0.933-2.625,2.339-2.427,4.74C17.818,14.688,19.086,15.964,20.67,16.716z">
|
||||
</path>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<svg class="w-5 h-5 fill-slate-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||
<path
|
||||
d="M32 25.333h-32c0.318-2.896 1.328-5.672 2.948-8.094 1.245-1.922 2.911-3.531 4.88-4.708l0.547-0.302-2.693-4.547c-0.198-0.323-0.094-0.74 0.224-0.938 0.318-0.188 0.734-0.083 0.922 0.24l2.771 4.667c2.052-0.818 4.245-1.224 6.453-1.198 2.172-0.026 4.323 0.38 6.333 1.198l2.76-4.667c0.193-0.323 0.615-0.427 0.932-0.224 0.318 0.198 0.411 0.615 0.214 0.932l-2.693 4.562 0.667 0.37c1.958 1.224 3.615 2.87 4.839 4.828 1.531 2.385 2.521 5.073 2.896 7.88zM22 19.359c0 0.74 0.599 1.333 1.333 1.333s1.333-0.594 1.333-1.333c0-0.734-0.599-1.333-1.333-1.333s-1.333 0.599-1.333 1.333zM7.333 19.359c0 0.74 0.599 1.333 1.333 1.333s1.333-0.594 1.333-1.333c0-0.734-0.599-1.333-1.333-1.333s-1.333 0.599-1.333 1.333z">
|
||||
</path>"
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<p class=" text-slate-400 text-xs flex items-end">قابلیت نصب روی Android و IOS</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section id="recommend_download_app_section"
|
||||
class="fixed bottom-0 z-50 w-full bg-ahrom hidden rounded-t-xl items-center px-4">
|
||||
<div class="flex justify-between w-full py-2">
|
||||
<a href="#" class="flex space-x-2 space-x-reverse">
|
||||
<div>
|
||||
<svg class="w-10 h-10 fill-white" xmlns="http://www.w3.org/2000/svg" version="1.0"
|
||||
viewBox="0 0 720.000000 720.000000" preserveAspectRatio="xMidYMid meet">
|
||||
<g transform="translate(0.000000,720.000000) scale(0.100000,-0.100000)" stroke="none">
|
||||
<path
|
||||
d="M2790 7139 c-162 -8 -424 -38 -605 -69 -370 -63 -685 -166 -950 -311 -524 -285 -894 -805 -1060 -1489 -42 -174 -87 -508 -116 -865 -17 -206 -23 -1114 -10 -1390 21 -425 72 -851 130 -1090 136 -554 429 -1028 816 -1320 414 -311 1056 -496 1860 -535 271 -13 1209 -13 1480 0 858 41 1511 242 1934 595 378 315 652 805 766 1370 45 223 87 595 105 930 13 241 13 1043 0 1280 -20 368 -66 757 -115 982 -151 687 -529 1232 -1054 1525 -395 219 -950 354 -1596 388 -216 11 -1365 11 -1585 -1z m1023 -3701 l-1448 -1448 -405 0 -405 0 1850 1850 1850 1850 3 -402 2 -403 -1447 -1447z m965 -949 c271 -272 489 -498 486 -502 -10 -9 -1994 -9 -1994 0 0 14 995 1003 1005 1001 6 -2 232 -226 503 -499z">
|
||||
</path>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<p class="text-white font-extrabold">دانلود اپلیکیشن سرمایه‌گذاری اهرم</p>
|
||||
</div>
|
||||
</a>
|
||||
<div id="recommend_download_app_close_btn" class="flex items-center justify-center">
|
||||
<svg class="w-4 h-4 fill-white" xmlns="http://www.w3.org/2000/svg" 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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
@script
|
||||
<script>
|
||||
Alpine.data('formCons', () => ({
|
||||
status: false,
|
||||
status1: false,
|
||||
status2: false,
|
||||
|
||||
init() {
|
||||
this.$wire.on('ticket_ok', () => {
|
||||
let confirmOtpBtn = document.getElementById('confirm_opt_button');
|
||||
confirmOtpBtn.innerHTML = 'ارسال';
|
||||
confirmOtpBtn.setAttribute('disabled', false);
|
||||
alert(this.$wire.textSuccess);
|
||||
});
|
||||
},
|
||||
|
||||
checkFormRequest() {
|
||||
if (this.$refs.full_name.value.length <= 0) {
|
||||
this.$refs.full_name.classList.add('border', 'border-red-500');
|
||||
setTimeout(() => {
|
||||
this.$refs.full_name.classList.remove('border', 'border-red-500');
|
||||
}, 2000);
|
||||
} else {
|
||||
this.status = true;
|
||||
}
|
||||
|
||||
if (this.$refs.phone_number.value.length <= 0) {
|
||||
this.$refs.phone_number.classList.add('border', 'border-red-500');
|
||||
setTimeout(() => {
|
||||
this.$refs.phone_number.classList.remove('border', 'border-red-500');
|
||||
}, 2000);
|
||||
} else {
|
||||
this.status1 = true;
|
||||
}
|
||||
|
||||
if (this.$refs.description.value.length <= 0) {
|
||||
this.$refs.description.classList.add('border', 'border-red-500');
|
||||
setTimeout(() => {
|
||||
this.$refs.description.classList.remove('border', 'border-red-500');
|
||||
}, 2000);
|
||||
} else {
|
||||
this.status2 = true;
|
||||
}
|
||||
|
||||
|
||||
|
||||
if (this.status == true && this.status1 == true && this.status2 == true) {
|
||||
let confirmOtpBtn = document.getElementById('confirm_opt_button');
|
||||
confirmOtpBtn.innerHTML =
|
||||
'<div class="spinner h-6 w-6 animate-spin rounded-full border-[3px] border-white border-r-transparent dark:border-navy-300 dark:border-r-transparent"></div>';
|
||||
confirmOtpBtn.setAttribute('disabled', true);
|
||||
this.$wire.counselingRequest().then((er) => {
|
||||
let confirmOtpBtn = document.getElementById('confirm_opt_button');
|
||||
confirmOtpBtn.innerHTML = 'ارسال';
|
||||
confirmOtpBtn.setAttribute('disabled', false);
|
||||
if (er.status === 'error') {
|
||||
var errorCheck = document.getElementById('errorCheck');
|
||||
errorCheck.innerHTML = er.message;
|
||||
errorCheck.classList.remove('invisible');
|
||||
errorCheck.classList.add('text-red-500');
|
||||
|
||||
setTimeout(() => {
|
||||
errorCheck.classList.remove('text-red-500');
|
||||
errorCheck.classList.add('invisible');
|
||||
errorCheck.innerHTML = '';
|
||||
}, 2000);
|
||||
|
||||
confirmOtpBtn.innerHTML = 'ارسال';
|
||||
confirmOtpBtn.removeAttribute('disabled');
|
||||
confirmOtpBtn.setAttribute('disabled', false);
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
}));
|
||||
</script>
|
||||
@endscript
|
||||
656
resources/views/livewire/partials/header.blade.php
Normal file
656
resources/views/livewire/partials/header.blade.php
Normal file
@@ -0,0 +1,656 @@
|
||||
@push('style_css')
|
||||
<style>
|
||||
.widthSearch {
|
||||
width: 50px;
|
||||
transition: all .3s ease;
|
||||
}
|
||||
|
||||
.activSearch {
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fixed.inset-0 {
|
||||
animation: fadeIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
.max-h-[80vh]::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.max-h-[80vh]::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.max-h-[80vh]::-webkit-scrollbar-thumb {
|
||||
background: #888;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.max-h-[80vh]::-webkit-scrollbar-thumb:hover {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
<div x-data="headerPartials">
|
||||
|
||||
<header id="main_header" @keydown.window.escape=" showbackdrop = false , searchbar = false " @keydown.window.slash=" showbackdrop = true , searchbar = true , openinput() " @mouseleave="newsList = false , blogsList = false " class="z-[3000] w-full border-b translate-y-0 border-slate-200 bg-white px-6 sm:px-6 fixed h-[80px] lg:fixed top-0 ">
|
||||
<!-- Desktop Navigation -->
|
||||
<div class="max-w-5xl mx-auto justify-center h-full ">
|
||||
<div x-cloak x-show="searchbar == false" class="flex items-center justify-between h-full w-full">
|
||||
|
||||
<a @mouseenter="newsList = false , blogsList = false" href="{{ route('index').'/' }}" wire:navigate class=" lg:me-0 pe-5 select-none sm:flex sm:gap-4 sm:items-center z-20">
|
||||
<img style="width:50px;" src="{{ env('APP_URL_IMAGE').'images/static/logo.png' }}" alt="مجله خبری سرمایه گذاری اهرم ">
|
||||
<span class="h-[30px] w-[2px] bg-gray-300 "></span>
|
||||
</a>
|
||||
|
||||
<div @mouseenter="newsList = false , blogsList = false" class=" md:hidden flex items-center space-x-2 space-x-reverse" style="align-items: center">
|
||||
<button id="buttonsideM" @click=" searchbar = true , showbackdrop = true , openinput() " class="bg-gray-100 flex h-10 items-center justify-center pb-1 px-2 rounded-full w-10 z-20" type="button ">
|
||||
<svg height="20px" width="20px" class="cursor-pointer mt-1 fill-[#61676e] " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M368 208A160 160 0 1 0 48 208a160 160 0 1 0 320 0zM337.1 371.1C301.7 399.2 256.8 416 208 416C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208c0 48.8-16.8 93.7-44.9 129.1L505 471c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L337.1 371.1z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button @click="btntogglesidebar = !btntogglesidebar , btntogglesidebar == true ? document.getElementById('bodyStyle').classList.add('overflow-hidden') : document.getElementById('bodyStyle').classList.remove('overflow-hidden') , btntogglesidebar == true ? console.log('') : (document.getElementById('sideCategoryMobile').classList.add('translate-x-full') , document.getElementById('sideCategoryNotBlogMobile').classList.add('translate-x-full')) " type="button" :class="btntogglesidebar == true ? 'pe-[.4rem]' : 'pb-1 px-2'" class="bg-gray-100 duration-300 flex h-10 items-center justify-center rounded-full transition-transform w-10 z-20" id="btnToggleMenu">
|
||||
<svg :class="btntogglesidebar && 'rotate-90'" class="icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#334155" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="3" y1="10" x2="21" y2="10"></line>
|
||||
<line x1="3" y1="20" x2="21" y2="20"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
@php
|
||||
$countshow2 = 0;
|
||||
// foreach ($categories as $item) {
|
||||
// if (count($item->blogs()->where('status', 1)->get()) > 0) {
|
||||
// $countshow2++;
|
||||
// }
|
||||
// }
|
||||
$countshow2 = $categories->filter(fn($cat) => $cat->blogs->isNotEmpty())->count();
|
||||
@endphp
|
||||
|
||||
@if ($countshow2 > 0)
|
||||
<div wire:ignore.self @mouseleave="open = false, showbackdrop2 = false" class="relative 2xl:relative text-[16px] group px-[.6rem] md:flex items-center gap-1 hidden menu-link">
|
||||
<div @mousemove=" open = true, firstItemOpen = true, showbackdrop2 = true , openfirstpart()" class="flex items-center h-[76px]">
|
||||
<a href="#" wire:navigate class="flex items-center">
|
||||
<h3 class=" text-black">مطالب</h3>
|
||||
</a>
|
||||
</div>
|
||||
<svg class="hoverCancel" fill="#000" style="width:12px; height:12px; left: -50%; top: 30%;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" />
|
||||
</svg>
|
||||
|
||||
<div wire:ignore.self x-show="open" class="absolute w-[200px] -right-[10%] top-[100%] pt-2 px-2 z-10">
|
||||
<div wire:ignore.self @mouseleave=" openfirstpart()" class="bg-white shadow-lg rounded-md flex flex-col pb-2">
|
||||
@foreach($blogCategoriesTree as $index => $category)
|
||||
<div wire:ignore.self @mouseenter="newsList = false, blogsList = false, open = true @if ($index === 3 ) , openfirstpart() @else , closefirst() @endif " @if ($index===3 ) @else @mouseleave=" open = false" @endif x-data="{ open: false }" class="w-full h-[45px] text-[16px] {{ $index === 3 ? 'pt-2' : '' }} group md:flex items-center gap-1 hidden !text-gray-900 menu-link">
|
||||
<div wire:ignore.self class="flex justify-between items-center w-full px-[.6rem]">
|
||||
<a href="{{ route('CategoryBlog.index', ['slug' => $category->slug]).'/' }}" wire:navigate class="flex items-center">
|
||||
<h3 class="block px-3 py-1 text-sm rounded mb-1">
|
||||
{{ $category->title }}
|
||||
</h3>
|
||||
</a>
|
||||
@if($category->children->isNotEmpty())
|
||||
<svg class="hoverCancel" fill="#000" style="width:12px; height:12px; left: -50%; top: 30%; transform:rotate(90deg)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" />
|
||||
</svg>
|
||||
@endif
|
||||
</div>
|
||||
@if($category->children->isNotEmpty())
|
||||
@php
|
||||
$cats[] = $category->id;
|
||||
@endphp
|
||||
<div wire:ignore.self x-show="open" id="{{ $index === 3 ? 'needopen' : '' }}" class="px-4 max-h-[800px] grid grid-cols-2 gap-1 absolute right-[90%] min-h-[86%] top-[2.2%] z-10" style="width: max-content;">
|
||||
<div wire:ignore.self class="flex flex-col overflow-auto max-h-[800px] bg-white shadow-lg rounded-md p-2 border min-w-[200px] w-[800px]">
|
||||
<div wire:ignore class="">
|
||||
@foreach($category->children->sortByDesc('priority') as $child)
|
||||
@include('livewire.partials._nested_index', ['category' => $child, 'topLevelCategory' => $category])
|
||||
@endforeach
|
||||
</div>
|
||||
@if(in_array($category->id, $loadedCategories))
|
||||
<div class="mt-auto pt-2">
|
||||
<div class="z-50 mb-4 w-fit flex items-center gap-2">
|
||||
<h2 class="text-[14px] text-[#16205b] font-bold">
|
||||
<span>برخی از مطالب این بخش</span>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div wire:ignore.self class="grid grid-cols-2 items-start gap-2 relative pb-1 min-h-[210px]" x-show="!loadingStates['{{ $category->id }}'] && (!dynamicBlogs['{{ $category->id }}'] || dynamicBlogs['{{ $category->id }}'].length === 0)">
|
||||
@forelse($categoryBlogs[$category->id] ?? [] as $blog)
|
||||
<div class="col-span-1 flex items-center gap-4 p-2 h-[100px]">
|
||||
<a href="{{ route('detail', ['slug' => $blog->slug]) . '/' }}" wire:navigate class="relative w-[100px] h-[80px]">
|
||||
<img class="w-[100px] h-[80px] border rounded-xl" src="{{ env('APP_URL_IMAGE').'images/'.$blog->image }}" alt="{{ $blog->subject }}">
|
||||
</a>
|
||||
<div class="flex flex-col gap-2 h-full justify-between w-[73%]">
|
||||
<a style="line-height:28px" href="{{ route('detail', ['slug' => $blog->slug]) . '/' }}" wire:navigate class="text-[#005eb9] text-start font-bold text-[14px]">
|
||||
{!! $blog->subject !!}
|
||||
</a>
|
||||
<div class="text-xs text-gray-400 flex flex-col justify-center text-[12px]">
|
||||
{{ jdate($blog->published_at)->ago() }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="col-span-2 text-center py-4 text-gray-500">
|
||||
هیچ مطلبی یافت نشد
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
|
||||
<div class="grid grid-cols-2 items-start gap-2 relative pb-1 ">
|
||||
|
||||
<template x-if="loadingStates['{{ $category->id }}']">
|
||||
<template x-for="(text, index) in displayTexts['{{ $category->id }}'] || []" :key="index">
|
||||
<div class="col-span-1 flex items-center gap-4 p-2 h-[100px]">
|
||||
<div class="relative w-[100px] h-[80px] bg-gray-200 rounded-xl animate-pulse"></div>
|
||||
<div class="flex flex-col gap-2 h-full justify-between w-[73%]">
|
||||
<a style="line-height:28px" class="text-[#005eb9] text-start font-bold text-[14px]" x-text="text"></a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template x-if="!loadingStates['{{ $category->id }}'] && dynamicBlogs['{{ $category->id }}'] && dynamicBlogs['{{ $category->id }}'].length > 0">
|
||||
<template x-for="blog in dynamicBlogs['{{ $category->id }}']" :key="blog.slug">
|
||||
<div class="col-span-1 flex items-center gap-4 p-2 h-[100px]">
|
||||
<a :href="'/mag/' + blog.slug + '/'" wire:navigate class="relative w-[100px] h-[80px]">
|
||||
<img class="w-[100px] h-[80px] border rounded-xl" :src="blog.image" :alt="blog.subject">
|
||||
</a>
|
||||
<div class="flex flex-col gap-2 h-full justify-between w-[73%]">
|
||||
<a style="line-height:28px" :href="'/mag/' + blog.slug + '/'" wire:navigate class="text-[#005eb9] text-start font-bold text-[14px]" x-html="blog.subject"></a>
|
||||
<div class="text-xs text-gray-400 flex flex-col justify-center text-[12px]">
|
||||
<span x-text="new Date(blog.published_at).toLocaleDateString('fa-IR')"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<div class="mt-auto pt-2">
|
||||
<div class="z-50 mb-4 w-fit flex items-center gap-2">
|
||||
<h2 class="text-[14px] text-[#16205b] font-bold">
|
||||
<span>برخی از مطالب این بخش</span>
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4" x-show="!loadingStates['{{ $category->id }}'] && (!dynamicBlogs['{{ $category->id }}'] || dynamicBlogs['{{ $category->id }}'].length === 0)">
|
||||
<div class="col-span-1 flex items-center gap-4 p-2 h-[100px] 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"></div>
|
||||
<div class="h-3 bg-gray-200 rounded w-1/2"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-1 flex items-center gap-4 p-2 h-[100px] 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"></div>
|
||||
<div class="h-3 bg-gray-200 rounded w-1/2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($category->slug == 'financial-markets')
|
||||
<div class="flex flex-col border-t pt-2">
|
||||
<div class="z-50 mb-4 w-fit flex items-center gap-2 gap-y-3">
|
||||
<h2 class="text-[14px] text-[#16205b] font-bold">برترین مطالب این بخش</h2>
|
||||
</div>
|
||||
<div class="grid grid-cols-10 items-center gap-1 justify-evenly mt-2 mb-4">
|
||||
<a href="{{route('detail' , ['slug' => 'what-is-ethereum']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
|
||||
<img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-ethereum.svg'}}" alt="">
|
||||
<h5 class="text-[14px]">اتریوم</h5>
|
||||
</a>
|
||||
<a href="{{route('detail' , ['slug' => 'what-is-bitcoin']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
|
||||
<img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-bitcoin.svg'}}" alt="">
|
||||
<h5 class="text-[14px]">بیتکوین</h5>
|
||||
</a>
|
||||
<a href="{{route('detail' , ['slug' => 'what-is-solana']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
|
||||
<img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-solana.svg'}}" alt="">
|
||||
<h5 class="text-[14px]">سولانا</h5>
|
||||
</a>
|
||||
<a href="{{route('detail' , ['slug' => 'what-is-tether']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
|
||||
<img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-tether.svg'}}" alt="">
|
||||
<h5 class="text-[14px]">تتر</h5>
|
||||
</a>
|
||||
<a href="{{route('detail' , ['slug' => 'what-is-bnb']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
|
||||
<img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-bnb.svg'}}" alt="">
|
||||
<h5 class="text-[14px]">بی ان بی</h5>
|
||||
</a>
|
||||
<a href="{{route('detail' , ['slug' => 'what-is-cardano']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
|
||||
<img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-cardano.svg'}}" alt="">
|
||||
<h5 class="text-[14px]">کاردانو</h5>
|
||||
</a>
|
||||
<a href="{{route('detail' , ['slug' => 'what-is-sui']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
|
||||
<img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-sui.svg'}}" alt="">
|
||||
<h5 class="text-[14px]">سویی</h5>
|
||||
</a>
|
||||
<a href="{{route('detail' , ['slug' => 'what-is-chainlink']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
|
||||
<img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-chainlink.svg'}}" alt="">
|
||||
<h5 class="text-[14px]">چینلینک</h5>
|
||||
</a>
|
||||
<a href="{{route('detail' , ['slug' => 'what-is-tron']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
|
||||
<img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-tron.svg'}}" alt="">
|
||||
<h5 class="text-[14px]">ترون</h5>
|
||||
</a>
|
||||
<a href="{{route('detail' , ['slug' => 'what-is-dogecoin']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
|
||||
<img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-dogecoin.svg'}}" alt="">
|
||||
<h5 class="text-[14px]">دوجکوین</h5>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@if ($category->slug == 'companies')
|
||||
<div class="flex flex-col border-t pt-2">
|
||||
<div class="z-50 mb-4 w-fit flex items-center gap-2 gap-y-3">
|
||||
<h2 class="text-[14px] text-[#16205b] font-bold">برترین مطالب این بخش</h2>
|
||||
</div>
|
||||
<div class="grid grid-cols-8 items-center gap-1 justify-evenly mt-2 mb-4">
|
||||
|
||||
<a href="{{route('detail' , ['slug' => 'what-is-nvidia']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
|
||||
<img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-nvidia.svg'}}" alt="">
|
||||
<h5 class="text-[14px]">انویدیا</h5>
|
||||
</a>
|
||||
<a href="{{route('detail' , ['slug' => 'what-is-apple']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
|
||||
<img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-apple.svg'}}" alt="">
|
||||
<h5 class="text-[14px]">اپل</h5>
|
||||
</a>
|
||||
<a href="{{route('detail' , ['slug' => 'what-is-google']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
|
||||
<img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-google.svg'}}" alt="">
|
||||
<h5 class="text-[14px]">گوگل</h5>
|
||||
</a>
|
||||
<a href="{{route('detail' , ['slug' => 'what-is-tesla']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
|
||||
<img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-tesla.svg'}}" alt="">
|
||||
<h5 class="text-[14px]">تسلا</h5>
|
||||
</a>
|
||||
<a href="{{route('detail' , ['slug' => 'what-is-meta']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
|
||||
<img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-meta.svg'}}" alt="">
|
||||
<h5 class="text-[14px]">متا</h5>
|
||||
</a>
|
||||
<a href="{{route('detail' , ['slug' => 'what-is-microsoft']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
|
||||
<img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-microsoft.svg'}}" alt="">
|
||||
<h5 class="text-[14px]">مایکروسافت</h5>
|
||||
</a>
|
||||
<a href="{{route('detail' , ['slug' => 'what-is-amazon']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
|
||||
<img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-amazon.svg'}}" alt="">
|
||||
<h5 class="text-[14px]">آمازون</h5>
|
||||
</a>
|
||||
<a href="{{route('detail' , ['slug' => 'what-is-mcdonalds']).'/'}}" wire:navigate class="flex flex-col gap-1 text-center justify-center">
|
||||
<img class="w-12 h-12 mx-auto " src="{{asset('image').'/shortcut-mini-what-is-mcdonalds.svg'}}" alt="">
|
||||
<h5 class="text-[14px]">مکدونالد</h5>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@php
|
||||
$countshow = 0;
|
||||
// foreach ($categoriesNotBlog as $item) {
|
||||
// if (count($item->blogs()->where('status', 1)->get()) > 0) {
|
||||
// $countshow++;
|
||||
// }
|
||||
// }
|
||||
$countshow = $categoriesNotBlog->filter(fn($cat) => $cat->blogs->isNotEmpty())->count();
|
||||
@endphp
|
||||
|
||||
@if ($countshow > 0)
|
||||
<div @mouseenter="newsList = false , blogsList = false , showbackdrop2 = false , document.querySelector('body').classList.remove('overflow-hidden') " x-data="{ open: false }" class="relative py-6 2xl:relative text-[16px] group px-[.6rem] md:flex items-center gap-1 hidden menu-link">
|
||||
<div @mouseenter="open = true" @mouseleave="open = false" lass="flex items-center ">
|
||||
<a href="#" wire:navigate class="flex items-center">
|
||||
<h3 class=" text-black ">
|
||||
اخبار
|
||||
</h3>
|
||||
</a>
|
||||
</div>
|
||||
<div x-transition x-show="open" @mouseenter="open = true" @mouseleave="open = false" class="absolute w-[200px] -right-[10%] top-[65%] py-9 px-2 z-10 ">
|
||||
<div class="bg-white shadow-lg border rounded-md flex flex-col gap-3 py-2 ">
|
||||
@foreach ($categoriesNotBlog->sortByDesc('priority') as $item)
|
||||
@if (count($item->blog_category()) > 0)
|
||||
@if (!is_null($item->parent_id))
|
||||
{{-- @php--}}
|
||||
{{-- $parent = App\Models\Category::where( 'id', $item->parent_id, )->first();--}}
|
||||
{{-- @endphp--}}
|
||||
<a href="{{ route('NewsCategory.show', ['slug' => $item->slug]).'/' }}" wire:navigate class="block px-3 py-1 text-sm hover:bg-gray-100 rounded mb-1">
|
||||
{{ $item->fparent->title }} {{ $item->title }}
|
||||
</a>
|
||||
@endif
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
<svg x-transition class="hoverCancel" fill="#000" style="width:12px; height:12px; left: -50%; top: 30%;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z" />
|
||||
</svg>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<a @mouseenter="newsList = false , blogsList = false , showbackdrop2 = false , document.querySelector('body').classList.remove('overflow-hidden') " href="{{ route('dictionary.main') . '/' }}" wire:navigate class="menu-link text-black px-[.6rem] py-4 hidden lg:block text-[16px] ">فرهنگ لغت</a>
|
||||
|
||||
<div @mouseenter="newsList = false , blogsList = false" class="hidden md:flex ms-auto items-center gap-3">
|
||||
<button id="buttonside" @click=" searchbar = true , showbackdrop = true , openinput() " class="relative w-[70%] cursor-pointer ">
|
||||
<input @click=" searchbar = true , showbackdrop = true , openinput() " style=" border:none ; box-shadow: none;" autocomplete="off" type="text" class="block pe-4 py-3 text-sm text-gray-900 border mx-auto border-gray-300 cursor-pointer ps-10 ring-0 rounded-lg rounded-t-none md:rounded-t-lg rounded-b-none md:rounded-b-lg bg-gray-100 w-full focus:outline-none focus:ring-0 border-b disabled" placeholder="جستجوی مطالب و اخبار">
|
||||
<div class="cursor-pointer z-[3500] me-2 pb-1 absolute top-[0.48rem] right-2 w-[30px] h-[30px] rounded-md bg-gray-200">
|
||||
<div class="text-gray-500 font-bold text-[20px] pt-0.5">/</div>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<a x-data="{ menuMore: false }" @mousemove="menuMore = true " @mouseout=" newsList = false , blogsList = false " href="https://ahrominvest.ir/app" class="py-6 relative group">
|
||||
<svg class="w-[25px] h-[25px] mx-1 fill-[#334155]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M280 24c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 270.1-95-95c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9L239 369c9.4 9.4 24.6 9.4 33.9 0L409 233c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-95 95L280 24zM128.8 304L64 304c-35.3 0-64 28.7-64 64l0 80c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-80c0-35.3-28.7-64-64-64l-64.8 0-48 48L448 352c8.8 0 16 7.2 16 16l0 80c0 8.8-7.2 16-16 16L64 464c-8.8 0-16-7.2-16-16l0-80c0-8.8 7.2-16 16-16l112.8 0-48-48zM432 408a24 24 0 1 0 -48 0 24 24 0 1 0 48 0z">
|
||||
</path>
|
||||
</svg>
|
||||
<ul style=" right: -250%; " :class="menuMore || 'hidden'" class="mega-menu-container my-2 w-40 overflow-hidden rounded-xl bg-white py-2 shadow group-hover:absolute group-hover:block top-14 hidden">
|
||||
<div class=" text-center items-center justify-center flex flex-col border-slate-300 pt-2 pb-1 px-2 space-y-1">
|
||||
<div class="flex flex-nowarp gap-2 items-center">
|
||||
<img src="https://ahrominvest.ir/page/qr.svg" class="w-34 h-34" alt="" srcset="">
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs font-black flex justify-center">برای دانلود اسکن کنید!</p>
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
</a>
|
||||
<div id="header_btn_chat2" class="w-[25px] h-[25px] mx-1">
|
||||
<svg class="w-[25px] h-[25px] fill-[#334155] " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M48 256C48 141.1 141.1 48 256 48s208 93.1 208 208l0 144.1c0 22.1-17.9 40-40 40L313.6 440c-8.3-14.4-23.8-24-41.6-24l-32 0c-26.5 0-48 21.5-48 48s21.5 48 48 48l32 0c17.8 0 33.3-9.7 41.6-24l110.4 .1c48.6 0 88.1-39.4 88.1-88L512 256C512 114.6 397.4 0 256 0S0 114.6 0 256l0 40c0 13.3 10.7 24 24 24s24-10.7 24-24l0-40zm112-32l0 112c-17.7 0-32-14.3-32-32l0-48c0-17.7 14.3-32 32-32zM80 256l0 48c0 44.2 35.8 80 80 80l16 0c17.7 0 32-14.3 32-32l0-144c0-17.7-14.3-32-32-32l-16 0c-44.2 0-80 35.8-80 80zm272-32c17.7 0 32 14.3 32 32l0 48c0 17.7-14.3 32-32 32l0-112zm80 32c0-44.2-35.8-80-80-80l-16 0c-17.7 0-32 14.3-32 32l0 144c0 17.7 14.3 32 32 32l16 0c44.2 0 80-35.8 80-80l0-48z">
|
||||
</path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div @click=" showbackdrop = false , searchbar = false" wire:ignore x-show="showbackdrop" x-cloak style="z-index: 1000 ; backdrop-filter: brightness(0.5); filter: blur(8px);" class="fixed top-0 right-0 h-screen w-screen ">
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
@if ($countshow > 0)
|
||||
<div @mouseenter="newsList = false" wire:ignore x-show="newsList" x-cloak style="z-index: 1000 ; backdrop-filter: brightness(0.5); " class="absolute right-0 h-screen w-screen ">
|
||||
</div>
|
||||
@endif
|
||||
@if ($countshow2 > 0)
|
||||
<div @mouseenter="blogsList = false" wire:ignore x-show="blogsList" x-cloak style="z-index: 1000 ; backdrop-filter: brightness(0.5); " class="absolute right-0 h-screen w-screen ">
|
||||
|
||||
</div>
|
||||
@endif
|
||||
</header>
|
||||
|
||||
<div wire:ignore x-show="showbackdrop2" x-cloak style="z-index: 100 ; backdrop-filter: brightness(0.5); filter: blur(4px);" class="fixed top-0 right-0 h-screen w-screen ">
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
@script
|
||||
<script>
|
||||
Alpine.data('headerPartials', () => ({
|
||||
isFixed: false
|
||||
, btntogglesidebar: false
|
||||
, newsList: false
|
||||
, searchbar: false
|
||||
, showbackdrop: false
|
||||
, showbackdrop2: false
|
||||
, opend: false
|
||||
, open: false
|
||||
, blogsList: false
|
||||
, menuMore: false
|
||||
, firstItemOpen: true
|
||||
, text: ''
|
||||
, hoveredSubMenuIndex: null,
|
||||
|
||||
loadingStates: {}
|
||||
, loadingNested: ''
|
||||
, loadingFetch: false
|
||||
, textRotationIntervals: {}
|
||||
, tempBlogsByCat: {}
|
||||
, displayTexts: {}
|
||||
, dynamicBlogs: {}
|
||||
, currentLoadingAnimation: null
|
||||
, currentLoadingCategory: null
|
||||
, activeTab: 'posts'
|
||||
, selectedCategory: null,
|
||||
|
||||
openinput() {
|
||||
this.$nextTick(() => {
|
||||
let search = document.getElementById("inputFieldsearch");
|
||||
if (search) {
|
||||
search.focus();
|
||||
console.log("Input focused:", search);
|
||||
} else {
|
||||
console.error("Input element not found!");
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
closefirst() {
|
||||
setTimeout(() => {
|
||||
const prevOpenItem = document.querySelector('[id=\'needopen\']');
|
||||
prevOpenItem.style.display = 'none';
|
||||
}, 1);
|
||||
},
|
||||
|
||||
init() {
|
||||
let prevScrollpos = window.pageYOffset;
|
||||
window.addEventListener('scroll', () => {
|
||||
const currentScrollPos = window.pageYOffset;
|
||||
prevScrollpos = currentScrollPos;
|
||||
});
|
||||
|
||||
this.$watch('activeTab', (value) => {
|
||||
console.log('value');
|
||||
@this.set('activeTab', value);
|
||||
@this.resetCategory();
|
||||
this.selectedCategory = null;
|
||||
@this.searchBox();
|
||||
});
|
||||
|
||||
this.$watch('selectedCategory', (value) => {
|
||||
if (value) {
|
||||
console.log(value, this.activeTab);
|
||||
@this.selectCategory(value);
|
||||
}
|
||||
});
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const categoryId = entry.target.getAttribute('data-category-id');
|
||||
if (categoryId) {
|
||||
this.$wire.loadCategoryData(categoryId);
|
||||
}
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.1
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-category-id]').forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
|
||||
const cats = @json($cats);
|
||||
cats.forEach(id => {
|
||||
this.$wire.loadCategoryData(id);
|
||||
})
|
||||
|
||||
this.$wire.getLastNewsPosts(0)
|
||||
},
|
||||
|
||||
handleCategoryHover(categoryId, index) {
|
||||
this.newsList = false;
|
||||
this.blogsList = false;
|
||||
this.open = true;
|
||||
|
||||
if (!this.$wire.loadedCategories.includes(categoryId)) {
|
||||
this.$wire.loadCategoryData(categoryId);
|
||||
}
|
||||
|
||||
if (index !== 3) {
|
||||
this.closefirst();
|
||||
}
|
||||
},
|
||||
|
||||
checkInputLength() {
|
||||
if (document.getElementById('inputFieldsearch').value.length >= 3) {
|
||||
this.showbackdrop = true;
|
||||
this.$wire.searchBox();
|
||||
} else {
|
||||
this.$wire.refreshsearch();
|
||||
}
|
||||
},
|
||||
|
||||
setactiveTab(value) {
|
||||
@this.set('activeTab', value);
|
||||
@this.resetCategory();
|
||||
this.selectedCategory = null;
|
||||
@this.searchBox();
|
||||
},
|
||||
|
||||
openfirstpart() {
|
||||
setTimeout(() => {
|
||||
console.log('openfirstpart');
|
||||
const prevOpenItem = document.querySelector('[id=\'needopen\']');
|
||||
prevOpenItem.style.display = '';
|
||||
}, 1);
|
||||
|
||||
},
|
||||
|
||||
fetchCategoryBlogs(subCatId, topLevelCatId) {
|
||||
if (this.loadingStates[topLevelCatId]) return;
|
||||
|
||||
this.loadingFetch = true;
|
||||
fetch(`{{url('api/category-blogs/${subCatId}')}}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
|
||||
if (data.blogs && data.blogs.length >= 4) {
|
||||
this.dynamicBlogs[topLevelCatId] = [];
|
||||
this.loadingStates[topLevelCatId] = true;
|
||||
this.loadingNested = subCatId;
|
||||
this.startLoadingAnimation(data.blogs, topLevelCatId);
|
||||
} else {
|
||||
// this.dynamicBlogs[topLevelCatId] = [];
|
||||
this.loadingStates[topLevelCatId] = false;
|
||||
this.loadingNested = '';
|
||||
this.loadingFetch = false;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error:', error);
|
||||
this.loadingStates[topLevelCatId] = false;
|
||||
this.loadingNested = '';
|
||||
this.loadingFetch = false;
|
||||
});
|
||||
},
|
||||
|
||||
startLoadingAnimation(blogs, topLevelCatId) {
|
||||
this.tempBlogsByCat[topLevelCatId] = blogs;
|
||||
|
||||
this.displayTexts[topLevelCatId] = Array(4).fill().map(() => {
|
||||
return this.tempBlogsByCat[topLevelCatId][Math.floor(Math.random() * this.tempBlogsByCat[topLevelCatId].length)].subject;
|
||||
});
|
||||
|
||||
if (this.textRotationIntervals[topLevelCatId]) clearInterval(this.textRotationIntervals[topLevelCatId]);
|
||||
this.textRotationIntervals[topLevelCatId] = setInterval(() => {
|
||||
this.displayTexts[topLevelCatId] = (this.displayTexts[topLevelCatId] || []).map(() => {
|
||||
return this.tempBlogsByCat[topLevelCatId][Math.floor(Math.random() * this.tempBlogsByCat[topLevelCatId].length)].subject;
|
||||
});
|
||||
}, 30);
|
||||
|
||||
const randomBlogs = [];
|
||||
const blogsCopy = [...this.tempBlogsByCat[topLevelCatId]];
|
||||
for (let i = 0; i < 4; i++) {
|
||||
const randomIndex = Math.floor(Math.random() * blogsCopy.length);
|
||||
randomBlogs.push(blogsCopy.splice(randomIndex, 1)[0]);
|
||||
}
|
||||
|
||||
const imageLoadPromises = randomBlogs.map(blog => new Promise(resolve => {
|
||||
const img = new Image();
|
||||
img.src = blog.image;
|
||||
img.onload = resolve;
|
||||
img.onerror = resolve;
|
||||
}));
|
||||
const minDelayPromise = new Promise(resolve => setTimeout(resolve, 200));
|
||||
|
||||
Promise.all([...imageLoadPromises, minDelayPromise]).then(() => {
|
||||
clearInterval(this.textRotationIntervals[topLevelCatId]);
|
||||
this.dynamicBlogs[topLevelCatId] = randomBlogs;
|
||||
this.loadingStates[topLevelCatId] = false;
|
||||
this.loadingNested = '';
|
||||
});
|
||||
|
||||
this.loadingFetch = false;
|
||||
},
|
||||
|
||||
showLoadingAnimation(categoryId, containerId) {
|
||||
if (this.currentLoadingAnimation) {
|
||||
this.currentLoadingAnimation.destroy();
|
||||
this.currentLoadingAnimation = null;
|
||||
}
|
||||
|
||||
// if (this.currentLoadingCategory === categoryId) {
|
||||
// this.currentLoadingCategory = null;
|
||||
// return;
|
||||
// }
|
||||
|
||||
this.currentLoadingCategory = categoryId;
|
||||
|
||||
const animationPath = '{{ asset("loti/star-magic.json") }}';
|
||||
|
||||
const animationContainer = document.getElementById(containerId);
|
||||
|
||||
animationContainer.innerHTML = '';
|
||||
|
||||
const animDiv = document.createElement('div');
|
||||
animDiv.id = `lottie-anim-${categoryId}`;
|
||||
animDiv.style.width = '20px';
|
||||
animDiv.style.height = '20px';
|
||||
animationContainer.appendChild(animDiv);
|
||||
|
||||
this.currentLoadingAnimation = lottie.loadAnimation({
|
||||
container: animDiv
|
||||
, renderer: 'svg'
|
||||
, loop: true
|
||||
, autoplay: true
|
||||
, path: animationPath
|
||||
});
|
||||
|
||||
this.currentLoadingAnimation.setSpeed(1.5);
|
||||
}
|
||||
, }));
|
||||
|
||||
</script>
|
||||
@endscript
|
||||
163
resources/views/livewire/partials/three-col.blade.php
Normal file
163
resources/views/livewire/partials/three-col.blade.php
Normal file
@@ -0,0 +1,163 @@
|
||||
<div>
|
||||
@if (count($category->mag_blogs()) > 0)
|
||||
<div>
|
||||
<div class="text-black my-3 lg:my-8 flex text-[16px] lg:text-[20px] text-start justify-between items-center gap-2">
|
||||
<span class="font-bold flex items-center gap-2 text-[#16205b]">
|
||||
<div class="text-transparent bg-[#084642] w-[8px] h-[23px] rounded-[2px]"></div>
|
||||
مطالب {{$category->title}}
|
||||
</span>
|
||||
<a class="text-[#16205b] md:flex hidden rounded-xl px-2 text-[16px]" href="{{ route('CategoryBlog.index', ['slug' => $category->slug]) . '/' }}" 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">
|
||||
@foreach ($category->mag_blogs() as $blog)
|
||||
<div class="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-slate-100 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="text-xs text-gray-600 flex flex-col justify-center">
|
||||
{{ $blog->user->full_name }}
|
||||
</div>
|
||||
<span style="font-variation-settings: 'wght' 500;" class="text-xs text-[#A0A4BC] 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>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
<a href=" {{cleanRouteUrl('CategoryBlog.index' , ['slug' => $category->slug]).'/'}}" wire:navigate class="w-full p-3 md:hidden block mb-6 rounded-xl text-center border border-[#084642] text-[#084642]">
|
||||
مشاهده مطالب بیشتر
|
||||
</a>
|
||||
</div>
|
||||
@elseif(count($category->mag_news()) > 0)
|
||||
<div>
|
||||
<div class="text-black my-3 lg:my-8 flex text-[16px] lg:text-[20px] text-start justify-between items-center gap-2">
|
||||
<span class="font-bold flex items-center gap-2 text-[#16205b]">
|
||||
<div class="text-transparent bg-[#084642] w-[8px] h-[23px] rounded-[2px]"></div>
|
||||
@php
|
||||
$parent = App\Models\Category::where('id', $category->parent_id)->first();
|
||||
if (!is_null($parent)) {
|
||||
$parent = $parent;
|
||||
} else {
|
||||
$parent = $category;
|
||||
}
|
||||
@endphp
|
||||
{{$parent->title}} {{$category->title}}
|
||||
</span>
|
||||
<a class="text-[#16205b] md:flex hidden rounded-xl px-2 text-[16px]" href=" {{ route('NewsCategory.show', ['slug' => $category->slug]) . '/' }}" 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">
|
||||
@foreach ($category->mag_news() as $blog)
|
||||
<div class="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-slate-100 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="text-xs text-gray-600 flex flex-col justify-center">
|
||||
{{ $blog->user->full_name }}
|
||||
</div>
|
||||
<span style="font-variation-settings: 'wght' 500;" class="text-xs text-[#A0A4BC] 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>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
<a href=" {{ route('NewsCategory.show', ['slug' => $category->slug]) }}" wire:navigate class="w-full p-3 md:hidden block mb-6 rounded-xl text-center border border-[#084642] text-[#084642]">
|
||||
مشاهده مطالب بیشتر
|
||||
</a>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
170
resources/views/livewire/search.blade.php
Normal file
170
resources/views/livewire/search.blade.php
Normal file
@@ -0,0 +1,170 @@
|
||||
@push('style_css')
|
||||
<style>
|
||||
.max-w-5xl {
|
||||
max-width: 1600px !important;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
@section('robots')
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
@endsection
|
||||
<div x-data="search">
|
||||
<div @click.outside=" searchbar = false , showbackdrop = false , text = '' "
|
||||
class=" gap-4 max-w-5xl mx-auto items-center w-full justify-center px-4 py-8 md:py-4 lg:flex text-slate-900 relative">
|
||||
<div style="z-index: 1001;" class="flex flex-col w-[100%] rounded-xl">
|
||||
<h3 class="my-3 font-bold flex items-center text-[16px] lg:text-[22px] gap-2">
|
||||
<div class="text-transparent bg-[#084642] w-[8px] h-[23px] rounded-[2px] "> </div> <span>نتایج جستجو برای {{ $search }}</span>
|
||||
</h3>
|
||||
<div class="gap-2 mb-3">
|
||||
@if (count($blogsSearchs) > 0)
|
||||
<div
|
||||
class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 justify-between gap-5 my-8 md:my-4 lg:my-8 w-full">
|
||||
@foreach ($blogsSearchs as $blog)
|
||||
<div
|
||||
class="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-slate-100 md:shadow">
|
||||
<a href="{{ route('detail', ['slug' => $blog->slug]) . '/' }}" wire:navigate
|
||||
class="relative w-[80px] md:w-full">
|
||||
<img class="w-[80px] md:w-full md:h-[260px] h-[80px] rounded-xl md:rounded-b-none"
|
||||
src="{{ asset('images/' . $blog->image) . '/' }}" alt="">
|
||||
</a>
|
||||
<div
|
||||
class="flex justify-start md:justify-normal flex-col md:w-full 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="{{ asset($blog->user->picture) }}" alt="">
|
||||
</div>
|
||||
<div class="text-xs text-gray-600 flex flex-col justify-center">
|
||||
{{ $blog->user->full_name }}
|
||||
</div>
|
||||
<span style="font-variation-settings: 'wght' 500;"
|
||||
class="text-xs text-[#A0A4BC] 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>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@else
|
||||
@if (strlen($search) > 0)
|
||||
<div class="flex items-center flex-col mx-auto justify-center gap-4 my-5">
|
||||
<svg height="75px" width="75px" class="cursor-pointer me-2 "
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 512 512">
|
||||
<path
|
||||
d="M368 208A160 160 0 1 0 48 208a160 160 0 1 0 320 0zM337.1 371.1C301.7 399.2 256.8 416 208 416C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208c0 48.8-16.8 93.7-44.9 129.1L505 471c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0L337.1 371.1z" />
|
||||
</svg>
|
||||
<span class="text-slate-400">موردی یافت نشد!</span>
|
||||
</div>
|
||||
@else
|
||||
@endif
|
||||
@endif
|
||||
</div>
|
||||
@if (count($blogsSearchs) > 0)
|
||||
@if ($blogsSearchs->hasPages())
|
||||
|
||||
<nav class="mt-6">
|
||||
<ul class="pagination flex gap-4">
|
||||
@if ($blogsSearchs->onFirstPage())
|
||||
@else
|
||||
<li><a class="pb-[4px]" href="{{ url('/search?q=' . $search . '&' . 'page=' . $blogsSearchs->currentPage() - 1) }}" wire:navigate rel="prev">«</a></li>
|
||||
@endif
|
||||
|
||||
@foreach ($blogsSearchs->links()->elements as $element)
|
||||
@if (is_string($element))
|
||||
<li class="disabled"><span>{{ $element }}</span></li>
|
||||
@endif
|
||||
|
||||
@if (is_array($element))
|
||||
@foreach ($element as $page => $url)
|
||||
@if ($page == $blogsSearchs->currentPage())
|
||||
<li class="active"><span>{{ $page }}</span></li>
|
||||
@elseif(
|
||||
$page == 1 ||
|
||||
$page == $blogsSearchs->lastPage() ||
|
||||
($page >= $blogsSearchs->currentPage() - 1 && $page <= $blogsSearchs->currentPage() + 1))
|
||||
@if ($page == 1)
|
||||
<li><a href="{{ url('/search?q=' . $search) }}" wire:navigate>{{ $page }}</a></li>
|
||||
@else
|
||||
<li><a href="{{ url('/search?q=' . $search . '&' . 'page=' . $page) }}" wire:navigate>{{ $page }}</a></li>
|
||||
@endif
|
||||
@elseif($page == 2 || $page == $blogsSearchs->lastPage() - 1)
|
||||
<li class="disabled"><span class="pb-[6px]">...</span></li>
|
||||
@endif
|
||||
@endforeach
|
||||
@endif
|
||||
@endforeach
|
||||
@if ($blogsSearchs->hasMorePages())
|
||||
<li><a class="pb-[4px]" href="{{ url('/search?q=' . $search . '&' . 'page=' . $blogsSearchs->currentPage() + 1) }}" wire:navigate rel="next">»</a></li>
|
||||
@else
|
||||
@endif
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
@endif
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@script
|
||||
<script>
|
||||
Alpine.data('search', () => ({
|
||||
isFixed: false,
|
||||
btntogglesidebar: false,
|
||||
menuMore: false,
|
||||
searchbar: false,
|
||||
showbackdrop: false,
|
||||
text: '',
|
||||
init() {
|
||||
document.getElementById("buttonside").addEventListener("click", function() {
|
||||
setTimeout(() => {
|
||||
document.getElementById("inputSearchPage").focus();
|
||||
}, 100);
|
||||
});
|
||||
document.addEventListener("keydown", function(event) {
|
||||
if (event.key == "/") {
|
||||
setTimeout(() => {
|
||||
document.getElementById("inputSearchPage").focus();
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
const currentScrollPos = window.pageYOffset;
|
||||
const isScrollingUp = this.prevScrollpos > window.pageYOffset;
|
||||
const headerScroll = document.getElementById('headerScroll');
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
|
||||
checkInputLength() {
|
||||
|
||||
console.log(document.getElementById('inputSearchPage').value.length);
|
||||
if (document.getElementById('inputSearchPage').value.length >= 3) {
|
||||
|
||||
this.showbackdrop = true;
|
||||
this.$wire.searchBox();
|
||||
|
||||
} else {
|
||||
|
||||
this.$wire.refreshsearch();
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
}));
|
||||
</script>
|
||||
@endscript
|
||||
888
resources/views/livewire/server.blade.php
Normal file
888
resources/views/livewire/server.blade.php
Normal file
@@ -0,0 +1,888 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fa">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Ahrom Server Status</title>
|
||||
<script defer src="{{ asset('server_status/alpins.js') }}"></script>
|
||||
<script src="{{ asset('server_status/tailwind.js') }}"></script>
|
||||
<script src="{{ asset('server_status/index.js') }}"></script>
|
||||
<script src="{{ asset('server_status/map.js') }}"></script>
|
||||
<script src="{{ asset('server_status/worldLow.js') }}"></script>
|
||||
<style>
|
||||
/* Gauge Wrapper */
|
||||
.gauge {
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Gauge Arc */
|
||||
.gauge-arc {
|
||||
width: 100%;
|
||||
height: 200%;
|
||||
/* semicircle */
|
||||
border-radius: 50%;
|
||||
clip-path: inset(0 0 50% 0);
|
||||
--color: limegreen;
|
||||
--deg: 0deg;
|
||||
background-image: radial-gradient(closest-side,
|
||||
#1e1e1e 0%,
|
||||
#1e1e1e calc(100% - 1rem),
|
||||
transparent calc(100% - 1rem)),
|
||||
conic-gradient(from -90deg,
|
||||
var(--color) 0deg var(--deg),
|
||||
#121212 var(--deg) 180deg,
|
||||
transparent 180deg);
|
||||
transition: --color 0.6s ease, --deg 0.4s ease;
|
||||
}
|
||||
|
||||
/* Gauge Info */
|
||||
.gauge-info {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 3px;
|
||||
color: #e2e2e2;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.percent-number {
|
||||
font-size: clamp(1.3rem, 6vw, 0.6rem);
|
||||
font-weight: bold;
|
||||
color: #e2e2e2;
|
||||
}
|
||||
|
||||
.percent-sign {
|
||||
font-size: clamp(1rem, 3vw, 0.5rem);
|
||||
font-weight: bold;
|
||||
margin-left: 4px;
|
||||
transition: color 0.4s ease;
|
||||
}
|
||||
|
||||
.usage {
|
||||
/* font-size: clamp(0.7rem, 1.2vw, 0.4rem); */
|
||||
opacity: 0.85;
|
||||
text-shadow: 0 0 6px #000;
|
||||
}
|
||||
|
||||
/* Neon Badge */
|
||||
/* .neon-badge {
|
||||
font-size: 0.9rem;
|
||||
font-weight: bold;
|
||||
padding: 6px 14px;
|
||||
border-radius: 9999px;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
color: var(--badge-color, limegreen);
|
||||
text-shadow: 0 0 2px #000, 0 0 3px var(--badge-color),
|
||||
0 0 6px var(--badge-color), 0 0 12px var(--badge-color);
|
||||
box-shadow: 0 0 4px var(--badge-color),
|
||||
0 0 8px var(--badge-color),
|
||||
inset 0 0 2px rgba(255, 255, 255, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
} */
|
||||
|
||||
.grid-cols-7>div {
|
||||
padding: 4px;
|
||||
background-color: #1e1e1e;
|
||||
}
|
||||
|
||||
.col-span-5>div {
|
||||
padding: 4px;
|
||||
background-color: #1e1e1e;
|
||||
}
|
||||
|
||||
.pulse-connected {
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
|
||||
}
|
||||
|
||||
70% {
|
||||
box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 0.5s ease-in;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="bg-[#121212] h-screen overflow-hidden">
|
||||
<div x-data="fullscreenHandler()" x-init="init()"
|
||||
class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50 w-[40%]">
|
||||
<button x-show="!isFullscreen" @click="enterFullscreen()"
|
||||
class="px-5 py-32 bg-amber-500 hover:bg-amber-400 rounded-lg w-full text-6xl font-bold">
|
||||
Fullscreen mode
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div x-data="serverMetrics()" x-init="init()" class="h-full">
|
||||
<!-- Grid row at 25% of viewport height -->
|
||||
<div class="grid grid-cols-7 h-[25vh] max-h-[25vh] m-3 mb-0 items-stretch rounded-2xl gap-2">
|
||||
<!-- Cell 1: Gauge -->
|
||||
<div x-data="{
|
||||
get percent() { return data?.cpu?.usage || 0 },
|
||||
get color() {
|
||||
if (this.percent <= 50) return 'limegreen';
|
||||
if (this.percent <= 70) return 'yellow';
|
||||
return 'red';
|
||||
}
|
||||
}" class="flex flex-col items-center justify-center h-full w-full overflow-hidden rounded-2xl"
|
||||
x-effect="
|
||||
$el.querySelector('.gauge-arc').style.setProperty('--color', color);
|
||||
$el.querySelector('.gauge-arc').style.setProperty('--deg', (percent * 1.8) + 'deg');
|
||||
">
|
||||
<div class="gauge">
|
||||
<div class="gauge-arc"></div>
|
||||
<div class="gauge-info">
|
||||
<div class="flex flex-col items-center justify-center gap-2">
|
||||
<div class="flex items-center justify-center">
|
||||
<span class="percent-number leading-none" x-text="percent"></span>
|
||||
<span class="percent-sign">%</span>
|
||||
</div>
|
||||
<!-- <div class="usage text-[#e2e2e2]" x-text="used + ' MB / ' + Math.round(total/1024) + ' GB'"></div> -->
|
||||
<div class="neon-badge text-sm font-semibold">CPU Usage</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-data="{
|
||||
get percent() { return data?.memory?.usagePercent || 0 },
|
||||
get color() {
|
||||
if (this.percent <= 50) return 'limegreen';
|
||||
if (this.percent <= 70) return 'yellow';
|
||||
return 'red';
|
||||
}
|
||||
}" class="flex flex-col items-center justify-center h-full w-full overflow-hidden rounded-2xl"
|
||||
x-effect="
|
||||
$el.querySelector('.gauge-arc').style.setProperty('--color', color);
|
||||
$el.querySelector('.gauge-arc').style.setProperty('--deg', (percent * 1.8) + 'deg');
|
||||
">
|
||||
<div class="gauge">
|
||||
<div class="gauge-arc"></div>
|
||||
<div class="gauge-info">
|
||||
<div class="flex items-center justify-center">
|
||||
<span class="percent-number leading-none" x-text="percent"></span>
|
||||
<span class="percent-sign">%</span>
|
||||
</div>
|
||||
<div class="usage text-[#e2e2e2] text-xs"
|
||||
x-text="data?.memory ? `${formatBytes(data.memory.used)} / ${formatBytes(data.memory.total)}` : '--'">
|
||||
</div>
|
||||
<div class="neon-badge text-sm font-semibold">Memory Usage</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="grid grid-cols-2 col-span-5 items-stretch rounded-2xl gap-2">
|
||||
<div class="flex flex-col items-center justify-center h-full w-full text-[#e2e2e2] gap-3 rounded-2xl">
|
||||
<dt class="text-2xl font-bold text-[#e2e2e2] truncate">Uptime</dt>
|
||||
<dd class="flex items-center">
|
||||
<div class="text-xl font-semibold text-[#e2e2e2]" style="word-spacing: 190px;"
|
||||
x-text="data?.uptime ? `${data.uptime.days}d ${data.uptime.hours}h ${data.uptime.minutes}m` : '--'">
|
||||
</div>
|
||||
</dd>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center h-full w-full text-[#e2e2e2] gap-2 rounded-2xl">
|
||||
<dt class="text-2xl font-bold text-[#e2e2e2]">System Load</dt>
|
||||
<div class="grid grid-cols-3 gap-2 w-full">
|
||||
<div class="text-center flex flex-col gap-2">
|
||||
<div class="text-md font-semibold text-[#e2e2e2]">1 min</div>
|
||||
<div class="text-xl font-semibold text-[#e2e2e2]" x-text="data?.load?.one || '--'"></div>
|
||||
</div>
|
||||
<div class="text-center flex flex-col gap-2">
|
||||
<div class="text-md font-semibold text-[#e2e2e2]">5 min</div>
|
||||
<div class="text-xl font-semibold text-[#e2e2e2]" x-text="data?.load?.five || '--'"></div>
|
||||
</div>
|
||||
<div class="text-center flex flex-col gap-2">
|
||||
<div class="text-md font-semibold text-[#e2e2e2]">15 min</div>
|
||||
<div class="text-xl font-semibold text-[#e2e2e2]" x-text="data?.load?.fifteen || '--'">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Cell 1: Gauge -->
|
||||
<div x-data="{
|
||||
get percent() { return (data?.disk?.percent || '0').replace('%', '') },
|
||||
get color() {
|
||||
if (this.percent <= 50) return 'limegreen';
|
||||
if (this.percent <= 70) return 'yellow';
|
||||
return 'red';
|
||||
}
|
||||
}" class="flex flex-col items-center justify-center h-full w-full overflow-hidden rounded-2xl"
|
||||
x-effect="
|
||||
$el.querySelector('.gauge-arc').style.setProperty('--color', color);
|
||||
$el.querySelector('.gauge-arc').style.setProperty('--deg', (percent * 1.8) + 'deg');
|
||||
">
|
||||
<div class="gauge">
|
||||
<div class="gauge-arc"></div>
|
||||
<div class="gauge-info">
|
||||
<div class="flex items-center justify-center">
|
||||
<span class="percent-number leading-none" x-text="percent"></span>
|
||||
<span class="percent-sign">%</span>
|
||||
</div>
|
||||
<div class="usage text-[#e2e2e2] text-xs"
|
||||
x-text="data?.disk ? `${data.disk.used} / ${data.disk.size}` : '--'"></div>
|
||||
<div class="neon-badge text-sm font-semibold">Disk Usage</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div x-data="{
|
||||
get percent() { return parseFloat(((data?.swap?.used || 0) / 8000) * 100).toFixed(1) },
|
||||
get color() {
|
||||
if (this.percent <= 50) return 'limegreen';
|
||||
if (this.percent <= 70) return 'yellow';
|
||||
return 'red';
|
||||
}
|
||||
}" class="flex flex-col items-center justify-center h-full w-full overflow-hidden rounded-2xl"
|
||||
x-effect="
|
||||
$el.querySelector('.gauge-arc').style.setProperty('--color', color);
|
||||
$el.querySelector('.gauge-arc').style.setProperty('--deg', (percent * 1.8) + 'deg');
|
||||
">
|
||||
<div class="gauge">
|
||||
<div class="gauge-arc"></div>
|
||||
<div class="gauge-info">
|
||||
<div class="flex items-center justify-center">
|
||||
<span class="percent-number leading-none" x-text="percent"></span>
|
||||
<span class="percent-sign">%</span>
|
||||
</div>
|
||||
<div class="usage text-[#e2e2e2] text-xs"
|
||||
x-text="data?.swap ? `${data?.swap?.used} MB / ${8000} GB` : '--'"></div>
|
||||
<div class="neon-badge text-sm font-semibold">Swap Usage</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="grid grid-cols-2 col-span-5 items-stretch rounded-2xl gap-2">
|
||||
<div class="flex flex-col items-center justify-center h-full w-full text-[#e2e2e2] gap-2 rounded-2xl">
|
||||
<dt class="text-2xl font-bold text-[#e2e2e2]">System Info</dt>
|
||||
<div class="grid grid-cols-3 gap-2 w-full">
|
||||
<div class="text-center flex flex-col gap-2">
|
||||
<div class="text-md font-medium text-[#e2e2e2]">Processes</div>
|
||||
<div class="text-xl font-semibold text-[#e2e2e2]" x-text="data?.processCount || '--'"></div>
|
||||
</div>
|
||||
<div class="text-center flex flex-col gap-2">
|
||||
<div class="text-md font-medium text-[#e2e2e2]">Pending Updates</div>
|
||||
<div class="text-xl font-semibold text-[#e2e2e2]" x-text="data?.updates?.total || '--'">
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center flex flex-col gap-2">
|
||||
<div class="text-md font-medium text-[#e2e2e2]">Needs Reboot</div>
|
||||
<div :class="`text-xl font-semibold ${(data?.needsReboot !== undefined && data?.needsReboot) ? 'text-red-600' : 'text-[#e2e2e2]'}`"
|
||||
x-text="data?.needsReboot !== undefined ? (data.needsReboot ? 'Yes' : 'No') : '--'">
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="text-center flex flex-col gap-2">
|
||||
<div class="text-sm font-medium text-[#e2e2e2]">Disk Space</div>
|
||||
<div class="text-md font-semibold text-[#e2e2e2]"
|
||||
x-text="data?.disk ? `${data.disk.used} / ${data.disk.size}` : '--'">
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center justify-center h-full w-full text-[#e2e2e2] gap-2 rounded-2xl">
|
||||
<dt class="text-2xl font-bold text-[#e2e2e2]">Network Usage</dt>
|
||||
<div class="grid grid-cols-2 gap-2 w-full">
|
||||
<div class="text-center flex flex-col gap-2">
|
||||
<div class="text-md font-medium text-[#e2e2e2]">Today</div>
|
||||
<div class="text-xl font-semibold text-[#e2e2e2]"
|
||||
x-text="data?.network?.today ? formatMB(data.network.today.totalMB) : '--'">
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center flex flex-col gap-2">
|
||||
<div class="text-md font-medium text-[#e2e2e2]">This Month</div>
|
||||
<div class="text-xl font-semibold text-[#e2e2e2]"
|
||||
x-text="data?.network?.month ? formatMB(data.network.month.totalMB) : '--'">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- <div class="flex items-center justify-center h-full w-full text-[#e2e2e2] rounded-2xl">
|
||||
7
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="w-full max-h-[71vh] flex justify-between px-3 mt-3">
|
||||
<div class="mr-3 w-[20vw] h-[71vh] max-h-[71vh] overflow-hidden bg-[#1e1e1e] rounded-xl relative"
|
||||
x-data="ipRequests()" x-init="init()">
|
||||
<div class="px-2 py-2 sm:px-6 border-b border-[#e2e2e2] flex justify-between items-center">
|
||||
<h2 class="text-lg font-medium text-[#e2e2e2]">IP Requests</h2>
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="h-3 w-3 rounded-full"
|
||||
:class="connected ? 'bg-green-500 pulse-connected' : 'bg-red-500'"></span>
|
||||
<span x-text="connected ? 'Connected' : 'Disconnected'" class="text-sm text-[#e2e2e2]"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-2 py-2 sm:p-3">
|
||||
<div x-show="loading" class="text-center py-8">
|
||||
<div
|
||||
class="inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500">
|
||||
</div>
|
||||
<p class="mt-2 text-[#e2e2e2]">Loading IP requests...</p>
|
||||
</div>
|
||||
<div x-show="!loading && data?.length" class="fade-in">
|
||||
<table class="min-w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col"
|
||||
class="px-2 py-2 text-center text-xs font-medium text-[#e2e2e2] uppercase tracking-wider border-b border-[#a1a1a1]">
|
||||
IP Address</th>
|
||||
<th scope="col"
|
||||
class="px-2 py-2 text-center text-xs font-medium text-[#e2e2e2] uppercase tracking-wider border-b border-[#a1a1a1]">
|
||||
Requests</th>
|
||||
<th scope="col"
|
||||
class="px-2 py-2 text-center text-xs font-medium text-[#e2e2e2] uppercase tracking-wider border-b border-[#a1a1a1]">
|
||||
Last Activity</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-[#121212]">
|
||||
<template x-for="(item, index) in data" :key="index">
|
||||
<tr
|
||||
:class="item.count > 15000 ? 'bg-rose-500' : ((index % 2 == 0) ? 'bg-[#121212]' : 'bg-[#1e1e1e]')">
|
||||
<td class="px-3 py-2 whitespace-nowrap text-sm font-medium text-center text-[#e2e2e2] border-r border-[#a1a1a1]"
|
||||
x-text="item.ip"></td>
|
||||
<td class="px-3 py-2 whitespace-nowrap text-sm text-center text-[#e2e2e2] border-r border-[#a1a1a1]"
|
||||
x-text="item.count">
|
||||
</td>
|
||||
<td class="px-3 py-2 whitespace-nowrap text-sm text-center text-[#e2e2e2]"
|
||||
x-text="item?.last?.replace('.000', '')">
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div x-show="!loading && !data?.length" class="text-center py-8 text-[#e2e2e2]">
|
||||
No IP request data available
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div x-data="ipCountrySettings()" x-init="init()"
|
||||
class=" w-[71vw] grow h-[71vh] max-h-[71vh] overflow-hidden bg-[#1e1e1e] rounded-xl relative">
|
||||
<template x-if="loading">
|
||||
<div class="text-center text-[#e2e2e2] mb-4">Loading map data...</div>
|
||||
</template>
|
||||
|
||||
<div id="chartdiv" x-show="!loading" class="shadow-lg rounded-md w-full h-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="m-3 max-h-[50%] overflow-hidden bg-[#1e1e1e] rounded-xl relative border border-[#e2e2e2]"
|
||||
x-data="ipRequests()" x-init="init()">
|
||||
<div class="px-4 py-5 sm:px-6 border-b border-gray-200 flex justify-between items-center">
|
||||
<h2 class="text-lg font-medium text-gray-900">IP Requests</h2>
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="h-3 w-3 rounded-full"
|
||||
:class="connected ? 'bg-green-500 pulse-connected' : 'bg-red-500'"></span>
|
||||
<span x-text="connected ? 'Connected' : 'Disconnected'" class="text-sm text-gray-500"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-5 sm:p-6">
|
||||
<div x-show="loading" class="text-center py-8">
|
||||
<div class="inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500">
|
||||
</div>
|
||||
<p class="mt-2 text-gray-500">Loading IP requests...</p>
|
||||
</div>
|
||||
<div x-show="!loading && data?.length" class="fade-in overflow-x-auto">
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<template x-for="(chunk, cIndex) in chunkedData()" :key="cIndex">
|
||||
<table
|
||||
class="bg-[#76ABAE] divide-y divide-gray-200 w-[20%] min-w-[200px] text-sm rounded shadow">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">IP
|
||||
Address</th>
|
||||
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
|
||||
Requests</th>
|
||||
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Last
|
||||
Activity</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
<template x-for="(item, index) in chunk" :key="index">
|
||||
<tr>
|
||||
<td class="px-4 py-2 whitespace-nowrap text-gray-900" x-text="item.ip"></td>
|
||||
<td class="px-4 py-2 whitespace-nowrap text-gray-500" x-text="item.count">
|
||||
</td>
|
||||
<td class="px-4 py-2 whitespace-nowrap text-gray-500" x-text="item.last">
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div x-show="!loading && !data?.length" class="text-center py-8 text-gray-500">
|
||||
No IP request data available
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <div class="m-3 max-h-[50%] overflow-none bg-[#1e1e1e] rounded-xl relative border border-[#e2e2e2]"
|
||||
x-data="ipCountrySettings()" x-init="init()">
|
||||
<div
|
||||
class="px-4 py-5 sm:px-6 border-b border-gray-200 bg-[#1e1e1e] flex justify-between items-center sticky top-0">
|
||||
<h2 class="text-md font-medium text-[#e2e2e2]">IP Country Settings</h2>
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="h-3 w-3 rounded-full"
|
||||
:class="statusAllConnected ? 'bg-green-500 pulse-connected' : 'bg-red-500'"></span>
|
||||
<span x-text="statusAllConnected ? 'Connected' : 'Disconnected'"
|
||||
class="text-sm text-[#e2e2e2]"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-5 sm:p-6">
|
||||
<div x-show="loading" class="text-center py-8">
|
||||
<div class="inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500">
|
||||
</div>
|
||||
<p class="text-lg mt-2 text-[#e2e2e2]">Loading country settings...</p>
|
||||
</div>
|
||||
<div x-show="!loading" class="fade-in">
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<template x-for="country in data" :key="country.country">
|
||||
<div class="flex items-center justify-center basis-[2%]">
|
||||
<span x-text="country.country.toUpperCase()"
|
||||
class="inline-flex items-center justify-center w-[36px] px-1 py-1 rounded-full text-xs font-bold"
|
||||
:class="country.accepted ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'"></span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function serverMetrics() {
|
||||
return {
|
||||
connected: false,
|
||||
data: null,
|
||||
loading: true,
|
||||
socket: null,
|
||||
reconnectInterval: null,
|
||||
heartbeatInterval: null,
|
||||
heartbeatTimeout: null,
|
||||
|
||||
usageColor(usage) {
|
||||
usage = parseFloat(usage || 0);
|
||||
if (usage <= 25) return 'bg-[#10a900] drop-shadow-2xl drop-shadow-[#10a900]/50';
|
||||
if (usage <= 50) return 'bg-[#ffe117] drop-shadow-2xl drop-shadow-[#ffe117]/50';
|
||||
if (usage <= 75) return 'bg-[#e30000] drop-shadow-2xl drop-shadow-[#e30000]/50';
|
||||
return 'bg-[#4f21d5] drop-shadow-2xl drop-shadow-[#4f21d5]/50';
|
||||
},
|
||||
|
||||
usageGradient(usage) {
|
||||
if (usage == 0) {
|
||||
return false
|
||||
}
|
||||
usage = parseFloat(usage || 0);
|
||||
if (usage <= 25) return 'drop-shadow-2xl drop-shadow-[#10a900]/50 bg-gradient-to-b from-[#10a900]/100 to-transparent';
|
||||
if (usage <= 50) return 'drop-shadow-2xl drop-shadow-[#ffe117]/50 bg-gradient-to-b from-[#ffe117]/100 to-transparent';
|
||||
if (usage <= 75) return 'drop-shadow-2xl drop-shadow-[#e30000]/50 bg-gradient-to-b from-[#e30000]/100 to-transparent';
|
||||
return 'drop-shadow-2xl drop-shadow-[#4f21d5]/50 bg-gradient-to-b from-[#4f21d5]/100 to-transparent';
|
||||
},
|
||||
|
||||
init() {
|
||||
this.connectWebSocket();
|
||||
this.startHeartbeat();
|
||||
|
||||
this.reconnectInterval = setInterval(() => {
|
||||
if (!this.connected) {
|
||||
console.log('تلاش برای اتصال دوباره به server metrics...');
|
||||
this.connectWebSocket();
|
||||
}
|
||||
}, 60000);
|
||||
},
|
||||
|
||||
startHeartbeat() {
|
||||
if (this.heartbeatInterval) clearInterval(this.heartbeatInterval);
|
||||
if (this.heartbeatTimeout) clearTimeout(this.heartbeatTimeout);
|
||||
|
||||
this.heartbeatInterval = setInterval(() => {
|
||||
if (this.connected && this.socket.readyState === WebSocket.OPEN) {
|
||||
this.socket.send(JSON.stringify({
|
||||
type: 'ping'
|
||||
}));
|
||||
|
||||
this.heartbeatTimeout = setTimeout(() => {
|
||||
console.warn('No pong received, closing socket...');
|
||||
this.socket.close();
|
||||
}, 10000);
|
||||
}
|
||||
}, 30000);
|
||||
},
|
||||
|
||||
connectWebSocket() {
|
||||
if (this.socket) {
|
||||
this.socket.close();
|
||||
}
|
||||
|
||||
this.socket = new WebSocket('wss://stream.ahrm.ir/security/usage');
|
||||
|
||||
this.socket.addEventListener('open', (event) => {
|
||||
this.connected = true;
|
||||
console.log('Server metrics WebSocket connection opened:', event);
|
||||
});
|
||||
|
||||
this.socket.addEventListener('message', (event) => {
|
||||
try {
|
||||
const message = JSON.parse(event.data);
|
||||
|
||||
if (message.type === 'pong') {
|
||||
clearTimeout(this.heartbeatTimeout);
|
||||
return;
|
||||
}
|
||||
|
||||
this.data = message;
|
||||
console.log(this.data);
|
||||
this.loading = false;
|
||||
} catch (e) {
|
||||
console.error('Error parsing server metrics message:', e);
|
||||
}
|
||||
});
|
||||
|
||||
this.socket.addEventListener('close', (event) => {
|
||||
this.connected = false;
|
||||
clearInterval(this.heartbeatInterval);
|
||||
clearTimeout(this.heartbeatTimeout);
|
||||
console.log('Server metrics WebSocket connection closed:', event);
|
||||
});
|
||||
|
||||
this.socket.addEventListener('error', (event) => {
|
||||
this.connected = false;
|
||||
clearInterval(this.heartbeatInterval);
|
||||
clearTimeout(this.heartbeatTimeout);
|
||||
console.error('Server metrics WebSocket error:', event);
|
||||
});
|
||||
},
|
||||
|
||||
formatBytes(bytes) {
|
||||
if (bytes === 0) return '0 Bytes';
|
||||
const k = 1024;
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
},
|
||||
|
||||
formatMB(mb) {
|
||||
if (mb < 1024) return mb.toFixed(2) + ' MB';
|
||||
return (mb / 1024).toFixed(2) + ' GB';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function ipRequests() {
|
||||
return {
|
||||
connected: false,
|
||||
data: null,
|
||||
loading: true,
|
||||
socket: null,
|
||||
reconnectInterval: null,
|
||||
heartbeatInterval: null,
|
||||
heartbeatTimeout: null,
|
||||
|
||||
init() {
|
||||
this.connectWebSocket();
|
||||
this.startHeartbeat();
|
||||
|
||||
this.reconnectInterval = setInterval(() => {
|
||||
if (!this.connected) {
|
||||
console.log('تلاش برای اتصال دوباره ipRequests...');
|
||||
this.connectWebSocket();
|
||||
}
|
||||
}, 60000);
|
||||
},
|
||||
|
||||
startHeartbeat() {
|
||||
if (this.heartbeatInterval) clearInterval(this.heartbeatInterval);
|
||||
if (this.heartbeatTimeout) clearTimeout(this.heartbeatTimeout);
|
||||
|
||||
this.heartbeatInterval = setInterval(() => {
|
||||
if (this.connected && this.socket.readyState === WebSocket.OPEN) {
|
||||
this.socket.send(JSON.stringify({
|
||||
type: 'ping'
|
||||
}));
|
||||
|
||||
this.heartbeatTimeout = setTimeout(() => {
|
||||
console.warn('No pong received, closing socket...');
|
||||
this.socket.close();
|
||||
}, 10000);
|
||||
}
|
||||
}, 30000);
|
||||
},
|
||||
|
||||
chunkedData() {
|
||||
if (!this.data) return [];
|
||||
|
||||
const chunks = [];
|
||||
const itemsPerChunk = 6;
|
||||
const maxChunks = 10;
|
||||
|
||||
for (let i = 0; i < Math.min(this.data.length, maxChunks * itemsPerChunk); i += itemsPerChunk) {
|
||||
chunks.push(this.data.slice(i, i + itemsPerChunk));
|
||||
}
|
||||
|
||||
return chunks;
|
||||
},
|
||||
|
||||
connectWebSocket() {
|
||||
if (this.socket) {
|
||||
this.socket.close();
|
||||
}
|
||||
|
||||
this.socket = new WebSocket('wss://stream.ahrm.ir/security/ip-request/');
|
||||
|
||||
this.socket.addEventListener('open', (event) => {
|
||||
this.connected = true;
|
||||
console.log('IP requests WebSocket connection opened:', event);
|
||||
});
|
||||
|
||||
this.socket.addEventListener('message', (event) => {
|
||||
try {
|
||||
const message = JSON.parse(event.data);
|
||||
|
||||
if (message.type === 'pong') {
|
||||
clearTimeout(this.heartbeatTimeout);
|
||||
return;
|
||||
}
|
||||
|
||||
this.data = message;
|
||||
this.loading = false;
|
||||
} catch (e) {
|
||||
console.error('Error parsing IP requests message:', e);
|
||||
}
|
||||
});
|
||||
|
||||
this.socket.addEventListener('close', (event) => {
|
||||
this.connected = false;
|
||||
clearInterval(this.heartbeatInterval);
|
||||
clearTimeout(this.heartbeatTimeout);
|
||||
console.log('IP requests WebSocket connection closed:', event);
|
||||
});
|
||||
|
||||
this.socket.addEventListener('error', (event) => {
|
||||
this.connected = false;
|
||||
clearInterval(this.heartbeatInterval);
|
||||
clearTimeout(this.heartbeatTimeout);
|
||||
console.error('IP requests WebSocket error:', event);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function ipCountrySettings() {
|
||||
return {
|
||||
connected: false,
|
||||
data: null,
|
||||
loading: true,
|
||||
socket: null,
|
||||
reconnectInterval: null,
|
||||
heartbeatInterval: null,
|
||||
heartbeatTimeout: null,
|
||||
statusAllConnected: true,
|
||||
root: null,
|
||||
chart: null,
|
||||
countryMap: {},
|
||||
|
||||
init() {
|
||||
if (!this.root) {
|
||||
this.renderMap(); // Only once!
|
||||
}
|
||||
this.connectWebSocket();
|
||||
this.startHeartbeat();
|
||||
|
||||
this.reconnectInterval = setInterval(() => {
|
||||
if (!this.connected) {
|
||||
console.log('تلاش برای اتصال دوباره به IP country settings...');
|
||||
this.connectWebSocket();
|
||||
}
|
||||
}, 60000);
|
||||
},
|
||||
|
||||
startHeartbeat() {
|
||||
if (this.heartbeatInterval) clearInterval(this.heartbeatInterval);
|
||||
if (this.heartbeatTimeout) clearTimeout(this.heartbeatTimeout);
|
||||
|
||||
this.heartbeatInterval = setInterval(() => {
|
||||
if (this.connected && this.socket.readyState === WebSocket.OPEN) {
|
||||
this.socket.send(JSON.stringify({
|
||||
type: 'ping'
|
||||
}));
|
||||
|
||||
this.heartbeatTimeout = setTimeout(() => {
|
||||
console.warn('No pong received, closing socket...');
|
||||
this.socket.close();
|
||||
}, 10000);
|
||||
}
|
||||
}, 30000);
|
||||
},
|
||||
|
||||
updateConnectionStatus() {
|
||||
this.statusAllConnected = !this.data.some(country => !country.accepted);
|
||||
},
|
||||
destroy() {
|
||||
if (this.root) {
|
||||
this.root.dispose();
|
||||
this.root = null;
|
||||
}
|
||||
},
|
||||
|
||||
connectWebSocket() {
|
||||
if (this.socket) {
|
||||
this.socket.close();
|
||||
}
|
||||
|
||||
this.socket = new WebSocket('wss://stream.ahrm.ir/security/ipset');
|
||||
|
||||
this.socket.addEventListener('open', (event) => {
|
||||
this.connected = true;
|
||||
console.log('IP country settings WebSocket connection opened:', event);
|
||||
});
|
||||
|
||||
this.socket.addEventListener('message', (event) => {
|
||||
try {
|
||||
const message = JSON.parse(event.data);
|
||||
|
||||
if (message.type === 'pong') {
|
||||
clearTimeout(this.heartbeatTimeout);
|
||||
return;
|
||||
}
|
||||
|
||||
this.data = message?.ipCountry || [];
|
||||
|
||||
// ✅ Step 1: Create a fast lookup map for countries
|
||||
this.countryMap = {};
|
||||
this.data.forEach(c => {
|
||||
if (c.country) {
|
||||
this.countryMap[c.country.toLowerCase()] = c;
|
||||
}
|
||||
});
|
||||
|
||||
this.updateConnectionStatus();
|
||||
this.loading = false;
|
||||
|
||||
// ✅ Step 3: Refresh the map by re-setting the geoJSON
|
||||
if (this.polygonSeries) {
|
||||
const currentGeoJSON = this.polygonSeries.get("geoJSON");
|
||||
|
||||
// Force a redraw to trigger fill adapters
|
||||
this.polygonSeries.set("geoJSON", null);
|
||||
this.polygonSeries.set("geoJSON", currentGeoJSON);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Error parsing IP country settings message:', e);
|
||||
}
|
||||
});
|
||||
|
||||
this.socket.addEventListener('close', (event) => {
|
||||
this.connected = false;
|
||||
clearInterval(this.heartbeatInterval);
|
||||
clearTimeout(this.heartbeatTimeout);
|
||||
console.log('IP country settings WebSocket connection closed:', event);
|
||||
});
|
||||
|
||||
this.socket.addEventListener('error', (event) => {
|
||||
this.connected = false;
|
||||
clearInterval(this.heartbeatInterval);
|
||||
clearTimeout(this.heartbeatTimeout);
|
||||
console.error('IP country settings WebSocket error:', event);
|
||||
});
|
||||
},
|
||||
renderMap() {
|
||||
if (this.chart) {
|
||||
this.chart.dispose();
|
||||
}
|
||||
if (this.root) {
|
||||
this.root.dispose();
|
||||
}
|
||||
|
||||
am5.ready(() => {
|
||||
let root = am5.Root.new("chartdiv");
|
||||
|
||||
root.setThemes([am5.Theme.new(root)]);
|
||||
|
||||
let chart = root.container.children.push(
|
||||
am5map.MapChart.new(root, {
|
||||
panX: "rotateX",
|
||||
panY: "rotateY",
|
||||
projection: am5map.geoMercator(),
|
||||
wheelY: "zoom"
|
||||
})
|
||||
);
|
||||
|
||||
let polygonSeries = chart.series.push(
|
||||
am5map.MapPolygonSeries.new(root, {
|
||||
geoJSON: am5geodata_worldLow,
|
||||
exclude: ["AQ"] // exclude Antarctica if you want
|
||||
})
|
||||
);
|
||||
|
||||
// Add adapter here:
|
||||
polygonSeries.mapPolygons.template.adapters.add("fill", (fill, target) => {
|
||||
const countryId = target.dataItem.get("id").toLowerCase();
|
||||
|
||||
const countryData = this.countryMap?.[countryId];
|
||||
|
||||
if (countryData) {
|
||||
return countryData.accepted ? am5.color(0x22c55e) : am5.color(0xef4444);
|
||||
}
|
||||
|
||||
return am5.color(0xcbd5e1); // default color
|
||||
});
|
||||
|
||||
polygonSeries.mapPolygons.template.setAll({
|
||||
tooltipText: "{name}",
|
||||
interactive: true
|
||||
});
|
||||
|
||||
this.chart = chart;
|
||||
this.polygonSeries = polygonSeries;
|
||||
this.root = root;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function fullscreenHandler() {
|
||||
return {
|
||||
isFullscreen: false,
|
||||
|
||||
init() {
|
||||
// Watch for fullscreen change event
|
||||
document.addEventListener('fullscreenchange', () => {
|
||||
this.isFullscreen = !!document.fullscreenElement;
|
||||
});
|
||||
},
|
||||
|
||||
enterFullscreen() {
|
||||
document.documentElement.requestFullscreen();
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
3
resources/views/livewire/tools/coments.blade.php
Normal file
3
resources/views/livewire/tools/coments.blade.php
Normal file
@@ -0,0 +1,3 @@
|
||||
<div>
|
||||
{{-- The Master doesn't talk, he acts. --}}
|
||||
</div>
|
||||
51
resources/views/livewire/tools/home-comments.blade.php
Normal file
51
resources/views/livewire/tools/home-comments.blade.php
Normal file
@@ -0,0 +1,51 @@
|
||||
<div>
|
||||
|
||||
<div>
|
||||
@foreach ($comments->other as $other_comment)
|
||||
<div class="mx-10">
|
||||
<div>
|
||||
|
||||
@if ($other_comment->status == 1)
|
||||
<div class="">
|
||||
<div>
|
||||
<div
|
||||
class="p-5 rounded @if ($other_comment->type == 1) bg-gray-400 @else bg-gray-200 @endif flex flex-col gap-3 m-3">
|
||||
<div>
|
||||
<h4> name : {{ $other_comment->name }}</h4>
|
||||
<p> message : {{ $other_comment->message }}</p>
|
||||
</div>
|
||||
<div x-data="{ reply_id: 0 }">
|
||||
<button @click="reply_id='{{ $other_comment->id }}'"
|
||||
class="p-2 bg-blue-300 ">reply</button>
|
||||
<div @click.outside="reply_id=0" x-show="reply_id=='{{ $other_comment->id }}'"
|
||||
class="flex flex-col gap-5">
|
||||
<form>
|
||||
<div>
|
||||
<input wire:model="comment_name_reply" class="border p-1"
|
||||
placeholder="name">
|
||||
<input wire:model="comment_message_reply" class="border p-1"
|
||||
placeholder="message">
|
||||
<button @click="reply_id=0" type="button"
|
||||
wire:click="reply({{ $other_comment->id }},{{ $comment->id }})"
|
||||
class="bg-green-300 p-2 rounded"> reply </button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
</div>
|
||||
<div>
|
||||
@livewire('tools.home-comments', ['comments' => $other_comment, 'comment' => $comment, 'blog_id' => $blog_id], key($other_comment->id))
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
83
resources/views/livewire/tools/panel-comments.blade.php
Normal file
83
resources/views/livewire/tools/panel-comments.blade.php
Normal file
@@ -0,0 +1,83 @@
|
||||
<div>
|
||||
|
||||
<div>
|
||||
|
||||
|
||||
@foreach ($comments->other as $another_comment)
|
||||
<div class="mx-10">
|
||||
<div>
|
||||
<div x-show="(( (status==comment_status) && comment_seen==1)||(status=='new' && (comment_seen==0 || parent_reply>0))) || status=='all'"
|
||||
class="p-5 rounded @if ($another_comment->type == 1)
|
||||
bg-gray-400
|
||||
@else
|
||||
bg-gray-200
|
||||
@endif flex flex-col gap-3 m-3">
|
||||
<div>
|
||||
<h4> name : {{ $another_comment->name }}</h4>
|
||||
<p> message : {{ $another_comment->message }}</p>
|
||||
<div class="flex gap-2" x-data="{ comment_status: '{{ $another_comment->status }}', comment_seen: '{{ $another_comment->seen }}' }">
|
||||
{{-- <button class="p-2 mt-3 rounded bg-green-500">edit</button> --}}
|
||||
@if ($another_comment->type == 1)
|
||||
{{-- answer --}}
|
||||
<button wire:click="delete_comment({{ $another_comment->id }})"
|
||||
class="p-2 mt-3 rounded bg-red-500">delete</button>
|
||||
@else
|
||||
{{-- reply --}}
|
||||
<button
|
||||
@click="comment_seen==0?parent_reply=parent_reply-1:'',comment_status=1,comment_seen=1 "
|
||||
wire:click="comment_status({{ $another_comment->id }},{{ true }},{{ $comment->id }})"
|
||||
x-show="comment_status==0||comment_seen==0"
|
||||
class="p-2 mt-3 rounded bg-green-500">accept</button>
|
||||
<button
|
||||
@click="comment_seen==0?parent_reply=parent_reply-1:'',comment_status=0,comment_seen=1"
|
||||
wire:click="comment_status({{ $another_comment->id }},{{ true }},{{ $comment->id }})"
|
||||
x-show="comment_status==1||comment_seen==0"
|
||||
class="p-2 mt-3 rounded bg-red-500">reject</button>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@if ($another_comment->type != 1)
|
||||
<div>
|
||||
<button @click="answer_id='{{ $another_comment->id }}'"
|
||||
class="bg-green-300 p-1 rounded"> answer </button>
|
||||
|
||||
<div>
|
||||
<div @click.outside="answer_id=0"
|
||||
x-show="answer_id=='{{ $another_comment->id }}'"
|
||||
class="flex flex-col gap-5">
|
||||
<form>
|
||||
<div>
|
||||
<input wire:model="comment_message" class="border p-1"
|
||||
placeholder="message">
|
||||
<button type="button"
|
||||
wire:click="answer({{ $another_comment->id }})"
|
||||
@click="answer_id=0" class="bg-green-300 p-1 rounded"> answer
|
||||
</button>
|
||||
<button @click="answer_id=0" class="bg-red-300 p-1 rounded"> close
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@livewire('tools.panel-comments', ['comments' => $another_comment, 'comment' => $comment, 'blog_id' => $blog_id], key($another_comment->id))
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
Reference in New Issue
Block a user