Ümit Tunç
434 lines
16 KiB
PHP
434 lines
16 KiB
PHP
@extends('layouts.site')
|
|
|
|
@section('content')
|
|
<section class="wrapper !bg-[#edf2fc]">
|
|
<div class="container pt-10 pb-36 xl:pt-[4.5rem] lg:pt-[4.5rem] md:pt-[4.5rem] xl:pb-60 lg:pb-60 md:pb-60 !text-center">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="md:w-10/12 lg:w-8/12 xl:w-7/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
|
|
<div class="post-header">
|
|
@if($production->client_name)
|
|
<div class="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#74788d] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#e31e24]">
|
|
<span>{{ $production->translate('client_name') }}</span>
|
|
</div>
|
|
@endif
|
|
<h1 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-3">{{ $production->translate('title') }}</h1>
|
|
@if($production->production_date)
|
|
<p class="lead !leading-[1.65] text-[.9rem] font-medium text-[#60697b]">
|
|
<i class="uil uil-calendar-alt before:content-['\e9ba'] !mr-1"></i>
|
|
{{ $production->production_date->format('d.m.Y') }}
|
|
</p>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="wrapper !bg-[#ffffff] border-b-[rgba(164,174,198,0.2)] border-b border-solid">
|
|
<div class="container !pb-[4.5rem] xl:!pb-24 lg:!pb-24 md:!pb-24">
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="w-full flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<article class="!mt-[-12.5rem]">
|
|
@php
|
|
$videoId = null;
|
|
if ($production->youtube_video_id) {
|
|
$videoId = $production->youtube_video_id;
|
|
} elseif ($production->youtube_url) {
|
|
if (preg_match('%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/ ]{11})%i', $production->youtube_url, $match)) {
|
|
$videoId = $match[1];
|
|
}
|
|
}
|
|
@endphp
|
|
|
|
{{-- CD Jewel Case 3D Mockup --}}
|
|
@if($production->cover_image_url)
|
|
<div class="cd-mockup-wrapper flex justify-center !mb-12 xl:!mb-16">
|
|
<div class="cd-case-perspective">
|
|
<div class="cd-case" @if($videoId) id="play-cd-btn" style="cursor: pointer;" title="{{ __('music_productions.youtube_watch_on_youtube') }}" @endif>
|
|
{{-- Left Spine (Plastic Hinge) --}}
|
|
<div class="cd-spine"></div>
|
|
{{-- Cover Graphic --}}
|
|
<div class="cd-cover" style="background-image: url('{{ $production->cover_image_url }}');">
|
|
{{-- Glass shine reflection --}}
|
|
<div class="cd-shine"></div>
|
|
{{-- Play Button Overlay --}}
|
|
@if($videoId)
|
|
<div class="cd-play-overlay">
|
|
<div class="cd-play-btn">
|
|
<i class="uil uil-play before:content-['\ea15'] text-white text-[2rem] ml-1"></i>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- YouTube Lightbox Modal --}}
|
|
@if($videoId)
|
|
<div id="youtube-lightbox" class="fixed inset-0 z-[9999] flex items-center justify-center bg-black/90 backdrop-blur-md opacity-0 pointer-events-none transition-all duration-300">
|
|
<div class="absolute inset-0" id="lightbox-bg"></div>
|
|
<div class="relative w-full max-w-4xl mx-4 aspect-video z-10 scale-95 opacity-0 transition-all duration-300" id="lightbox-content">
|
|
<button id="lightbox-close" class="absolute -top-12 right-0 text-white hover:text-red-500 transition-colors text-2xl flex items-center gap-1 font-semibold focus:outline-none">
|
|
<i class="uil uil-times before:content-['\eb50']"></i> {{ t('Kapat') }}
|
|
</button>
|
|
<div class="w-full h-full rounded-lg overflow-hidden shadow-2xl bg-black border border-white/10">
|
|
<iframe id="lightbox-iframe" class="w-full h-full border-0" src="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Content & Meta --}}
|
|
<div class="flex flex-wrap mx-[-15px]">
|
|
<div class="xl:w-10/12 xl:!ml-[8.33333333%] lg:w-10/12 lg:!ml-[8.33333333%] w-full flex-[0_0_auto] !px-[15px] max-w-full">
|
|
<h2 class="!text-[calc(1.265rem_+_0.18vw)] font-bold xl:!text-[1.4rem] !leading-[1.35] !mb-4">{{ __('music_productions.project_details') }}</h2>
|
|
<div class="flex flex-wrap mx-0">
|
|
{{-- Content column --}}
|
|
<div class="xl:w-9/12 lg:w-9/12 md:w-9/12 w-full flex-[0_0_auto] max-w-full">
|
|
<div class="music-production-content prose max-w-none">
|
|
{!! $production->translate('content') !!}
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Sidebar - Date & Client --}}
|
|
<div class="xl:w-3/12 lg:w-3/12 md:w-3/12 w-full flex-[0_0_auto] max-w-full !ml-auto">
|
|
<ul class="pl-0 list-none">
|
|
@if($production->production_date)
|
|
<li>
|
|
<h5 class="!mb-1">{!! t('Tarih') !!}</h5>
|
|
<p>{{ $production->production_date->format('d M Y') }}</p>
|
|
</li>
|
|
@endif
|
|
@if($production->client_name)
|
|
<li>
|
|
<h5 class="!mb-1">{!! t('Müşteri') !!}</h5>
|
|
<p>{{ $production->translate('client_name') }}</p>
|
|
</li>
|
|
@endif
|
|
@if($production->spotify_url)
|
|
<li class="!mb-3">
|
|
<h5 class="!mb-1">Spotify</h5>
|
|
<p>
|
|
<a href="{{ $production->spotify_url }}" target="_blank" rel="noopener noreferrer" class="btn btn-sm btn-soft-primary !rounded-[50rem] w-full text-center">
|
|
{{ __('music_productions.spotify_listen_on_spotify') }}
|
|
</a>
|
|
</p>
|
|
</li>
|
|
@endif
|
|
@if($production->youtube_url)
|
|
<li class="!mb-3">
|
|
<h5 class="!mb-1">YouTube</h5>
|
|
<p>
|
|
<a href="{{ $production->youtube_url }}" target="_blank" rel="noopener noreferrer" class="btn btn-sm btn-soft-red !rounded-[50rem] w-full text-center" style="background-color: rgba(227, 30, 36, 0.1); color: #e31e24;">
|
|
{{ __('music_productions.youtube_watch_on_youtube') }}
|
|
</a>
|
|
</p>
|
|
</li>
|
|
@endif
|
|
</ul>
|
|
<a href="{{ route('music-productions.index') }}" class="more hover mt-4 inline-block">
|
|
<i class="uil uil-arrow-left before:content-['\e949'] !mr-1"></i>
|
|
{{ __('music_productions.back_to_list') }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Gallery --}}
|
|
@php
|
|
$gallery = $production->gallery;
|
|
@endphp
|
|
@if(!empty($gallery) && is_array($gallery) && count($gallery) > 0)
|
|
<div class="flex flex-wrap mx-[-15px] md:mx-[-15px] !mt-[25px]">
|
|
@foreach($gallery as $galleryImage)
|
|
<div class="item xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
|
|
<figure class="overflow-hidden translate-y-0 group rounded cursor-dark">
|
|
<a href="{{ asset('storage/' . $galleryImage) }}" data-glightbox data-gallery="music-production-gallery">
|
|
<img class="transition-all duration-[0.35s] ease-in-out group-hover:scale-105 !rounded-[.4rem] w-full" src="{{ asset('storage/' . $galleryImage) }}" alt="{{ $production->translate('title') }}">
|
|
</a>
|
|
</figure>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
|
|
</article>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Post Navigation (Prev / Next) --}}
|
|
<div class="wrapper !bg-[#ffffff]">
|
|
<div class="container py-10">
|
|
<div class="flex flex-wrap mx-[-15px] md:mx-[-15px] !mt-[-15px] xl:!mt-0 lg:!mt-0 md:!mt-0">
|
|
<div class="xl:w-8/12 lg:w-8/12 md:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full self-center text-center xl:text-left lg:text-left md:text-left navigation">
|
|
@if($prev)
|
|
<a href="{{ route('music-productions.show', $prev->slug) }}" class="btn btn-soft-ash !rounded-[50rem] btn-icon btn-icon-start !mb-0 !mr-[.25rem] hover:translate-y-[-0.15rem]">
|
|
<i class="uil uil-arrow-left before:content-['\e949']"></i> {{ __('music_productions.prev') }}
|
|
</a>
|
|
@endif
|
|
@if($next)
|
|
<a href="{{ route('music-productions.show', $next->slug) }}" class="btn btn-soft-ash !rounded-[50rem] btn-icon btn-icon-end hover:translate-y-[-0.15rem] !mb-0">
|
|
{{ __('music_productions.next') }} <i class="uil uil-arrow-right before:content-['\e94c']"></i>
|
|
</a>
|
|
@endif
|
|
</div>
|
|
<aside class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full max-md:!mt-[15px] sidebar text-center xl:text-right lg:text-right md:text-right">
|
|
<a href="{{ route('music-productions.index') }}" class="btn btn-soft-primary !rounded-[50rem] btn-icon btn-icon-start hover:translate-y-[-0.15rem] !mb-0">
|
|
<i class="uil uil-apps before:content-['\e93e']"></i> {{ __('music_productions.back_to_list') }}
|
|
</a>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@push('styles')
|
|
<style>
|
|
/* 3D CD Jewel Case Mockup Styles */
|
|
.cd-mockup-wrapper {
|
|
perspective: 2000px;
|
|
}
|
|
|
|
.cd-case-perspective {
|
|
width: 100%;
|
|
max-width: 400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.cd-case {
|
|
position: relative;
|
|
width: 100%;
|
|
aspect-ratio: 1/1;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border: 4px solid rgba(255, 255, 255, 0.35);
|
|
border-radius: 12px;
|
|
box-shadow:
|
|
-10px 20px 40px rgba(0, 0, 0, 0.3),
|
|
0 10px 20px rgba(0, 0, 0, 0.15),
|
|
inset 0 0 15px rgba(255, 255, 255, 0.2);
|
|
transform: rotateX(15deg) rotateY(-18deg) rotateZ(3deg);
|
|
transform-style: preserve-3d;
|
|
transition: all 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
display: flex;
|
|
overflow: hidden;
|
|
padding: 8px;
|
|
}
|
|
|
|
.cd-case:hover {
|
|
transform: rotateX(6deg) rotateY(-6deg) rotateZ(0deg) scale(1.06);
|
|
border-color: rgba(255, 255, 255, 0.5);
|
|
box-shadow:
|
|
-15px 30px 55px rgba(0, 0, 0, 0.4),
|
|
0 15px 30px rgba(0, 0, 0, 0.2),
|
|
inset 0 0 25px rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
/* CD Hinge / Plastic Tray Spine */
|
|
.cd-spine {
|
|
width: 24px;
|
|
height: 100%;
|
|
background: linear-gradient(90deg,
|
|
rgba(20, 20, 20, 0.85) 0%,
|
|
rgba(70, 70, 70, 0.9) 20%,
|
|
rgba(35, 35, 35, 0.85) 45%,
|
|
rgba(90, 90, 90, 0.7) 65%,
|
|
rgba(25, 25, 25, 0.9) 100%
|
|
);
|
|
border-radius: 6px 0 0 6px;
|
|
border-right: 1.5px solid rgba(255, 255, 255, 0.15);
|
|
position: relative;
|
|
z-index: 10;
|
|
box-shadow: inset 1px 0 3px rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
/* CD Booklet Cover Art */
|
|
.cd-cover {
|
|
flex: 1;
|
|
height: 100%;
|
|
background-size: cover;
|
|
background-position: center;
|
|
border-radius: 0 6px 6px 0;
|
|
position: relative;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.55);
|
|
}
|
|
|
|
/* Jewel Case Plastic Glass Reflection */
|
|
.cd-shine {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 160%;
|
|
height: 160%;
|
|
background: linear-gradient(135deg,
|
|
rgba(255, 255, 255, 0.5) 0%,
|
|
rgba(255, 255, 255, 0.18) 32%,
|
|
rgba(255, 255, 255, 0) 32.5%,
|
|
rgba(255, 255, 255, 0) 48%,
|
|
rgba(255, 255, 255, 0.12) 48.5%,
|
|
rgba(255, 255, 255, 0.06) 65%,
|
|
rgba(255, 255, 255, 0) 65.5%
|
|
);
|
|
transform: translate(-30%, -30%) rotate(4deg);
|
|
pointer-events: none;
|
|
z-index: 5;
|
|
transition: all 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
}
|
|
|
|
.cd-case:hover .cd-shine {
|
|
transform: translate(-18%, -18%) rotate(8deg);
|
|
}
|
|
|
|
/* Hover Play Button Overlay */
|
|
.cd-play-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.4);
|
|
backdrop-filter: blur(2px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
transition: all 0.3s ease;
|
|
z-index: 6;
|
|
}
|
|
|
|
.cd-case:hover .cd-play-overlay {
|
|
opacity: 1;
|
|
}
|
|
|
|
.cd-play-btn {
|
|
width: 68px;
|
|
height: 68px;
|
|
border-radius: 50%;
|
|
background: #e31e24;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow:
|
|
0 10px 25px rgba(227, 30, 36, 0.5),
|
|
0 0 0 0px rgba(227, 30, 36, 0.3);
|
|
transition: all 0.3s ease;
|
|
transform: scale(0.85);
|
|
}
|
|
|
|
.cd-case:hover .cd-play-btn {
|
|
transform: scale(1);
|
|
animation: pulse-red-ring 2s infinite;
|
|
}
|
|
|
|
@keyframes pulse-red-ring {
|
|
0% {
|
|
box-shadow: 0 0 0 0px rgba(227, 30, 36, 0.7);
|
|
}
|
|
70% {
|
|
box-shadow: 0 0 0 15px rgba(227, 30, 36, 0);
|
|
}
|
|
100% {
|
|
box-shadow: 0 0 0 0px rgba(227, 30, 36, 0);
|
|
}
|
|
}
|
|
|
|
/* Content styling */
|
|
.music-production-content p {
|
|
margin-bottom: 1rem;
|
|
line-height: 1.75;
|
|
}
|
|
.music-production-content img {
|
|
border-radius: 0.4rem;
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
.music-production-content h2,
|
|
.music-production-content h3,
|
|
.music-production-content h4 {
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
/* Gallery hover effect */
|
|
.cursor-dark figure {
|
|
transition: box-shadow 0.3s ease;
|
|
}
|
|
.cursor-dark:hover figure {
|
|
box-shadow: 0 0.5rem 2rem rgba(30,34,40,0.12);
|
|
}
|
|
|
|
/* Entrance animation */
|
|
article {
|
|
animation: fadeIn 0.8s ease forwards;
|
|
}
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* Flatten 3D CD element when lightbox is open to fix stacking context issues */
|
|
body.lightbox-open .cd-mockup-wrapper,
|
|
body.lightbox-open .cd-case-perspective,
|
|
body.lightbox-open .cd-case {
|
|
transform: none !important;
|
|
perspective: none !important;
|
|
transform-style: flat !important;
|
|
z-index: 1 !important;
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@push('scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const cdBtn = document.getElementById('play-cd-btn');
|
|
const lightbox = document.getElementById('youtube-lightbox');
|
|
const lightboxBg = document.getElementById('lightbox-bg');
|
|
const lightboxContent = document.getElementById('lightbox-content');
|
|
const lightboxClose = document.getElementById('lightbox-close');
|
|
const iframe = document.getElementById('lightbox-iframe');
|
|
const videoId = "{{ $videoId }}";
|
|
|
|
if (cdBtn && lightbox && iframe) {
|
|
cdBtn.addEventListener('click', function() {
|
|
// Set autoplay & enable javascript API
|
|
iframe.src = `https://www.youtube.com/embed/${videoId}?autoplay=1&enablejsapi=1`;
|
|
|
|
// Show lightbox container with transition
|
|
lightbox.classList.remove('opacity-0', 'pointer-events-none');
|
|
document.body.classList.add('lightbox-open');
|
|
setTimeout(() => {
|
|
lightboxContent.classList.remove('scale-95', 'opacity-0');
|
|
}, 50);
|
|
});
|
|
|
|
function closeLightbox() {
|
|
lightboxContent.classList.add('scale-95', 'opacity-0');
|
|
lightbox.classList.add('opacity-0', 'pointer-events-none');
|
|
document.body.classList.remove('lightbox-open');
|
|
|
|
// Clear source to halt playback after transition completes
|
|
setTimeout(() => {
|
|
iframe.src = "";
|
|
}, 300);
|
|
}
|
|
|
|
lightboxBg.addEventListener('click', closeLightbox);
|
|
lightboxClose.addEventListener('click', closeLightbox);
|
|
|
|
// Listen for ESC key
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape' && !lightbox.classList.contains('opacity-0')) {
|
|
closeLightbox();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
@endpush
|
|
@endsection
|