renolation/english
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

leader board + setting

Browse Source
This commit is contained in:
renolation
2026-04-12 22:59:46 +07:00
parent 857341132c
commit 8de8b88a3d
32 changed files with 2302 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
stitch-exports/dashboard/DESIGN.md Normal file
View File

@@ -0,0 +1,68 @@
# Design System
Auto-generated from Google Stitch export.
## Colors
- `border-r-0`
- `bg-slate-50`
- `bg-slate-900`
- `text-blue-600`
- `text-blue-400`
- `bg-slate-100`
- `bg-slate-800`
- `text-slate-500`
- `text-blue-700`
- `text-blue-300`
- `bg-blue-50`
- `bg-blue-900`
- `text-slate-400`
- `text-slate-600`
- `bg-slate-300`
## Typography
- `text-xl`
- `font-bold`
- `font-medium`
- `text-sm`
- `text-xs`
- `font-semibold`
- `text-base`
- `text-4xl`
- `font-extrabold`
- `text-3xl`
- `text-lg`
- `text-2xl`
## Spacing
- `p-0`
- `p-6`
- `gap-3`
- `p-3`
- `gap-2`
- `gap-6`
- `gap-4`
- `p-2`
- `gap-1`
- `p-8`
- `p-4`
- `gap-8`
- `space-y-6`
- `space-y-3`
- `m-8`
## Components
- `<nav>`
- `<button>`
- `<header>`
- `<main>`
- `<table>`
## Notes
- Generated by Google Stitch AI
- Tailwind CSS utility classes used throughout
- Review and customize colors/typography for brand alignment

419
stitch-exports/dashboard/design.html Normal file
View File

@@ -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>

BIN
stitch-exports/dashboard/design.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

71
stitch-exports/preferences/DESIGN.md Normal file
View File

@@ -0,0 +1,71 @@
# Design System
Auto-generated from Google Stitch export.
## Colors
- `border-r-0`
- `bg-slate-50`
- `bg-slate-900`
- `text-blue-700`
- `text-blue-500`
- `text-slate-500`
- `text-slate-400`
- `text-blue-600`
- `text-blue-300`
- `bg-slate-100`
- `bg-slate-800`
- `text-blue-400`
- `border-r-4`
- `border-blue-700`
- `border-blue-400`
- `bg-blue-50`
- `bg-blue-900`
- `bg-blue-100`
- `bg-slate-950`
## Typography
- `text-sm`
- `font-medium`
- `text-xl`
- `font-bold`
- `text-xs`
- `text-lg`
- `font-semibold`
- `font-extrabold`
- `text-4xl`
## Spacing
- `p-0`
- `gap-3`
- `space-y-1`
- `p-4`
- `gap-6`
- `gap-2`
- `gap-8`
- `p-8`
- `m-0`
- `p-1`
- `space-y-4`
- `space-y-3`
- `p-3`
- `m-8`
- `gap-4`
## Components
- `<aside>`
- `<nav>`
- `<header>`
- `<main>`
- `<section>`
- `<button>`
- `<input>`
## Notes
- Generated by Google Stitch AI
- Tailwind CSS utility classes used throughout
- Review and customize colors/typography for brand alignment

346
stitch-exports/preferences/design.html Normal file
View File

@@ -0,0 +1,346 @@
<!DOCTYPE html>
<html lang="vi"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Cài đặt - TOEIC Master</title>
<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 src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"error": "#ba1a1a",
"primary-container": "#2563eb",
"surface-container-lowest": "#ffffff",
"surface": "#f7f9fb",
"inverse-on-surface": "#eff1f3",
"secondary-fixed": "#dbe1ff",
"primary-fixed": "#dbe1ff",
"surface-container": "#eceef0",
"on-error-container": "#93000a",
"secondary": "#495c95",
"tertiary-container": "#bc4800",
"surface-bright": "#f7f9fb",
"on-primary-fixed-variant": "#003ea8",
"on-background": "#191c1e",
"on-surface": "#191c1e",
"outline": "#737686",
"tertiary": "#943700",
"on-secondary-fixed-variant": "#31447b",
"inverse-primary": "#b4c5ff",
"on-secondary-fixed": "#00174b",
"outline-variant": "#c3c6d7",
"on-tertiary-container": "#ffede6",
"surface-dim": "#d8dadc",
"error-container": "#ffdad6",
"on-error": "#ffffff",
"primary": "#004ac6",
"on-tertiary-fixed": "#360f00",
"on-primary-container": "#eeefff",
"primary-fixed-dim": "#b4c5ff",
"surface-container-highest": "#e0e3e5",
"on-secondary-container": "#394c84",
"tertiary-fixed": "#ffdbcd",
"surface-container-high": "#e6e8ea",
"surface-container-low": "#f2f4f6",
"inverse-surface": "#2d3133",
"background": "#f7f9fb",
"on-surface-variant": "#434655",
"on-primary-fixed": "#00174b",
"tertiary-fixed-dim": "#ffb596",
"on-primary": "#ffffff",
"surface-tint": "#0053db",
"on-secondary": "#ffffff",
"on-tertiary-fixed-variant": "#7d2d00"
},
"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; }
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #eceef0; border-radius: 10px; }
</style>
</head>
<body class="bg-surface text-on-surface">
<!-- SideNavBar Component -->
<aside class="h-screen w-64 fixed left-0 top-0 border-r-0 bg-slate-50 dark:bg-slate-900 flex flex-col py-8 px-4 font-plus-jakarta text-sm font-medium leading-relaxed">
<div class="text-xl font-bold tracking-tight text-blue-700 dark:text-blue-500 mb-8 flex items-center gap-3">
<div class="w-10 h-10 rounded-xl bg-primary flex items-center justify-center">
<span class="material-symbols-outlined text-white" style="font-variation-settings: 'FILL' 1;">auto_stories</span>
</div>
<div>
<div class="text-blue-700 dark:text-blue-500">TOEIC Master</div>
<div class="text-[10px] uppercase tracking-widest opacity-60">Academic Curator</div>
</div>
</div>
<nav class="space-y-1 flex-1">
<a class="flex items-center px-4 py-3 text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-300 hover:bg-slate-100 dark:hover:bg-slate-800/80 transition-colors duration-200 rounded-xl group" href="#">
<span class="material-symbols-outlined mr-3">dashboard</span>
Dashboard
</a>
<a class="flex items-center px-4 py-3 text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-300 hover:bg-slate-100 dark:hover:bg-slate-800/80 transition-colors duration-200 rounded-xl group" href="#">
<span class="material-symbols-outlined mr-3">menu_book</span>
Practice
</a>
<a class="flex items-center px-4 py-3 text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-300 hover:bg-slate-100 dark:hover:bg-slate-800/80 transition-colors duration-200 rounded-xl group" href="#">
<span class="material-symbols-outlined mr-3">auto_fix_high</span>
AI Writing
</a>
<a class="flex items-center px-4 py-3 text-slate-500 dark:text-slate-400 hover:text-blue-600 dark:hover:text-blue-300 hover:bg-slate-100 dark:hover:bg-slate-800/80 transition-colors duration-200 rounded-xl group" href="#">
<span class="material-symbols-outlined mr-3">import_contacts</span>
Vocabulary
</a>
<a class="flex items-center px-4 py-3 text-blue-700 dark:text-blue-400 font-bold border-r-4 border-blue-700 dark:border-blue-400 bg-blue-50 dark:bg-blue-900/20 rounded-xl transition-all" href="#">
<span class="material-symbols-outlined mr-3">settings</span>
Settings
</a>
</nav>
<div class="mt-auto p-4 bg-slate-100 dark:bg-slate-800/50 rounded-2xl">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center overflow-hidden">
<img alt="Avatar" data-alt="close-up portrait of a young professional Vietnamese woman with a friendly smile, soft natural lighting in a modern office environment" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCa5CIDCl8P4XYqgSiIwCTW-Az7PCRUxhInqIN9gmDF_UlfogBPNO5n2Hqki15r4GZmhpJQefbwiKuGwtb2PVbcqU4APFOSk4tMQjZJMJxFngNjfVPg-jcWbQOFXmKJDAMWM9G-7k8Vy3n8r3QGkqZDeWlE36w7ENzdQAePgPZKJBwur1Tjhsp6mn76011vhra_pjwRRBWYNXct9WJ1TjV8MOqy6WxOS8cA4jtve95DaUbo1g9ePzZvWK91bQx_HmViGoZ_nPRm46Y9"/>
</div>
<div>
<p class="font-bold text-on-surface">Minh Anh</p>
<p class="text-xs text-on-surface-variant">Premium Member</p>
</div>
</div>
</div>
</aside>
<!-- TopNavBar Component -->
<header class="fixed top-0 right-0 w-[calc(100%-16rem)] h-16 z-40 bg-white/80 dark:bg-slate-950/80 backdrop-blur-xl flex justify-between items-center px-8 font-plus-jakarta text-lg font-semibold">
<h1 class="text-blue-700 dark:text-blue-500 font-extrabold tracking-tight">Settings</h1>
<div class="flex items-center gap-6">
<span class="material-symbols-outlined text-slate-500 hover:text-blue-600 transition-colors cursor-pointer">notifications</span>
<div class="flex items-center gap-2 cursor-pointer active:scale-95 transition-transform">
<span class="material-symbols-outlined text-slate-500">account_circle</span>
<span class="text-sm font-medium text-slate-500">Tài khoản</span>
</div>
</div>
</header>
<!-- Main Content Canvas -->
<main class="ml-64 pt-24 pb-12 px-8 max-w-5xl">
<div class="grid grid-cols-12 gap-8">
<!-- Section 1: Profile -->
<section class="col-span-12 md:col-span-8 bg-surface-container-lowest rounded-xl p-8 transition-all hover:shadow-xl hover:shadow-primary/5">
<h2 class="text-xl font-bold mb-6 flex items-center gap-2">
<span class="material-symbols-outlined text-primary">person</span>
Hồ sơ cá nhân
</h2>
<div class="flex items-center gap-8">
<div class="relative group">
<div class="w-24 h-24 rounded-full border-4 border-surface overflow-hidden bg-surface-container">
<img alt="User Profile Avatar" class="w-full h-full object-cover" data-alt="A profile photo of a young Vietnamese woman, modern minimalist style with a soft blue studio background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCB6W51bkNQXlN33mlyR1pzHZgkyH8qaXuJd3mqmMDgtRnutAK0ZxKjUns_aOtqwxU6tBxHCF9SBH5SsyLnsXFizb3hJyEM7m5SL6MfcEMMOlmzAuAE1TZuMxreZCI20ix4b107R7z0vqsnP-x8I_ErMuRlrhEEvwlBXWrpyTKdgcrxf0iZj18uBxN5qTD3wcyEp0At8Zv6EYVb42YguIF1jg4_K9lc0klwTnTz1NvZk1wSTqwVpErnRIs08sGT1TaXfnOLh30HqGdm"/>
</div>
<button class="absolute bottom-0 right-0 bg-primary text-white p-1.5 rounded-full shadow-lg hover:scale-110 transition-transform">
<span class="material-symbols-outlined text-sm">photo_camera</span>
</button>
</div>
<div class="flex-1 space-y-4">
<div class="flex justify-between items-center py-2 border-b border-surface">
<div>
<p class="text-xs text-on-surface-variant font-bold uppercase tracking-wider">Họ và tên</p>
<p class="text-lg font-semibold">Minh Anh</p>
</div>
<button class="text-primary font-bold text-sm hover:underline">Chỉnh sửa</button>
</div>
<div class="flex justify-between items-center py-2">
<div>
<p class="text-xs text-on-surface-variant font-bold uppercase tracking-wider">Email</p>
<p class="text-lg font-semibold">minhanh@example.com</p>
</div>
<button class="text-primary font-bold text-sm hover:underline">Chỉnh sửa</button>
</div>
</div>
</div>
</section>
<!-- Section 5: Wallet (Bento Style) -->
<section class="col-span-12 md:col-span-4 bg-primary text-white rounded-xl p-8 relative overflow-hidden flex flex-col justify-between">
<div class="relative z-10">
<h2 class="text-sm font-bold uppercase tracking-widest opacity-80 mb-1">Ví Xu của bạn</h2>
<div class="text-4xl font-extrabold tracking-tighter">2,450 Xu</div>
</div>
<div class="relative z-10 mt-6 space-y-3">
<div class="bg-white/10 backdrop-blur-md rounded-lg p-3 flex items-center justify-between text-xs">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-sm">add_circle</span>
<span>Hoàn thành bài tập</span>
</div>
<span class="font-bold">+50 Xu</span>
</div>
<div class="bg-white/10 backdrop-blur-md rounded-lg p-3 flex items-center justify-between text-xs">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-sm">redeem</span>
<span>Đổi quà</span>
</div>
<span class="font-bold">-100 Xu</span>
</div>
</div>
<div class="absolute -right-8 -top-8 w-32 h-32 bg-white/10 rounded-full blur-3xl"></div>
<div class="absolute -left-8 -bottom-8 w-32 h-32 bg-primary-container/30 rounded-full blur-3xl"></div>
</section>
<!-- Section 2: Daily Goal -->
<section class="col-span-12 md:col-span-6 bg-surface-container-lowest rounded-xl p-8">
<h2 class="text-xl font-bold mb-6 flex items-center gap-2">
<span class="material-symbols-outlined text-primary">target</span>
Mục tiêu hàng ngày
</h2>
<div class="grid grid-cols-2 gap-4">
<label class="relative cursor-pointer">
<input class="peer sr-only" name="goal" type="radio"/>
<div class="p-4 rounded-xl border border-transparent bg-surface-container-low peer-checked:bg-primary/5 peer-checked:border-primary transition-all text-center">
<span class="block text-sm font-bold">10p</span>
<span class="text-[10px] text-on-surface-variant">Dễ dàng</span>
</div>
</label>
<label class="relative cursor-pointer">
<input checked="" class="peer sr-only" name="goal" type="radio"/>
<div class="p-4 rounded-xl border border-transparent bg-surface-container-low peer-checked:bg-primary/5 peer-checked:border-primary transition-all text-center">
<span class="block text-sm font-bold text-primary">20p</span>
<span class="text-[10px] text-primary/70">Tiêu chuẩn</span>
</div>
</label>
<label class="relative cursor-pointer">
<input class="peer sr-only" name="goal" type="radio"/>
<div class="p-4 rounded-xl border border-transparent bg-surface-container-low peer-checked:bg-primary/5 peer-checked:border-primary transition-all text-center">
<span class="block text-sm font-bold">30p</span>
<span class="text-[10px] text-on-surface-variant">Thử thách</span>
</div>
</label>
<label class="relative cursor-pointer">
<input class="peer sr-only" name="goal" type="radio"/>
<div class="p-4 rounded-xl border border-transparent bg-surface-container-low peer-checked:bg-primary/5 peer-checked:border-primary transition-all text-center">
<span class="block text-sm font-bold">1h</span>
<span class="text-[10px] text-on-surface-variant">Chuyên sâu</span>
</div>
</label>
</div>
<div class="mt-6 p-4 rounded-xl bg-primary/5 flex items-center justify-center gap-2 text-primary font-bold">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">stars</span>
<span>+50 XP mỗi ngày</span>
</div>
</section>
<!-- Section 4: TOEIC Exam Date -->
<section class="col-span-12 md:col-span-6 bg-surface-container-lowest rounded-xl p-8 flex flex-col">
<h2 class="text-xl font-bold mb-6 flex items-center gap-2">
<span class="material-symbols-outlined text-primary">calendar_month</span>
Ngày thi TOEIC
</h2>
<div class="flex-1 flex flex-col justify-center">
<div class="bg-gradient-to-br from-primary to-primary-container p-6 rounded-xl text-white text-center shadow-lg shadow-primary/20">
<p class="text-sm font-medium opacity-80 mb-2">Đếm ngược kỳ thi</p>
<p class="text-4xl font-extrabold tracking-tight">Còn 45 ngày</p>
<div class="mt-4 inline-flex items-center gap-2 px-3 py-1 bg-white/20 rounded-full text-xs">
<span class="material-symbols-outlined text-xs">event</span>
<span>25 Tháng 12, 2024</span>
</div>
</div>
<button class="mt-6 w-full py-3 rounded-full border border-primary/20 text-primary font-bold hover:bg-primary/5 transition-colors">
Thay đổi ngày thi
</button>
</div>
</section>
<!-- Section 3: Notifications -->
<section class="col-span-12 bg-surface-container-lowest rounded-xl p-8">
<h2 class="text-xl font-bold mb-8 flex items-center gap-2">
<span class="material-symbols-outlined text-primary">notifications_active</span>
Cài đặt thông báo
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-8">
<div class="flex items-center justify-between">
<div class="space-y-1">
<p class="font-bold">Nhắc nhở hàng ngày</p>
<p class="text-sm text-on-surface-variant">Tùy chỉnh thời gian học mỗi ngày</p>
<div class="mt-2 inline-flex items-center gap-2 px-3 py-1 bg-surface-container rounded-lg text-sm font-semibold">
<span class="material-symbols-outlined text-sm">schedule</span>
20:00
</div>
</div>
<label class="relative inline-flex items-center cursor-pointer">
<input checked="" class="sr-only peer" type="checkbox"/>
<div class="w-11 h-6 bg-surface-container-highest rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
</label>
</div>
<div class="flex items-center justify-between">
<div class="space-y-1">
<p class="font-bold">Cảnh báo chuỗi học tập</p>
<p class="text-sm text-on-surface-variant">Không bao giờ bỏ lỡ Streak của bạn</p>
</div>
<label class="relative inline-flex items-center cursor-pointer">
<input checked="" class="sr-only peer" type="checkbox"/>
<div class="w-11 h-6 bg-surface-container-highest rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
</label>
</div>
<div class="flex items-center justify-between">
<div class="space-y-1">
<p class="font-bold">Nhắc nhở mục tiêu tuần</p>
<p class="text-sm text-on-surface-variant">Theo dõi tiến độ học tập hàng tuần</p>
</div>
<label class="relative inline-flex items-center cursor-pointer">
<input class="sr-only peer" type="checkbox"/>
<div class="w-11 h-6 bg-surface-container-highest rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
</label>
</div>
<div class="flex items-center justify-between">
<div class="space-y-1">
<p class="font-bold">Cập nhật bảng xếp hạng</p>
<p class="text-sm text-on-surface-variant">Biết ngay khi ai đó vượt qua bạn</p>
</div>
<label class="relative inline-flex items-center cursor-pointer">
<input checked="" class="sr-only peer" type="checkbox"/>
<div class="w-11 h-6 bg-surface-container-highest rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"></div>
</label>
</div>
</div>
</section>
<!-- Section 6: Account -->
<section class="col-span-12 border-t border-surface-container pt-8 mt-4">
<h2 class="text-xl font-bold mb-6 flex items-center gap-2">
<span class="material-symbols-outlined text-primary">security</span>
Tài khoản &amp; Bảo mật
</h2>
<div class="bg-surface-container-lowest rounded-xl p-8 space-y-8">
<div class="flex items-center justify-between">
<div>
<p class="font-bold">Mật khẩu</p>
<p class="text-sm text-on-surface-variant">Cập nhật mật khẩu để bảo mật tài khoản</p>
</div>
<button class="px-6 py-2 rounded-full border border-outline-variant font-bold hover:bg-surface-container transition-colors">Đổi mật khẩu</button>
</div>
<div class="pt-8 border-t border-surface">
<h3 class="text-error font-bold mb-4 uppercase tracking-wider text-xs">Khu vực nguy hiểm</h3>
<div class="flex items-center justify-between p-4 bg-error/5 rounded-xl border border-error/10">
<div>
<p class="font-bold text-error">Xóa tài khoản</p>
<p class="text-sm text-error/70">Hành động này không thể hoàn tác. Toàn bộ dữ liệu học tập sẽ bị mất.</p>
</div>
<button class="px-6 py-2 bg-error text-white rounded-full font-bold shadow-lg shadow-error/20 hover:bg-error/90 transition-colors">Xóa tài khoản</button>
</div>
</div>
</div>
</section>
</div>
</main>
</body></html>

BIN
stitch-exports/preferences/design.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 54 KiB