Ümit Tunç
570 lines
18 KiB
PHP
570 lines
18 KiB
PHP
@extends('layouts.site')
|
||
|
||
@section('content')
|
||
{{-- demo28.html: hero + itemgrid --}}
|
||
<section class="wrapper bg-gradient-blend">
|
||
<div class="container pt-24 xl:pt-32 lg:pt-32 md:pt-32 pb-14 md:pb-32 xl:pb-40 lg:pb-40">
|
||
<div class="flex flex-wrap mx-[-15px] justify-center">
|
||
<div class="w-full md:w-10/12 lg:w-9/12 xl:w-8/12 flex-[0_0_auto] !px-[15px] max-w-full">
|
||
<figure class="!mb-0 flex justify-center">
|
||
<img
|
||
class="w-full h-auto max-w-full object-contain"
|
||
src="{{ asset('assets/music-production.png') }}"
|
||
alt="{{ __('music_productions.meta-index-title') }}"
|
||
width="1056"
|
||
height="576"
|
||
loading="eager"
|
||
>
|
||
</figure>
|
||
</div>
|
||
<!-- /column -->
|
||
</div>
|
||
<!-- /.row -->
|
||
<div class="flex flex-wrap mx-[-15px] !mt-10">
|
||
<div class="md:w-10/12 lg:w-9/12 xl:w-9/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !text-center">
|
||
|
||
<h1 class="xl:!text-[2.4rem] !text-[calc(1.365rem_+_1.38vw)] font-semibold !leading-[1.15] !mb-5 xl:!px-14">{{ __('music_productions.meta-index-title') }}</h1>
|
||
<p class="lead !text-[1.1rem] !mb-0">{{ __('music_productions.meta-index-description') }}</p>
|
||
<div class="music-production-search">
|
||
<form action="{{ route('music-productions.index') }}" method="GET" role="search" class="music-production-search__form">
|
||
<span class="music-production-search__icon" aria-hidden="true">
|
||
<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">
|
||
<circle cx="11" cy="11" r="7"/>
|
||
<path d="M20 20l-3-3"/>
|
||
</svg>
|
||
</span>
|
||
<input
|
||
type="search"
|
||
name="q"
|
||
value="{{ $search ?? request('q') }}"
|
||
class="music-production-search__input"
|
||
placeholder="{{ __('music_productions.search_placeholder') }}"
|
||
aria-label="{{ __('music_productions.search_placeholder') }}"
|
||
autocomplete="off"
|
||
>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<!-- /column -->
|
||
</div>
|
||
<!-- /.row -->
|
||
</div>
|
||
<!-- /.container -->
|
||
<div class="overflow-hidden">
|
||
<div class="divider !text-[#fefefe] mx-[-0.5rem]">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 92.26">
|
||
<path fill="currentColor" d="M1206,21.2c-60-5-119-36.92-291-5C772,51.11,768,48.42,708,43.13c-60-5.68-108-29.92-168-30.22-60,.3-147,27.93-207,28.23-60-.3-122-25.94-182-36.91S30,5.93,0,16.2V92.26H1440v-87l-30,5.29C1348.94,22.29,1266,26.19,1206,21.2Z" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
<!-- /.overflow-hidden -->
|
||
</section>
|
||
<!-- /section -->
|
||
|
||
<section class="wrapper">
|
||
<div class="container pt-14 xl:pt-0 lg:pt-0 md:pt-0 pb-24 xl:pb-32 lg:pb-32 md:pb-32">
|
||
@if($productions->count() > 0)
|
||
<div class="itemgrid grid-view projects-masonry md:!mt-[-10rem] lg:!mt-[-15rem] xl:!mt-[-15rem] !mb-[10rem]">
|
||
<div class="flex flex-wrap mx-[-20px] xl:mx-[-25px] lg:mx-[-25px] !mt-[-2rem] xl:!mt-[-2.5rem] lg:!mt-[-2.5rem] isotope">
|
||
@php
|
||
$variants = [
|
||
[
|
||
'filter' => 'workshop',
|
||
'tooltip' => 'itooltip-aqua',
|
||
'label_class' => "inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-semibold text-line 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-[#54a8c7] !mb-2 !text-[#54a8c7]",
|
||
],
|
||
[
|
||
'filter' => 'product',
|
||
'tooltip' => 'itooltip-purple',
|
||
'label_class' => "inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-semibold text-line 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-[#747ed1] !mb-2 !text-[#747ed1]",
|
||
],
|
||
[
|
||
'filter' => 'product',
|
||
'tooltip' => 'itooltip-yellow',
|
||
'label_class' => "inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-semibold text-line 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-[#fab758] !mb-2 !text-[#fab758]",
|
||
],
|
||
[
|
||
'filter' => 'workshop',
|
||
'tooltip' => 'itooltip-red',
|
||
'label_class' => "inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-semibold text-line 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-[#e2626b] !mb-2 !text-[#e2626b]",
|
||
],
|
||
[
|
||
'filter' => 'still-life',
|
||
'tooltip' => 'itooltip-orange',
|
||
'label_class' => "inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-semibold text-line 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-[#f78b77] !mb-2 !text-[#f78b77]",
|
||
],
|
||
[
|
||
'filter' => 'product',
|
||
'tooltip' => 'itooltip-leaf',
|
||
'label_class' => "inline-flex uppercase !tracking-[0.02rem] text-[0.7rem] font-semibold text-line 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-[#7cb798] !mb-2 !text-[#7cb798]",
|
||
],
|
||
];
|
||
@endphp
|
||
@foreach($productions as $index => $production)
|
||
@php
|
||
$variant = $variants[$index % count($variants)];
|
||
$detailUrl = route('music-productions.show', $production->slug);
|
||
|
||
$fullTitle = $production->translate('title');
|
||
$titlePart = $fullTitle;
|
||
$stylePart = '';
|
||
if (preg_match('/^(.*?)\s*\((.*?)\)\s*$/u', $fullTitle, $matches)) {
|
||
$titlePart = trim($matches[1]);
|
||
$stylePart = trim($matches[2]);
|
||
}
|
||
if (empty($stylePart)) {
|
||
$stylePart = $production->translate('client_name') ?: __('music_productions.card_category_default');
|
||
}
|
||
@endphp
|
||
<div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] max-w-full {{ $variant['filter'] }} px-[20px] xl:!px-[25px] lg:!px-[25px] !mt-[2rem] xl:!mt-[2.5rem] lg:!mt-[2.5rem]">
|
||
<div class="player-container">
|
||
<div class="player" data-player data-playlist="prod-{{ $production->id }}" data-track="0">
|
||
<div class="player__content">
|
||
<div class="player__artist" title="{{ $titlePart }}">{{ $titlePart }}</div>
|
||
<div class="player__album" title="{{ $stylePart }}">{{ $stylePart }}</div>
|
||
<div class="player__track">
|
||
@if($production->production_date)
|
||
{{ $production->production_date->format('d.m.Y') }}
|
||
@else
|
||
|
||
@endif
|
||
</div>
|
||
</div>
|
||
|
||
<a href="{{ $detailUrl }}" class="album" data-album>
|
||
@if($production->cover_image_url)
|
||
<div class="album__cover" style="background-image: url('{{ $production->cover_image_url }}');"></div>
|
||
@else
|
||
<div class="album__cover" style="background-image: url('{{ asset('assets/img/photos/pd6.jpg') }}');"></div>
|
||
@endif
|
||
<div class="vinyl">
|
||
<div class="vinyl__shadow"></div>
|
||
<div class="vinyl__circle">
|
||
<div class="vinyl__center" style="--center-bg: url('{{ $production->cover_image_url ?: asset('assets/img/photos/pd6.jpg') }}')"></div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
<!-- /.row -->
|
||
</div>
|
||
<!-- /.grid -->
|
||
|
||
@if($productions->hasPages())
|
||
<div class="flex flex-wrap mx-[-15px] !mt-[-4rem]">
|
||
<div class="w-full flex-[0_0_auto] !px-[15px] max-w-full">
|
||
<nav class="pagination-wrapper flex justify-center">
|
||
{{ $productions->links() }}
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
@endif
|
||
|
||
@else
|
||
<div class="itemgrid grid-view projects-masonry md:!mt-[-10rem] lg:!mt-[-15rem] xl:!mt-[-15rem]">
|
||
<div class="flex flex-wrap mx-[-15px]">
|
||
<div class="w-full flex-[0_0_auto] !px-[15px] max-w-full !text-center">
|
||
<div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] !p-12">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-16 h-16 text-gray-300 mx-auto !mb-4">
|
||
<path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
|
||
</svg>
|
||
<p class="text-[#74788d] text-lg">
|
||
@if(!empty($search))
|
||
{{ __('music_productions.search_no_results', ['query' => $search]) }}
|
||
@else
|
||
{{ __('music_productions.empty') }}
|
||
@endif
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
<!-- /.container -->
|
||
</section>
|
||
<!-- /section -->
|
||
@endsection
|
||
|
||
@push('styles')
|
||
<style>
|
||
.music-production-search {
|
||
width: 100%;
|
||
max-width: 36rem;
|
||
margin: 2.25rem auto 1.75rem;
|
||
padding: 0 0.25rem;
|
||
}
|
||
.music-production-search__form {
|
||
position: relative;
|
||
width: 100%;
|
||
}
|
||
.music-production-search__icon {
|
||
position: absolute;
|
||
left: 1.35rem;
|
||
top: 50%;
|
||
z-index: 2;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 1.25rem;
|
||
height: 1.25rem;
|
||
color: #747ed1;
|
||
pointer-events: none;
|
||
transform: translateY(-50%);
|
||
}
|
||
.music-production-search__icon svg {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.music-production-search__input {
|
||
display: block;
|
||
width: 100%;
|
||
height: 3.35rem;
|
||
margin: 0;
|
||
padding: 0 1.35rem 0 3.35rem;
|
||
font-family: inherit;
|
||
font-size: 0.95rem;
|
||
font-weight: 500;
|
||
line-height: 1.5;
|
||
color: #60697b;
|
||
background: rgba(255, 255, 255, 0.97);
|
||
border: 1px solid rgba(8, 60, 130, 0.12);
|
||
border-radius: 50rem;
|
||
box-shadow: 0 0.35rem 1.35rem rgba(30, 34, 40, 0.1);
|
||
outline: none;
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
||
}
|
||
.music-production-search__input::placeholder {
|
||
color: #959ca9;
|
||
opacity: 1;
|
||
}
|
||
.music-production-search__input:focus {
|
||
border-color: #747ed1;
|
||
box-shadow: 0 0.35rem 1.5rem rgba(116, 126, 209, 0.22);
|
||
}
|
||
.music-production-search__input::-webkit-search-cancel-button {
|
||
-webkit-appearance: none;
|
||
}
|
||
|
||
/* 1:1 kapak karesi — dikdörtgen görseli kırpar, yan boşluk bırakmaz */
|
||
.projects-masonry .music-production-cover {
|
||
position: relative;
|
||
aspect-ratio: 1 / 1;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
margin-bottom: 0;
|
||
border-radius: 0.4rem 0.4rem 0 0;
|
||
}
|
||
.projects-masonry .music-production-cover__link {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.projects-masonry .music-production-cover img {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100% !important;
|
||
object-fit: cover;
|
||
object-position: center;
|
||
border-radius: 0.4rem 0.4rem 0 0;
|
||
}
|
||
|
||
.pagination-wrapper .pagination {
|
||
display: flex;
|
||
gap: 0.35rem;
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
.pagination-wrapper .pagination li {
|
||
display: inline-flex;
|
||
}
|
||
.pagination-wrapper .pagination li a,
|
||
.pagination-wrapper .pagination li span {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 2.5rem;
|
||
height: 2.5rem;
|
||
padding: 0 0.75rem;
|
||
border-radius: 50rem;
|
||
font-size: 0.85rem;
|
||
font-weight: 600;
|
||
color: #60697b;
|
||
background: #f6f7f9;
|
||
border: 1px solid #e9ecef;
|
||
transition: all 0.2s ease;
|
||
text-decoration: none;
|
||
}
|
||
.pagination-wrapper .pagination li a:hover {
|
||
background: #747ed1;
|
||
border-color: #747ed1;
|
||
color: #fff;
|
||
transform: translateY(-0.1rem);
|
||
box-shadow: 0 0.25rem 0.75rem rgba(116, 126, 209, 0.25);
|
||
}
|
||
.pagination-wrapper .pagination li.active span,
|
||
.pagination-wrapper .pagination li span[aria-current="page"] {
|
||
background: #747ed1;
|
||
border-color: #747ed1;
|
||
color: #fff;
|
||
}
|
||
.pagination-wrapper .pagination li.disabled span {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
/* --- Vinyl Player Styles --- */
|
||
:root {
|
||
--color-black: #000;
|
||
--color-gray: #5e6062;
|
||
--color-white: #fff;
|
||
--color-yellow: #f0f39c;
|
||
--color-yellow-light: #fff99e;
|
||
--transition-time: 550ms;
|
||
--transition-method: cubic-bezier(0.34, 1.56, 0.64, 1);
|
||
--album-size: 260px;
|
||
--vinyl-offset: 15px;
|
||
--vinyl-size: calc(var(--album-size) - var(--vinyl-offset));
|
||
--vinyl-center-size: 110px;
|
||
}
|
||
|
||
.player-container {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 15px 0;
|
||
perspective: 1000px;
|
||
}
|
||
|
||
.player {
|
||
color: var(--color-gray);
|
||
font-family: 'Raleway', 'Outfit', sans-serif;
|
||
height: var(--album-size);
|
||
line-height: 1.2;
|
||
position: relative;
|
||
width: var(--album-size);
|
||
transition: all var(--transition-time) var(--transition-method);
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.player::after {
|
||
transform: rotate(-2deg);
|
||
transition: all var(--transition-time) var(--transition-method);
|
||
background: #777;
|
||
bottom: 12px;
|
||
box-shadow: 0 15px 23px rgba(0, 0, 0, 0.3);
|
||
content: '';
|
||
height: 10px;
|
||
left: 2%;
|
||
opacity: 0;
|
||
padding-left: 5%;
|
||
position: absolute;
|
||
width: 96%;
|
||
z-index: 5;
|
||
}
|
||
|
||
.player:hover::after {
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.player .player__content {
|
||
background-color: var(--color-white);
|
||
height: 100%;
|
||
padding: 50px 15px 0 15px;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
text-align: left;
|
||
width: 100%;
|
||
z-index: 50;
|
||
border-radius: 8px;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
border: 1px solid rgba(8, 60, 130, 0.05);
|
||
transition: all var(--transition-time) var(--transition-method);
|
||
}
|
||
|
||
.player .player__artist {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
margin-bottom: 3px;
|
||
max-width: 140px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
color: #343f52;
|
||
}
|
||
|
||
.player .player__album {
|
||
font-size: 13px;
|
||
font-weight: 300;
|
||
margin-bottom: 15px;
|
||
max-width: 140px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
color: #a4aec6;
|
||
}
|
||
|
||
.player .player__track {
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
margin-bottom: 15px;
|
||
max-width: 140px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
color: #60697b;
|
||
}
|
||
|
||
.player .player__track::before,
|
||
.player .player__track::after {
|
||
content: none;
|
||
}
|
||
|
||
.album {
|
||
transition: all var(--transition-time) var(--transition-method);
|
||
box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15);
|
||
cursor: pointer;
|
||
height: 100%;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
z-index: 100;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.project.item:has(.player:hover) {
|
||
z-index: 9999 !important;
|
||
}
|
||
|
||
.player:hover {
|
||
z-index: 999;
|
||
}
|
||
|
||
.player:hover .player__content {
|
||
transform: translateX(-160px);
|
||
box-shadow: -10px 15px 35px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.player:hover .album {
|
||
transform: scale(1.2);
|
||
z-index: 150;
|
||
box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.25);
|
||
}
|
||
|
||
.album__cover {
|
||
background-color: var(--color-black);
|
||
background-size: cover;
|
||
background-position: center;
|
||
height: 100%;
|
||
position: relative;
|
||
width: 100%;
|
||
z-index: 20;
|
||
border-radius: 8px;
|
||
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.vinyl {
|
||
transition: all var(--transition-time) var(--transition-method);
|
||
left: calc(var(--vinyl-offset) / 2);
|
||
position: absolute;
|
||
top: calc(var(--vinyl-offset) / 2);
|
||
height: var(--vinyl-size);
|
||
width: var(--vinyl-size);
|
||
z-index: 10;
|
||
}
|
||
|
||
.vinyl__shadow,
|
||
.vinyl__circle {
|
||
border-radius: 100%;
|
||
height: 100%;
|
||
left: 0;
|
||
position: absolute;
|
||
top: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
.vinyl__shadow {
|
||
box-shadow: 2px 8px 15px rgba(0, 0, 0, 0.2);
|
||
z-index: 5;
|
||
}
|
||
|
||
.vinyl__circle {
|
||
animation: rotate-vinyl 3s linear infinite both paused;
|
||
background-color: #1e1b1b;
|
||
background-image: radial-gradient(circle, #2c2727 10%, transparent 10%),
|
||
repeating-radial-gradient(circle, #2c2727, #1e1b1b 2px, #2c2727 4px);
|
||
z-index: 10;
|
||
transition: box-shadow var(--transition-time) var(--transition-method);
|
||
}
|
||
|
||
.player:hover .vinyl {
|
||
left: 60%;
|
||
}
|
||
|
||
.player:hover .vinyl__circle {
|
||
animation-play-state: running;
|
||
box-shadow: 0 0 25px rgba(0, 0, 0, 0.35), 0 0 50px rgba(3, 3, 3, 0.35);
|
||
}
|
||
|
||
.vinyl__center {
|
||
transform: translate(-50%, -50%);
|
||
background-color: #292424;
|
||
border-radius: 100%;
|
||
height: var(--vinyl-center-size);
|
||
left: 50%;
|
||
position: absolute;
|
||
top: 50%;
|
||
width: var(--vinyl-center-size);
|
||
}
|
||
|
||
.vinyl__center::before,
|
||
.vinyl__center::after {
|
||
transform: translate(-50%, -50%);
|
||
border-radius: 100%;
|
||
content: '';
|
||
left: 50%;
|
||
position: absolute;
|
||
top: 50%;
|
||
}
|
||
|
||
.vinyl__center::before {
|
||
background-color: #e31e24;
|
||
background-image: var(--center-bg);
|
||
background-size: cover;
|
||
background-position: center;
|
||
height: calc(var(--vinyl-center-size) - 20px);
|
||
width: calc(var(--vinyl-center-size) - 20px);
|
||
z-index: 5;
|
||
}
|
||
|
||
.vinyl__center::after {
|
||
background-color: #fff;
|
||
height: 20px;
|
||
width: 20px;
|
||
z-index: 10;
|
||
box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
|
||
}
|
||
|
||
@keyframes rotate-vinyl {
|
||
from {
|
||
transform: rotate(0deg);
|
||
}
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
</style>
|
||
@endpush
|