905 lines
42 KiB
PHP
905 lines
42 KiB
PHP
@extends('frontend.layouts.app')
|
||
@section('title', 'Profil Ayarları — Animexe')
|
||
|
||
@push('styles')
|
||
<style>
|
||
.ps-wrap {
|
||
max-width: 860px;
|
||
margin: 0 auto;
|
||
padding: 40px 20px 80px;
|
||
}
|
||
|
||
/* Banner + Avatar */
|
||
.ps-banner-area {
|
||
position: relative;
|
||
height: 200px;
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
background: linear-gradient(135deg, #0d0d1a, #1a0a2e);
|
||
margin-bottom: 0;
|
||
cursor: pointer;
|
||
transition: filter .2s;
|
||
}
|
||
.ps-banner-area:hover { filter: brightness(0.85); }
|
||
.ps-banner-img {
|
||
width: 100%; height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
.ps-banner-overlay {
|
||
position: absolute; inset: 0;
|
||
display: flex; align-items: center; justify-content: center;
|
||
background: rgba(0,0,0,.45);
|
||
opacity: 0;
|
||
transition: opacity .2s;
|
||
flex-direction: column; gap: 8px;
|
||
font-size: .85rem; color: #fff;
|
||
}
|
||
.ps-banner-area:hover .ps-banner-overlay { opacity: 1; }
|
||
.ps-banner-area::after {
|
||
content: '';
|
||
position: absolute; inset: 0;
|
||
background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,.7));
|
||
pointer-events: none;
|
||
}
|
||
|
||
.ps-avatar-row {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
gap: 20px;
|
||
margin-top: -48px;
|
||
padding: 0 24px;
|
||
margin-bottom: 24px;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
.ps-avatar-wrap {
|
||
position: relative;
|
||
flex-shrink: 0;
|
||
cursor: pointer;
|
||
}
|
||
.ps-avatar {
|
||
width: 96px; height: 96px;
|
||
border-radius: 20px;
|
||
border: 3px solid var(--ps-color, #00f5ff);
|
||
object-fit: cover;
|
||
background: #1a1a2e;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 2.2rem; font-weight: 900; color: #fff;
|
||
overflow: hidden;
|
||
box-shadow: 0 8px 32px rgba(0,0,0,.5);
|
||
transition: border-color .3s;
|
||
}
|
||
.ps-avatar img { width: 100%; height: 100%; object-fit: cover; }
|
||
.ps-avatar-overlay {
|
||
position: absolute; inset: 0;
|
||
border-radius: 18px;
|
||
background: rgba(0,0,0,.55);
|
||
display: flex; align-items: center; justify-content: center;
|
||
opacity: 0;
|
||
transition: opacity .2s;
|
||
font-size: 1.2rem; color: #fff;
|
||
}
|
||
.ps-avatar-wrap:hover .ps-avatar-overlay { opacity: 1; }
|
||
.ps-avatar-name {
|
||
padding-bottom: 8px;
|
||
font-size: 1.3rem;
|
||
font-weight: 800;
|
||
color: #fff;
|
||
}
|
||
|
||
/* Cards */
|
||
.ps-card {
|
||
background: rgba(255,255,255,.04);
|
||
border: 1px solid rgba(255,255,255,.08);
|
||
border-radius: 16px;
|
||
padding: 24px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.ps-card-title {
|
||
font-size: .8rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
letter-spacing: .08em;
|
||
color: rgba(255,255,255,.4);
|
||
margin-bottom: 20px;
|
||
padding-bottom: 12px;
|
||
border-bottom: 1px solid rgba(255,255,255,.06);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.ps-card-title i { font-size: 1rem; }
|
||
|
||
/* Form elements */
|
||
.ps-label {
|
||
display: block;
|
||
font-size: .8rem;
|
||
color: rgba(255,255,255,.5);
|
||
margin-bottom: 6px;
|
||
font-weight: 500;
|
||
}
|
||
.ps-input {
|
||
width: 100%;
|
||
background: rgba(255,255,255,.06);
|
||
border: 1px solid rgba(255,255,255,.1);
|
||
border-radius: 10px;
|
||
padding: 10px 14px;
|
||
color: #fff;
|
||
font-size: .9rem;
|
||
transition: border-color .2s, background .2s;
|
||
outline: none;
|
||
}
|
||
.ps-input:focus {
|
||
border-color: var(--ps-color, #00f5ff);
|
||
background: rgba(255,255,255,.09);
|
||
}
|
||
.ps-input::placeholder { color: rgba(255,255,255,.25); }
|
||
.ps-input.with-prefix { padding-left: 36px; }
|
||
|
||
.ps-field { margin-bottom: 16px; position: relative; }
|
||
.ps-prefix {
|
||
position: absolute;
|
||
left: 12px; top: 50%; transform: translateY(-50%);
|
||
color: rgba(255,255,255,.35);
|
||
font-size: .9rem;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.ps-textarea {
|
||
resize: vertical;
|
||
min-height: 80px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* Color picker */
|
||
.ps-color-grid {
|
||
display: flex;
|
||
gap: 10px;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
}
|
||
.ps-color-swatch {
|
||
width: 32px; height: 32px;
|
||
border-radius: 8px;
|
||
cursor: pointer;
|
||
border: 2px solid transparent;
|
||
transition: transform .15s, border-color .15s;
|
||
position: relative;
|
||
}
|
||
.ps-color-swatch:hover { transform: scale(1.15); }
|
||
.ps-color-swatch.active { border-color: #fff; transform: scale(1.1); }
|
||
.ps-color-swatch.active::after {
|
||
content: '✓';
|
||
position: absolute; inset: 0;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: .7rem; font-weight: 900; color: #fff;
|
||
text-shadow: 0 1px 3px rgba(0,0,0,.6);
|
||
}
|
||
.ps-color-custom {
|
||
width: 32px; height: 32px;
|
||
border-radius: 8px;
|
||
padding: 0;
|
||
border: 2px solid rgba(255,255,255,.2);
|
||
cursor: pointer;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* Privacy toggle */
|
||
.ps-toggle {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid rgba(255,255,255,.05);
|
||
}
|
||
.ps-toggle:last-child { border-bottom: none; }
|
||
.ps-toggle-label { font-size: .88rem; color: rgba(255,255,255,.8); }
|
||
.ps-toggle-sub { font-size: .75rem; color: rgba(255,255,255,.35); margin-top: 2px; }
|
||
.ps-switch {
|
||
position: relative;
|
||
width: 44px; height: 24px;
|
||
flex-shrink: 0;
|
||
}
|
||
.ps-switch input { opacity: 0; width: 0; height: 0; }
|
||
.ps-slider {
|
||
position: absolute; inset: 0;
|
||
background: rgba(255,255,255,.12);
|
||
border-radius: 24px;
|
||
transition: background .2s;
|
||
cursor: pointer;
|
||
}
|
||
.ps-slider::before {
|
||
content: '';
|
||
position: absolute;
|
||
width: 18px; height: 18px;
|
||
left: 3px; top: 3px;
|
||
background: #fff;
|
||
border-radius: 50%;
|
||
transition: transform .2s;
|
||
}
|
||
.ps-switch input:checked + .ps-slider { background: var(--ps-color, #00f5ff); }
|
||
.ps-switch input:checked + .ps-slider::before { transform: translateX(20px); }
|
||
|
||
/* Save button */
|
||
.ps-save {
|
||
width: 100%;
|
||
padding: 13px;
|
||
border-radius: 12px;
|
||
background: var(--ps-color, #00f5ff);
|
||
color: #000;
|
||
font-weight: 800;
|
||
font-size: .95rem;
|
||
border: none;
|
||
cursor: pointer;
|
||
transition: opacity .2s, transform .1s;
|
||
letter-spacing: .02em;
|
||
}
|
||
.ps-save:hover { opacity: .88; }
|
||
.ps-save:active { transform: scale(.98); }
|
||
|
||
/* Alert */
|
||
.ps-alert {
|
||
border-radius: 10px;
|
||
padding: 12px 16px;
|
||
font-size: .85rem;
|
||
margin-bottom: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
.ps-alert-success { background: rgba(63,185,80,.15); border: 1px solid rgba(63,185,80,.3); color: #7ee787; }
|
||
.ps-alert-error { background: rgba(248,81,73,.12); border: 1px solid rgba(248,81,73,.3); color: #f85149; }
|
||
|
||
/* Back link */
|
||
.ps-back {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 7px;
|
||
color: rgba(255,255,255,.45);
|
||
font-size: .83rem;
|
||
margin-bottom: 28px;
|
||
text-decoration: none;
|
||
transition: color .2s;
|
||
}
|
||
.ps-back:hover { color: rgba(255,255,255,.8); }
|
||
|
||
/* Danger zone */
|
||
.ps-danger { border-color: rgba(248,81,73,.25); }
|
||
.ps-danger .ps-card-title { color: rgba(248,81,73,.7); }
|
||
|
||
@media (max-width: 600px) {
|
||
.ps-banner-area { height: 140px; }
|
||
.ps-avatar { width: 76px; height: 76px; }
|
||
.ps-avatar-row { margin-top: -38px; }
|
||
}
|
||
</style>
|
||
@endpush
|
||
|
||
@section('content')
|
||
<div class="ps-wrap" id="psWrap" style="--ps-color: {{ $user->profile_color ?? '#00f5ff' }}">
|
||
|
||
<a href="{{ route('profile') }}" class="ps-back">
|
||
<i class="bi bi-arrow-left"></i> Profilime Dön
|
||
</a>
|
||
|
||
@if(session('success'))
|
||
<div class="ps-alert ps-alert-success">
|
||
<i class="bi bi-check-circle-fill"></i>{{ session('success') }}
|
||
</div>
|
||
@endif
|
||
@if($errors->any())
|
||
<div class="ps-alert ps-alert-error">
|
||
<i class="bi bi-exclamation-circle-fill"></i>{{ $errors->first() }}
|
||
</div>
|
||
@endif
|
||
|
||
{{-- Banner --}}
|
||
<form method="POST" action="{{ route('profile.banner') }}" enctype="multipart/form-data" id="bannerForm">
|
||
@csrf
|
||
<div class="ps-banner-area" onclick="document.getElementById('bannerInput').click()" title="Kapak fotoğrafı değiştir">
|
||
@if($user->banner_image)
|
||
<img class="ps-banner-img" src="{{ \App\Support\MediaUrl::fromStoragePath($user->banner_image) }}" alt="Banner">
|
||
@else
|
||
<div class="ps-banner-img" style="background:linear-gradient(135deg,#0d0d1a 0%,#1a0a2e 50%,#0a1a1a 100%);display:flex;align-items:center;justify-content:center">
|
||
<span style="color:rgba(255,255,255,.1);font-size:3rem"><i class="bi bi-image"></i></span>
|
||
</div>
|
||
@endif
|
||
<div class="ps-banner-overlay">
|
||
<i class="bi bi-camera" style="font-size:1.5rem"></i>
|
||
Kapak Fotoğrafı Değiştir
|
||
</div>
|
||
</div>
|
||
<input type="file" id="bannerInput" name="banner" accept="image/*" style="display:none" onchange="this.form.submit()">
|
||
</form>
|
||
|
||
{{-- Avatar row --}}
|
||
<div class="ps-avatar-row">
|
||
<form method="POST" action="{{ route('profile.avatar') }}" enctype="multipart/form-data" id="avatarForm">
|
||
@csrf
|
||
<div class="ps-avatar-wrap" onclick="document.getElementById('avatarInput').click()" title="Fotoğraf değiştir">
|
||
<div class="ps-avatar">
|
||
@if($user->avatar)
|
||
<img src="{{ \App\Support\MediaUrl::fromStoragePath($user->avatar) }}" alt="{{ $user->name }}">
|
||
@else
|
||
{{ strtoupper(substr($user->name, 0, 1)) }}
|
||
@endif
|
||
</div>
|
||
<div class="ps-avatar-overlay"><i class="bi bi-camera-fill"></i></div>
|
||
</div>
|
||
<input type="file" id="avatarInput" name="avatar" accept="image/*" style="display:none" onchange="this.form.submit()">
|
||
</form>
|
||
<div class="ps-avatar-name">{{ $user->name }}</div>
|
||
</div>
|
||
|
||
{{-- Ana bilgiler --}}
|
||
<form method="POST" action="{{ route('profile.update') }}">
|
||
@csrf
|
||
<input type="hidden" name="profile_color" id="profileColorInput" value="{{ $user->profile_color ?? '#00f5ff' }}">
|
||
|
||
<div class="ps-card">
|
||
<div class="ps-card-title"><i class="bi bi-person"></i> Temel Bilgiler</div>
|
||
|
||
<div class="row g-3">
|
||
<div class="col-md-6">
|
||
<div class="ps-field">
|
||
<label class="ps-label">Görünen Ad *</label>
|
||
<input type="text" name="name" class="ps-input" value="{{ old('name', $user->name) }}" required maxlength="60">
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="ps-field">
|
||
<label class="ps-label">Kullanıcı Adı <span style="opacity:.5">(opsiyonel)</span></label>
|
||
<div style="position:relative">
|
||
<span class="ps-prefix">@</span>
|
||
<input type="text" name="username" class="ps-input with-prefix"
|
||
value="{{ old('username', $user->username) }}"
|
||
placeholder="kullanici_adi" maxlength="30"
|
||
pattern="[a-zA-Z0-9_\-]+" title="Harf, rakam, _ veya - olabilir">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-12">
|
||
<div class="ps-field">
|
||
<label class="ps-label">Hakkımda <span style="opacity:.5">(max 300 karakter)</span></label>
|
||
<textarea name="bio" class="ps-input ps-textarea" maxlength="300"
|
||
placeholder="Kendinizden kısaca bahsedin...">{{ old('bio', $user->bio) }}</textarea>
|
||
<div style="text-align:right;font-size:.72rem;color:rgba(255,255,255,.3);margin-top:4px">
|
||
<span id="bioCount">{{ strlen($user->bio ?? '') }}</span>/300
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- Sosyal linkler --}}
|
||
<div class="ps-card">
|
||
<div class="ps-card-title"><i class="bi bi-link-45deg"></i> Sosyal Bağlantılar</div>
|
||
<div class="row g-3">
|
||
<div class="col-md-6">
|
||
<div class="ps-field">
|
||
<label class="ps-label"><i class="bi bi-twitter-x" style="font-size:.9rem"></i> Twitter / X</label>
|
||
<div style="position:relative">
|
||
<span class="ps-prefix">@</span>
|
||
<input type="text" name="twitter" class="ps-input with-prefix"
|
||
value="{{ old('twitter', $user->twitter) }}"
|
||
placeholder="kullanici_adi" maxlength="50">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="ps-field">
|
||
<label class="ps-label"><i class="bi bi-instagram" style="font-size:.9rem"></i> Instagram</label>
|
||
<div style="position:relative">
|
||
<span class="ps-prefix">@</span>
|
||
<input type="text" name="instagram" class="ps-input with-prefix"
|
||
value="{{ old('instagram', $user->instagram) }}"
|
||
placeholder="kullanici_adi" maxlength="50">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="ps-field">
|
||
<label class="ps-label"><i class="bi bi-discord" style="font-size:.9rem"></i> Discord</label>
|
||
<input type="text" name="discord" class="ps-input"
|
||
value="{{ old('discord', $user->discord) }}"
|
||
placeholder="Kullanıcı#0000 veya kullanici" maxlength="80">
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="ps-field">
|
||
<label class="ps-label"><i class="bi bi-globe2" style="font-size:.9rem"></i> Website</label>
|
||
<input type="url" name="website" class="ps-input"
|
||
value="{{ old('website', $user->website) }}"
|
||
placeholder="https://..." maxlength="200">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- Profil rengi --}}
|
||
<div class="ps-card">
|
||
<div class="ps-card-title"><i class="bi bi-palette"></i> Profil Rengi</div>
|
||
<p style="font-size:.8rem;color:rgba(255,255,255,.4);margin-bottom:16px">
|
||
Profil sayfasındaki vurgu rengini seç.
|
||
</p>
|
||
<div class="ps-color-grid">
|
||
@php
|
||
$colors = [
|
||
'#00f5ff' => 'Siyan',
|
||
'#ff2d7d' => 'Pembe',
|
||
'#a371f7' => 'Mor',
|
||
'#3fb950' => 'Yeşil',
|
||
'#f0883e' => 'Turuncu',
|
||
'#ffd700' => 'Altın',
|
||
'#58a6ff' => 'Mavi',
|
||
'#ff6b6b' => 'Kırmızı',
|
||
'#e8d44d' => 'Sarı',
|
||
'#56d364' => 'Açık Yeşil',
|
||
];
|
||
$currentColor = old('profile_color', $user->profile_color ?? '#00f5ff');
|
||
@endphp
|
||
@foreach($colors as $hex => $name)
|
||
<div class="ps-color-swatch {{ $currentColor === $hex ? 'active' : '' }}"
|
||
style="background:{{ $hex }}"
|
||
title="{{ $name }}"
|
||
onclick="setColor('{{ $hex }}', this)"></div>
|
||
@endforeach
|
||
<input type="color" class="ps-color-custom" id="customColorPicker"
|
||
value="{{ $currentColor }}"
|
||
title="Özel renk"
|
||
onchange="setColor(this.value, null)">
|
||
</div>
|
||
<div style="margin-top:12px;font-size:.78rem;color:rgba(255,255,255,.3)">
|
||
Seçili: <span id="colorLabel" style="color:var(--ps-color)">{{ $currentColor }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- Gizlilik --}}
|
||
<div class="ps-card">
|
||
<div class="ps-card-title"><i class="bi bi-shield-check"></i> Gizlilik</div>
|
||
<div class="ps-toggle">
|
||
<div>
|
||
<div class="ps-toggle-label">İzleme Listemi Göster</div>
|
||
<div class="ps-toggle-sub">Diğer kullanıcılar listenizi görebilir</div>
|
||
</div>
|
||
<label class="ps-switch">
|
||
<input type="checkbox" name="show_watchlist" value="1" {{ $user->show_watchlist ? 'checked' : '' }}>
|
||
<span class="ps-slider"></span>
|
||
</label>
|
||
</div>
|
||
<div class="ps-toggle">
|
||
<div>
|
||
<div class="ps-toggle-label">İzleme Aktivitemi Göster</div>
|
||
<div class="ps-toggle-sub">Izleme heatmap ve geçmişi herkese açık</div>
|
||
</div>
|
||
<label class="ps-switch">
|
||
<input type="checkbox" name="show_activity" value="1" {{ $user->show_activity ? 'checked' : '' }}>
|
||
<span class="ps-slider"></span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<button type="submit" class="ps-save">
|
||
<i class="bi bi-check2 me-2"></i>Değişiklikleri Kaydet
|
||
</button>
|
||
</form>
|
||
|
||
{{-- Şifre değişikliği --}}
|
||
<form method="POST" action="{{ route('profile.password') }}" style="margin-top:20px">
|
||
@csrf
|
||
<div class="ps-card">
|
||
<div class="ps-card-title"><i class="bi bi-lock"></i> Şifre Değiştir</div>
|
||
<div class="row g-3">
|
||
<div class="col-12">
|
||
<div class="ps-field">
|
||
<label class="ps-label">Mevcut Şifre</label>
|
||
<input type="password" name="current_password" class="ps-input" required autocomplete="current-password">
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="ps-field">
|
||
<label class="ps-label">Yeni Şifre</label>
|
||
<input type="password" name="password" class="ps-input" required autocomplete="new-password">
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="ps-field">
|
||
<label class="ps-label">Yeni Şifre (Tekrar)</label>
|
||
<input type="password" name="password_confirmation" class="ps-input" required autocomplete="new-password">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button type="submit" class="ps-save" style="margin-top:16px;background:rgba(255,255,255,.12);color:#fff">
|
||
<i class="bi bi-lock me-2"></i>Şifreyi Güncelle
|
||
</button>
|
||
</div>
|
||
</form>
|
||
|
||
{{-- ── Premium Kozmetik Ayarları ────────────────────────────────── --}}
|
||
@if(auth()->user()->isPremium())
|
||
<form method="POST" action="{{ route('premium.cosmetics.save') }}">
|
||
@csrf
|
||
@php $u = auth()->user(); @endphp
|
||
|
||
<div class="ps-card" style="border:1px solid rgba(0,245,255,.18);background:linear-gradient(135deg,rgba(0,245,255,.03),rgba(184,77,255,.03))">
|
||
<div class="ps-card-title" style="color:#00f5ff">
|
||
<i class="bi bi-stars"></i> Premium Kozmetik
|
||
<span style="font-size:.72rem;font-weight:400;color:rgba(0,245,255,.6);margin-left:8px">Sadece premium üyelere özel</span>
|
||
</div>
|
||
|
||
{{-- GIF Avatar --}}
|
||
@if($u->hasPerk('gif_avatar'))
|
||
<div class="ps-field" style="margin-bottom:20px">
|
||
<label class="ps-label"><i class="bi bi-image-fill" style="color:#00f5ff"></i> GIF Profil Fotoğrafı</label>
|
||
<input type="hidden" name="gif_avatar" id="gifAvatarInput" value="{{ old('gif_avatar', $u->gif_avatar) }}">
|
||
|
||
{{-- Mevcut seçim önizleme --}}
|
||
<div id="gifAvatarPreview" style="margin-bottom:10px;{{ $u->gif_avatar ? '' : 'display:none' }}">
|
||
<div style="display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:10px 14px;">
|
||
<img id="gifAvatarThumb" src="{{ $u->gif_avatar ?? '' }}" alt="GIF"
|
||
style="width:56px;height:56px;border-radius:10px;object-fit:cover;border:1px solid rgba(255,255,255,.12)">
|
||
<div style="flex:1;min-width:0">
|
||
<div style="font-size:.78rem;color:rgba(255,255,255,.7);margin-bottom:4px">Seçili GIF</div>
|
||
<div id="gifAvatarUrl" style="font-size:.65rem;color:rgba(255,255,255,.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ $u->gif_avatar ?? '' }}</div>
|
||
</div>
|
||
<button type="button" onclick="clearGifAvatar()" style="background:rgba(255,80,80,.12);border:1px solid rgba(255,80,80,.25);color:#ff5050;border-radius:8px;padding:5px 10px;font-size:.75rem;cursor:pointer;flex-shrink:0">
|
||
<i class="bi bi-x-lg"></i> Kaldır
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- Arama --}}
|
||
<div style="display:flex;gap:8px;margin-bottom:8px">
|
||
<input type="text" id="gifAvatarSearch" class="ps-input" placeholder="anime gif ara..." style="flex:1"
|
||
oninput="debounceGifSearch(this.value)">
|
||
<button type="button" onclick="debounceGifSearch(document.getElementById('gifAvatarSearch').value,true)"
|
||
style="background:rgba(0,245,255,.1);border:1px solid rgba(0,245,255,.25);color:#00f5ff;border-radius:10px;padding:0 14px;font-size:.85rem;cursor:pointer;flex-shrink:0;white-space:nowrap">
|
||
<i class="bi bi-search"></i>
|
||
</button>
|
||
</div>
|
||
|
||
{{-- Sonuç grid --}}
|
||
<div id="gifAvatarGrid" style="display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-height:280px;overflow-y:auto;scrollbar-width:thin"></div>
|
||
<div id="gifAvatarMsg" style="font-size:.72rem;color:rgba(255,255,255,.3);margin-top:6px;text-align:center"></div>
|
||
</div>
|
||
@endif
|
||
|
||
{{-- Yorum Arkaplanı --}}
|
||
@if($u->hasPerk('comment_bg'))
|
||
<div class="ps-field" style="margin-bottom:24px">
|
||
<label class="ps-label"><i class="bi bi-fire" style="color:#ff6b35"></i> Yorum Arkaplanı Efekti</label>
|
||
<div class="prem-picker" style="grid-template-columns:repeat(auto-fill,minmax(100px,1fr))">
|
||
<label class="prem-pick-item {{ !$u->comment_bg ? 'active' : '' }}">
|
||
<input type="radio" name="comment_bg" value="">
|
||
<div style="width:100%;height:36px;border-radius:7px;background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;font-size:.75rem;color:rgba(255,255,255,.3)">— Yok —</div>
|
||
<span class="prem-pick-lbl">Yok</span>
|
||
</label>
|
||
@foreach(\App\Services\PremiumFeatures::COMMENT_BACKGROUNDS as $key => $bg)
|
||
<label class="prem-pick-item {{ $u->comment_bg === $key ? 'active' : '' }}">
|
||
<input type="radio" name="comment_bg" value="{{ $key }}">
|
||
<div class="comment-wrap" data-bg="{{ $key }}" style="width:100%;min-height:36px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.75rem;overflow:hidden">
|
||
<span>{{ $bg['label'] }}</span>
|
||
</div>
|
||
<span class="prem-pick-lbl">{{ $bg['label'] }}</span>
|
||
</label>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
@endif
|
||
|
||
{{-- Kullanıcı Adı Rengi --}}
|
||
@if($u->hasPerk('username_color'))
|
||
<div class="ps-field" style="margin-bottom:24px">
|
||
<label class="ps-label"><i class="bi bi-palette-fill" style="color:#b84dff"></i> Kullanıcı Adı Rengi</label>
|
||
<div class="prem-picker" style="grid-template-columns:repeat(auto-fill,minmax(120px,1fr))">
|
||
<label class="prem-pick-item {{ !$u->username_color ? 'active' : '' }}">
|
||
<input type="radio" name="username_color" value="">
|
||
<span class="prem-pick-preview" style="color:rgba(200,200,220,.55)">{{ $u->name }}</span>
|
||
<span class="prem-pick-lbl">Varsayılan</span>
|
||
</label>
|
||
@foreach(\App\Services\PremiumFeatures::USERNAME_COLORS as $key => $color)
|
||
<label class="prem-pick-item {{ $u->username_color === $key ? 'active' : '' }}">
|
||
<input type="radio" name="username_color" value="{{ $key }}">
|
||
<span class="prem-pick-preview username-color-{{ $key }}">{{ $u->name }}</span>
|
||
<span class="prem-pick-lbl">{{ $color['label'] }}</span>
|
||
</label>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
@endif
|
||
|
||
{{-- Profil Çerçevesi --}}
|
||
@if($u->hasPerk('profile_frame'))
|
||
<div class="ps-field" style="margin-bottom:24px">
|
||
<label class="ps-label"><i class="bi bi-circle-fill" style="color:#ffd700"></i> Profil Çerçevesi</label>
|
||
<div class="prem-picker" style="grid-template-columns:repeat(auto-fill,minmax(82px,1fr))">
|
||
<label class="prem-pick-item {{ !$u->profile_frame ? 'active' : '' }}">
|
||
<input type="radio" name="profile_frame" value="">
|
||
<div style="width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;color:rgba(255,255,255,.3)">{{ mb_substr($u->name,0,1) }}</div>
|
||
<span class="prem-pick-lbl">Yok</span>
|
||
</label>
|
||
@foreach(\App\Services\PremiumFeatures::PROFILE_FRAMES as $key => $frame)
|
||
<label class="prem-pick-item {{ $u->profile_frame === $key ? 'active' : '' }}">
|
||
<input type="radio" name="profile_frame" value="{{ $key }}">
|
||
<div class="avatar-wrap" style="width:48px;height:48px">
|
||
<div class="avatar-frame frame-{{ $key }}"></div>
|
||
<div style="width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;color:rgba(255,255,255,.6);position:relative;z-index:3">{{ mb_substr($u->name,0,1) }}</div>
|
||
</div>
|
||
<span class="prem-pick-lbl">{{ $frame['label'] }}</span>
|
||
</label>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
@endif
|
||
|
||
{{-- Özel Rozet/Unvan --}}
|
||
@if($u->hasPerk('profile_badge'))
|
||
<div class="ps-field" style="margin-bottom:24px">
|
||
<label class="ps-label"><i class="bi bi-award-fill" style="color:#ffd700"></i> Özel Rozet / Unvan</label>
|
||
<input type="text" name="profile_badge" class="ps-input" value="{{ old('profile_badge', $u->profile_badge) }}"
|
||
placeholder="Anime Uzmanı" maxlength="32">
|
||
<div style="font-size:.72rem;color:rgba(255,255,255,.35);margin-top:4px">Max 32 karakter. Kullanıcı adının yanında görünür.</div>
|
||
</div>
|
||
@endif
|
||
|
||
{{-- Profil Müziği --}}
|
||
@if($u->hasPerk('profile_music'))
|
||
<div class="ps-field" style="margin-bottom:24px">
|
||
<label class="ps-label"><i class="bi bi-music-note-beamed" style="color:#00f5ff"></i> Profil Müziği URL</label>
|
||
<input type="url" name="profile_music_url" class="ps-input" value="{{ old('profile_music_url', $u->profile_music_url) }}"
|
||
placeholder="https://www.youtube.com/watch?v=... veya direkt MP3 URL">
|
||
<div style="font-size:.72rem;color:rgba(255,255,255,.35);margin-top:4px">YouTube, SoundCloud veya direkt ses dosyası URL'si. Profilini ziyaret edenlere çalar.</div>
|
||
</div>
|
||
@endif
|
||
|
||
{{-- Profil Arka Planı --}}
|
||
@if($u->hasPerk('profile_bg'))
|
||
<div class="ps-field" style="margin-bottom:24px">
|
||
<label class="ps-label"><i class="bi bi-stars" style="color:#b84dff"></i> Profil Arka Planı</label>
|
||
<div class="prem-picker" style="grid-template-columns:repeat(auto-fill,minmax(100px,1fr))">
|
||
<label class="prem-pick-item {{ !$u->profile_bg ? 'active' : '' }}">
|
||
<input type="radio" name="profile_bg" value="">
|
||
<div style="width:100%;height:36px;border-radius:7px;background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;font-size:.75rem;color:rgba(255,255,255,.3)">— Yok —</div>
|
||
<span class="prem-pick-lbl">Varsayılan</span>
|
||
</label>
|
||
@foreach(\App\Services\PremiumFeatures::PROFILE_BACKGROUNDS as $key => $bg)
|
||
@php [$c1,$c2] = explode(',', $bg['preview']); @endphp
|
||
<label class="prem-pick-item {{ $u->profile_bg === $key ? 'active' : '' }}">
|
||
<input type="radio" name="profile_bg" value="{{ $key }}">
|
||
<div style="width:100%;height:36px;border-radius:7px;background:linear-gradient(135deg,{{ $c1 }},{{ $c2 }});display:flex;align-items:center;justify-content:center;font-size:.72rem;color:rgba(255,255,255,.8);font-weight:700">{{ $bg['label'] }}</div>
|
||
<span class="prem-pick-lbl">{{ $bg['label'] }}</span>
|
||
</label>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
@endif
|
||
|
||
{{-- Yorum Aura / Parıltı --}}
|
||
@if($u->hasPerk('comment_glow'))
|
||
<div class="ps-field" style="margin-bottom:24px">
|
||
<label class="ps-label"><i class="bi bi-brightness-high-fill" style="color:#00f5ff"></i> Yorum Aura / Parıltı</label>
|
||
<div class="prem-picker" style="grid-template-columns:repeat(auto-fill,minmax(90px,1fr))">
|
||
<label class="prem-pick-item {{ !$u->comment_glow ? 'active' : '' }}">
|
||
<input type="radio" name="comment_glow" value="">
|
||
<div style="width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:.7rem;color:rgba(255,255,255,.3)">—</div>
|
||
<span class="prem-pick-lbl">Yok</span>
|
||
</label>
|
||
@foreach(\App\Services\PremiumFeatures::COMMENT_GLOWS as $key => $glow)
|
||
<label class="prem-pick-item {{ $u->comment_glow === $key ? 'active' : '' }}">
|
||
<input type="radio" name="comment_glow" value="{{ $key }}">
|
||
<div style="width:44px;height:44px;border-radius:50%;border:1.5px solid {{ $glow['color'] }};box-shadow:0 0 12px {{ $glow['color'] }},0 0 24px {{ $glow['color'] }}44;background:{{ $glow['color'] }}22"></div>
|
||
<span class="prem-pick-lbl">{{ $glow['label'] }}</span>
|
||
</label>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
@endif
|
||
|
||
{{-- Kullanıcı Adı Animasyonu --}}
|
||
@if($u->hasPerk('username_effect'))
|
||
<div class="ps-field" style="margin-bottom:24px">
|
||
<label class="ps-label"><i class="bi bi-lightning-charge-fill" style="color:#ffd700"></i> Kullanıcı Adı Animasyonu</label>
|
||
<div class="prem-picker" style="grid-template-columns:repeat(auto-fill,minmax(110px,1fr))">
|
||
<label class="prem-pick-item {{ !$u->username_effect ? 'active' : '' }}">
|
||
<input type="radio" name="username_effect" value="">
|
||
<span class="prem-pick-preview" style="color:rgba(200,200,220,.6)">{{ $u->name }}</span>
|
||
<span class="prem-pick-lbl">Yok</span>
|
||
</label>
|
||
@foreach(\App\Services\PremiumFeatures::USERNAME_EFFECTS as $key => $eff)
|
||
<label class="prem-pick-item {{ $u->username_effect === $key ? 'active' : '' }}">
|
||
<input type="radio" name="username_effect" value="{{ $key }}">
|
||
<span class="prem-pick-preview username-effect-{{ $key }}" @if($key==='glitch') data-text="{{ $u->name }}" @endif>{{ $u->name }}</span>
|
||
<span class="prem-pick-lbl">{{ $eff['label'] }}</span>
|
||
</label>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
@endif
|
||
|
||
{{-- Yorum İmzası --}}
|
||
@if($u->hasPerk('comment_signature'))
|
||
<div class="ps-field" style="margin-bottom:24px">
|
||
<label class="ps-label"><i class="bi bi-pen-fill" style="color:#ff9ec4"></i> Yorum İmzası</label>
|
||
<input type="text" name="comment_signature" class="ps-input" value="{{ old('comment_signature', $u->comment_signature) }}"
|
||
placeholder="— Anime severinden sevgiyle ✨" maxlength="100">
|
||
<div style="font-size:.72rem;color:rgba(255,255,255,.35);margin-top:4px">Max 100 karakter. Her yorumun altında küçük yazıyla görünür.</div>
|
||
</div>
|
||
@endif
|
||
|
||
{{-- Sayfa Giriş Efekti --}}
|
||
@if($u->hasPerk('entry_effect'))
|
||
<div class="ps-field" style="margin-bottom:24px">
|
||
<label class="ps-label"><i class="bi bi-play-circle-fill" style="color:#3fb950"></i> Sayfa Giriş Efekti</label>
|
||
<div class="prem-picker" style="grid-template-columns:repeat(auto-fill,minmax(100px,1fr))">
|
||
<label class="prem-pick-item {{ !$u->entry_effect ? 'active' : '' }}">
|
||
<input type="radio" name="entry_effect" value="">
|
||
<div style="font-size:1.4rem">🚫</div>
|
||
<span class="prem-pick-lbl">Yok</span>
|
||
</label>
|
||
@foreach(\App\Services\PremiumFeatures::ENTRY_EFFECTS as $key => $eff)
|
||
<label class="prem-pick-item {{ $u->entry_effect === $key ? 'active' : '' }}">
|
||
<input type="radio" name="entry_effect" value="{{ $key }}">
|
||
<div style="font-size:1.4rem">{{ ['fade'=>'✨','slide'=>'⬆️','zoom'=>'🔍','glitch'=>'⚡','wave'=>'🌊'][$key] ?? '✨' }}</div>
|
||
<span class="prem-pick-lbl">{{ $eff['label'] }}</span>
|
||
</label>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
@endif
|
||
|
||
{{-- Animasyonlu Banner --}}
|
||
@if($u->hasPerk('animated_banner'))
|
||
<div class="ps-field" style="margin-bottom:24px">
|
||
<div class="ps-toggle" style="padding:14px 16px;background:rgba(255,255,255,.04);border-radius:12px;border:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)">
|
||
<div>
|
||
<div class="ps-toggle-label" style="color:#fff"><i class="bi bi-image-alt" style="color:#00f5ff;margin-right:6px"></i> Animasyonlu Profil Bannerı</div>
|
||
<div class="ps-toggle-sub">Profil bannerın parıltılı parçacık efektiyle canlanır</div>
|
||
</div>
|
||
<label class="ps-switch">
|
||
<input type="checkbox" name="animated_banner" value="1" {{ $u->animated_banner ? 'checked' : '' }}>
|
||
<span class="ps-slider"></span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
@endif
|
||
|
||
<button type="submit" class="ps-save" style="background:linear-gradient(135deg,rgba(0,245,255,.15),rgba(184,77,255,.15));border:1px solid rgba(0,245,255,.3);color:#00f5ff">
|
||
<i class="bi bi-stars me-2"></i>Premium Ayarları Kaydet
|
||
</button>
|
||
</div>
|
||
</form>
|
||
@else
|
||
{{-- Premium değil — yükseltme banner'ı --}}
|
||
<div class="ps-card" style="border:1px solid rgba(255,215,0,.2);background:linear-gradient(135deg,rgba(255,215,0,.04),rgba(255,140,0,.04));text-align:center;padding:32px 24px">
|
||
<div style="font-size:2rem;margin-bottom:12px">✨</div>
|
||
<div style="font-weight:700;font-size:1rem;color:#ffd700;margin-bottom:6px">Premium Kozmetikler</div>
|
||
<div style="font-size:.85rem;color:rgba(255,255,255,.5);margin-bottom:16px">
|
||
Animasyonlu yorum arkaplanları, renkli kullanıcı adı, profil çerçevesi ve daha fazlası için premium üye ol.
|
||
</div>
|
||
<a href="{{ route('premium.plans') }}" class="ps-save" style="display:inline-flex;background:linear-gradient(135deg,#ff8c00,#ffd700);color:#000;font-weight:800;text-decoration:none;padding:10px 28px;border-radius:10px">
|
||
<i class="bi bi-stars me-2"></i>Premium'a Geç
|
||
</a>
|
||
</div>
|
||
@endif
|
||
|
||
</div>
|
||
@endsection
|
||
|
||
@push('scripts')
|
||
<script>
|
||
// Premium picker: radio seçilince parent label'a .active sınıfı ekle
|
||
document.querySelectorAll('.prem-picker input[type="radio"]').forEach(radio => {
|
||
radio.addEventListener('change', () => {
|
||
const picker = radio.closest('.prem-picker');
|
||
picker.querySelectorAll('.prem-pick-item').forEach(el => el.classList.remove('active'));
|
||
radio.closest('.prem-pick-item').classList.add('active');
|
||
});
|
||
});
|
||
|
||
const wrap = document.getElementById('psWrap');
|
||
|
||
function setColor(hex, el) {
|
||
wrap.style.setProperty('--ps-color', hex);
|
||
document.getElementById('profileColorInput').value = hex;
|
||
document.getElementById('colorLabel').textContent = hex;
|
||
document.getElementById('colorLabel').style.color = hex;
|
||
document.getElementById('customColorPicker').value = hex;
|
||
|
||
document.querySelectorAll('.ps-color-swatch').forEach(s => s.classList.remove('active'));
|
||
if (el) el.classList.add('active');
|
||
}
|
||
|
||
// Bio karakter sayacı
|
||
const bioTextarea = document.querySelector('[name="bio"]');
|
||
const bioCount = document.getElementById('bioCount');
|
||
if (bioTextarea) {
|
||
bioTextarea.addEventListener('input', () => {
|
||
bioCount.textContent = bioTextarea.value.length;
|
||
});
|
||
}
|
||
|
||
// Banner önizleme
|
||
document.getElementById('bannerInput').addEventListener('change', function() {
|
||
const file = this.files[0];
|
||
if (!file) return;
|
||
const reader = new FileReader();
|
||
reader.onload = e => {
|
||
const img = document.querySelector('.ps-banner-img');
|
||
if (img.tagName === 'IMG') {
|
||
img.src = e.target.result;
|
||
} else {
|
||
const newImg = document.createElement('img');
|
||
newImg.className = 'ps-banner-img';
|
||
newImg.src = e.target.result;
|
||
img.replaceWith(newImg);
|
||
}
|
||
};
|
||
reader.readAsDataURL(file);
|
||
});
|
||
|
||
// Avatar önizleme
|
||
document.getElementById('avatarInput').addEventListener('change', function() {
|
||
const file = this.files[0];
|
||
if (!file) return;
|
||
const reader = new FileReader();
|
||
reader.onload = e => {
|
||
const avatarDiv = document.querySelector('.ps-avatar');
|
||
avatarDiv.innerHTML = `<img src="${e.target.result}" alt="Avatar">`;
|
||
};
|
||
reader.readAsDataURL(file);
|
||
});
|
||
|
||
// ── GIF Avatar Picker ─────────────────────────────────────────────────────
|
||
let gifSearchTimer = null;
|
||
|
||
function debounceGifSearch(q, immediate = false) {
|
||
clearTimeout(gifSearchTimer);
|
||
if (!q.trim()) { document.getElementById('gifAvatarGrid').innerHTML = ''; return; }
|
||
const delay = immediate ? 0 : 500;
|
||
gifSearchTimer = setTimeout(() => searchGifAvatar(q.trim()), delay);
|
||
}
|
||
|
||
async function searchGifAvatar(q) {
|
||
const grid = document.getElementById('gifAvatarGrid');
|
||
const msg = document.getElementById('gifAvatarMsg');
|
||
grid.innerHTML = '<div style="grid-column:1/-1;text-align:center;padding:20px;color:rgba(255,255,255,.3);font-size:.8rem"><i class="bi bi-arrow-repeat"></i> Aranıyor...</div>';
|
||
msg.textContent = '';
|
||
try {
|
||
const res = await fetch(`/comments/gif-search?q=${encodeURIComponent(q)}`);
|
||
const data = await res.json();
|
||
const gifs = data.results ?? [];
|
||
if (!gifs.length) {
|
||
grid.innerHTML = '';
|
||
msg.textContent = 'Sonuç bulunamadı.';
|
||
return;
|
||
}
|
||
grid.innerHTML = gifs.map(g => `
|
||
<div onclick="selectGifAvatar('${g.url.replace(/'/g,"\\'")}','${g.preview.replace(/'/g,"\\'")}','${(g.url).replace(/'/g,"\\'")}' )"
|
||
style="cursor:pointer;border-radius:8px;overflow:hidden;border:2px solid transparent;transition:border-color .15s,transform .15s;aspect-ratio:1;background:#111"
|
||
onmouseover="this.style.borderColor='rgba(0,245,255,.5)';this.style.transform='scale(1.04)'"
|
||
onmouseout="this.style.borderColor='transparent';this.style.transform='scale(1)'">
|
||
<img src="${g.preview}" alt="" loading="lazy" style="width:100%;height:100%;object-fit:cover;display:block">
|
||
</div>`).join('');
|
||
} catch(e) {
|
||
grid.innerHTML = '';
|
||
msg.textContent = 'Arama başarısız oldu.';
|
||
}
|
||
}
|
||
|
||
function selectGifAvatar(url, preview) {
|
||
document.getElementById('gifAvatarInput').value = url;
|
||
document.getElementById('gifAvatarThumb').src = preview;
|
||
document.getElementById('gifAvatarUrl').textContent = url;
|
||
document.getElementById('gifAvatarPreview').style.display = '';
|
||
document.getElementById('gifAvatarGrid').innerHTML = '';
|
||
document.getElementById('gifAvatarSearch').value = '';
|
||
document.getElementById('gifAvatarMsg').textContent = '';
|
||
}
|
||
|
||
function clearGifAvatar() {
|
||
document.getElementById('gifAvatarInput').value = '';
|
||
document.getElementById('gifAvatarPreview').style.display = 'none';
|
||
}
|
||
</script>
|
||
@endpush
|