add movie page backgrond image
This commit is contained in:
parent
8c108cd6ec
commit
094c29c083
1 changed files with 155 additions and 129 deletions
|
|
@ -7,6 +7,29 @@
|
|||
@section('head')
|
||||
<style>
|
||||
/* {!! Vite::content('resources/scss/player.scss') !!} */
|
||||
picture:after {
|
||||
position: absolute;
|
||||
content: "";
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: -6px;
|
||||
width: 100%;
|
||||
/* height: 100%; */
|
||||
box-shadow: inset 1px 0 105px 105px #0d0d31;
|
||||
background: linear-gradient(to bottom, #0d0d3105, #0d0d31);
|
||||
background-color: #0d0d3188;
|
||||
position: absolute;
|
||||
}
|
||||
picture > img {
|
||||
/* filter: blur(1px); */
|
||||
object-fit: cover;
|
||||
object-position: top;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
}
|
||||
</style>
|
||||
@endsection
|
||||
|
||||
|
|
@ -14,133 +37,139 @@
|
|||
{{-- {!! getMovieMarkupData($movie) !!} --}}
|
||||
{{-- @endsection --}}
|
||||
@section('app')
|
||||
<section class="inner-hero bg_img dark--overlay lazy" data-bg="{{asset('images/breadcrumb.webp')}}" style="background-image: data:image/svg+xml,%3Csvg width='1920' height='500' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1920' height='500' x='0' y='0' fill='%231B1B3F' /%3E%3C/svg%3E">
|
||||
<section class="inner-hero bg_img dark--overlay lazy">
|
||||
<picture style="position: absolute; width:100%; top:0; min-height:720px">
|
||||
@if(isset($movie['backdrop']) && $movie['backdrop'] !== '')
|
||||
<source type="image/webp" data-srcset="{{img_url('w1280', $movie['backdrop_path'], true, 400, 225 )}} 576w, {{img_url('w1280', $movie['backdrop_path'], true, 1280, 720 )}} 1200w">
|
||||
@endif
|
||||
<img @if(isset($movie['backdrop']) && $movie['backdrop'] !== '') data-src="{{img_url('w1280', $movie['backdrop_path'], true, 1280, 720 )}}" @endif width="100%" height="720" class="lazy" alt="{{ str($movie['title'])->apa() }} ({{ $movie['year'] }})" src="data:image/svg+xml,%3Csvg width='1280' height='720' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1280' height='720' x='0' y='0' fill='%231B1B3F' /%3E%3C/svg%3E">
|
||||
</picture>
|
||||
<div class="container position-relative">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<h1 class="text-center ">{{ str($movie['title'])->apa() }}</h1>
|
||||
<p class="text-center" style="font-style:italic; font-size:1.3rem">"{{ $movie['tagline'] }}"</p>
|
||||
<ul class="page-breadcrumb d-flex justify-content-center">
|
||||
<li><a href="{{route('home')}}" class="">Home</a></li>
|
||||
<li><a href="{{route('movies')}}" class="">Movies</a></li>
|
||||
<li>{{$movie['title']}}</li>
|
||||
</ul>
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<h1 class="text-center ">{{ str($movie['title'])->apa() }}</h1>
|
||||
@if($movie['tagline'])
|
||||
<p class="text-center" style="font-style:italic; font-size:1.3rem">"{{ $movie['tagline'] }}"</p>
|
||||
@endif
|
||||
<ul class="page-breadcrumb d-flex justify-content-center">
|
||||
<li><a href="{{route('home')}}" class="">Home</a></li>
|
||||
<li><a href="{{route('movies')}}" class="">Movies</a></li>
|
||||
<li>{{$movie['title']}}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="pt-80 pb-80">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
{{-- <div class="main-video cover" style="position: relative;width:100%">
|
||||
<picture>
|
||||
@if(isset($movie['backdrop']) && $movie['backdrop'] !== '')
|
||||
<source type="image/webp" data-srcset="{{img_url('w1280', $movie['backdrop_path'], true, 400, 225 )}} 576w, {{img_url('w1280', $movie['backdrop_path'], true, 1280, 720 )}} 1200w">
|
||||
@endif
|
||||
<img @if(isset($movie['backdrop']) && $movie['backdrop'] !== '') data-src="{{img_url('w1280', $movie['backdrop_path'], true, 1280, 720 )}}" @endif width="1280" height="720" class="lazy" alt="{{ str($movie['title'])->apa() }} ({{ $movie['year'] }})" src="data:image/svg+xml,%3Csvg width='1280' height='720' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1280' height='720' x='0' y='0' fill='%231B1B3F' /%3E%3C/svg%3E">
|
||||
</picture>
|
||||
</div> --}}
|
||||
<div class="movie-content">
|
||||
<div class="movie-content-inner d-sm-flex justify-content-between align-items-center flex-wrap">
|
||||
<div class="movie-content-left">
|
||||
<h2 class="title">Watch {{ str($movie['title'])->apa() }}</h2>
|
||||
<div class="pt-80 pb-80 position-relative">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="movie-content">
|
||||
<div class="movie-content-inner d-sm-flex justify-content-between align-items-center flex-wrap">
|
||||
<div class="movie-content-left">
|
||||
<h2 class="title">Watch {{ str($movie['title'])->apa() }}</h2>
|
||||
|
||||
<span class="sub-title">Type : <span class="cat"><a href="{{route('movies',['page' => null])}}">Movie</a></span>
|
||||
<span class="sub-title">Type : <span class="cat"><a href="{{route('movies',['page' => null])}}">Movie</a></span>
|
||||
Category: <a href="{{route('movies.genre',['page' => null, 'genre' => $movie['genres'][0]['slug']])}}">{{ $movie['genres'][0]['name'] }}</a>
|
||||
</span>
|
||||
</div>
|
||||
<div class="movie-content-right mt-sm-0 mt-3">
|
||||
<div class="movie-widget-area align-items-center">
|
||||
|
||||
<span class="movie-widget">
|
||||
<i class="lar la-star base--color"></i>
|
||||
<span>{{$movie['vote_average']}}</span>
|
||||
</span>
|
||||
|
||||
<span class="movie-widget">
|
||||
<i class="lar la-eye color--danger"></i>
|
||||
<span>{{$movie['vote_count']}} views</span>
|
||||
</span>
|
||||
|
||||
|
||||
<span class="movie-widget addWishlist " data-id="1207" data-type="item"><i class="las la-plus-circle"></i></span>
|
||||
</div>
|
||||
<div class="movie-content-right mt-sm-0 mt-3">
|
||||
<div class="movie-widget-area align-items-center">
|
||||
|
||||
<ul class="title-share d-flex align-items-center justify-content-sm-end justify-content-start flex-wrap">
|
||||
<li class="caption">Share : </li>
|
||||
<span class="movie-widget">
|
||||
<i class="lar la-star base--color"></i>
|
||||
<span>{{$movie['vote_average']}}</span>
|
||||
</span>
|
||||
|
||||
@if (isset($movie['share']) && is_array($movie['share']))
|
||||
<span class="movie-widget">
|
||||
<i class="lar la-eye color--danger"></i>
|
||||
<span>{{$movie['vote_count']}} views</span>
|
||||
</span>
|
||||
|
||||
|
||||
<span class="movie-widget addWishlist " data-id="1207" data-type="item"><i class="las la-plus-circle"></i></span>
|
||||
</div>
|
||||
|
||||
<ul class="title-share d-flex align-items-center justify-content-sm-end justify-content-start flex-wrap">
|
||||
<li class="caption">Share : </li>
|
||||
|
||||
@if (isset($movie['share']) && is_array($movie['share']))
|
||||
@foreach ($movie['share'] as $share)
|
||||
|
||||
<li data-bs-toggle="tooltip" data-bs-placement="top" title="{{ $share['name'] }}">
|
||||
<a href="{{ $share['url'] }}" target="_blank"><i class="lab {{ $share['icon'] }}"></i></a>
|
||||
</li>
|
||||
@endforeach
|
||||
@endif
|
||||
</ul>
|
||||
@endif
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="movie-details-content">
|
||||
<div class="tab-content" id="myTabContent">
|
||||
<div class="tab-pane fade show active" id="description" role="tabpanel" aria-labelledby="description-tab">
|
||||
<div class="card mb-sm-3 col-12 order-sm-1 order-2 mt-3 p-0">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<h4 class="mb-3">Details</h4>
|
||||
<p>{{ $movie['overview'] }}</p>
|
||||
<li>
|
||||
<span class="caption">Genres: </span>
|
||||
<span class="value">
|
||||
@foreach($movie['genres'] as $genre)
|
||||
<a href="{{route('movies.genre', $genre['slug'])}}">{{ $genre['name'] }}</a>@if(!$loop->last), @endif
|
||||
@endforeach
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="caption">Language: </span>
|
||||
<span class="value">
|
||||
@foreach($movie['languages'] as $language)
|
||||
{{ $language }}@if(!$loop->last), @endif
|
||||
@endforeach
|
||||
</span>
|
||||
</li>
|
||||
</div>
|
||||
<div class="col-lg-6 mt-lg-0 mt-4">
|
||||
<h4 class="mb-3">Cast & Crew</h4>
|
||||
<ul class="movie-details-list">
|
||||
<li>
|
||||
<span class="caption">Cast:</span>
|
||||
<span class="value">
|
||||
@foreach($movie['cast'] as $actor)
|
||||
{{ $actor['name'] }}@if(!$loop->last), @endif
|
||||
@endforeach</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="caption">Director:</span>
|
||||
<span class="value">
|
||||
@foreach($movie['crew']['directors'] as $actor)
|
||||
{{ $actor['name'] }}@if(!$loop->last), @endif
|
||||
@endforeach
|
||||
</span>
|
||||
</li>
|
||||
@unless (empty($movie['crew']['producers']))
|
||||
|
||||
<li>
|
||||
<span class="caption">Producer:</span>
|
||||
<span class="value">
|
||||
@foreach($movie['crew']['producers'] as $actor)
|
||||
{{ $actor['name'] }}@if(!$loop->last), @endif
|
||||
@endforeach</span>
|
||||
</li>
|
||||
@endunless
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div class="movie-details-content">
|
||||
<div class="tab-content" id="myTabContent">
|
||||
<div class="tab-pane fade show active" id="description" role="tabpanel" aria-labelledby="description-tab">
|
||||
<div class="card mb-sm-3 col-12 order-sm-1 order-2 mt-3 p-0">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<h4 class="mb-3">Details</h4>
|
||||
<p>{{ $movie['overview'] }}</p>
|
||||
<ul class="movie-details-list mt-3">
|
||||
|
||||
<li>
|
||||
<span class="caption">Genres: </span>
|
||||
<span class="value">
|
||||
@foreach($movie['genres'] as $genre)
|
||||
<a href="{{route('movies.genre', $genre['slug'])}}">{{ $genre['name'] }}</a>@if(!$loop->last), @endif
|
||||
@endforeach
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="caption">Language: </span>
|
||||
<span class="value">
|
||||
@foreach($movie['languages'] as $language)
|
||||
{{ $language }}@if(!$loop->last), @endif
|
||||
@endforeach
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-lg-6 mt-lg-0 mt-4">
|
||||
<h4 class="mb-3">Cast & Crew</h4>
|
||||
<ul class="movie-details-list">
|
||||
<li>
|
||||
<span class="caption">Cast:</span>
|
||||
<span class="value">
|
||||
@foreach($movie['cast'] as $actor)
|
||||
{{ $actor['name'] }}@if(!$loop->last), @endif
|
||||
@endforeach</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="caption">Director:</span>
|
||||
<span class="value">
|
||||
@foreach($movie['crew']['directors'] as $actor)
|
||||
{{ $actor['name'] }}@if(!$loop->last), @endif
|
||||
@endforeach
|
||||
</span>
|
||||
</li>
|
||||
@unless (empty($movie['crew']['producers']))
|
||||
|
||||
<li>
|
||||
<span class="caption">Producer:</span>
|
||||
<span class="value">
|
||||
@foreach($movie['crew']['producers'] as $actor)
|
||||
{{ $actor['name'] }}@if(!$loop->last), @endif
|
||||
@endforeach</span>
|
||||
</li>
|
||||
@endunless
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -149,29 +178,26 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="movie-section pb-80">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xl-12">
|
||||
<div class="section-header">
|
||||
<h3 class="section-title">Similar Titles</h3>
|
||||
<section class="movie-section pb-80 position-relative">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-xl-12">
|
||||
<div class="section-header">
|
||||
<h3 class="section-title">Similar Titles</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center mb-30-none">
|
||||
@foreach ($movie['similar'] as $item)
|
||||
@include('components.title_card', ['data_text' => ucfirst($item['type'])])
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row justify-content-center mb-30-none">
|
||||
@foreach ($movie['similar'] as $item)
|
||||
@include('components.title_card', ['data_text' => ucfirst($item['type'])])
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
|
||||
@endsection
|
||||
@section('footer')
|
||||
@endsection
|
||||
@section('footer')
|
||||
|
||||
@endsection
|
||||
@endsection
|
||||
|
|
|
|||
Loading…
Reference in a new issue