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

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