Skip to content

Commit 2cda1fa

Browse files
adyjsadyjs
committed
Merge branch 'dashboard-feature' into main
2 parents e3508ed + cf7b51d commit 2cda1fa

File tree

7 files changed

+647
-51
lines changed

7 files changed

+647
-51
lines changed

‎.vscode/settings.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"less.compile": {
3+
"out": "${workspaceRoot}/css/"
4+
}
5+
}

‎css/index.css‎

Lines changed: 182 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,207 @@
1-
/*add normalize css*/
21
* {
3-
margin:0;
4-
padding:0;
5-
font-size: sans-serif;
6-
box-sizing: border-box;
7-
-o-box-sizing: border-box;
8-
-moz-box-sizing: border-box;
9-
-webkit-box-sizing: border-box;
2+
margin: 0;
3+
padding: 0;
4+
font-size: sans-serif;
5+
box-sizing: border-box;
6+
-o-box-sizing: border-box;
7+
-moz-box-sizing: border-box;
8+
-webkit-box-sizing: border-box;
9+
}
10+
html,
11+
body {
12+
width: 100%;
13+
height: 100%;
14+
}
15+
body .main-container {
16+
width: 100%;
17+
height: 100%;
18+
display: flex;
19+
flex-direction: row;
20+
flex-wrap: nowrap;
21+
justify-content: flex-start;
22+
align-items: stretch;
23+
}
24+
body .main-container #stage {
25+
border: #888 solid 2px;
26+
background-color: #4a4a4a;
27+
width: 90%;
28+
display: flex;
29+
flex-direction: row;
30+
flex-wrap: nowrap;
31+
justify-content: center;
32+
align-items: flex-end;
33+
padding: 3% 5%;
34+
}
35+
body .main-container #stage .img-container {
36+
width: 80px;
37+
height: 100%;
38+
display: flex;
39+
flex-direction: row;
40+
flex-wrap: nowrap;
41+
justify-content: center;
42+
align-items: center;
43+
}
44+
body .main-container #stage .img-container .initial-img {
45+
width: 80px;
46+
height: 80px;
47+
transform: rotate(-90deg);
48+
}
49+
body .main-container #stage li {
50+
background-color: #00ffff;
51+
width: 100%;
52+
list-style-type: none;
53+
border: #000 dotted 0.1px;
54+
}
55+
body .main-container #dashboard {
56+
font-family: 'Noto Sans TC', 'Noto Sans JP', sans-serif;
57+
width: 10%;
58+
background-color: #4a4a4a;
59+
display: flex;
60+
flex-direction: column;
61+
flex-wrap: nowrap;
62+
}
63+
body .main-container #dashboard .algo-selector-container {
64+
width: 100%;
65+
margin-bottom: 1px;
66+
border: #ccc solid 2px;
67+
}
68+
body .main-container #dashboard .algo-selector-container .algo-label {
69+
font-size: 14px;
70+
display: block;
71+
color: white;
72+
background-color: #6a6a6a;
73+
padding: 6px 0;
74+
text-align: center;
75+
}
76+
body .main-container #dashboard .algo-selector-container .selector-container {
77+
width: 100%;
78+
background-color: #333;
79+
padding: 10px 0;
80+
}
81+
body .main-container #dashboard .algo-selector-container .selector-container .selector {
82+
border: none;
83+
width: 100%;
84+
color: white;
85+
background-color: #333;
86+
}
87+
body .main-container #dashboard .algo-selector-container .selector-container .selector:focus {
88+
outline: none;
89+
}
90+
body .main-container #dashboard .algo-selector-container .selector-container .options {
91+
color: white;
92+
background-color: #333;
93+
}
94+
body .main-container #dashboard .count-input-container {
95+
width: 100%;
96+
margin-bottom: 1px;
97+
border: #ccc solid 2px;
98+
}
99+
body .main-container #dashboard .count-input-container .count-label {
100+
font-size: 14px;
101+
display: block;
102+
color: white;
103+
background-color: #6a6a6a;
104+
padding: 6px 0;
105+
text-align: center;
106+
}
107+
body .main-container #dashboard .count-input-container .count-input {
108+
width: 100%;
109+
padding: 10px 0 10px 10px;
110+
color: white;
111+
background-color: #333;
112+
}
113+
body .main-container #dashboard .count-input-container .count-input:disabled {
114+
background-color: #ccc;
115+
}
116+
body .main-container #dashboard .mspf-input-container {
117+
width: 100%;
118+
margin-bottom: 1px;
119+
border: #ccc solid 2px;
120+
}
121+
body .main-container #dashboard .mspf-input-container .mspf-label {
122+
font-size: 14px;
123+
display: block;
124+
color: white;
125+
background-color: #6a6a6a;
126+
padding: 6px 0;
127+
text-align: center;
128+
}
129+
body .main-container #dashboard .mspf-input-container .mspf-input {
130+
width: 100%;
131+
padding: 10px 0 10px 10px;
132+
color: white;
133+
background-color: #333;
134+
}
135+
body .main-container #dashboard .mspf-input-container .mspf-input:disabled {
136+
background-color: #ccc;
137+
}
138+
body .main-container #dashboard .btn-tag {
139+
width: 80%;
140+
margin: 0 auto;
141+
border-radius: 10px;
142+
padding: 6px 4px;
143+
font-size: 16px;
144+
color: white;
145+
background-color: #333;
146+
margin-top: 10px;
147+
}
148+
body .main-container #dashboard .btn-tag:disabled {
149+
background-color: #ccc;
150+
}
151+
body .main-container #dashboard .btn-tag:disabled:hover {
152+
cursor: not-allowed;
153+
}
154+
body .main-container #dashboard .btn-tag:hover {
155+
cursor: pointer;
156+
}
157+
body .main-container #dashboard .footer-container {
158+
width: 100%;
159+
margin-top: auto;
160+
}
161+
body .main-container #dashboard .footer-container .footer-copyright {
162+
color: white;
163+
font-size: 16px;
164+
padding: 10px;
165+
text-align: center;
166+
}
167+
/*
168+
169+
* {
170+
171+
10172
}
11173
html,body{
12174
width:100%;
13175
height:100%;
14176
}
15177
header{
16-
background-color: black;
17-
height:8%;
178+
background: linear-gradient(to top, #000 , #333 , #555 , #777);
18179
display:flex;
19180
align-items:center;
20-
21181
}
22182
23183
header h1{
24-
letter-spacing: 0.15em;
184+
font-family: 'Noto Sans TC', 'Noto Sans JP', sans-serif;
185+
font-weight:100;
186+
letter-spacing: 3px;
187+
font-size:26px;
25188
margin: 0 auto;
189+
padding:10px 0;
26190
color:white;
191+
27192
}
28193
29194
section{
195+
border:#333 solid 1px;
30196
height:90%;
31197
width:100%;
32-
198+
background-color:#3e3e3e;
33199
}
34200
35201
section article#stage{
36202
display:flex;
37203
align-items:center;
38-
height:95%;
204+
height:90%;
39205
overflow: hidden;
40206
padding:1% 5%;
41207
align-items:flex-end;
@@ -169,3 +335,5 @@ footer{
169335
footer h6{
170336
text-align:right;
171337
}
338+
339+
*/

‎image/bg-img-1.svg‎

Lines changed: 4 additions & 0 deletions
Loading

‎index.html‎

Lines changed: 64 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -7,52 +7,83 @@
77
<meta http-equiv="EXPIRES" content="0">
88
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
99
<meta name="author" content="Adyjs" />
10+
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Noto+Sans+TC&display=swap" rel="stylesheet">
1011
<link rel="stylesheet" type="text/css" href="css/normalize.css">
1112
<link rel="stylesheet" type="text/css" href="css/index.css">
1213
<link rel="stylesheet" type="text/css" href="css/RWD_index.css">
1314
</head>
1415
<body>
15-
<header>
16-
<h1>排序演算法視覺化</h1>
17-
</header>
16+
<!-- <header class="header-container">
17+
<h1 class="header-title">排序演算法視覺化</h1>
18+
</header> -->
19+
<!-- <div class="container">
1820
19-
<section>
20-
<article id="stage">
21-
<div class="img-container">
22-
<img src="image/stage_back_img.png">
23-
</div>
24-
</article>
21+
</div> -->
22+
23+
<main class="main-container">
2524

26-
<article id="dashboard">
25+
<section id="dashboard">
2726

28-
<label id="algo_label" for="algo">排序演算法</label>
29-
<select class="unset_value" id="algo">
30-
<option value="none" selected>--Algorithm--</option>
31-
<option value="BubbleSort">Bubble Sort</option>
32-
<option value="SelectionSort">Selection Sort</option>
33-
<option value="ExchangeSort">Exchange Sort</option>
34-
<option value="InsertionSort">Insertion Sort</option>
35-
<option value="ShakerSort">Shaker Sort</option>
36-
</select>
27+
<div class="algo-selector-container">
28+
<label class="algo-label" id="algo_label" for="algo">排序演算法</label>
29+
<div class="selector-container">
30+
<select class="selector" id="algo">
31+
<option class="options" value="none" selected>--Algorithm--</option>
32+
<option class="options" value="BubbleSort">Bubble Sort</option>
33+
<option class="options" value="SelectionSort">Selection Sort</option>
34+
<option class="options" value="ExchangeSort">Exchange Sort</option>
35+
<option class="options" value="InsertionSort">Insertion Sort</option>
36+
<option class="options" value="ShakerSort">Shaker Sort</option>
37+
</select>
38+
</div>
39+
</div>
3740

38-
<label id="count_label" for="count">計算數量</label>
39-
<input id="count" type="number" disabled="true" ></input>
41+
<div class="count-input-container">
42+
<label class="count-label" id="count_label" for="count">計算數量</label>
43+
<input
44+
class="count-input"
45+
id="count"
46+
type="number"
47+
disabled="true"
48+
placeholder="5 ~ 500"
49+
min="5"
50+
max="500">
51+
</input>
52+
</div>
4053

41-
<label id="mspf_label" for="mspf">ms per frame</label>
42-
<input id="mspf" type="number" disabled="true"></input>
54+
<div class="mspf-input-container">
55+
<label class="mspf-label" id="mspf_label" for="mspf">ms per frame</label>
56+
<input
57+
class="mspf-input"
58+
id="mspf"
59+
type="number"
60+
disabled="true"
61+
placeholder="5ms ~ 1000ms"
62+
min="5"
63+
max="1000">
64+
</input>
65+
</div>
4366

44-
<label id="err" display="none"></label>
67+
<!-- <label class="label-tag" id="err" display="none"></label> -->
4568

46-
<button id="prepare" disabled="true">產生圖像</button>
47-
<button id="go" disabled="true">開始排序</button>
48-
<button class="done_button" id="reset" >Reset</button>
49-
50-
</article>
51-
</section>
69+
<button class="btn-tag" id="prepare" disabled="true">產生圖像</button>
70+
<button class="btn-tag" id="go" disabled="true">開始排序</button>
71+
<button class="btn-tag" class="done_button" id="reset" >Reset</button>
72+
<footer class="footer-container">
73+
<div class="footer-copyright" class="footer-content">&copy; 2020 Adyjs</div>
74+
</footer>
75+
</section>
76+
77+
<section id="stage">
78+
<div class="img-container">
79+
<img class="initial-img" src="image/bg-img-1.svg">
80+
</div>
81+
</section>
82+
83+
</main>
84+
85+
5286

53-
<footer>
54-
<h6>&copy; 2017 Adyjs.&nbsp;&nbsp;A self-taught Front-End Developer</h6>
55-
</footer>
5687
<script type="text/javascript" src="./js/main.js"></script>
5788
<script type="text/javascript" src="./js/bubble_sort.js"></script>
5889
<script type="text/javascript" src="./js/selection_sort.js"></script>

‎js/main.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,8 +97,8 @@ class Visualization extends Base{
9797
}
9898

9999
doneCompareColoring(entry1, entry2){
100-
entry1.style.backgroundColor = '#ffe4e1';
101-
entry2.style.backgroundColor = '#ffe4e1';
100+
entry1.style.backgroundColor = '#00ffff';
101+
entry2.style.backgroundColor = '#00ffff';
102102
}
103103

104104
settledBlock(entry){

0 commit comments

Comments
 (0)