monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-02-04 04:51:16 +08:00
Code Issues Projects Releases Packages Wiki Activity
monkeytype/frontend/static/index.html
Miodec 047b7cf0fe removed unused code
2022-02-10 01:17:49 +01:00

4794 lines
178 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<script>
document.addEventListener("keydown", function (e) {
if (e.key == "Escape") e.preventDefault();
});
</script>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Monkeytype</title>
<!-- <link rel="stylesheet" href="css/fa.css" /> -->
<link
href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css"
rel="stylesheet"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="css/balloon.css" />
<link rel="stylesheet" href="css/style.css?v=1" />
<link rel="stylesheet" href="themes/serika_dark.css" id="currentTheme" />
<link rel="stylesheet" href="" id="funBoxTheme" />
<link id="favicon" rel="shortcut icon" href="/images/favicon/favicon.ico" />
<link
rel="apple-touch-icon"
sizes="180x180"
href="/images/favicon/apple-touch-icon.png"
/>
<link
rel="mask-icon"
href="/images/favicon/safari-pinned-tab.svg"
color="#eee"
/>
<meta name="msapplication-TileColor" content="#e2b714" />
<meta
name="msapplication-config"
content="/images/favicon/browserconfig.xml"
/>
<meta id="metaThemeColor" name="theme-color" content="#e2b714" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
onerror="this.onerror=null;this.href='css/fa.min.css';"
/>
<link rel="manifest" href="manifest.json" />
<meta name="name" content="Monkeytype" />
<meta name="image" content="https://monkeytype.com/images/mtsocial.png" />
<meta
name="description"
content="A minimalistic, customisable typing website. Test yourself in various modes, track your progress and improve your typing speed."
/>
<meta
name="keywords"
content="typing speed test, typing speedtest, typing test, speedtest, speed test, typing, test, typing-test, typing test, monkey-type, monkeytype, monkey type, monkey-types, monkeytypes, monkey types, types, monkey, type, miodec, wpm, words per minute, typing website, minimalistic, custom typing test, customizable, customisable, themes, random words, smooth caret, smooth, new, new typing site, new typing website, minimalist typing website, minimalistic typing website, minimalist typing test"
/>
<meta name="author" content="Miodec" />
<meta property="og:title" content="Monkeytype" />
<meta property="og:url" content="https://monkeytype.com/" />
<meta property="og:type" content="website" />
<meta
property="og:image"
content="https://monkeytype.com/images/mtsocial.png"
/>
<meta
property="og:description"
content="A minimalistic, customisable typing website. Test yourself in various modes, track your progress and improve your typing speed."
/>
<meta name="twitter:title" content="Monkeytype" />
<meta
name="twitter:image"
content="https://monkeytype.com/images/mtsocial.png"
/>
<meta name="twitter:card" content="summary_large_image" />
<!-- <script type="text/javascript">
window["nitroAds"] = window["nitroAds"] || {
createAd: function () {
window.nitroAds.queue.push(["createAd", arguments]);
},
queue: [],
};
</script> -->
<!-- <script async src="https://s.nitropay.com/ads-693.js"></script> -->
<script
src="https://hb.vntsm.com/v3/live/ad-manager.min.js"
type="text/javascript"
data-site-id="60b78af12119122b8958910f"
data-mode="scan"
id="adScript"
async
></script>
<script>
if ("serviceWorker" in navigator) {
navigator.serviceWorker
.getRegistrations()
.then(function (registrations) {
for (let registration of registrations) {
// if (registration.scope !== "https://monkeytype.com/")
registration.unregister();
}
});
// navigator.serviceWorker.register("sw.js").then((reg) => {
// reg.update();
// });
}
</script>
</head>
<div class="customBackground"></div>
<body>
<noscript>
<div
style="
background: #333;
width: 100vw;
height: 100vh;
left: 0;
top: 0;
position: fixed;
display: grid;
justify-content: center;
align-content: center;
color: #646669;
font-size: 1rem;
font-family: Arial Rounded MT Bold;
z-index: 99999;
padding: 6rem;
box-sizing: border-box;
"
>
<div
style="
display: grid;
justify-content: center;
align-content: center;
max-width: 800px;
gap: 1rem;
"
>
<span style="font-size: 6rem; color: #e2b714">:(</span>
<span style="font-size: 2rem; color: #d1d0c5">
Looks like JavaScript is disabled. Please enable JavaScript in order
to use this website.
</span>
</div>
</div>
</noscript>
<div
id="nocss"
style="
background: #333;
width: 100vw;
height: 100vh;
left: 0;
top: 0;
position: fixed;
display: grid;
justify-content: center;
align-content: center;
color: #646669;
font-size: 1rem;
font-family: Arial Rounded MT Bold;
z-index: 99999;
padding: 6rem;
box-sizing: border-box;
"
>
<div
style="
display: grid;
justify-content: center;
align-content: center;
max-width: 800px;
gap: 1rem;
"
>
<span style="font-size: 6rem; color: #e2b714">:(</span>
<span style="font-size: 2rem; color: #d1d0c5">
It seems like the CSS failed to load. Please clear your cache to
redownload the styles. If that doesn't help contact support.
<br />
(jack@monkeytype.com or discord.gg/monkeytype)
</span>
<span>(ctrl/cmd + shift + r on Chromium browsers)</span>
<span>
If the website works for a bit but then this screen comes back, clear
your cache again and then on Monkeytype open the command line (esc)
and search for "Clear SW cache".
</span>
</div>
</div>
<div id="ad_rich_media" class="hidden"></div>
<div id="backgroundLoader" style="display: none"></div>
<div id="bannerCenter"></div>
<div id="notificationCenter">
<div class="history"></div>
</div>
<div
class="nameChangeMessage"
style="
background-color: var(--main-color);
padding: 0.5rem;
text-align: center;
color: var(--bg-color);
display: none;
"
>
Important information about your account. Please click this message.
</div>
<div id="simplePopupWrapper" class="popupWrapper hidden">
<div id="simplePopup" popupId=""></div>
</div>
<div id="mobileTestConfigPopupWrapper" class="popupWrapper hidden">
<div id="mobileTestConfigPopup">
<div class="group">
<div class="button punctuation">punctuation</div>
<div class="button numbers">numbers</div>
</div>
<div class="spacer"></div>
<div class="group modeGroup">
<div class="button" mode="time">time</div>
<div class="button active" mode="words">words</div>
<div class="button" mode="quote">quote</div>
<div class="button" mode="zen">zen</div>
<div class="button" mode="custom">custom</div>
</div>
<div class="spacer"></div>
<div class="group timeGroup">
<div class="button" time="15">15</div>
<div class="button active" time="30">30</div>
<div class="button" time="60">60</div>
<div class="button" time="120">120</div>
<div class="button" time="custom">custom</div>
</div>
<div class="group wordsGroup hidden">
<div class="button" words="10">10</div>
<div class="button" words="25">25</div>
<div class="button" words="50">50</div>
<div class="button" words="100">100</div>
<div class="button" words="custom">custom</div>
</div>
<div class="group quoteGroup hidden">
<div class="button" quote="-1">all</div>
<div class="button" quote="0">short</div>
<div class="button" quote="1">medium</div>
<div class="button" quote="2">long</div>
<div class="button" quote="3">thicc</div>
<div class="button" quote="-2">search</div>
</div>
<div class="group customGroup hidden">
<div class="button customChange">change</div>
</div>
</div>
</div>
<div id="pbTablesPopupWrapper" class="popupWrapper hidden">
<div id="pbTablesPopup">
<!-- <div class="title">All words personal bests</div> -->
<table>
<thead>
<tr>
<td width="1%">words</td>
<td>
wpm
<br />
<span class="sub">accuracy</span>
</td>
<td>
raw
<br />
<span class="sub">consistency</span>
</td>
<td>difficulty</td>
<td>language</td>
<td>punctuation</td>
<td>lazy mode</td>
<td>date</td>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
<div id="practiseWordsPopupWrapper" class="popupWrapper hidden">
<div id="practiseWordsPopup" action="">
<div class="title">Practice words</div>
<div class="text">
This will start a new test in custom mode. Words that you mistyped
more often or words that you typed much slower will be weighted higher
and appear more often.
</div>
<div class="button missed" tabindex="1">Practice missed</div>
<div class="button slow" tabindex="1">Practice slow</div>
<div class="button both" tabindex="1">Practice both</div>
</div>
</div>
<div id="quoteRatePopupWrapper" class="popupWrapper hidden">
<div id="quoteRatePopup" quoteId="">
<div class="warning">
If you find a grammatical error, think the quote has inappropriate
language or feel like it's low quality -
<span>don't give it a low rating!</span>
Please report it instead. You can do so by closing this popup and
clicking the "Flag" icon.
</div>
<div class="quote">
<div class="text">-</div>
<div class="id">
<div class="top">id</div>
<div class="val">-</div>
</div>
<div class="length">
<div class="top">length</div>
<div class="val">-</div>
</div>
<div class="source">
<div class="top">source</div>
<div class="val">-</div>
</div>
</div>
<div class="spacer"></div>
<div class="spacer2"></div>
<div class="ratingStats">
<div class="ratingCount">
<div class="top">ratings</div>
<div class="val">-</div>
</div>
<div class="ratingAverage">
<div class="top">average</div>
<div class="val">-</div>
</div>
<div class="starsWrapper">
<div class="top">your rating</div>
<div class="stars">
<div class="star active" rating="1">
<i class="fas fa-fw fa-star"></i>
</div>
<div class="star active" rating="2">
<i class="fas fa-fw fa-star"></i>
</div>
<div class="star active" rating="3">
<i class="fas fa-fw fa-star"></i>
</div>
<div class="star" rating="4">
<i class="fas fa-fw fa-star"></i>
</div>
<div class="star" rating="5">
<i class="fas fa-fw fa-star"></i>
</div>
</div>
</div>
</div>
<!-- <div class="button rate1">
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
</div>
<div class="button rate2">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
</div>
<div class="button rate3">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div> -->
<span
aria-label="Submit review"
data-balloon-pos="up"
style="display: grid"
>
<div class="icon-button submitButton">
<i class="fas fa-chevron-right"></i>
</div>
</span>
</div>
</div>
<div id="settingsImportWrapper" class="popupWrapper hidden">
<div id="settingsImport" action="">
<input type="text" />
<div class="button">import settings</div>
</div>
</div>
<div id="customThemeShareWrapper" class="popupWrapper hidden">
<div id="customThemeShare" action="">
<input type="text" />
<div class="button">ok</div>
</div>
</div>
<div id="customTextPopupWrapper" class="popupWrapper hidden">
<div id="customTextPopup" action="">
<div class="wordfilter button">
<i class="fas fa-filter"></i>
Words filter
</div>
<textarea class="textarea" placeholder="Custom text"></textarea>
<div class="inputs">
<label class="checkbox">
<input type="checkbox" />
<div class="customTextCheckbox"></div>
Random
<span>
randomize the above words, and control how many words are
generated.
</span>
</label>
<div class="randomInputFields hidden">
<label class="wordcount">
Word count
<input type="number" value="" min="1" max="10000" />
</label>
<div style="color: var(--sub-color)">or</div>
<label class="time">
Time
<input type="number" value="" min="1" max="10000" />
</label>
</div>
<label class="checkbox typographyCheck">
<input type="checkbox" checked />
<div class="customTextCheckbox customTextTypographyCheckbox"></div>
Remove Fancy Typography
<span>
Standardises typography symbols (for example “ and ” become ")
</span>
</label>
<label class="checkbox delimiterCheck">
<input type="checkbox" />
<div class="customTextCheckbox customTextDelimiterCheckbox"></div>
Pipe Delimiter
<span>
Change how words are separated. Using the pipe delimiter allows
you to randomize groups of words.
</span>
</label>
</div>
<div class="button apply">ok</div>
</div>
</div>
<div id="wordFilterPopupWrapper" class="popupWrapper hidden">
<div id="wordFilterPopup">
<div class="group">
<div class="title">language</div>
<select class="languageInput" class=""></select>
</div>
<div class="group lengthgrid">
<div class="title">min length</div>
<div class="title">max length</div>
<input
class="wordLength wordMinInput"
autocomplete="off"
type="number"
/>
<input
class="wordLength wordMaxInput"
autocomplete="off"
type="number"
/>
</div>
<div class="group">
<div class="title">include</div>
<input class="wordIncludeInput" autocomplete="off" />
</div>
<div class="group">
<div class="title">exclude</div>
<input class="wordExcludeInput" autocomplete="off" />
</div>
<div class="tip">
Use the above filters to include and exclude words or characters
(separated by spaces)
</div>
<div class="tip">
"Set" replaces the current custom word list with the filter result,
"Add" appends the filter result to the current custom word list
</div>
<i
class="fas fa-fw fa-spin fa-circle-notch hidden loadingIndicator"
></i>
<div class="button" id="set">set</div>
<div class="button">add</div>
</div>
</div>
<div id="customWordAmountPopupWrapper" class="popupWrapper hidden">
<div id="customWordAmountPopup">
<div class="title">Word amount</div>
<input type="number" value="1" min="1" max="10000" />
<div class="tip">
You can start an infinite test by inputting 0. Then, to stop the test,
use the Bail Out feature (esc or ctrl/cmd + shift + p > Bail Out)
</div>
<div class="button">ok</div>
</div>
</div>
<div id="customTestDurationPopupWrapper" class="popupWrapper hidden">
<div id="customTestDurationPopup">
<div class="title">Test duration</div>
<div class="preview"></div>
<input value="1" />
<div class="tip">
You can start an infinite test by inputting 0. Then, to stop the test,
use the Bail Out feature (esc or ctrl/cmd + shift + p > Bail Out)
</div>
<div class="button">ok</div>
</div>
</div>
<div id="quoteSearchPopupWrapper" class="popupWrapper hidden">
<div id="quoteSearchPopup" mode="">
<div id="quoteSearchTop">
<div class="title">Quote Search</div>
<div class="buttons">
<div id="gotoSubmitQuoteButton" class="button">
<i class="fas fa-plus"></i>
Submit a quote
</div>
<div id="goToApproveQuotes" class="button">
<i class="fas fa-check"></i>
Approve quotes
</div>
</div>
</div>
<input
id="searchBox"
class="searchBox"
type="text"
maxlength="200"
autocomplete="off"
/>
<div id="extraResults">No search results</div>
<div id="quoteSearchResults" class="quoteSearchResults"></div>
</div>
</div>
<div id="quoteSubmitPopupWrapper" class="popupWrapper hidden">
<div id="quoteSubmitPopup" mode="">
<div class="title">Submit a Quote</div>
<ul>
<li>
Do not include content that contains any libelous or otherwise
unlawful, abusive or obscene text.
</li>
<li>Verify quotes added aren't duplicates of any already present</li>
<li>
Please do not add extremely short quotes (less than 60 characters)
</li>
<li>
<b>
Submitting low quality quotes or misusing this form will cause you
to lose access to this feature
</b>
</li>
</ul>
<label>Quote</label>
<div style="position: relative">
<textarea
id="submitQuoteText"
class=""
type="text"
autocomplete="off"
></textarea>
<div class="characterCount">-</div>
</div>
<label>Source</label>
<input id="submitQuoteSource" class="" type="text" autocomplete="off" />
<label>Language</label>
<select name="language" id="submitQuoteLanguage"></select>
<div
class="g-recaptcha"
data-sitekey="6Lc-V8McAAAAAJ7s6LGNe7MBZnRiwbsbiWts87aj"
></div>
<div id="submitQuoteButton" class="button">Submit</div>
</div>
</div>
<div id="quoteReportPopupWrapper" class="popupWrapper hidden">
<div id="quoteReportPopup" mode="">
<div class="title">Report a Quote</div>
<div class="text">
Please report quotes responsibly. Misuse may result in you losing
access to this feature.
</div>
<label>quote</label>
<div class="quote"></div>
<label>reason</label>
<select name="report-reason" class="reason">
<option value="Grammatical error">Grammatical error</option>
<option value="Inappropriate content">Inappropriate content</option>
<option value="Low quality content">Low quality content</option>
<option value="Incorrect source">Incorrect source</option>
</select>
<label>comment</label>
<div style="position: relative">
<textarea class="comment" type="text" autocomplete="off"></textarea>
<div class="characterCount">-</div>
</div>
<div
class="g-recaptcha"
data-sitekey="6Lc-V8McAAAAAJ7s6LGNe7MBZnRiwbsbiWts87aj"
></div>
<div class="button submit">Report</div>
</div>
</div>
<div id="quoteApprovePopupWrapper" class="popupWrapper hidden">
<div id="quoteApprovePopup" mode="">
<div class="top">
<div class="title">Approve Quotes</div>
<div class="button refreshList">
<i class="fas fa-sync-alt"></i>
Refresh list
</div>
</div>
<div class="quotes"></div>
</div>
</div>
<div id="tagsWrapper" class="popupWrapper hidden">
<div id="tagsEdit" action="" tagid="">
<div class="title"></div>
<input type="text" />
<div class="button"><i class="fas fa-plus"></i></div>
</div>
</div>
<div id="resultEditTagsPanelWrapper" class="popupWrapper hidden">
<div id="resultEditTagsPanel" resultid="">
<div class="buttons"></div>
<div class="button confirmButton"><i class="fas fa-check"></i></div>
</div>
</div>
<div id="presetWrapper" class="popupWrapper hidden">
<div id="presetEdit" action="" presetid="">
<div class="title"></div>
<input type="text" class="text" />
<label class="checkbox">
<input type="checkbox" />
<div class="customTextCheckbox"></div>
Change preset to current settings
</label>
<div class="button"><i class="fas fa-plus"></i></div>
</div>
</div>
<div id="leaderboardsWrapper" class="hidden">
<div id="leaderboards">
<div class="leaderboardsTop">
<div class="mainTitle">Leaderboards</div>
<div class="subTitle">Next update in: --:--</div>
<!-- <div class="buttons">
<div class="buttonGroup">
<div class="button active" board="time_15">time 15</div>
<div class="button" board="time_60">time 60</div>
</div>
</div> -->
</div>
<div class="tables">
<div class="titleAndTable">
<div class="titleAndButtons">
<div class="title">
English Time 15
<i
class="hidden leftTableLoader fas fa-fw fa-spin fa-circle-notch"
></i>
</div>
<div class="buttons">
Jump to:
<div class="button leftTableJumpToTop">
<i class="fas fa-fw fas fa-crown"></i>
<!-- Top -->
</div>
<div class="button leftTableJumpToMe">
<i class="fas fa-fw fas fa-user"></i>
<!-- Me -->
</div>
</div>
</div>
<div class="leftTableWrapper invisible">
<table class="left">
<thead>
<tr>
<td width="1%">#</td>
<td>name</td>
<td class="alignRight" width="15%">
wpm
<br />
<div class="sub">accuracy</div>
</td>
<td class="alignRight" width="15%">
raw
<br />
<div class="sub">consistency</div>
</td>
<td class="alignRight" width="13%">test</td>
<td class="alignRight" width="22%">date</td>
</tr>
</thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
</div>
</div>
<div class="titleAndTable">
<div class="titleAndButtons">
<div class="title">
English Time 60
<i
class="hidden rightTableLoader fas fa-fw fa-spin fa-circle-notch"
></i>
</div>
<div class="buttons">
Jump to:
<div class="button rightTableJumpToTop">
<i class="fas fa-fw fas fa-crown"></i>
<!-- Top -->
</div>
<div class="button rightTableJumpToMe">
<i class="fas fa-fw fas fa-user"></i>
<!-- Me -->
</div>
</div>
</div>
<div class="rightTableWrapper invisible">
<table class="right">
<thead>
<tr>
<td width="1%">#</td>
<td>name</td>
<td class="alignRight" width="15%">
wpm
<br />
<div class="sub">accuracy</div>
</td>
<td class="alignRight" width="15%">
raw
<br />
<div class="sub">consistency</div>
</td>
<td class="alignRight" width="13%">test</td>
<td class="alignRight" width="22%">date</td>
</tr>
</thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="versionHistoryWrapper" class="hidden">
<div id="versionHistory">
<!-- <div class="tip">Click anywhere to dismiss</div> -->
<div class="releases">
<div class="release">
<div class="title">v1</div>
<div class="date">010101</div>
<div class="body">test</div>
</div>
<div class="release">
<div class="title">v2</div>
<div class="date">010101</div>
<div class="body">test</div>
</div>
</div>
</div>
</div>
<div id="supportMeWrapper" class="popupWrapper hidden">
<div id="supportMe">
<div class="title">Support Monkeytype</div>
<div class="text">
Thank you so much for thinking about supporting this project. It would
not be possible without you and your continued support.
<i class="fas fa-heart"></i>
</div>
<div class="buttons">
<div class="button ads">
<div class="icon"><i class="fas fa-ad"></i></div>
<div class="text">Enable Ads</div>
</div>
<a
class="button"
href="https://ko-fi.com/monkeytype"
target="_blank"
rel="noreferrer"
>
<div class="icon"><i class="fas fa-donate"></i></div>
<div class="text">Donate</div>
</a>
<a
class="button"
href="https://www.patreon.com/monkeytype"
target="_blank"
rel="noreferrer"
>
<div class="icon"><i class="fab fa-patreon"></i></div>
<div class="text">
Become
<br />
a Patron
</div>
</a>
<a
class="button"
href="https://monkeytype.store"
target="_blank"
rel="noreferrer"
>
<div class="icon"><i class="fas fa-tshirt"></i></div>
<div class="text">Buy Merch</div>
</a>
</div>
</div>
</div>
<div id="contactPopupWrapper" class="popupWrapper hidden">
<div id="contactPopup">
<div class="title">Contact</div>
<div class="text">
Feel free to send an email to jack@monkeytype.com (the buttons below
will open the default mail client).
<br />
<br />
Please
<span>do not send</span>
requests to delete account, update email, update name or clear
personal bests - you can do that in the settings page.
</div>
<div class="buttons">
<a
class="button"
target="_blank"
href="mailto:jack@monkeytype.com?subject=[Question] "
>
<div class="icon"><i class="fas fa-question-circle"></i></div>
<div class="textGroup">
<div class="text">Question</div>
<!-- <div class="subtext">Confused about something?</div> -->
</div>
</a>
<a
class="button"
target="_blank"
href="mailto:jack@monkeytype.com?subject=[Feedback] "
>
<div class="icon"><i class="fas fa-comment-dots"></i></div>
<div class="textGroup">
<div class="text">Feedback</div>
<!-- <div class="subtext">Feel like the website could be improved?</div> -->
</div>
</a>
<a
class="button"
target="_blank"
href="mailto:jack@monkeytype.com?subject=[Bug] "
>
<div class="icon"><i class="fas fa-bug"></i></div>
<div class="textGroup">
<div class="text">Bug Report</div>
<!-- <div class="subtext">Report any bugs you found. You can also open a new issue on GitHub.</div> -->
</div>
</a>
<a
class="button"
target="_blank"
href="mailto:jack@monkeytype.com?subject=[Account] "
>
<div class="icon"><i class="fas fa-user-circle"></i></div>
<div class="textGroup">
<div class="text">Account Help</div>
<!-- <div class="subtext">Report any problems with your account like login issues.</div> -->
</div>
</a>
<a
class="button"
target="_blank"
href="mailto:jack@monkeytype.com?subject=[Business] "
>
<div class="icon"><i class="fas fa-briefcase"></i></div>
<div class="textGroup">
<div class="text">Business Inquiry</div>
<!-- <div class="subtext">Let's work together.</div> -->
</div>
</a>
<a
class="button"
target="_blank"
href="mailto:jack@monkeytype.com?subject=[Other] "
>
<div class="icon"><i class="fas fa-ellipsis-h"></i></div>
<div class="textGroup">
<div class="text">Other</div>
<!-- <div class="subtext">We will try to help.</div> -->
</div>
</a>
</div>
</div>
</div>
<div id="commandLineWrapper" class="hidden">
<div id="commandLine">
<div
style="
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
"
>
<div class="searchicon">
<i class="fas fa-search"></i>
</div>
<input type="text" class="input" placeholder="Type to search" />
</div>
<div class="separator hidden"></div>
<div class="listTitle">Title</div>
<div class="suggestions"></div>
</div>
<div id="commandInput" class="hidden">
<input type="text" class="input" placeholder="input" />
</div>
</div>
<div id="timerWrapper">
<div id="timer" class="timerMain"></div>
</div>
<div style="display: flex; justify-content: space-around">
<div id="centerContent" class="hidden">
<div id="top">
<div class="logo">
<div class="icon">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
style="isolation: isolate"
viewBox="-680 -1030 300 180"
>
<g>
<path
d="M -430 -910 L -430 -910 C -424.481 -910 -420 -905.519 -420 -900 L -420 -900 C -420 -894.481 -424.481 -890 -430 -890 L -430 -890 C -435.519 -890 -440 -894.481 -440 -900 L -440 -900 C -440 -905.519 -435.519 -910 -430 -910 Z"
/>
<path
d=" M -570 -910 L -510 -910 C -504.481 -910 -500 -905.519 -500 -900 L -500 -900 C -500 -894.481 -504.481 -890 -510 -890 L -570 -890 C -575.519 -890 -580 -894.481 -580 -900 L -580 -900 C -580 -905.519 -575.519 -910 -570 -910 Z "
/>
<path
d="M -590 -970 L -590 -970 C -584.481 -970 -580 -965.519 -580 -960 L -580 -940 C -580 -934.481 -584.481 -930 -590 -930 L -590 -930 C -595.519 -930 -600 -934.481 -600 -940 L -600 -960 C -600 -965.519 -595.519 -970 -590 -970 Z"
/>
<path
d=" M -639.991 -960.515 C -639.72 -976.836 -626.385 -990 -610 -990 L -610 -990 C -602.32 -990 -595.31 -987.108 -590 -982.355 C -584.69 -987.108 -577.68 -990 -570 -990 L -570 -990 C -553.615 -990 -540.28 -976.836 -540.009 -960.515 C -540.001 -960.345 -540 -960.172 -540 -960 L -540 -960 L -540 -940 C -540 -934.481 -544.481 -930 -550 -930 L -550 -930 C -555.519 -930 -560 -934.481 -560 -940 L -560 -960 L -560 -960 C -560 -965.519 -564.481 -970 -570 -970 C -575.519 -970 -580 -965.519 -580 -960 L -580 -960 L -580 -960 L -580 -940 C -580 -934.481 -584.481 -930 -590 -930 L -590 -930 C -595.519 -930 -600 -934.481 -600 -940 L -600 -960 L -600 -960 L -600 -960 L -600 -960 L -600 -960 L -600 -960 L -600 -960 L -600 -960 C -600 -965.519 -604.481 -970 -610 -970 C -615.519 -970 -620 -965.519 -620 -960 L -620 -960 L -620 -940 C -620 -934.481 -624.481 -930 -630 -930 L -630 -930 C -635.519 -930 -640 -934.481 -640 -940 L -640 -960 L -640 -960 C -640 -960.172 -639.996 -960.344 -639.991 -960.515 Z "
/>
<path
d=" M -460 -930 L -460 -900 C -460 -894.481 -464.481 -890 -470 -890 L -470 -890 C -475.519 -890 -480 -894.481 -480 -900 L -480 -930 L -508.82 -930 C -514.99 -930 -520 -934.481 -520 -940 L -520 -940 C -520 -945.519 -514.99 -950 -508.82 -950 L -431.18 -950 C -425.01 -950 -420 -945.519 -420 -940 L -420 -940 C -420 -934.481 -425.01 -930 -431.18 -930 L -460 -930 Z "
/>
<path
d="M -470 -990 L -430 -990 C -424.481 -990 -420 -985.519 -420 -980 L -420 -980 C -420 -974.481 -424.481 -970 -430 -970 L -470 -970 C -475.519 -970 -480 -974.481 -480 -980 L -480 -980 C -480 -985.519 -475.519 -990 -470 -990 Z"
/>
<path
d=" M -630 -910 L -610 -910 C -604.481 -910 -600 -905.519 -600 -900 L -600 -900 C -600 -894.481 -604.481 -890 -610 -890 L -630 -890 C -635.519 -890 -640 -894.481 -640 -900 L -640 -900 C -640 -905.519 -635.519 -910 -630 -910 Z "
/>
<path
d=" M -515 -990 L -510 -990 C -504.481 -990 -500 -985.519 -500 -980 L -500 -980 C -500 -974.481 -504.481 -970 -510 -970 L -515 -970 C -520.519 -970 -525 -974.481 -525 -980 L -525 -980 C -525 -985.519 -520.519 -990 -515 -990 Z "
/>
<path
d=" M -660 -910 L -680 -910 L -680 -980 C -680 -1007.596 -657.596 -1030 -630 -1030 L -430 -1030 C -402.404 -1030 -380 -1007.596 -380 -980 L -380 -900 C -380 -872.404 -402.404 -850 -430 -850 L -630 -850 C -657.596 -850 -680 -872.404 -680 -900 L -680 -920 L -660 -920 L -660 -900 C -660 -883.443 -646.557 -870 -630 -870 L -430 -870 C -413.443 -870 -400 -883.443 -400 -900 L -400 -980 C -400 -996.557 -413.443 -1010 -430 -1010 L -630 -1010 C -646.557 -1010 -660 -996.557 -660 -980 L -660 -910 Z "
/>
</g>
</svg>
</div>
<div class="text">
<div class="top">monkey see</div>
monkeytype
</div>
</div>
<div id="menu">
<a
id="startTestButton"
class="icon-button view-start"
tabindex="2"
href="/"
onclick="this.blur();"
>
<div class="icon">
<i class="fas fa-fw fa-keyboard"></i>
</div>
</a>
<div
class="icon-button leaderboards view-leaderboards"
tabindex="2"
onclick="this.blur();"
>
<div class="icon">
<i class="fas fa-fw fa-crown"></i>
</div>
</div>
<a
class="icon-button view-about"
tabindex="2"
href="/about"
onclick="this.blur();"
>
<div class="icon">
<i class="fas fa-fw fa-info"></i>
</div>
</a>
<!-- <a
class="icon-button discord"
tabindex="2"
href="https://discord.gg/yENzqcB"
onclick="this.blur();"
target="_blank"
style="text-decoration: none;"
>
<div class="icon">
<i class="fab fa-discord"></i>
</div>
</a> -->
<a
class="icon-button view-settings"
tabindex="2"
href="/settings"
onclick="this.blur();"
>
<div class="icon">
<i class="fas fa-fw fa-cog"></i>
</div>
</a>
<a
class="icon-button hidden account view-account"
tabindex="2"
href="/account"
onclick="this.blur();"
>
<div class="icon">
<i class="fas fa-fw fa-user"></i>
</div>
<div class="text"></div>
</a>
<a
class="icon-button login view-login"
tabindex="2"
href="/login"
onclick="this.blur();"
>
<div class="icon">
<i class="far fa-fw fa-user"></i>
</div>
</a>
</div>
<div class="config hidden">
<div class="mobileConfig">
<div class="icon-button">
<i class="fas fa-bars"></i>
</div>
</div>
<div class="desktopConfig">
<div
class="puncAndNum"
style="
display: grid;
grid-auto-flow: column;
padding-top: 0.1rem;
"
>
<div class="group punctuationMode">
<!-- <div class="title">time</div> -->
<div class="buttons">
<div class="text-button toggleButton" tabindex="2">
punctuation
</div>
</div>
</div>
<div class="group numbersMode">
<!-- <div class="title">time</div> -->
<div class="buttons">
<div class="text-button toggleButton" tabindex="2">
numbers
</div>
</div>
</div>
</div>
<div class="group mode">
<!-- <div class="title">mode</div> -->
<div class="buttons">
<div class="text-button active" mode="time" tabindex="2">
time
</div>
<div class="text-button" mode="words" tabindex="2">words</div>
<div class="text-button" mode="quote" tabindex="2">quote</div>
<div class="text-button" mode="zen" tabindex="2">zen</div>
<div class="text-button" mode="custom" tabindex="2">
custom
</div>
</div>
</div>
<div class="group wordCount hidden">
<!-- <div class="title">words</div> -->
<div class="buttons">
<div class="text-button" wordCount="10" tabindex="2">10</div>
<div class="text-button" wordCount="25" tabindex="2">25</div>
<div class="text-button active" wordCount="50" tabindex="2">
50
</div>
<div class="text-button" wordCount="100" tabindex="2">
100
</div>
<div class="text-button" wordCount="custom" tabindex="2">
<i class="fas fa-tools"></i>
</div>
</div>
</div>
<div class="group time">
<!-- <div class="title">time</div> -->
<div class="buttons">
<div class="text-button" timeConfig="15" tabindex="2">15</div>
<div class="text-button active" timeConfig="30" tabindex="2">
30
</div>
<div class="text-button" timeConfig="60" tabindex="2">60</div>
<div class="text-button" timeConfig="120" tabindex="2">
120
</div>
<div class="text-button" timeConfig="custom" tabindex="2">
<i class="fas fa-tools"></i>
</div>
</div>
</div>
<div class="group quoteLength hidden">
<!-- <div class="title">time</div> -->
<div class="buttons">
<div class="text-button" quoteLength="-1" tabindex="2">
all
</div>
<div class="text-button" quoteLength="0" tabindex="2">
short
</div>
<div class="text-button active" quoteLength="1" tabindex="2">
medium
</div>
<div class="text-button" quoteLength="2" tabindex="2">
long
</div>
<div class="text-button" quoteLength="3" tabindex="2">
thicc
</div>
<div class="text-button" quoteLength="-2" tabindex="2">
<i class="fas fa-search"></i>
</div>
</div>
</div>
<div class="group customText hidden">
<!-- <div class="title">time</div> -->
<div class="buttons">
<div class="text-button">change</div>
</div>
</div>
</div>
</div>
<div
class="signOut hidden"
style="grid-column: 3/4; grid-row: 1/2"
tabindex="0"
>
<i class="fas fa-sign-out-alt"></i>
sign out
</div>
</div>
<div id="middle">
<div class="page pageLoading hidden">
<div class="preloader">
<div class="icon">
<i class="fas fa-fw fa-spin fa-circle-notch"></i>
</div>
<div class="barWrapper hidden">
<div class="bar">
<div class="fill"></div>
</div>
<div class="text">‎</div>
</div>
</div>
</div>
<div class="page pageTest hidden">
<div id="typingTest">
<div id="capsWarning" class="hidden">
<i class="fas fa-lock"></i>
Caps Lock
</div>
<div id="memoryTimer">Time left to memorise all words: 0s</div>
<div id="testModesNotice"></div>
<input
id="wordsInput"
class=""
tabindex="0"
type="text"
autocomplete="off"
autocapitalize="off"
autocorrect="off"
/>
<div id="timerNumber" class="timerMain">
<div>60</div>
</div>
<div id="miniTimerAndLiveWpm" class="timerMain size15">
<div class="time hidden">1:00</div>
<div class="wpm">60</div>
<div class="acc">100%</div>
<div class="burst">1</div>
</div>
<div class="outOfFocusWarning hidden">
<i class="fas fa-mouse-pointer"></i>
Click or press any key to focus
</div>
<div id="wordsWrapper" translate="no">
<div id="paceCaret" class="default size15 hidden"></div>
<div id="caret" class="default size15"></div>
<div id="words" class="size15"></div>
</div>
<div class="keymap hidden">
<div class="row r1">
<div></div>
<div class="keymap-key" id="Key1">
<span class="letter">1</span>
</div>
<div class="keymap-key" id="Key2">
<span class="letter">2</span>
</div>
<div class="keymap-key" id="Key3">
<span class="letter">3</span>
</div>
<div class="keymap-key" id="Key4">
<span class="letter">4</span>
</div>
<div class="keymap-key" id="Key5">
<span class="letter">5</span>
</div>
<div class="keymap-key" id="Key6">
<span class="letter">6</span>
</div>
<div class="keymap-split-spacer"></div>
<div class="keymap-key" id="Key7">
<span class="letter">7</span>
</div>
<div class="keymap-key" id="Key8">
<span class="letter">8</span>
</div>
<div class="keymap-key" id="Key9">
<span class="letter">9</span>
</div>
<div class="keymap-key" id="Key0">
<span class="letter">0</span>
</div>
<div class="keymap-key" id="Key-">
<span class="letter">-</span>
</div>
<div class="keymap-key" id="Key=">
<span class="letter">=</span>
</div>
</div>
<div class="row r2">
<div></div>
<div class="keymap-key" id="KeyQ">
<span class="letter">q</span>
</div>
<div class="keymap-key" id="KeyW">
<span class="letter">w</span>
</div>
<div class="keymap-key" id="KeyE">
<span class="letter">e</span>
</div>
<div class="keymap-key" id="KeyR">
<span class="letter">r</span>
</div>
<div class="keymap-key" id="KeyT">
<span class="letter">t</span>
</div>
<div class="keymap-split-spacer"></div>
<div class="keymap-key" id="KeyY">
<span class="letter">y</span>
</div>
<div class="keymap-key" id="KeyU">
<span class="letter">u</span>
</div>
<div class="keymap-key" id="KeyI">
<span class="letter">i</span>
</div>
<div class="keymap-key" id="KeyO">
<span class="letter">o</span>
</div>
<div class="keymap-key" id="KeyP">
<span class="letter">p</span>
</div>
<div class="keymap-key" id="KeyLeftBracket">
<span class="letter">[</span>
</div>
<div class="keymap-key" id="KeyRightBracket">
<span class="letter">]</span>
</div>
<div class="keymap-key hidden-key" id="Backslash">
<span class="letter">\</span>
</div>
</div>
<div class="row r3">
<div></div>
<div class="keymap-key" id="KeyA">
<span class="letter">a</span>
</div>
<div class="keymap-key" id="KeyS">
<span class="letter">s</span>
</div>
<div class="keymap-key" id="KeyD">
<span class="letter">d</span>
</div>
<div class="keymap-key" id="KeyF">
<span class="letter">f</span>
<div class="bump"></div>
</div>
<div class="keymap-key" id="KeyG">
<span class="letter">g</span>
</div>
<div class="keymap-split-spacer"></div>
<div class="keymap-key" id="KeyH">
<span class="letter">h</span>
</div>
<div class="keymap-key" id="KeyJ">
<span class="letter">j</span>
<div class="bump"></div>
</div>
<div class="keymap-key" id="KeyK">
<span class="letter">k</span>
</div>
<div class="keymap-key" id="KeyL">
<span class="letter">l</span>
</div>
<div class="keymap-key" id="KeySemicolon">
<span class="letter">;</span>
</div>
<div class="keymap-key" id="KeyQuote">
<span class="letter">'</span>
</div>
</div>
<div class="row r4">
<div></div>
<div class="keymap-key first" id="KeyZ">
<span class="letter">z</span>
</div>
<div class="keymap-key" id="KeyX">
<span class="letter">x</span>
</div>
<div class="keymap-key" id="KeyC">
<span class="letter">c</span>
</div>
<div class="keymap-key" id="KeyV">
<span class="letter">v</span>
</div>
<div class="keymap-key" id="KeyB">
<span class="letter">b</span>
</div>
<div class="keymap-key" id="KeyN">
<span class="letter">n</span>
</div>
<div class="keymap-split-spacer"></div>
<div class="extraKey">
<span class="letter"></span>
</div>
<div class="keymap-key" id="KeyM">
<span class="letter">m</span>
</div>
<div class="keymap-key" id="KeyComma">
<span class="letter">,</span>
</div>
<div class="keymap-key" id="KeyPeriod">
<span class="letter">.</span>
</div>
<div class="keymap-key" id="KeySlash">
<span class="letter">/</span>
</div>
<div class="keymap-key last">
<span class="letter"></span>
</div>
</div>
<div class="row r5">
<div></div>
<div class="keymap-key key-split-space" id="KeySpace">
<span class="letter"></span>
</div>
<div class="keymap-split-spacer"></div>
<div class="keymap-key key-split-space" id="KeySpace2">
<span class="letter"></span>
</div>
<div class="keymap-key hidden-key">
<span class="letter"></span>
</div>
</div>
</div>
<div id="largeLiveWpmAndAcc" class="timerMain">
<div id="liveWpm" class="hidden">123</div>
<div id="liveAcc" class="hidden">100%%</div>
<div id="liveBurst" class="hidden">1</div>
</div>
<div
id="restartTestButton"
aria-label="Restart Test"
data-balloon-pos="down"
class=""
tabindex="0"
onclick="this.blur();"
>
<i class="fas fa-fw fa-redo-alt"></i>
</div>
<div id="monkey" class="hidden">
<div class="up"></div>
<div class="left hidden"></div>
<div class="right hidden"></div>
<div class="both hidden"></div>
<div class="fast">
<div class="up"></div>
<div class="left hidden"></div>
<div class="right hidden"></div>
<div class="both hidden"></div>
</div>
</div>
<div id="premidTestMode" class="hidden"></div>
<div id="premidSecondsLeft" class="hidden"></div>
</div>
<div id="result" tabindex="0" class="hidden">
<div class="stats">
<!-- <div class="info">words 10<br>punctuation</div> -->
<div class="group wpm">
<div class="top">
<div class="text">wpm</div>
<div
class="crown hidden"
aria-label=""
data-balloon-pos="up"
>
<i class="fas fa-crown"></i>
</div>
</div>
<div class="bottom" aria-label="" data-balloon-pos="up">
-
</div>
</div>
<div class="group acc">
<div class="top">acc</div>
<div class="bottom" aria-label="" data-balloon-pos="up">
-
</div>
</div>
</div>
<div class="stats morestats">
<div class="group testType">
<div class="top">test type</div>
<div class="bottom">-</div>
<div class="tags hidden" style="margin-top: 0.5rem">
<div class="top">tags</div>
<div class="bottom">-</div>
</div>
</div>
<!-- <div class="group infoAndTags"> -->
<div class="group info">
<div class="top">other</div>
<div class="bottom">-</div>
</div>
<!-- </div> -->
<!-- <div class="subgroup"> -->
<div class="group raw">
<div class="top">raw</div>
<div class="bottom" aria-label="" data-balloon-pos="up">
-
</div>
</div>
<div class="group key">
<div class="top">characters</div>
<div
class="bottom"
aria-label="correct, incorrect, extra, and missed"
data-balloon-break=""
data-balloon-pos="up"
>
-
</div>
</div>
<!-- </div> -->
<!-- <div class="subgroup"> -->
<div class="group flat consistency">
<div class="top">consistency</div>
<div class="bottom" aria-label="" data-balloon-pos="up">
2 -
</div>
</div>
<div class="group time">
<div class="top">time</div>
<div class="bottom" aria-label="" data-balloon-pos="up">
<div class="text">-</div>
<div class="afk"></div>
<div class="timeToday"></div>
</div>
</div>
<!-- </div> -->
<div class="group source hidden">
<div class="top">
source
<span
id="reportQuoteButton"
class="icon-button hidden"
aria-label="Report quote"
data-balloon-pos="up"
style="display: inline-block"
>
<i class="icon fas fa-flag"></i>
</span>
<span
id="rateQuoteButton"
class="icon-button hidden"
aria-label="Rate quote"
data-balloon-pos="up"
>
<i class="icon far fa-star"></i>
<span class="rating"></span>
</span>
</div>
<div class="bottom">-</div>
</div>
</div>
<div class="chart">
<!-- <div class="title">wpm over time</div> -->
<canvas id="wpmChart"></canvas>
</div>
<div class="loginTip">
<span class="link">Sign in</span>
to save your result
</div>
<div class="bottom" style="grid-column: 1/3">
<div id="resultWordsHistory" class="hidden">
<div class="title">
input history
<span
id="copyWordsListButton"
class="icon-button"
aria-label="Copy words list"
data-balloon-pos="up"
style="display: inline-block"
>
<i class="fas fa-fw fa-copy"></i>
</span>
<span
id="toggleBurstHeatmap"
class="icon-button"
aria-label="Toggle burst heatmap"
data-balloon-pos="up"
style="display: inline-block"
>
<i class="fas fa-fw fa-fire-alt"></i>
</span>
<div class="heatmapLegend hidden">
<div>slow</div>
<div class="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div>fast</div>
</div>
</div>
<div class="words"></div>
</div>
<div id="resultReplay" class="hidden">
<div class="title">
watch replay
<span
id="playpauseReplayButton"
class="icon-button"
aria-label="Start replay"
data-balloon-pos="up"
style="display: inline-block"
>
<i class="fas fa-play"></i>
</span>
<p id="replayStopwatch">0s</p>
</div>
<div id="wordsWrapper">
<div id="replayWords" class="words"></div>
</div>
</div>
<div
id="retrySavingResultButton"
class="hidden"
tabindex="0"
onclick="this.blur();"
>
<i class="fas fa-redo"></i>
Retry saving result
</div>
<div class="buttons">
<div
id="nextTestButton"
aria-label="Next test"
data-balloon-pos="down"
tabindex="0"
onclick="this.blur();"
>
<i class="fas fa-fw fa-chevron-right"></i>
</div>
<div
id="restartTestButtonWithSameWordset"
aria-label="Repeat test"
data-balloon-pos="down"
tabindex="0"
onclick="this.blur();"
>
<i class="fas fa-fw fa-sync-alt"></i>
</div>
<div
id="practiseWordsButton"
aria-label="Practice words"
data-balloon-pos="down"
tabindex="0"
onclick="this.blur();"
>
<i class="fas fa-fw fa-exclamation-triangle"></i>
</div>
<div
id="showWordHistoryButton"
aria-label="Toggle words history"
data-balloon-pos="down"
tabindex="0"
onclick="this.blur();"
>
<i class="fas fa-fw fa-align-left"></i>
</div>
<div
id="watchReplayButton"
aria-label="Watch replay"
data-balloon-pos="down"
tabindex="0"
onclick="this.blur();"
>
<i class="fas fa-fw fa-backward"></i>
</div>
<div
id="saveScreenshotButton"
aria-label="Save screenshot"
data-balloon-pos="down"
tabindex="0"
onclick="this.blur();"
>
<i class="far fa-fw fa-image"></i>
</div>
</div>
</div>
<div class="ssWatermark hidden">monkeytype.com</div>
</div>
</div>
<div class="page pageAbout hidden">
<div class="scrollToTopButton invisible">
<i class="fas fa-angle-double-up"></i>
</div>
<div class="created">
Created with love by Miodec.
<a href="#supporters_title">Supported</a>
and
<a href="#contributors_title">expanded</a>
by many awesome people. Launched on 15th of May, 2020.
</div>
<div class="section">
<div class="title">about</div>
<!-- <h1>about</h1> -->
<p>
Monkeytype is a minimalistic typing test, featuring many test
modes, an account system to save your typing speed history and
user configurable features like themes, a smooth caret and more.
</p>
</div>
<div class="section">
<h1>word set</h1>
<p>
By default, this website uses the most common 200 words in the
English language to generate its tests. You can change to an
expanded set (1000 most common words) in the options, or change
the language entirely.
</p>
</div>
<div class="section">
<h1>keybinds</h1>
<p>
You can use
<key>tab</key>
and
<key>enter</key>
(or just
<key>tab</key>
if you have quick tab mode enabled) to restart the typing test.
Open the command line by pressing
<key>ctrl/cmd</key>
+
<key>shift</key>
+
<key>p</key>
or
<key>esc</key>
- there you can access all the functionality you need without
touching your mouse
</p>
</div>
<div class="section">
<h1>stats</h1>
<p>
wpm - total amount of characters in the correctly typed words
(including spaces), divided by 5 and normalised to 60 seconds.
</p>
<p>
raw wpm - calculated just like wpm, but also includes incorrect
words.
</p>
<p>acc - percentage of correctly pressed keys.</p>
<p>
char - correct characters / incorrect characters. Calculated
after the test has ended.
</p>
<p>
consistency - based on the variance of your raw wpm. Closer to
100% is better. Calculated using the coefficient of variation of
raw wpm and mapped onto a scale from 0 to 100.
</p>
</div>
<div id="ad_about1" class="hidden"></div>
<div class="section">
<h1>results screen</h1>
<p>
After completing a test you will be able to see your wpm, raw
wpm, accuracy, character stats, test length, leaderboards info
and test info. (you can hover over some values to get floating
point numbers). You can also see a graph of your wpm and raw
over the duration of the test. Remember that the wpm line is a
global average, while the raw wpm line is a local, momentary
value. (meaning if you stop, the value is 0)
</p>
</div>
<div class="section">
<h1>bug report or feature request</h1>
<p>
If you encounter a bug, or have a feature request - join the
Discord server, send me an email, a direct message on Twitter or
create an issue on GitHub.
</p>
</div>
<div class="section">
<div class="title">support</div>
<p>
Thanks to everyone who has supported this project. It would not
be possible without you and your continued support.
</p>
<div class="supportButtons">
<a class="button ads">
<div class="fas fa-ad"></div>
Ads
</a>
<a
class="button"
href="https://ko-fi.com/monkeytype"
target="_blank"
rel="noreferrer"
>
<div class="fas fa-donate"></div>
Ko-Fi
</a>
<a
class="button"
href="https://www.patreon.com/monkeytype"
target="_blank"
rel="noreferrer"
>
<div class="fab fa-patreon"></div>
Patreon
</a>
<a
class="button"
href="https://monkeytype.store"
target="_blank"
rel="noreferrer"
>
<div class="fas fa-tshirt"></div>
Merch
</a>
</div>
</div>
<div class="section">
<div class="title">contact</div>
<p>
If you encounter a bug, have a feature request or just want to
say hi - here are the different ways you can contact me
directly.
</p>
<div class="contactButtons">
<a
class="button"
href="mailto:jack@monkeytype.com"
target="_blank"
>
<div class="fas fa-envelope"></div>
Mail
</a>
<a
class="button"
href="https://twitter.com/monkeytypegame"
target="_blank"
rel="noreferrer"
>
<div class="fab fa-twitter"></div>
Twitter
</a>
<a
class="button"
href="https://discord.gg/monkeytype"
target="_blank"
rel="noreferrer"
>
<div class="fab fa-discord"></div>
Discord
</a>
<a
class="button"
href="https://github.com/Miodec/monkeytype"
target="_blank"
rel="noreferrer"
>
<div class="fab fa-github"></div>
GitHub
</a>
</div>
</div>
<div class="section">
<div class="title">credits</div>
<p>
<a
href="https://www.reddit.com/user/montydrei"
target="_blank"
rel="noreferrer"
>
Montydrei
</a>
for the name suggestion
</p>
<p>
<a
href="https://www.reddit.com/r/MechanicalKeyboards/comments/gc6wx3/experimenting_with_a_completely_new_type_of/"
target="_blank"
rel="noreferrer"
>
Everyone
</a>
who provided valuable feedback on the original reddit post for
the prototype of this website
</p>
<p>
<a href="#supporters_title">Supporters</a>
who helped financially by donating, enabling optional ads or
buying merch
</p>
<p>
<a
href="https://github.com/Miodec/monkeytype/graphs/contributors"
target="_blank"
rel="noreferrer"
>
Contributors
</a>
on GitHub that have helped with implementing various features,
adding themes and more
</p>
</div>
<div id="ad_about2" class="hidden"></div>
<div class="section">
<h1 id="supporters_title">supporters</h1>
<div class="supporters"></div>
</div>
<div class="section">
<h1 id="contributors_title">contributors</h1>
<div class="contributors"></div>
</div>
</div>
<div class="page pageSettings hidden">
<div class="scrollToTopButton">
<i class="fas fa-angle-double-up"></i>
</div>
<div class="tip">
tip: You can also change all these settings quickly using the
command line (
<key>ctrl/cmd</key>
+
<key>shift</key>
+
<key>p</key>
or
<key>esc</key>
)
</div>
<!-- <div class="sectionGroupTitle">quick navigation</div> -->
<div class="settingsGroup quickNav">
<div class="links">
<a href="#group_account">account</a>
<a href="#group_behavior">behavior</a>
<a href="#group_input">input</a>
<a href="#group_sound">sound</a>
<a href="#group_caret">caret</a>
<a href="#group_appearance">appearance</a>
<a href="#group_theme">theme</a>
<a href="#group_hideElements">hide elements</a>
<a href="#group_dangerZone">danger zone</a>
</div>
</div>
<div id="ad_settings0" class="hidden"></div>
<div
id="group_account"
class="sectionGroupTitle hidden"
group="account"
>
account
<i class="fas fa-chevron-down"></i>
</div>
<div class="settingsGroup account hidden">
<div class="section discordIntegration">
<h1>discord integration</h1>
<div class="text">
When you connect your monkeytype account to your Discord
account, you will be automatically assigned a new role every
time you achieve a new personal best in a 60 second test. If
you pair your accounts before joining the Discord server, the
bot
<i>will not</i>
give you a role.
</div>
<div class="buttons">
<a
class="button"
href="https://discord.com/api/oauth2/authorize?client_id=798272335035498557&redirect_uri=https%3A%2F%2Fmonkeytype.com%2Fverify&response_type=token&scope=identify"
style="text-decoration: none"
>
Link with Discord
</a>
</div>
<div class="info hidden">
<div>
<i class="fas fa-check"></i>
Your accounts are paired!
</div>
<div
id="unlinkDiscordButton"
class="text-button"
aria-label="Unlink"
data-balloon-pos="up"
>
<i class="fas fa-unlink" aria-hidden="true"></i>
</div>
</div>
</div>
<div class="section tags">
<h1>tags</h1>
<div class="text">
With tags, you can compare how fast you're typing in different
situations. You can see your active tags above the test words.
They will remain active until you deactivate them, or refresh
the page.
</div>
<div class="tagsListAndButton">
<div class="tagsList">
<div class="tag" id="0">
<div class="active">
<i class="fas fa-check-square"></i>
</div>
<div class="title">staggered</div>
<div class="editButton"><i class="fas fa-pen"></i></div>
<div class="removeButton">
<i class="fas fa-trash"></i>
</div>
</div>
</div>
<div class="addTagButton"><i class="fas fa-plus"></i></div>
</div>
</div>
<div class="section presets">
<h1>presets</h1>
<div class="text">
Create settings presets that can be applied with one click.
Remember to edit your preset if you make any changes - they
don't save on their own.
</div>
<div class="presetsListAndButton">
<div class="presetsList">
<div class="buttons preset" id="0">
<div class="presetButton button">
<div class="title">staggered</div>
</div>
<div class="editButton button">
<i class="fas fa-pen"></i>
</div>
<div class="removeButton button">
<i class="fas fa-trash"></i>
</div>
</div>
</div>
<div class="addPresetButton"><i class="fas fa-plus"></i></div>
</div>
</div>
<div class="sectionSpacer"></div>
</div>
<div id="group_behavior" class="sectionGroupTitle" group="behavior">
behavior
<i class="fas fa-chevron-down"></i>
</div>
<div class="settingsGroup behavior">
<div class="section difficulty">
<h1>test difficulty</h1>
<div class="text">
Normal is the classic type test experience. Expert fails the
test if you submit (press space) an incorrect word. Master
fails if you press a single incorrect key (meaning you have to
achieve 100% accuracy).
</div>
<div class="buttons">
<div
class="button"
difficulty="normal"
tabindex="0"
onclick="this.blur();"
>
normal
</div>
<div
class="button"
difficulty="expert"
tabindex="0"
onclick="this.blur();"
>
expert
</div>
<div
class="button"
difficulty="master"
tabindex="0"
onclick="this.blur();"
>
master
</div>
</div>
</div>
<div class="section quickTab" id="quickTab">
<h1>quick tab mode</h1>
<div class="text">
Press
<key>tab</key>
to quickly restart the test, or to quickly jump to the test
page. This function disables tab navigation on the website.
</div>
<div class="buttons">
<div class="button off" tabindex="0" onclick="this.blur();">
off
</div>
<div class="button on" tabindex="0" onclick="this.blur();">
on
</div>
</div>
</div>
<div class="section repeatQuotes" id="repeatQuotes">
<h1>repeat quotes</h1>
<div class="text">
This setting changes the restarting behavior when typing in
quote mode. Changing it to 'typing' will repeat the quote if
you restart while typing.
</div>
<!-- , and 'always' will always repeat the quote (you will need to press <key>shift + tab</key> to move on to the next quote). -->
<div class="buttons">
<div
class="button"
repeatQuotes="off"
tabindex="0"
onclick="this.blur();"
>
off
</div>
<div
class="button"
repeatQuotes="typing"
tabindex="0"
onclick="this.blur();"
>
typing
</div>
<!-- <div class="button" repeatQuotes="always" tabindex="0" onclick="this.blur();">
always
</div> -->
</div>
</div>
<div class="section blindMode">
<h1>blind mode</h1>
<div class="text">
No errors or incorrect words are highlighted. Helps you to
focus on raw speed. If enabled, quick end is recommended.
</div>
<div class="buttons">
<div class="button off" tabindex="0" onclick="this.blur();">
off
</div>
<div class="button on" tabindex="0" onclick="this.blur();">
⠀
</div>
</div>
</div>
<!-- <div class="section readAheadMode">
<h1>read ahead mode</h1>
<div class="text">
When enabled, the active and immediately following test words
will be hidden. Helps you practice reading ahead.
</div>
<div class="buttons">
<div class="button off" tabindex="0" onclick="this.blur();">
off
</div>
<div class="button on" tabindex="0" onclick="this.blur();">
on
</div>
</div>
</div> -->
<div class="section alwaysShowWordsHistory">
<h1>always show words history</h1>
<div class="text">
This option will automatically show the words history at the
end of the test. Can cause slight lag with a lot of words.
</div>
<div class="buttons">
<div class="button off" tabindex="0" onclick="this.blur();">
off
</div>
<div class="button on" tabindex="0" onclick="this.blur();">
on
</div>
</div>
</div>
<div class="section singleListCommandLine">
<h1>single list command line</h1>
<div class="text">
When enabled, it will show the command line with all commands
in a single list instead of submenu arrangements. Selecting
'manual' will expose all commands only after typing
<key>></key>
.
</div>
<div class="buttons">
<div
class="button"
singleListCommandLine="manual"
tabindex="0"
onclick="this.blur();"
>
manual
</div>
<div
class="button"
singleListCommandLine="on"
tabindex="0"
onclick="this.blur();"
>
on
</div>
</div>
</div>
<div class="section minWpm" section="">
<h1>min wpm</h1>
<div class="text">
Automatically fails a test if your WPM falls below a
threshold.
</div>
<div>
<div class="inputAndButton">
<input
type="number"
placeholder="min wpm"
class="input customMinWpmSpeed"
tabindex="0"
min="0"
step="1"
value=""
/>
<div
class="button save"
tabindex="0"
onclick="this.blur();"
>
<i class="fas fa-save fa-fw"></i>
</div>
</div>
<div class="buttons">
<div
class="button"
minWpm="off"
tabindex="0"
onclick="this.blur();"
>
off
</div>
<div
class="button"
minWpm="custom"
tabindex="0"
onclick="this.blur();"
>
custom
</div>
</div>
</div>
</div>
<div class="section minAcc" section="">
<h1>min accuracy</h1>
<div class="text">
Automatically fails a test if your accuracy falls below a
threshold.
</div>
<div>
<div class="inputAndButton">
<input
type="number"
placeholder="min accuracy"
class="input customMinAcc"
tabindex="0"
min="0"
step="1"
value=""
/>
<div
class="button save"
tabindex="0"
onclick="this.blur();"
>
<i class="fas fa-save fa-fw"></i>
</div>
</div>
<div class="buttons">
<div
class="button"
minAcc="off"
tabindex="0"
onclick="this.blur();"
>
off
</div>
<div
class="button"
minAcc="custom"
tabindex="0"
onclick="this.blur();"
>
custom
</div>
</div>
</div>
</div>
<div class="section minBurst" section="">
<h1>min burst</h1>
<div class="text">
Automatically fails a test if your raw for a single word falls
below this threshold. Selecting 'flex' allows for this
threshold to automatically decrease for longer words.
</div>
<div>
<div class="inputAndButton">
<input
type="number"
placeholder="min burst"
class="input customMinBurst"
tabindex="0"
min="0"
step="1"
value=""
/>
<div
class="button save"
tabindex="0"
onclick="this.blur();"
>
<i class="fas fa-save fa-fw"></i>
</div>
</div>
<div class="buttons">
<div
class="button"
minBurst="off"
tabindex="0"
onclick="this.blur();"
>
off
</div>
<div
class="button"
minBurst="fixed"
tabindex="0"
onclick="this.blur();"
>
fixed
</div>
<div
class="button"
minBurst="flex"
tabindex="0"
onclick="this.blur();"
>
flex
</div>
</div>
</div>
</div>
<div class="section britishEnglish" section="">
<h1>british english</h1>
<div class="text">
When enabled, the website will use the British spelling
instead of American. Note that this might not replace all
words correctly. If you find any issues, please let us know.
</div>
<div>
<div class="buttons">
<div
class="button off active"
tabindex="0"
onclick="this.blur();"
>
off
</div>
<div class="button on" tabindex="0" onclick="this.blur();">
on
</div>
</div>
</div>
</div>
<div class="section languageGroups fullWidth">
<h1>language groups</h1>
<div class="buttons"></div>
</div>
<div class="section language fullWidth">
<h1>language</h1>
<div class="buttons"></div>
</div>
<div class="section funbox fullWidth">
<h1>funbox</h1>
<div class="text">
These are special modes that change the website in some
special way (by altering the word generation, behavior of the
website or the looks). Give each one of them a try!
</div>
<div class="buttons"></div>
</div>
<div class="sectionSpacer"></div>
<div class="section customLayoutfluid">
<h1>custom layoutfluid</h1>
<div class="text">
Select which layouts you want the layoutfluid funbox to cycle
through.
</div>
<div class="inputAndButton">
<input
type="text"
placeholder="layouts (separated by space)"
class="input"
tabindex="0"
/>
<div class="button save" tabindex="0" onclick="this.blur();">
<i class="fas fa-save fa-fw"></i>
</div>
</div>
</div>
<div class="sectionSpacer"></div>
</div>
<div id="group_input" class="sectionGroupTitle" group="input">
input
<i class="fas fa-chevron-down"></i>
</div>
<div class="settingsGroup input">
<div class="section freedomMode">
<h1>freedom mode</h1>
<div class="text">
Allows you to delete any word, even if it was typed correctly.
</div>
<div class="buttons">
<div class="button off" tabindex="0" onclick="this.blur();">
off
</div>
<div class="button on" tabindex="0" onclick="this.blur();">
on
</div>
</div>
</div>
<div class="section strictSpace">
<h1>strict space</h1>
<div class="text">
Pressing space at the beginning of a word will insert a space
character when this mode is enabled.
</div>
<div class="buttons">
<div class="button off" tabindex="0" onclick="this.blur();">
off
</div>
<div class="button on" tabindex="0" onclick="this.blur();">
on
</div>
</div>
</div>
<div class="section oppositeShiftMode">
<h1>opposite shift mode</h1>
<div class="text">
This mode will force you to use opposite
<key>shift</key>
keys for shifting. Using an incorrect one will count as an
error. This feature ignores keys in locations
<key>B</key>
,
<key>Y</key>
, and
<key>^</key>
because many people use the other hand for those keys. If
you're using external software to emulate your layout
(including QMK), you should use the "keymap" mode - the
standard "on" will not work. This will enforce opposite shift
based on the "keymap layout" setting.
</div>
<div class="buttons">
<div
class="button"
oppositeShiftMode="off"
tabindex="0"
onclick="this.blur();"
>
off
</div>
<div
class="button"
oppositeShiftMode="on"
tabindex="0"
onclick="this.blur();"
>
on
</div>
<div
class="button"
oppositeShiftMode="keymap"
tabindex="0"
onclick="this.blur();"
>
keymap
</div>
</div>
</div>
<div class="section stopOnError">
<h1>stop on error</h1>
<div class="text">
Letter mode will stop input when pressing any incorrect
letters. Word mode will not allow you to continue to the next
word until you correct all mistakes.
</div>
<div class="buttons">
<div
class="button"
stopOnError="off"
tabindex="0"
onclick="this.blur();"
>
off
</div>
<div
class="button"
stopOnError="word"
tabindex="0"
onclick="this.blur();"
>
word
</div>
<div
class="button"
stopOnError="letter"
tabindex="0"
onclick="this.blur();"
>
letter
</div>
</div>
</div>
<div class="section confidenceMode">
<h1>confidence mode</h1>
<div class="text">
When enabled, you will not be able to go back to previous
words to fix mistakes. When turned up to the max, you won't be
able to backspace at all.
</div>
<div class="buttons">
<div
class="button"
confidenceMode="off"
tabindex="0"
onclick="this.blur();"
>
off
</div>
<div
class="button"
confidenceMode="on"
tabindex="0"
onclick="this.blur();"
>
on
</div>
<div
class="button"
confidenceMode="max"
tabindex="0"
onclick="this.blur();"
>
max
</div>
</div>
</div>
<div class="section quickEnd">
<h1>quick end</h1>
<div class="text">
This only applies to the words mode - when enabled, the test
will end as soon as the last word has been typed, even if it's
incorrect. When disabled, you need to manually confirm the
last incorrect entry with a space.
</div>
<div class="buttons">
<div class="button off" tabindex="0" onclick="this.blur();">
off
</div>
<div class="button on" tabindex="0" onclick="this.blur();">
on
</div>
</div>
</div>
<div class="section indicateTypos" section="">
<h1>indicate typos</h1>
<div class="text">
Shows typos that you've made. Below shows what you typed below
the letters and replace will replace the letters with the ones
you typed.
</div>
<div class="buttons">
<div
class="button"
indicateTypos="off"
tabindex="0"
onclick="this.blur();"
>
off
</div>
<div
class="button"
indicateTypos="below"
tabindex="0"
onclick="this.blur();"
>
below
</div>
<div
class="button"
indicateTypos="replace"
tabindex="0"
onclick="this.blur();"
>
replace
</div>
</div>
</div>
<div class="section hideExtraLetters" section="">
<h1>hide extra letters</h1>
<div class="text">
Hides extra letters. This will completely avoid words jumping
lines (due to changing width), but might feel a bit confusing
when you press a key and nothing happens.
</div>
<div class="buttons">
<div class="button off" tabindex="0" onclick="this.blur();">
off
</div>
<div class="button on" tabindex="0" onclick="this.blur();">
on
</div>
</div>
</div>
<div class="section swapEscAndTab" section="">
<h1>swap esc and tab</h1>
<div class="text">
Swap the behavior of tab and escape keys.
</div>
<div class="buttons">
<div class="button off" tabindex="0" onclick="this.blur();">
off
</div>
<div class="button on" tabindex="0" onclick="this.blur();">
on
</div>
</div>
</div>
<div class="section lazyMode">
<h1>lazy mode</h1>
<div class="text">
Replaces accented letters with their normal equivalents.
</div>
<div class="buttons">
<div class="button off" tabindex="0" onclick="this.blur();">
off
</div>
<div class="button on" tabindex="0" onclick="this.blur();">
on
</div>
</div>
</div>
<div class="section layout fullWidth">
<h1>layout emulator</h1>
<div class="text">
With this setting you can emulate other layouts. This setting
is best kept off, as it can break things like dead keys and
alt layers.
</div>
<div class="buttons"></div>
</div>
<div class="sectionSpacer"></div>
</div>
<div id="ad_settings1" class="hidden"></div>
<div id="group_sound" class="sectionGroupTitle" group="sound">
sound
<i class="fas fa-chevron-down"></i>
</div>
<div class="settingsGroup sound">
<div class="section soundVolume">
<h1>sound volume</h1>
<div class="text">Change the volume of the sound effects.</div>
<div class="buttons">
<div
class="button"
soundVolume="0.1"
tabindex="0"
onclick="this.blur();"
>
quiet
</div>
<div
class="button"
soundVolume="0.5"
tabindex="0"
onclick="this.blur();"
>
medium
</div>
<div
class="button"
soundVolume="1.0"
tabindex="0"
onclick="this.blur();"
>
loud
</div>
</div>
</div>
<div class="section playSoundOnClick fullWidth">
<h1>play sound on click</h1>
<div class="text">
Plays a short sound when you press a key.
</div>
<div class="buttons">
<div
class="button"
playSoundOnClick="off"
tabindex="0"
onclick="this.blur();"
>
off
</div>
<div
class="button"
playSoundOnClick="1"
tabindex="0"
onclick="this.blur();"
>
click
</div>
<div
class="button"
playSoundOnClick="2"
tabindex="0"
onclick="this.blur();"
>
beep
</div>
<div
class="button"
playSoundOnClick="3"
tabindex="0"
onclick="this.blur();"
>
pop
</div>
<div
class="button"
playSoundOnClick="4"
tabindex="0"
onclick="this.blur();"
>
nk creams
</div>
<div
class="button"
playSoundOnClick="5"
tabindex="0"
onclick="this.blur();"
>
typewriter
</div>
<div
class="button"
playSoundOnClick="6"
tabindex="0"
onclick="this.blur();"
>
osu
</div>
<div
class="button"
playSoundOnClick="7"
tabindex="0"
onclick="this.blur();"
>
hitmarker
</div>
</div>
</div>
<div class="section playSoundOnError">
<h1>play sound on error</h1>
<div class="text">
Plays a short sound if you press an incorrect key or press
space too early.
</div>
<div class="buttons">
<div class="button off" tabindex="0" onclick="this.blur();">
off
</div>
<div class="button on" tabindex="0" onclick="this.blur();">
on
</div>
</div>
</div>
<div class="sectionSpacer"></div>
</div>
<div id="group_caret" class="sectionGroupTitle" group="caret">
caret
<i class="fas fa-chevron-down"></i>
</div>
<div class="settingsGroup caret">
<div class="section smoothCaret" section="">
<h1>smooth caret</h1>
<div class="text">
The caret will move smoothly between letters and words.
</div>
<div class="buttons">
<div class="button off" tabindex="0" onclick="this.blur();">
off
</div>
<div class="button on" tabindex="0" onclick="this.blur();">
on
</div>
</div>
</div>
<div class="section caretStyle" section="">
<h1>caret style</h1>
<div class="text">
Change the style of the caret during the test.
</div>
<div class="buttons">
<div
class="button"
caretStyle="off"
tabindex="0"
onclick="this.blur();"
>
off
</div>
<div
class="button"
caretStyle="default"
tabindex="0"
onclick="this.blur();"
>
|
</div>
<div
class="button"
caretStyle="block"
tabindex="0"
onclick="this.blur();"
>
▮
</div>
<div
class="button"
caretStyle="outline"
tabindex="0"
onclick="this.blur();"
>
▯
</div>
<div
class="button"
caretStyle="underline"
tabindex="0"
onclick="this.blur();"
>
_
</div>
</div>
</div>
<div class="section paceCaret" section="">
<h1>pace caret</h1>
<div class="text">
Displays a second caret that moves at constant speed. The
'average' option averages the speed of last 10 results.
</div>
<div>
<div class="inputAndButton">
<input
type="number"
placeholder="wpm"
class="input customPaceCaretSpeed"
tabindex="0"
min="0"
step="1"
value=""
/>
<div
class="button save"
tabindex="0"
onclick="this.blur();"
>
<i class="fas fa-save fa-fw"></i>
</div>
</div>
<div class="buttons">
<div
class="button"
paceCaret="off"
tabindex="0"
onclick="this.blur();"
>
off
</div>
<div
class="button"
paceCaret="average"
tabindex="0"
onclick="this.blur();"
>
average
</div>
<div
class="button"
paceCaret="pb"
tabindex="0"
onclick="this.blur();"
>
pb
</div>
<div
class="button"
paceCaret="custom"
tabindex="0"
onclick="this.blur();"
>
custom
</div>
</div>
</div>
</div>
<div class="section repeatedPace" section="">
<h1>repeated pace</h1>
<div class="text">
When repeating a test, a pace caret will automatically be
enabled for one test with the speed of your previous test. It
does not override the pace caret if it's already enabled.
</div>
<div class="buttons">
<div class="button off" tabindex="0" onclick="this.blur();">
off
</div>
<div class="button on" tabindex="0" onclick="this.blur();">
on
</div>
</div>
</div>
<div class="section paceCaretStyle" section="">
<h1>pace caret style</h1>
<div class="text">
Change the style of the pace caret during the test.
</div>
<div class="buttons">
<div
class="button"
paceCaretStyle="off"
tabindex="0"
onclick="this.blur();"
>
off
</div>
<div
class="button"
paceCaretStyle="default"
tabindex="0"
onclick="this.blur();"
>
|
</div>
<div
class="button"
paceCaretStyle="block"
tabindex="0"
onclick="this.blur();"
>
▮
</div>
<div
class="button"
paceCaretStyle="outline"
tabindex="0"
onclick="this.blur();"
>
▯
</div>
<div
class="button"
paceCaretStyle="underline"
tabindex="0"
onclick="this.blur();"
>
_
</div>
</div>
</div>
<div class="sectionSpacer"></div>
</div>
<div
id="group_appearance"
class="sectionGroupTitle"
group="appearance"
>
appearance
<i class="fas fa-chevron-down"></i>
</div>
<div class="settingsGroup appearance">
<div class="section timerStyle" section="">
<h1>timer/progress style</h1>
<div class="text">
Change the style of the timer/progress during a timed test.
</div>
<div class="buttons">
<div
class="button"
timerStyle="bar"
tabindex="0"
onclick="this.blur();"
>
bar
</div>
<div
class="button"
timerStyle="text"
tabindex="0"
onclick="this.blur();"
>
text
</div>
<div
class="button"
timerStyle="mini"
tabindex="0"
onclick="this.blur();"
>
mini
</div>
</div>
</div>
<div class="section timerColor" section="">
<h1>timer/progress color</h1>
<div class="text">
Change the color of the timer/progress number/bar and live wpm
number.
</div>
<div class="buttons">
<div
class="button"
timerColor="black"
tabindex="0"
onclick="this.blur();"
>
black
</div>
<div
class="button"
timerColor="sub"
tabindex="0"
onclick="this.blur();"
>
sub
</div>
<div
class="button"
timerColor="text"
tabindex="0"
onclick="this.blur();"
>
text
</div>
<div
class="button"
timerColor="main"
tabindex="0"
onclick="this.blur();"
>
main
</div>
</div>
</div>
<div class="section timerOpacity" section="">
<h1>timer/progress opacity</h1>
<div class="text">
Change the opacity of the timer/progress number/bar and live
wpm number.
</div>
<div class="buttons">
<div
class="button"
timerOpacity="0.25"
tabindex="0"
onclick="this.blur();"
>
0.25
</div>
<div
class="button"
timerOpacity="0.5"
tabindex="0"
onclick="this.blur();"
>
0.5
</div>
<div
class="button"
timerOpacity="0.75"
tabindex="0"
onclick="this.blur();"
>
0.75
</div>
<div
class="button"
timerOpacity="1"
tabindex="0"
onclick="this.blur();"
>
1
</div>
</div>
</div>
<div class="section highlightMode" section="">
<h1>highlight mode</h1>
<div class="text">
Change what is highlighted during the test.
</div>
<div class="buttons">
<div
class="button"
highlightMode="off"
tabindex="0"
onclick="this.blur();"
>
off
</div>
<div
class="button"
highlightMode="letter"
tabindex="0"
onclick="this.blur();"
>
letter
</div>
<div
class="button"
highlightMode="word"
tabindex="0"
onclick="this.blur();"
>
word
</div>
</div>
</div>
<div class="section smoothLineScroll">
<h1>smooth line scroll</h1>
<div class="text">
When enabled, the line transition will be animated.
</div>
<div class="buttons">
<div class="button off" tabindex="0" onclick="this.blur();">
off
</div>
<div class="button on" tabindex="0" onclick="this.blur();">
on
</div>
</div>
</div>
<div class="section showAllLines">
<h1>show all lines</h1>
<div class="text">
When enabled, the website will show all lines for word, custom
and quote mode tests - otherwise the lines will be limited to
3, and will automatically scroll. Using this could cause the
timer text and live wpm to not be visible.
</div>
<div class="buttons">
<div class="button off" tabindex="0" onclick="this.blur();">
off
</div>
<div class="button on" tabindex="0" onclick="this.blur();">
on
</div>
</div>
</div>
<div class="section alwaysShowDecimalPlaces">
<h1>always show decimal places</h1>
<div class="text">
Always shows decimal places for values on the result page,
without the need to hover over the stats.
</div>
<div class="buttons">
<div class="button off" tabindex="0" onclick="this.blur();">
off
</div>
<div class="button on" tabindex="0" onclick="this.blur();">
on
</div>
</div>
</div>
<div class="section alwaysShowCPM">
<h1>always show cpm</h1>
<div class="text">
Always shows characters per minute calculation instead of the
default words per minute calculation.
</div>
<div class="buttons">
<div class="button off" tabindex="0" onclick="this.blur();">
off
</div>
<div class="button on" tabindex="0" onclick="this.blur();">
on
</div>
</div>
</div>
<div class="section startGraphsAtZero">
<h1>start graphs at zero</h1>
<div class="text">
Force graph axis to always start at zero, no matter what the
data is. Turning this off may exaggerate the value changes.
</div>
<div class="buttons">
<div class="button off" tabindex="0" onclick="this.blur();">
off
</div>
<div class="button on" tabindex="0" onclick="this.blur();">
on
</div>
</div>
</div>
<div class="section fontSize">
<h1>font size</h1>
<div class="text">Change the font size of the test words.</div>
<div class="buttons">
<div
class="button"
fontsize="1"
tabindex="0"
onclick="this.blur();"
>
1
</div>
<div
class="button"
fontsize="125"
tabindex="0"
onclick="this.blur();"
>
1.25
</div>
<div
class="button"
fontsize="15"
tabindex="0"
onclick="this.blur();"
>
1.5
</div>
<div
class="button"
fontsize="2"
tabindex="0"
onclick="this.blur();"
>
2
</div>
<div
class="button"
fontsize="3"
tabindex="0"
onclick="this.blur();"
>
3
</div>
<div
class="button"
fontsize="4"
tabindex="0"
onclick="this.blur();"
>
4
</div>
</div>
</div>
<div class="section fontFamily fullWidth">
<h1>font family</h1>
<!-- <div class="text">Change the font family for the site</div> -->
<div class="buttons"></div>
</div>
<div class="section pageWidth">
<h1>page width</h1>
<div class="text">Control the width of the content.</div>
<div class="buttons">
<div
class="button"
pageWidth="100"
tabindex="0"
onclick="this.blur();"
>
100%
</div>
<div
class="button"
pageWidth="125"
tabindex="0"
onclick="this.blur();"
>
125%
</div>
<div
class="button"
pageWidth="150"
tabindex="0"
onclick="this.blur();"
>
150%
</div>
<div
class="button"
pageWidth="200"
tabindex="0"
onclick="this.blur();"
>
200%
</div>
<div
class="button"
pageWidth="max"
tabindex="0"
onclick="this.blur();"
>
Max
</div>
</div>
</div>
<div class="section keymapMode">
<h1>keymap</h1>
<div class="text">
Displays your current layout while taking a test. React shows
what you pressed and Next shows what you need to press next.
</div>
<div class="buttons">
<div
class="button"
keymapMode="off"
tabindex="0"
onclick="this.blur();"
>
off
</div>
<div
class="button"
keymapMode="static"
tabindex="0"
onclick="this.blur();"
>
static
</div>
<div
class="button"
keymapMode="react"
tabindex="0"
onclick="this.blur();"
>
react
</div>
<div
class="button"
keymapMode="next"
tabindex="0"
onclick="this.blur();"
>
next
</div>
</div>
</div>
<div class="section keymapStyle fullWidth">
<h1>keymap style</h1>
<!-- <div class="text">Displays the keymap in a different style.</div> -->
<div class="buttons">
<div
class="button"
keymapStyle="staggered"
tabindex="0"
onclick="this.blur();"
>
staggered
</div>
<div
class="button"
keymapStyle="alice"
tabindex="0"
onclick="this.blur();"
>
alice
</div>
<div
class="button"
keymapStyle="matrix"
tabindex="0"
onclick="this.blur();"
>
matrix
</div>
<div
class="button"
keymapStyle="split"
tabindex="0"
onclick="this.blur();"
>
split
</div>
<div
class="button"
keymapStyle="split_matrix"
tabindex="0"
onclick="this.blur();"
>
split matrix
</div>
</div>
</div>
<div class="section keymapLegendStyle fullWidth">
<h1>keymap legend style</h1>
<div class="buttons">
<div
class="button"
keymapLegendStyle="lowercase"
tabindex="0"
onclick="this.blur();"
>
lowercase
</div>
<div
class="button"
keymapLegendStyle="uppercase"
tabindex="0"
onclick="this.blur();"
>
uppercase
</div>
<div
class="button"
keymapLegendStyle="blank"
tabindex="0"
onclick="this.blur();"
>
blank
</div>
</div>
</div>
<div class="section keymapLayout fullWidth">
<h1>keymap layout</h1>
<div class="buttons"></div>
</div>
<div class="sectionSpacer"></div>
</div>
<div id="ad_settings2" class="hidden"></div>
<div id="group_theme" class="sectionGroupTitle" group="theme">
theme
<i class="fas fa-chevron-down"></i>
</div>
<div class="settingsGroup theme">
<div class="section flipTestColors">
<h1>flip test colors</h1>
<div class="text">
By default, typed text is brighter than the future text. When
enabled, the colors will be flipped and the future text will
be brighter than the already typed text.
</div>
<div class="buttons">
<div class="button off" tabindex="0" onclick="this.blur();">
off
</div>
<div class="button on" tabindex="0" onclick="this.blur();">
on
</div>
</div>
</div>
<div class="section colorfulMode">
<h1>colorful mode</h1>
<div class="text">
When enabled, the test words will use the main color, instead
of the text color, making the website more colorful.
</div>
<div class="buttons">
<div class="button off" tabindex="0" onclick="this.blur();">
off
</div>
<div class="button on" tabindex="0" onclick="this.blur();">
on
</div>
</div>
</div>
<div class="section customBackgroundSize">
<h1>custom background</h1>
<div class="text">
Set an image url to be a custom background image. Cover fits
the image to cover the screen. Contain fits the image to be
fully visible. Max fits the image corner to corner.
</div>
<div>
<div class="inputAndButton">
<input
type="text"
placeholder="image url"
class="input"
tabindex="0"
onClick="this.select();"
/>
<div
class="button save"
tabindex="0"
onclick="this.blur();"
>
<i class="fas fa-save fa-fw"></i>
</div>
</div>
<div class="buttons">
<div
class="button"
customBackgroundSize="cover"
tabindex="0"
onclick="this.blur();"
>
cover
</div>
<div
class="button"
customBackgroundSize="contain"
tabindex="0"
onclick="this.blur();"
>
contain
</div>
<div
class="button"
customBackGroundSize="max"
tabindex="0"
onclick="this.blur();"
>
max
</div>
</div>
</div>
</div>
<div class="section customBackgroundFilter fullWidth">
<h1>custom background filter</h1>
<div class="text">
Apply various effects to the custom background.
</div>
<div class="groups">
<div class="group blur">
<div class="title">blur</div>
<div class="value"></div>
<input type="range" min="0" max="5" value="0" step="0.1" />
</div>
<div class="group brightness">
<div class="title">brightness</div>
<div class="value"></div>
<input type="range" min="0" max="2" value="1" step="0.1" />
</div>
<div class="group saturate">
<div class="title">saturate</div>
<div class="value"></div>
<input type="range" min="0" max="2" value="1" step="0.1" />
</div>
<div class="group opacity">
<div class="title">opacity</div>
<div class="value"></div>
<input type="range" min="0" max="1" value="1" step="0.1" />
</div>
<div class="saveContainer">
<div class="save button" style="grid-column: 3">
<!-- <i class="fas fa-save fa-fw"></i> -->
save
</div>
</div>
</div>
</div>
<div class="section randomTheme fullWidth">
<h1>randomize theme</h1>
<div class="text">
After completing a test, the theme will be set to a random
one. The random themes are not saved to your config. If set to
'fav' only favourite themes will be randomized. If set to
'light' or 'dark', only presets with light or dark background
colors will be randomized, respectively.
</div>
<div class="buttons">
<div
class="button"
randomTheme="off"
tabindex="0"
onclick="this.blur();"
>
off
</div>
<div
class="button"
randomTheme="on"
tabindex="0"
onclick="this.blur();"
>
on
</div>
<div
class="button"
randomTheme="fav"
tabindex="0"
onclick="this.blur();"
>
favorite
</div>
<div
class="button"
randomTheme="light"
tabindex="0"
onclick="this.blur();"
>
light
</div>
<div
class="button"
randomTheme="dark"
tabindex="0"
onclick="this.blur();"
>
dark
</div>
</div>
</div>
<div class="section themes fullWidth">
<h1>theme</h1>
<div class="tabs">
<div
class="button"
tab="preset"
tabindex="0"
onclick="this.blur();"
>
preset
</div>
<div
class="button"
tab="custom"
tabindex="0"
onclick="this.blur();"
>
custom
</div>
</div>
<!-- <div class='tabs'>
<button tab="preset" class="tab">preset</button>
<button tab="custom" class="tab">custom</button>
</div> -->
<!-- Used to convert colors to hex -->
<div class="colorConverter"></div>
<div class="tabContainer">
<div
tabContent="custom"
class="tabContent section customTheme hidden"
>
<label class="colorText">background</label>
<div class="colorPicker inputAndButton">
<input
type="text"
value="#000000"
class="input"
id="--bg-color-txt"
/>
<label
for="--bg-color"
class="button"
style="
color: var(--text-color);
background: rgba(0, 0, 0, 0.1);
"
>
<i class="fas fa-fw fa-palette"></i>
</label>
<input
type="color"
class="color"
value="#000000"
id="--bg-color"
/>
</div>
<label class="colorText">main</label>
<div class="colorPicker inputAndButton">
<input
type="text"
value="#000000"
class="input"
id="--main-color-txt"
/>
<label for="--main-color" class="button">
<i class="fas fa-fw fa-palette"></i>
</label>
<input
type="color"
class="color"
value="#000000"
id="--main-color"
/>
</div>
<label class="colorText">caret</label>
<div class="colorPicker inputAndButton">
<input
type="text"
value="#000000"
class="input"
id="--caret-color-txt"
/>
<label for="--caret-color" class="button">
<i class="fas fa-fw fa-palette"></i>
</label>
<input
type="color"
class="color"
value="#000000"
id="--caret-color"
/>
</div>
<label class="colorText">sub</label>
<div class="colorPicker inputAndButton">
<input
type="text"
value="#000000"
class="input"
id="--sub-color-txt"
/>
<label for="--sub-color" class="button">
<i class="fas fa-fw fa-palette"></i>
</label>
<input
type="color"
class="color"
value="#000000"
id="--sub-color"
/>
</div>
<label class="colorText">text</label>
<div class="colorPicker inputAndButton">
<input
type="text"
value="#000000"
class="input"
id="--text-color-txt"
/>
<label for="--text-color" class="button">
<i class="fas fa-fw fa-palette"></i>
</label>
<input
type="color"
class="color"
value="#000000"
id="--text-color"
/>
</div>
<span class="spacer"></span>
<label class="colorText">error</label>
<div class="colorPicker inputAndButton">
<input
type="text"
value="#000000"
class="input"
id="--error-color-txt"
/>
<label for="--error-color" class="button">
<i class="fas fa-fw fa-palette"></i>
</label>
<input
type="color"
class="color"
value="#000000"
id="--error-color"
/>
</div>
<label class="colorText">extra error</label>
<div class="colorPicker inputAndButton">
<input
type="text"
value="#000000"
class="input"
id="--error-extra-color-txt"
/>
<label for="--error-extra-color" class="button">
<i class="fas fa-fw fa-palette"></i>
</label>
<input
type="color"
class="color"
value="#000000"
id="--error-extra-color"
/>
</div>
<p>colorful mode</p>
<label class="colorText">error</label>
<div class="colorPicker inputAndButton">
<input
type="text"
value="#000000"
class="input"
id="--colorful-error-color-txt"
/>
<label for="--colorful-error-color" class="button">
<i class="fas fa-fw fa-palette"></i>
</label>
<input
type="color"
class="color"
value="#000000"
id="--colorful-error-color"
/>
</div>
<label class="colorText">extra error</label>
<div class="colorPicker inputAndButton">
<input
type="text"
value="#000000"
class="input"
id="--colorful-error-extra-color-txt"
/>
<label for="--colorful-error-extra-color" class="button">
<i class="fas fa-fw fa-palette"></i>
</label>
<input
type="color"
class="color"
value="#000000"
id="--colorful-error-extra-color"
/>
</div>
<!-- <div
style="
display: grid;
gap: 2rem;
grid-auto-flow: column;
grid-column: 1/5;
"
> -->
<div
class="button"
id="loadCustomColorsFromPreset"
style="grid-column: 1/3"
>
load from preset
</div>
<div class="button" id="shareCustomThemeButton">share</div>
<div class="button saveCustomThemeButton">save</div>
<!-- </div> -->
</div>
<div tabContent="preset" class="tabContent">
<div class="favThemes buttons"></div>
<div class="allThemes buttons"></div>
</div>
</div>
</div>
<div class="sectionSpacer"></div>
</div>
<div
id="group_hideElements"
class="sectionGroupTitle"
group="hideElements"
>
hide elements
<i class="fas fa-chevron-down"></i>
</div>
<div class="settingsGroup hideElements">
<div class="section showLiveWpm">
<h1>live wpm</h1>
<div class="text">
Displays a live WPM speed during the test. Updates once every
second.
</div>
<div class="buttons">
<div class="button off" tabindex="0" onclick="this.blur();">
hide
</div>
<div class="button on" tabindex="0" onclick="this.blur();">
show
</div>
</div>
</div>
<div class="section showLiveAcc">
<h1>live accuracy</h1>
<div class="text">Displays live accuracy during the test.</div>
<div class="buttons">
<div class="button off" tabindex="0" onclick="this.blur();">
hide
</div>
<div class="button on" tabindex="0" onclick="this.blur();">
show
</div>
</div>
</div>
<div class="section showLiveBurst">
<h1>live burst</h1>
<div class="text">
Displays live burst during the test of the last word you
typed.
</div>
<div class="buttons">
<div class="button off" tabindex="0" onclick="this.blur();">
hide
</div>
<div class="button on" tabindex="0" onclick="this.blur();">
show
</div>
</div>
</div>
<div class="section showTimerProgress">
<h1>timer/progress</h1>
<div class="text">
Displays a live timer for timed tests and progress for
words/custom tests.
</div>
<div class="buttons">
<div class="button off" tabindex="0" onclick="this.blur();">
hide
</div>
<div class="button on" tabindex="0" onclick="this.blur();">
show
</div>
</div>
</div>
<div class="section showKeyTips">
<h1>key tips</h1>
<div class="text">
Shows the keybind tips at the bottom of the page.
</div>
<div class="buttons">
<div class="button off" tabindex="0" onclick="this.blur();">
hide
</div>
<div class="button on" tabindex="0" onclick="this.blur();">
show
</div>
</div>
</div>
<div class="section showOutOfFocusWarning">
<h1>out of focus warning</h1>
<div class="text">
Shows an out of focus reminder after 1 second of being 'out of
focus' (not being able to type).
</div>
<div class="buttons">
<div class="button off" tabindex="0" onclick="this.blur();">
hide
</div>
<div class="button on" tabindex="0" onclick="this.blur();">
show
</div>
</div>
</div>
<div class="section capsLockWarning">
<h1>caps lock warning</h1>
<div class="text">Displays a warning when caps lock is on.</div>
<div class="buttons">
<div class="button off" tabindex="0" onclick="this.blur();">
hide
</div>
<div class="button on" tabindex="0" onclick="this.blur();">
show
</div>
</div>
</div>
<div class="sectionSpacer"></div>
</div>
<div
id="group_dangerZone"
class="sectionGroupTitle"
group="dangerZone"
>
danger zone
<i class="fas fa-chevron-down"></i>
</div>
<div class="settingsGroup dangerZone">
<div class="section importexportSettings">
<h1>import/export settings</h1>
<div class="text">Import or export the settings as JSON.</div>
<div class="buttons">
<div
class="button off"
id="importSettingsButton"
tabindex="0"
onclick="this.blur();"
>
import
</div>
<div
class="button off"
id="exportSettingsButton"
tabindex="0"
onclick="this.blur();"
>
export
</div>
</div>
</div>
<div class="section enableAds">
<h1>enable ads</h1>
<div class="text">
If you wish to support me without directly donating you can
enable ads that will be visible at the bottom of the screen.
Sellout mode also shows ads on both sides of the screen.
<br />
<br />
(changes will take effect after a refresh).
</div>
<div class="buttons">
<div
class="button"
enableAds="off"
tabindex="0"
onclick="this.blur();"
>
off
</div>
<div
class="button"
enableAds="on"
tabindex="0"
onclick="this.blur();"
>
on
</div>
<div
class="button"
enableAds="max"
tabindex="0"
onclick="this.blur();"
>
sellout
</div>
</div>
</div>
<div class="section resetSettings">
<h1>reset settings</h1>
<div class="text">
Resets settings to the default (but doesn't touch your tags).
Warning: you can't undo this action!
</div>
<div class="buttons">
<div
class="button off danger"
id="resetSettingsButton"
tabindex="0"
onclick="this.blur();"
>
reset settings
</div>
</div>
</div>
<div class="section resetPersonalBests needsAccount hidden">
<h1>reset personal bests</h1>
<div class="text">
Resets all your personal bests (but doesn't delete any tests
from your history). Warning: you can't undo this action!
</div>
<div class="buttons">
<div
class="button off danger"
id="resetPersonalBestsButton"
tabindex="0"
onclick="this.blur();"
>
reset personal bests
</div>
</div>
</div>
<div class="section updateAccountName needsAccount hidden">
<h1>update account name</h1>
<div class="text">
Change the name of your account. You can only do this once
every 30 days.
</div>
<div class="buttons">
<div
class="button off danger"
id="updateAccountName"
tabindex="0"
onclick="this.blur();"
>
update name
</div>
</div>
</div>
<div class="section passwordAuthSettings needsAccount hidden">
<h1>password authentication settings</h1>
<div class="text">
Add password authentication, update your password or email.
</div>
<div class="buttons vertical">
<div
class="button danger"
id="addPasswordAuth"
tabindex="0"
onclick="this.blur();"
>
add password authentication
</div>
<div
class="button danger"
id="emailPasswordAuth"
tabindex="0"
onclick="this.blur();"
>
update email
</div>
<div
class="button danger"
id="passPasswordAuth"
tabindex="0"
onclick="this.blur();"
>
update password
</div>
</div>
</div>
<div class="section googleAuthSettings needsAccount hidden">
<h1>google authentication settings</h1>
<div class="text">Add or remove Google authentication.</div>
<div class="buttons vertical">
<div
class="button danger"
id="addGoogleAuth"
tabindex="0"
onclick="this.blur();"
>
add google authentication
</div>
<div
class="button danger"
id="removeGoogleAuth"
tabindex="0"
onclick="this.blur();"
>
remove google authentication
</div>
</div>
</div>
<!-- <div class="section updateAccountEmail needsAccount hidden">
<h1>update account email</h1>
<div class="text">
In case you misspell it or get a new address.
</div>
<div class="buttons">
<div
class="button off danger"
id="updateAccountEmail"
tabindex="0"
onclick="this.blur();"
>
update email
</div>
</div>
</div>
<div class="section updateAccountPassword needsAccount hidden">
<h1>update account password</h1>
<div class="text">Change the password you use to sign in.</div>
<div class="buttons">
<div
class="button off danger"
id="updateAccountPassword"
tabindex="0"
onclick="this.blur();"
>
update password
</div>
</div>
</div> -->
<div class="section deleteAccount needsAccount hidden">
<h1>delete account</h1>
<div class="text">
Deletes your account and all data connected to it.
</div>
<div class="buttons">
<div
class="button off danger"
id="deleteAccount"
tabindex="0"
onclick="this.blur();"
>
delete account
</div>
</div>
</div>
<div class="sectionSpacer"></div>
</div>
</div>
<div class="page pageLogin hidden">
<div class="preloader hidden">
<i class="fas fa-fw fa-spin fa-circle-notch"></i>
</div>
<div class="register side">
<div class="title">register</div>
<form action="" autocomplete="nope">
<input
type="text"
placeholder="username"
autocomplete="new-username"
/>
<input
type="email"
placeholder="email"
autocomplete="new-email"
/>
<input
type="email"
placeholder="verify email"
autocomplete="verify-email"
/>
<input
type="password"
placeholder="password"
autocomplete="new-password"
name="new-password"
/>
<input
type="password"
placeholder="verify password"
autocomplete="verify-password"
name="verify-password"
/>
<div class="button">
<i class="fas fa-user-plus"></i>
Sign Up
</div>
</form>
</div>
<div class="login side">
<div class="title">login</div>
<div id="forgotPasswordButton">Forgot password?</div>
<form action="">
<input
name="current-email"
type="email"
placeholder="email"
autocomplete="current-username"
/>
<input
name="current-password"
type="password"
placeholder="password"
autocomplete="current-password"
/>
<div>
<label id="rememberMe" class="checkbox">
<input type="checkbox" checked />
<div class="customTextCheckbox"></div>
Remember me
</label>
</div>
<div class="button signIn">
<i class="fas fa-sign-in-alt"></i>
Sign In
</div>
<div style="font-size: 0.75rem; text-align: center">or</div>
<div class="button signInWithGoogle">
<i class="fab fa-google"></i>
Google Sign In
</div>
<!-- <div class="button signInWithGitHub">
<i class="fab fa-github"></i>
GitHub Sign In
</div> -->
</form>
</div>
</div>
<div class="page pageAccount hidden">
<div class="scrollToTopButton">
<i class="fas fa-angle-double-up"></i>
</div>
<div class="preloader">
<div class="icon">
<i class="fas fa-fw fa-spin fa-circle-notch"></i>
</div>
<div class="barWrapper hidden">
<div class="bar">
<div class="fill"></div>
</div>
<div class="text">‎</div>
</div>
</div>
<div class="content hidden">
<div class="miniResultChartWrapper">
<canvas id="miniResultChart"></canvas>
</div>
<div class="miniResultChartBg"></div>
<div class="triplegroup">
<div class="group globalTestsStarted">
<div class="title">tests started</div>
<div class="val">-</div>
</div>
<div class="group globalTestsCompleted">
<div class="title">tests completed</div>
<div class="val">-</div>
</div>
<div class="group globalTimeTyping">
<div class="title">time typing</div>
<div class="val">-</div>
</div>
</div>
<div class="group createdDate">Account created on -</div>
<div class="group personalBestTables">
<div class="title">personal bests</div>
<div class="tables">
<div class="titleAndTable timePbTable">
<table width="100%">
<thead>
<tr>
<td width="1%">time</td>
<td width="33%">
wpm
<br />
<span class="sub">accuracy</span>
</td>
<td width="33%">
raw
<br />
<span class="sub">consistency</span>
</td>
<td width="33%">date</td>
</tr>
</thead>
<tbody>
<tr>
<td>15</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>30</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>60</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>120</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
</tbody>
</table>
<div class="button showAllTimePbs">show all</div>
</div>
<div class="titleAndTable wordsPbTable">
<table width="100%">
<thead>
<tr>
<td width="1%">words</td>
<td width="33%">
wpm
<br />
<span class="sub">accuracy</span>
</td>
<td width="33%">
raw
<br />
<span class="sub">consistency</span>
</td>
<td width="33%">date</td>
</tr>
</thead>
<tbody>
<tr>
<td>10</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>25</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>50</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>100</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
</tbody>
</table>
<div class="button showAllWordsPbs">show all</div>
</div>
</div>
</div>
<div id="ad_account" class="hidden"></div>
<div class="group topFilters">
<!-- <div
class="button"
id="currentConfigFilter"
style="grid-column: 1/3;"
>
set filters to current settings
</div> -->
<div class="buttonsAndTitle" style="grid-column: 1/3">
<div class="title">filters</div>
<div class="buttons">
<div class="button allFilters">all</div>
<div class="button currentConfigFilter">
current settings
</div>
<div class="button toggleAdvancedFilters">advanced</div>
</div>
</div>
<div
class="buttonsAndTitle testDate"
style="grid-column: 1/3; margin-top: 1rem"
>
<!-- <div class="title">date</div> -->
<div class="buttons filterGroup" group="date">
<div class="button" filter="last_day">last day</div>
<div class="button" filter="last_week">last week</div>
<div class="button" filter="last_month">last month</div>
<div class="button" filter="last_3months">
last 3 months
</div>
<div class="button" filter="all">all time</div>
</div>
</div>
</div>
<div class="group filterButtons" style="display: none">
<div class="buttonsAndTitle" style="grid-column: 1/3">
<div class="title">advanced filters</div>
<div class="buttons">
<div class="button noFilters">clear filters</div>
</div>
</div>
<div class="buttonsAndTitle" style="grid-column: 1/3">
<div class="title">difficulty</div>
<div class="buttons filterGroup" group="difficulty">
<div class="button" filter="normal">normal</div>
<div class="button" filter="expert">expert</div>
<div class="button" filter="master">master</div>
</div>
</div>
<div class="buttonsAndTitle">
<div class="title">mode</div>
<div class="buttons filterGroup" group="mode">
<div class="button" filter="words">words</div>
<div class="button" filter="time">time</div>
<div class="button" filter="quote">quote</div>
<div class="button" filter="zen">zen</div>
<div class="button" filter="custom">custom</div>
</div>
</div>
<div class="buttonsAndTitle">
<div class="title">quote length</div>
<div class="buttons filterGroup" group="quoteLength">
<div class="button" filter="short">short</div>
<div class="button" filter="medium">medium</div>
<div class="button" filter="long">long</div>
<div class="button" filter="thicc">thicc</div>
</div>
</div>
<div class="buttonsAndTitle">
<div class="title">words</div>
<div class="buttons filterGroup" group="words">
<div class="button" filter="10">10</div>
<div class="button" filter="25">25</div>
<div class="button" filter="50">50</div>
<div class="button" filter="100">100</div>
<div class="button" filter="custom">custom</div>
</div>
</div>
<div class="buttonsAndTitle">
<div class="title">time</div>
<div class="buttons filterGroup" group="time">
<div class="button" filter="15">15</div>
<div class="button" filter="30">30</div>
<div class="button" filter="60">60</div>
<div class="button" filter="120">120</div>
<div class="button" filter="custom">custom</div>
</div>
</div>
<div class="buttonsAndTitle">
<div class="title">punctuation</div>
<div class="buttons filterGroup" group="punctuation">
<div class="button" filter="on">on</div>
<div class="button" filter="off">off</div>
</div>
</div>
<div class="buttonsAndTitle">
<div class="title">numbers</div>
<div class="buttons filterGroup" group="numbers">
<div class="button" filter="on">on</div>
<div class="button" filter="off">off</div>
</div>
</div>
<div class="buttonsAndTitle tags" style="grid-column: 1/3">
<div class="title">tags</div>
<div class="buttons filterGroup" group="tags"></div>
</div>
<div class="buttonsAndTitle languages" style="grid-column: 1/3">
<div class="title">language</div>
<div class="buttons filterGroup" group="language"></div>
</div>
<div class="buttonsAndTitle funbox" style="grid-column: 1/3">
<div class="title">funbox</div>
<div class="buttons filterGroup" group="funbox"></div>
</div>
</div>
<div class="group noDataError hidden">
No data found. Check your filters.
</div>
<div class="group chart">
<!-- <div class="chartPreloader">
<i class="fas fa-fw fa-spin fa-circle-notch"></i>
</div> -->
<div class="above"></div>
<div class="chart">
<canvas id="accountHistoryChart"></canvas>
</div>
<div class="below">
<div class="text"></div>
<div class="buttons">
<div class="toggleAccuracyOnChart button">
<i class="fas fa-bullseye"></i>
Toggle Accuracy
</div>
<div class="toggleChartStyle button">
<i class="fas fa-chart-line"></i>
Toggle Chart Style
</div>
</div>
</div>
</div>
<div class="group dailyActivityChart">
<div class="chart" style="height: 200px">
<canvas id="accountActivityChart"></canvas>
</div>
</div>
<div class="triplegroup stats">
<div class="group testsStarted">
<div class="title">tests started</div>
<div class="val">-</div>
</div>
<div class="group testsCompleted">
<div class="title">
tests completed
<span
data-balloon-length="xlarge"
aria-label="Due to the increasing number of results in the database, you can now only see your last 1000 results in detail. Total time spent typing, started and completed tests stats will still be up to date at the top of the page, above the filters."
data-balloon-pos="up"
>
<i class="fas fa-question-circle"></i>
</span>
</div>
<div class="val">-</div>
<div class="avgres">-</div>
</div>
<div class="group timeTotalFiltered">
<div class="title">time typing</div>
<div class="val">-</div>
</div>
<div class="group highestWpm">
<div class="title">highest wpm</div>
<div class="val">-</div>
<div class="mode"></div>
</div>
<div class="group averageWpm">
<div class="title">average wpm</div>
<div class="val">-</div>
</div>
<div class="group averageWpm10">
<div class="title">
average wpm
<br />
(last 10 tests)
</div>
<div class="val">-</div>
</div>
<div class="group highestRaw">
<div class="title">highest raw wpm</div>
<div class="val">-</div>
<div class="mode"></div>
</div>
<div class="group averageRaw">
<div class="title">average raw wpm</div>
<div class="val">-</div>
</div>
<div class="group averageRaw10">
<div class="title">
average raw wpm
<br />
(last 10 tests)
</div>
<div class="val">-</div>
</div>
<div class="emptygroup"></div>
<div class="group avgAcc">
<div class="title">avg accuracy</div>
<div class="val">-</div>
</div>
<div class="group avgAcc10">
<div class="title">
avg accuracy
<br />
(last 10 tests)
</div>
<div class="val">-</div>
</div>
<div class="emptygroup"></div>
<div class="group avgCons">
<div class="title">avg consistency</div>
<div class="val">-</div>
</div>
<div class="group avgCons10">
<div class="title">
avg consistency
<br />
(last 10 tests)
</div>
<div class="val">-</div>
</div>
<!-- <div class="group favouriteTest">
<div class="title">favourite test</div>
<div class="val">words 10</div>
</div> -->
</div>
<div class="group history">
<!-- <div class="title">result history</div> -->
<table width="100%">
<thead>
<tr>
<td></td>
<td type="button" class="sortable history-wpm-header">
wpm
</td>
<td type="button" class="sortable history-raw-header">
raw
</td>
<td type="button" class="sortable history-acc-header">
accuracy
</td>
<td
type="button"
class="sortable history-consistency-header"
>
consistency
</td>
<td
aria-label="correct/incorrect/extra/missed"
data-balloon-pos="up"
>
chars
</td>
<td>mode</td>
<!-- <td>punctuation</td> -->
<td>info</td>
<td>tags</td>
<td type="button" class="sortable history-date-header">
date
<i class="fas fa-sort-down" aria-hidden="true"></i>
</td>
</tr>
</thead>
<tbody></tbody>
</table>
<div class="loadMoreButton">load more</div>
</div>
</div>
</div>
</div>
<div id="bottom">
<div id="commandLineMobileButton">
<i class="fas fa-terminal"></i>
</div>
<div class="keyTips">
<key>tab</key>
and
<key>enter</key>
- Restart Test
<br />
<key>ctrl/cmd</key>
+
<key>shift</key>
+
<key>p</key>
or
<key>esc</key>
- Command Line
</div>
<div class="leftright">
<div class="left">
<a id="contactPopupButton">
<i class="fas fa-fw fa-envelope"></i>
<div class="text">Contact</div>
</a>
<a
href="https://github.com/Miodec/monkeytype"
target="_blank"
rel="noreferrer"
>
<i class="fas fa-fw fa-code"></i>
<div class="text">GitHub</div>
</a>
<a
href="https://www.discord.gg/monkeytype"
target="_blank"
rel="noreferrer"
class="discordLink"
>
<i class="fab fa-fw fa-discord"></i>
<div class="text">Discord</div>
</a>
<a
href="https://twitter.com/monkeytypegame"
target="_blank"
rel="noreferrer"
>
<i class="fab fa-fw fa-twitter"></i>
<div class="text">Twitter</div>
</a>
<a href="terms-of-service.html" target="_blank">
<i class="fas fa-fw fa-file-contract"></i>
<div class="text">Terms</div>
</a>
<a href="security-policy.html" target="_blank">
<i class="fas fa-fw fa-shield-alt"></i>
<div class="text">Security</div>
</a>
<a href="privacy-policy.html" target="_blank">
<i class="fas fa-fw fa-lock"></i>
<div class="text">Privacy</div>
</a>
<a id="supportMeButton">
<i class="fas fa-fw fa-donate"></i>
<div class="text">Donate</div>
</a>
</div>
<div class="right">
<a
class="current-theme"
aria-label="Shift-click to toggle custom theme"
data-balloon-pos="left"
>
<i class="fas fa-fw fa-palette"></i>
<div class="text">serika dark</div>
</a>
<a class="version">
<i class="fas fa-fw fa-code-branch"></i>
<div class="text">version</div>
</a>
<!-- <div>
<i class="fas fa-file"></i>
Terms & Conditions
</div> -->
</div>
</div>
</div>
<div class="footerads hidden">
<div
id="ad_footer"
style="display: flex; justify-content: center; justify-self: center"
></div>
<div
id="ad_footer2"
class="hidden"
style="display: flex; justify-content: center; justify-self: center"
></div>
<!-- <div
id="ad_footer3"
class="hidden"
style="display: flex; justify-content: center; justify-self: center"
></div> -->
</div>
</div>
</div>
</body>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=UA-165993088-1"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "UA-165993088-1");
</script>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="/__/firebase/8.4.2/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="/__/firebase/8.4.2/firebase-analytics.js"></script>
<script src="/__/firebase/8.4.2/firebase-auth.js"></script>
<!-- <script src="/__/firebase/8.4.2/firebase-firestore.js"></script> -->
<!-- <script src="/__/firebase/8.4.2/firebase-functions.js"></script> -->
<!-- Initialize Firebase -->
<script src="/__/firebase/init.js"></script>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/jquery.color.min.js"></script>
<script src="js/easing.min.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/html2canvas.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"
async
defer
></script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script src="js/monkeytype.js"></script>
</html>
Reference in a new issue View git blame Copy permalink