phase 2
This commit is contained in:
64
stitch-exports/screen-04-results/DESIGN.md
Normal file
64
stitch-exports/screen-04-results/DESIGN.md
Normal 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
317
stitch-exports/screen-04-results/design.html
Normal 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&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&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&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
BIN
stitch-exports/screen-04-results/design.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
Reference in New Issue
Block a user