mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2024-09-20 23:36:37 +08:00
377 lines
15 KiB
HTML
377 lines
15 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Monkey Type</title>
|
|
<link rel="stylesheet" href="css/fa.css">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<link rel="stylesheet" href="themes/dark.css" id="currentTheme">
|
|
<link id="favicon" rel="shortcut icon" href="favicon.png">
|
|
</head>
|
|
<body>
|
|
<div class="notification">Signed in</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="commandLineWrapper" class="hidden">
|
|
<div id="commandLine">
|
|
<input type="text" class="input" placeholder="Command">
|
|
<div class="separator hidden"></div>
|
|
<div class="listTitle">Title</div>
|
|
<div class="suggestions">
|
|
</div>
|
|
</div>
|
|
<div id="commandInput" class="hidden">
|
|
<textarea type="text" class="input" placeholder="input"></textarea>
|
|
<div class="shiftEnter">Shift + Enter to send</div>
|
|
</div>
|
|
</div>
|
|
<div id="timerWrapper">
|
|
<div id="timer"></div>
|
|
</div>
|
|
<div id="resultScreenshot" class="">
|
|
<div class="stats">
|
|
<div class="group">
|
|
<div class="top">wpm</div>
|
|
<div class="bottom">100</div>
|
|
</div>
|
|
<div class="group">
|
|
<div class="top">key</div>
|
|
<div class="bottom">100/2</div>
|
|
</div>
|
|
<div class="group">
|
|
<div class="top">acc</div>
|
|
<div class="bottom">100%</div>
|
|
</div>
|
|
</div>
|
|
<div class="logo">
|
|
<!-- <div class="top">monkey-see</div> -->
|
|
<div class="bottom">monkey-type.com</div>
|
|
</div>
|
|
</div>
|
|
<div id="centerContent" class="hidden">
|
|
<div id="top">
|
|
<div class="logo">
|
|
<div class="top">monkey-see</div>
|
|
<div class="bottom">monkey-type</sup></div>
|
|
</div>
|
|
<div id="menu">
|
|
<div class="button" tabindex="2" href="/" onclick="this.blur();">
|
|
<div class="icon">
|
|
<i class="fas fa-fw fa-keyboard"></i>
|
|
</div>
|
|
</div>
|
|
<div class="button" tabindex="2" href="/about" onclick="this.blur();">
|
|
<div class="icon">
|
|
<i class="fas fa-fw fa-info"></i>
|
|
</div>
|
|
</div>
|
|
<div class="button" tabindex="2" href="/settings" onclick="this.blur();">
|
|
<div class="icon">
|
|
<i class="fas fa-fw fa-cog"></i>
|
|
</div>
|
|
</div>
|
|
<div class="button hidden account" tabindex="2" href="/account" onclick="this.blur();">
|
|
<div class="icon">
|
|
<i class="fas fa-fw fa-user"></i>
|
|
</div>
|
|
</div>
|
|
<div class="button login" tabindex="2" href="/login" onclick="this.blur();">
|
|
<div class="icon">
|
|
<i class="fas fa-fw fa-sign-in-alt"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="config" style="grid-column: 3/4;grid-row: 1/2;">
|
|
<div class="group punctuationMode">
|
|
<!-- <div class="title">time</div> -->
|
|
<div class="buttons">
|
|
<div class="button toggleButton" tabindex="2">punctuation</div>
|
|
</div>
|
|
</div>
|
|
<div class="group mode">
|
|
<!-- <div class="title">mode</div> -->
|
|
<div class="buttons">
|
|
<div class="button" mode="time" tabindex="2">time</div>
|
|
<div class="button active" mode="words" tabindex="2">words</div>
|
|
<div class="button" mode="custom" tabindex="2">custom</div>
|
|
</div>
|
|
</div>
|
|
<div class="group wordCount">
|
|
<!-- <div class="title">words</div> -->
|
|
<div class="buttons">
|
|
<div class="button" wordCount="10" tabindex="2">10</div>
|
|
<div class="button" wordCount="25" tabindex="2">25</div>
|
|
<div class="button active" wordCount="50" tabindex="2">50</div>
|
|
<div class="button" wordCount="100" tabindex="2">100</div>
|
|
<div class="button" wordCount="200" tabindex="2">200</div>
|
|
</div>
|
|
</div>
|
|
<div class="group time hidden">
|
|
<!-- <div class="title">time</div> -->
|
|
<div class="buttons">
|
|
<div class="button" timeConfig="15" tabindex="2">15</div>
|
|
<div class="button active" timeConfig="30" tabindex="2">30</div>
|
|
<div class="button" timeConfig="60" tabindex="2">60</div>
|
|
<div class="button" timeConfig="120" tabindex="2">120</div>
|
|
</div>
|
|
</div>
|
|
<div class="group customText hidden">
|
|
<!-- <div class="title">time</div> -->
|
|
<div class="buttons">
|
|
<div class="button">change</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 pageTest active">
|
|
<div id="caret" class="hidden"></div>
|
|
<div id="words" class=""></div>
|
|
<input id="wordsInput" class="" tabindex="0"></input>
|
|
<div id="result" class="hidden">
|
|
<div class="stats">
|
|
<!-- <div class="info">words 10<br>punctuation</div> -->
|
|
<div class="group info">
|
|
<div class="top">test type</div>
|
|
<div class="bottom">100</div>
|
|
</div>
|
|
<div class="group wpm">
|
|
<div class="top">wpm<div class="crownWrapper"><div class="crown"><i class="fas fa-crown"></i></div></div></div>
|
|
<div class="bottom">100</div>
|
|
</div>
|
|
<div class="group acc">
|
|
<div class="top">acc</div>
|
|
<div class="bottom">100%</div>
|
|
</div>
|
|
<div class="group key">
|
|
<div class="top">key</div>
|
|
<div class="bottom">100/1</div>
|
|
</div>
|
|
</div>
|
|
<div class="chart">
|
|
<div class="title">wpm over time</div>
|
|
<canvas id="wpmChart"></canvas>
|
|
</div>
|
|
<div class="loginTip">Sign in to save your results</div>
|
|
|
|
</div>
|
|
<div id="liveWpm">123</div>
|
|
<div id="restartTestButton" class="" tabindex="0"><i class="fas fa-redo-alt"></i></div>
|
|
</div>
|
|
<div class="page pageAbout hidden">
|
|
<div class="section">
|
|
<h1>about</h1>
|
|
<p>Monkey-type 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>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>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, divided by 5</p>
|
|
<p>acc - percentage of correctly pressed keys</p>
|
|
<p>key - correct characters / incorrect characters. Calculated after the test has ended</p>
|
|
</div>
|
|
<div class="section">
|
|
<h1>bug report or feature request</h1>
|
|
<p>If you encounter a bug, or have a feature request - send me a message on Reddit, create an issue on <a href="https://github.com/Miodec/monkey-type">GitHub</a> or send me a message using the command line <key>esc</key>.</p>
|
|
</div>
|
|
<div class="section">
|
|
<h1>credits</h1>
|
|
<p><a href="https://www.reddit.com/user/montydrei">montydrei</a> - name suggestion</p>
|
|
<p><a href="https://www.reddit.com/r/MechanicalKeyboards/comments/gc6wx3/experimenting_with_a_completely_new_type_of/">everyone</a> who provided
|
|
valuable feedback on the original reddit post for the prototype of this website</p>
|
|
</div>
|
|
</div>
|
|
<div class="page pageSettings hidden">
|
|
<div class="tip" style="grid-column: 1/3;">tip: You can also change all these settings quickly using the command line (<key>esc</key>)</div>
|
|
<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 on" tabindex="0">on</div><div class="button off" tabindex="0">off</div></div>
|
|
</div>
|
|
<div class="section quickTab">
|
|
<h1>quick tab mode</h1>
|
|
<div class="text">Press <key>tab</key> to quickly restart the test. This function disables tab navigation on some parts of the website.</div>
|
|
<div class="buttons"><div class="button on" tabindex="0">on</div><div class="button off" tabindex="0">off</div></div>
|
|
</div>
|
|
<div class="section liveWpm">
|
|
<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 on" tabindex="0">on</div><div class="button off" tabindex="0">off</div></div>
|
|
</div>
|
|
<div class="section keyTips">
|
|
<h1>show key tips</h1>
|
|
<div class="text">Shows the keybind tips at the bottom of the page.</div>
|
|
<div class="buttons"><div class="button on" tabindex="0">show</div><div class="button off" tabindex="0">hide</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">1</div>
|
|
<div class="button" fontsize="125" tabindex="0">1.25</div>
|
|
<div class="button" fontsize="15" tabindex="0">1.5</div>
|
|
<div class="button" fontsize="2" tabindex="0">2</div>
|
|
</div>
|
|
</div>
|
|
<div class="section" style="grid-column: 1/3;">
|
|
<h1>languages</h1>
|
|
<div class="languages">
|
|
</div>
|
|
</div>
|
|
<div class="section" style="grid-column: 1/3;">
|
|
<h1>theme</h1>
|
|
<div class="themes">
|
|
</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="off">
|
|
<input type="text" placeholder="name">
|
|
<input type="text" placeholder="email">
|
|
<input type="password" placeholder="password">
|
|
<input type="password" placeholder="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>
|
|
<form action="">
|
|
<input type="text" placeholder="email">
|
|
<input type="password" placeholder="password">
|
|
<div class="button"><i class="fas fa-sign-in-alt"></i>Sign In</div>
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="page pageAccount hidden">
|
|
<div class="preloader"><i class="fas fa-fw fa-spin fa-circle-notch"></i></div>
|
|
<div class="content hidden">
|
|
<div class="group">
|
|
<div class="title"></div>
|
|
<div class="chart">
|
|
<canvas id="resultHistoryChart"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="triplegroup">
|
|
<div class="group highestWpm">
|
|
<div class="title">highest wpm</div>
|
|
<div class="val">1</div>
|
|
<div class="mode"></div>
|
|
</div>
|
|
<div class="group testsTaken">
|
|
<div class="title">tests taken</div>
|
|
<div class="val">1</div>
|
|
</div>
|
|
<div class="group favouriteTest">
|
|
<div class="title">favourite test</div>
|
|
<div class="val">words 10</div>
|
|
</div>
|
|
<div class="group averageWpm">
|
|
<div class="title">average wpm</div>
|
|
<div class="val">1</div>
|
|
</div>
|
|
<div class="group testCompletion">
|
|
<div class="title">test completion</div>
|
|
<div class="val">-</div>
|
|
</div>
|
|
<div class="group avgRestart">
|
|
<div class="title">avg restarts per completed test</div>
|
|
<div class="val">-</div>
|
|
</div>
|
|
</div>
|
|
<div class="group history">
|
|
<!-- <div class="title">result history</div> -->
|
|
<table width="100%">
|
|
<thead>
|
|
<tr>
|
|
<td>wpm</td>
|
|
<td>accuracy</td>
|
|
<td>correct<br>chars</td>
|
|
<td>incorrect<br>chars</td>
|
|
<td>mode</td>
|
|
<td>date</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="bottom">
|
|
<div class="keyTips">
|
|
<key>tab</key> and <key>enter</key> / <key>space</key> - restart test<br>
|
|
<key>esc</key> - command line
|
|
</div>
|
|
<div>
|
|
Crafted with <3 by
|
|
<a tabindex="0" href="https://www.reddit.com/message/compose?to=Miodec">Miodec</a>
|
|
</div>
|
|
<div>
|
|
Contribute to this project on <a href="https://github.com/Miodec/monkey-type">GitHub</a>
|
|
</div>
|
|
<div class="version">version</div>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
<!-- The core Firebase JS SDK is always required and must be listed first -->
|
|
<script src="/__/firebase/7.14.3/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/7.14.3/firebase-analytics.js"></script>
|
|
<script src="/__/firebase/7.14.3/firebase-auth.js"></script>
|
|
<script src="/__/firebase/7.14.2/firebase-firestore.js"></script>
|
|
|
|
|
|
<!-- Initialize Firebase -->
|
|
<script src="/__/firebase/init.js"></script>
|
|
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-trendline@0.1.3/src/chartjs-plugin-trendline.min.js"></script>
|
|
<script src="js/words.js"></script>
|
|
<script src="js/db.js"></script>
|
|
<script src="js/commandline.js"></script>
|
|
<script src="js/settings.js"></script>
|
|
<script src="js/userconfig.js"></script>
|
|
<script src="js/script.js"></script>
|
|
<script src="js/account.js"></script>
|
|
|
|
</html> |