2020-05-10 01:39:23 +08:00
<!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 >
2020-05-12 07:59:12 +08:00
< link rel = "stylesheet" href = "css/fa.css" >
2020-05-10 01:39:23 +08:00
< link rel = "stylesheet" href = "css/style.css" >
2020-05-16 17:58:26 +08:00
< link rel = "stylesheet" href = "themes/dark.css" id = "currentTheme" >
2020-05-10 02:47:11 +08:00
< link rel = "shortcut icon" href = "favicon.png" >
2020-05-10 01:39:23 +08:00
< / head >
< body >
2020-05-12 07:59:12 +08:00
< div class = "notification" > Signed in< / div >
2020-05-17 19:40:41 +08:00
< 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 >
2020-05-10 01:39:23 +08:00
< 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 >
2020-05-13 23:34:20 +08:00
< div id = "commandInput" class = "hidden" >
< textarea type = "text" class = "input" placeholder = "input" > < / textarea >
< div class = "shiftEnter" > Shift + Enter to send< / div >
< / div >
2020-05-10 01:39:23 +08:00
< / 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" >
2020-05-12 07:59:12 +08:00
< div class = "button" tabindex = "2" href = "/" onclick = "this.blur();" >
2020-05-10 01:39:23 +08:00
< div class = "icon" >
< i class = "fas fa-fw fa-keyboard" > < / i >
< / div >
< / div >
2020-05-12 07:59:12 +08:00
< div class = "button" tabindex = "2" href = "/about" onclick = "this.blur();" >
2020-05-10 01:39:23 +08:00
< div class = "icon" >
< i class = "fas fa-fw fa-info" > < / i >
< / div >
< / div >
2020-05-12 07:59:12 +08:00
< div class = "button" tabindex = "2" href = "/settings" onclick = "this.blur();" >
2020-05-10 01:39:23 +08:00
< div class = "icon" >
< i class = "fas fa-fw fa-cog" > < / i >
< / div >
< / div >
2020-05-12 07:59:12 +08:00
< div class = "button hidden account" tabindex = "2" href = "/account" onclick = "this.blur();" >
2020-05-10 01:39:23 +08:00
< div class = "icon" >
< i class = "fas fa-fw fa-user" > < / i >
< / div >
2020-05-12 07:59:12 +08:00
< / 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 >
2020-05-10 01:39:23 +08:00
< / div >
< / div >
< / div >
2020-05-10 09:04:05 +08:00
2020-05-15 11:09:00 +08:00
< div class = "config" style = "grid-column: 3/4;grid-row: 1/2;" >
2020-05-10 01:39:23 +08:00
< div class = "group punctuationMode" >
<!-- <div class="title">time</div> -->
< div class = "buttons" >
2020-05-15 21:26:18 +08:00
< div class = "button toggleButton" tabindex = "2" > punctuation< / div >
2020-05-10 01:39:23 +08:00
< / div >
< / div >
< div class = "group mode" >
<!-- <div class="title">mode</div> -->
< div class = "buttons" >
2020-05-12 07:59:12 +08:00
< 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 >
2020-05-10 01:39:23 +08:00
< / div >
< / div >
< div class = "group wordCount" >
<!-- <div class="title">words</div> -->
< div class = "buttons" >
2020-05-12 07:59:12 +08:00
< 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 >
2020-05-10 01:39:23 +08:00
< / div >
< / div >
< div class = "group time hidden" >
<!-- <div class="title">time</div> -->
< div class = "buttons" >
2020-05-12 07:59:12 +08:00
< 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 >
2020-05-10 01:39:23 +08:00
< / div >
< / div >
< div class = "group customText hidden" >
<!-- <div class="title">time</div> -->
< div class = "buttons" >
< div class = "button" > change< / div >
< / div >
< / div >
< / div >
2020-05-15 11:09:00 +08:00
< 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 >
2020-05-10 01:39:23 +08:00
< / div >
< div id = "middle" >
2020-05-10 09:04:05 +08:00
2020-05-12 07:59:12 +08:00
< div class = "page pageTest active" >
2020-05-10 01:39:23 +08:00
< 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" >
2020-05-12 07:59:12 +08:00
< div class = "top" > wpm< div class = "crownWrapper" > < div class = "crown" > < i class = "fas fa-crown" > < / i > < / div > < / div > < / div >
2020-05-10 01:39:23 +08:00
< 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 >
2020-05-13 03:40:16 +08:00
< div class = "loginTip" > Sign in to save your results< / div >
2020-05-10 01:39:23 +08:00
< / div >
2020-05-11 07:07:36 +08:00
< div id = "liveWpm" > 123< / div >
2020-05-15 10:19:39 +08:00
< div id = "restartTestButton" class = "" tabindex = "0" > < i class = "fas fa-redo-alt" > < / i > < / div >
2020-05-10 01:39:23 +08:00
< / div >
< div class = "page pageAbout hidden" >
2020-05-12 07:59:12 +08:00
< 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 >
2020-05-15 03:22:37 +08:00
< 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 >
2020-05-12 07:59:12 +08:00
< / 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 >
2020-05-15 03:22:37 +08:00
< / div >
< div class = "page pageSettings hidden" >
2020-05-15 05:22:11 +08:00
< 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 >
2020-05-19 05:45:14 +08:00
< 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 >
2020-05-16 21:57:01 +08:00
< div class = "section" style = "grid-column: 1/3;" >
< h1 > languages< / h1 >
< div class = "languages" >
< / div >
< / div >
2020-05-15 05:22:11 +08:00
< div class = "section" style = "grid-column: 1/3;" >
< h1 > theme< / h1 >
< div class = "themes" >
< / div >
< / div >
2020-05-10 01:39:23 +08:00
< / div >
2020-05-10 06:33:48 +08:00
< div class = "page pageLogin hidden" >
2020-05-12 07:59:12 +08:00
< 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" >
2020-05-13 03:40:16 +08:00
< input type = "password" placeholder = "verify password" >
2020-05-15 11:09:00 +08:00
< div class = "button" > < i class = "fas fa-user-plus" > < / i > Sign Up< / div >
2020-05-12 07:59:12 +08:00
< / form >
2020-05-10 01:39:23 +08:00
< / div >
2020-05-12 07:59:12 +08:00
< div class = "login side" >
< div class = "title" > login< / div >
< form action = "" >
< input type = "text" placeholder = "email" >
< input type = "password" placeholder = "password" >
2020-05-15 11:09:00 +08:00
< div class = "button" > < i class = "fas fa-sign-in-alt" > < / i > Sign In< / div >
2020-05-12 07:59:12 +08:00
< / form >
2020-05-10 01:39:23 +08:00
< / div >
< / div >
2020-05-10 06:33:48 +08:00
< div class = "page pageAccount hidden" >
2020-05-12 07:59:12 +08:00
< 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 >
2020-05-10 09:04:05 +08:00
< / div >
2020-05-12 07:59:12 +08:00
< 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 >
2020-05-17 20:17:08 +08:00
< div class = "group testCompletion" >
< div class = "title" > test completion< / div >
< div class = "val" > -< / div >
< / div >
< div > < / div >
< div class = "group avgRestart" >
< div class = "title" > avg restarts per completed test< / div >
< div class = "val" > -< / div >
< / div >
2020-05-10 09:04:05 +08:00
< / div >
2020-05-12 07:59:12 +08:00
< 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 >
2020-05-10 09:04:05 +08:00
2020-05-12 07:59:12 +08:00
< / tbody >
< / table >
< / div >
2020-05-10 09:04:05 +08:00
< / div >
2020-05-10 06:33:48 +08:00
< / div >
2020-05-10 01:39:23 +08:00
< / div >
2020-05-10 09:04:05 +08:00
2020-05-10 01:39:23 +08:00
< div id = "bottom" >
2020-05-10 09:04:05 +08:00
< div class = "keyTips" >
< key > tab< / key > and < key > enter< / key > / < key > space< / key > - restart test< br >
< key > esc< / key > - command line
< / div >
2020-05-12 07:59:12 +08:00
< div >
Crafted with < 3 by
< a tabindex = "0" href = "https://www.reddit.com/message/compose?to=Miodec" > Miodec< / a >
< / div >
< div >
2020-05-15 03:22:37 +08:00
Contribute to this project on < a href = "https://github.com/Miodec/monkey-type" > GitHub< / a >
2020-05-12 07:59:12 +08:00
< / div >
2020-05-17 19:40:41 +08:00
< div class = "version" > version< / div >
2020-05-10 01:39:23 +08:00
< / 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 >
2020-05-10 06:33:48 +08:00
< script src = "/__/firebase/7.14.2/firebase-firestore.js" > < / script >
2020-05-10 01:39:23 +08:00
<!-- 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 >
2020-05-10 06:33:48 +08:00
< script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js" > < / script >
2020-05-10 09:04:05 +08:00
< 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 >
2020-05-16 21:57:01 +08:00
< script src = "js/words.js" > < / script >
2020-05-10 06:33:48 +08:00
< script src = "js/db.js" > < / script >
< script src = "js/commandline.js" > < / script >
2020-05-15 05:22:11 +08:00
< script src = "js/settings.js" > < / script >
2020-05-11 07:32:10 +08:00
< script src = "js/userconfig.js" > < / script >
2020-05-10 01:39:23 +08:00
< script src = "js/script.js" > < / script >
< script src = "js/account.js" > < / script >
2020-05-10 06:33:48 +08:00
2020-05-10 01:39:23 +08:00
< / html >
