Initial commit
This commit is contained in:
@@ -0,0 +1,31 @@
|
||||
<div class="grid grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-5 grid-flow-row gap-2">
|
||||
@foreach ($item['data'] ?? [] as $movie)
|
||||
@if ($loop->first)
|
||||
<a href="{{ $movie->getUrl() }}" title="{{ $movie->name ?? '' }}"
|
||||
class="row-span-1 col-span-2 md:row-span-2 md:col-span-2 overflow-hidden relative group">
|
||||
<img
|
||||
src="{{ $movie->getPosterUrl() }}" alt="{{ $movie->name ?? '' }}"
|
||||
class="group-hover:opacity-60 transition-all duration-500 transform group-hover:scale-110 w-full h-full" />
|
||||
<span class="absolute bottom-0 px-2 pb-2 pt-16 bg-gradient-to-t from-main-900 w-full text-main-warning">
|
||||
<div class="font-bold overflow-hidden overflow-ellipsis whitespace-nowrap">{{ $movie->name }}</div>
|
||||
<div class="text-sm text-gray-300 italic overflow-hidden overflow-ellipsis whitespace-nowrap">
|
||||
{{ $movie->origin_name }} ({{ $movie->publish_year }})
|
||||
</div>
|
||||
</span>
|
||||
<span class="absolute top-0 left-0 p-0.5 bg-main-primary text-sm">{{ $movie->episode_current }}</span>
|
||||
</a>
|
||||
@else
|
||||
<a href="{{ $movie->getUrl() }}" title="{{ $movie->name ?? '' }}" class="@if ($loop->last) hidden lg:block @endif overflow-hidden relative group">
|
||||
<img data-src="{{ $movie->getPosterUrl() }}" alt="{{ $movie->name ?? '' }}"
|
||||
class="group-hover:opacity-60 transition-all duration-500 transform group-hover:scale-110 w-full h-full lazyload" />
|
||||
<span class="absolute bottom-0 px-2 pb-2 pt-16 bg-gradient-to-t from-main-900 w-full text-main-warning">
|
||||
<div class="font-bold overflow-hidden overflow-ellipsis whitespace-nowrap">{{ $movie->name }}</div>
|
||||
<div class="text-sm text-gray-300 italic overflow-hidden overflow-ellipsis whitespace-nowrap">
|
||||
{{ $movie->origin_name }} ({{ $movie->publish_year }})
|
||||
</div>
|
||||
</span>
|
||||
<span class="absolute top-0 left-0 p-0.5 bg-main-primary text-sm">{{ $movie->episode_current }}</span>
|
||||
</a>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
@@ -0,0 +1,27 @@
|
||||
<div
|
||||
class="grid grid-flow-row grid-cols-2 sm:grid-cols-3 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-2">
|
||||
@foreach ($item['data'] ?? [] as $movie)
|
||||
<a href="{{ $movie->getUrl() }}" class="overflow-hidden relative group" title="{{ $movie->name ?? '' }}">
|
||||
<img style="aspect-ratio: 256/340" data-src="{{ $movie->getThumbUrl() }}" alt="{{ $movie->name ?? '' }}"
|
||||
class="w-full group-hover:opacity-60 transition-all duration-500 transform group-hover:scale-110 lazyload" />
|
||||
<span class="absolute bottom-0 px-2 pb-2 pt-16 bg-gradient-to-t from-main-900 w-full text-main-warning">
|
||||
<div class="font-bold overflow-hidden overflow-ellipsis whitespace-nowrap">{{ $movie->name }}</div>
|
||||
<div class="text-sm text-gray-300 italic overflow-hidden overflow-ellipsis whitespace-nowrap">
|
||||
{{ $movie->origin_name }} ({{ $movie->publish_year }})
|
||||
</div>
|
||||
</span>
|
||||
<span class="absolute top-0 left-0 p-0.5 bg-main-primary text-sm">
|
||||
{{ $movie->episode_current }}
|
||||
</span>
|
||||
<div class="absolute hidden top-1/3 left-1/3 animate-pulse group-hover:block">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-16 h-16 text-main-warning">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M15.91 11.672a.375.375 0 010 .656l-5.603 3.113a.375.375 0 01-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112z" />
|
||||
</svg>
|
||||
</div>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
@@ -0,0 +1,67 @@
|
||||
<div id="slider_poster_{{ $loop->index }}" class="owl-carousel owl-theme absolute">
|
||||
@foreach ($item['data'] ?? [] as $movie)
|
||||
<a href="{{ $movie->getUrl() }}" title="{{ $movie->name ?? '' }}"
|
||||
class="block row-span-1 col-span-1 md:row-span-2 md:col-span-2 overflow-hidden relative group">
|
||||
<img style="aspect-ratio: 16/9" src="{{ $movie->getPosterUrl() }}" alt="{{ $movie->name ?? '' }}"
|
||||
class="group-hover:opacity-60 transition-all duration-500 transform group-hover:bg-opacity-60" />
|
||||
<span class="absolute bottom-0 px-2 pb-2 pt-16 bg-gradient-to-t from-main-900 w-full text-main-warning">
|
||||
<div class="font-bold overflow-hidden overflow-ellipsis whitespace-nowrap">{{ $movie->name }}</div>
|
||||
<div class="text-sm text-gray-300 italic overflow-hidden overflow-ellipsis whitespace-nowrap">
|
||||
{{ $movie->origin_name }} ({{ $movie->publish_year }})
|
||||
</div>
|
||||
</span>
|
||||
<span class="absolute top-0 left-0 p-0.5 bg-main-primary text-sm">{{ $movie->episode_current }}</span>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#slider_poster_{{ $loop->index }}").owlCarousel({
|
||||
items: 1,
|
||||
center: false,
|
||||
loop: true,
|
||||
dots: false,
|
||||
nav: true,
|
||||
margin: 10,
|
||||
stagePadding: 0,
|
||||
stageOuterClass: 'owl-stage-outer',
|
||||
responsive: {
|
||||
1400: {
|
||||
items: 4
|
||||
},
|
||||
1280: {
|
||||
items: 3
|
||||
},
|
||||
1024: {
|
||||
items: 2
|
||||
},
|
||||
768: {
|
||||
items: 2
|
||||
},
|
||||
},
|
||||
scrollPerPage: true,
|
||||
lazyLoad: true,
|
||||
slideSpeed: 800,
|
||||
paginationSpeed: 400,
|
||||
stopOnHover: true,
|
||||
autoplay: true,
|
||||
navText: [
|
||||
`<button class="block absolute top-0 left-0 text-white bg-main-900/60 h-[90%]">
|
||||
<span style="display: none" aria-label="Previous">‹</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 px-1 top-0 text-2xl">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5" />
|
||||
</svg>
|
||||
</button>`,
|
||||
`<button class="block absolute top-0 right-0 text-white bg-main-900/60 h-[90%]">
|
||||
<span style="display: none" aria-label="Next">›</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 px-1 top-0 text-2xl">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
</button>`
|
||||
],
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
67
resources/views/september/inc/section/slider_thumb.blade.php
Normal file
67
resources/views/september/inc/section/slider_thumb.blade.php
Normal file
@@ -0,0 +1,67 @@
|
||||
<div id="slider_thumb_{{ $loop->index }}" class="owl-carousel owl-theme absolute">
|
||||
@foreach ($item['data'] ?? [] as $movie)
|
||||
<a href="{{ $movie->getUrl() }}" title="{{ $movie->name ?? '' }}"
|
||||
class="block row-span-1 col-span-1 md:row-span-2 md:col-span-2 overflow-hidden relative group">
|
||||
<img style="aspect-ratio: 256/340" src="{{ $movie->getThumbUrl() }}" alt="{{ $movie->name ?? '' }}"
|
||||
class="group-hover:opacity-60 transition-all duration-500 transform group-hover:bg-opacity-60" />
|
||||
<span class="absolute bottom-0 px-2 pb-2 pt-16 bg-gradient-to-t from-main-900 w-full text-main-warning">
|
||||
<div class="font-bold overflow-hidden overflow-ellipsis whitespace-nowrap">{{ $movie->name }}</div>
|
||||
<div class="text-sm text-gray-300 italic overflow-hidden overflow-ellipsis whitespace-nowrap">
|
||||
{{ $movie->origin_name }} ({{ $movie->publish_year }})
|
||||
</div>
|
||||
</span>
|
||||
<span class="absolute top-0 left-0 p-0.5 bg-main-primary text-sm">{{ $movie->episode_current }}</span>
|
||||
</a>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#slider_thumb_{{ $loop->index }}").owlCarousel({
|
||||
items: 2,
|
||||
center: false,
|
||||
loop: true,
|
||||
dots: false,
|
||||
nav: true,
|
||||
margin: 10,
|
||||
stagePadding: 0,
|
||||
stageOuterClass: 'owl-stage-outer',
|
||||
responsive: {
|
||||
1400: {
|
||||
items: 6
|
||||
},
|
||||
1280: {
|
||||
items: 4
|
||||
},
|
||||
1024: {
|
||||
items: 3
|
||||
},
|
||||
768: {
|
||||
items: 2
|
||||
},
|
||||
},
|
||||
scrollPerPage: true,
|
||||
lazyLoad: true,
|
||||
slideSpeed: 800,
|
||||
paginationSpeed: 400,
|
||||
stopOnHover: true,
|
||||
autoplay: true,
|
||||
navText: [
|
||||
`<button class="block absolute top-0 left-0 text-white bg-main-900/60 h-[90%]">
|
||||
<span style="display: none" aria-label="Previous">‹</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 px-1 top-0 text-2xl">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5" />
|
||||
</svg>
|
||||
</button>`,
|
||||
`<button class="block absolute top-0 right-0 text-white bg-main-900/60 h-[90%]">
|
||||
<span style="display: none" aria-label="Next">›</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8 px-1 top-0 text-2xl">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
</button>`
|
||||
],
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
Reference in New Issue
Block a user