Skip to content

Commit 0a01cc3

Browse files
kevincojShenranChen
kevincoj
and
ShenranChen
authored
Facial recognition timeline (#145)
* Update About Us page and learning labs info * fixed typos * Facial Recognition Interactive Timeline --------- Co-authored-by: ShenranChen <[email protected]>
1 parent 91bfba3 commit 0a01cc3

File tree

3 files changed

+466
-2
lines changed

3 files changed

+466
-2
lines changed

‎website/src/caseStudies/FacialRecognition.js‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import "../main.css";
33
import teachLogo from "../assets/teachla-logo.svg";
44
import PostsList from "../components/mainContent/PostsList";
55
import CounterFrame from "../components/posts/FacialRecognition/CounterFrame";
6+
import Timeline from "../components/posts/FacialRecognition/Timeline";
67
import AccuracyChart from "../components/posts/FacialRecognition/AccuracyChart";
78
import { VisibilityProvider } from "../components/mainContent/commonLogic";
89

@@ -106,11 +107,25 @@ const FacialRecognitionInfo = [
106107
],
107108
},
108109
},
109-
110+
110111
{
111112
post: {
112113
profilePic: teachLogo,
113114
profilePicName: "Profile Picture - Frame 3",
115+
header: "Facial Recognition Timeline",
116+
subheader: "Interactive Timeline",
117+
bodyText: [
118+
{
119+
body: <Timeline />,
120+
},
121+
],
122+
},
123+
},
124+
125+
{
126+
post: {
127+
profilePic: teachLogo,
128+
profilePicName: "Profile Picture - Frame 3b",
114129
header: "Accuracy of Face Recognition Technologies",
115130
subheader: "Hover to See Group Performance",
116131
bodyText: [
@@ -119,7 +134,7 @@ const FacialRecognitionInfo = [
119134
},
120135
],
121136
},
122-
},
137+
},
123138

124139
{
125140
post: {

‎website/src/components/posts/FacialRecognition/Timeline.css‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
.timeline-content {
2+
background: white;
3+
padding: 48px 32px 60px;
4+
}
5+
6+
.timeline-main-title {
7+
text-align: center;
8+
font-size: 36px;
9+
color: #000;
10+
margin: 0 0 48px;
11+
font-weight: 700;
12+
}
13+
14+
.timeline-wrapper-inner {
15+
position: relative;
16+
max-width: 600px;
17+
margin: 0 auto;
18+
}
19+
20+
.timeline-lines {
21+
position: absolute;
22+
top: 0;
23+
left: 0;
24+
width: 100%;
25+
height: 100%;
26+
pointer-events: none;
27+
z-index: 1;
28+
overflow: visible;
29+
}
30+
31+
.line-unvisited {
32+
stroke: #d0d0d0;
33+
stroke-width: 2;
34+
transition: all 0.3s ease;
35+
}
36+
37+
.line-visited {
38+
stroke: #677ee6;
39+
stroke-width: 4;
40+
transition: all 0.3s ease;
41+
}
42+
43+
.timeline-container {
44+
display: grid;
45+
grid-template-columns: repeat(3, 1fr);
46+
gap: 48px 60px;
47+
position: relative;
48+
z-index: 2;
49+
}
50+
51+
.timeline-event {
52+
display: flex;
53+
flex-direction: column;
54+
align-items: center;
55+
cursor: pointer;
56+
}
57+
58+
.event-circle {
59+
width: 50px;
60+
height: 50px;
61+
border-radius: 50%;
62+
background: #e0e0e0;
63+
box-shadow: 0 3px 10px rgb(0 0 0 / 10%), 0 0 0 1px #d0d0d0;
64+
transition: all 0.3s ease;
65+
border: 4px solid white;
66+
}
67+
68+
.timeline-event:hover .event-circle {
69+
box-shadow: 0 5px 18px rgb(91 107 192 / 50%), 0 0 0 1px #6B7FDB;
70+
transform: scale(1.1);
71+
}
72+
73+
.event-circle.visited {
74+
background: linear-gradient(135deg, #6B7FDB 0%, #5C6BC0 100%);
75+
box-shadow: 0 3px 10px rgb(91 107 192 / 30%), 0 0 0 1px #6B7FDB;
76+
}
77+
78+
.event-info {
79+
margin-top: 12px;
80+
text-align: center;
81+
position: relative;
82+
z-index: 3;
83+
}
84+
85+
.event-label {
86+
background: white;
87+
padding: 8px 12px;
88+
border-radius: 8px;
89+
display: inline-block;
90+
box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
91+
}
92+
93+
.event-title {
94+
font-size: 14px;
95+
font-weight: 700;
96+
color: #000;
97+
margin-bottom: 2px;
98+
}
99+
100+
.event-date {
101+
font-size: 12px;
102+
font-weight: 600;
103+
color: #6B7FDB;
104+
}
105+
106+
107+
/* Modal Styles */
108+
.modal-overlay {
109+
position: fixed;
110+
inset: 0;
111+
background-color: rgb(0 0 0 / 60%);
112+
display: flex;
113+
align-items: center;
114+
justify-content: center;
115+
z-index: 1000;
116+
animation: fade-in 0.25s ease;
117+
}
118+
119+
@keyframes fade-in {
120+
from {
121+
opacity: 0;
122+
}
123+
124+
to {
125+
opacity: 1;
126+
}
127+
}
128+
129+
.modal-content {
130+
background: white;
131+
border-radius: 24px;
132+
padding: 40px;
133+
max-width: 480px;
134+
width: 90%;
135+
position: relative;
136+
box-shadow: 0 20px 60px rgb(0 0 0 / 30%);
137+
animation: slide-up 0.3s ease;
138+
}
139+
140+
@keyframes slide-up {
141+
from {
142+
transform: translateY(40px);
143+
opacity: 0;
144+
}
145+
146+
to {
147+
transform: translateY(0);
148+
opacity: 1;
149+
}
150+
}
151+
152+
.modal-close {
153+
position: absolute;
154+
top: 16px;
155+
right: 16px;
156+
background: none;
157+
border: none;
158+
font-size: 32px;
159+
cursor: pointer;
160+
color: #95a5a6;
161+
transition: color 0.2s;
162+
line-height: 1;
163+
padding: 0;
164+
width: 32px;
165+
height: 32px;
166+
font-family: Arial, sans-serif;
167+
}
168+
169+
.modal-close:hover {
170+
color: #2c3e50;
171+
}
172+
173+
.modal-content h2 {
174+
margin: 0 0 8px;
175+
color: #000;
176+
font-size: 28px;
177+
text-align: center;
178+
font-weight: 700;
179+
}
180+
181+
.modal-year {
182+
text-align: center;
183+
color: #6B7FDB;
184+
font-weight: 600;
185+
font-size: 17px;
186+
margin: 0 0 24px;
187+
}
188+
189+
.modal-description {
190+
color: #000;
191+
line-height: 1.6;
192+
font-size: 16px;
193+
text-align: center;
194+
}

0 commit comments

Comments
 (0)