Skip to content

Commit ee13801

Browse files
SameerIssaSameerIssa
authored
Merge pull request #183 from UNLV-CS472-672/logout-page
Add Logout Page to LessonConnect
2 parents c1f6064 + 85b4252 commit ee13801

File tree

3 files changed

+173
-0
lines changed

3 files changed

+173
-0
lines changed

‎frontend/src/App.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ import Settings from "./Components/Settings.jsx";
3434
import Questionnaire from "./Components/Questionnaire.jsx";
3535
import AssignmentCreate from "./Components/AssignmentCreate.jsx";
3636
import RoleSelect from "./Components/RoleSelect.jsx";
37+
import Logout from "./Components/Logout.jsx";
3738

3839

3940
function App() {
@@ -73,6 +74,7 @@ function App() {
7374
<Route path="/videocall" element={<VideoCall />} />
7475
<Route path="/WhiteboardCanvas" element={<WhiteboardCanvas/>} />
7576
<Route path="/WhiteboardCanvas" element={<WhiteboardCanvas />} />
77+
<Route path="/logout" element={<Logout />} />
7678
{/* Profile Setup Routes */}
7779
<Route path="/student-questionnaire" element={<Questionnaire userRole={3} />} />
7880
<Route path="/tutor-questionnaire" element={<Questionnaire userRole={1} />} />

‎frontend/src/Components/Logout.jsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { Link } from "react-router-dom";
2+
import "../Styles/Logout.css";
3+
4+
export default function Logout() {
5+
return (
6+
<div className="logout-page-container">
7+
<div className="logout-page">
8+
<div className="logout-container">
9+
<div className="bird-container">
10+
<img
11+
src="assets/images/bird.webp"
12+
alt="Artistic bird illustration"
13+
/>
14+
</div>
15+
<div className="logout-content">
16+
<h1 className="logout-title">Thank you for visiting LessonConnect</h1>
17+
<p className="logout-message">We hope you had a great learning experience!</p>
18+
<div className="logout-buttons">
19+
<Link to="/" className="btn">
20+
Return to Home
21+
</Link>
22+
<Link to="/learn_more" className="btn">
23+
Learn More
24+
</Link>
25+
<Link to="/login" className="btn">
26+
Log In Again
27+
</Link>
28+
<Link to="/roleSelect" className="btn">
29+
Create New Account
30+
</Link>
31+
</div>
32+
</div>
33+
</div>
34+
</div>
35+
</div>
36+
);
37+
}

‎frontend/src/Styles/Logout.css‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
.logout-page-container .logout-page {
2+
font-family: Arial, sans-serif;
3+
background: linear-gradient(135deg, #d2e4df 20%, #c5dad5 100%);
4+
min-height: 85vh;
5+
display: flex;
6+
flex-direction: column;
7+
align-items: center;
8+
justify-content: center;
9+
padding: 2rem;
10+
position: relative;
11+
}
12+
13+
.logout-page-container .logout-container {
14+
background: transparent;
15+
padding: 3rem;
16+
padding-top: 8rem;
17+
text-align: center;
18+
max-width: 800px;
19+
width: 100%;
20+
animation: fadeIn 0.5s ease-in-out;
21+
display: flex;
22+
flex-direction: column;
23+
align-items: center;
24+
}
25+
26+
.logout-page-container .bird-container {
27+
margin-bottom: 3rem;
28+
animation: float 6s ease-in-out infinite;
29+
}
30+
31+
.logout-page-container .bird-container img {
32+
width: 300px;
33+
height: auto;
34+
border-radius: 8px;
35+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
36+
}
37+
38+
.logout-page-container .logout-content {
39+
width: 100%;
40+
color: #333;
41+
}
42+
43+
.logout-page-container .logout-title {
44+
color: #333;
45+
font-size: 3rem;
46+
margin-bottom: 2rem;
47+
font-weight: 600;
48+
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
49+
}
50+
51+
.logout-page-container .logout-message {
52+
color: #555;
53+
font-size: 1.5rem;
54+
margin-bottom: 3rem;
55+
line-height: 1.6;
56+
}
57+
58+
.logout-page-container .logout-buttons {
59+
display: flex;
60+
flex-direction: column;
61+
gap: 1.5rem;
62+
width: 100%;
63+
max-width: 400px;
64+
margin: 0 auto;
65+
}
66+
67+
.logout-page-container .btn {
68+
background-color: #000;
69+
color: #fff;
70+
padding: 16px;
71+
border: none;
72+
border-radius: 5px;
73+
cursor: pointer;
74+
font-size: 1.2rem;
75+
font-weight: bold;
76+
transition: all 0.3s ease;
77+
text-decoration: none;
78+
text-align: center;
79+
width: 100%;
80+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
81+
}
82+
83+
.logout-page-container .btn:hover {
84+
background-color: #333;
85+
transform: translateY(-2px);
86+
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
87+
}
88+
89+
@keyframes fadeIn {
90+
from {
91+
opacity: 0;
92+
transform: translateY(20px);
93+
}
94+
to {
95+
opacity: 1;
96+
transform: translateY(0);
97+
}
98+
}
99+
100+
@keyframes float {
101+
0% {
102+
transform: translateY(0px);
103+
}
104+
50% {
105+
transform: translateY(-10px);
106+
}
107+
100% {
108+
transform: translateY(0px);
109+
}
110+
}
111+
112+
/* Responsive adjustments */
113+
@media (max-width: 768px) {
114+
.logout-page-container .logout-container {
115+
padding: 2rem;
116+
margin: 1rem;
117+
}
118+
119+
.logout-page-container .bird-container img {
120+
width: 220px;
121+
}
122+
123+
.logout-page-container .logout-title {
124+
font-size: 2.2rem;
125+
}
126+
127+
.logout-page-container .logout-message {
128+
font-size: 1.2rem;
129+
}
130+
131+
.logout-page-container .logout-buttons {
132+
max-width: 100%;
133+
}
134+
}

0 commit comments

Comments
 (0)