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

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