Initial commit: Animexe Laravel platform
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.8
@@ -0,0 +1,222 @@
|
||||
@extends('frontend.layouts.app')
|
||||
@section('title', 'Anime Mahkemesi | Animexe')
|
||||
@push('styles')
|
||||
<style>
|
||||
.trib-hero{padding-top:calc(var(--nav-h) + 40px);padding-bottom:32px;text-align:center;background:radial-gradient(ellipse at 50% 0%,rgba(255,45,125,.12) 0%,transparent 70%)}
|
||||
.trib-hero h1{font-size:2rem;font-weight:900;letter-spacing:-.02em;margin-bottom:8px}
|
||||
.trib-hero h1 span{color:#ff2d7d}
|
||||
.trib-hero p{color:rgba(255,255,255,.45);font-size:.95rem}
|
||||
.trib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;padding:0 0 40px}
|
||||
.trib-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:20px;transition:border-color .2s,transform .2s;cursor:pointer;text-decoration:none;display:block;color:#fff}
|
||||
.trib-card:hover{border-color:rgba(255,45,125,.3);transform:translateY(-2px)}
|
||||
.trib-card-anime{font-size:.72rem;color:rgba(255,45,125,.8);font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
|
||||
.trib-card-q{font-size:.98rem;font-weight:700;line-height:1.4;margin-bottom:14px}
|
||||
.trib-sides{display:flex;gap:8px;margin-bottom:14px}
|
||||
.trib-side{flex:1;padding:6px 10px;border-radius:8px;font-size:.75rem;font-weight:700;text-align:center}
|
||||
.trib-side.a{background:rgba(0,200,100,.1);color:#00c864;border:1px solid rgba(0,200,100,.2)}
|
||||
.trib-side.b{background:rgba(255,60,60,.1);color:#ff3c3c;border:1px solid rgba(255,60,60,.2)}
|
||||
.trib-side.c{background:rgba(59,130,246,.1);color:#3b82f6;border:1px solid rgba(59,130,246,.2)}
|
||||
.trib-side.d{background:rgba(245,158,11,.1);color:#f59e0b;border:1px solid rgba(245,158,11,.2)}
|
||||
.trib-side.e{background:rgba(167,139,250,.1);color:#a78bfa;border:1px solid rgba(167,139,250,.2)}
|
||||
.trib-side.f{background:rgba(236,72,153,.1);color:#ec4899;border:1px solid rgba(236,72,153,.2)}
|
||||
.trib-meta{display:flex;gap:12px;font-size:.72rem;color:rgba(255,255,255,.3)}
|
||||
.trib-status-open{color:#00c864;font-weight:700}
|
||||
.trib-status-closed{color:rgba(255,255,255,.3)}
|
||||
.trib-create-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 24px;border-radius:20px;background:rgba(255,45,125,.15);border:1px solid rgba(255,45,125,.3);color:#ff2d7d;font-weight:700;font-size:.88rem;cursor:pointer;text-decoration:none;transition:all .15s;font-family:inherit}
|
||||
.trib-create-btn:hover{background:rgba(255,45,125,.28)}
|
||||
|
||||
/* Modal */
|
||||
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:1000;display:none;align-items:center;justify-content:center;padding:16px}
|
||||
.modal-overlay.on{display:flex}
|
||||
.modal-box{background:#0e0e1a;border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:28px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto}
|
||||
.modal-title{font-size:1.15rem;font-weight:900;margin-bottom:20px}
|
||||
.mf-label{font-size:.75rem;font-weight:700;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px}
|
||||
.mf-input{width:100%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:10px 14px;color:#fff;font-size:.9rem;font-family:inherit;outline:none;margin-bottom:14px;resize:none}
|
||||
.mf-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
|
||||
.mf-btn{width:100%;padding:12px;border-radius:12px;border:none;background:rgba(255,45,125,.2);color:#ff2d7d;font-weight:700;font-size:.9rem;cursor:pointer;font-family:inherit;transition:background .15s}
|
||||
.mf-btn:hover{background:rgba(255,45,125,.35)}
|
||||
</style>
|
||||
@endpush
|
||||
@section('content')
|
||||
<div style="max-width:1200px;margin:0 auto;padding:0 20px">
|
||||
|
||||
<div class="trib-hero">
|
||||
<h1>⚖️ Anime <span>Mahkemesi</span></h1>
|
||||
<p>Tartışmalı kararlar, karakterler, sahneler — topluluk yargılıyor.</p>
|
||||
@auth
|
||||
<br>
|
||||
<button class="trib-create-btn" onclick="document.getElementById('create-modal').classList.add('on')">
|
||||
<i class="bi bi-plus-lg"></i> Dava Aç
|
||||
</button>
|
||||
@endauth
|
||||
</div>
|
||||
|
||||
<div class="trib-grid">
|
||||
@forelse($tribunals as $t)
|
||||
<a class="trib-card" href="{{ route('tribunal.show', $t) }}">
|
||||
<div class="trib-card-anime">{{ $t->anime->title }}</div>
|
||||
<div class="trib-card-q">{{ $t->question }}</div>
|
||||
<div class="trib-sides" style="grid-template-columns:repeat({{ min(count($t->allSides()), 4) }},1fr)">
|
||||
@foreach($t->allSides() as $key => $label)
|
||||
<div class="trib-side {{ $key }}">{{ Str::limit($label, 20) }}</div>
|
||||
@endforeach
|
||||
</div>
|
||||
<div class="trib-meta">
|
||||
<span class="trib-status-{{ $t->status }}">{{ $t->status === 'open' ? '🟢 Açık' : '🔴 Kapalı' }}</span>
|
||||
<span><i class="bi bi-people"></i> {{ $t->votes_count }} oy</span>
|
||||
<span>{{ $t->created_at->diffForHumans() }}</span>
|
||||
</div>
|
||||
</a>
|
||||
@empty
|
||||
<div style="grid-column:1/-1;text-align:center;padding:60px;color:rgba(255,255,255,.3)">
|
||||
<i class="bi bi-balance" style="font-size:3rem;display:block;margin-bottom:12px"></i>
|
||||
Henüz dava açılmamış.
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
{{ $tribunals->links('frontend.pagination') }}
|
||||
|
||||
</div>
|
||||
|
||||
{{-- Dava Açma Modalı --}}
|
||||
@auth
|
||||
<div class="modal-overlay" id="create-modal" onclick="if(event.target===this)this.classList.remove('on')">
|
||||
<div class="modal-box">
|
||||
<div class="modal-title">⚖️ Yeni Dava Aç</div>
|
||||
<div class="mf-label">Anime</div>
|
||||
<input class="mf-input" type="text" id="cm-anime-search" placeholder="Anime adı ara..." autocomplete="off" oninput="searchAnime(this.value)">
|
||||
<div id="cm-anime-results" style="margin-bottom:14px;display:none;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.1);border-radius:10px;overflow:hidden;max-height:160px;overflow-y:auto"></div>
|
||||
<input type="hidden" id="cm-anime-id">
|
||||
|
||||
<div class="mf-label">Soru / Karar</div>
|
||||
<textarea class="mf-input" id="cm-question" rows="2" maxlength="280" placeholder="Örn: Sasuke'nin Konoha'yı terk etmesi doğru muydu?"></textarea>
|
||||
|
||||
<div id="cm-sides-wrap">
|
||||
<div class="mf-row" style="margin-bottom:0">
|
||||
<div>
|
||||
<div class="mf-label" style="color:#00c864">Taraf A (Yeşil)</div>
|
||||
<input class="mf-input" id="cm-side-a" maxlength="100" placeholder="Örn: Haklıydı">
|
||||
</div>
|
||||
<div>
|
||||
<div class="mf-label" style="color:#ff3c3c">Taraf B (Kırmızı)</div>
|
||||
<input class="mf-input" id="cm-side-b" maxlength="100" placeholder="Örn: Haksızdı">
|
||||
</div>
|
||||
</div>
|
||||
<div id="cm-extra-sides"></div>
|
||||
</div>
|
||||
<div style="margin-bottom:14px">
|
||||
<button type="button" id="cm-add-side-btn" onclick="addExtraSide()"
|
||||
style="background:none;border:1px dashed rgba(255,255,255,.2);border-radius:8px;color:rgba(255,255,255,.4);font-size:.78rem;padding:6px 14px;cursor:pointer;font-family:inherit;transition:all .15s;width:100%"
|
||||
onmouseover="this.style.borderColor='rgba(255,255,255,.4)';this.style.color='#fff'"
|
||||
onmouseout="this.style.borderColor='rgba(255,255,255,.2)';this.style.color='rgba(255,255,255,.4)'">
|
||||
<i class="bi bi-plus-lg"></i> Seçenek Ekle (max 4 ekstra)
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mf-label">Kapanış Tarihi (isteğe bağlı)</div>
|
||||
<input class="mf-input" type="date" id="cm-closes-at" min="{{ now()->addDay()->format('Y-m-d') }}">
|
||||
|
||||
<div id="cm-error" style="color:#ff4444;font-size:.8rem;margin-bottom:10px;display:none"></div>
|
||||
<button class="mf-btn" onclick="submitTribunal()">Davayı Aç</button>
|
||||
</div>
|
||||
</div>
|
||||
@endauth
|
||||
|
||||
@endsection
|
||||
@push('scripts')
|
||||
<script>
|
||||
const CSRF = document.querySelector('meta[name="csrf-token"]')?.content ?? '';
|
||||
let animeSearchTimer = null;
|
||||
|
||||
function searchAnime(q) {
|
||||
clearTimeout(animeSearchTimer);
|
||||
if (q.length < 2) { document.getElementById('cm-anime-results').style.display = 'none'; return; }
|
||||
animeSearchTimer = setTimeout(async () => {
|
||||
const r = await fetch(`/search?q=${encodeURIComponent(q)}&json=1`);
|
||||
if (!r.ok) return;
|
||||
const d = await r.json();
|
||||
const res = document.getElementById('cm-anime-results');
|
||||
const items = (d.animes || d.results || []).slice(0, 6);
|
||||
if (!items.length) { res.style.display = 'none'; return; }
|
||||
res.style.display = 'block';
|
||||
res.innerHTML = items.map(a => `<div onclick="selectAnime(${a.id},'${a.title.replace(/'/g,"\\'")}')"
|
||||
style="padding:8px 12px;cursor:pointer;font-size:.85rem;border-bottom:1px solid rgba(255,255,255,.05);display:flex;align-items:center;gap:10px"
|
||||
onmouseover="this.style.background='rgba(255,255,255,.07)'" onmouseout="this.style.background=''">
|
||||
${a.cover ? `<img src="${a.cover}" style="width:28px;height:40px;object-fit:cover;border-radius:3px;flex-shrink:0">` : '<div style="width:28px;height:40px;background:#222;border-radius:3px;flex-shrink:0"></div>'}
|
||||
<span>${a.title}</span>
|
||||
</div>`).join('');
|
||||
}, 300);
|
||||
}
|
||||
|
||||
function selectAnime(id, title) {
|
||||
document.getElementById('cm-anime-id').value = id;
|
||||
document.getElementById('cm-anime-search').value = title;
|
||||
document.getElementById('cm-anime-results').style.display = 'none';
|
||||
}
|
||||
|
||||
const SIDE_COLORS = ['#00c864','#ff3c3c','#3b82f6','#f59e0b','#a78bfa','#ec4899'];
|
||||
const SIDE_NAMES = ['A (Yeşil)','B (Kırmızı)','C (Mavi)','D (Turuncu)','E (Mor)','F (Pembe)'];
|
||||
let extraSideCount = 0;
|
||||
|
||||
function addExtraSide() {
|
||||
if (extraSideCount >= 4) return;
|
||||
extraSideCount++;
|
||||
const idx = extraSideCount + 1; // 0=a,1=b, so extra starts at 2 (c)
|
||||
const color = SIDE_COLORS[idx] || '#ffffff';
|
||||
const name = SIDE_NAMES[idx] || ('Seçenek ' + (idx+1));
|
||||
const wrap = document.getElementById('cm-extra-sides');
|
||||
const div = document.createElement('div');
|
||||
div.id = 'cm-extra-' + extraSideCount;
|
||||
div.style.marginTop = '10px';
|
||||
div.innerHTML = `
|
||||
<div style="display:flex;align-items:center;gap:6px">
|
||||
<div style="font-size:.72rem;font-weight:700;color:${color};text-transform:uppercase;letter-spacing:.07em;white-space:nowrap">Taraf ${name}</div>
|
||||
<button type="button" onclick="removeExtraSide(${extraSideCount})"
|
||||
style="margin-left:auto;background:none;border:none;color:rgba(255,80,80,.5);cursor:pointer;font-size:.8rem;padding:0 4px">✕</button>
|
||||
</div>
|
||||
<input class="mf-input" id="cm-extra-val-${extraSideCount}" maxlength="100" placeholder="Seçenek metni..." style="margin-top:4px">`;
|
||||
wrap.appendChild(div);
|
||||
if (extraSideCount >= 4) document.getElementById('cm-add-side-btn').style.display = 'none';
|
||||
}
|
||||
|
||||
function removeExtraSide(n) {
|
||||
document.getElementById('cm-extra-' + n)?.remove();
|
||||
extraSideCount = Math.max(0, extraSideCount - 1);
|
||||
document.getElementById('cm-add-side-btn').style.display = '';
|
||||
// Renumber visible extras
|
||||
const extras = document.getElementById('cm-extra-sides').children;
|
||||
extraSideCount = extras.length;
|
||||
}
|
||||
|
||||
async function submitTribunal() {
|
||||
const err = document.getElementById('cm-error');
|
||||
err.style.display = 'none';
|
||||
const animeId = document.getElementById('cm-anime-id').value;
|
||||
const question = document.getElementById('cm-question').value.trim();
|
||||
const sideA = document.getElementById('cm-side-a').value.trim();
|
||||
const sideB = document.getElementById('cm-side-b').value.trim();
|
||||
const closesAt = document.getElementById('cm-closes-at').value;
|
||||
|
||||
// Extra sides
|
||||
const extraSides = [];
|
||||
for (let i = 1; i <= 4; i++) {
|
||||
const v = document.getElementById('cm-extra-val-' + i)?.value.trim();
|
||||
if (v) extraSides.push(v);
|
||||
}
|
||||
|
||||
if (!animeId) { err.textContent = 'Anime seçin.'; err.style.display = 'block'; return; }
|
||||
if (question.length < 10) { err.textContent = 'Soru en az 10 karakter olmalı.'; err.style.display = 'block'; return; }
|
||||
if (!sideA || !sideB) { err.textContent = 'A ve B taraflarını doldurun.'; err.style.display = 'block'; return; }
|
||||
|
||||
const r = await fetch('/mahkeme', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' },
|
||||
body: JSON.stringify({ anime_id: animeId, question, side_a: sideA, side_b: sideB, extra_sides: extraSides, closes_at: closesAt || null }),
|
||||
});
|
||||
const d = await r.json();
|
||||
if (d.url) window.location.href = d.url;
|
||||
else { err.textContent = d.error || 'Hata oluştu.'; err.style.display = 'block'; }
|
||||
}
|
||||
</script>
|
||||
@endpush
|
||||
@@ -0,0 +1,253 @@
|
||||
@extends('frontend.layouts.app')
|
||||
@section('title', 'Mahkeme: ' . Str::limit($tribunal->question, 60) . ' | Animexe')
|
||||
@php
|
||||
// Sabit renk paleti — a,b,c,d,e,f
|
||||
$palette = [
|
||||
'a' => ['bg'=>'rgba(0,200,100,.08)', 'bg2'=>'rgba(0,200,100,.22)', 'border'=>'rgba(0,200,100,.25)', 'border2'=>'#00c864', 'text'=>'#00c864', 'bar'=>'#00c864'],
|
||||
'b' => ['bg'=>'rgba(255,60,60,.08)', 'bg2'=>'rgba(255,60,60,.22)', 'border'=>'rgba(255,60,60,.25)', 'border2'=>'#ff3c3c', 'text'=>'#ff3c3c', 'bar'=>'#ff3c3c'],
|
||||
'c' => ['bg'=>'rgba(59,130,246,.08)', 'bg2'=>'rgba(59,130,246,.22)', 'border'=>'rgba(59,130,246,.25)', 'border2'=>'#3b82f6', 'text'=>'#3b82f6', 'bar'=>'#3b82f6'],
|
||||
'd' => ['bg'=>'rgba(245,158,11,.08)', 'bg2'=>'rgba(245,158,11,.22)', 'border'=>'rgba(245,158,11,.25)', 'border2'=>'#f59e0b', 'text'=>'#f59e0b', 'bar'=>'#f59e0b'],
|
||||
'e' => ['bg'=>'rgba(167,139,250,.08)','bg2'=>'rgba(167,139,250,.22)','border'=>'rgba(167,139,250,.25)','border2'=>'#a78bfa','text'=>'#a78bfa','bar'=>'#a78bfa'],
|
||||
'f' => ['bg'=>'rgba(236,72,153,.08)', 'bg2'=>'rgba(236,72,153,.22)', 'border'=>'rgba(236,72,153,.25)', 'border2'=>'#ec4899','text'=>'#ec4899','bar'=>'#ec4899'],
|
||||
];
|
||||
$cols = count($allSides) <= 2 ? '1fr 1fr' : (count($allSides) <= 3 ? '1fr 1fr 1fr' : 'repeat(auto-fit,minmax(140px,1fr))');
|
||||
@endphp
|
||||
@push('styles')
|
||||
<style>
|
||||
.tb-wrap{max-width:900px;margin:0 auto;padding:calc(var(--nav-h) + 32px) 20px 60px}
|
||||
.tb-anime-link{font-size:.75rem;color:rgba(255,45,125,.8);font-weight:700;text-transform:uppercase;letter-spacing:.08em;text-decoration:none;display:inline-block;margin-bottom:12px}
|
||||
.tb-question{font-size:1.5rem;font-weight:900;line-height:1.35;margin-bottom:14px}
|
||||
.tb-status{display:inline-block;padding:3px 12px;border-radius:20px;font-size:.72rem;font-weight:700;margin-bottom:20px}
|
||||
.tb-status.open{background:rgba(0,200,100,.15);color:#00c864;border:1px solid rgba(0,200,100,.25)}
|
||||
.tb-status.closed{background:rgba(255,255,255,.06);color:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.1)}
|
||||
|
||||
/* Vote Card */
|
||||
.tb-votebar{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:24px;margin-bottom:24px}
|
||||
.tb-sides{display:grid;gap:10px;margin-bottom:20px;grid-template-columns:{{ $cols }}}
|
||||
.tb-vote-btn{padding:13px 10px;border-radius:12px;border:2px solid transparent;cursor:pointer;font-weight:800;font-size:.88rem;font-family:inherit;transition:all .2s;text-align:center;line-height:1.3}
|
||||
|
||||
/* Multi-bar */
|
||||
.tb-multibar{display:flex;flex-direction:column;gap:8px}
|
||||
.tb-bar-row{display:flex;align-items:center;gap:10px}
|
||||
.tb-bar-label{font-size:.72rem;font-weight:700;white-space:nowrap;min-width:80px;max-width:120px;overflow:hidden;text-overflow:ellipsis}
|
||||
.tb-bar-track{flex:1;height:8px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
|
||||
.tb-bar-fill{height:100%;border-radius:99px;transition:width .5s cubic-bezier(.22,1,.36,1)}
|
||||
.tb-bar-pct{font-size:.72rem;color:rgba(255,255,255,.4);min-width:40px;text-align:right}
|
||||
|
||||
/* Arguments */
|
||||
.tb-args{margin-top:28px}
|
||||
.tb-args-title{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.3);margin-bottom:16px}
|
||||
.tb-arg-card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:16px;margin-bottom:10px}
|
||||
.tb-arg-side-badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:.68rem;font-weight:800;margin-bottom:8px}
|
||||
.tb-arg-body{font-size:.9rem;line-height:1.5;margin-bottom:10px}
|
||||
.tb-arg-meta{display:flex;align-items:center;gap:12px;font-size:.72rem;color:rgba(255,255,255,.3)}
|
||||
.tb-arg-vote-btn{background:none;border:1px solid rgba(255,255,255,.1);border-radius:20px;padding:3px 12px;color:rgba(255,255,255,.4);cursor:pointer;font-size:.72rem;font-family:inherit;display:inline-flex;align-items:center;gap:5px;transition:all .15s}
|
||||
.tb-arg-vote-btn:hover,.tb-arg-vote-btn.on{background:rgba(255,215,0,.12);border-color:rgba(255,215,0,.3);color:#ffd700}
|
||||
|
||||
/* Argue form */
|
||||
.tb-argue-form{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:20px;margin-top:24px}
|
||||
.tb-argue-title{font-size:.88rem;font-weight:700;margin-bottom:12px}
|
||||
.tb-argue-sides{display:grid;gap:8px;margin-bottom:12px;grid-template-columns:{{ $cols }}}
|
||||
.tb-argue-side-btn{padding:9px 8px;border-radius:10px;cursor:pointer;font-weight:700;font-size:.8rem;font-family:inherit;border:2px solid transparent;transition:all .15s;text-align:center}
|
||||
textarea.tb-inp{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:.88rem;font-family:inherit;resize:none;outline:none;margin-bottom:10px;box-sizing:border-box}
|
||||
.tb-submit-btn{padding:10px 24px;border-radius:10px;border:none;background:rgba(255,45,125,.2);color:#ff2d7d;font-weight:700;font-size:.88rem;cursor:pointer;font-family:inherit;transition:background .15s}
|
||||
.tb-submit-btn:hover{background:rgba(255,45,125,.35)}
|
||||
</style>
|
||||
@endpush
|
||||
@section('content')
|
||||
<div class="tb-wrap">
|
||||
|
||||
<a class="tb-anime-link" href="{{ $tribunal->anime?->detailUrl ?? '#' }}">
|
||||
<i class="bi bi-arrow-left"></i> {{ $tribunal->anime->title }}
|
||||
</a>
|
||||
|
||||
<div class="tb-status {{ $tribunal->status }}">
|
||||
{{ $tribunal->status === 'open' ? '🟢 Dava Açık' : '🔴 Dava Kapalı' }}
|
||||
@if($tribunal->closes_at && $tribunal->status === 'open')
|
||||
· {{ $tribunal->closes_at->diffForHumans() }} kapanıyor
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="tb-question">{{ $tribunal->question }}</div>
|
||||
|
||||
{{-- Oy sistemi --}}
|
||||
<div class="tb-votebar">
|
||||
<div class="tb-sides">
|
||||
@foreach($allSides as $key => $label)
|
||||
@php $c = $palette[$key] ?? $palette['a']; @endphp
|
||||
<button id="vote-{{ $key }}" class="tb-vote-btn"
|
||||
style="background:{{ $c['bg'] }};color:{{ $c['text'] }};border-color:{{ $c['border'] }}"
|
||||
data-bg="{{ $c['bg'] }}" data-bg2="{{ $c['bg2'] }}" data-border="{{ $c['border'] }}" data-border2="{{ $c['border2'] }}"
|
||||
onclick="castVote('{{ $key }}')">
|
||||
{{ $label }}
|
||||
<div style="font-size:.7rem;font-weight:400;opacity:.7;margin-top:3px">
|
||||
<span id="vcnt-{{ $key }}">{{ $voteCounts[$key] ?? 0 }}</span> oy
|
||||
· <span id="vpct-{{ $key }}">{{ $total > 0 ? round(($voteCounts[$key]??0)/$total*100) : 0 }}%</span>
|
||||
</div>
|
||||
</button>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
{{-- Çok taraflı bar --}}
|
||||
<div class="tb-multibar">
|
||||
@foreach($allSides as $key => $label)
|
||||
@php $c = $palette[$key] ?? $palette['a']; $pct = $total > 0 ? round(($voteCounts[$key]??0)/$total*100) : 0; @endphp
|
||||
<div class="tb-bar-row">
|
||||
<div class="tb-bar-label" style="color:{{ $c['text'] }}">{{ $label }}</div>
|
||||
<div class="tb-bar-track">
|
||||
<div class="tb-bar-fill" id="bar-{{ $key }}" style="width:{{ $pct }}%;background:{{ $c['bar'] }}"></div>
|
||||
</div>
|
||||
<div class="tb-bar-pct" id="bpct-{{ $key }}">{{ $pct }}%</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div style="margin-top:10px;font-size:.72rem;color:rgba(255,255,255,.25)">
|
||||
Toplam <span id="total-votes">{{ $total }}</span> oy
|
||||
@auth @if($myVote) · <span style="color:rgba(255,255,255,.5)">Oyunuz: <strong>{{ $allSides[$myVote] ?? $myVote }}</strong></span> @endif @endauth
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Argümanlar --}}
|
||||
<div class="tb-args">
|
||||
<div class="tb-args-title"><i class="bi bi-chat-quote"></i> Argümanlar</div>
|
||||
<div id="arg-list">
|
||||
@forelse($arguments as $arg)
|
||||
@php $c2 = $palette[$arg['side']] ?? $palette['a']; @endphp
|
||||
<div class="tb-arg-card" id="arg-{{ $arg['id'] }}">
|
||||
<span class="tb-arg-side-badge"
|
||||
style="background:{{ $c2['bg'] }};color:{{ $c2['text'] }}">{{ $allSides[$arg['side']] ?? $arg['side'] }}</span>
|
||||
<div class="tb-arg-body">{{ $arg['body'] }}</div>
|
||||
<div class="tb-arg-meta">
|
||||
<span>{{ $arg['name'] ?? $arg['username'] }}</span>
|
||||
<span>{{ $arg['created_at'] }}</span>
|
||||
<button class="tb-arg-vote-btn {{ $arg['voted'] ? 'on' : '' }}" id="avgbtn-{{ $arg['id'] }}"
|
||||
onclick="argVote({{ $arg['id'] }})">
|
||||
<i class="bi bi-hand-thumbs-up"></i>
|
||||
<span id="avgcnt-{{ $arg['id'] }}">{{ $arg['vote_count'] }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div id="no-args" style="text-align:center;padding:30px;color:rgba(255,255,255,.25);font-size:.85rem">
|
||||
Henüz argüman girilmemiş. İlk sen gir!
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Argüman formu --}}
|
||||
@auth
|
||||
@if(!$myArgument && $tribunal->status === 'open')
|
||||
<div class="tb-argue-form">
|
||||
<div class="tb-argue-title">⚔️ Senin Argümanın — Hangi taraftasın?</div>
|
||||
<div class="tb-argue-sides">
|
||||
@foreach($allSides as $key => $label)
|
||||
@php $c3 = $palette[$key] ?? $palette['a']; @endphp
|
||||
<button id="arg-side-{{ $key }}" class="tb-argue-side-btn"
|
||||
style="background:{{ $c3['bg'] }};color:{{ $c3['text'] }};border-color:{{ $c3['border'] }}"
|
||||
data-bg="{{ $c3['bg'] }}" data-bg2="{{ $c3['bg2'] }}" data-border="{{ $c3['border'] }}" data-border2="{{ $c3['border2'] }}"
|
||||
onclick="selectArgSide('{{ $key }}')">{{ $label }}</button>
|
||||
@endforeach
|
||||
</div>
|
||||
<textarea class="tb-inp" id="arg-body" rows="3" maxlength="500" placeholder="Argümanını yaz (min 10, max 500 karakter)..."></textarea>
|
||||
<div id="arg-err" style="color:#ff4444;font-size:.78rem;margin-bottom:8px;display:none"></div>
|
||||
<button class="tb-submit-btn" onclick="submitArg()">Argümanı Gönder</button>
|
||||
</div>
|
||||
@elseif($myArgument)
|
||||
<div style="padding:14px;background:rgba(0,200,100,.06);border:1px solid rgba(0,200,100,.2);border-radius:12px;font-size:.85rem;color:rgba(255,255,255,.5);margin-top:24px">
|
||||
✅ Argümanınızı gönderdiniz.
|
||||
</div>
|
||||
@endif
|
||||
@else
|
||||
<div style="margin-top:20px;text-align:center;font-size:.85rem;color:rgba(255,255,255,.3)">
|
||||
<a href="{{ route('frontend.login') }}" style="color:#ff2d7d">Giriş yap</a> — argüman girmek için
|
||||
</div>
|
||||
@endauth
|
||||
|
||||
</div>
|
||||
@endsection
|
||||
@push('scripts')
|
||||
<script>
|
||||
const CSRF = document.querySelector('meta[name="csrf-token"]')?.content ?? '';
|
||||
const IS_AUTH = {{ auth()->check() ? 'true' : 'false' }};
|
||||
const MY_VOTE = {{ $myVote ? json_encode($myVote) : 'null' }};
|
||||
let selectedArgSide = null;
|
||||
|
||||
// İlk yüklemede aktif oyu vurgula
|
||||
if (MY_VOTE) activateVoteBtn(MY_VOTE);
|
||||
|
||||
function activateVoteBtn(side) {
|
||||
document.querySelectorAll('.tb-vote-btn').forEach(b => {
|
||||
const isMe = b.id === 'vote-' + side;
|
||||
b.style.background = isMe ? b.dataset.bg2 : b.dataset.bg;
|
||||
b.style.borderColor = isMe ? b.dataset.border2 : b.dataset.border;
|
||||
});
|
||||
}
|
||||
|
||||
function selectArgSide(s) {
|
||||
selectedArgSide = s;
|
||||
document.querySelectorAll('.tb-argue-side-btn').forEach(b => {
|
||||
const isMe = b.id === 'arg-side-' + s;
|
||||
b.style.background = isMe ? b.dataset.bg2 : b.dataset.bg;
|
||||
b.style.borderColor = isMe ? b.dataset.border2 : b.dataset.border;
|
||||
});
|
||||
}
|
||||
|
||||
async function castVote(side) {
|
||||
if (!IS_AUTH) { window.location.href = '{{ route('frontend.login') }}'; return; }
|
||||
const r = await fetch('{{ route('tribunal.vote', $tribunal) }}', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' },
|
||||
body: JSON.stringify({ side }),
|
||||
});
|
||||
const d = await r.json();
|
||||
updateVoteBar(d.voted, d.counts, d.total);
|
||||
}
|
||||
|
||||
function updateVoteBar(voted, counts, total) {
|
||||
activateVoteBtn(voted);
|
||||
document.getElementById('total-votes').textContent = total;
|
||||
for (const [key, cnt] of Object.entries(counts)) {
|
||||
const pct = total > 0 ? Math.round(cnt / total * 100) : 0;
|
||||
const fill = document.getElementById('bar-' + key);
|
||||
const pctEl = document.getElementById('bpct-' + key);
|
||||
const vcnt = document.getElementById('vcnt-' + key);
|
||||
const vpct = document.getElementById('vpct-' + key);
|
||||
if (fill) fill.style.width = pct + '%';
|
||||
if (pctEl) pctEl.textContent = pct + '%';
|
||||
if (vcnt) vcnt.textContent = cnt;
|
||||
if (vpct) vpct.textContent = pct + '%';
|
||||
}
|
||||
}
|
||||
|
||||
async function argVote(id) {
|
||||
if (!IS_AUTH) { window.location.href = '{{ route('frontend.login') }}'; return; }
|
||||
const r = await fetch(`/arguman/${id}/oy`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' },
|
||||
body: JSON.stringify({}),
|
||||
});
|
||||
const d = await r.json();
|
||||
document.getElementById('avgcnt-' + id).textContent = d.vote_count;
|
||||
document.getElementById('avgbtn-' + id).classList.toggle('on', d.voted);
|
||||
}
|
||||
|
||||
async function submitArg() {
|
||||
const err = document.getElementById('arg-err');
|
||||
const body = document.getElementById('arg-body').value.trim();
|
||||
err.style.display = 'none';
|
||||
if (!selectedArgSide) { err.textContent = 'Taraf seçin.'; err.style.display = 'block'; return; }
|
||||
if (body.length < 10) { err.textContent = 'Argüman en az 10 karakter olmalı.'; err.style.display = 'block'; return; }
|
||||
|
||||
const r = await fetch('{{ route('tribunal.argue', $tribunal) }}', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': CSRF, 'Accept': 'application/json' },
|
||||
body: JSON.stringify({ side: selectedArgSide, body }),
|
||||
});
|
||||
const d = await r.json();
|
||||
if (d.ok) window.location.reload();
|
||||
else { err.textContent = d.error || 'Hata.'; err.style.display = 'block'; }
|
||||
}
|
||||
</script>
|
||||
@endpush
|
||||
Reference in New Issue
Block a user