Skip to content

Commit 0c75141

Browse files
Thu-masterThu-master
committed
Login interface + fix bug pages
1 parent 2211b01 commit 0c75141

File tree

5 files changed

+386
-24
lines changed

5 files changed

+386
-24
lines changed

‎Front-end/CSS/loginStyle.css‎

Lines changed: 250 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,250 @@
1+
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
2+
* {
3+
box-sizing: border-box;
4+
}
5+
6+
body {
7+
background: #f6f5f7;
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
flex-direction: column;
12+
font-family: 'Montserrat', sans-serif;
13+
height: 100vh;
14+
margin: -20px 0 50px;
15+
}
16+
17+
h1 {
18+
font-weight: bold;
19+
margin: 0;
20+
}
21+
22+
h2 {
23+
text-align: center;
24+
}
25+
26+
p {
27+
font-size: 14px;
28+
font-weight: 100;
29+
line-height: 20px;
30+
letter-spacing: 0.5px;
31+
margin: 20px 0 30px;
32+
}
33+
34+
span {
35+
font-size: 12px;
36+
}
37+
38+
a {
39+
color: #333;
40+
font-size: 14px;
41+
text-decoration: none;
42+
margin: 15px 0;
43+
}
44+
45+
button {
46+
border-radius: 20px;
47+
border: 1px solid #FF4B2B;
48+
background-color: #FF4B2B;
49+
color: #FFFFFF;
50+
font-size: 12px;
51+
font-weight: bold;
52+
padding: 12px 45px;
53+
letter-spacing: 1px;
54+
text-transform: uppercase;
55+
transition: transform 80ms ease-in;
56+
}
57+
58+
button:active {
59+
transform: scale(0.95);
60+
}
61+
62+
button:focus {
63+
outline: none;
64+
}
65+
66+
button.ghost {
67+
background-color: transparent;
68+
border-color: #FFFFFF;
69+
}
70+
71+
form {
72+
background-color: #FFFFFF;
73+
display: flex;
74+
align-items: center;
75+
justify-content: center;
76+
flex-direction: column;
77+
padding: 0 50px;
78+
height: 100%;
79+
text-align: center;
80+
}
81+
82+
input {
83+
background-color: #eee;
84+
border: none;
85+
padding: 12px 15px;
86+
margin: 8px 0;
87+
width: 100%;
88+
}
89+
90+
.container {
91+
background-color: #fff;
92+
border-radius: 10px;
93+
box-shadow: 0 14px 28px rgba(0,0,0,0.25),
94+
0 10px 10px rgba(0,0,0,0.22);
95+
position: relative;
96+
overflow: hidden;
97+
width: 768px;
98+
max-width: 100%;
99+
min-height: 480px;
100+
}
101+
102+
.form-container {
103+
position: absolute;
104+
top: 0;
105+
height: 100%;
106+
transition: all 0.6s ease-in-out;
107+
}
108+
109+
.sign-in-container {
110+
left: 0;
111+
width: 50%;
112+
z-index: 2;
113+
}
114+
115+
.container.right-panel-active .sign-in-container {
116+
transform: translateX(100%);
117+
}
118+
119+
.sign-up-container {
120+
left: 0;
121+
width: 50%;
122+
opacity: 0;
123+
z-index: 1;
124+
}
125+
126+
.container.right-panel-active .sign-up-container {
127+
transform: translateX(100%);
128+
opacity: 1;
129+
z-index: 5;
130+
animation: show 0.6s;
131+
}
132+
133+
@keyframes show {
134+
0%, 49.99% {
135+
opacity: 0;
136+
z-index: 1;
137+
}
138+
139+
50%, 100% {
140+
opacity: 1;
141+
z-index: 5;
142+
}
143+
}
144+
145+
.overlay-container {
146+
position: absolute;
147+
top: 0;
148+
left: 50%;
149+
width: 50%;
150+
height: 100%;
151+
overflow: hidden;
152+
transition: transform 0.6s ease-in-out;
153+
z-index: 100;
154+
}
155+
156+
.container.right-panel-active .overlay-container{
157+
transform: translateX(-100%);
158+
}
159+
160+
.overlay {
161+
background: #FF416C;
162+
background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);
163+
background: linear-gradient(to right, #FF4B2B, #FF416C);
164+
background-repeat: no-repeat;
165+
background-size: cover;
166+
background-position: 0 0;
167+
color: #FFFFFF;
168+
position: relative;
169+
left: -100%;
170+
height: 100%;
171+
width: 200%;
172+
transform: translateX(0);
173+
transition: transform 0.6s ease-in-out;
174+
}
175+
176+
.container.right-panel-active .overlay {
177+
transform: translateX(50%);
178+
}
179+
180+
.overlay-panel {
181+
position: absolute;
182+
display: flex;
183+
align-items: center;
184+
justify-content: center;
185+
flex-direction: column;
186+
padding: 0 40px;
187+
text-align: center;
188+
top: 0;
189+
height: 100%;
190+
width: 50%;
191+
transform: translateX(0);
192+
transition: transform 0.6s ease-in-out;
193+
}
194+
195+
.overlay-left {
196+
transform: translateX(-20%);
197+
}
198+
199+
.container.right-panel-active .overlay-left {
200+
transform: translateX(0);
201+
}
202+
203+
.overlay-right {
204+
right: 0;
205+
transform: translateX(0);
206+
}
207+
208+
.container.right-panel-active .overlay-right {
209+
transform: translateX(20%);
210+
}
211+
212+
.social-container {
213+
margin: 20px 0;
214+
}
215+
216+
.social-container a {
217+
border: 1px solid #DDDDDD;
218+
border-radius: 50%;
219+
display: inline-flex;
220+
justify-content: center;
221+
align-items: center;
222+
margin: 0 5px;
223+
height: 40px;
224+
width: 40px;
225+
}
226+
227+
footer {
228+
background-color: #222;
229+
color: #fff;
230+
font-size: 14px;
231+
bottom: 0;
232+
position: fixed;
233+
left: 0;
234+
right: 0;
235+
text-align: center;
236+
z-index: 999;
237+
}
238+
239+
footer p {
240+
margin: 10px 0;
241+
}
242+
243+
footer i {
244+
color: red;
245+
}
246+
247+
footer a {
248+
color: #3c97bf;
249+
text-decoration: none;
250+
}

‎Front-end/CSS/style.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@ body, html {
88
color: #fff;
99
scroll-behavior: smooth;
1010
height: 100%; /* Chỉnh độ dài cả web */
11+
overflow-y: auto;
12+
}
13+
body.no-scroll {
14+
overflow-y: hidden;
1115
}
1216

1317
.hidden {
@@ -23,6 +27,7 @@ body, html {
2327
/*backdrop-filter: blur(5px);*/
2428
padding: 10px 0;
2529
z-index: 1000;
30+
height: 64px;
2631
}
2732

2833
.navbar ul {
@@ -63,6 +68,7 @@ body, html {
6368
justify-content: center;
6469
text-align: center;
6570
padding: 20px;
71+
height: calc(100vh - 64px);
6672
}
6773

6874
/*button i { /* Icon trong nút bấm - Hero Section

‎Front-end/HTML/index.html‎

Lines changed: 50 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,15 @@
77
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
88
</head>
99
<body>
10+
<!--
11+
<script>
12+
// Nếu chưa login, quay về login.html
13+
if (localStorage.getItem("isLoggedIn") !== "true") {
14+
window.location.href = "login.html";
15+
}
16+
</script>
17+
-->
18+
1019
<div class="main-bg">
1120
<!-- Video Background -->
1221
<video autoplay muted loop id="bg-video">
@@ -72,31 +81,48 @@ <h1 class="typewriter" id="welcome-text"></h1>
7281
window.onload = type;
7382
</script>
7483

75-
<!-- Footer -->
76-
<footer id="about">
77-
<div class="footer-container">
78-
<div class="footer-left">
79-
<h3>About MLFQ Simulator</h3>
80-
<p>This simulator demonstrates the Multilevel Feedback Queue algorithm used in modern operating systems.</p>
81-
</div>
82-
<div class="footer-right">
83-
<p>📧 contact@mlfqsimulator.com</p>
84-
<p>📍 HCM University of Technology</p>
84+
<!-- Footer -->
85+
<footer id="about">
86+
<div class="footer-container">
87+
<div class="footer-left">
88+
<h3>About MLFQ Simulator</h3>
89+
<p>This simulator demonstrates the Multilevel Feedback Queue algorithm used in modern operating systems.</p>
90+
</div>
91+
<div class="footer-right">
92+
<p>📧 contact@mlfqsimulator.com</p>
93+
<p>📍 HCM University of Technology</p>
94+
</div>
95+
<div class="footer-social">
96+
<a href="#"><i class="fab fa-facebook-f"></i></a>
97+
<a href="#"><i class="fab fa-github"></i></a>
98+
<a href="#"><i class="fab fa-linkedin-in"></i></a>
99+
</div>
100+
<div class="footer-links">
101+
<a href="#algorithm">Algorithm</a>
102+
<a href="#tutorial">Tutorial</a>
103+
<a href="#contact">Contact</a>
104+
</div>
85105
</div>
86-
<div class="footer-social">
87-
<a href="#"><i class="fab fa-facebook-f"></i></a>
88-
<a href="#"><i class="fab fa-github"></i></a>
89-
<a href="#"><i class="fab fa-linkedin-in"></i></a>
106+
<div class="footer-bottom">
107+
© 2025 MLFQ Simulator. All rights reserved.
90108
</div>
91-
<div class="footer-links">
92-
<a href="#algorithm">Algorithm</a>
93-
<a href="#tutorial">Tutorial</a>
94-
<a href="#contact">Contact</a>
95-
</div>
96-
</div>
97-
<div class="footer-bottom">
98-
© 2025 MLFQ Simulator. All rights reserved.
99-
</div>
100-
</footer>
109+
</footer>
110+
111+
<!-- Roll Page -->
112+
<script>
113+
function updateScrollLock() {
114+
const body = document.body;
115+
const contentHeight = document.body.scrollHeight;
116+
const viewportHeight = window.innerHeight;
117+
118+
if (contentHeight <= viewportHeight + 1) {
119+
body.classList.add("no-scroll");
120+
} else {
121+
body.classList.remove("no-scroll");
122+
}
123+
}
124+
window.addEventListener("load", updateScrollLock);
125+
window.addEventListener("resize", updateScrollLock);
126+
</script>
101127
</body>
102128
</html>

0 commit comments

Comments
 (0)