leader board + setting

2026-04-12 22:59:46 +07:00
parent 857341132c
commit 8de8b88a3d
32 changed files with 2302 additions and 15 deletions
--- a/stitch-exports/dashboard/design.html
+++ b/stitch-exports/dashboard/design.html
@@ -0,0 +1,419 @@
+<!DOCTYPE html>
+
+<html lang="vi"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>TOEIC Master - Achievement Hub</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                extend: {
+                    "colors": {
+                        "surface-container": "#eceef0",
+                        "background": "#f7f9fb",
+                        "on-surface": "#191c1e",
+                        "secondary-fixed": "#7ffc97",
+                        "surface-tint": "#0053db",
+                        "on-primary-fixed": "#00174b",
+                        "primary-fixed": "#dbe1ff",
+                        "tertiary": "#784b00",
+                        "tertiary-fixed": "#ffddb8",
+                        "on-primary-fixed-variant": "#003ea8",
+                        "secondary-container": "#7cf994",
+                        "surface-container-highest": "#e0e3e5",
+                        "surface-container-lowest": "#ffffff",
+                        "on-error-container": "#93000a",
+                        "on-secondary-container": "#007230",
+                        "inverse-surface": "#2d3133",
+                        "on-secondary": "#ffffff",
+                        "on-error": "#ffffff",
+                        "on-background": "#191c1e",
+                        "on-primary-container": "#eeefff",
+                        "primary": "#004ac6",
+                        "error-container": "#ffdad6",
+                        "surface-container-high": "#e6e8ea",
+                        "tertiary-container": "#996100",
+                        "on-tertiary": "#ffffff",
+                        "on-surface-variant": "#434655",
+                        "tertiary-fixed-dim": "#ffb95f",
+                        "primary-fixed-dim": "#b4c5ff",
+                        "surface-variant": "#e0e3e5",
+                        "on-secondary-fixed": "#002109",
+                        "on-primary": "#ffffff",
+                        "surface-container-low": "#f2f4f6",
+                        "inverse-on-surface": "#eff1f3",
+                        "secondary": "#006e2d",
+                        "on-tertiary-fixed": "#2a1700",
+                        "outline-variant": "#c3c6d7",
+                        "error": "#ba1a1a",
+                        "secondary-fixed-dim": "#62df7d",
+                        "surface": "#f7f9fb",
+                        "on-tertiary-fixed-variant": "#653e00",
+                        "outline": "#737686",
+                        "surface-dim": "#d8dadc",
+                        "on-tertiary-container": "#ffeedd",
+                        "primary-container": "#2563eb",
+                        "on-secondary-fixed-variant": "#005320",
+                        "inverse-primary": "#b4c5ff",
+                        "surface-bright": "#f7f9fb"
+                    },
+                    "borderRadius": {
+                        "DEFAULT": "0.25rem",
+                        "lg": "0.5rem",
+                        "xl": "0.75rem",
+                        "full": "9999px"
+                    },
+                    "fontFamily": {
+                        "headline": ["Plus Jakarta Sans"],
+                        "body": ["Plus Jakarta Sans"],
+                        "label": ["Plus Jakarta Sans"]
+                    }
+                },
+            },
+        }
+    </script>
+<style>
+        body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #f7f9fb; color: #191c1e; }
+        .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
+        .achievement-shadow { box-shadow: 0 12px 32px rgba(0, 74, 198, 0.06); }
+        .glass-streak { background: rgba(255, 221, 184, 0.4); backdrop-filter: blur(8px); }
+        .no-scrollbar::-webkit-scrollbar { display: none; }
+    </style>
+</head>
+<body class="antialiased">
+<!-- SideNavBar (Execution from JSON) -->
+<nav class="fixed left-0 top-0 h-full p-6 flex flex-col h-screen w-64 border-r-0 bg-slate-50 dark:bg-slate-900 z-50">
+<div class="text-xl font-bold text-blue-600 dark:text-blue-400 mb-8">TOEIC Master</div>
+<div class="flex items-center gap-3 mb-8 p-3 bg-slate-100 dark:bg-slate-800 rounded-xl">
+<img alt="Student Profile Picture" class="w-10 h-10 rounded-full object-cover" data-alt="Close-up portrait of a smiling young man in a professional setting with soft studio lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBi8VjVfuHDcoJwcD6GgNyZPsVmGg0H2GZFuNy-cQMzCBmk4-Hf6GjrULENRUCVom73DjyCDJNjMIWzu1OKexmQbh294_VG3PTir4_qOTDvHskTGf0q46xgWJhF73M3lrUBdmz4jNyFidkkCg5BL3D0JRxq68NF2qaK3UYGcW4S3rznkE04vQre6ofw2dRLEVvdCxcAH9GVUzS9oVSUQ96zwprfK6594JP0zsAABWKBQXB9McF1J3_s9KHJyVsnurq2_DVTMlrAM_L1"/>
+<div>
+<p class="font-['Plus_Jakarta_Sans'] font-medium text-sm tracking-tight text-on-surface">Achievement Hub</p>
+<p class="text-xs text-slate-500">Level 14 Explorer</p>
+</div>
+</div>
+<div class="flex flex-col gap-2 flex-grow">
+<!-- Home (Active) -->
+<a class="flex items-center gap-3 px-4 py-3 text-blue-700 dark:text-blue-300 font-bold bg-blue-50 dark:bg-blue-900/30 rounded-lg scale-95 duration-150 active:opacity-80 transition-colors" href="#">
+<span class="material-symbols-outlined" data-icon="home">home</span>
+<span class="font-['Plus_Jakarta_Sans'] font-medium text-sm tracking-tight">Home</span>
+</a>
+<!-- Practice -->
+<a class="flex items-center gap-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors scale-95 duration-150 active:opacity-80" href="#">
+<span class="material-symbols-outlined" data-icon="exercise">exercise</span>
+<span class="font-['Plus_Jakarta_Sans'] font-medium text-sm tracking-tight">Practice</span>
+</a>
+<!-- Leaderboard -->
+<a class="flex items-center gap-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors scale-95 duration-150 active:opacity-80" href="#">
+<span class="material-symbols-outlined" data-icon="leaderboard">leaderboard</span>
+<span class="font-['Plus_Jakarta_Sans'] font-medium text-sm tracking-tight">Leaderboard</span>
+</a>
+<!-- Shop -->
+<a class="flex items-center gap-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors scale-95 duration-150 active:opacity-80" href="#">
+<span class="material-symbols-outlined" data-icon="shopping_cart">shopping_cart</span>
+<span class="font-['Plus_Jakarta_Sans'] font-medium text-sm tracking-tight">Shop</span>
+</a>
+<!-- Settings -->
+<a class="flex items-center gap-3 px-4 py-3 text-slate-500 dark:text-slate-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 transition-colors scale-95 duration-150 active:opacity-80" href="#">
+<span class="material-symbols-outlined" data-icon="settings">settings</span>
+<span class="font-['Plus_Jakarta_Sans'] font-medium text-sm tracking-tight">Settings</span>
+</a>
+</div>
+<button class="mt-auto w-full py-3 bg-primary text-on-primary rounded-xl font-semibold text-sm transition-transform duration-200 active:scale-95 shadow-lg shadow-primary/20">
+            Upgrade to Pro
+        </button>
+</nav>
+<!-- TopAppBar (Execution from JSON) -->
+<header class="fixed top-0 right-0 h-16 flex items-center justify-between px-8 py-4 ml-64 w-[calc(100%-16rem)] bg-transparent z-40">
+<div class="flex items-center gap-2 text-slate-500 font-['Plus_Jakarta_Sans'] font-semibold text-base">
+<span>Trang chủ</span>
+<span class="material-symbols-outlined text-sm">chevron_right</span>
+<span class="text-on-surface">Bảng điều khiển</span>
+</div>
+<div class="flex items-center gap-6">
+<div class="flex items-center gap-4">
+<button class="hover:bg-slate-100 dark:hover:bg-slate-800 rounded-full p-2 transition-transform duration-200 active:scale-90 text-slate-600">
+<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
+</button>
+<div class="flex items-center gap-1 px-3 py-1 bg-tertiary-container/10 rounded-full border border-tertiary-container/20">
+<span class="material-symbols-outlined text-tertiary font-variation-settings: 'FILL' 1;" data-icon="local_fire_department" style="font-variation-settings: 'FILL' 1;">local_fire_department</span>
+<span class="text-sm font-bold text-tertiary">14 Days</span>
+</div>
+<div class="flex items-center gap-1 px-3 py-1 bg-secondary-container/10 rounded-full border border-secondary-container/20">
+<span class="material-symbols-outlined text-secondary" data-icon="monetization_on" style="font-variation-settings: 'FILL' 1;">monetization_on</span>
+<span class="text-sm font-bold text-secondary">2,450 Xu</span>
+</div>
+</div>
+<div class="w-8 h-8 rounded-full bg-surface-container overflow-hidden">
+<img alt="User Avatar" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCXJgxIEysUKtL0g8IDfmqULe-aiYg1DAmaCwbXsw_bu3UclhqlR8RhcnEsKTzs-_poHPQTsIFCcQZZiCxS7NkzMI7KUqRddmPF_MMXuDphyztHqi5QwrrvhdTDSUo49fSB06qpyLU07s4pR5aMp_AJqeqV0Nr4WraPTluc9FvXO7tvPPJQIsr6XtzGX7Gm82iOhZSX6TqYcX_P6liiQXdbEMAJdQ99PSS0s40KtQ2Ok8rh5l_2jMlWlqxiZuIBRbJlIqXTMSjrxsxG"/>
+</div>
+</div>
+</header>
+<!-- Main Content Canvas -->
+<main class="ml-64 pt-20 p-8 min-h-screen">
+<!-- Hero Stats Row (Bento Style) -->
+<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+<!-- Xu Balance -->
+<div class="relative overflow-hidden bg-surface-container-lowest p-6 rounded-xl achievement-shadow group">
+<div class="absolute -right-4 -top-4 w-24 h-24 bg-tertiary-fixed rounded-full opacity-20 blur-2xl group-hover:opacity-40 transition-opacity"></div>
+<div class="flex flex-col">
+<span class="label-sm uppercase tracking-widest text-outline font-bold mb-1">Số dư Xu</span>
+<div class="flex items-center gap-3">
+<span class="text-4xl font-extrabold text-on-surface">2,450</span>
+<span class="material-symbols-outlined text-4xl text-tertiary-fixed-dim" style="font-variation-settings: 'FILL' 1;">monetization_on</span>
+</div>
+<p class="text-sm text-outline-variant mt-2 font-medium">Tương đương 245.000 VNĐ</p>
+</div>
+</div>
+<!-- Streak Card -->
+<div class="relative overflow-hidden bg-primary p-6 rounded-xl achievement-shadow">
+<div class="absolute inset-0 bg-gradient-to-br from-primary-container to-primary opacity-90"></div>
+<div class="relative z-10 flex flex-col text-on-primary">
+<span class="label-sm uppercase tracking-widest opacity-80 font-bold mb-1">Chuỗi học tập</span>
+<div class="flex items-center gap-3">
+<span class="text-4xl font-extrabold">14 Ngày</span>
+<span class="material-symbols-outlined text-4xl text-tertiary-fixed" style="font-variation-settings: 'FILL' 1;">local_fire_department</span>
+</div>
+<p class="text-sm opacity-90 mt-2 font-medium">Bạn thuộc top 5% người học chăm chỉ!</p>
+</div>
+</div>
+<!-- XP / Level Card -->
+<div class="bg-surface-container-lowest p-6 rounded-xl achievement-shadow flex items-center justify-between">
+<div>
+<span class="label-sm uppercase tracking-widest text-outline font-bold mb-1">Cấp độ hiện tại</span>
+<div class="flex items-center gap-2">
+<span class="text-4xl font-extrabold text-on-surface">Level 14</span>
+</div>
+<span class="inline-block mt-2 px-3 py-1 bg-tertiary-container/10 text-tertiary text-xs font-bold rounded-full border border-tertiary-container/20">Hạng Đồng (Bronze)</span>
+</div>
+<div class="w-16 h-16 bg-surface-container flex items-center justify-center rounded-2xl rotate-12">
+<span class="material-symbols-outlined text-primary text-3xl font-bold">military_tech</span>
+</div>
+</div>
+</div>
+<!-- Progress Section (Asymmetric Grid) -->
+<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 mb-8">
+<!-- Circular XP Progress -->
+<div class="lg:col-span-5 bg-surface-container-lowest p-8 rounded-xl achievement-shadow flex flex-col items-center justify-center text-center">
+<h3 class="text-lg font-bold mb-6 self-start">Tiến độ Cấp độ</h3>
+<div class="relative w-48 h-48 mb-6">
+<!-- Background Circle -->
+<svg class="w-full h-full transform -rotate-90">
+<circle class="text-surface-container" cx="96" cy="96" fill="transparent" r="88" stroke="currentColor" stroke-width="12"></circle>
+<circle class="text-primary rounded-full" cx="96" cy="96" fill="transparent" r="88" stroke="currentColor" stroke-dasharray="552" stroke-dashoffset="138" stroke-width="12"></circle>
+</svg>
+<div class="absolute inset-0 flex flex-col items-center justify-center">
+<span class="text-3xl font-extrabold">75%</span>
+<span class="text-xs text-outline font-bold">1,200 / 1,600 XP</span>
+</div>
+</div>
+<p class="text-sm text-on-surface-variant font-medium">Chỉ còn 400 XP nữa để đạt Level 15!</p>
+<button class="mt-6 w-full py-3 bg-surface-container-high hover:bg-surface-container-highest transition-colors rounded-xl font-bold text-sm text-primary">
+                    Xem nhiệm vụ XP
+                </button>
+</div>
+<!-- Weekly Goal & Heatmap -->
+<div class="lg:col-span-7 space-y-6">
+<!-- Weekly Goal -->
+<div class="bg-surface-container-lowest p-6 rounded-xl achievement-shadow">
+<div class="flex justify-between items-end mb-4">
+<div>
+<h3 class="text-lg font-bold">Mục tiêu tuần</h3>
+<p class="text-sm text-outline">Hoàn thành 5 bài học mỗi tuần</p>
+</div>
+<span class="text-2xl font-black text-secondary">3/5</span>
+</div>
+<div class="w-full h-3 bg-surface-container rounded-full overflow-hidden">
+<div class="h-full bg-secondary-container rounded-full" style="width: 60%"></div>
+</div>
+</div>
+<!-- Streak Heatmap -->
+<div class="bg-surface-container-lowest p-6 rounded-xl achievement-shadow">
+<h3 class="text-lg font-bold mb-4">Lịch sử rèn luyện</h3>
+<div class="flex justify-between items-center px-2">
+<!-- Day Columns -->
+<div class="flex flex-col items-center gap-3">
+<span class="text-[10px] font-bold text-outline uppercase">Th 2</span>
+<div class="w-10 h-10 rounded-lg bg-secondary-fixed flex items-center justify-center">
+<span class="material-symbols-outlined text-on-secondary-fixed text-sm">check</span>
+</div>
+</div>
+<div class="flex flex-col items-center gap-3">
+<span class="text-[10px] font-bold text-outline uppercase">Th 3</span>
+<div class="w-10 h-10 rounded-lg bg-secondary-fixed flex items-center justify-center">
+<span class="material-symbols-outlined text-on-secondary-fixed text-sm">check</span>
+</div>
+</div>
+<div class="flex flex-col items-center gap-3">
+<span class="text-[10px] font-bold text-outline uppercase">Th 4</span>
+<div class="w-10 h-10 rounded-lg bg-secondary-fixed flex items-center justify-center">
+<span class="material-symbols-outlined text-on-secondary-fixed text-sm">check</span>
+</div>
+</div>
+<div class="flex flex-col items-center gap-3">
+<span class="text-[10px] font-bold text-outline uppercase">Th 5</span>
+<div class="w-10 h-10 rounded-lg bg-secondary-fixed flex items-center justify-center">
+<span class="material-symbols-outlined text-on-secondary-fixed text-sm">check</span>
+</div>
+</div>
+<div class="flex flex-col items-center gap-3">
+<span class="text-[10px] font-bold text-primary uppercase">H.Nay</span>
+<div class="w-10 h-10 rounded-lg border-2 border-primary border-dashed flex items-center justify-center">
+<span class="material-symbols-outlined text-primary text-sm">play_arrow</span>
+</div>
+</div>
+<div class="flex flex-col items-center gap-3 opacity-30">
+<span class="text-[10px] font-bold text-outline uppercase">Th 7</span>
+<div class="w-10 h-10 rounded-lg bg-surface-container flex items-center justify-center"></div>
+</div>
+<div class="flex flex-col items-center gap-3 opacity-30">
+<span class="text-[10px] font-bold text-outline uppercase">CN</span>
+<div class="w-10 h-10 rounded-lg bg-surface-container flex items-center justify-center"></div>
+</div>
+</div>
+</div>
+</div>
+</div>
+<!-- Xu Economy & Leaderboard Row -->
+<div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
+<!-- Xu Economy Card -->
+<div class="lg:col-span-4 bg-surface-container-lowest p-6 rounded-xl achievement-shadow overflow-hidden relative">
+<div class="relative z-10">
+<h3 class="text-lg font-bold mb-6">Cửa hàng Xu</h3>
+<div class="space-y-6">
+<div>
+<span class="label-sm text-secondary font-bold uppercase tracking-wider block mb-3">Kiếm Xu</span>
+<div class="space-y-3">
+<div class="flex items-center justify-between p-3 bg-surface-container-low rounded-lg">
+<span class="text-sm font-medium">Mục tiêu ngày</span>
+<span class="text-sm font-bold text-tertiary">+10 xu</span>
+</div>
+<div class="flex items-center justify-between p-3 bg-surface-container-low rounded-lg">
+<span class="text-sm font-medium">Mốc chuỗi (Streak)</span>
+<span class="text-sm font-bold text-tertiary">+20 xu</span>
+</div>
+<div class="flex items-center justify-between p-3 bg-surface-container-low rounded-lg">
+<span class="text-sm font-medium">Xem quảng cáo</span>
+<span class="text-sm font-bold text-tertiary">+5 xu</span>
+</div>
+</div>
+</div>
+<div>
+<span class="label-sm text-error font-bold uppercase tracking-wider block mb-3">Tiêu Xu</span>
+<div class="space-y-3">
+<div class="flex items-center justify-between p-3 bg-surface-container-low rounded-lg opacity-80">
+<span class="text-sm font-medium">Streak Freeze</span>
+<span class="text-sm font-bold text-on-surface-variant">20 xu</span>
+</div>
+<div class="flex items-center justify-between p-3 bg-surface-container-low rounded-lg opacity-80">
+<span class="text-sm font-medium">AI Writing Feedback</span>
+<span class="text-sm font-bold text-on-surface-variant">30 xu</span>
+</div>
+</div>
+</div>
+</div>
+</div>
+</div>
+<!-- Weekly Leaderboard -->
+<div class="lg:col-span-8 bg-surface-container-lowest p-6 rounded-xl achievement-shadow">
+<div class="flex items-center justify-between mb-6">
+<h3 class="text-lg font-bold">Bảng xếp hạng tuần</h3>
+<div class="flex gap-2">
+<button class="px-3 py-1 bg-primary-container text-on-primary-container rounded-full text-xs font-bold">Top 100</button>
+<button class="px-3 py-1 bg-surface-container-high text-on-surface-variant rounded-full text-xs font-bold">Bạn bè</button>
+</div>
+</div>
+<div class="overflow-hidden">
+<table class="w-full text-left border-separate border-spacing-y-2">
+<thead>
+<tr class="text-outline text-[10px] font-bold uppercase tracking-widest">
+<th class="pb-2 pl-4">Hạng</th>
+<th class="pb-2">Người học</th>
+<th class="pb-2 text-right pr-4">XP Tổng</th>
+</tr>
+</thead>
+<tbody>
+<!-- Rank 1 -->
+<tr class="bg-surface-container-low/50 hover:bg-surface-container-low transition-colors group">
+<td class="py-3 pl-4 rounded-l-xl w-16">
+<div class="w-8 h-8 flex items-center justify-center bg-tertiary-fixed-dim text-on-tertiary-fixed font-bold rounded-full text-xs">1</div>
+</td>
+<td class="py-3">
+<div class="flex items-center gap-3">
+<div class="w-8 h-8 rounded-full bg-slate-300">
+<img alt="Leaderboard User" class="w-full h-full rounded-full object-cover" data-alt="Portrait of a young professional woman in a bright office environment, smiling confidently" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDvzxcWKPKaoweBqyoXTb89mtDdHNSiQOPT-MuPtbTIPSgKseQr7BMjfk2Q_ouJow_nGLtEtZmGpYVxXPYGv7RglZbbpRZsVXAZcd6HAROWiktTi2pydQ-HX_GA1uXlNkXwLOgKLDsDDuEVfjm_BWTrsQh99ztiz_RYwtF7EYwJI-NAC3kwMN8w1BQ2VVmxse900xV6WZEoUHDOm1PE4mMFTMWgqKtQVzzMtU70bglHOB3br2nojBHXW2cUSOpnDGLVgynSGc3R0bUm"/>
+</div>
+<span class="text-sm font-bold">Minh Anh</span>
+</div>
+</td>
+<td class="py-3 pr-4 text-right rounded-r-xl">
+<span class="text-sm font-bold text-primary">12,450 XP</span>
+</td>
+</tr>
+<!-- Rank 2 -->
+<tr class="bg-surface-container-low/50 hover:bg-surface-container-low transition-colors">
+<td class="py-3 pl-4 rounded-l-xl">
+<div class="w-8 h-8 flex items-center justify-center bg-surface-container-high text-on-surface font-bold rounded-full text-xs">2</div>
+</td>
+<td class="py-3">
+<div class="flex items-center gap-3">
+<div class="w-8 h-8 rounded-full bg-slate-300 overflow-hidden">
+<img alt="Leaderboard User" class="w-full h-full object-cover" data-alt="Smiling man in casual attire, outdoor urban setting with soft bokeh background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA74HK_XasMK05dy3-PV9MrXZjAMDIQy2YVA_lNOZH35kWKPfvUDTR3CoiWXFRaC5Kv2R19s1JCkyVKfoZWkkTIDpBR0tMNdqe5tZ6dbTz5qAjfd2fqRJRluFqOLKdauKd3nV5u0pDP7hawaTt6qYut_sSjgVzVxb_ue9e7rsUorbd2MwhYVisDVe2OxqbpJEWxEprsvD1Hq1Cyynl5bXOp3MRRndelJuRzs7udHOEr9gf56NyaG4XHv8JzoBaP23YaK-CUxp_-_VE0"/>
+</div>
+<span class="text-sm font-bold">Hoàng Nam</span>
+</div>
+</td>
+<td class="py-3 pr-4 text-right rounded-r-xl">
+<span class="text-sm font-bold text-primary">11,200 XP</span>
+</td>
+</tr>
+<!-- Rank Current User -->
+<tr class="bg-primary-container/10 border-2 border-primary/20 rounded-xl">
+<td class="py-3 pl-4 rounded-l-xl">
+<div class="w-8 h-8 flex items-center justify-center bg-primary text-on-primary font-bold rounded-full text-xs shadow-lg shadow-primary/30">7</div>
+</td>
+<td class="py-3">
+<div class="flex items-center gap-3">
+<div class="w-8 h-8 rounded-full bg-primary-fixed overflow-hidden ring-2 ring-primary ring-offset-2">
+<img alt="Leaderboard User" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAh40p1R5HEI8qMmXljq9v2-C2lksWh9bg4r-DfQ1Udmt8YkUyW2gzEsomPu94XJB9lxoa1JLqaacdoNFNqVkjsxlRcuGrw9mXqiS57fA64j7Jx7UkQ0OcuQAA2eHtkTuDcvUzeTFVHt5lUQfAVDXpy7hUV2-YCFGuNkc0jvaQxb3vyRsea49hqn9NznDGBNC_Nn4dkNQL0hZC4wlRLhxEfCTKKQX6giA2AAPtSmCzqXiXofoZ67mV5KlZmbVh5u9doZCR2oM30w3uS"/>
+</div>
+<span class="text-sm font-extrabold text-primary">Bạn (Achievement Hub)</span>
+</div>
+</td>
+<td class="py-3 pr-4 text-right rounded-r-xl">
+<span class="text-sm font-black text-primary">8,950 XP</span>
+</td>
+</tr>
+<!-- Rank 8 -->
+<tr class="bg-surface-container-low/50 hover:bg-surface-container-low transition-colors">
+<td class="py-3 pl-4 rounded-l-xl">
+<div class="w-8 h-8 flex items-center justify-center bg-surface-container-high text-on-surface font-bold rounded-full text-xs">8</div>
+</td>
+<td class="py-3">
+<div class="flex items-center gap-3">
+<div class="w-8 h-8 rounded-full bg-slate-300 overflow-hidden">
+<img alt="Leaderboard User" class="w-full h-full object-cover" data-alt="Confident woman smiling against a simple neutral background, professional headshot style" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDPTY5RBhm4hBjD9tmqpg6EE8QznVn6ig_XSBySi14MAcljPurw9bOALQ4Y96yGfQmzrg0lC6bo-QH-b5BIp5xwF2A94l8DzdLGKG60pSnuHWg3Lse8ugw_0XTT6LQIfppRwnnnaYSzP41qQl8UUBf8ZaD3AKA6DhboSTEJJI3g7EaxanT3BoIrTQ_cy3_MzuYj44fSeMWZUnJ73abeV-w9iuGDtZfbAUNgtx2-3zw8eowW1Y_WA4vrMn6gMXCULTdNXj7oyTsbFJ71"/>
+</div>
+<span class="text-sm font-bold">Thùy Linh</span>
+</div>
+</td>
+<td class="py-3 pr-4 text-right rounded-r-xl">
+<span class="text-sm font-bold text-primary">8,800 XP</span>
+</td>
+</tr>
+</tbody>
+</table>
+</div>
+</div>
+</div>
+</main>
+<!-- FAB Action (Contextual) -->
+<button class="fixed bottom-8 right-8 w-16 h-16 bg-primary text-on-primary rounded-2xl flex items-center justify-center shadow-2xl hover:scale-110 active:scale-95 transition-all group z-50">
+<span class="material-symbols-outlined text-3xl">play_arrow</span>
+<span class="absolute right-full mr-4 bg-inverse-surface text-inverse-on-surface px-4 py-2 rounded-lg text-sm font-bold whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity">Học ngay</span>
+</button>
+</body></html>