-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
155 lines (142 loc) · 5.92 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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Typing Test</title>
<meta name="theme-color" content="#F4F4F2">
<meta name="description"
content="Minimalist free typing practice website for SSC typing skill test or any other government exam's typing skill test, with layout similar to that of SSC">
<meta name="keywords"
content="@SurajKadian, typing test, typing speed, typing accuracy, online typing test, typing practice, SSC typing,SSC exam, SSC layout, Government exam, skill test, steno">
<link rel="stylesheet" href="style.css">
<link rel="manifest" href="manifest.json">
<link rel="icon" type="image/svg+xml" href="img/logo.svg">
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z8YMBKEQY6"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-Z8YMBKEQY6');
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Suraj Kadian",
"url": "https://www.surajkadian.github.io/typing-practice/",
"logo": "https://www.surajkadian.github.io/typing-practice/img/icon.png",
"sameAs": [
"https://www.t.me/surajkadian/",
"https://github.com/SurajKadian"
]
}
</script>
</head>
<body class="palette1">
<div id="top-bar" class="top-bar">
<h1>Typing Test</h1>
<div class="timer-div"><span id="timer" class="timer">Time: 10:00</span></div>
<button id="menu-btn" class="menu-btn" alt="Menu Button">
<img src="img/menu.svg" class="svg" width="28" height="28">
</button>
</div>
<div class="text-container" id="text-container">
<textarea id="text1" class="textarea" placeholder="Enter original text here" spellcheck="false" autocorrect="off"
autocapitalize="off"></textarea>
<textarea id="text2" class="textarea" placeholder="Start typing here..." spellcheck="false" autocorrect="off"
autocapitalize="off"></textarea>
</div>
<div class="side-panel" id="side-panel">
<div class="side-header">
<a href="https://github.com/SurajKadian" target="_blank">
<img src="img/@SurajKadian.png" alt="Profile Picture" class="profile-picture"></a>
<span class="username">Suraj Kadian</span>
</div>
<div class="side-content">
<p class="text">These options may not be available in the actual test:</p>
<div class="cards">
<div class="icons top">
</div>
<button id="fullscreen-btn" class="icons" alt="Full Screen Button">
<img src="img/FL.svg" class="svg" width="14" height="14"><span>Full Screen</span>
</button>
<button id="pause-btn" class="icons" alt="Pause Button">
<img src="img/pause.svg" class="svg" width="14" height="14"><span>Pause Timer</span>
</button>
<button id="tt-btn" class="icons" alt="Change Font Size">
<img src="img/tt.svg" class="svg" width="14" height="14">Change Font Size
</button>
<button id="palette-btn" class="icons" alt="Change Color Palette">
<img src="img/palette.svg" class="svg" width="14" height="14">Change Colors
</button>
<button id="edit-time" class="icons" alt="Edit Time">
<img src="img/edit.svg" class="svg" width="14" height="14">Edit Timer
<!--<input type="text" id="edit-time" name="edit-time"
value="10:00">-->
</button>
<div id="select-text" class="icons" alt="Select Text">
<img src="img/text.svg" class="svg" width="14" height="14">Select Text:
<select id="text-selector" name="text-selector">
<option value="">Choose a text...</option>
</select>
</div>
<button id="up-btn" class="icons" alt="Upload Text File">
<img src="img/up.svg" class="svg" width="14" height="14">Upload Text File
<input type="file" id="file-input" accept=".txt" style="display: none;">
</button>
<button id="faq-btn" class="icons" alt="Frequently Asked Questions">
<img src="img/faq.svg" class="svg" width="14" height="14">FAQs
</button>
<div class="icons bottom">
</div>
</div>
</div>
<div class="side-footer">
<button id="submit">Submit</button>
<button id="restart">Restart</button>
</div>
</div>
<div class="side-content faq">
<div class="cards">
<button class="menu-btn" alt="Menu Button">
<img src="img/close.svg" width="28" height="28">
</button>
<div class="icons top">
</div>
<div id="faq-1" class="icons" alt="FAQ-1">
<img src="img/faq.svg" class="svg" width="20" height="20">
<span class='question'>First Question</span><br>
<span class='question answer'> <br>answer</span>
<button id="faq1-btn" class="menu-btn">
<img src="img/expand.svg" class="svg" width="24" height="24">
<span class="label">Label Text Here</span>
</button>
</div>
<div class="icons bottom">
</div>
</div>
</div>
<div id="output-div" class="output-div" style="display: none;">
<div class="output-textarea"><textarea id="o-text1" class="output"></textarea>
<textarea id="o-text2" class="output"></textarea>
</div>
<div id="result" class="output"></div>
<div id="output" class="output"></div>
<div id="detailedOutput" class="output"></div>
</div>
<div id="footer-btn" class="side-footer footer">
<button id="submit2">Submit</button>
<button id="restart2">Restart</button>
</div>
<script>if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('js/service-worker.js');
});
}
</script>
<script src="js/script.js"></script>
<script src="js/service-worker.js"></script>
</body>
</html>