mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2024-09-20 15:26:15 +08:00
Using html templating to split html into smaller files (#2793)
* split html into smaller files * added remove plugin to remove leftover split html files from the public directory * fixed merge
This commit is contained in:
Jack
GitHub
parent
c66ab852c4
commit
2f29f7b834
903
frontend/package-lock.json
generated
903
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -62,6 +62,7 @@
|
|||
"howler": "^2.2.1",
|
||||
"html2canvas": "1.4.1",
|
||||
"object-hash": "3.0.0",
|
||||
"remove-files-webpack-plugin": "1.5.0",
|
||||
"stemmer": "2.0.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
87
frontend/static/html/bottom.html
Normal file
87
frontend/static/html/bottom.html
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
<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>
|
||||
76
frontend/static/html/head.html
Normal file
76
frontend/static/html/head.html
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
<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/select2.min.css" />
|
||||
<link rel="stylesheet" href="css/balloon.min.css" />
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<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>
|
||||
if ("serviceWorker" in navigator) {
|
||||
navigator.serviceWorker.getRegistrations().then(function (registrations) {
|
||||
for (let registration of registrations) {
|
||||
// if (registration.scope !== "https://monkeytype.com/")
|
||||
registration.unregister();
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
219
frontend/static/html/pages/about.html
Normal file
219
frontend/static/html/pages/about.html
Normal file
|
|
@ -0,0 +1,219 @@
|
|||
<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>
|
||||
418
frontend/static/html/pages/account.html
Normal file
418
frontend/static/html/pages/account.html
Normal file
|
|
@ -0,0 +1,418 @@
|
|||
<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="smoothing">
|
||||
<div class="title">smoothing</div>
|
||||
<div class="value">0</div>
|
||||
<input type="range" min="0" max="20" value="0" step="1" />
|
||||
</div>
|
||||
<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="group highestAcc">
|
||||
<div class="title">highest accuracy</div>
|
||||
<div class="val">-</div>
|
||||
</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="group highestCons">
|
||||
<div class="title">highest consistency</div>
|
||||
<div class="val">-</div>
|
||||
</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 aboveHistory">
|
||||
<div class="button exportCSV">
|
||||
<i class="fas fa-file-csv"></i>
|
||||
Export CSV
|
||||
</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>
|
||||
13
frontend/static/html/pages/loading.html
Normal file
13
frontend/static/html/pages/loading.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<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>
|
||||
75
frontend/static/html/pages/login.html
Normal file
75
frontend/static/html/pages/login.html
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
<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 class="check">
|
||||
<i class="fas fa-fw fa-check"></i>
|
||||
</div>
|
||||
</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>
|
||||
2424
frontend/static/html/pages/settings.html
Normal file
2424
frontend/static/html/pages/settings.html
Normal file
File diff suppressed because it is too large
Load diff
290
frontend/static/html/pages/test.html
Normal file
290
frontend/static/html/pages/test.html
Normal file
|
|
@ -0,0 +1,290 @@
|
|||
<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 hidden">60</div>
|
||||
<div class="acc hidden">100%</div>
|
||||
<div class="burst hidden">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 id="keymap" class="hidden"></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>
|
||||
764
frontend/static/html/popups.html
Normal file
764
frontend/static/html/popups.html
Normal file
|
|
@ -0,0 +1,764 @@
|
|||
<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 id="quote-search-button" 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="buttonsTop">
|
||||
<div class="button saveCustomText">
|
||||
<i class="fas fa-save"></i>
|
||||
Save
|
||||
</div>
|
||||
<div class="button showSavedTexts">
|
||||
<i class="fas fa-folder"></i>
|
||||
Show saved texts
|
||||
</div>
|
||||
<div class="button wordfilter">
|
||||
<i class="fas fa-filter"></i>
|
||||
Words filter
|
||||
</div>
|
||||
</div>
|
||||
<div class="savedTexts hidden" style="display: none">
|
||||
<div class="title">saved texts</div>
|
||||
<div class="buttons"></div>
|
||||
</div>
|
||||
<textarea class="textarea" placeholder="Custom text"></textarea>
|
||||
<div class="inputs">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" />
|
||||
<div class="customTextCheckbox">
|
||||
<div class="check">
|
||||
<i class="fas fa-fw fa-check"></i>
|
||||
</div>
|
||||
</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 class="check">
|
||||
<i class="fas fa-fw fa-check"></i>
|
||||
</div>
|
||||
</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 class="check">
|
||||
<i class="fas fa-fw fa-check"></i>
|
||||
</div>
|
||||
</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="savedTextsPopupWrapper" class="popupWrapper hidden">
|
||||
<div id="savedTextsPopup">
|
||||
<div class="title">Saved texts</div>
|
||||
<div class="list"></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>
|
||||
<div id="quoteSearchControlsWrapper">
|
||||
<input
|
||||
id="searchBox"
|
||||
class="searchBox"
|
||||
type="text"
|
||||
maxlength="200"
|
||||
autocomplete="off"
|
||||
placeholder="Filter by text"
|
||||
/>
|
||||
<select class="quoteLengthFilter"></select>
|
||||
</div>
|
||||
<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="apeKeysPopupWrapper" class="hidden popupWrapper">
|
||||
<div id="apeKeysPopup" mode="">
|
||||
<div class="top">
|
||||
<div class="title">Ape Keys</div>
|
||||
<div class="button generateApeKey">
|
||||
<i class="fas fa-plus"></i>
|
||||
Generate new key
|
||||
</div>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td width="1px">active</td>
|
||||
<td>name</td>
|
||||
<td>created on</td>
|
||||
<td>modified on</td>
|
||||
<td>last used on</td>
|
||||
<td width="1px"></td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</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="customThemesWrapper" class="popupWrapper hidden">
|
||||
<div id="customThemesEdit" action="" customThemeId="">
|
||||
<div class="title"></div>
|
||||
<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 class="check">
|
||||
<i class="fas fa-fw fa-check"></i>
|
||||
</div>
|
||||
</div>
|
||||
Change preset to current settings
|
||||
</label>
|
||||
<div class="button"><i class="fas fa-plus"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="leaderboardsWrapper" class="popupWrapper 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">
|
||||
<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">
|
||||
<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>
|
||||
211
frontend/static/html/top.html
Normal file
211
frontend/static/html/top.html
Normal file
|
|
@ -0,0 +1,211 @@
|
|||
<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>
|
||||
81
frontend/static/html/warnings.html
Normal file
81
frontend/static/html/warnings.html
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
<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>
|
||||
File diff suppressed because it is too large
Load diff
|
|
@ -3,6 +3,7 @@ const CopyPlugin = require("copy-webpack-plugin");
|
|||
const CircularDependencyPlugin = require("circular-dependency-plugin");
|
||||
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||||
const HtmlWebpackPlugin = require("html-webpack-plugin");
|
||||
const RemovePlugin = require("remove-files-webpack-plugin");
|
||||
|
||||
let circularImports = 0;
|
||||
|
||||
|
|
@ -84,7 +85,7 @@ const BASE_CONFIG = {
|
|||
from: resolve(__dirname, "../static"),
|
||||
to: "./",
|
||||
globOptions: {
|
||||
ignore: ["**/*.html"],
|
||||
ignore: [resolve(__dirname, "../static/*.html")],
|
||||
},
|
||||
},
|
||||
],
|
||||
|
|
@ -117,6 +118,11 @@ const BASE_CONFIG = {
|
|||
new MiniCssExtractPlugin({
|
||||
filename: "./css/style.[chunkhash:8].css",
|
||||
}),
|
||||
new RemovePlugin({
|
||||
after: {
|
||||
include: [resolve(__dirname, "../public/html")],
|
||||
},
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue