Skip to content

Commit fc63136

Browse files
author
danil-nizamov
committed
Initial commit -- first working version
1 parent 9c58168 commit fc63136

File tree

10 files changed

+762
-10
lines changed

10 files changed

+762
-10
lines changed

‎client/app.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
// Load help content and initialize modal
5858
async function initializeHelpModal() {
5959
try {
60-
const response = await fetch('./help-content-template.html');
60+
const response = await fetch('./help-content.html');
6161
const helpContent = await response.text();
6262

6363
// Initialize help modal with actual content
@@ -73,7 +73,7 @@
7373
// Fallback to placeholder content
7474
HelpModal.init({
7575
triggerSelector: '#btn-help',
76-
content: '<p>Help content could not be loaded. Please check that help-content-template.html exists.</p>',
76+
content: '<p>Help content could not be loaded. Please check that help-content.html exists.</p>',
7777
theme: 'auto'
7878
});
7979
setStatus('Ready (help content unavailable)');

‎client/design-system‎

‎client/help-content.html‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
<!-- Help Content for Typing Simulator -->
2+
3+
<!-- Table of Contents Navigation -->
4+
<nav class="toc">
5+
<strong>Contents</strong>
6+
<ul>
7+
<li><a href="#overview">Overview</a></li>
8+
<li><a href="#getting-started">Getting Started</a></li>
9+
<li><a href="#features">Key Features</a></li>
10+
<li><a href="#workflow">How to Use</a></li>
11+
<li><a href="#shortcuts">Shortcuts</a></li>
12+
<li><a href="#faq">Troubleshooting / FAQ</a></li>
13+
</ul>
14+
</nav>
15+
16+
<!-- Overview Section -->
17+
<section id="overview">
18+
<h2>Overview</h2>
19+
<p>The Typing Simulator is a practice tool that helps you improve your typing speed and accuracy. Type the displayed text character by character, and see real-time feedback on your performance.</p>
20+
</section>
21+
22+
<!-- Getting Started Section -->
23+
<section id="getting-started">
24+
<h2>Getting Started</h2>
25+
<p>To begin using the Typing Simulator:</p>
26+
<ol>
27+
<li>The text to type will be displayed in grey</li>
28+
<li>Click on the text area or start typing to begin</li>
29+
<li>Type each character as it appears in the text</li>
30+
<li>Watch as correctly typed characters turn black and mistakes turn red</li>
31+
<li>Use backspace to fix errors if needed</li>
32+
<li>When you finish, you'll see a completion screen</li>
33+
</ol>
34+
</section>
35+
36+
<!-- Key Features Section -->
37+
<section id="features">
38+
<h2>Key Features</h2>
39+
40+
<h3>Real-time Feedback</h3>
41+
<p>See immediate visual feedback as you type. Correct characters turn black, while mistakes are highlighted in red.</p>
42+
43+
<h3>Error Correction</h3>
44+
<p>You can use backspace or delete to go back and fix mistakes. The simulator tracks your progress and allows you to correct errors at any time.</p>
45+
46+
<h3>Completion Screen</h3>
47+
<p>When you successfully type the entire text, a completion screen appears with an option to start over and practice again.</p>
48+
49+
<h3>Restart Anytime</h3>
50+
<p>Use the restart button in the bottom left corner to start over at any time during your practice session.</p>
51+
</section>
52+
53+
<!-- Workflow Section -->
54+
<section id="workflow">
55+
<h2>How to Use</h2>
56+
<p>Here's the typical workflow for using the Typing Simulator:</p>
57+
<ol>
58+
<li><strong>Start Typing:</strong> Click on the text area or simply start typing. The text will be loaded automatically.</li>
59+
<li><strong>Type Carefully:</strong> Type each character as it appears. Focus on accuracy first, then speed.</li>
60+
<li><strong>Handle Mistakes:</strong> If you make a mistake, it will be highlighted in red. You can continue typing or use backspace to fix it.</li>
61+
<li><strong>Complete the Text:</strong> Keep typing until you've completed the entire text.</li>
62+
<li><strong>Review and Restart:</strong> After completion, you can start over to practice again.</li>
63+
</ol>
64+
65+
<h3>Tips & Best Practices</h3>
66+
<ul>
67+
<li>Focus on accuracy over speed - it's better to type correctly than quickly</li>
68+
<li>Use proper typing posture and finger placement</li>
69+
<li>Don't look at your keyboard - keep your eyes on the screen</li>
70+
<li>Practice regularly to improve your muscle memory</li>
71+
<li>Fix mistakes immediately to build good habits</li>
72+
</ul>
73+
</section>
74+
75+
<!-- Shortcuts Section -->
76+
<section id="shortcuts">
77+
<h2>Shortcuts</h2>
78+
<ul>
79+
<li><strong>ESC</strong> - Close help modal</li>
80+
<li><strong>Backspace/Delete</strong> - Go back and fix mistakes</li>
81+
<li><strong>Click on text area</strong> - Focus the input to start typing</li>
82+
<li><strong>Restart button</strong> - Start over from the beginning</li>
83+
</ul>
84+
</section>
85+
86+
<!-- FAQ Section -->
87+
<section id="faq">
88+
<h2>Troubleshooting / FAQ</h2>
89+
90+
<details>
91+
<summary>What happens if I make a mistake?</summary>
92+
<p>Mistakes are highlighted in red, but you can continue typing. You can also use backspace to go back and fix the error. The simulator tracks your progress and allows you to correct mistakes at any time.</p>
93+
</details>
94+
95+
<details>
96+
<summary>Can I restart in the middle of typing?</summary>
97+
<p>Yes! Click the restart button in the bottom left corner at any time to start over from the beginning.</p>
98+
</details>
99+
100+
<details>
101+
<summary>What text will I be typing?</summary>
102+
<p>The text is loaded from the <code>text-to-input.txt</code> file. This file contains practice text designed to help you improve your typing skills.</p>
103+
</details>
104+
105+
<details>
106+
<summary>How do I know when I'm done?</summary>
107+
<p>When you successfully type the entire text correctly, a completion screen will appear with a "Start Over" button.</p>
108+
</details>
109+
110+
<details>
111+
<summary>Can I change the text I'm typing?</summary>
112+
<p>The text is loaded from <code>text-to-input.txt</code>. You can modify this file to practice with different text.</p>
113+
</details>
114+
</section>

‎client/index.html‎

Lines changed: 36 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<title><!-- APP_TITLE --></title>
5+
<title>Typing Simulator</title>
66
<meta name="viewport" content="width=device-width, initial-scale=1" />
77
<!-- Fonts (Work Sans) -->
88
<link rel="preconnect" href="https://fonts.googleapis.com">
@@ -23,28 +23,58 @@
2323

2424
<!-- Template-specific components (layout, utilities, temporary components) -->
2525
<link rel="stylesheet" href="./bespoke-template.css" />
26-
<!-- APP_SPECIFIC_CSS -->
26+
<link rel="stylesheet" href="./typing-simulator.css" />
2727
</head>
2828
<body class="bespoke">
2929
<!-- Navigation Header -->
3030
<header class="header">
31-
<h1>APP NAME</h1>
32-
<!-- APP_SPECIFIC_HEADER_CONTENT -->
31+
<h1>Typing Simulator</h1>
3332
<div class="spacer"></div>
3433
<div id="status" class="status">Ready</div>
3534
<button id="btn-help" class="button button-text">Help</button>
3635
</header>
3736

3837
<!-- Main Application Content -->
39-
<!-- APP_SPECIFIC_MAIN_CONTENT -->
38+
<main class="main-layout">
39+
<div class="content-area">
40+
<div class="typing-container">
41+
<div class="typing-text-container">
42+
<div id="typing-text" class="typing-text"></div>
43+
<input
44+
type="text"
45+
id="hidden-input"
46+
class="hidden-input"
47+
autocomplete="off"
48+
autocorrect="off"
49+
autocapitalize="off"
50+
spellcheck="false"
51+
/>
52+
</div>
53+
<div id="completion-screen" class="completion-screen">
54+
<h2>Completed</h2>
55+
<p>Great job! You've finished typing the text.</p>
56+
<button id="btn-start-over" class="button button-primary">Start Over</button>
57+
</div>
58+
<div class="restart-button-container">
59+
<button id="btn-restart" class="button button-text" title="Start Over">
60+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
61+
<polyline points="23 4 23 10 17 10"></polyline>
62+
<polyline points="1 20 1 14 7 14"></polyline>
63+
<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
64+
</svg>
65+
</button>
66+
</div>
67+
</div>
68+
</div>
69+
</main>
4070

4171
<!-- Help Modal (automatically managed by help-modal.js) -->
4272
<!-- The modal structure is created dynamically by the JavaScript -->
4373

4474
<!-- Core Scripts -->
4575
<script src="./help-modal.js"></script>
4676
<script src="./app.js"></script>
47-
<!-- APP_SPECIFIC_SCRIPTS -->
77+
<script src="./typing-simulator.js"></script>
4878

4979
<script>
5080
// Your app-specific initialization code goes here

‎client/stats.txt‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
Typing Statistics
2+
==================
3+
4+
Total Errors Made: 0
5+
Errors Left (Unfixed): 0
6+
Total Time: 2.76 seconds
7+
Accuracy: 100.00%
8+
Speed: 87.05 words per minute
9+
10+
Generated: 26/11/2025, 04:24:59

‎client/text-to-input.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

‎client/typing-simulator.css‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
/* typing-simulator.css */
2+
3+
/* Override main-layout grid to use full width (no sidebar in typing simulator) */
4+
.bespoke .main-layout {
5+
grid-template-columns: 1fr;
6+
}
7+
8+
.bespoke .typing-container {
9+
position: relative;
10+
width: 100%;
11+
height: 100%;
12+
display: flex;
13+
flex-direction: column;
14+
align-items: center;
15+
justify-content: center;
16+
padding: var(--UI-Spacing-spacing-xl);
17+
}
18+
19+
.bespoke .typing-text-container {
20+
flex: 1;
21+
position: relative;
22+
overflow-y: auto;
23+
padding: var(--UI-Spacing-spacing-mxl);
24+
background: transparent;
25+
font-family: var(--body-family);
26+
font-size: var(--Fonts-Body-Default-xxxl);
27+
line-height: 140%;
28+
cursor: text;
29+
min-height: 400px;
30+
max-width: 900px;
31+
width: 100%;
32+
margin: var(--UI-Spacing-spacing-4xl) auto 0;
33+
}
34+
35+
.bespoke .typing-text {
36+
white-space: pre-wrap;
37+
word-wrap: break-word;
38+
user-select: none;
39+
text-align: left;
40+
width: 100%;
41+
}
42+
43+
.bespoke .typing-text .char-pending {
44+
color: var(--Colors-Text-Body-Light);
45+
}
46+
47+
.bespoke .typing-text .char-correct {
48+
color: var(--Colors-Text-Body-Strongest);
49+
}
50+
51+
.bespoke .typing-text .char-incorrect {
52+
color: var(--Colors-Alert-Error-Default);
53+
background-color: var(--Colors-Alert-Error-Lighter);
54+
}
55+
56+
.bespoke .typing-text .cursor-position {
57+
position: relative;
58+
}
59+
60+
.bespoke .typing-text .cursor-position::before {
61+
content: '';
62+
position: absolute;
63+
left: -1px;
64+
top: 0;
65+
bottom: 0;
66+
width: 2px;
67+
background-color: var(--Colors-Primary-Default);
68+
animation: blink 1s step-end infinite;
69+
pointer-events: none;
70+
}
71+
72+
@keyframes blink {
73+
0%, 50% {
74+
opacity: 1;
75+
}
76+
51%, 100% {
77+
opacity: 0;
78+
}
79+
}
80+
81+
.bespoke .hidden-input {
82+
position: absolute;
83+
opacity: 0;
84+
pointer-events: none;
85+
width: 0;
86+
height: 0;
87+
border: none;
88+
padding: 0;
89+
margin: 0;
90+
}
91+
92+
.bespoke .restart-button-container {
93+
position: fixed;
94+
bottom: var(--UI-Spacing-spacing-mxl);
95+
left: var(--UI-Spacing-spacing-mxl);
96+
z-index: 1000;
97+
}
98+
99+
.bespoke .restart-button-container button {
100+
display: flex;
101+
align-items: center;
102+
justify-content: center;
103+
width: 40px;
104+
height: 40px;
105+
padding: 0;
106+
border-radius: var(--UI-Radius-radius-s);
107+
}
108+
109+
.bespoke .restart-button-container button:active,
110+
.bespoke .restart-button-container button.active {
111+
box-shadow: none;
112+
border-bottom: none;
113+
color: var(--Colors-Buttons-Text-Primary-Hover);
114+
}
115+
116+
.bespoke .restart-button-container button:focus,
117+
.bespoke .restart-button-container button.focus {
118+
box-shadow: none;
119+
border-bottom: none;
120+
outline: none;
121+
color: var(--Colors-Buttons-Text-Primary-Hover);
122+
}
123+
124+
.bespoke .restart-button-container button svg {
125+
width: 20px;
126+
height: 20px;
127+
}
128+
129+
.bespoke .completion-screen {
130+
display: none;
131+
position: fixed;
132+
top: 50%;
133+
left: 50%;
134+
transform: translate(-50%, -50%);
135+
flex-direction: column;
136+
align-items: center;
137+
justify-content: center;
138+
gap: var(--UI-Spacing-spacing-xl);
139+
padding: var(--UI-Spacing-spacing-xxxl);
140+
background: var(--Colors-Box-Background);
141+
border-radius: var(--UI-Radius-radius-m);
142+
border: 1px solid var(--Colors-Stroke-Default);
143+
text-align: center;
144+
z-index: 1000;
145+
min-width: 400px;
146+
box-shadow: 0 3px 2px 0 var(--Colors-Shadow-Card);
147+
}
148+
149+
.bespoke .completion-screen h2 {
150+
font-size: var(--Fonts-Headlines-md);
151+
margin: 0;
152+
color: var(--Colors-Text-Body-Strongest);
153+
font-family: var(--heading-family);
154+
font-weight: 500;
155+
}
156+
157+
.bespoke .completion-screen p {
158+
font-size: var(--Fonts-Body-Default-lg);
159+
color: var(--Colors-Text-Body-Medium);
160+
margin: 0;
161+
}

0 commit comments

Comments
 (0)