Initial commit
This commit is contained in:
10
resources/views/september/inc/aside.blade.php
Normal file
10
resources/views/september/inc/aside.blade.php
Normal file
@@ -0,0 +1,10 @@
|
||||
@foreach ($tops as $top)
|
||||
<div class="bg-main-800/40 p-2 mt-2">
|
||||
<div class="text-center">
|
||||
<h3 class="font-semibold uppercase">{{ $top['label'] }}</h3>
|
||||
</div>
|
||||
<div class="space-y-1 block">
|
||||
@include('themes::september.inc.aside.' . $top['template'])
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
54
resources/views/september/inc/aside/top_text.blade.php
Normal file
54
resources/views/september/inc/aside/top_text.blade.php
Normal file
@@ -0,0 +1,54 @@
|
||||
@foreach ($top['data'] ?? [] as $movie)
|
||||
@if ($loop->first)
|
||||
<a href="{{ $movie->getUrl() }}" title="{{ $movie->name }}" class="block overflow-hidden relative group">
|
||||
<img src="{{ $movie->getPosterUrl() }}"
|
||||
class="group-hover:opacity-60 transition-all duration-500 w-full h-[200px]" alt="{{ $movie->name }}" />
|
||||
<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>
|
||||
|
||||
<div class="absolute top-0 right-0 bg-main-800/40 p-2 flex gap-x-1 items-center text-main-success">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-4 h-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
|
||||
<span class="text-xs">
|
||||
{{ $movie->view_week ?? 0 }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</a>
|
||||
@else
|
||||
<a href="{{ $movie->getUrl() }}" title="{{ $movie->name }}" class="group">
|
||||
<div
|
||||
class="flex justify-start items-center space-x-1 py-1 border-b-[1px] border-main-secondary border-dashed border-opacity-25">
|
||||
<div
|
||||
class="w-6 text-center bg-main-primary group-hover:text-main-warning bg-opacity-10 text-main-primary font-bold">
|
||||
{{ $loop->index + 1 }}</div>
|
||||
<div class="basis-4/6 flex-grow px-2 space-y-2 overflow-hidden">
|
||||
<div
|
||||
class="font-bold text-main-primary text-sm group-hover:text-main-warning transition duration-300 ease-in-out overflow-hidden overflow-ellipsis whitespace-nowrap">
|
||||
{{ $movie->name }}</div>
|
||||
</div>
|
||||
<div class="flex gap-x-0.5 items-center text-gray-400">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-4 h-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
|
||||
<span class="text-xs">
|
||||
{{ $movie->view_week ?? 0 }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@endif
|
||||
@endforeach
|
||||
32
resources/views/september/inc/aside/top_thumb.blade.php
Normal file
32
resources/views/september/inc/aside/top_thumb.blade.php
Normal file
@@ -0,0 +1,32 @@
|
||||
@foreach ($top['data'] ?? [] as $movie)
|
||||
<a href="{{ $movie->getUrl() }}" title="{{ $movie->name }}" class="group">
|
||||
<div
|
||||
class="flex justify-start items-center space-x-1 py-1 border-b-[1px] border-main-secondary border-dashed border-opacity-25">
|
||||
<div
|
||||
class="w-6 text-center bg-main-primary group-hover:text-main-warning bg-opacity-10 text-main-primary font-bold">
|
||||
{{ $loop->index + 1 }}</div>
|
||||
<div class="w-[45px] h-[57px]">
|
||||
<img data-src="{{ $movie->getThumbUrl() }}" alt="{{ $movie->origin_name }} ({{ $movie->publish_year }})"
|
||||
class="group-hover:opacity-60 w-full h-full transition duration-300 ease-in-out lazyload" />
|
||||
</div>
|
||||
<div class="basis-4/6 flex-grow px-2 space-y-2 overflow-hidden">
|
||||
<div
|
||||
class="font-bold text-main-primary text-sm group-hover:text-main-warning transition duration-300 ease-in-out overflow-hidden overflow-ellipsis whitespace-nowrap">
|
||||
{{ $movie->name }}</div>
|
||||
<div class="italic text-xs text-gray-400 overflow-hidden overflow-ellipsis whitespace-nowrap">
|
||||
{{ $movie->origin_name }} ({{ $movie->publish_year }})</div>
|
||||
</div>
|
||||
<div class="flex gap-x-0.5 items-center text-gray-400">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-4 h-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
<span class="text-xs">
|
||||
{{ $movie->view_week ?? 0 }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@endforeach
|
||||
60
resources/views/september/inc/catalog_filter.blade.php
Normal file
60
resources/views/september/inc/catalog_filter.blade.php
Normal file
@@ -0,0 +1,60 @@
|
||||
<div class="w-full container mx-auto mt-2 bg-main-800/40">
|
||||
<div class="text-gray-50">
|
||||
<form id="form-filter" class="lg:flex flex-wrap gap-1 items-center">
|
||||
<div class="p-2 flex justify-between">
|
||||
Lọc Phim
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<select name="filter[sort]" form="form-search" class="scroll bg-main-700 p-2 outline-none">
|
||||
<option value="">Sắp xếp</option>
|
||||
<option value="update" @if (isset(request('filter')['sort']) && request('filter')['sort'] == 'update') selected @endif>Thời gian cập nhật</option>
|
||||
<option value="create" @if (isset(request('filter')['sort']) && request('filter')['sort'] == 'create') selected @endif>Thời gian đăng</option>
|
||||
<option value="year" @if (isset(request('filter')['sort']) && request('filter')['sort'] == 'year') selected @endif>Năm sản xuất</option>
|
||||
<option value="view" @if (isset(request('filter')['sort']) && request('filter')['sort'] == 'view') selected @endif>Lượt xem</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<select name="filter[type]" form="form-search" class="scroll bg-main-700 p-2 outline-none">
|
||||
<option value="">Mọi định dạng</option>
|
||||
<option value="series" @if (isset(request('filter')['type']) && request('filter')['type'] == 'series') selected @endif>Phim bộ</option>
|
||||
<option value="single" @if (isset(request('filter')['type']) && request('filter')['type'] == 'single') selected @endif>Phim lẻ</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<select name="filter[category]" form="form-search" class="scroll bg-main-700 p-2 outline-none">
|
||||
<option value="">Tất cả thể loại</option>
|
||||
@foreach (\VsMov\Core\Models\Category::fromCache()->all() as $item)
|
||||
<option value="{{ $item->id }}" @if ((isset(request('filter')['category']) && request('filter')['category'] == $item->id) ||
|
||||
(isset($category) && $category->id == $item->id)) selected @endif>
|
||||
{{ $item->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<select name="filter[region]" form="form-search" class="scroll bg-main-700 p-2 outline-none">
|
||||
<option value="">Tất cả quốc gia</option>
|
||||
@foreach (\VsMov\Core\Models\Region::fromCache()->all() as $item)
|
||||
<option value="{{ $item->id }}" @if ((isset(request('filter')['region']) && request('filter')['region'] == $item->id) ||
|
||||
(isset($region) && $region->id == $item->id)) selected @endif>
|
||||
{{ $item->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<select name="filter[year]" form="form-search" class="scroll bg-main-700 p-2 outline-none">
|
||||
<option value="">Tất cả năm</option>
|
||||
@foreach ($years as $year)
|
||||
<option value="{{ $year }}" @if (isset(request('filter')['year']) && request('filter')['year'] == $year) selected @endif>
|
||||
{{ $year }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<button type="submit" form="form-search"
|
||||
class="w-content text-center bg-main-labelbgSecondary text-white hover:shadow-menu hover:bg-main-primary duration-150 p-1.5 overflow-hidden overflow-ellipsis whitespace-nowrap">
|
||||
<span>Duyệt phim</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
41
resources/views/september/inc/header.blade.php
Executable file
41
resources/views/september/inc/header.blade.php
Executable file
@@ -0,0 +1,41 @@
|
||||
@php
|
||||
$logo = setting('site_logo', '');
|
||||
$brand = setting('site_brand', '');
|
||||
$title = isset($title) ? $title : setting('site_homepage_title', '');
|
||||
@endphp
|
||||
|
||||
<!-- BEGIN HEADER -->
|
||||
<header class="w-full bg-main-800 px-1 xl:px-7 py-3 shadow-md">
|
||||
<div class="container mx-auto flex justify-between items-center">
|
||||
<div id="header-search-form" class="relative w-96 hidden xl:block">
|
||||
<form id="form-search" method="GET" action="/">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 absolute ml-3 mt-2 text-xl">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 15.75l-2.489-2.489m0 0a3.375 3.375 0 10-4.773-4.773 3.375 3.375 0 004.774 4.774zM21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<input
|
||||
class="appearance-none border border-input-border rounded-3xl w-full py-2 px-3 bg-main-700 text-gray-300 leading-tight focus: focus:outline-none focus:shadow-outline focus:border-input-focus pl-10"
|
||||
type="text" name="search" placeholder="Tìm kiếm phim..." value="{{ request('search') }}" />
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
<a href="/" class="navbar-brand">
|
||||
@if ($logo)
|
||||
{!! $logo !!}
|
||||
@else
|
||||
{!! $brand !!}
|
||||
@endif
|
||||
</a>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div class="flex xl:hidden gap-x-4 px-2">
|
||||
<svg id="header-search-button" 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 block xl:hidden cursor-pointer">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
|
||||
</svg>
|
||||
<svg id="header-menu-button" 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 block xl:hidden cursor-pointer">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 5.25h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5m-16.5 4.5h16.5" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- END HEADER -->
|
||||
37
resources/views/september/inc/nav.blade.php
Executable file
37
resources/views/september/inc/nav.blade.php
Executable file
@@ -0,0 +1,37 @@
|
||||
<!-- BEGIN NAVBAR -->
|
||||
<nav id="nav-menu"
|
||||
class="hidden xl:block container mx-auto py-0 px-2 bg-main-700 xl:bg-main-800 xl:mt-5 shadow-navbar rounded-md rounded-t-none xl:rounded-t">
|
||||
<ul class="w-full xl:flex items-center bg-main-700 xl:bg-main-800 px-1 py-1 xl:space-x-4 text-[#D0D2D6]">
|
||||
@foreach ($menu as $item)
|
||||
<li
|
||||
class="group leading-6 cursor-pointer hover:bg-[#161D31] transition duration-150 ease-in-out py-2 my-1 rounded-md px-4 xl:px-2 tracking-wide relative block xl:flex xl:justify-between items-center space-x-1">
|
||||
@if (count($item['children']))
|
||||
<span>{{ $item->name }}</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline" fill="none" viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
<div class="group-hover:block hidden top-full left-0 xl:absolute h-auto pt-4 z-20">
|
||||
<ul
|
||||
class="w-full xl:w-max grid grid-flow-rows grid-cols-2 md:grid-cols-4 gap-1 bg-main-700 xl:bg-main-800 rounded-md xl:shadow max-h-48 md:max-h-full overflow-auto">
|
||||
@foreach ($item['children'] as $children)
|
||||
<li class="py-1 px-2 xl:py-2 xl:px-4">
|
||||
<a href="{{ $children['link'] }}"
|
||||
class="block text-gray-300 text-base cursor-pointer hover:translate-x-1 transition duration-200">
|
||||
{{ $children['name'] }}
|
||||
</a>
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@else
|
||||
<a href="{{ $item['link'] }}"
|
||||
class="block text-gray-300 text-base cursor-pointer transition duration-200">
|
||||
{{ $item['name'] }}
|
||||
</a>
|
||||
@endif
|
||||
</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- END NAVBAR -->
|
||||
121
resources/views/september/inc/pagination.blade.php
Normal file
121
resources/views/september/inc/pagination.blade.php
Normal file
@@ -0,0 +1,121 @@
|
||||
@if ($paginator->hasPages())
|
||||
<nav role="navigation" aria-label="{{ __('Pagination Navigation') }}" class="flex items-center justify-between my-2">
|
||||
<div class="flex justify-between flex-1 md:hidden">
|
||||
@if ($paginator->onFirstPage())
|
||||
<div></div>
|
||||
{{-- <span class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-500 bg-main-800/40 hover:bg-main-primary hover:shadow-menu shadow-md cursor-default leading-5 rounded-md">
|
||||
{!! __('pagination.previous') !!}
|
||||
</span> --}}
|
||||
@else
|
||||
<a href="{{ $paginator->previousPageUrl() }}"
|
||||
class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-main-800/40 hover:bg-main-primary hover:shadow-menu shadow-md leading-5 rounded-md">
|
||||
{!! __('pagination.previous') !!}
|
||||
</a>
|
||||
@endif
|
||||
|
||||
@if ($paginator->hasMorePages())
|
||||
<a href="{{ $paginator->nextPageUrl() }}"
|
||||
class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-white bg-main-800/40 hover:bg-main-primary hover:shadow-menu shadow-md leading-5 rounded-md">
|
||||
{!! __('pagination.next') !!}
|
||||
</a>
|
||||
@else
|
||||
{{-- <span class="relative inline-flex items-center px-4 py-2 ml-3 text-sm font-medium text-gray-500 bg-main-800/40 hover:bg-main-primary hover:shadow-menu shadow-md cursor-default leading-5 rounded-md">
|
||||
{!! __('pagination.next') !!}
|
||||
</span> --}}
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="hidden md:flex-1 md:flex md:items-center md:justify-between">
|
||||
<div>
|
||||
<p class="text-sm text-white leading-5">
|
||||
{!! __('Showing') !!}
|
||||
@if ($paginator->firstItem())
|
||||
<span class="font-medium">{{ $paginator->firstItem() }}</span>
|
||||
{!! __('to') !!}
|
||||
<span class="font-medium">{{ $paginator->lastItem() }}</span>
|
||||
@else
|
||||
{{ $paginator->count() }}
|
||||
@endif
|
||||
{!! __('of') !!}
|
||||
<span class="font-medium">{{ $paginator->total() }}</span>
|
||||
{!! __('results') !!}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span class="relative z-0 inline-flex shadow-sm rounded-md">
|
||||
{{-- Previous Page Link --}}
|
||||
@if ($paginator->onFirstPage())
|
||||
{{-- <span aria-disabled="true" aria-label="{{ __('pagination.previous') }}">
|
||||
<span class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-gray-500 bg-main-800/40 hover:bg-main-primary hover:shadow-menu shadow-md cursor-default rounded-l-md leading-5" aria-hidden="true">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
</span> --}}
|
||||
@else
|
||||
<a href="{{ $paginator->previousPageUrl() }}" rel="prev"
|
||||
class="relative inline-flex items-center px-2 py-2 text-sm font-medium text-white bg-main-800/40 hover:bg-main-primary hover:shadow-menu shadow-md rounded-l-md leading-5focus:z-10 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150"
|
||||
aria-label="{{ __('pagination.previous') }}">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
@endif
|
||||
|
||||
{{-- Pagination Elements --}}
|
||||
@foreach ($elements as $element)
|
||||
{{-- "Three Dots" Separator --}}
|
||||
@if (is_string($element))
|
||||
<span aria-disabled="true">
|
||||
<span
|
||||
class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-white bg-main-800/40 hover:bg-main-primary hover:shadow-menu shadow-md cursor-default leading-5">{{ $element }}</span>
|
||||
</span>
|
||||
@endif
|
||||
|
||||
{{-- Array Of Links --}}
|
||||
@if (is_array($element))
|
||||
@foreach ($element as $page => $url)
|
||||
@if ($page == $paginator->currentPage())
|
||||
<span aria-current="page">
|
||||
<span
|
||||
class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-white bg-main-primary hover:bg-opacity-80 shadow-md cursor-default leading-5">{{ $page }}</span>
|
||||
</span>
|
||||
@else
|
||||
<a href="{{ $url }}"
|
||||
class="relative inline-flex items-center px-4 py-2 -ml-px text-sm font-medium text-white bg-main-800/40 hover:bg-main-primary hover:shadow-menu shadow-md leading-5 focus:z-10 active:bg-gray-100 active:text-white transition ease-in-out duration-150"
|
||||
aria-label="{{ __('Go to page :page', ['page' => $page]) }}">
|
||||
{{ $page }}
|
||||
</a>
|
||||
@endif
|
||||
@endforeach
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
{{-- Next Page Link --}}
|
||||
@if ($paginator->hasMorePages())
|
||||
<a href="{{ $paginator->nextPageUrl() }}" rel="next"
|
||||
class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-white bg-main-800/40 hover:bg-main-primary hover:shadow-menu shadow-md rounded-r-md leading-5 focus:z-10 active:bg-gray-100 active:text-gray-500 transition ease-in-out duration-150"
|
||||
aria-label="{{ __('pagination.next') }}">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd"
|
||||
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
|
||||
clip-rule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
@else
|
||||
{{-- <span aria-disabled="true" aria-label="{{ __('pagination.next') }}">
|
||||
<span class="relative inline-flex items-center px-2 py-2 -ml-px text-sm font-medium text-gray-500 bg-main-800/40 hover:bg-main-primary hover:shadow-menu shadow-md cursor-default rounded-r-md leading-5" aria-hidden="true">
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</span>
|
||||
</span> --}}
|
||||
@endif
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
@endif
|
||||
@@ -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