antv/thankcard-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

m

Browse Source
This commit is contained in:
antv
2026-07-16 16:01:15 +07:00
parent 939287d9b3
commit 9c20a25111
10 changed files with 123 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/user/ranking.blade.php
+31 -31
View File
@@ -4,7 +4,7 @@
@section('content')
<div class="max-w-[1280px] mx-auto w-full pb-16 px-4 lg:px-8">
{{-- 1. HERO SECTION --}}
<div class="relative overflow-hidden rounded-[32px] mb-10 shadow-[0_8px_32px_rgba(0,0,0,0.04)]" style="background: linear-gradient(135deg, #f5f7ff 0%, #e0e7ff 100%);">
<x-hero-banner>
<h2 class="text-[32px] md:text-[42px] font-extrabold text-[#1a2b49] mb-3 drop-shadow-sm">🏆 Bảng xếp hạng</h2>
@@ -13,27 +13,27 @@
<img src="{{ asset('images/illustrations/trophy.svg') }}" alt="trophy" class="absolute right-4 bottom-0 w-40 h-40 md:w-56 md:h-56 opacity-20 pointer-events-none">
</div>
{{-- 4. TAB SWITCHER --}}
<div class="flex justify-center mb-10">
<div class="inline-flex bg-[#F5F7FB] rounded-[20px] p-1.5 shadow-inner border border-gray-100">
<button id="tab-btn-received" onclick="switchRankingTab('received')" class="tab-btn bg-white shadow-[0_4px_12px_rgba(0,0,0,0.05)] text-primary px-8 py-3 rounded-[16px] font-bold text-[15px] transition-all duration-300 flex items-center gap-2">
<button id="tab-btn-received" onclick="switchRankingTab('received')" class="tab-btn bg-white shadow-[0_4px_12px_rgba(0,0,0,0.05)] text-primary px-10 py-4 rounded-[20px] font-bold text-[18px] transition-all duration-300 flex items-center gap-2">
<span class="text-xl">📥</span> TOP Nhận
</button>
<button id="tab-btn-sent" onclick="switchRankingTab('sent')" class="tab-btn text-gray-500 hover:text-gray-800 hover:bg-gray-50 px-8 py-3 rounded-[16px] font-bold text-[15px] transition-all duration-300 flex items-center gap-2">
<button id="tab-btn-sent" onclick="switchRankingTab('sent')" class="tab-btn text-gray-500 hover:text-gray-800 hover:bg-gray-50 px-10 py-4 rounded-[20px] font-bold text-[18px] transition-all duration-300 flex items-center gap-2">
<span class="text-xl">📤</span> TOP Gửi
</button>
</div>
</div>
{{-- CONTENT CONTAINER --}}
<div id="ranking-content-container">
{{-- ==================== TAB: NHẬN ==================== --}}
<div id="content-received" class="tab-content block animate-fade-in">
{{-- 2. TOP 3 PODIUM --}}
@if(!empty($receivedRankers) && count($receivedRankers) >= 3)
<div class="flex justify-center items-end gap-4 md:gap-10 mb-12 pt-8">
{{-- 2nd Place --}}
<div class="flex flex-col items-center group relative z-10">
<div class="relative w-24 h-24 md:w-28 md:h-28 mb-4 transition-transform duration-300 group-hover:-translate-y-2">
<div class="absolute inset-0 bg-gray-200 rounded-full animate-pulse opacity-20"></div>
@@ -44,10 +44,10 @@
</div>
<span class="font-bold text-[#1a2b49] text-center text-sm md:text-base">{{ $receivedRankers[1]->name ?? '---' }}</span>
<span class="text-xs md:text-sm text-gray-500 text-center">{{ $receivedRankers[1]->department ?? '' }}</span>
<span class="text-sm font-extrabold text-primary mt-1">{{ $receivedRankers[1]->score ?? 0 }} điểm</span>
<span class="text-sm font-extrabold text-primary mt-1">{{ $receivedRankers[1]->score ?? 0 }} thẻ</span>
</div>
{{-- 1st Place --}}
<div class="flex flex-col items-center group relative z-20">
<div class="absolute -top-10 text-4xl animate-bounce">👑</div>
<div class="relative w-32 h-32 md:w-40 md:h-40 mb-4 transition-transform duration-300 group-hover:-translate-y-3">
@@ -59,10 +59,10 @@
</div>
<span class="font-extrabold text-[#1a2b49] text-center text-lg md:text-xl">{{ $receivedRankers[0]->name ?? '---' }}</span>
<span class="text-sm text-gray-500 text-center">{{ $receivedRankers[0]->department ?? '' }}</span>
<span class="text-lg font-extrabold text-yellow-500 mt-1">{{ $receivedRankers[0]->score ?? 0 }} điểm</span>
<span class="text-lg font-extrabold text-yellow-500 mt-1">{{ $receivedRankers[0]->score ?? 0 }} thẻ</span>
</div>
{{-- 3rd Place --}}
<div class="flex flex-col items-center group relative z-10">
<div class="relative w-24 h-24 md:w-28 md:h-28 mb-4 transition-transform duration-300 group-hover:-translate-y-2">
<div class="absolute inset-0 bg-orange-200 rounded-full animate-pulse opacity-20"></div>
@@ -73,17 +73,17 @@
</div>
<span class="font-bold text-[#1a2b49] text-center text-sm md:text-base">{{ $receivedRankers[2]->name ?? '---' }}</span>
<span class="text-xs md:text-sm text-gray-500 text-center">{{ $receivedRankers[2]->department ?? '' }}</span>
<span class="text-sm font-extrabold text-primary mt-1">{{ $receivedRankers[2]->score ?? 0 }} điểm</span>
<span class="text-sm font-extrabold text-primary mt-1">{{ $receivedRankers[2]->score ?? 0 }} thẻ</span>
</div>
</div>
@endif
{{-- 3. THÀNH TÍCH CỦA BẠN --}}
@if($receivedCurrentUserRankItem)
<div class="max-w-xl mx-auto mb-12 bg-white rounded-[24px] p-5 shadow-[0_8px_24px_rgba(52,98,247,0.08)] border border-blue-100 flex items-center justify-between transform transition-all hover:scale-[1.02]">
<div class="flex items-center gap-4">
<div class="relative">
<img src="{{ $receivedCurrentUserRankItem->avatar ?? asset('images/avatar.png') }}" alt="You" class="w-16 h-16 rounded-full object-cover border-2 border-blue-100">
<x-avatar :user="$receivedCurrentUserRankItem" class="w-16 h-16" />
<div class="absolute -bottom-2 -right-2 bg-primary w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold border-2 border-white shadow-sm">
#{{ $receivedCurrentUserRankItem->rank }}
</div>
@@ -95,7 +95,7 @@
</div>
<div class="text-right">
<p class="text-3xl font-black text-primary">{{ $receivedCurrentUserRankItem->score }}</p>
<p class="text-xs font-medium text-gray-500 uppercase">Điểm</p>
<p class="text-xs font-medium text-gray-500 uppercase">Thẻ</p>
</div>
</div>
@endif
@@ -127,7 +127,7 @@
</div>
<div class="text-right">
<span class="text-primary font-black text-2xl">{{ $group->first()->score }}</span>
<span class="text-sm font-bold text-gray-400">điểm</span>
<span class="text-sm font-bold text-gray-400">thẻ</span>
</div>
</div>
@@ -136,7 +136,7 @@
@foreach($group as $user)
<div class="group bg-white rounded-[16px] p-4 flex items-center gap-4 transition-all duration-300 hover:-translate-y-1 hover:shadow-[0_12px_24px_rgba(0,0,0,0.06)] border border-gray-100 cursor-default relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-r from-blue-50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
<img src="{{ $user->avatar ?? asset('images/avatar.png') }}" class="w-12 h-12 rounded-full object-cover shadow-sm relative z-10">
<x-avatar :user="$user" class="w-12 h-12" />
<div class="flex-1 min-w-0 relative z-10">
<p class="font-bold text-[#1a2b49] truncate group-hover:text-primary transition-colors">{{ $user->name }}</p>
<p class="text-xs text-gray-500 truncate">{{ $user->department }}</p>
@@ -152,12 +152,12 @@
</div>
</div>
{{-- ==================== TAB: GỬI ==================== --}}
<div id="content-sent" class="tab-content hidden animate-fade-in">
{{-- 2. TOP 3 PODIUM --}}
@if(!empty($sentRankers) && count($sentRankers) >= 3)
<div class="flex justify-center items-end gap-4 md:gap-10 mb-12 pt-8">
{{-- 2nd Place --}}
<div class="flex flex-col items-center group relative z-10">
<div class="relative w-24 h-24 md:w-28 md:h-28 mb-4 transition-transform duration-300 group-hover:-translate-y-2">
<div class="absolute inset-0 bg-gray-200 rounded-full animate-pulse opacity-20"></div>
@@ -168,10 +168,10 @@
</div>
<span class="font-bold text-[#1a2b49] text-center text-sm md:text-base">{{ $sentRankers[1]->name ?? '---' }}</span>
<span class="text-xs md:text-sm text-gray-500 text-center">{{ $sentRankers[1]->department ?? '' }}</span>
<span class="text-sm font-extrabold text-primary mt-1">{{ $sentRankers[1]->score ?? 0 }} điểm</span>
<span class="text-sm font-extrabold text-primary mt-1">{{ $sentRankers[1]->score ?? 0 }} thẻ</span>
</div>
{{-- 1st Place --}}
<div class="flex flex-col items-center group relative z-20">
<div class="absolute -top-10 text-4xl animate-bounce">👑</div>
<div class="relative w-32 h-32 md:w-40 md:h-40 mb-4 transition-transform duration-300 group-hover:-translate-y-3">
@@ -183,10 +183,10 @@
</div>
<span class="font-extrabold text-[#1a2b49] text-center text-lg md:text-xl">{{ $sentRankers[0]->name ?? '---' }}</span>
<span class="text-sm text-gray-500 text-center">{{ $sentRankers[0]->department ?? '' }}</span>
<span class="text-lg font-extrabold text-yellow-500 mt-1">{{ $sentRankers[0]->score ?? 0 }} điểm</span>
<span class="text-lg font-extrabold text-yellow-500 mt-1">{{ $sentRankers[0]->score ?? 0 }} thẻ</span>
</div>
{{-- 3rd Place --}}
<div class="flex flex-col items-center group relative z-10">
<div class="relative w-24 h-24 md:w-28 md:h-28 mb-4 transition-transform duration-300 group-hover:-translate-y-2">
<div class="absolute inset-0 bg-orange-200 rounded-full animate-pulse opacity-20"></div>
@@ -197,17 +197,17 @@
</div>
<span class="font-bold text-[#1a2b49] text-center text-sm md:text-base">{{ $sentRankers[2]->name ?? '---' }}</span>
<span class="text-xs md:text-sm text-gray-500 text-center">{{ $sentRankers[2]->department ?? '' }}</span>
<span class="text-sm font-extrabold text-primary mt-1">{{ $sentRankers[2]->score ?? 0 }} điểm</span>
<span class="text-sm font-extrabold text-primary mt-1">{{ $sentRankers[2]->score ?? 0 }} thẻ</span>
</div>
</div>
@endif
{{-- 3. THÀNH TÍCH CỦA BẠN --}}
@if($sentCurrentUserRankItem)
<div class="max-w-xl mx-auto mb-12 bg-white rounded-[24px] p-5 shadow-[0_8px_24px_rgba(52,98,247,0.08)] border border-blue-100 flex items-center justify-between transform transition-all hover:scale-[1.02]">
<div class="flex items-center gap-4">
<div class="relative">
<img src="{{ $sentCurrentUserRankItem->avatar ?? asset('images/avatar.png') }}" alt="You" class="w-16 h-16 rounded-full object-cover border-2 border-blue-100">
<x-avatar :user="$sentCurrentUserRankItem" class="w-16 h-16" />
<div class="absolute -bottom-2 -right-2 bg-primary w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold border-2 border-white shadow-sm">
#{{ $sentCurrentUserRankItem->rank }}
</div>
@@ -219,7 +219,7 @@
</div>
<div class="text-right">
<p class="text-3xl font-black text-primary">{{ $sentCurrentUserRankItem->score }}</p>
<p class="text-xs font-medium text-gray-500 uppercase">Điểm</p>
<p class="text-xs font-medium text-gray-500 uppercase">Thẻ</p>
</div>
</div>
@endif
@@ -251,7 +251,7 @@
</div>
<div class="text-right">
<span class="text-primary font-black text-2xl">{{ $group->first()->score }}</span>
<span class="text-sm font-bold text-gray-400">điểm</span>
<span class="text-sm font-bold text-gray-400">thẻ</span>
</div>
</div>
@@ -260,7 +260,7 @@
@foreach($group as $user)
<div class="group bg-white rounded-[16px] p-4 flex items-center gap-4 transition-all duration-300 hover:-translate-y-1 hover:shadow-[0_12px_24px_rgba(0,0,0,0.06)] border border-gray-100 cursor-default relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-r from-purple-50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
<img src="{{ $user->avatar ?? asset('images/avatar.png') }}" class="w-12 h-12 rounded-full object-cover shadow-sm relative z-10">
<x-avatar :user="$user" class="w-12 h-12" />
<div class="flex-1 min-w-0 relative z-10">
<p class="font-bold text-[#1a2b49] truncate group-hover:text-primary transition-colors">{{ $user->name }}</p>
<p class="text-xs text-gray-500 truncate">{{ $user->department }}</p>