Skip to content

Commit 051738e

Browse files
HaHiepThanhHaHiepThanh
committed
Remake web
1 parent d00eddc commit 051738e

File tree

2 files changed

+56
-83
lines changed

2 files changed

+56
-83
lines changed

‎index.html‎

Lines changed: 15 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,34 +4,25 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
66
<title>MLFQ Simulator</title>
7-
<!-- Kết nối CSSCSS -->
87
<link rel="stylesheet" href="style.css" />
98
</head>
109
<body>
11-
<div class="container">
12-
<!-- Nội dung giao diện -->
13-
<h1>Multilevel Feedback Queue (MLFQ) Simulator</h1>
14-
15-
<div class="input-section">
16-
<input type="text" id="processName" placeholder="Tên tiến trình (P1, P2...)">
17-
<input type="number" id="arrivalTime" placeholder="Thời gian đến" min="0">
18-
<input type="number" id="burstTime" placeholder="Burst Time" min="1">
19-
<button onclick="addProcess()">Thêm tiến trình</button>
20-
</div>
10+
<nav class="button">
11+
<ul>
12+
<li><a href="#about">Giới thiệu</a></li>
13+
<li><a href="#algorithms">Thuật toán</a></li>
14+
<li><a href="#simulator">Mô phỏng</a></li>
15+
<li><a href="#tutorial">Hướng dẫn</a></li>
16+
<li><a href="#contact">Liên hệ</a></li>
17+
</ul>
18+
</nav>
2119

22-
<div class="queue-visuals">
23-
<div class="queue" id="queue0"><h3>Queue 0 (Time Quantum: 4)</h3></div>
24-
<div class="queue" id="queue1"><h3>Queue 1 (Time Quantum: 8)</h3></div>
25-
<div class="queue" id="queue2"><h3>Queue 2 (FCFS)</h3></div>
26-
</div>
20+
<section id="about"><h2>Giới thiệu</h2></section>
21+
<section id="algorithms"><h2>Thuật toán</h2></section>
22+
<section id="simulator"><h2>Mô phỏng</h2></section>
23+
<section id="tutorial"><h2>Hướng dẫn</h2></section>
24+
<section id="contact"><h2>Liên hệ</h2></section>
2725

28-
<div class="controls">
29-
<button onclick="startSimulation()">Bắt đầu mô phỏng</button>
30-
</div>
31-
32-
<div class="log" id="log"></div>
33-
</div>
34-
<!-- Kết nối JS -->
3526
<script src="script.js"></script>
3627
</body>
37-
</html>
28+
</html>

‎style.css‎

Lines changed: 41 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,60 @@
1-
body {
2-
font-family: Arial, sans-serif;
3-
background-color: #f4f4f4;
1+
html, body {
2+
height: auto;
3+
overflow-y: auto;
4+
background-color: black;
5+
color: white;
46
margin: 0;
5-
padding: 20px;
7+
padding: 0;
8+
font-family: Arial, sans-serif;
69
}
710

8-
.container {
9-
max-width: 1000px;
10-
margin: auto;
11-
background: white;
12-
padding: 20px;
13-
border-radius: 8px;
11+
.log {
12+
max-height: none;
13+
overflow-y: visible;
1414
}
1515

16-
h1 {
17-
text-align: center;
18-
color: #333;
16+
.button {
17+
background-color: transparent;
18+
width: 100%;
19+
margin-top: 60px;
1920
}
2021

21-
.input-section {
22+
.button ul {
23+
list-style-type: none;
24+
margin: 0;
25+
padding: 10px;
2226
display: flex;
2327
justify-content: center;
24-
gap: 10px;
25-
margin-bottom: 20px;
28+
gap: 120px;
2629
}
2730

28-
.input-section input {
29-
padding: 5px;
30-
width: 140px;
31+
.button li a{
32+
background-color: transparent;
33+
color: rgb(255, 255, 255);
34+
text-decoration: none;
35+
padding: 16px 30px;
36+
font-size: 18px;
37+
font-weight: bold;
38+
display: inline-block;
39+
border: 2px solid rgb(255, 255, 255);
40+
border-radius: 25px;
41+
transition: background-color 0.3s, transform 0.2s, color 0.3s;
3142
}
3243

33-
.input-section button {
34-
padding: 5px 10px;
44+
.button li a:hover {
45+
background-color: white;
46+
color: black;
47+
transform: scale(1.1);
3548
}
3649

37-
.queue-visuals {
38-
display: flex;
39-
flex-direction: column;
40-
gap: 10px;
41-
}
4250

43-
.queue {
51+
section {
52+
max-width: 900px;
53+
margin: 40px auto;
54+
padding: 30px;
4455
border: 2px solid #444;
45-
padding: 10px;
46-
border-radius: 6px;
47-
min-height: 60px;
48-
background-color: #eef;
49-
}
50-
51-
.queue h3 {
52-
margin: 0 0 10px 0;
53-
}
54-
55-
.process {
56-
display: inline-block;
57-
padding: 5px 10px;
58-
background-color: #4CAF50;
56+
background-color: #000;
5957
color: white;
60-
margin: 0 5px;
61-
border-radius: 4px;
62-
}
63-
64-
.controls {
65-
text-align: center;
66-
margin-top: 20px;
67-
}
68-
69-
.log {
70-
margin-top: 30px;
71-
border-top: 1px solid #ccc;
72-
padding-top: 10px;
73-
font-family: monospace;
74-
max-height: 300px;
75-
overflow-y: auto;
76-
background-color: #f9f9f9;
77-
padding: 10px;
58+
border-radius: 8px;
59+
box-shadow: 0 0 20px rgba(255, 255, 255, 0.05);
7860
}

0 commit comments

Comments
 (0)