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

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>