Skip to content

Commit 2565d83

Browse files
author
Dima Kossovich
committed
refactored
1 parent 2bccb70 commit 2565d83

File tree

3 files changed

+229
-256
lines changed

3 files changed

+229
-256
lines changed

‎gui/index.html

Lines changed: 40 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,47 @@
11
<!doctype html>
22
<html>
3-
<head>
4-
<title>Typing practice v0.1</title>
5-
<link rel="stylesheet" type="text/css" href="main.css" media="screen" />
3+
<head>
4+
<title>Typing practice v0.1</title>
5+
<link rel="stylesheet" type="text/css" href="main.css" media="screen" />
6+
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
7+
</head>
8+
<body>
9+
<div class="topnav">
10+
<a href="#">Typing practice</a>
11+
<div id="score"></div>
12+
</div>
613

7-
<!-- Including jQuery -->
8-
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
9-
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
10-
crossorigin="anonymous">
11-
</script>
12-
</head>
13-
<body>
14-
<div class="topnav">
15-
<a href="#">Typing practice</a>
16-
<div id="score"></div>
17-
</div>
14+
<div class="content-holder">
15+
<div class="settings">
16+
<h3>Settings:</h3>
17+
<div class="use_tabs">
18+
<input type="checkbox" id="use_tabs" onchange="changeUseTabs()" name="use_tabs" style="display: none;" checked>
19+
<label for="use_tabs" name="label_use_tabs">Using tabs instead of spaces</label>
20+
</div>
21+
<div class="max_symbols">
22+
Max symbols (set to <= 0 to off):
23+
<input type="number" step="1" id="max_symbols" onchange="changeMaxSymbols()" style="width: 90px;"/>
24+
</div>
25+
</div>
26+
<div style="float: left; width: 100%; margin-left: 18px; padding-bottom: 18px">
27+
<form action="set_code_file">
28+
<input class="code_selector" style="margin-left: 30%; padding-top: 10px" type="file" id="myFile" name="filename" onchange="changeCode()">
29+
</form>
30+
<button class="code_selector" style="margin-left: 30px" onclick="restart()"><img src="https://cdn4.iconfinder.com/data/icons/game-general-icon-set-1/512/reset-512.png" width="30px" height="30px"></button>
31+
</div>
1832

19-
<div class="content-holder">
20-
<div class="settings">
21-
<h3>Settings:</h3>
22-
<div class="use_tabs">
23-
<input type="checkbox" id="use_tabs" onchange="changeUseTabs()" name="use_tabs" style="display: none;" checked>
24-
<label for="use_tabs" name="label_use_tabs">Using tabs instead of spaces</label>
25-
</div>
26-
<div class="max_symbols">
27-
Max symbols (set to <= 0 to off):
28-
<input type="number" step="1" id="max_symbols" onchange="changeMaxSymbols()" style="width: 90px;"/>
29-
</div>
30-
</div>
31-
<div style="float: left; width: 100%; margin-left: 18px; padding-bottom: 18px">
32-
<form action="set_code_file">
33-
<input class="code_selector" style="margin-left: 30%; padding-top: 10px" type="file" id="myFile" name="filename" onchange="changeCode()">
34-
</form>
35-
<button class="code_selector" style="margin-left: 30px" onclick="restart()"><img
36-
src="https://cdn4.iconfinder.com/data/icons/game-general-icon-set-1/512/reset-512.png"
37-
width="30px" height="30px"></button>
38-
</div>
33+
<form action="none" method="get" align="right">
34+
<textarea class="content" name="main_window_text"></textarea>
35+
</form>
36+
<form action="none" method="get" align="right">
37+
<textarea class="content-front" name="main_window_input" spellcheck="false"></textarea>
38+
</form>
39+
</div>
3940

40-
<form action="none" method="get" align="right">
41-
<textarea class="content" name="main_window_text"></textarea>
42-
</form>
43-
<form action="none" method="get" align="right">
44-
<textarea class="content-front" name="main_window_input" spellcheck="false"></textarea>
45-
</form>
46-
</div>
41+
<script src="main.js"></script>
4742

48-
49-
<script src="main.js"></script>
50-
51-
<div class="footer">
52-
<p> Nothing in Footer yet</p>
53-
</div>
54-
</body>
43+
<div class="footer">
44+
<p>Nothing in Footer yet</p>
45+
</div>
46+
</body>
5547
</html>

‎gui/main.css

Lines changed: 20 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,54 +1,42 @@
11
* {
22
box-sizing: border-box;
3-
font-family: jetBrains mono, Consolas, mono-serif;
3+
font-family: 'JetBrains Mono', Consolas, monospace;
44
}
55

66
body {
77
margin: 0;
8-
background-color: black;
8+
background-color: #f5f5f5;
99
font-family: Arial, Helvetica, sans-serif;
1010
}
1111

1212
/* Style the top navigation bar */
1313
.topnav {
1414
overflow: hidden;
15-
font-family: jetBrains mono, Consolas, mono-serif;
1615
background-color: #111;
1716
position: fixed;
1817
z-index: 999;
1918
min-width: 100%;
2019
}
2120

22-
.topnav {
23-
color: #dbd851;
24-
font-weight: bold;
25-
letter-spacing: 2px;
26-
padding: 14px 16px;
27-
text-decoration: none;
28-
}
29-
30-
/* Style the topnav links */
3121
.topnav a {
3222
float: left;
3323
color: #f2f2f2;
3424
font-weight: bold;
3525
letter-spacing: 2px;
3626
text-decoration: none;
37-
margin-right: 40px;
27+
padding: 14px 16px;
3828
}
3929

40-
/* Change color on hover */
4130
.topnav a:hover {
4231
color: #dbd851;
4332
text-decoration: underline;
4433
}
4534

46-
/* Style the content */
4735
.content-holder {
48-
width: 100%;
49-
background-color: #333;
50-
padding-top: 60px;
51-
padding-bottom: 80px;
36+
width: 100%;
37+
background-color: #333;
38+
padding-top: 60px;
39+
padding-bottom: 80px;
5240
}
5341

5442
h3 {
@@ -66,15 +54,13 @@ h3 {
6654
margin-bottom: 30px;
6755
padding-bottom: 30px;
6856
min-height: 60px;
69-
/* background-color: #444; */
7057
border-radius: 3px;
71-
padding: 10px
58+
padding: 10px;
7259
}
7360

7461
.use_tabs {
7562
margin: 7px;
7663
padding: 5px;
77-
padding-left: 10px;
7864
color: #333;
7965
border-radius: 3px;
8066
background-color: #dbd851;
@@ -95,7 +81,7 @@ h3 {
9581
}
9682

9783
.content {
98-
font-family: jetBrains mono, Consolas, mono-serif;
84+
font-family: 'JetBrains Mono', Consolas, monospace;
9985
color: #ccc;
10086
font-size: 14pt;
10187
background-color: #333;
@@ -107,7 +93,7 @@ h3 {
10793
text-align: left;
10894
margin-left: 30%;
10995
margin-right: 20%;
110-
min-height: 500px; /* Should be removed. Only for demonstration */
96+
min-height: 500px;
11197
margin-top: 10px;
11298
padding-top: 20px;
11399
user-select: none;
@@ -118,7 +104,7 @@ h3 {
118104
}
119105

120106
.content-front {
121-
font-family: jetBrains mono, Consolas, mono-serif;
107+
font-family: 'JetBrains Mono', Consolas, monospace;
122108
color: #ccc;
123109
font-size: 14pt;
124110
background-color: #333;
@@ -130,24 +116,24 @@ h3 {
130116
text-align: left;
131117
margin-left: 30%;
132118
margin-right: 20%;
133-
min-height: 500px; /* Should be removed. Only for demonstration */
119+
min-height: 500px;
134120
margin-top: -500px;
135121
padding-top: 20px;
136122
user-select: none;
137123
z-index: 5;
138-
opacity: 80%;
124+
opacity: 0.8;
139125
position: relative;
140126
display: block;
141127
tab-size: 4;
142128
}
143129

144130
.code_selector {
145-
background-color: #dbd851;
146-
margin-top: 20px;
147-
height: 50px;
148-
padding-right: 10px;
131+
background-color: #dbd851;
132+
margin-top: 20px;
133+
height: 50px;
134+
padding-right: 10px;
149135
border-radius: 3px;
150-
float: left;
136+
float: left;
151137
}
152138

153139
input[type="file"] {
@@ -168,12 +154,11 @@ textarea {
168154
border-radius: 3px;
169155
}
170156

171-
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
157+
::placeholder {
172158
color: #7c7c7c;
173-
opacity: 1; /* Firefox */
159+
opacity: 1;
174160
}
175161

176-
/* Style the footer */
177162
.footer {
178163
background-color: #111;
179164
color: #dbd851;

0 commit comments

Comments
 (0)