-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (120 loc) · 7.67 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ComfortType</title>
<link href="res/couch-clean.png" rel="icon" />
<link rel="stylesheet" href="style.css">
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
<script defer src="js/script.js" async></script>
</head>
<body>
<div class="title">
<svg class="svg" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g fill="currentColor"><path d="M24.5 2c-.859 0-1.744.287-2.416.959C21.408 3.634 21 4.647 21 6v.035A3.5 3.5 0 0 0 18 9.5v3a.5.5 0 0 0 .5.5h6a.5.5 0 0 0 .5-.5v-3a3.5 3.5 0 0 0-3-3.465V6c0-1.147.342-1.885.791-2.334C23.244 3.213 23.86 3 24.5 3s1.256.213 1.709.666c.45.45.791 1.187.791 2.334v21.552c-.874.188-1.494.867-1.75 1.747c0 0-.25.701.25.701h4c.5 0 .25-.7.25-.7c-.256-.88-.876-1.56-1.75-1.748V6c0-1.353-.408-2.365-1.084-3.041C26.244 2.287 25.36 2 24.5 2Z" /><path d="M3 18a2 2 0 0 1 2-2h7.5c.364 0 .706.097 1 .268a1.99 1.99 0 0 1 1-.268H22a2 2 0 0 1 2 2v2.168c.591.281 1 .884 1 1.582V28a1 1 0 0 1-1 1v.75a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25V29H5v.75a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25V29a1 1 0 0 1-1-1v-6.25c0-.698.409-1.3 1-1.582V18Zm19 0h-8v5h7.5v-1.25c0-.477.19-.91.5-1.225V18ZM5.5 25v2h16v-2h-16Zm0-2H13v-5H5v2.525c.31.316.5.748.5 1.225V23Z" /></g></svg>
<a href="https://github.com/McSnurtle/ComfortType" class="text">ComfortType</a>
</div>
<div class="typing-area">
<div class="total">
<div class="wrapper">
<input type="text" class="input-field" />
<div class="content-box">
<div class="typing-text">
<p class="test-text">Oy! There was an error loading the text!</p>
</div> <!-- test-text -->
</div>
</div>
<div class="stats">
<ul class="result-details">
<li class="time">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M10 3q-.425 0-.713-.288T9 2q0-.425.288-.713T10 1h4q.425 0 .713.288T15 2q0 .425-.288.713T14 3h-4Zm2 11q.425 0 .713-.288T13 13V9q0-.425-.288-.713T12 8q-.425 0-.713.288T11 9v4q0 .425.288.713T12 14Zm0 8q-1.85 0-3.488-.713T5.65 19.35q-1.225-1.225-1.938-2.863T3 13q0-1.85.713-3.488T5.65 6.65q1.225-1.225 2.863-1.938T12 4q1.55 0 2.975.5t2.675 1.45l.725-.725q.275-.275.675-.275t.7.3q.275.275.275.7t-.275.7l-.7.7Q20 8.6 20.5 10.025T21 13q0 1.85-.713 3.488T18.35 19.35q-1.225 1.225-2.863 1.938T12 22Zm0-2q2.9 0 4.95-2.05T19 13q0-2.9-2.05-4.95T12 6Q9.1 6 7.05 8.05T5 13q0 2.9 2.05 4.95T12 20Zm0-7Z" /></svg>
</span>
<span><b>20</b>s</span>
</li> <!-- time -->
<li class="error">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 13q.425 0 .713-.288T13 12V7.975q0-.425-.288-.7T12 7q-.425 0-.713.288T11 8v4.025q0 .425.288.7T12 13Zm0 4q.425 0 .713-.288T13 16q0-.425-.288-.713T12 15q-.425 0-.713.288T11 16q0 .425.288.713T12 17Zm0 5q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22Zm0-10Zm0 8q3.325 0 5.663-2.337T20 12q0-3.325-2.337-5.663T12 4Q8.675 4 6.337 6.337T4 12q0 3.325 2.337 5.663T12 20Z" /></svg>
</span>
<span><b>0</b></span>
</li> <!-- error -->
<li class="wpm">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="m326.1 231.9l-47.5 75.5a31 31 0 0 1-7 7a30.11 30.11 0 0 1-35-49l75.5-47.5a10.23 10.23 0 0 1 11.7 0a10.06 10.06 0 0 1 2.3 14Z" /><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M256 64C132.3 64 32 164.2 32 287.9a223.18 223.18 0 0 0 56.3 148.5c1.1 1.2 2.1 2.4 3.2 3.5a25.19 25.19 0 0 0 37.1-.1a173.13 173.13 0 0 1 254.8 0a25.19 25.19 0 0 0 37.1.1l3.2-3.5A223.18 223.18 0 0 0 480 287.9C480 164.2 379.7 64 256 64Z" /><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M256 128v32m160 128h-32m-256 0H96m69.49-90.51l-22.63-22.63m203.65 22.63l22.63-22.63" /></svg>
</span>
<span><b>0</b></span>
</li> <!-- wpm -->
</ul>
<div class="menu">
<ul class="menu-buttons">
<li>
<button class="themes" type="submit" onclick="showThemes()">Themes</button>
</li>
<li>
<button class="redo">Redo</button>
</li>
</ul>
</div>
</div> <!-- stats -->
</div> <!-- total -->
<div class="theme-center" style="display: none">
<h2 class="themes-title">Themes</h2>
<div class="themes-switcher">
<input type="radio" name="themes" id="Mountain">
<label for="Mountain">
<span>
Mountain
</span>
</label>
<input type="radio" name="themes" id="Forest">
<label for="Forest">
<span>
Forest
</span>
</label>
<input type="radio" name="themes" id="Hike">
<label for="Hike">
<span>
Hike
</span>
</label>
<span class="slider"></span>
</div>
<button type="submit" onclick="hideThemes()">Back</button>
</div>
</div> <!-- typing-area -->
<script src="js/paragraphs.js"></script>
<script src="js/script.js"></script>
<script>
if (document.addEventListener) {
document.addEventListener('contextmenu', function (e) {
e.preventDefault();
}, false);
} else {
document.attachEvent('oncontextmenu', function () {
window.event.returnValue = false;
});
}
// theme stuffs
var html = document.getElementsByTagName('html');
var themes = document.getElementsByName('themes');
for (i = 0; i < themes.length; i++) {
themes[i].addEventListener('change', function () {
html[0].classList.remove(html[0].classList.item(0));
html[0].classList.add(this.id);
});
}
function showThemes() {
console.log("Showing Themes Menu");
document.getElementsByClassName('theme-center')[0].style.display = 'block';
document.getElementsByClassName('total')[0].style.display = 'none';
}
function hideThemes() {
console.log("Hiding Themes Menu");
document.getElementsByClassName('theme-center')[0].style.display = 'none';
document.getElementsByClassName('total')[0].style.display = 'revert';
}
</script>
</body>
</html>