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

phase 2

Browse Source
This commit is contained in:
renolation
2026-04-12 18:54:59 +07:00
parent 28e866a64e
commit ec3d400e8a
71 changed files with 7888 additions and 333 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
stitch-exports/screen-01-home/DESIGN.md Normal file
View File

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

274
stitch-exports/screen-01-home/design.html Normal file
View File

@@ -0,0 +1,274 @@
<!DOCTYPE html>
<html class="light" lang="vi"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&amp;family=Be+Vietnam+Pro:wght@300;400;500;600&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-container": "#ffdad6",
"tertiary-fixed-dim": "#ffb596",
"surface-bright": "#f7f9fb",
"background": "#f7f9fb",
"on-error": "#ffffff",
"outline": "#737686",
"secondary-fixed": "#7ffc97",
"on-secondary": "#ffffff",
"surface-container-high": "#e6e8ea",
"inverse-surface": "#2d3133",
"secondary-fixed-dim": "#62df7d",
"surface-container": "#eceef0",
"on-primary-fixed-variant": "#003ea8",
"on-background": "#191c1e",
"on-primary-container": "#eeefff",
"outline-variant": "#c3c6d7",
"on-surface": "#191c1e",
"surface-tint": "#0053db",
"on-primary": "#ffffff",
"primary-fixed-dim": "#b4c5ff",
"tertiary": "#943700",
"surface-variant": "#e0e3e5",
"on-error-container": "#93000a",
"inverse-on-surface": "#eff1f3",
"secondary-container": "#7cf994",
"on-tertiary": "#ffffff",
"secondary": "#006e2d",
"tertiary-container": "#bc4800",
"on-secondary-fixed": "#002109",
"on-secondary-fixed-variant": "#005320",
"tertiary-fixed": "#ffdbcd",
"primary-container": "#2563eb",
"surface-dim": "#d8dadc",
"on-tertiary-fixed-variant": "#7d2d00",
"surface-container-low": "#f2f4f6",
"surface-container-lowest": "#ffffff",
"primary": "#004ac6",
"on-primary-fixed": "#00174b",
"on-secondary-container": "#007230",
"primary-fixed": "#dbe1ff",
"inverse-primary": "#b4c5ff",
"surface-container-highest": "#e0e3e5",
"surface": "#f7f9fb",
"on-tertiary-container": "#ffede6",
"error": "#ba1a1a",
"on-surface-variant": "#434655",
"on-tertiary-fixed": "#360f00"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "1rem",
"full": "9999px"
},
"fontFamily": {
"headline": ["Plus Jakarta Sans"],
"body": ["Be Vietnam Pro"],
"label": ["Plus Jakarta Sans"]
}
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.editorial-gradient {
background: linear-gradient(135deg, #004ac6 0%, #2563eb 100%);
}
</style>
</head>
<body class="bg-background text-on-surface font-body antialiased">
<aside class="w-[240px] h-screen fixed left-0 top-0 border-r-0 bg-[#f7f9fb] dark:bg-slate-950 flex flex-col h-full py-4 z-50">
<div class="text-2xl font-bold text-blue-700 dark:text-blue-500 tracking-tight px-6 py-8 font-headline">
EnglishAI
<div class="text-xs font-medium text-slate-500 mt-1">Học tập thông minh</div>
</div>
<nav class="flex-1 space-y-1">
<a class="flex items-center gap-3 px-4 py-3 mx-3 bg-white dark:bg-slate-800 text-blue-700 dark:text-blue-400 rounded-lg border-l-4 border-blue-600 font-semibold font-label text-sm transition-all duration-150 active:scale-95" href="#">
<span class="material-symbols-outlined">home</span>
Trang chủ
</a>
<a class="flex items-center gap-3 px-4 py-3 mx-3 text-slate-600 dark:text-slate-400 hover:text-blue-600 hover:bg-white/50 dark:hover:bg-slate-800/50 transition-colors font-label text-sm" href="#">
<span class="material-symbols-outlined">assignment</span>
Luyện đề TOEIC
</a>
<a class="flex items-center gap-3 px-4 py-3 mx-3 text-slate-600 dark:text-slate-400 hover:text-blue-600 hover:bg-white/50 dark:hover:bg-slate-800/50 transition-colors font-label text-sm" href="#">
<span class="material-symbols-outlined">edit_note</span>
AI Writing
</a>
<a class="flex items-center gap-3 px-4 py-3 mx-3 text-slate-600 dark:text-slate-400 hover:text-blue-600 hover:bg-white/50 dark:hover:bg-slate-800/50 transition-colors font-label text-sm" href="#">
<span class="material-symbols-outlined">menu_book</span>
Từ vựng
</a>
</nav>
<div class="mt-auto space-y-1">
<a class="flex items-center gap-3 px-4 py-3 mx-3 text-slate-600 dark:text-slate-400 hover:text-blue-600 hover:bg-white/50 dark:hover:bg-slate-800/50 transition-colors font-label text-sm" href="#">
<span class="material-symbols-outlined">settings</span>
Cài đặt
</a>
<a class="flex items-center gap-3 px-4 py-3 mx-3 text-slate-600 dark:text-slate-400 hover:text-blue-600 hover:bg-white/50 dark:hover:bg-slate-800/50 transition-colors font-label text-sm" href="#">
<span class="material-symbols-outlined">logout</span>
Đăng xuất
</a>
</div>
</aside>
<header class="fixed top-0 right-0 left-[240px] h-16 bg-white/80 dark:bg-slate-900/80 backdrop-blur-md flex items-center justify-between px-8 w-full z-40">
<div class="flex items-center gap-4 bg-surface-container-low px-4 py-2 rounded-full w-96">
<span class="material-symbols-outlined text-outline">search</span>
<input class="bg-transparent border-none focus:ring-0 text-sm w-full placeholder:text-outline font-body" placeholder="Tìm kiếm bài học, từ vựng..." type="text"/>
</div>
<div class="flex items-center gap-4">
<button class="hover:bg-slate-50 dark:hover:bg-slate-800 rounded-full p-2 transition-all duration-300">
<span class="material-symbols-outlined text-outline">notifications</span>
</button>
<button class="hover:bg-slate-50 dark:hover:bg-slate-800 rounded-full p-2 transition-all duration-300">
<span class="material-symbols-outlined text-outline">help_outline</span>
</button>
<div class="h-8 w-8 rounded-full overflow-hidden ml-2 bg-surface-container-high border border-outline-variant/20">
<img alt="User profile" class="w-full h-full object-cover" data-alt="Close-up portrait of a professional young man with a friendly smile, clean minimalist lighting background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA0ZWIqkQyJEx50wGL3F2fx4gihwSUnhj16u97RZ_VQuoCOrNJGq2-fRo14WuqJj9c27tRydxCBUPLet4kneKIRoPl8kQ-l7uQa5DPw1TCkt7lkabJxrkFnp_48qqgVsMqHMexb5TsBKuUJO9J9o03dzL8CbBsKrJBxxQJqWPw0rnwlmBEDuHe2i1IuWdE50VM12N_r5NcbGz6j658tzIGLFlmbZvJ2xoUct5Tp04UjObQ0q5XN62XW2efN6K0kotnIGMjdtVhVOK4E"/>
</div>
</div>
</header>
<main class="ml-[240px] pt-24 px-12 pb-12 min-h-screen">
<section class="grid grid-cols-12 gap-8 items-center mb-16">
<div class="col-span-7">
<span class="inline-block px-4 py-1.5 rounded-full bg-primary/10 text-primary font-label text-xs font-bold mb-6 tracking-wider uppercase">AI-Powered Learning</span>
<h1 class="text-5xl font-extrabold font-headline leading-[1.1] text-on-background mb-6 tracking-tight">
Luyện TOEIC thông minh <br/>
<span class="text-primary italic">cùng AI</span>
</h1>
<p class="text-lg text-on-surface-variant font-body leading-relaxed mb-10 max-w-lg">
Cá nhân hóa lộ trình học tập để bứt phá điểm số trong thời gian ngắn nhất. Hệ thống phân tích điểm yếu và tối ưu hóa thời gian học của bạn.
</p>
<div class="flex items-center gap-4">
<button class="editorial-gradient text-white px-8 py-4 rounded-xl font-headline font-bold text-base hover:opacity-90 transition-all shadow-lg shadow-primary/20">
Bắt đầu ngay
</button>
<button class="px-8 py-4 rounded-xl font-headline font-bold text-base text-primary hover:bg-primary/5 transition-all">
Xem lộ trình
</button>
</div>
</div>
<div class="col-span-5 relative">
<div class="absolute -top-12 -right-12 w-64 h-64 bg-primary/5 rounded-full blur-3xl -z-10"></div>
<div class="absolute -bottom-12 -left-12 w-48 h-48 bg-secondary/5 rounded-full blur-3xl -z-10"></div>
<div class="bg-surface-container-lowest p-8 rounded-[2rem] shadow-[0_32px_64px_-12px_rgba(0,74,198,0.08)] border border-outline-variant/10 relative overflow-hidden">
<div class="flex items-center justify-between mb-8">
<div>
<h3 class="font-headline font-bold text-xl text-on-surface">Tiến độ tuần này</h3>
<p class="text-sm text-on-surface-variant">Bạn đang làm rất tốt!</p>
</div>
<div class="bg-secondary-container text-on-secondary-container px-3 py-1 rounded-lg font-label text-xs font-bold">
+12%
</div>
</div>
<div class="space-y-6">
<div>
<div class="flex justify-between text-sm font-label font-bold mb-2">
<span>Reading Score</span>
<span class="text-primary">420/495</span>
</div>
<div class="h-3 w-full bg-surface-container rounded-full overflow-hidden">
<div class="h-full bg-primary w-[85%] rounded-full"></div>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="bg-surface-container-low p-4 rounded-2xl border-l-4 border-primary">
<span class="material-symbols-outlined text-primary mb-2">local_fire_department</span>
<div class="text-2xl font-extrabold font-headline">14</div>
<div class="text-xs font-label text-on-surface-variant font-medium">Ngày Streak</div>
</div>
<div class="bg-surface-container-low p-4 rounded-2xl border-l-4 border-secondary">
<span class="material-symbols-outlined text-secondary mb-2" style="font-variation-settings: 'FILL' 1;">star</span>
<div class="text-2xl font-extrabold font-headline">1,250</div>
<div class="text-xs font-label text-on-surface-variant font-medium">Exp tích lũy</div>
</div>
</div>
<div class="pt-4 border-t border-outline-variant/10 flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-surface-variant flex items-center justify-center">
<span class="material-symbols-outlined text-on-surface-variant">psychology</span>
</div>
<div class="flex-1">
<div class="text-xs font-label font-bold text-on-surface">AI Phân tích:</div>
<div class="text-xs text-on-surface-variant">Bạn cần cải thiện phần Part 5 - Ngữ pháp</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="mt-20">
<div class="flex items-center justify-between mb-10">
<div>
<h2 class="text-3xl font-extrabold font-headline tracking-tight mb-2">Tính năng nổi bật</h2>
<p class="text-on-surface-variant max-w-xl">Hệ sinh thái học tập toàn diện được thiết kế để tối ưu hóa khả năng ghi nhớ.</p>
</div>
</div>
<div class="grid grid-cols-3 gap-8">
<div class="group bg-surface-container-lowest p-8 rounded-[1.5rem] transition-all duration-300 hover:translate-y-[-8px] hover:shadow-[0_20px_40px_-10px_rgba(0,0,0,0.05)] border-l-4 border-primary">
<div class="w-14 h-14 rounded-2xl bg-primary/10 flex items-center justify-center mb-6 transition-colors group-hover:bg-primary group-hover:text-white">
<span class="material-symbols-outlined text-3xl">assignment</span>
</div>
<h3 class="text-xl font-bold font-headline mb-3 text-on-surface">Luyện đề TOEIC</h3>
<p class="text-on-surface-variant text-sm leading-relaxed mb-6">Kho đề thi cập nhật liên tục theo cấu trúc mới nhất. Chế độ thi thử như thật.</p>
<a class="text-primary font-bold font-label text-sm flex items-center gap-2" href="#">
Khám phá ngay
<span class="material-symbols-outlined text-sm">arrow_forward</span>
</a>
</div>
<div class="group bg-surface-container-lowest p-8 rounded-[1.5rem] transition-all duration-300 hover:translate-y-[-8px] hover:shadow-[0_20px_40px_-10px_rgba(0,0,0,0.05)] border-l-4 border-secondary">
<div class="w-14 h-14 rounded-2xl bg-secondary/10 flex items-center justify-center mb-6 transition-colors group-hover:bg-secondary group-hover:text-white">
<span class="material-symbols-outlined text-3xl">auto_fix_high</span>
</div>
<h3 class="text-xl font-bold font-headline mb-3 text-on-surface">AI Chấm Writing</h3>
<p class="text-on-surface-variant text-sm leading-relaxed mb-6">Chấm bài Writing ngay lập tức với phản hồi chi tiết về từ vựng và ngữ pháp từ AI.</p>
<a class="text-secondary font-bold font-label text-sm flex items-center gap-2" href="#">
Bắt đầu viết
<span class="material-symbols-outlined text-sm">arrow_forward</span>
</a>
</div>
<div class="group bg-surface-container-lowest p-8 rounded-[1.5rem] transition-all duration-300 hover:translate-y-[-8px] hover:shadow-[0_20px_40px_-10px_rgba(0,0,0,0.05)] border-l-4 border-tertiary">
<div class="w-14 h-14 rounded-2xl bg-tertiary/10 flex items-center justify-center mb-6 transition-colors group-hover:bg-tertiary group-hover:text-white">
<span class="material-symbols-outlined text-3xl">menu_book</span>
</div>
<h3 class="text-xl font-bold font-headline mb-3 text-on-surface">Từ vựng thông minh</h3>
<p class="text-on-surface-variant text-sm leading-relaxed mb-6">Học từ vựng qua Flashcards và phương pháp lặp lại ngắt quãng (Spaced Repetition).</p>
<a class="text-tertiary font-bold font-label text-sm flex items-center gap-2" href="#">
Học từ mới
<span class="material-symbols-outlined text-sm">arrow_forward</span>
</a>
</div>
</div>
</section>
<section class="mt-20">
<div class="bg-surface-container rounded-[2.5rem] p-12 overflow-hidden relative">
<div class="absolute right-0 top-0 bottom-0 w-1/2 opacity-10">
<img alt="AI illustration" class="w-full h-full object-cover" data-alt="Futuristic glowing digital mesh representation of artificial intelligence network with abstract nodes and connections" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCSSasyfoORYP6jd2y5btaMP3iGBXWU3Y1jeo_tsU4zUVx45XLDy-KKo46oR3C8dNdBc-qTuhKqBdBOxD15l2myErQn9gt10Pfu4Wm_bhXNbaa15oEpItUPaWfQnAA_h5gEmLhj7xzzJ4rlI_AsX8DY98CtCC1rTtryGjT--ruvMGeRERGmMhvJT2ZuvHNbhjLBMpC-SfscHz3pAYdIWAz0sgwcwagyyBCoyil0mphauyO10T5DBVaBJTX48YfGbLgDySCVZasaZ46h"/>
</div>
<div class="relative z-10 max-w-2xl">
<h2 class="text-3xl font-extrabold font-headline mb-6">Sẵn sàng để chinh phục 990 TOEIC?</h2>
<p class="text-on-surface-variant mb-10 text-lg">Hơn 50,000 học viên đã tin tưởng và cải thiện điểm số vượt mong đợi cùng EnglishAI. Tham gia ngay hôm nay để nhận lộ trình học miễn phí.</p>
<div class="flex flex-wrap gap-4">
<button class="bg-on-background text-white px-8 py-4 rounded-xl font-headline font-bold text-base hover:bg-on-background/90 transition-all">
Dùng thử miễn phí
</button>
<div class="flex -space-x-3 items-center ml-4">
<img alt="User" class="w-10 h-10 rounded-full border-2 border-surface-container" data-alt="Portrait of a smiling young woman with professional lighting and clean background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBw8x4U7Kt0x3D-FO48V0QM4CyjvN26o0YgCUjawS6ueS-cj8bEaR5lD02v5PkC-Mw8u_YOauqUPmwRjj_YJbE_MCUYUv-FHWJm31i4BdtnXPvldN_1ep77JSJ6hSvZLoW0KOwZPBq7jus4KSbG2Rsw_bbdoaQif_uhyU4gcDDNE91uiIBCVVPXKrYtvqDqaMEfXXmZ0XihLJigIVU0eSzDKIOHZK0Ah0oZto3BDXRCSvThbbm0JzdDewbWph8HKi9HdGoKOhK-NtF8"/>
<img alt="User" class="w-10 h-10 rounded-full border-2 border-surface-container" data-alt="Smiling businessman portrait in modern office setting with soft natural light" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBv44vasos6Ur7QJteTC-2U9vjYIYqs3Ws9HZ3Bupz6R0_drdvdFmyljNqd1y5kjuzyslr0nKlKdBqpHyiQs4W0bEoFpC2GTBJrmZt5JARA2yNsM0FzssyDY8h0D3t9FS4L35j6ykVaTDhc4pp8PIbc_ajk0YVGyQM6poAWxf7CQuFc5w6qT3cWJwhlbryYr8ylnEYwF8O4UyvJDzFTphS0ie9crgqOucFqmk8cEcXYgFLRWfNXRL5CP6BJOtFLpj2hRJdOuV3Qc1Xu"/>
<img alt="User" class="w-10 h-10 rounded-full border-2 border-surface-container" data-alt="Natural portrait of a young woman with a warm expression in a soft-focus outdoor setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBKfV9AmaCZo_mJHFwy9xZRBxMzkBNsUe1qSn67GjJmSUR59PxL207qIzfA2CClP9fcIsBoUetDAkg1-DgB5tTX1Apc774taKEXPAd4hQ0-HIq1-FO0auW9wO_MTlnj9JnSblADm1fpeLtA19KON7joHo4_ruTZ_iThMvoOL8RzkLXEUrdb-lECuBbr8o9LIpzLuzAXxxoOLUf9ixIcKqn9FVziPXvKr7fRd19jFfhzq87KTYO-NcRtwyIuBzi_94tnmZhg1FkPrz3O"/>
<span class="pl-6 text-sm font-label font-bold text-on-surface">+2.5k học viên mới tháng này</span>
</div>
</div>
</div>
</div>
</section>
</main>
</body></html>

BIN
stitch-exports/screen-01-home/design.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 84 KiB

63
stitch-exports/screen-02-part-select/DESIGN.md Normal file
View File

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

374
stitch-exports/screen-02-part-select/design.html Normal file
View File

@@ -0,0 +1,374 @@
<!DOCTYPE html>
<html class="light" lang="vi"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;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": {
"surface-tint": "#0053db",
"on-tertiary-fixed-variant": "#7d2d00",
"primary-fixed-dim": "#b4c5ff",
"tertiary-fixed": "#ffdbcd",
"surface-variant": "#e0e3e5",
"on-error": "#ffffff",
"tertiary-fixed-dim": "#ffb596",
"surface-container-lowest": "#ffffff",
"surface-container-highest": "#e0e3e5",
"secondary": "#495c95",
"surface-container-high": "#e6e8ea",
"tertiary": "#943700",
"on-primary-fixed-variant": "#003ea8",
"primary": "#004ac6",
"primary-fixed": "#dbe1ff",
"error": "#ba1a1a",
"on-tertiary-container": "#ffede6",
"on-tertiary": "#ffffff",
"on-tertiary-fixed": "#360f00",
"surface-bright": "#f7f9fb",
"secondary-fixed-dim": "#b4c5ff",
"inverse-primary": "#b4c5ff",
"on-surface-variant": "#434655",
"secondary-container": "#acbfff",
"primary-container": "#2563eb",
"error-container": "#ffdad6",
"surface": "#f7f9fb",
"inverse-surface": "#2d3133",
"tertiary-container": "#bc4800",
"surface-container": "#eceef0",
"on-secondary-fixed": "#00174b",
"on-background": "#191c1e",
"secondary-fixed": "#dbe1ff",
"surface-dim": "#d8dadc",
"on-surface": "#191c1e",
"on-primary-fixed": "#00174b",
"on-primary-container": "#eeefff",
"on-secondary-container": "#394c84",
"on-secondary-fixed-variant": "#31447b",
"on-primary": "#ffffff",
"outline-variant": "#c3c6d7",
"inverse-on-surface": "#eff1f3",
"on-secondary": "#ffffff",
"surface-container-low": "#f2f4f6",
"on-error-container": "#93000a",
"outline": "#737686",
"background": "#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; }
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
vertical-align: middle;
}
.circular-progress {
--percent: 0;
background: conic-gradient(var(--tw-primary) calc(var(--percent) * 1%), #eef2f6 0);
}
</style>
</head>
<body class="bg-surface text-on-surface antialiased">
<!-- SideNavBar Component -->
<aside class="fixed left-0 top-0 h-full w-[240px] z-30 bg-slate-50 border-r-0 flex flex-col p-4 gap-2 font-plus-jakarta-sans antialiased">
<div class="mb-8 px-4 py-2">
<h1 class="text-xl font-bold tracking-tight text-blue-700">Cognitive</h1>
<p class="text-[10px] uppercase tracking-widest text-slate-400 font-semibold">TOEIC Excellence</p>
</div>
<nav class="space-y-1">
<a class="flex items-center gap-3 px-4 py-3 text-slate-500 hover:text-slate-900 hover:bg-white/50 transition-colors duration-200" href="#">
<span class="material-symbols-outlined" data-icon="home">home</span>
<span class="text-sm font-medium">Home</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 text-blue-700 font-semibold bg-white rounded-xl translate-x-1 transition-transform" href="#">
<span class="material-symbols-outlined" data-icon="menu_book">menu_book</span>
<span class="text-sm font-medium">Luyện đề TOEIC</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 text-slate-500 hover:text-slate-900 hover:bg-white/50 transition-colors duration-200" href="#">
<span class="material-symbols-outlined" data-icon="edit_note">edit_note</span>
<span class="text-sm font-medium">AI Writing</span>
</a>
<a class="flex items-center gap-3 px-4 py-3 text-slate-500 hover:text-slate-900 hover:bg-white/50 transition-colors duration-200" href="#">
<span class="material-symbols-outlined" data-icon="auto_stories">auto_stories</span>
<span class="text-sm font-medium">Từ vựng</span>
</a>
</nav>
<div class="mt-auto p-4 bg-surface-container-low rounded-2xl">
<div class="flex items-center gap-3 mb-3">
<div class="w-10 h-10 rounded-full overflow-hidden bg-slate-200">
<img alt="User Profile" class="w-full h-full object-cover" data-alt="professional portrait of a young student in a modern workspace with soft lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB2DyDjUcE-9WiIp0Tt62qf63sNOD-xVceN95cAo069z6zibL4_Sbh6U3oayWhpJYL9QPYTJ5EQEhuiWmGhQ13Ivx0uIYCLCorYUQgiUyiUISCG-RwEwT1Bu9faxGG0VnICoUExWfsy5jBCSqvPJGPHquImGPHYRGLMRx5x63CFSatidiEdUBjog8GiwRFUOYQy-8ReECHPQm58MXOSxn9YBb8vBVmiUZn6_7pejyzEsXpgUIC7-puqouBCPidqoboYy93V55obABdR"/>
</div>
<div>
<p class="text-xs font-bold text-on-surface">Minh Anh</p>
<p class="text-[10px] text-slate-500">Premium Member</p>
</div>
</div>
<div class="h-1.5 w-full bg-slate-200 rounded-full overflow-hidden">
<div class="h-full bg-primary w-2/3"></div>
</div>
<p class="text-[10px] mt-2 text-slate-500 font-medium text-center">Daily Goal: 65%</p>
</div>
</aside>
<!-- TopNavBar Component -->
<header class="fixed top-0 right-0 left-[240px] h-16 z-20 bg-white/80 backdrop-blur-xl flex items-center justify-between px-8 w-full border-b-0">
<div class="flex items-center gap-4">
<span class="text-lg font-bold text-slate-900">Luyện đề TOEIC</span>
<div class="h-4 w-px bg-slate-200"></div>
<nav class="flex gap-6">
<a class="text-sm font-medium text-blue-700 font-bold" href="#">Part Selection</a>
<a class="text-sm font-medium text-slate-500 hover:opacity-80 transition-opacity" href="#">Practice History</a>
<a class="text-sm font-medium text-slate-500 hover:opacity-80 transition-opacity" href="#">Mock Tests</a>
</nav>
</div>
<div class="flex items-center gap-2">
<button class="hover:bg-slate-100 rounded-full p-2 transition-all">
<span class="material-symbols-outlined text-slate-600" data-icon="notifications">notifications</span>
</button>
<button class="hover:bg-slate-100 rounded-full p-2 transition-all">
<span class="material-symbols-outlined text-slate-600" data-icon="settings">settings</span>
</button>
</div>
</header>
<!-- Main Content Area -->
<main class="ml-[240px] pt-24 px-12 pb-12 min-h-screen">
<!-- Hero Section -->
<header class="mb-12 max-w-4xl pt-8">
<h2 class="text-4xl font-extrabold tracking-tight text-on-surface mb-3">Chọn Part TOEIC</h2>
<p class="text-slate-500 text-lg max-w-2xl leading-relaxed">
Hệ thống ôn luyện thông minh được thiết kế theo cấu trúc bài thi TOEIC thực tế.
Chọn một phần cụ thể để bắt đầu tối ưu hóa điểm số của bạn ngay hôm nay.
</p>
</header>
<!-- Bento Grid Layout -->
<div class="grid grid-cols-4 gap-6">
<!-- Part 1 Card -->
<div class="bg-white p-6 rounded-[16px] shadow-sm hover:shadow-md transition-shadow group cursor-pointer border border-transparent hover:border-primary/10">
<div class="flex justify-between items-start mb-6">
<div class="p-3 bg-blue-50 rounded-xl group-hover:bg-primary transition-colors">
<span class="material-symbols-outlined text-primary group-hover:text-white" data-icon="image">image</span>
</div>
<div class="relative w-12 h-12 flex items-center justify-center">
<svg class="w-12 h-12 transform -rotate-90">
<circle class="text-slate-100" cx="24" cy="24" fill="transparent" r="20" stroke="currentColor" stroke-width="4"></circle>
<circle class="text-primary" cx="24" cy="24" fill="transparent" r="20" stroke="currentColor" stroke-dasharray="125.6" stroke-dashoffset="50.24" stroke-width="4"></circle>
</svg>
<span class="absolute text-[10px] font-bold">60%</span>
</div>
</div>
<h3 class="font-bold text-lg mb-1">Part 1</h3>
<p class="text-sm font-medium text-slate-900 mb-2">Mô tả hình ảnh</p>
<div class="flex items-center gap-2 text-xs text-slate-500">
<span class="material-symbols-outlined text-sm" data-icon="list_alt">list_alt</span>
<span>45 câu hỏi</span>
</div>
</div>
<!-- Part 2 Card -->
<div class="bg-white p-6 rounded-[16px] shadow-sm hover:shadow-md transition-shadow group cursor-pointer border border-transparent hover:border-primary/10">
<div class="flex justify-between items-start mb-6">
<div class="p-3 bg-blue-50 rounded-xl group-hover:bg-primary transition-colors">
<span class="material-symbols-outlined text-primary group-hover:text-white" data-icon="question_answer">question_answer</span>
</div>
<div class="relative w-12 h-12 flex items-center justify-center">
<svg class="w-12 h-12 transform -rotate-90">
<circle class="text-slate-100" cx="24" cy="24" fill="transparent" r="20" stroke="currentColor" stroke-width="4"></circle>
<circle class="text-primary" cx="24" cy="24" fill="transparent" r="20" stroke="currentColor" stroke-dasharray="125.6" stroke-dashoffset="75.36" stroke-width="4"></circle>
</svg>
<span class="absolute text-[10px] font-bold">40%</span>
</div>
</div>
<h3 class="font-bold text-lg mb-1">Part 2</h3>
<p class="text-sm font-medium text-slate-900 mb-2">Hỏi-đáp</p>
<div class="flex items-center gap-2 text-xs text-slate-500">
<span class="material-symbols-outlined text-sm" data-icon="list_alt">list_alt</span>
<span>30 câu hỏi</span>
</div>
</div>
<!-- Part 3 Card -->
<div class="bg-white p-6 rounded-[16px] shadow-sm hover:shadow-md transition-shadow group cursor-pointer border border-transparent hover:border-primary/10">
<div class="flex justify-between items-start mb-6">
<div class="p-3 bg-blue-50 rounded-xl group-hover:bg-primary transition-colors">
<span class="material-symbols-outlined text-primary group-hover:text-white" data-icon="forum">forum</span>
</div>
<div class="relative w-12 h-12 flex items-center justify-center">
<svg class="w-12 h-12 transform -rotate-90">
<circle class="text-slate-100" cx="24" cy="24" fill="transparent" r="20" stroke="currentColor" stroke-width="4"></circle>
<circle class="text-primary" cx="24" cy="24" fill="transparent" r="20" stroke="currentColor" stroke-dasharray="125.6" stroke-dashoffset="94.2" stroke-width="4"></circle>
</svg>
<span class="absolute text-[10px] font-bold">25%</span>
</div>
</div>
<h3 class="font-bold text-lg mb-1">Part 3</h3>
<p class="text-sm font-medium text-slate-900 mb-2">Đoạn hội thoại</p>
<div class="flex items-center gap-2 text-xs text-slate-500">
<span class="material-symbols-outlined text-sm" data-icon="list_alt">list_alt</span>
<span>39 câu hỏi</span>
</div>
</div>
<!-- Part 4 Card -->
<div class="bg-white p-6 rounded-[16px] shadow-sm hover:shadow-md transition-shadow group cursor-pointer border border-transparent hover:border-primary/10">
<div class="flex justify-between items-start mb-6">
<div class="p-3 bg-blue-50 rounded-xl group-hover:bg-primary transition-colors">
<span class="material-symbols-outlined text-primary group-hover:text-white" data-icon="record_voice_over">record_voice_over</span>
</div>
<div class="relative w-12 h-12 flex items-center justify-center">
<svg class="w-12 h-12 transform -rotate-90">
<circle class="text-slate-100" cx="24" cy="24" fill="transparent" r="20" stroke="currentColor" stroke-width="4"></circle>
<circle class="text-primary" cx="24" cy="24" fill="transparent" r="20" stroke="currentColor" stroke-dasharray="125.6" stroke-dashoffset="113.04" stroke-width="4"></circle>
</svg>
<span class="absolute text-[10px] font-bold">10%</span>
</div>
</div>
<h3 class="font-bold text-lg mb-1">Part 4</h3>
<p class="text-sm font-medium text-slate-900 mb-2">Bài nói</p>
<div class="flex items-center gap-2 text-xs text-slate-500">
<span class="material-symbols-outlined text-sm" data-icon="list_alt">list_alt</span>
<span>30 câu hỏi</span>
</div>
</div>
<!-- Part 5 Card -->
<div class="bg-white p-6 rounded-[16px] shadow-sm hover:shadow-md transition-shadow group cursor-pointer border border-transparent hover:border-primary/10">
<div class="flex justify-between items-start mb-6">
<div class="p-3 bg-blue-50 rounded-xl group-hover:bg-primary transition-colors">
<span class="material-symbols-outlined text-primary group-hover:text-white" data-icon="history_edu">history_edu</span>
</div>
<div class="relative w-12 h-12 flex items-center justify-center">
<svg class="w-12 h-12 transform -rotate-90">
<circle class="text-slate-100" cx="24" cy="24" fill="transparent" r="20" stroke="currentColor" stroke-width="4"></circle>
<circle class="text-primary" cx="24" cy="24" fill="transparent" r="20" stroke="currentColor" stroke-dasharray="125.6" stroke-dashoffset="25.12" stroke-width="4"></circle>
</svg>
<span class="absolute text-[10px] font-bold">80%</span>
</div>
</div>
<h3 class="font-bold text-lg mb-1">Part 5</h3>
<p class="text-sm font-medium text-slate-900 mb-2">Điền từ</p>
<div class="flex items-center gap-2 text-xs text-slate-500">
<span class="material-symbols-outlined text-sm" data-icon="list_alt">list_alt</span>
<span>40 câu hỏi</span>
</div>
</div>
<!-- Part 6 Card -->
<div class="bg-white p-6 rounded-[16px] shadow-sm hover:shadow-md transition-shadow group cursor-pointer border border-transparent hover:border-primary/10">
<div class="flex justify-between items-start mb-6">
<div class="p-3 bg-blue-50 rounded-xl group-hover:bg-primary transition-colors">
<span class="material-symbols-outlined text-primary group-hover:text-white" data-icon="article">article</span>
</div>
<div class="relative w-12 h-12 flex items-center justify-center">
<svg class="w-12 h-12 transform -rotate-90">
<circle class="text-slate-100" cx="24" cy="24" fill="transparent" r="20" stroke="currentColor" stroke-width="4"></circle>
<circle class="text-primary" cx="24" cy="24" fill="transparent" r="20" stroke="currentColor" stroke-dasharray="125.6" stroke-dashoffset="62.8" stroke-width="4"></circle>
</svg>
<span class="absolute text-[10px] font-bold">50%</span>
</div>
</div>
<h3 class="font-bold text-lg mb-1">Part 6</h3>
<p class="text-sm font-medium text-slate-900 mb-2">Điền đoạn</p>
<div class="flex items-center gap-2 text-xs text-slate-500">
<span class="material-symbols-outlined text-sm" data-icon="list_alt">list_alt</span>
<span>16 câu hỏi</span>
</div>
</div>
<!-- Part 7 Card -->
<div class="bg-white p-6 rounded-[16px] shadow-sm hover:shadow-md transition-shadow group cursor-pointer border border-transparent hover:border-primary/10">
<div class="flex justify-between items-start mb-6">
<div class="p-3 bg-blue-50 rounded-xl group-hover:bg-primary transition-colors">
<span class="material-symbols-outlined text-primary group-hover:text-white" data-icon="menu_book">menu_book</span>
</div>
<div class="relative w-12 h-12 flex items-center justify-center">
<svg class="w-12 h-12 transform -rotate-90">
<circle class="text-slate-100" cx="24" cy="24" fill="transparent" r="20" stroke="currentColor" stroke-width="4"></circle>
<circle class="text-primary" cx="24" cy="24" fill="transparent" r="20" stroke="currentColor" stroke-dasharray="125.6" stroke-dashoffset="87.92" stroke-width="4"></circle>
</svg>
<span class="absolute text-[10px] font-bold">30%</span>
</div>
</div>
<h3 class="font-bold text-lg mb-1">Part 7</h3>
<p class="text-sm font-medium text-slate-900 mb-2">Đọc hiểu</p>
<div class="flex items-center gap-2 text-xs text-slate-500">
<span class="material-symbols-outlined text-sm" data-icon="list_alt">list_alt</span>
<span>54 câu hỏi</span>
</div>
</div>
<!-- Full Test Card (Specialized) -->
<div class="relative overflow-hidden bg-gradient-to-br from-amber-500 to-orange-600 p-6 rounded-[16px] shadow-xl hover:shadow-2xl transition-all group cursor-pointer ring-4 ring-amber-100">
<div class="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
<span class="material-symbols-outlined text-8xl" data-icon="workspace_premium">workspace_premium</span>
</div>
<div class="flex justify-between items-start mb-6">
<div class="p-3 bg-white/20 backdrop-blur-md rounded-xl">
<span class="material-symbols-outlined text-white" data-icon="military_tech">military_tech</span>
</div>
<span class="px-2 py-1 bg-white/20 backdrop-blur-md rounded-full text-[10px] font-extrabold text-white uppercase tracking-wider">Most Popular</span>
</div>
<h3 class="font-extrabold text-2xl text-white mb-1">Full Test</h3>
<p class="text-sm font-semibold text-amber-50 mb-4">Mô phỏng thi thật 2h</p>
<div class="flex items-center gap-2 text-xs text-amber-100">
<span class="material-symbols-outlined text-sm" data-icon="timer">timer</span>
<span>120 phút • 200 câu</span>
</div>
<div class="mt-6">
<div class="w-full bg-white/20 h-1 rounded-full">
<div class="bg-white w-[15%] h-full rounded-full"></div>
</div>
</div>
</div>
</div>
<!-- Featured Section (Bento Complement) -->
<section class="mt-12 grid grid-cols-12 gap-6">
<div class="col-span-8 bg-surface-container-low rounded-3xl p-8 flex items-center justify-between overflow-hidden relative">
<div class="relative z-10">
<h4 class="text-2xl font-bold mb-2">Luyện đề tập trung với AI</h4>
<p class="text-slate-500 max-w-sm mb-6">Hệ thống AI phân tích điểm yếu của bạn qua từng Part và đề xuất lộ trình ôn tập cá nhân hóa.</p>
<button class="bg-primary text-white px-6 py-3 rounded-xl font-bold hover:bg-primary-container transition-all flex items-center gap-2">
Bắt đầu phân tích
<span class="material-symbols-outlined text-sm" data-icon="arrow_forward">arrow_forward</span>
</button>
</div>
<div class="w-1/2 absolute -right-8 top-0 h-full">
<img alt="Study Session" class="w-full h-full object-cover rounded-l-3xl opacity-80" data-alt="clean overhead shot of an open notebook with diagrams and highlighters on a minimalist desk" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCZnS_tphqYtglGxJ9k3Uu3Sbr6aEjFZRIf8Hkb3F0-neWUVilyKpnabaOQPiY9Jfmy4pyuWbJJKxRYAHSb-tS6KXLoE6ZWotNEDZi_Ly7k-U_QgFTX03lQVuuv7RKn9UJjcD-1Q_Ir_b65mGs-Y_VBveqOZ1AP0wGlzpV4rw8l7MGQjxLUGUMDynjnXMs6oXBafWqqC4WVH3cX-iy6uSXy5cGOTS7Au1qFKVm9-ES6_aDiiRKoK2eskH3DoHeeNDcEUDF-ao2Y5Y-S"/>
</div>
</div>
<div class="col-span-4 bg-primary rounded-3xl p-8 text-white flex flex-col justify-between">
<div>
<span class="material-symbols-outlined text-4xl mb-4" data-icon="auto_awesome">auto_awesome</span>
<h4 class="text-xl font-bold">Thử thách ngày</h4>
<p class="text-white/80 text-sm mt-2">Hoàn thành 30 câu Part 5 để nhận ngay 500 streak points.</p>
</div>
<div class="flex items-end justify-between mt-8">
<div class="flex -space-x-3">
<div class="w-8 h-8 rounded-full border-2 border-primary overflow-hidden">
<img class="w-full h-full object-cover" data-alt="portrait of a young smiling professional woman in bright natural light" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD9e1IfPLx7fEAePcZypuqPCiWM1Fhipa_EEF7XypG_Gl3IRFW1U9gGtIValIys5nOKcEOD1THDZwh0M5mOtPYG2NzigaD6k29IQa6AfsO-eUes3qg1hRtMBOCNUViM5e1l_lklgQouPjNVB29Oupzks1-zM-NT-lHXv_JU7XYY0I10JEmLTL4G0RGvhcXC53_ue7Cr_TeOXI7blxXbgDBHpGSP3d3n5j36ox6A3fmU8tVlWDYOXse93OM9bbPcwpj0IMsnKhyotGfE"/>
</div>
<div class="w-8 h-8 rounded-full border-2 border-primary overflow-hidden">
<img class="w-full h-full object-cover" data-alt="professional portrait of a man with spectacles in soft office lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBH2Jid_vlxwm6_s9lZL8IgtjW3WcH7flqF63vvGi8oTv1Foclr6u55wiEt-RKIN8tCie-titrJzTsSALxOLYwDTd95uktEVnyG6PlC1EV6FTtWgw7HXpPPj6oTgEmJzbdge515kkBMkWZ0JS4xz12_wXFrMo6Ej5aybeKy9oMdq7eXAAerty_R86H-0UtxDPKRTroaBl_hdYjW9mVwsPG66ygBuq0nyvIG5_fqbmeoD_pevNyhcCBKBG29qNAKgvZSmboKTLhjfa7q"/>
</div>
<div class="w-8 h-8 rounded-full border-2 border-primary bg-white/20 flex items-center justify-center text-[10px] font-bold">
+12
</div>
</div>
<span class="text-xs font-medium bg-white/20 px-3 py-1 rounded-full">Tham gia ngay</span>
</div>
</div>
</section>
</main>
<!-- Contextual FAB (Hidden as per suppression rule for details/selection but kept only for general study flow if desired. Here suppressed for focus.) -->
</body></html>

BIN
stitch-exports/screen-02-part-select/design.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

69
stitch-exports/screen-03-exam/DESIGN.md Normal file
View File

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

233
stitch-exports/screen-03-exam/design.html Normal file
View File

@@ -0,0 +1,233 @@
<!DOCTYPE html>
<html class="light" lang="vi"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>TOEIC Exam Session - Focused Academic</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;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": {
"on-error-container": "#93000a",
"on-surface": "#191c1e",
"inverse-on-surface": "#eff1f3",
"on-primary-container": "#eeefff",
"tertiary-fixed-dim": "#ffb596",
"primary-fixed-dim": "#b4c5ff",
"secondary-fixed": "#dbe1ff",
"surface-bright": "#f7f9fb",
"error": "#ba1a1a",
"on-primary-fixed": "#00174b",
"surface-container-high": "#e6e8ea",
"surface": "#f7f9fb",
"tertiary-container": "#bc4800",
"on-surface-variant": "#434655",
"on-error": "#ffffff",
"surface-container-highest": "#e0e3e5",
"background": "#f7f9fb",
"on-tertiary-fixed-variant": "#7d2d00",
"on-tertiary": "#ffffff",
"on-secondary-container": "#394c84",
"primary-container": "#2563eb",
"secondary-fixed-dim": "#b4c5ff",
"secondary": "#495c95",
"on-tertiary-fixed": "#360f00",
"outline": "#737686",
"tertiary": "#943700",
"on-secondary-fixed": "#00174b",
"on-tertiary-container": "#ffede6",
"secondary-container": "#acbfff",
"error-container": "#ffdad6",
"surface-container-lowest": "#ffffff",
"surface-container": "#eceef0",
"on-primary-fixed-variant": "#003ea8",
"on-background": "#191c1e",
"primary": "#004ac6",
"primary-fixed": "#dbe1ff",
"on-secondary-fixed-variant": "#31447b",
"inverse-primary": "#b4c5ff",
"surface-container-low": "#f2f4f6",
"tertiary-fixed": "#ffdbcd",
"surface-dim": "#d8dadc",
"on-secondary": "#ffffff",
"outline-variant": "#c3c6d7",
"surface-tint": "#0053db",
"inverse-surface": "#2d3133",
"on-primary": "#ffffff",
"surface-variant": "#e0e3e5"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"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;
}
</style>
</head>
<body class="bg-background text-on-surface min-h-screen">
<!-- SideNavBar (from JSON) -->
<aside class="flex flex-col fixed left-0 top-0 h-full py-6 w-[240px] bg-slate-50 dark:bg-slate-900 shadow-[4px_0_24px_rgba(0,74,198,0.02)] z-50">
<div class="text-xl font-bold text-blue-700 dark:text-blue-500 mb-8 px-6">Focused Academic</div>
<div class="mb-6 px-6">
<div class="font-['Plus_Jakarta_Sans'] text-sm tracking-tight font-bold text-slate-900 dark:text-white">TOEIC Prep</div>
<div class="font-['Plus_Jakarta_Sans'] text-xs text-slate-500">User Profile</div>
</div>
<nav class="flex-1">
<a class="flex items-center text-slate-500 dark:text-slate-400 pl-5 py-3 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors" href="#">
<span class="material-symbols-outlined mr-3">home</span>
<span class="font-['Plus_Jakarta_Sans'] text-sm tracking-tight">Home</span>
</a>
<!-- Active Navigation: Luyện đề -->
<a class="flex items-center text-blue-700 dark:text-blue-400 font-bold border-l-4 border-blue-700 dark:border-blue-500 pl-4 py-3 bg-blue-50/50 dark:bg-blue-900/20 transition-colors" href="#">
<span class="material-symbols-outlined mr-3">assignment</span>
<span class="font-['Plus_Jakarta_Sans'] text-sm tracking-tight">Luyện đề</span>
</a>
<a class="flex items-center text-slate-500 dark:text-slate-400 pl-5 py-3 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors" href="#">
<span class="material-symbols-outlined mr-3">auto_fix</span>
<span class="font-['Plus_Jakarta_Sans'] text-sm tracking-tight">AI Writing</span>
</a>
<a class="flex items-center text-slate-500 dark:text-slate-400 pl-5 py-3 hover:bg-slate-200 dark:hover:bg-slate-800 transition-colors" href="#">
<span class="material-symbols-outlined mr-3">menu_book</span>
<span class="font-['Plus_Jakarta_Sans'] text-sm tracking-tight">Từ vựng</span>
</a>
</nav>
</aside>
<!-- TopNavBar (from JSON) -->
<header class="flex justify-between items-center px-8 ml-[240px] w-[calc(100%-240px)] h-16 sticky top-0 bg-white/80 dark:bg-slate-950/80 backdrop-blur-xl border-b border-slate-200/15 dark:border-slate-800/15 z-40">
<div class="text-lg font-bold text-slate-900 dark:text-white font-['Plus_Jakarta_Sans'] tracking-tight">Part 2 — Câu 3/10</div>
<div class="flex items-center gap-6">
<button class="text-slate-500 hover:text-blue-600 transition-colors flex items-center gap-1">
<span class="material-symbols-outlined">timer</span>
</button>
<button class="text-slate-500 hover:text-blue-600 transition-colors flex items-center gap-1">
<span class="material-symbols-outlined">help_outline</span>
</button>
<button class="text-slate-500 hover:text-blue-600 transition-colors flex items-center gap-1">
<span class="material-symbols-outlined">settings</span>
</button>
</div>
</header>
<!-- Main Content Canvas -->
<main class="ml-[240px] p-8 min-h-[calc(100vh-4rem)]">
<div class="max-w-6xl mx-auto flex gap-8">
<!-- Left Column: The Question Engine (65%) -->
<section class="w-[65%] space-y-6">
<!-- Question Card -->
<div class="bg-surface-container-lowest p-10 shadow-sm border-l-4 border-primary">
<div class="mb-4">
<span class="label-md text-on-surface-variant font-bold tracking-widest uppercase">Question 03</span>
</div>
<h2 class="text-headline-md font-bold text-on-surface mb-10 leading-tight">
What does the man suggest the woman do?
</h2>
<!-- Options Grid -->
<div class="space-y-3">
<!-- Option A -->
<button class="w-full flex items-center p-4 bg-surface-container-lowest border border-outline-variant hover:bg-surface-container-low transition-all text-left">
<span class="w-8 h-8 flex items-center justify-center border border-outline-variant mr-4 font-bold text-sm">A</span>
<span class="body-lg text-on-surface">Call the office manager for technical assistance</span>
</button>
<!-- Option B (Selected) -->
<button class="w-full flex items-center p-4 bg-primary-container text-on-primary-container border-0 shadow-lg transition-all text-left">
<span class="w-8 h-8 flex items-center justify-center bg-white/20 mr-4 font-bold text-sm">B</span>
<span class="body-lg font-semibold">Reschedule the meeting for a later date</span>
</button>
<!-- Option C -->
<button class="w-full flex items-center p-4 bg-surface-container-lowest border border-outline-variant hover:bg-surface-container-low transition-all text-left">
<span class="w-8 h-8 flex items-center justify-center border border-outline-variant mr-4 font-bold text-sm">C</span>
<span class="body-lg text-on-surface">Visit the new branch office in the city center</span>
</button>
<!-- Option D -->
<button class="w-full flex items-center p-4 bg-surface-container-lowest border border-outline-variant hover:bg-surface-container-low transition-all text-left">
<span class="w-8 h-8 flex items-center justify-center border border-outline-variant mr-4 font-bold text-sm">D</span>
<span class="body-lg text-on-surface">Review the financial report before the presentation</span>
</button>
</div>
</div>
<!-- Pagination Buttons -->
<div class="flex justify-between items-center pt-4">
<button class="px-8 py-3 bg-transparent border-2 border-primary text-primary font-bold hover:bg-primary/5 transition-all flex items-center gap-2">
<span class="material-symbols-outlined text-sm">arrow_back</span>
Câu trước
</button>
<button class="px-10 py-3 bg-gradient-to-br from-primary to-primary-container text-on-primary font-bold shadow-md hover:opacity-90 transition-all flex items-center gap-2">
Câu tiếp theo
<span class="material-symbols-outlined text-sm">arrow_forward</span>
</button>
</div>
</section>
<!-- Right Column: Status & Timer (35%) -->
<section class="w-[35%]">
<div class="bg-surface-container-lowest p-8 shadow-sm flex flex-col h-fit sticky top-24">
<!-- Timer Component -->
<div class="text-center mb-10 pb-8 border-b border-surface-container-high">
<span class="label-md text-on-surface-variant font-bold uppercase block mb-2">Time Remaining</span>
<div class="text-5xl font-extrabold text-primary tracking-tighter tabular-nums">07:32</div>
</div>
<!-- Progress Grid -->
<div class="mb-10">
<span class="label-md text-on-surface-variant font-bold uppercase block mb-4">Question Overview</span>
<div class="grid grid-cols-5 gap-3">
<!-- Answered -->
<div class="aspect-square bg-primary text-white flex items-center justify-center text-xs font-bold shadow-sm">1</div>
<div class="aspect-square bg-primary text-white flex items-center justify-center text-xs font-bold shadow-sm">2</div>
<!-- Current -->
<div class="aspect-square border-2 border-primary text-primary flex items-center justify-center text-xs font-extrabold bg-blue-50">3</div>
<!-- Answered -->
<div class="aspect-square bg-primary text-white flex items-center justify-center text-xs font-bold shadow-sm">4</div>
<!-- Unanswered -->
<div class="aspect-square bg-surface-container-high text-on-surface-variant flex items-center justify-center text-xs font-bold">5</div>
<div class="aspect-square bg-surface-container-high text-on-surface-variant flex items-center justify-center text-xs font-bold">6</div>
<div class="aspect-square bg-surface-container-high text-on-surface-variant flex items-center justify-center text-xs font-bold">7</div>
<div class="aspect-square bg-surface-container-high text-on-surface-variant flex items-center justify-center text-xs font-bold">8</div>
<div class="aspect-square bg-surface-container-high text-on-surface-variant flex items-center justify-center text-xs font-bold">9</div>
<div class="aspect-square bg-surface-container-high text-on-surface-variant flex items-center justify-center text-xs font-bold">10</div>
</div>
</div>
<!-- Submit Button -->
<button class="w-full py-4 bg-error text-white font-bold flex items-center justify-center gap-2 hover:bg-on-error-container transition-colors">
<span class="material-symbols-outlined">flag</span>
Nộp bài
</button>
<div class="mt-6 flex items-center justify-center gap-4 text-xs text-on-surface-variant font-medium">
<div class="flex items-center gap-1.5">
<div class="w-2.5 h-2.5 bg-primary"></div>
<span>Đã làm</span>
</div>
<div class="flex items-center gap-1.5">
<div class="w-2.5 h-2.5 bg-surface-container-high"></div>
<span>Chưa làm</span>
</div>
</div>
</div>
<!-- Motivational Tip (Editorial/Professional aesthetic filler) -->
<div class="mt-6 p-6 bg-tertiary-container/5 border-l-4 border-tertiary">
<h4 class="label-md text-tertiary font-bold mb-2 uppercase">Pro Tip</h4>
<p class="text-sm text-on-surface-variant leading-relaxed italic">
"Focus on keywords in the question stem. Part 2 requires quick mental switching between context and intent."
</p>
</div>
</section>
</div>
</main>
</body></html>

BIN
stitch-exports/screen-03-exam/design.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

64
stitch-exports/screen-04-results/DESIGN.md Normal file
View File

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

317
stitch-exports/screen-04-results/design.html Normal file
View File

@@ -0,0 +1,317 @@
<!DOCTYPE html>
<html class="light" lang="vi"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;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: {
"on-surface": "#0d1c2e",
"on-primary-fixed": "#00174b",
"surface-container-highest": "#d5e3fc",
"surface-container-high": "#dce9ff",
"primary-fixed-dim": "#b4c5ff",
"surface-dim": "#ccdbf3",
"surface-container-low": "#eff4ff",
"on-secondary-fixed-variant": "#005320",
"primary": "#004ac6",
"surface-container": "#e6eeff",
"tertiary": "#ae0010",
"on-secondary-fixed": "#002109",
"on-background": "#0d1c2e",
"outline-variant": "#c3c6d7",
"secondary-fixed": "#7ffc97",
"surface-variant": "#d5e3fc",
"primary-container": "#2563eb",
"error-container": "#ffdad6",
"inverse-on-surface": "#eaf1ff",
"tertiary-fixed-dim": "#ffb4ab",
"tertiary-fixed": "#ffdad6",
"secondary-container": "#7cf994",
"on-primary-container": "#eeefff",
"on-tertiary-container": "#ffecea",
"outline": "#737686",
"surface-tint": "#0053db",
"primary-fixed": "#dbe1ff",
"background": "#f8f9ff",
"on-secondary-container": "#007230",
"surface-bright": "#f8f9ff",
"error": "#ba1a1a",
"on-tertiary-fixed": "#410002",
"surface-container-lowest": "#ffffff",
"on-surface-variant": "#434655",
"tertiary-container": "#d52022",
"on-error": "#ffffff",
"on-error-container": "#93000a",
"inverse-surface": "#233144",
"inverse-primary": "#b4c5ff",
"secondary-fixed-dim": "#62df7d",
"on-tertiary-fixed-variant": "#93000b",
"on-primary": "#ffffff",
"surface": "#f8f9ff",
"on-secondary": "#ffffff",
"on-primary-fixed-variant": "#003ea8",
"on-tertiary": "#ffffff",
"secondary": "#006e2d"
},
borderRadius: {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
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: #f8f9ff; color: #0d1c2e; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.custom-glass { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(12px); }
.sidebar-active { background-color: #dbe1ff; color: #004ac6; font-weight: 600; border-radius: 0.5rem; }
</style>
</head>
<body class="flex min-h-screen">
<!-- SideNavBar Component -->
<aside class="w-[240px] h-screen sticky top-0 left-0 bg-slate-50 border-r border-slate-200/20 flex flex-col p-4 gap-2">
<div class="mb-8 px-4">
<h1 class="text-lg font-bold text-slate-900 leading-tight">The Academic Architect</h1>
<p class="text-xs text-slate-500 font-medium uppercase tracking-wider">TOEIC Mastery</p>
</div>
<nav class="flex-1 flex flex-col gap-1">
<a class="text-slate-600 hover:bg-slate-100 rounded-lg px-4 py-3 transition-colors flex items-center gap-3" href="#">
<span class="material-symbols-outlined">home</span>Trang chủ
</a>
<a class="bg-blue-100 text-blue-700 font-semibold rounded-lg px-4 py-3 flex items-center gap-3" href="#">
<span class="material-symbols-outlined">assignment</span>Luy\u1ec7n \u0111\u1ec1 TOEIC
</a>
<a class="text-slate-600 hover:bg-slate-100 rounded-lg px-4 py-3 transition-colors flex items-center gap-3" href="#">
<span class="material-symbols-outlined">psychology</span>AI Writing
</a>
<a class="text-slate-600 hover:bg-slate-100 rounded-lg px-4 py-3 transition-colors flex items-center gap-3" href="#">
<span class="material-symbols-outlined">import_contacts</span>T\u1eeb v\u1ef1ng
</a>
<a class="text-slate-600 hover:bg-slate-100 rounded-lg px-4 py-3 transition-colors flex items-center gap-3" href="#">
<span class="material-symbols-outlined">leaderboard</span>Th\u1ed1ng k\u00ea
</a>
<div class="mt-auto">
<a class="text-slate-600 hover:bg-slate-100 rounded-lg px-4 py-3 transition-colors flex items-center gap-3" href="#">
<span class="material-symbols-outlined">settings</span>C\u00e0i \u0111\u1eb7t
</a>
</div>
</nav>
</aside>
<main class="flex-1 flex flex-col min-w-0">
<!-- TopNavBar Component -->
<header class="w-full h-16 sticky top-0 z-40 bg-white/80 backdrop-blur-md border-b border-slate-200/20 flex justify-between items-center px-8 shadow-sm">
<div class="flex items-center gap-4 flex-1">
<div class="relative w-full max-w-md">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">search</span>
<input class="w-full pl-10 pr-4 py-2 bg-surface-container-low border-none rounded-full text-sm focus:ring-2 focus:ring-surface-tint transition-all" placeholder="Tìm kiếm bài thi, từ vựng..." type="text"/>
</div>
</div>
<div class="flex items-center gap-6">
<button class="relative text-slate-600 hover:text-primary transition-colors">
<span class="material-symbols-outlined">notifications</span>
<span class="absolute top-0 right-0 w-2 h-2 bg-tertiary rounded-full"></span>
</button>
<div class="flex items-center gap-3 pl-6 border-l border-slate-200/50">
<div class="text-right">
<p class="text-sm font-bold text-on-surface">Minh Triết</p>
<p class="text-[10px] text-slate-500 font-bold uppercase tracking-tighter">Gold Member</p>
</div>
<img alt="User avatar" class="w-10 h-10 rounded-full object-cover border-2 border-white shadow-sm" data-alt="close-up portrait of a young professional man with a friendly expression in a modern office setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDHpo2JlM55AXZNPn-_Kv_WrQHmoINHAuDt0PqCUdY7tudzzY5x8jyEzwtGFWj0DOecjDfa6hK3foPAS7XWNcpbjkZs5S5OAcgZWC6rnsBy7mP4mqeVKTLPasFlbBhyvmFtl7MRI1ejHcIzJJk5DgWKKi_VrBcPyornEXVOcg1bsHE6xPj0of7hUH2XBMuE_e67zwbB7qs8yLhsLd-xWZOqCrAGftmeYOi66ndLXeb521Pp06RENy5rZwcpPBN0NOYXWEiVHJeP9DAP"/>
</div>
</div>
</header>
<!-- Content Canvas -->
<div class="p-8 max-w-7xl mx-auto w-full space-y-8">
<!-- Hero Results Section -->
<section class="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center bg-surface-container-lowest p-8 rounded-xl shadow-[0_8px_24px_rgba(13,28,46,0.04)]">
<div class="lg:col-span-4 flex justify-center">
<div class="relative flex items-center justify-center">
<div class="w-48 h-48 rounded-full border-[12px] border-secondary/20 flex flex-col items-center justify-center bg-white shadow-xl">
<span class="text-5xl font-black text-on-surface tracking-tighter">8/10</span>
<span class="text-xs font-bold text-secondary uppercase tracking-[0.2em] mt-1">Điểm số</span>
</div>
<!-- Decorative glow -->
<div class="absolute -z-10 w-56 h-56 bg-secondary/10 blur-3xl rounded-full"></div>
</div>
</div>
<div class="lg:col-span-8 space-y-6">
<div>
<h2 class="text-4xl font-extrabold text-on-surface tracking-tight">Hoàn thành!</h2>
<p class="text-slate-500 mt-2 font-medium">Chúc mừng bạn đã hoàn thành bài kiểm tra Reading Part 5.</p>
</div>
<div class="flex flex-wrap gap-4">
<div class="flex items-center gap-3 px-6 py-3 bg-secondary/10 rounded-full">
<span class="material-symbols-outlined text-secondary" style="font-variation-settings: 'FILL' 1;">check_circle</span>
<span class="text-secondary font-bold">8 Đúng</span>
</div>
<div class="flex items-center gap-3 px-6 py-3 bg-tertiary/10 rounded-full">
<span class="material-symbols-outlined text-tertiary" style="font-variation-settings: 'FILL' 1;">cancel</span>
<span class="text-tertiary font-bold">2 Sai</span>
</div>
<div class="flex items-center gap-3 px-6 py-3 bg-slate-100 rounded-full">
<span class="material-symbols-outlined text-slate-500">schedule</span>
<span class="text-slate-600 font-bold">4:32 Thời gian</span>
</div>
</div>
<div class="flex gap-4 pt-2">
<button class="px-8 py-3.5 bg-gradient-to-br from-primary to-primary-container text-white font-bold rounded-xl shadow-lg hover:shadow-primary/30 transition-all active:scale-95">
Về trang chủ
</button>
<button class="px-8 py-3.5 border-2 border-outline-variant/30 text-on-surface font-bold rounded-xl hover:bg-slate-50 transition-all active:scale-95">
Làm lại
</button>
</div>
</div>
</section>
<!-- Analysis & Review Grid -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
<!-- Left Column: Bar Chart Analysis -->
<div class="bg-surface-container-lowest p-8 rounded-xl shadow-[0_8px_24px_rgba(13,28,46,0.04)] h-full">
<div class="flex items-center justify-between mb-8">
<h3 class="text-xl font-bold text-on-surface">Phân tích theo Part</h3>
<span class="material-symbols-outlined text-slate-400">bar_chart</span>
</div>
<div class="space-y-6">
<!-- Chart Bar Mockups -->
<div class="space-y-2">
<div class="flex justify-between text-xs font-bold text-slate-500 uppercase tracking-wider">
<span>Part 1: Photographs</span>
<span class="text-secondary">100%</span>
</div>
<div class="w-full h-3 bg-slate-100 rounded-full overflow-hidden flex">
<div class="h-full bg-secondary w-full"></div>
</div>
</div>
<div class="space-y-2">
<div class="flex justify-between text-xs font-bold text-slate-500 uppercase tracking-wider">
<span>Part 2: Q&amp;A</span>
<span class="text-secondary">85%</span>
</div>
<div class="w-full h-3 bg-slate-100 rounded-full overflow-hidden flex">
<div class="h-full bg-secondary w-[85%]"></div>
<div class="h-full bg-tertiary w-[15%]"></div>
</div>
</div>
<div class="space-y-2">
<div class="flex justify-between text-xs font-bold text-slate-500 uppercase tracking-wider">
<span>Part 5: Incomplete Sentences</span>
<span class="text-tertiary">40%</span>
</div>
<div class="w-full h-3 bg-slate-100 rounded-full overflow-hidden flex">
<div class="h-full bg-secondary w-[40%]"></div>
<div class="h-full bg-tertiary w-[60%]"></div>
</div>
</div>
<div class="space-y-2">
<div class="flex justify-between text-xs font-bold text-slate-500 uppercase tracking-wider">
<span>Part 7: Reading Comprehension</span>
<span class="text-secondary">70%</span>
</div>
<div class="w-full h-3 bg-slate-100 rounded-full overflow-hidden flex">
<div class="h-full bg-secondary w-[70%]"></div>
<div class="h-full bg-tertiary w-[30%]"></div>
</div>
</div>
<div class="mt-8 p-4 bg-primary/5 rounded-xl border border-primary/10">
<p class="text-sm text-on-surface-variant leading-relaxed">
<span class="font-bold text-primary">Gợi ý:</span> Bạn đang gặp khó khăn ở Part 5. Hãy tập trung luyện tập về Ngữ pháp liên quan đến các thì của động từ và liên từ.
</p>
</div>
</div>
</div>
<!-- Right Column: Question Review -->
<div class="bg-surface-container-lowest rounded-xl shadow-[0_8px_24px_rgba(13,28,46,0.04)] flex flex-col overflow-hidden max-h-[600px]">
<div class="p-8 border-b border-slate-100 bg-white sticky top-0 z-10 flex items-center justify-between">
<h3 class="text-xl font-bold text-on-surface">Xem lại đáp án</h3>
<div class="flex gap-2">
<button class="p-2 bg-slate-100 rounded-lg text-slate-500 hover:bg-primary/10 hover:text-primary transition-colors">
<span class="material-symbols-outlined">filter_list</span>
</button>
</div>
</div>
<div class="overflow-y-auto p-4 space-y-4 bg-slate-50/50">
<!-- Correct Question -->
<div class="p-5 bg-white rounded-xl border border-secondary/10 group cursor-pointer hover:shadow-md transition-shadow">
<div class="flex items-start justify-between">
<div class="flex gap-4">
<div class="w-8 h-8 rounded-lg bg-secondary/10 flex items-center justify-center shrink-0">
<span class="text-sm font-bold text-secondary">01</span>
</div>
<div>
<p class="font-semibold text-on-surface mb-3">Ms. Tan _______ the client yesterday to discuss the terms of the contract.</p>
<div class="grid grid-cols-2 gap-2 text-sm">
<div class="px-3 py-2 bg-secondary/5 border border-secondary/20 rounded-lg text-secondary font-medium">Your answer: B</div>
<div class="px-3 py-2 bg-slate-50 border border-slate-100 rounded-lg text-slate-400">Correct: B</div>
</div>
</div>
</div>
<span class="material-symbols-outlined text-secondary" style="font-variation-settings: 'FILL' 1;">check_circle</span>
</div>
</div>
<!-- Incorrect Question (Expanded Style) -->
<div class="p-5 bg-white rounded-xl border-l-4 border-l-tertiary border-y border-r border-tertiary/10 shadow-sm">
<div class="flex items-start justify-between mb-4">
<div class="flex gap-4">
<div class="w-8 h-8 rounded-lg bg-tertiary/10 flex items-center justify-center shrink-0">
<span class="text-sm font-bold text-tertiary">02</span>
</div>
<div>
<p class="font-semibold text-on-surface mb-3">The sales department has been working hard _______ the new marketing campaign launched.</p>
<div class="grid grid-cols-2 gap-2 text-sm mb-4">
<div class="px-3 py-2 bg-tertiary/5 border border-tertiary/20 rounded-lg text-tertiary font-medium">Your answer: B</div>
<div class="px-3 py-2 bg-secondary/5 border border-secondary/20 rounded-lg text-secondary font-medium">Correct answer: C</div>
</div>
</div>
</div>
<span class="material-symbols-outlined text-tertiary" style="font-variation-settings: 'FILL' 1;">cancel</span>
</div>
<div class="mt-4 pt-4 border-t border-slate-100">
<div class="flex items-center gap-2 text-primary font-bold text-sm mb-2">
<span class="material-symbols-outlined text-sm">lightbulb</span>
GIẢI THÍCH
</div>
<p class="text-sm text-on-surface-variant leading-relaxed">
Giải thích: Câu này cần dùng thì hiện tại hoàn thành (has been working) vì có dấu hiệu 'since' chỉ một mốc thời gian trong quá khứ kéo dài đến hiện tại. Phương án C "since" là phù hợp nhất về mặt ngữ pháp.
</p>
</div>
</div>
<!-- Correct Question -->
<div class="p-5 bg-white rounded-xl border border-slate-100 group cursor-pointer hover:shadow-md transition-shadow">
<div class="flex items-start justify-between">
<div class="flex gap-4">
<div class="w-8 h-8 rounded-lg bg-secondary/10 flex items-center justify-center shrink-0">
<span class="text-sm font-bold text-secondary">03</span>
</div>
<div>
<p class="font-semibold text-on-surface mb-3">Applicants must submit their _______ by the end of the business day on Friday.</p>
<div class="grid grid-cols-2 gap-2 text-sm">
<div class="px-3 py-2 bg-secondary/5 border border-secondary/20 rounded-lg text-secondary font-medium">Your answer: A</div>
<div class="px-3 py-2 bg-slate-50 border border-slate-100 rounded-lg text-slate-400">Correct: A</div>
</div>
</div>
</div>
<span class="material-symbols-outlined text-secondary" style="font-variation-settings: 'FILL' 1;">check_circle</span>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</body></html>

BIN
stitch-exports/screen-04-results/design.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 59 KiB

72
stitch-exports/screen-05-writing/DESIGN.md Normal file
View File

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

270
stitch-exports/screen-05-writing/design.html Normal file
View File

@@ -0,0 +1,270 @@
<!DOCTYPE html>
<html class="light" lang="vi"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;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": {
"background": "#f7f9fb",
"on-secondary-fixed-variant": "#31447b",
"on-tertiary-fixed-variant": "#7d2d00",
"on-background": "#191c1e",
"tertiary": "#943700",
"on-surface-variant": "#434655",
"surface-variant": "#e0e3e5",
"surface-bright": "#f7f9fb",
"secondary": "#495c95",
"tertiary-container": "#bc4800",
"inverse-on-surface": "#eff1f3",
"on-error-container": "#93000a",
"error-container": "#ffdad6",
"on-tertiary-fixed": "#360f00",
"secondary-fixed": "#dbe1ff",
"surface": "#f7f9fb",
"surface-dim": "#d8dadc",
"on-primary": "#ffffff",
"on-primary-fixed": "#00174b",
"surface-container-highest": "#e0e3e5",
"tertiary-fixed": "#ffdbcd",
"on-secondary-fixed": "#00174b",
"primary-fixed": "#dbe1ff",
"secondary-container": "#acbfff",
"on-primary-container": "#eeefff",
"secondary-fixed-dim": "#b4c5ff",
"primary-container": "#2563eb",
"tertiary-fixed-dim": "#ffb596",
"surface-container": "#eceef0",
"inverse-primary": "#b4c5ff",
"outline-variant": "#c3c6d7",
"inverse-surface": "#2d3133",
"on-error": "#ffffff",
"on-tertiary-container": "#ffede6",
"on-primary-fixed-variant": "#003ea8",
"outline": "#737686",
"on-surface": "#191c1e",
"error": "#ba1a1a",
"primary-fixed-dim": "#b4c5ff",
"surface-container-low": "#f2f4f6",
"on-tertiary": "#ffffff",
"on-secondary": "#ffffff",
"surface-container-lowest": "#ffffff",
"surface-tint": "#0053db",
"on-secondary-container": "#394c84",
"surface-container-high": "#e6e8ea",
"primary": "#004ac6"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"fontFamily": {
"headline": ["Plus Jakarta Sans"],
"body": ["Plus Jakarta Sans"],
"label": ["Plus Jakarta Sans"]
}
}
}
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
body { font-family: 'Plus Jakarta Sans', sans-serif; }
.glass-panel {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(12px);
}
</style>
</head>
<body class="bg-background text-on-surface">
<!-- SideNavBar Shell -->
<nav class="h-screen w-64 fixed left-0 top-0 bg-slate-50 dark:bg-slate-900 flex flex-col py-8 px-4 z-50">
<div class="mb-10 px-2">
<h1 class="text-xl font-bold text-blue-800 dark:text-blue-300">The Academic Curator</h1>
<p class="text-xs text-slate-500 font-medium">TOEIC Excellence</p>
</div>
<div class="flex-1 space-y-1">
<!-- Home -->
<a class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-colors text-slate-500 dark:text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/10" href="#">
<span class="material-symbols-outlined" data-icon="home">home</span>
<span class="font-['Plus_Jakarta_Sans'] text-sm font-medium">Home</span>
</a>
<!-- Luyện đề TOEIC -->
<a class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-colors text-slate-500 dark:text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/10" href="#">
<span class="material-symbols-outlined" data-icon="assignment">assignment</span>
<span class="font-['Plus_Jakarta_Sans'] text-sm font-medium">Luyện đề TOEIC</span>
</a>
<!-- AI Writing (Active) -->
<a class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all text-blue-700 dark:text-blue-400 font-bold border-l-4 border-blue-600 bg-blue-50/50 dark:bg-blue-900/20 scale-95 active:scale-100" href="#">
<span class="material-symbols-outlined" data-icon="psychology" style="font-variation-settings: 'FILL' 1;">psychology</span>
<span class="font-['Plus_Jakarta_Sans'] text-sm">AI Writing</span>
</a>
<!-- Từ vựng -->
<a class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-colors text-slate-500 dark:text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/10" href="#">
<span class="material-symbols-outlined" data-icon="import_contacts">import_contacts</span>
<span class="font-['Plus_Jakarta_Sans'] text-sm font-medium">Từ vựng</span>
</a>
<!-- Thống kê -->
<a class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-colors text-slate-500 dark:text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/10" href="#">
<span class="material-symbols-outlined" data-icon="leaderboard">leaderboard</span>
<span class="font-['Plus_Jakarta_Sans'] text-sm font-medium">Thống kê</span>
</a>
<!-- Cài đặt -->
<a class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-colors text-slate-500 dark:text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/10" href="#">
<span class="material-symbols-outlined" data-icon="settings">settings</span>
<span class="font-['Plus_Jakarta_Sans'] text-sm font-medium">Cài đặt</span>
</a>
</div>
<div class="mt-auto pt-6 border-t border-slate-200/50">
<div class="flex items-center gap-3 px-2">
<img alt="User profile" class="w-10 h-10 rounded-full object-cover shadow-sm" data-alt="portrait of a focused professional educator in a modern minimalist workspace with soft natural light" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCBGJa9dqnqfCoSP3DnEBHZWiMjwQOrkpsRvcwJWI7QFsx8kWAo-lQIzWe-kmZ1GL5O2B-vpgP_553qR6BqIaP47vjJkV4ALIViC4OGx2K_KoKBalv7F3roDGt5aVif_4WP7jclzptL1D_gVJmPd5CQ9ebgT3NZow6NZR7XWSZojSCdHK9jANs0hp8tE_sVQF-l_q8UnHtn_F5BVK4VOwqahUFDMJBByGV6EJgVQ9XBiSaSZ7btDWo6dJtp1ybq522mgg6v6QaSYRp5"/>
<div>
<p class="text-sm font-bold">Minh Nguyen</p>
<p class="text-xs text-slate-500">Premium Member</p>
</div>
</div>
</div>
</nav>
<!-- TopNavBar Shell -->
<header class="fixed top-0 right-0 w-[calc(100%-16rem)] h-16 bg-white/80 backdrop-blur-md flex items-center justify-between px-8 z-40 shadow-sm">
<div class="flex items-center bg-slate-50 px-4 py-2 rounded-full w-96 transition-all focus-within:ring-2 focus-within:ring-blue-500/20">
<span class="material-symbols-outlined text-slate-400 mr-2" data-icon="search">search</span>
<input class="bg-transparent border-none focus:ring-0 text-sm w-full font-['Plus_Jakarta_Sans']" placeholder="Search curated resources..." type="text"/>
</div>
<div class="flex items-center gap-4">
<button class="w-10 h-10 flex items-center justify-center rounded-full text-slate-600 hover:bg-slate-100 transition-colors">
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
</button>
<div class="h-8 w-[1px] bg-slate-200"></div>
<button class="flex items-center gap-2 px-3 py-1.5 rounded-full hover:bg-slate-100 transition-colors">
<span class="text-sm font-medium text-slate-700">Profile</span>
<img alt="User profile picture" class="w-8 h-8 rounded-full border-2 border-white shadow-sm" data-alt="Close up portrait of a young adult looking smart and friendly with a clear bokeh background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCzsEHQ5y1Iklb3kYquyn5Qm5QX6Ax5p8XeIAGucP2QSjMj6zyAcQkG15xhsHzTSpLfdEoriLVa3q17pxFr7zl9J-HKLyvYdyoS67l3D1gdxgsDoWxZJIK9ypUc4VhZQ-u72zQEJxdbKeCeRgX3eFxOEFcQg5cBEAAR1FCCrHD0LAzCJzWNaniEmlkXLupTiY9i4HxkYr_bzXhtN72yqXFrz0qAYgDqHZiZGMiNDJJq0xBoi4u6Fi3KjSWmqAjCkV5U0VTMJtjJPeis"/>
</button>
</div>
</header>
<!-- Main Content Canvas -->
<main class="ml-64 pt-24 pb-12 px-10 min-h-screen">
<div class="max-w-7xl mx-auto">
<header class="mb-8">
<h2 class="text-3xl font-extrabold text-on-surface tracking-tight font-headline">AI Writing Checker</h2>
<p class="text-slate-500 mt-1 body-lg">Submit your essay for an immediate academic evaluation and feedback.</p>
</header>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
<!-- LEFT COLUMN: Input Area -->
<section class="space-y-6">
<div class="relative rounded-xl overflow-hidden shadow-sm bg-surface-container-low transition-all focus-within:bg-surface-container-lowest">
<div class="absolute left-0 top-0 bottom-0 w-1 bg-primary opacity-0 focus-within:opacity-100 transition-opacity"></div>
<textarea class="w-full h-[600px] p-8 bg-transparent border-none focus:ring-0 resize-none font-body text-lg leading-relaxed text-on-surface" placeholder="Type or paste your English paragraph here...">The most serious problem in urban cities is pollution. In my opinion, government must take action to reduce carbon emission from cars. People should used public transportations more often to protect the environment. Also, building more parks can helps city becoming more green. If we doesn't change our behavior, the planet will suffer a lot of damages in the future.</textarea>
<div class="absolute bottom-6 right-8 text-slate-400 font-label text-sm bg-white/50 backdrop-blur px-3 py-1 rounded-full">
245/500 characters
</div>
</div>
<div class="flex flex-col items-center gap-4">
<button class="w-full py-4 px-8 bg-gradient-to-r from-primary to-primary-container text-white font-bold text-lg rounded-full transition-transform active:scale-95 shadow-lg shadow-blue-500/20">
Chấm bài ngay
</button>
<div class="flex items-center gap-2 px-4 py-1.5 bg-secondary-fixed/30 text-blue-800 rounded-full text-sm font-semibold">
<span class="material-symbols-outlined text-sm" data-icon="bolt">bolt</span>
Còn 2/3 lượt hôm nay
</div>
</div>
</section>
<!-- RIGHT COLUMN: Feedback Panel -->
<aside class="space-y-6">
<!-- Band Score Badge -->
<div class="bg-surface-container-lowest p-8 rounded-xl flex items-center justify-between shadow-sm border border-outline-variant/10">
<div>
<h3 class="text-slate-500 font-label uppercase tracking-widest text-xs mb-1">Overall Band Score</h3>
<p class="text-on-surface font-headline font-bold text-xl">Academic Performance</p>
</div>
<div class="relative flex items-center justify-center">
<div class="absolute inset-0 bg-primary/10 rounded-full animate-pulse"></div>
<div class="w-20 h-20 bg-primary text-white rounded-full flex items-center justify-center text-3xl font-extrabold shadow-inner relative z-10">
6.5
</div>
</div>
</div>
<!-- Feedback Sections -->
<div class="space-y-4">
<!-- Ngữ pháp (Error) -->
<div class="bg-error-container/20 border-l-4 border-error rounded-r-xl p-5 transition-all hover:bg-error-container/30">
<div class="flex items-center gap-2 mb-3">
<span class="material-symbols-outlined text-error" data-icon="error">error</span>
<h4 class="font-headline font-bold text-error">Ngữ pháp</h4>
</div>
<ul class="space-y-3">
<li class="flex gap-3 text-sm text-on-surface-variant">
<span class="text-error mt-1">•</span>
<span>Lỗi thì quá khứ: "People should <strong>used</strong>" -&gt; "People should <strong>use</strong>" (Sau modal verb dùng V-inf).</span>
</li>
<li class="flex gap-3 text-sm text-on-surface-variant">
<span class="text-error mt-1">•</span>
<span>Chia động từ ngôi thứ 3: "parks can <strong>helps</strong>" -&gt; "parks can <strong>help</strong>".</span>
</li>
<li class="flex gap-3 text-sm text-on-surface-variant">
<span class="text-error mt-1">•</span>
<span>Hòa hợp chủ vị: "If we <strong>doesn't</strong>" -&gt; "If we <strong>don't</strong>".</span>
</li>
</ul>
</div>
<!-- Từ vựng (Warning) -->
<div class="bg-amber-50 border-l-4 border-[#D97706] rounded-r-xl p-5 transition-all hover:bg-amber-100/50">
<div class="flex items-center gap-2 mb-3">
<span class="material-symbols-outlined text-[#D97706]" data-icon="history_edu">history_edu</span>
<h4 class="font-headline font-bold text-[#D97706]">Từ vựng</h4>
</div>
<p class="text-sm text-on-surface-variant leading-relaxed">
Từ vựng còn khá đơn giản. Nên thay <strong>"most serious problem"</strong> bằng <strong>"pressing issue"</strong> hoặc <strong>"pivotal challenge"</strong>. Sử dụng thêm các từ chuyên ngành về môi trường như <strong>"carbon footprint"</strong> thay vì "carbon emission".
</p>
</div>
<!-- Cấu trúc bài (Primary) -->
<div class="bg-blue-50 border-l-4 border-primary-container rounded-r-xl p-5 transition-all hover:bg-blue-100/50">
<div class="flex items-center gap-2 mb-3">
<span class="material-symbols-outlined text-primary-container" data-icon="account_tree">account_tree</span>
<h4 class="font-headline font-bold text-primary-container">Cấu trúc bài</h4>
</div>
<p class="text-sm text-on-surface-variant leading-relaxed">
Bài viết có cấu trúc rõ ràng nhưng thiếu các từ nối (linking words). Nên bổ sung các cụm như <strong>"Consequently"</strong>, <strong>"Furthermore"</strong> hoặc <strong>"In addition to"</strong> để tăng tính gắn kết giữa các câu.
</p>
</div>
<!-- Bài viết cải thiện (Collapsible/Success) -->
<div class="bg-green-50 border-l-4 border-[#16A34A] rounded-r-xl overflow-hidden transition-all group">
<button class="w-full flex items-center justify-between p-5 text-left focus:outline-none">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-[#16A34A]" data-icon="auto_fix_high" style="font-variation-settings: 'FILL' 1;">auto_fix_high</span>
<h4 class="font-headline font-bold text-[#16A34A]">Bài viết cải thiện</h4>
</div>
<span class="material-symbols-outlined text-[#16A34A] transition-transform group-hover:translate-y-0.5" data-icon="keyboard_arrow_down">keyboard_arrow_down</span>
</button>
<div class="px-5 pb-5">
<div class="p-4 bg-white/60 rounded-lg text-sm text-slate-700 italic leading-relaxed border border-green-100">
"One of the most pressing issues in modern urban areas is pollution. In my perspective, the government must take decisive actions to minimize carbon footprints. Furthermore, citizens should utilize public transportation more frequently to preserve the ecosystem. Enhancing urban greenery by developing more parks is also vital. Unless we transform our behavioral patterns, the planet will encounter irreversible environmental damage in the near future."
</div>
</div>
</div>
</div>
<!-- Decorative Background Image -->
<div class="relative h-48 rounded-xl overflow-hidden mt-8">
<img alt="Academic study aesthetic" class="w-full h-full object-cover grayscale opacity-30 mix-blend-overlay" data-alt="close up of an open classic book with elegant typography on cream paper with soft focused library background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC9rNsXf29TWRCykkBS1mMY4_3RVznchVnsmuWVpykDYOlBZZ_KRSfxZsOH4qqfVRE3lkz2ilQOgkwO9Zq2qGmt_ErYzYNGP8eyzUmOCRV523QeZM_PF91ic3hGSHrUzJ8_c48vy7PbbjdvyKls1NVKGk7BNrMGQmCXD5XTOVcDuJL4pHN1kKK5LRIt_2Igj0kt6-s9WBIthc9dnCiE8lQOCNJE7SEjxiXre_-_nq-A0ly5DaKji7ScKU5Sky6YgDIO19i0qkbEklWh"/>
<div class="absolute inset-0 bg-gradient-to-t from-background to-transparent"></div>
<div class="absolute bottom-4 left-4">
<span class="text-xs font-bold uppercase tracking-widest text-slate-400">Curated Insights</span>
<p class="text-sm font-medium text-slate-600">Writing accuracy increased by 15% this week.</p>
</div>
</div>
</aside>
</div>
</div>
</main>
</body></html>

BIN
stitch-exports/screen-05-writing/design.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

57
stitch-exports/screen-06-flashcard/DESIGN.md Normal file
View File

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

317
stitch-exports/screen-06-flashcard/design.html Normal file
View File

@@ -0,0 +1,317 @@
<!DOCTYPE html>
<html class="light" lang="vi"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;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": {
"tertiary": "#943700",
"on-secondary": "#ffffff",
"on-primary-fixed": "#00174b",
"background": "#f7f9fb",
"error-container": "#ffdad6",
"surface-container-high": "#e6e8ea",
"on-tertiary-container": "#ffede6",
"on-error-container": "#93000a",
"on-tertiary-fixed-variant": "#7d2d00",
"surface-dim": "#d8dadc",
"secondary-fixed": "#7ffc97",
"on-primary": "#ffffff",
"primary-fixed": "#dbe1ff",
"surface-tint": "#0053db",
"primary": "#004ac6",
"on-secondary-fixed-variant": "#005320",
"on-surface": "#191c1e",
"tertiary-fixed": "#ffdbcd",
"error": "#ba1a1a",
"on-tertiary": "#ffffff",
"on-secondary-fixed": "#002109",
"secondary": "#006e2d",
"on-tertiary-fixed": "#360f00",
"on-primary-fixed-variant": "#003ea8",
"inverse-primary": "#b4c5ff",
"surface-variant": "#e0e3e5",
"primary-fixed-dim": "#b4c5ff",
"on-surface-variant": "#434655",
"tertiary-container": "#bc4800",
"on-error": "#ffffff",
"on-primary-container": "#eeefff",
"surface-container-low": "#f2f4f6",
"on-background": "#191c1e",
"secondary-fixed-dim": "#62df7d",
"primary-container": "#2563eb",
"surface-container": "#eceef0",
"inverse-surface": "#2d3133",
"secondary-container": "#7cf994",
"inverse-on-surface": "#eff1f3",
"outline": "#737686",
"surface": "#f7f9fb",
"outline-variant": "#c3c6d7",
"surface-container-highest": "#e0e3e5",
"surface-container-lowest": "#ffffff",
"tertiary-fixed-dim": "#ffb596",
"on-secondary-container": "#007230",
"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; }
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.perspective-1000 { perspective: 1000px; }
.backface-hidden { backface-visibility: hidden; }
.learning-card { transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
/* Simulation of flip for static UI representation */
/* .learning-card:hover { transform: rotateY(180deg); } */
</style>
</head>
<body class="bg-surface text-on-surface min-h-screen">
<div class="flex h-screen overflow-hidden">
<!-- COLUMN 1: SideNavBar (Shared) -->
<aside class="w-64 flex-shrink-0 z-50 bg-surface-container-low dark:bg-slate-900 h-screen flex flex-col py-8 px-4 font-['Plus_Jakarta_Sans'] text-sm font-medium tracking-tight">
<div class="mb-10 px-2">
<h1 class="text-2xl font-bold tracking-tighter text-[#191c1e] dark:text-white">The Atelier</h1>
<p class="text-xs text-on-surface-variant/70 uppercase tracking-widest mt-1">TOEIC Curator</p>
</div>
<nav class="flex-1 space-y-1">
<!-- Nav Item: Trang chủ -->
<a class="flex items-center gap-3 px-4 py-3 rounded-xl text-slate-500 dark:text-slate-400 hover:text-[#191c1e] dark:hover:text-white hover:bg-[#e6e8ea] dark:hover:bg-slate-800 transition-colors scale-95 duration-200 ease-in-out" href="#">
<span class="material-symbols-outlined" data-icon="home">home</span>
<span>Trang chủ</span>
</a>
<!-- Nav Item: Lộ trình -->
<a class="flex items-center gap-3 px-4 py-3 rounded-xl text-slate-500 dark:text-slate-400 hover:text-[#191c1e] dark:hover:text-white hover:bg-[#e6e8ea] dark:hover:bg-slate-800 transition-colors scale-95 duration-200 ease-in-out" href="#">
<span class="material-symbols-outlined" data-icon="auto_stories">auto_stories</span>
<span>Lộ trình</span>
</a>
<!-- Nav Item: Từ vựng (ACTIVE) -->
<a class="flex items-center gap-3 px-4 py-3 rounded-xl text-[#004ac6] dark:text-blue-400 font-bold border-r-4 border-[#004ac6] hover:bg-[#e6e8ea] dark:hover:bg-slate-800 transition-colors scale-95 duration-200 ease-in-out" href="#">
<span class="material-symbols-outlined" data-icon="style">style</span>
<span>Từ vựng</span>
</a>
<!-- Nav Item: Luyện đề -->
<a class="flex items-center gap-3 px-4 py-3 rounded-xl text-slate-500 dark:text-slate-400 hover:text-[#191c1e] dark:hover:text-white hover:bg-[#e6e8ea] dark:hover:bg-slate-800 transition-colors scale-95 duration-200 ease-in-out" href="#">
<span class="material-symbols-outlined" data-icon="quiz">quiz</span>
<span>Luyện đề</span>
</a>
<!-- Nav Item: Cá nhân -->
<a class="flex items-center gap-3 px-4 py-3 rounded-xl text-slate-500 dark:text-slate-400 hover:text-[#191c1e] dark:hover:text-white hover:bg-[#e6e8ea] dark:hover:bg-slate-800 transition-colors scale-95 duration-200 ease-in-out" href="#">
<span class="material-symbols-outlined" data-icon="person">person</span>
<span>Cá nhân</span>
</a>
</nav>
<div class="mt-auto pt-6 px-2">
<div class="flex items-center gap-3 mb-6 p-2 rounded-2xl bg-surface-container-highest/30">
<img alt="User profile avatar" class="w-10 h-10 rounded-full object-cover" data-alt="Modern professional headshot of a student in a minimalist studio setting with soft natural light" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCieZ4VqZqWdC-93bq9687nQG1PrVcWIZD7c9T1iwGfZIVOTXswt5uaX4glKxn41fXpU_J1hcbvb3I9P8Ve0n64ABJodhru1s30Uhgp6kXe2atLuFIDhnXzWrIja5ggEpXqOXILDqVuM_yZ6jnOZxTGg3gLXAxQTsqOLc_Ed_SQNtVq2lYhSBSTkA1uWClgtlVu44XHe8DLciOmt_v6RbjI244YZmh_3Vkx_m1cvl4pMp2F1yPeuFbGbSR_lnL992bbTaLw7-nwYjCg"/>
<div class="overflow-hidden">
<p class="font-bold text-on-surface truncate">Minh Anh</p>
<p class="text-xs text-on-surface-variant truncate">Level: Intermediate</p>
</div>
</div>
<button class="w-full py-4 bg-primary-container text-on-primary-container rounded-xl font-bold hover:opacity-90 transition-all flex items-center justify-center gap-2">
Bắt đầu học
</button>
</div>
</aside>
<!-- MAIN LAYOUT WRAPPER (2 Columns + Space) -->
<main class="flex-1 flex overflow-hidden">
<!-- COLUMN 2 (Left Panel): Topic Menu (approx 20% of content area) -->
<section class="w-72 bg-surface-container-low/50 overflow-y-auto px-6 py-8">
<h3 class="text-sm font-bold text-on-surface-variant uppercase tracking-widest mb-6">Chủ đề học</h3>
<div class="flex flex-col gap-1">
<button class="flex items-center justify-between px-4 py-3 rounded-xl transition-all hover:bg-surface-container-high text-on-surface-variant font-medium">
<span>Tất cả</span>
<span class="text-xs px-2 py-1 bg-surface-container-high rounded-lg">120</span>
</button>
<button class="flex items-center justify-between px-4 py-3 rounded-xl transition-all bg-primary/10 text-primary font-bold">
<span>Business</span>
<span class="text-xs px-2 py-1 bg-primary text-white rounded-lg">24</span>
</button>
<button class="flex items-center justify-between px-4 py-3 rounded-xl transition-all hover:bg-surface-container-high text-on-surface-variant font-medium">
<span>Office</span>
<span class="text-xs px-2 py-1 bg-surface-container-high rounded-lg">18</span>
</button>
<button class="flex items-center justify-between px-4 py-3 rounded-xl transition-all hover:bg-surface-container-high text-on-surface-variant font-medium">
<span>Travel</span>
<span class="text-xs px-2 py-1 bg-surface-container-high rounded-lg">22</span>
</button>
<button class="flex items-center justify-between px-4 py-3 rounded-xl transition-all hover:bg-surface-container-high text-on-surface-variant font-medium">
<span>Finance</span>
<span class="text-xs px-2 py-1 bg-surface-container-high rounded-lg">20</span>
</button>
<button class="flex items-center justify-between px-4 py-3 rounded-xl transition-all hover:bg-surface-container-high text-on-surface-variant font-medium">
<span>HR</span>
<span class="text-xs px-2 py-1 bg-surface-container-high rounded-lg">16</span>
</button>
<button class="flex items-center justify-between px-4 py-3 rounded-xl transition-all hover:bg-surface-container-high text-on-surface-variant font-medium">
<span>Marketing</span>
<span class="text-xs px-2 py-1 bg-surface-container-high rounded-lg">20</span>
</button>
</div>
<div class="mt-12 p-5 bg-tertiary-fixed rounded-2xl text-on-tertiary-fixed-variant">
<div class="flex items-center gap-2 mb-2">
<span class="material-symbols-outlined text-sm" data-icon="lightbulb">lightbulb</span>
<p class="text-xs font-bold uppercase tracking-wider">Pro-Tip</p>
</div>
<p class="text-sm leading-relaxed font-medium">Học theo cụm từ giúp bạn ghi nhớ lâu hơn 40% so với từ đơn lẻ.</p>
</div>
</section>
<!-- COLUMN 3 (Center Panel): Learning Area (approx 55% of content area) -->
<section class="flex-1 bg-surface relative overflow-y-auto px-12 py-8 flex flex-col items-center">
<header class="w-full max-w-2xl flex justify-between items-center mb-12">
<div>
<h2 class="text-2xl font-extrabold text-on-surface tracking-tight">Thẻ ghi nhớ</h2>
<p class="text-on-surface-variant/80 font-medium">Chủ đề: Business</p>
</div>
<div class="flex gap-2">
<button class="w-10 h-10 flex items-center justify-center rounded-full bg-surface-container-low hover:bg-surface-container-high transition-colors">
<span class="material-symbols-outlined" data-icon="settings">settings</span>
</button>
</div>
</header>
<!-- THE FLASHCARD STAGE -->
<div class="w-full max-w-2xl flex flex-col items-center gap-10">
<div class="perspective-1000 w-full h-[400px]">
<div class="learning-card relative w-full h-full cursor-pointer shadow-[0px_20px_50px_rgba(0,0,0,0.05)] rounded-[2rem]">
<!-- Card Front -->
<div class="absolute inset-0 bg-surface-container-lowest flex flex-col items-center justify-center p-12 rounded-[2rem] backface-hidden">
<div class="absolute top-8 right-8">
<span class="bg-primary/10 text-primary px-4 py-1.5 rounded-full text-xs font-bold uppercase tracking-widest">Business</span>
</div>
<h4 class="text-6xl font-extrabold text-on-surface mb-4 tracking-tighter">negotiate</h4>
<p class="text-xl text-on-surface-variant font-medium tracking-wide">/nɪˈɡoʊʃieɪt/</p>
<div class="mt-12 opacity-30 flex flex-col items-center">
<span class="material-symbols-outlined text-4xl" data-icon="touch_app">touch_app</span>
<p class="text-xs uppercase mt-2 tracking-widest font-bold">Nhấn để lật thẻ</p>
</div>
</div>
<!-- Card Back (Simplified placeholder for visual structure) -->
<!-- Note: In a real app, this would be shown via JS flip -->
<!-- <div class="absolute inset-0 bg-surface-container-lowest flex flex-col items-center justify-center p-12 rounded-[2rem] backface-hidden [transform:rotateY(180deg)] border-2 border-primary-fixed">
<h4 class="text-2xl font-bold text-on-surface-variant mb-6">Đàm phán, thương lượng</h4>
<p class="text-center italic text-on-surface mb-8">"We need to negotiate a better deal for the company."</p>
</div> -->
</div>
</div>
<!-- CONTROL BUTTONS -->
<div class="flex gap-6 w-full max-w-md">
<button class="flex-1 flex items-center justify-center gap-3 py-4 rounded-2xl bg-surface-container-high text-on-surface-variant font-bold hover:bg-surface-dim transition-all active:scale-95">
<span class="material-symbols-outlined" data-icon="replay">replay</span>
Cần ôn
</button>
<button class="flex-1 flex items-center justify-center gap-3 py-4 rounded-2xl bg-secondary text-on-secondary font-bold hover:opacity-90 shadow-lg shadow-secondary/20 transition-all active:scale-95">
<span class="material-symbols-outlined" data-icon="check_circle">check_circle</span>
Đã thuộc
</button>
</div>
<!-- PROGRESS BAR -->
<div class="w-full max-w-lg mt-4">
<div class="flex justify-between items-end mb-3">
<p class="text-sm font-bold text-on-surface-variant">32/120 từ đã thuộc</p>
<p class="text-2xl font-extrabold text-primary tracking-tighter">27%</p>
</div>
<div class="h-3 w-full bg-surface-container-high rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-primary to-primary-container rounded-full" style="width: 27%"></div>
</div>
</div>
</div>
</section>
<!-- COLUMN 4 (Right Panel): Stats & Activity (approx 25% of content area) -->
<section class="w-80 bg-surface-container-low/30 backdrop-blur-md px-6 py-8 border-l border-outline-variant/10">
<div class="space-y-8">
<!-- Stats Card -->
<div class="bg-surface-container-lowest p-6 rounded-[1.5rem] shadow-sm">
<h3 class="text-sm font-bold text-on-surface-variant uppercase tracking-widest mb-4">Hôm nay</h3>
<div class="space-y-4">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
<span class="material-symbols-outlined text-xl" data-icon="menu_book">menu_book</span>
</div>
<div>
<p class="text-lg font-extrabold text-on-surface leading-none">12</p>
<p class="text-xs text-on-surface-variant font-medium">từ đã học hôm nay</p>
</div>
</div>
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-full bg-secondary/10 flex items-center justify-center text-secondary">
<span class="material-symbols-outlined text-xl" data-icon="task_alt">task_alt</span>
</div>
<div>
<p class="text-lg font-extrabold text-on-surface leading-none">8</p>
<p class="text-xs text-on-surface-variant font-medium">đã thuộc</p>
</div>
</div>
<div class="mt-6 pt-6 border-t border-surface-container-high flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="text-2xl">🔥</span>
<p class="font-bold text-on-surface">5 ngày streak</p>
</div>
<span class="material-symbols-outlined text-tertiary" data-icon="workspace_premium" data-weight="fill" style="font-variation-settings: 'FILL' 1;">workspace_premium</span>
</div>
</div>
</div>
<!-- Recent Activity -->
<div>
<h3 class="text-sm font-bold text-on-surface-variant uppercase tracking-widest mb-4 px-2">Vừa thuộc</h3>
<div class="space-y-3">
<div class="flex items-center gap-4 p-4 bg-surface-container-lowest rounded-2xl hover:bg-surface-container-high transition-all cursor-default">
<div class="w-2 h-2 rounded-full bg-secondary"></div>
<div class="flex-1">
<p class="font-bold text-on-surface">Investment</p>
<p class="text-xs text-on-surface-variant">/ɪnˈvest.mənt/</p>
</div>
<span class="material-symbols-outlined text-secondary text-sm" data-icon="check">check</span>
</div>
<div class="flex items-center gap-4 p-4 bg-surface-container-lowest rounded-2xl hover:bg-surface-container-high transition-all cursor-default">
<div class="w-2 h-2 rounded-full bg-secondary"></div>
<div class="flex-1">
<p class="font-bold text-on-surface">Collaborate</p>
<p class="text-xs text-on-surface-variant">/kəˈlæb.ə.reɪt/</p>
</div>
<span class="material-symbols-outlined text-secondary text-sm" data-icon="check">check</span>
</div>
<div class="flex items-center gap-4 p-4 bg-surface-container-lowest rounded-2xl hover:bg-surface-container-high transition-all cursor-default">
<div class="w-2 h-2 rounded-full bg-secondary"></div>
<div class="flex-1">
<p class="font-bold text-on-surface">Strategic</p>
<p class="text-xs text-on-surface-variant">/strəˈtiː.dʒɪk/</p>
</div>
<span class="material-symbols-outlined text-secondary text-sm" data-icon="check">check</span>
</div>
</div>
</div>
<!-- Mini Map Placeholder / Decoration -->
<div class="relative h-32 rounded-2xl overflow-hidden shadow-inner group">
<img alt="Background decoration" class="w-full h-full object-cover" data-alt="Abstract soft blurred office background with warm lighting and geometric architectural elements" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC1G9ssYWJ42i8Gu3HLN_0ZWDQYvb9e_sWCi1mirt_zwoAz6WLSxjlAUvcVEvhIN-SHShgnyHgtY27hs2N0c2cWhDoQqXdW3kFMJwo7A7ubxOStHpCROC9CN883yDHLh3MNgK3hrBPVT0flL6CWiHYg1rIOiMIFT-rXgrtA38XPhlYyShfWvAcc_Ul0IwSF4hoc3xs2B22rj6fGWFCt9_7v2B8o0DUQ7nVx0mLEdDbRya3XhyE7HyEgQ6ykfGq8-4yOWo0uJb24FSwk"/>
<div class="absolute inset-0 bg-primary/20 backdrop-blur-[2px] flex items-center justify-center p-4">
<p class="text-white text-center text-xs font-bold leading-tight">Môi trường công sở là chủ đề phổ biến nhất trong TOEIC Listening.</p>
</div>
</div>
</div>
</section>
</main>
</div>
</body></html>

BIN
stitch-exports/screen-06-flashcard/design.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

1290
stitch-exports/toeic-app-design.html Normal file
View File

File diff suppressed because it is too large Load Diff