115 lines
5.4 KiB
PHP
115 lines
5.4 KiB
PHP
@extends('frontend.layouts.app')
|
||
@section('title', 'Zaman Kapsüllerim | Animexe')
|
||
@push('styles')
|
||
<style>
|
||
.cap-hero{padding-top:calc(var(--nav-h) + 40px);padding-bottom:32px;text-align:center;background:radial-gradient(ellipse at 50% 0%,rgba(100,80,255,.12) 0%,transparent 70%)}
|
||
.cap-hero h1{font-size:2rem;font-weight:900;margin-bottom:8px}
|
||
.cap-hero h1 span{color:#a78bfa}
|
||
.cap-hero p{color:rgba(255,255,255,.4);font-size:.9rem}
|
||
.cap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;padding:0 0 60px}
|
||
.cap-card{border-radius:16px;padding:20px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.08)}
|
||
.cap-card.locked{background:linear-gradient(135deg,rgba(20,18,40,.9),rgba(10,8,22,.9))}
|
||
.cap-card.unlocked{background:linear-gradient(135deg,rgba(100,80,255,.12),rgba(60,40,180,.08));border-color:rgba(167,139,250,.25)}
|
||
.cap-card.opened{background:linear-gradient(135deg,rgba(0,200,100,.06),rgba(0,160,80,.04));border-color:rgba(0,200,100,.2)}
|
||
.cap-lock-icon{font-size:2rem;margin-bottom:10px;display:block}
|
||
.cap-anime{font-size:.72rem;font-weight:700;color:rgba(167,139,250,.8);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px}
|
||
.cap-date{font-size:.78rem;color:rgba(255,255,255,.35);margin-bottom:14px}
|
||
.cap-locked-msg{font-size:.82rem;color:rgba(255,255,255,.25);text-align:center;padding:16px 0}
|
||
.cap-message{font-size:.88rem;line-height:1.6;color:rgba(255,255,255,.8);background:rgba(255,255,255,.04);border-radius:10px;padding:14px;border-left:3px solid #a78bfa;font-style:italic}
|
||
.cap-open-btn{width:100%;margin-top:14px;padding:10px;border-radius:10px;border:none;background:rgba(167,139,250,.2);color:#a78bfa;font-weight:700;font-size:.88rem;cursor:pointer;font-family:inherit;transition:background .15s}
|
||
.cap-open-btn:hover{background:rgba(167,139,250,.35)}
|
||
.cap-tag{display:inline-block;padding:2px 10px;border-radius:20px;font-size:.65rem;font-weight:700;margin-bottom:10px}
|
||
.cap-tag.locked{background:rgba(255,255,255,.06);color:rgba(255,255,255,.3)}
|
||
.cap-tag.unlocked{background:rgba(167,139,250,.12);color:#a78bfa}
|
||
.cap-tag.opened{background:rgba(0,200,100,.1);color:#00c864}
|
||
|
||
.cap-countdown{font-size:.78rem;color:rgba(255,255,255,.3);margin-top:8px;text-align:center}
|
||
</style>
|
||
@endpush
|
||
@section('content')
|
||
<div style="max-width:1100px;margin:0 auto;padding:0 20px">
|
||
|
||
<div class="cap-hero">
|
||
<h1>⏳ Zaman <span>Kapsüllerim</span></h1>
|
||
<p>Geçmiş benliğinden gelen mesajlar.</p>
|
||
</div>
|
||
|
||
@if($capsules->isEmpty())
|
||
<div style="text-align:center;padding:80px 20px;color:rgba(255,255,255,.25)">
|
||
<i class="bi bi-hourglass" style="font-size:3rem;display:block;margin-bottom:16px"></i>
|
||
Henüz kapsül oluşturmadın.<br>
|
||
<small style="font-size:.8rem">Bir anime sayfasından ilk kez izlerken kapsül bırakabilirsin.</small>
|
||
</div>
|
||
@else
|
||
<div class="cap-grid">
|
||
@foreach($capsules as $cap)
|
||
<div class="cap-card {{ $cap['opened'] ? 'opened' : ($cap['unlocked'] ? 'unlocked' : 'locked') }}" id="cap-{{ $cap['id'] }}">
|
||
<span class="cap-lock-icon">{{ $cap['opened'] ? '📭' : ($cap['unlocked'] ? '🔓' : '🔒') }}</span>
|
||
<span class="cap-tag {{ $cap['opened'] ? 'opened' : ($cap['unlocked'] ? 'unlocked' : 'locked') }}">
|
||
{{ $cap['opened'] ? 'Açıldı' : ($cap['unlocked'] ? 'Açılabilir' : 'Kilitli') }}
|
||
</span>
|
||
<div class="cap-anime">
|
||
<a href="{{ $cap['anime_url'] }}" style="color:inherit;text-decoration:none">{{ $cap['anime'] }}</a>
|
||
</div>
|
||
<div class="cap-date">
|
||
<i class="bi bi-calendar3"></i>
|
||
Oluşturuldu: {{ $cap['created_at'] }} · Açılış: {{ $cap['unlock_at'] }}
|
||
</div>
|
||
|
||
@if($cap['opened'] || $cap['unlocked'])
|
||
@if($cap['message'])
|
||
<div class="cap-message">{{ $cap['message'] }}</div>
|
||
@else
|
||
<button class="cap-open-btn" onclick="openCapsule({{ $cap['id'] }}, this)">
|
||
<i class="bi bi-envelope-open"></i> Kapsülü Aç
|
||
</button>
|
||
@endif
|
||
@else
|
||
<div class="cap-locked-msg">
|
||
<i class="bi bi-lock"></i><br>
|
||
Bu kapsül {{ $cap['unlock_at'] }} tarihinde açılacak
|
||
</div>
|
||
@endif
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
@endif
|
||
|
||
</div>
|
||
@endsection
|
||
@push('scripts')
|
||
<script>
|
||
const CSRF = document.querySelector('meta[name="csrf-token"]')?.content ?? '';
|
||
|
||
async function openCapsule(id, btn) {
|
||
btn.disabled = true;
|
||
btn.textContent = 'Açılıyor...';
|
||
const r = await fetch(`/kapsul/${id}/ac`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' },
|
||
body: JSON.stringify({}),
|
||
});
|
||
const d = await r.json();
|
||
if (d.ok) {
|
||
const card = document.getElementById('cap-' + id);
|
||
btn.remove();
|
||
const msg = document.createElement('div');
|
||
msg.className = 'cap-message';
|
||
msg.textContent = d.message;
|
||
card.appendChild(msg);
|
||
card.classList.remove('unlocked');
|
||
card.classList.add('opened');
|
||
card.querySelector('.cap-lock-icon').textContent = '📭';
|
||
const tag = card.querySelector('.cap-tag');
|
||
tag.textContent = 'Açıldı';
|
||
tag.className = 'cap-tag opened';
|
||
} else {
|
||
btn.disabled = false;
|
||
btn.textContent = 'Kapsülü Aç';
|
||
if (window.showToast) showToast(d.error || 'Hata oluştu.', 'error');
|
||
else alert(d.error || 'Hata oluştu.');
|
||
}
|
||
}
|
||
</script>
|
||
@endpush
|