270 lines
17 KiB
HTML
270 lines
17 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"/>
|
|
<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": {
|
|
"background": "#f7f9fb",
|
|
"on-secondary-fixed-variant": "#31447b",
|
|
"on-tertiary-fixed-variant": "#7d2d00",
|
|
"on-background": "#191c1e",
|
|
"tertiary": "#943700",
|
|
"on-surface-variant": "#434655",
|
|
"surface-variant": "#e0e3e5",
|
|
"surface-bright": "#f7f9fb",
|
|
"secondary": "#495c95",
|
|
"tertiary-container": "#bc4800",
|
|
"inverse-on-surface": "#eff1f3",
|
|
"on-error-container": "#93000a",
|
|
"error-container": "#ffdad6",
|
|
"on-tertiary-fixed": "#360f00",
|
|
"secondary-fixed": "#dbe1ff",
|
|
"surface": "#f7f9fb",
|
|
"surface-dim": "#d8dadc",
|
|
"on-primary": "#ffffff",
|
|
"on-primary-fixed": "#00174b",
|
|
"surface-container-highest": "#e0e3e5",
|
|
"tertiary-fixed": "#ffdbcd",
|
|
"on-secondary-fixed": "#00174b",
|
|
"primary-fixed": "#dbe1ff",
|
|
"secondary-container": "#acbfff",
|
|
"on-primary-container": "#eeefff",
|
|
"secondary-fixed-dim": "#b4c5ff",
|
|
"primary-container": "#2563eb",
|
|
"tertiary-fixed-dim": "#ffb596",
|
|
"surface-container": "#eceef0",
|
|
"inverse-primary": "#b4c5ff",
|
|
"outline-variant": "#c3c6d7",
|
|
"inverse-surface": "#2d3133",
|
|
"on-error": "#ffffff",
|
|
"on-tertiary-container": "#ffede6",
|
|
"on-primary-fixed-variant": "#003ea8",
|
|
"outline": "#737686",
|
|
"on-surface": "#191c1e",
|
|
"error": "#ba1a1a",
|
|
"primary-fixed-dim": "#b4c5ff",
|
|
"surface-container-low": "#f2f4f6",
|
|
"on-tertiary": "#ffffff",
|
|
"on-secondary": "#ffffff",
|
|
"surface-container-lowest": "#ffffff",
|
|
"surface-tint": "#0053db",
|
|
"on-secondary-container": "#394c84",
|
|
"surface-container-high": "#e6e8ea",
|
|
"primary": "#004ac6"
|
|
},
|
|
"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>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
body { font-family: 'Plus Jakarta Sans', sans-serif; }
|
|
.glass-panel {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
backdrop-filter: blur(12px);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-surface">
|
|
<!-- SideNavBar Shell -->
|
|
<nav class="h-screen w-64 fixed left-0 top-0 bg-slate-50 dark:bg-slate-900 flex flex-col py-8 px-4 z-50">
|
|
<div class="mb-10 px-2">
|
|
<h1 class="text-xl font-bold text-blue-800 dark:text-blue-300">The Academic Curator</h1>
|
|
<p class="text-xs text-slate-500 font-medium">TOEIC Excellence</p>
|
|
</div>
|
|
<div class="flex-1 space-y-1">
|
|
<!-- Home -->
|
|
<a class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-colors text-slate-500 dark:text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/10" href="#">
|
|
<span class="material-symbols-outlined" data-icon="home">home</span>
|
|
<span class="font-['Plus_Jakarta_Sans'] text-sm font-medium">Home</span>
|
|
</a>
|
|
<!-- Luyện đề TOEIC -->
|
|
<a class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-colors text-slate-500 dark:text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/10" href="#">
|
|
<span class="material-symbols-outlined" data-icon="assignment">assignment</span>
|
|
<span class="font-['Plus_Jakarta_Sans'] text-sm font-medium">Luyện đề TOEIC</span>
|
|
</a>
|
|
<!-- AI Writing (Active) -->
|
|
<a class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all text-blue-700 dark:text-blue-400 font-bold border-l-4 border-blue-600 bg-blue-50/50 dark:bg-blue-900/20 scale-95 active:scale-100" href="#">
|
|
<span class="material-symbols-outlined" data-icon="psychology" style="font-variation-settings: 'FILL' 1;">psychology</span>
|
|
<span class="font-['Plus_Jakarta_Sans'] text-sm">AI Writing</span>
|
|
</a>
|
|
<!-- Từ vựng -->
|
|
<a class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-colors text-slate-500 dark:text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/10" href="#">
|
|
<span class="material-symbols-outlined" data-icon="import_contacts">import_contacts</span>
|
|
<span class="font-['Plus_Jakarta_Sans'] text-sm font-medium">Từ vựng</span>
|
|
</a>
|
|
<!-- Thống kê -->
|
|
<a class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-colors text-slate-500 dark:text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/10" href="#">
|
|
<span class="material-symbols-outlined" data-icon="leaderboard">leaderboard</span>
|
|
<span class="font-['Plus_Jakarta_Sans'] text-sm font-medium">Thống kê</span>
|
|
</a>
|
|
<!-- Cài đặt -->
|
|
<a class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-colors text-slate-500 dark:text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/10" href="#">
|
|
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
|
<span class="font-['Plus_Jakarta_Sans'] text-sm font-medium">Cài đặt</span>
|
|
</a>
|
|
</div>
|
|
<div class="mt-auto pt-6 border-t border-slate-200/50">
|
|
<div class="flex items-center gap-3 px-2">
|
|
<img alt="User profile" class="w-10 h-10 rounded-full object-cover shadow-sm" data-alt="portrait of a focused professional educator in a modern minimalist workspace with soft natural light" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCBGJa9dqnqfCoSP3DnEBHZWiMjwQOrkpsRvcwJWI7QFsx8kWAo-lQIzWe-kmZ1GL5O2B-vpgP_553qR6BqIaP47vjJkV4ALIViC4OGx2K_KoKBalv7F3roDGt5aVif_4WP7jclzptL1D_gVJmPd5CQ9ebgT3NZow6NZR7XWSZojSCdHK9jANs0hp8tE_sVQF-l_q8UnHtn_F5BVK4VOwqahUFDMJBByGV6EJgVQ9XBiSaSZ7btDWo6dJtp1ybq522mgg6v6QaSYRp5"/>
|
|
<div>
|
|
<p class="text-sm font-bold">Minh Nguyen</p>
|
|
<p class="text-xs text-slate-500">Premium Member</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<!-- TopNavBar Shell -->
|
|
<header class="fixed top-0 right-0 w-[calc(100%-16rem)] h-16 bg-white/80 backdrop-blur-md flex items-center justify-between px-8 z-40 shadow-sm">
|
|
<div class="flex items-center bg-slate-50 px-4 py-2 rounded-full w-96 transition-all focus-within:ring-2 focus-within:ring-blue-500/20">
|
|
<span class="material-symbols-outlined text-slate-400 mr-2" data-icon="search">search</span>
|
|
<input class="bg-transparent border-none focus:ring-0 text-sm w-full font-['Plus_Jakarta_Sans']" placeholder="Search curated resources..." type="text"/>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<button class="w-10 h-10 flex items-center justify-center rounded-full text-slate-600 hover:bg-slate-100 transition-colors">
|
|
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
|
</button>
|
|
<div class="h-8 w-[1px] bg-slate-200"></div>
|
|
<button class="flex items-center gap-2 px-3 py-1.5 rounded-full hover:bg-slate-100 transition-colors">
|
|
<span class="text-sm font-medium text-slate-700">Profile</span>
|
|
<img alt="User profile picture" class="w-8 h-8 rounded-full border-2 border-white shadow-sm" data-alt="Close up portrait of a young adult looking smart and friendly with a clear bokeh background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCzsEHQ5y1Iklb3kYquyn5Qm5QX6Ax5p8XeIAGucP2QSjMj6zyAcQkG15xhsHzTSpLfdEoriLVa3q17pxFr7zl9J-HKLyvYdyoS67l3D1gdxgsDoWxZJIK9ypUc4VhZQ-u72zQEJxdbKeCeRgX3eFxOEFcQg5cBEAAR1FCCrHD0LAzCJzWNaniEmlkXLupTiY9i4HxkYr_bzXhtN72yqXFrz0qAYgDqHZiZGMiNDJJq0xBoi4u6Fi3KjSWmqAjCkV5U0VTMJtjJPeis"/>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<!-- Main Content Canvas -->
|
|
<main class="ml-64 pt-24 pb-12 px-10 min-h-screen">
|
|
<div class="max-w-7xl mx-auto">
|
|
<header class="mb-8">
|
|
<h2 class="text-3xl font-extrabold text-on-surface tracking-tight font-headline">AI Writing Checker</h2>
|
|
<p class="text-slate-500 mt-1 body-lg">Submit your essay for an immediate academic evaluation and feedback.</p>
|
|
</header>
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
|
|
<!-- LEFT COLUMN: Input Area -->
|
|
<section class="space-y-6">
|
|
<div class="relative rounded-xl overflow-hidden shadow-sm bg-surface-container-low transition-all focus-within:bg-surface-container-lowest">
|
|
<div class="absolute left-0 top-0 bottom-0 w-1 bg-primary opacity-0 focus-within:opacity-100 transition-opacity"></div>
|
|
<textarea class="w-full h-[600px] p-8 bg-transparent border-none focus:ring-0 resize-none font-body text-lg leading-relaxed text-on-surface" placeholder="Type or paste your English paragraph here...">The most serious problem in urban cities is pollution. In my opinion, government must take action to reduce carbon emission from cars. People should used public transportations more often to protect the environment. Also, building more parks can helps city becoming more green. If we doesn't change our behavior, the planet will suffer a lot of damages in the future.</textarea>
|
|
<div class="absolute bottom-6 right-8 text-slate-400 font-label text-sm bg-white/50 backdrop-blur px-3 py-1 rounded-full">
|
|
245/500 characters
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col items-center gap-4">
|
|
<button class="w-full py-4 px-8 bg-gradient-to-r from-primary to-primary-container text-white font-bold text-lg rounded-full transition-transform active:scale-95 shadow-lg shadow-blue-500/20">
|
|
Chấm bài ngay
|
|
</button>
|
|
<div class="flex items-center gap-2 px-4 py-1.5 bg-secondary-fixed/30 text-blue-800 rounded-full text-sm font-semibold">
|
|
<span class="material-symbols-outlined text-sm" data-icon="bolt">bolt</span>
|
|
Còn 2/3 lượt hôm nay
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- RIGHT COLUMN: Feedback Panel -->
|
|
<aside class="space-y-6">
|
|
<!-- Band Score Badge -->
|
|
<div class="bg-surface-container-lowest p-8 rounded-xl flex items-center justify-between shadow-sm border border-outline-variant/10">
|
|
<div>
|
|
<h3 class="text-slate-500 font-label uppercase tracking-widest text-xs mb-1">Overall Band Score</h3>
|
|
<p class="text-on-surface font-headline font-bold text-xl">Academic Performance</p>
|
|
</div>
|
|
<div class="relative flex items-center justify-center">
|
|
<div class="absolute inset-0 bg-primary/10 rounded-full animate-pulse"></div>
|
|
<div class="w-20 h-20 bg-primary text-white rounded-full flex items-center justify-center text-3xl font-extrabold shadow-inner relative z-10">
|
|
6.5
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Feedback Sections -->
|
|
<div class="space-y-4">
|
|
<!-- Ngữ pháp (Error) -->
|
|
<div class="bg-error-container/20 border-l-4 border-error rounded-r-xl p-5 transition-all hover:bg-error-container/30">
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<span class="material-symbols-outlined text-error" data-icon="error">error</span>
|
|
<h4 class="font-headline font-bold text-error">Ngữ pháp</h4>
|
|
</div>
|
|
<ul class="space-y-3">
|
|
<li class="flex gap-3 text-sm text-on-surface-variant">
|
|
<span class="text-error mt-1">•</span>
|
|
<span>Lỗi thì quá khứ: "People should <strong>used</strong>" -> "People should <strong>use</strong>" (Sau modal verb dùng V-inf).</span>
|
|
</li>
|
|
<li class="flex gap-3 text-sm text-on-surface-variant">
|
|
<span class="text-error mt-1">•</span>
|
|
<span>Chia động từ ngôi thứ 3: "parks can <strong>helps</strong>" -> "parks can <strong>help</strong>".</span>
|
|
</li>
|
|
<li class="flex gap-3 text-sm text-on-surface-variant">
|
|
<span class="text-error mt-1">•</span>
|
|
<span>Hòa hợp chủ vị: "If we <strong>doesn't</strong>" -> "If we <strong>don't</strong>".</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- Từ vựng (Warning) -->
|
|
<div class="bg-amber-50 border-l-4 border-[#D97706] rounded-r-xl p-5 transition-all hover:bg-amber-100/50">
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<span class="material-symbols-outlined text-[#D97706]" data-icon="history_edu">history_edu</span>
|
|
<h4 class="font-headline font-bold text-[#D97706]">Từ vựng</h4>
|
|
</div>
|
|
<p class="text-sm text-on-surface-variant leading-relaxed">
|
|
Từ vựng còn khá đơn giản. Nên thay <strong>"most serious problem"</strong> bằng <strong>"pressing issue"</strong> hoặc <strong>"pivotal challenge"</strong>. Sử dụng thêm các từ chuyên ngành về môi trường như <strong>"carbon footprint"</strong> thay vì "carbon emission".
|
|
</p>
|
|
</div>
|
|
<!-- Cấu trúc bài (Primary) -->
|
|
<div class="bg-blue-50 border-l-4 border-primary-container rounded-r-xl p-5 transition-all hover:bg-blue-100/50">
|
|
<div class="flex items-center gap-2 mb-3">
|
|
<span class="material-symbols-outlined text-primary-container" data-icon="account_tree">account_tree</span>
|
|
<h4 class="font-headline font-bold text-primary-container">Cấu trúc bài</h4>
|
|
</div>
|
|
<p class="text-sm text-on-surface-variant leading-relaxed">
|
|
Bài viết có cấu trúc rõ ràng nhưng thiếu các từ nối (linking words). Nên bổ sung các cụm như <strong>"Consequently"</strong>, <strong>"Furthermore"</strong> hoặc <strong>"In addition to"</strong> để tăng tính gắn kết giữa các câu.
|
|
</p>
|
|
</div>
|
|
<!-- Bài viết cải thiện (Collapsible/Success) -->
|
|
<div class="bg-green-50 border-l-4 border-[#16A34A] rounded-r-xl overflow-hidden transition-all group">
|
|
<button class="w-full flex items-center justify-between p-5 text-left focus:outline-none">
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-[#16A34A]" data-icon="auto_fix_high" style="font-variation-settings: 'FILL' 1;">auto_fix_high</span>
|
|
<h4 class="font-headline font-bold text-[#16A34A]">Bài viết cải thiện</h4>
|
|
</div>
|
|
<span class="material-symbols-outlined text-[#16A34A] transition-transform group-hover:translate-y-0.5" data-icon="keyboard_arrow_down">keyboard_arrow_down</span>
|
|
</button>
|
|
<div class="px-5 pb-5">
|
|
<div class="p-4 bg-white/60 rounded-lg text-sm text-slate-700 italic leading-relaxed border border-green-100">
|
|
"One of the most pressing issues in modern urban areas is pollution. In my perspective, the government must take decisive actions to minimize carbon footprints. Furthermore, citizens should utilize public transportation more frequently to preserve the ecosystem. Enhancing urban greenery by developing more parks is also vital. Unless we transform our behavioral patterns, the planet will encounter irreversible environmental damage in the near future."
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Decorative Background Image -->
|
|
<div class="relative h-48 rounded-xl overflow-hidden mt-8">
|
|
<img alt="Academic study aesthetic" class="w-full h-full object-cover grayscale opacity-30 mix-blend-overlay" data-alt="close up of an open classic book with elegant typography on cream paper with soft focused library background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC9rNsXf29TWRCykkBS1mMY4_3RVznchVnsmuWVpykDYOlBZZ_KRSfxZsOH4qqfVRE3lkz2ilQOgkwO9Zq2qGmt_ErYzYNGP8eyzUmOCRV523QeZM_PF91ic3hGSHrUzJ8_c48vy7PbbjdvyKls1NVKGk7BNrMGQmCXD5XTOVcDuJL4pHN1kKK5LRIt_2Igj0kt6-s9WBIthc9dnCiE8lQOCNJE7SEjxiXre_-_nq-A0ly5DaKji7ScKU5Sky6YgDIO19i0qkbEklWh"/>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-background to-transparent"></div>
|
|
<div class="absolute bottom-4 left-4">
|
|
<span class="text-xs font-bold uppercase tracking-widest text-slate-400">Curated Insights</span>
|
|
<p class="text-sm font-medium text-slate-600">Writing accuracy increased by 15% this week.</p>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</body></html> |