317 lines
18 KiB
HTML
317 lines
18 KiB
HTML
<!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&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 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> |