Skip to content

Commit fc8ef9e

Browse files
Razaib-TariqRazaib-Tariq
committed
added some changes to members page
fixed some color grading, added a pop up menu for the undergraduate students.
1 parent 7941780 commit fc8ef9e

6 files changed

Lines changed: 378 additions & 92 deletions

File tree

‎Members.html‎

Lines changed: 48 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -47,15 +47,20 @@ <h5 class="member-header">Masters Students</h5>
4747
</div>
4848
</div>
4949

50-
<!-- Undergraduate Students (Static Call to Action) -->
50+
<!-- Undergraduate Students (Now Dynamic) -->
5151
<div class="member-section-card">
5252
<h5 class="member-header">Undergraduate Students</h5>
53-
<div class="member-card max-w-lg mx-auto">
54-
<img loading="lazy" src="" onerror="this.src=getImg('img/dash_logo/Dashlab_logo.jpg')" alt="DASH Lab Logo" class="member-photo w-24 h-24 mx-auto border-gray-300">
55-
<strong class="text-lg text-gray-800">Interested in joining?</strong>
56-
<p class="text-sm text-gray-600 my-2">A person who can code and has a passion for AI research.</p>
57-
<p class="text-xs font-semibold text-gray-700">Research Focus: Computer Vision, Anomaly Detection, NLP and AI security</p>
58-
<p class="text-xs text-gray-700 mt-2">Contact: undergraduate@g.skku.edu</p>
53+
<div id="ug-students-container" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
54+
<!-- JS Injects Members Here -->
55+
56+
<!-- Recruitment Trigger Card -->
57+
<div id="join-lab-trigger" class="member-card cursor-pointer border-2 border-dashed border-blue-200 bg-blue-50/30 hover:bg-blue-50 hover:border-blue-400 transition-all flex flex-col items-center justify-center p-8 group">
58+
<div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
59+
<i class="fas fa-user-plus text-2xl text-blue-600"></i>
60+
</div>
61+
<strong class="text-blue-700 text-lg">Join the Lab</strong>
62+
<p class="text-[10px] text-gray-400 font-bold uppercase tracking-widest mt-1">Open Positions</p>
63+
</div>
5964
</div>
6065
</div>
6166

@@ -93,10 +98,44 @@ <h5 class="member-header">Alumni</h5>
9398
</tbody>
9499
</table>
95100
</div>
96-
101+
</div>
102+
103+
<!-- RECRUITMENT MODAL -->
104+
<div id="join-modal">
105+
<div class="modal-content relative overflow-hidden">
106+
<button id="close-modal" class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition-colors">
107+
<i class="fas fa-times text-xl"></i>
108+
</button>
109+
110+
<div class="text-center">
111+
<div class="w-20 h-20 bg-gray-50 rounded-full flex items-center justify-center mx-auto mb-6 border border-gray-100 shadow-inner">
112+
<img src="img/dash_logo/Dashlab_logo.jpg" alt="DASH Lab" class="w-12 opacity-80" onerror="this.style.display='none'">
113+
<i class="fas fa-graduation-cap text-blue-500 text-3xl" id="fallback-icon"></i>
114+
</div>
115+
116+
<h2 class="text-2xl font-bold text-gray-800 mb-2">Join DASH Lab</h2>
117+
<p class="text-gray-500 text-sm mb-8 leading-relaxed px-4">We are looking for students who can code and have a deep passion for AI research.</p>
118+
119+
<div class="space-y-4 text-left px-2">
120+
<div class="bg-blue-50 p-4 rounded-xl border border-blue-100">
121+
<p class="text-[10px] font-black text-blue-700 uppercase mb-1 tracking-widest">Research Focus</p>
122+
<p class="text-sm text-blue-900 font-medium leading-tight">Computer Vision, Anomaly Detection, NLP, and AI Security.</p>
123+
</div>
124+
125+
<div class="bg-gray-50 p-4 rounded-xl border border-gray-100">
126+
<p class="text-[10px] font-black text-gray-500 uppercase mb-1 tracking-widest">How to Apply</p>
127+
<p class="text-sm font-bold text-gray-800 mb-1">Email your resume to:</p>
128+
<a href="mailto:undergraduate@g.skku.edu" class="text-blue-600 font-mono text-sm hover:underline">undergraduate@g.skku.edu</a>
129+
</div>
130+
</div>
131+
132+
<button id="modal-confirm" class="w-full mt-8 bg-blue-600 text-white font-bold py-3.5 rounded-xl hover:bg-blue-700 transition-all shadow-lg shadow-blue-200 active:scale-95">
133+
Close Window
134+
</button>
135+
</div>
136+
</div>
97137
</div>
98138

99139
<!-- Footer injected by common.js -->
100-
101140
</body>
102141
</html>

‎_site/Members.html‎

Lines changed: 48 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -47,15 +47,20 @@ <h5 class="member-header">Masters Students</h5>
4747
</div>
4848
</div>
4949

50-
<!-- Undergraduate Students (Static Call to Action) -->
50+
<!-- Undergraduate Students (Now Dynamic) -->
5151
<div class="member-section-card">
5252
<h5 class="member-header">Undergraduate Students</h5>
53-
<div class="member-card max-w-lg mx-auto">
54-
<img loading="lazy" src="" onerror="this.src=getImg('img/dash_logo/Dashlab_logo.jpg')" alt="DASH Lab Logo" class="member-photo w-24 h-24 mx-auto border-gray-300">
55-
<strong class="text-lg text-gray-800">Interested in joining?</strong>
56-
<p class="text-sm text-gray-600 my-2">A person who can code and has a passion for AI research.</p>
57-
<p class="text-xs font-semibold text-gray-700">Research Focus: Computer Vision, Anomaly Detection, NLP and AI security</p>
58-
<p class="text-xs text-gray-700 mt-2">Contact: undergraduate@g.skku.edu</p>
53+
<div id="ug-students-container" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
54+
<!-- JS Injects Members Here -->
55+
56+
<!-- Recruitment Trigger Card -->
57+
<div id="join-lab-trigger" class="member-card cursor-pointer border-2 border-dashed border-blue-200 bg-blue-50/30 hover:bg-blue-50 hover:border-blue-400 transition-all flex flex-col items-center justify-center p-8 group">
58+
<div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform">
59+
<i class="fas fa-user-plus text-2xl text-blue-600"></i>
60+
</div>
61+
<strong class="text-blue-700 text-lg">Join the Lab</strong>
62+
<p class="text-[10px] text-gray-400 font-bold uppercase tracking-widest mt-1">Open Positions</p>
63+
</div>
5964
</div>
6065
</div>
6166

@@ -93,10 +98,44 @@ <h5 class="member-header">Alumni</h5>
9398
</tbody>
9499
</table>
95100
</div>
96-
101+
</div>
102+
103+
<!-- RECRUITMENT MODAL -->
104+
<div id="join-modal">
105+
<div class="modal-content relative overflow-hidden">
106+
<button id="close-modal" class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition-colors">
107+
<i class="fas fa-times text-xl"></i>
108+
</button>
109+
110+
<div class="text-center">
111+
<div class="w-20 h-20 bg-gray-50 rounded-full flex items-center justify-center mx-auto mb-6 border border-gray-100 shadow-inner">
112+
<img src="img/dash_logo/Dashlab_logo.jpg" alt="DASH Lab" class="w-12 opacity-80" onerror="this.style.display='none'">
113+
<i class="fas fa-graduation-cap text-blue-500 text-3xl" id="fallback-icon"></i>
114+
</div>
115+
116+
<h2 class="text-2xl font-bold text-gray-800 mb-2">Join DASH Lab</h2>
117+
<p class="text-gray-500 text-sm mb-8 leading-relaxed px-4">We are looking for students who can code and have a deep passion for AI research.</p>
118+
119+
<div class="space-y-4 text-left px-2">
120+
<div class="bg-blue-50 p-4 rounded-xl border border-blue-100">
121+
<p class="text-[10px] font-black text-blue-700 uppercase mb-1 tracking-widest">Research Focus</p>
122+
<p class="text-sm text-blue-900 font-medium leading-tight">Computer Vision, Anomaly Detection, NLP, and AI Security.</p>
123+
</div>
124+
125+
<div class="bg-gray-50 p-4 rounded-xl border border-gray-100">
126+
<p class="text-[10px] font-black text-gray-500 uppercase mb-1 tracking-widest">How to Apply</p>
127+
<p class="text-sm font-bold text-gray-800 mb-1">Email your resume to:</p>
128+
<a href="mailto:undergraduate@g.skku.edu" class="text-blue-600 font-mono text-sm hover:underline">undergraduate@g.skku.edu</a>
129+
</div>
130+
</div>
131+
132+
<button id="modal-confirm" class="w-full mt-8 bg-blue-600 text-white font-bold py-3.5 rounded-xl hover:bg-blue-700 transition-all shadow-lg shadow-blue-200 active:scale-95">
133+
Close Window
134+
</button>
135+
</div>
136+
</div>
97137
</div>
98138

99139
<!-- Footer injected by common.js -->
100-
101140
</body>
102141
</html>

‎_site/css/style.css‎

Lines changed: 62 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -352,44 +352,55 @@ img, video {
352352

353353

354354
/* ==========================================================================
355-
6. MEMBERS PAGE (Responsive Tables)
355+
6. MEMBERS PAGE Styles
356356
========================================================================== */
357-
.member-photo { width: 128px; height: 128px; object-fit: cover; border-radius: 50%; border: 3px solid #1976d2; margin-bottom: 0.5rem; }
358357

359-
/* Member Card Styles */
358+
.member-photo {
359+
width: 128px;
360+
height: 128px;
361+
object-fit: cover;
362+
border-radius: 50%;
363+
border: 3px solid #1976d2;
364+
margin-bottom: 0.5rem;
365+
}
366+
360367
.member-card {
361368
background-color: #ffffff;
362-
border-radius: 8px;
369+
border-radius: 12px;
363370
box-shadow: 0 1px 4px rgba(0,0,0,0.05);
364371
padding: 1.5rem;
365372
text-align: center;
366-
transition: all 0.3s ease;
367-
border: 1px solid transparent;
373+
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
374+
border: 1px solid #f0f0f0;
368375
height: 100%;
369376
display: flex;
370377
flex-direction: column;
371378
justify-content: space-between;
372379
}
373380

374-
/* Added glowing animation to member cards on hover */
381+
@keyframes glowing {
382+
0% { box-shadow: 0 0 5px rgba(165, 180, 252, 0.4); border-color: #a5b4fc; }
383+
100% { box-shadow: 0 0 15px rgba(165, 180, 252, 0.7); border-color: #6366f1; }
384+
}
385+
375386
.member-card:hover {
376-
transform: translateY(-5px);
387+
transform: translateY(-8px);
377388
animation: glowing 1.5s infinite alternate ease-in-out;
378-
border-color: #a5b4fc;
379-
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
389+
z-index: 10;
380390
}
381391

382392
.alumni-table table { width: 100%; border-collapse: collapse; }
383-
.alumni-table th, .alumni-table td { padding: 12px 8px; text-align: left; border-bottom: 1px solid #e5e7eb; font-size: 0.95rem; vertical-align: top; }
393+
.alumni-table th, .alumni-table td { padding: 12px 8px; text-align: left; border-bottom: 1px solid #e5e7eb; font-size: 0.95rem; }
384394
.alumni-table th { background-color: #f3f4f6; font-weight: 700; color: #374151; }
395+
385396
@media (max-width: 768px) {
386-
.alumni-table table, .alumni-table thead, .alumni-table tbody, .alumni-table th, .alumni-table td, .alumni-table tr { display: block; width: 100%; }
397+
.alumni-table table, .alumni-table thead, .alumni-table tbody, .alumni-table th, .alumni-table td, .alumni-table tr { display: block; }
387398
.alumni-table thead tr { position: absolute; top: -9999px; left: -9999px; }
388-
.alumni-table tr { margin-bottom: 1.5rem; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; padding: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
389-
.alumni-table td { border: none; position: relative; padding-left: 0; text-align: left; word-wrap: break-word; padding-bottom: 8px; }
390-
.alumni-table td:before { content: attr(data-label); font-weight: bold; color: #1976d2; display: block; margin-bottom: 4px; font-size: 0.85rem; }
399+
.alumni-table tr { margin-bottom: 1rem; border: 1px solid #eee; border-radius: 8px; padding: 10px; }
400+
.alumni-table td:before { content: attr(data-label); font-weight: bold; color: #1976d2; display: block; margin-bottom: 2px; font-size: 0.75rem; }
391401
}
392402

403+
393404
/* ==========================================================================
394405
7. PROJECTS PAGE
395406
========================================================================== */
@@ -768,4 +779,40 @@ input:checked + .slider:before { transform: translateX(26px); }
768779
.btn-danger:hover {
769780
background-color: #fee2e2;
770781
transform: translateY(-1px);
782+
}
783+
784+
/* ==========================================================================
785+
13. MODAL & RECRUITMENT UI -- undergraduate Members
786+
========================================================================== */
787+
788+
#join-modal {
789+
position: fixed;
790+
inset: 0;
791+
background-color: rgba(0, 30, 60, 0.8);
792+
backdrop-filter: blur(8px);
793+
display: none;
794+
justify-content: center;
795+
align-items: center;
796+
z-index: 10000;
797+
padding: 20px;
798+
}
799+
800+
#join-modal.active { display: flex; }
801+
802+
.modal-content {
803+
background: white;
804+
padding: 2.5rem;
805+
border-radius: 24px;
806+
max-width: 500px;
807+
width: 100%;
808+
position: relative;
809+
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
810+
transform: scale(0.9);
811+
opacity: 0;
812+
transition: all 0.3s ease;
813+
}
814+
815+
#join-modal.active .modal-content {
816+
transform: scale(1);
817+
opacity: 1;
771818
}

0 commit comments

Comments
 (0)