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

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