1+ <!DOCTYPE html>
2+ < html lang ="en ">
3+
4+ < head >
5+ < meta charset ="UTF-8 ">
6+ < meta name ="viewport " content ="width=device-width, initial-scale=1.0 ">
7+ < title > Lịch sử câu hỏi - UniChat</ title >
8+ < script src ="https://cdn.tailwindcss.com "> </ script >
9+ < script src ="https://unpkg.com/@phosphor-icons/web "> </ script >
10+ < style >
11+ @import url ('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700&display=swap' );
12+
13+ : root {
14+ --primary : # 4F46E5 ;
15+ }
16+
17+ body {
18+ font-family : 'Be Vietnam Pro' , sans-serif;
19+ background-color : # f8fafc ;
20+ }
21+
22+ .glass-panel {
23+ background : rgba (255 , 255 , 255 , 0.8 );
24+ backdrop-filter : blur (12px );
25+ border-right : 1px solid rgba (255 , 255 , 255 , 0.5 );
26+ }
27+ </ style >
28+ </ head >
29+
30+ < body
31+ class ="text-slate-700 h-screen flex overflow-hidden bg-[url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop')] bg-cover bg-center ">
32+
33+ <!-- Privacy Layer -->
34+ < div class ="absolute inset-0 bg-slate-50/95 z-0 "> </ div >
35+
36+ <!-- SIDEBAR -->
37+ < aside class ="w-64 glass-panel h-full relative z-20 hidden md:flex transition-all duration-300 " id ="sidebar ">
38+ <!-- Loaded via JS -->
39+ </ aside >
40+
41+ <!-- CONTENT -->
42+ < div class ="flex-1 flex flex-col h-full relative z-10 overflow-hidden ">
43+ <!-- Header -->
44+ < header
45+ class ="h-16 border-b border-slate-200 bg-white/50 backdrop-blur flex items-center justify-between px-6 shrink-0 ">
46+ < h1 class ="text-xl font-bold text-slate-800 flex items-center gap-2 ">
47+ < i class ="ph-fill ph-clock-counter-clockwise text-indigo-600 "> </ i > Lịch sử câu hỏi
48+ </ h1 >
49+ < div class ="flex items-center gap-4 ">
50+ < div class ="relative ">
51+ < i class ="ph ph-magnifying-glass absolute left-3 top-2.5 text-slate-400 "> </ i >
52+ < input type ="text " placeholder ="Tìm kiếm lịch sử... "
53+ class ="pl-10 pr-4 py-2 bg-white border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/50 w-64 ">
54+ </ div >
55+ </ div >
56+ </ header >
57+
58+ <!-- Main Content -->
59+ < main class ="flex-1 overflow-y-auto p-6 ">
60+ < div class ="max-w-4xl mx-auto space-y-6 ">
61+
62+ <!-- Month Group -->
63+ < div >
64+ < h3 class ="text-xs font-bold text-slate-400 uppercase tracking-wider mb-3 px-2 "> Tháng 12, 2024</ h3 >
65+ < div class ="bg-white/60 backdrop-blur border border-slate-200 rounded-xl overflow-hidden shadow-sm ">
66+
67+ <!-- Item 1 -->
68+ < div class ="p-4 border-b border-slate-100 hover:bg-white transition cursor-pointer group ">
69+ < div class ="flex justify-between items-start mb-1 ">
70+ < h4 class ="font-medium text-slate-700 group-hover:text-indigo-600 transition "> Cách đăng
71+ ký tín chỉ học phần GDTC?</ h4 >
72+ < span class ="text-xs text-slate-400 "> 20/12/2024</ span >
73+ </ div >
74+ < p class ="text-sm text-slate-500 line-clamp-2 "> Để đăng ký tín chỉ học phần Giáo dục thể
75+ chất, sinh viên cần truy cập vào cổng thông tin đào tạo, chọn mục Đăng ký học phần...
76+ </ p >
77+ </ div >
78+
79+ <!-- Item 2 -->
80+ < div class ="p-4 border-b border-slate-100 hover:bg-white transition cursor-pointer group ">
81+ < div class ="flex justify-between items-start mb-1 ">
82+ < h4 class ="font-medium text-slate-700 group-hover:text-indigo-600 transition "> Quy định
83+ về xét học bổng khuyến khích?</ h4 >
84+ < span class ="text-xs text-slate-400 "> 18/12/2024</ span >
85+ </ div >
86+ < p class ="text-sm text-slate-500 line-clamp-2 "> Học bổng khuyến khích học tập được xét dựa
87+ trên kết quả học tập và rèn luyện của sinh viên trong từng kỳ học...</ p >
88+ </ div >
89+
90+ <!-- Item 3 -->
91+ < div class ="p-4 hover:bg-white transition cursor-pointer group ">
92+ < div class ="flex justify-between items-start mb-1 ">
93+ < h4 class ="font-medium text-slate-700 group-hover:text-indigo-600 transition "> Lịch thi
94+ cuối kỳ I năm học 2024-2025</ h4 >
95+ < span class ="text-xs text-slate-400 "> 15/12/2024</ span >
96+ </ div >
97+ < p class ="text-sm text-slate-500 line-clamp-2 "> Lịch thi dự kiến đã được công bố trên website
98+ của Phòng Đào Tạo. Sinh viên lưu ý theo dõi để không bỏ lỡ...</ p >
99+ </ div >
100+ </ div >
101+ </ div >
102+
103+ <!-- Month Group -->
104+ < div >
105+ < h3 class ="text-xs font-bold text-slate-400 uppercase tracking-wider mb-3 px-2 "> Tháng 11, 2024</ h3 >
106+ < div class ="bg-white/60 backdrop-blur border border-slate-200 rounded-xl overflow-hidden shadow-sm ">
107+ <!-- Item 4 -->
108+ < div class ="p-4 hover:bg-white transition cursor-pointer group ">
109+ < div class ="flex justify-between items-start mb-1 ">
110+ < h4 class ="font-medium text-slate-700 group-hover:text-indigo-600 transition "> Thủ tục
111+ xin cấp lại thẻ sinh viên</ h4 >
112+ < span class ="text-xs text-slate-400 "> 28/11/2024</ span >
113+ </ div >
114+ < p class ="text-sm text-slate-500 line-clamp-2 "> Sinh viên cần làm đơn xin cấp lại thẻ (theo
115+ mẫu) và nộp tại Phòng Công tác Sinh viên (C1-102)...</ p >
116+ </ div >
117+ </ div >
118+ </ div >
119+
120+ </ div >
121+ </ main >
122+ </ div >
123+
124+ < script >
125+ document . addEventListener ( 'DOMContentLoaded' , ( ) => {
126+ loadSidebar ( ) ;
127+ } ) ;
128+
129+ async function loadSidebar ( ) {
130+ try {
131+ const response = await fetch ( 'components/sidebar.html' ) ;
132+ const html = await response . text ( ) ;
133+ const container = document . getElementById ( 'sidebar' ) ;
134+ container . innerHTML = html ;
135+
136+ // Highlight active link
137+ const navLinks = container . querySelectorAll ( 'nav a' ) ;
138+ // History is 3rd link (index 2)
139+ if ( navLinks [ 2 ] ) {
140+ navLinks [ 2 ] . classList . remove ( 'text-slate-500' , 'hover:bg-white/40' ) ;
141+ navLinks [ 2 ] . classList . add ( 'bg-white/50' , 'text-indigo-700' , 'font-semibold' , 'shadow-sm' , 'border' , 'border-white/50' ) ;
142+ }
143+ } catch ( error ) {
144+ console . error ( "Failed to load sidebar" , error ) ;
145+ }
146+ }
147+
148+ function resetHome ( ) {
149+ window . location . href = 'index.html' ;
150+ }
151+ function toggleSidebar ( ) { }
152+ </ script >
153+ </ body >
154+
155+ </ html >
0 commit comments