forked from anamolsapkota/typeshala
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
10 lines (9 loc) · 23.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Typing tutor</title>
<link rel="stylesheet" href="Typing%20tutor_files/stylesheet.css" type="text/css" charset="utf-8">
</head>
<body>
<div id="app"><div data-reactroot=""><div><div style="height: 68px; border-bottom: 1px solid rgba(0, 0, 0, 0.2); display: flex; flex-direction: row;"><div style="border-right: 1px solid rgba(0, 0, 0, 0.2); padding: 10px; display: flex; flex-direction: column; justify-content: space-between;"><div>Language Mode</div><div><select><option value="traditional" selected="selected">Preeti (Traditional) </option><option value="english">English</option></select></div></div><div style="border-right: 1px solid rgba(0, 0, 0, 0.2); padding: 10px; display: flex; flex-direction: column; justify-content: space-between;"><div>Keyboard Pratice Range</div><div><select><option value="numRow" selected="selected">Numbers Row</option><option value="topRow">QWERTY Row</option><option value="midRow">ASDF Row</option><option value="lowRow">ZXCV Row</option><option value="allKeys">All Keys</option></select></div></div></div><div style="position: absolute; right: 40px; top: 80px; display: flex; flex-direction: row; text-align: center;"><div style="color: red; text-align: center; padding: 10px;"><div style="font-size: 32px;"><!-- react-text: 22 -->0<!-- /react-text --><span style="font-size: 10px;">%</span></div><div style="font-size: 10px;">accuracy</div></div></div><div style="display: flex; flex-direction: column; align-items: center;"><div style="font-size: 32px; font-family: preetinormal; padding: 50px;"><div style="padding: 10px;">As sa asd dsa asdf fdsa sdf lk</div><div style="padding: 10px; height: 10px;"></div></div><div style="background-color: rgb(238, 238, 238); padding: 10px; font-family: preetinormal;"><div style="display: flex;"><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">~</div><div style="text-align: center; font-size: 25px;">`</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">!</div><div style="text-align: center; font-size: 25px;">1</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">@</div><div style="text-align: center; font-size: 25px;">2</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">#</div><div style="text-align: center; font-size: 25px;">3</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">$</div><div style="text-align: center; font-size: 25px;">4</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">%</div><div style="text-align: center; font-size: 25px;">5</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">^</div><div style="text-align: center; font-size: 25px;">6</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">&</div><div style="text-align: center; font-size: 25px;">7</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">*</div><div style="text-align: center; font-size: 25px;">8</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">(</div><div style="text-align: center; font-size: 25px;">9</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">)</div><div style="text-align: center; font-size: 25px;">0</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">_</div><div style="text-align: center; font-size: 25px;">-</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">+</div><div style="text-align: center; font-size: 25px;">=</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 76.8px; height: 51.2px;"><div style="text-align: center; font-size: 16px;"></div><div style="text-align: center; font-size: 25px;"></div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;">backspace</div></div></div><div style="display: flex;"><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 76.8px; height: 51.2px;"><div style="text-align: center; font-size: 16px;"></div><div style="text-align: center; font-size: 25px;"></div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;">tab</div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">Q</div><div style="text-align: center; font-size: 25px;">q</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">W</div><div style="text-align: center; font-size: 25px;">w</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">E</div><div style="text-align: center; font-size: 25px;">e</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">R</div><div style="text-align: center; font-size: 25px;">r</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">T</div><div style="text-align: center; font-size: 25px;">t</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">Y</div><div style="text-align: center; font-size: 25px;">y</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">U</div><div style="text-align: center; font-size: 25px;">u</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">I</div><div style="text-align: center; font-size: 25px;">i</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">O</div><div style="text-align: center; font-size: 25px;">o</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">P</div><div style="text-align: center; font-size: 25px;">p</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">{</div><div style="text-align: center; font-size: 25px;">[</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">}</div><div style="text-align: center; font-size: 25px;">]</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">|</div><div style="text-align: center; font-size: 25px;">\</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div></div><div style="display: flex;"><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 89.6px; height: 51.2px;"><div style="text-align: center; font-size: 16px;"></div><div style="text-align: center; font-size: 25px;"></div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;">caps lock</div></div><div style="background-color: cyan; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">A</div><div style="text-align: center; font-size: 25px;">a</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">S</div><div style="text-align: center; font-size: 25px;">s</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">D</div><div style="text-align: center; font-size: 25px;">d</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">F</div><div style="text-align: center; font-size: 25px;">f</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">G</div><div style="text-align: center; font-size: 25px;">g</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">H</div><div style="text-align: center; font-size: 25px;">h</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">J</div><div style="text-align: center; font-size: 25px;">j</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">K</div><div style="text-align: center; font-size: 25px;">k</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">L</div><div style="text-align: center; font-size: 25px;">l</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">:</div><div style="text-align: center; font-size: 25px;">;</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">"</div><div style="text-align: center; font-size: 25px;">'</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 96px; height: 51.2px;"><div style="text-align: center; font-size: 16px;"></div><div style="text-align: center; font-size: 25px;"></div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;">enter</div></div></div><div style="display: flex;"><div style="background-color: cyan; margin: 5px; border-radius: 5px; position: relative; width: 120px; height: 51.2px;"><div style="text-align: center; font-size: 16px;"></div><div style="text-align: center; font-size: 25px;"></div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;">shift</div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">Z</div><div style="text-align: center; font-size: 25px;">z</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">X</div><div style="text-align: center; font-size: 25px;">x</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">C</div><div style="text-align: center; font-size: 25px;">c</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">V</div><div style="text-align: center; font-size: 25px;">v</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">B</div><div style="text-align: center; font-size: 25px;">b</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">N</div><div style="text-align: center; font-size: 25px;">n</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">M</div><div style="text-align: center; font-size: 25px;">m</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;"><</div><div style="text-align: center; font-size: 25px;">,</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">></div><div style="text-align: center; font-size: 25px;">.</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 51.2px; height: 51.2px;"><div style="text-align: center; font-size: 16px;">?</div><div style="text-align: center; font-size: 25px;">/</div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;"></div></div><div style="background-color: cyan; margin: 5px; border-radius: 5px; position: relative; width: 120px; height: 51.2px;"><div style="text-align: center; font-size: 16px;"></div><div style="text-align: center; font-size: 25px;"></div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;">shift</div></div></div><div style="display: flex;"><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 48px; height: 51.2px;"><div style="text-align: center; font-size: 16px;"></div><div style="text-align: center; font-size: 25px;"></div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;">fn</div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 48px; height: 51.2px;"><div style="text-align: center; font-size: 16px;"></div><div style="text-align: center; font-size: 25px;"></div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;">control</div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 48px; height: 51.2px;"><div style="text-align: center; font-size: 16px;"></div><div style="text-align: center; font-size: 25px;"></div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;">alt</div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 68.8px; height: 51.2px;"><div style="text-align: center; font-size: 16px;"></div><div style="text-align: center; font-size: 25px;"></div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;">command</div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 288px; height: 51.2px;"><div style="text-align: center; font-size: 16px;"></div><div style="text-align: center; font-size: 25px;"></div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;">space bar</div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 68.8px; height: 51.2px;"><div style="text-align: center; font-size: 16px;"></div><div style="text-align: center; font-size: 25px;"></div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;">command</div></div><div style="background-color: white; margin: 5px; border-radius: 5px; position: relative; width: 48px; height: 51.2px;"><div style="text-align: center; font-size: 16px;"></div><div style="text-align: center; font-size: 25px;"></div><div style="position: absolute; bottom: 5px; right: 10px; text-align: center; font-family: Helvetica; font-size: 11px;">alt</div></div></div></div><!-- react-empty: 275 --></div></div></div></div>
<script src="Typing%20tutor_files/bundle.js"></script>
</body></html>