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

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>