Files
animexe/resources/views/frontend/search.blade.php
T
2026-07-14 00:01:48 +03:00

230 lines
11 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
@extends('frontend.layouts.app')
@section('title', ($q ? '"'.$q.'" — Arama' : 'Tüm Animeler') . ' — Animexe')
@section('meta_description', $q ? '"' . $q . '" için anime arama sonuçları — Animexe\'de Türkçe anime izleyin.' : 'Animexe\'de tüm anime dizi ve filmlerini keşfedin. Tür, durum ve yıla göre filtreleyin.')
@section('robots', ($q || request()->has('genre') || request()->has('type') || request()->has('year') || $results->currentPage() > 1) ? 'noindex, follow' : 'index, follow')
@push('styles')
<style>
/* ═══════════════════════════════════════════════════
SEARCH PAGE PREMIUM
═══════════════════════════════════════════════════ */
.srch-hero{
background:linear-gradient(180deg,rgba(8,8,20,.98) 0%,rgba(6,6,13,.99) 100%);
padding:clamp(28px,5vw,48px) clamp(16px,4vw,48px) clamp(24px,3.5vw,36px);
border-bottom:1px solid rgba(0,245,255,.1);
position:relative;overflow:hidden;
}
.srch-hero::before{
content:'';position:absolute;top:-60%;left:-10%;right:-10%;bottom:-20%;
background:
radial-gradient(ellipse 60% 50% at 30% 50%,rgba(0,245,255,.05),transparent),
radial-gradient(ellipse 50% 40% at 70% 50%,rgba(255,45,125,.04),transparent);
pointer-events:none;
}
.srch-hero::after{
content:'';position:absolute;bottom:0;left:5%;right:5%;height:1px;
background:linear-gradient(90deg,transparent,var(--accent2),var(--accent),transparent);
opacity:.4;
}
.srch-hero h1{
font-family:var(--font-display);
font-size:clamp(1.3rem,3vw,2rem);
font-weight:900;margin-bottom:22px;letter-spacing:.05em;text-transform:uppercase;
background:linear-gradient(135deg,#fff 0%,var(--accent2) 55%,var(--accent) 100%);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
animation:srch-in .5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes srch-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.srch-form{
display:flex;flex-direction:column;gap:10px;max-width:1100px;
animation:srch-in .5s cubic-bezier(.22,1,.36,1) .1s both;
}
.srch-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.srch-inp-wrap{position:relative;flex:1 1 260px;min-width:0}
.srch-inp-wrap i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--accent2);font-size:.9rem;pointer-events:none;opacity:.8}
.srch-inp-wrap input{
width:100%;padding:13px 16px 13px 44px;
background:rgba(17,17,31,.92);border:1px solid rgba(0,245,255,.22);
border-radius:12px;color:var(--text);font-size:.94rem;outline:none;
transition:border .18s,box-shadow .18s,background .18s;
}
.srch-inp-wrap input:focus{
border-color:var(--accent2);
box-shadow:0 0 0 3px rgba(0,245,255,.14),0 0 28px rgba(0,245,255,.08);
background:rgba(0,245,255,.05);
}
.srch-inp-wrap input::placeholder{color:var(--text3)}
.srch-sel{
padding:11px 10px;
background:#11111f;border:1px solid rgba(0,245,255,.15);
border-radius:10px;color:var(--text);font-size:.82rem;outline:none;cursor:pointer;
flex:1 1 120px;transition:border .18s;
-webkit-appearance:none;appearance:none;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2300f5ff' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 10px center;
padding-right:30px;
}
.srch-sel option{background:#11111f;color:var(--text)}
.srch-sel:focus{border-color:var(--accent2);box-shadow:0 0 0 2px rgba(0,245,255,.1)}
.srch-sel-sort{
border-color:rgba(255,45,125,.4);
background:#1a0d14;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ff2d7d' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 10px center;
font-weight:700;
color:#ff8ab0;
}
.srch-sel-sort option{background:#1a0d14;color:#fff}
.srch-sel-sort:focus{border-color:var(--accent3)}
.srch-btn{
padding:11px 22px;border-radius:10px;border:none;
background:linear-gradient(135deg,var(--accent),var(--accent3));
color:#fff;font-size:.88rem;font-weight:800;cursor:pointer;
transition:transform .14s,box-shadow .18s;flex-shrink:0;
box-shadow:0 0 24px rgba(255,45,125,.3),0 4px 16px rgba(0,0,0,.3);
}
.srch-btn:hover{transform:translateY(-1px);box-shadow:0 0 32px rgba(255,45,125,.45);opacity:1}
.srch-sort-label{
font-size:.72rem;font-weight:700;color:var(--text3);letter-spacing:.06em;
text-transform:uppercase;white-space:nowrap;padding-left:2px;
}
.srch-count{
color:var(--text2);font-size:.85rem;margin-bottom:16px;
animation:srch-in .4s cubic-bezier(.22,1,.36,1) .15s both;
}
.srch-count strong{color:var(--accent2)}
/* Card grid reveal animation */
.a-grid .a-card{
animation:srch-card-in .45s cubic-bezier(.22,1,.36,1) both;
}
@keyframes srch-card-in{
from{opacity:0;transform:translateY(16px) scale(.97)}
to{opacity:1;transform:none}
}
@media(max-width:600px){
.srch-hero{padding:24px 14px 20px}
.srch-hero h1{font-size:1.05rem;margin-bottom:12px}
.srch-form{gap:8px}
.srch-sel{font-size:.8rem;padding:9px 8px;flex:1 1 90px}
.srch-btn{width:100%;justify-content:center;padding:11px;display:flex;align-items:center;gap:6px}
.srch-sort-label{display:none}
}
@media(max-width:380px){
.srch-sel{flex:1 1 70px;font-size:.75rem;padding:8px 5px}
}
</style>
@endpush
@section('content')
<div class="srch-hero">
<div style="max-width:1600px;margin:0 auto">
<h1>{{ $q ? '"'.$q.'" için sonuçlar' : 'Tüm Animeler' }}</h1>
<form action="{{ route('search') }}" method="GET" class="srch-form">
{{-- Satır 1: Arama kutusu + Ara butonu --}}
<div class="srch-row">
<div class="srch-inp-wrap">
<i class="bi bi-search"></i>
<input type="text" name="q" value="{{ $q }}" placeholder="Anime adı, alternatif isim...">
</div>
<button type="submit" class="srch-btn"><i class="bi bi-search"></i> Ara</button>
</div>
{{-- Satır 2: Filtreler + Sıralama --}}
<div class="srch-row">
<select name="type" class="srch-sel">
<option value="">Format (Hepsi)</option>
<option value="series" {{ $type==='series' ?'selected':'' }}>Dizi</option>
<option value="movie" {{ $type==='movie' ?'selected':'' }}>Film</option>
<option value="ova" {{ $type==='ova' ?'selected':'' }}>OVA</option>
<option value="ona" {{ $type==='ona' ?'selected':'' }}>ONA</option>
<option value="special" {{ $type==='special'?'selected':'' }}>Special</option>
</select>
<select name="status" class="srch-sel">
<option value="">Durum (Hepsi)</option>
<option value="ongoing" {{ $status==='ongoing' ?'selected':'' }}>Devam Ediyor</option>
<option value="completed"{{ $status==='completed'?'selected':'' }}>Tamamlandı</option>
<option value="upcoming" {{ $status==='upcoming' ?'selected':'' }}>Yakında</option>
</select>
<select name="genre" class="srch-sel">
<option value="">Tür (Hepsi)</option>
@foreach($genres as $g)
<option value="{{ $g->slug }}" {{ $genre===$g->slug?'selected':'' }}>{{ $g->name }}</option>
@endforeach
</select>
<select name="year" class="srch-sel">
<option value="">Yıl (Hepsi)</option>
@foreach($years as $y)
<option value="{{ $y }}" {{ (string)$year===(string)$y?'selected':'' }}>{{ $y }}</option>
@endforeach
</select>
<span class="srch-sort-label"><i class="bi bi-sort-down"></i> Sırala:</span>
<select name="sort" class="srch-sel srch-sel-sort" onchange="this.form.submit()">
<option value="popular" {{ $sort==='popular' ?'selected':'' }}>🔥 En Popüler</option>
<option value="rating" {{ $sort==='rating' ?'selected':'' }}> En Yüksek Puan</option>
<option value="newest" {{ $sort==='newest' ?'selected':'' }}>🆕 En Yeni</option>
<option value="oldest" {{ $sort==='oldest' ?'selected':'' }}>📅 En Eski</option>
<option value="az" {{ $sort==='az' ?'selected':'' }}>🔤 A Z</option>
<option value="za" {{ $sort==='za' ?'selected':'' }}>🔤 Z A</option>
@auth
<option value="personalized" {{ $sort==='personalized' ?'selected':'' }}> Sana Özel</option>
@endauth
</select>
</div>
</form>
</div>
</div>
<div class="section">
@php
$sortLabels = [
'popular' => '🔥 En Popüler',
'rating' => '⭐ En Yüksek Puan',
'newest' => '🆕 En Yeni',
'oldest' => '📅 En Eski',
'az' => '🔤 A → Z',
'za' => '🔤 Z → A',
'personalized'=> '✨ Sana Özel',
];
@endphp
<p class="srch-count">
Toplam <strong>{{ $results->total() }}</strong> anime bulundu
<span style="margin-left:10px;font-size:.78rem;color:var(--text3)">· {{ $sortLabels[$sort] ?? '' }}</span>
</p>
@if($results->count())
<div class="a-grid">
@foreach($results as $anime)
<a href="{{ $anime->slug ? route('anime.show', $anime->slug) : '#' }}" class="a-card">
<div class="a-poster">
@if($anime->coverUrl)
<img src="{{ $anime->coverUrl }}" alt="{{ $anime->title }}" loading="lazy">
@else
<div class="a-no-img"><i class="bi bi-image"></i></div>
@endif
@if($anime->type==='movie')<span class="a-badge">Film</span>@endif
@if($anime->rating)<span class="a-rating"><i class="bi bi-star-fill" style="font-size:.65rem"></i>{{ number_format($anime->rating,1) }}</span>@endif
<div class="a-hover-play"><div class="play-circle"><i class="bi bi-play-fill"></i></div></div>
</div>
<div class="a-info">
<div class="a-title">{{ $anime->title }}</div>
<div class="a-meta">{{ $anime->release_year }}@if($anime->episode_count) · {{ $anime->episode_count }}@endif</div>
</div>
</a>
@endforeach
</div>
@if($results->hasPages())
<div style="margin-top:32px">{{ $results->links('frontend.pagination') }}</div>
@endif
@else
<div style="text-align:center;padding:64px 20px;color:var(--text3)">
<i class="bi bi-search" style="font-size:3rem;opacity:.25;display:block;margin-bottom:14px"></i>
<p>Sonuç bulunamadı. Farklı bir arama terimi deneyin.</p>
<a href="{{ route('search') }}" style="color:var(--accent);margin-top:12px;display:inline-block">Tümünü Göster</a>
</div>
@endif
</div>
@endsection