mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-10-06 05:26:54 +08:00
initial commit
This commit is contained in:
Jack
parent
b139c1dca8
commit
e9aa27659e
10 changed files with 2567 additions and 0 deletions
5
.firebaserc
Normal file
5
.firebaserc
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"projects": {
|
||||
"default": "monkey-type"
|
||||
}
|
||||
}
|
||||
65
.gitignore
vendored
Normal file
65
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
firebase-debug.log*
|
||||
|
||||
# Firebase cache
|
||||
.firebase/
|
||||
|
||||
# Firebase config
|
||||
|
||||
# Uncomment this if you'd like others to create their own Firebase project.
|
||||
# For a team working on the same Firebase project(s), it is recommended to leave
|
||||
# it commented so all members can deploy to the same project(s) in .firebaserc.
|
||||
# .firebaserc
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# Bower dependency directory (https://bower.io/)
|
||||
bower_components
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (http://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# dotenv environment variables file
|
||||
.env
|
||||
7
database.rules.json
Normal file
7
database.rules.json
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
/* Visit https://firebase.google.com/docs/database/security to learn more about security rules. */
|
||||
"rules": {
|
||||
".read": false,
|
||||
".write": false
|
||||
}
|
||||
}
|
||||
20
firebase.json
Normal file
20
firebase.json
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"database": {
|
||||
"rules": "database.rules.json"
|
||||
},
|
||||
"hosting": {
|
||||
"public": "public",
|
||||
"ignore": [
|
||||
"firebase.json",
|
||||
"**/.*",
|
||||
"**/node_modules/**"
|
||||
],
|
||||
"rewrites": [ {
|
||||
"source": "**",
|
||||
"destination": "/index.html"
|
||||
},{
|
||||
"source": "!/@(js|css)/**",
|
||||
"destination": "/index.html"
|
||||
} ]
|
||||
}
|
||||
}
|
||||
14
public/.vscode/tasks.json
vendored
Normal file
14
public/.vscode/tasks.json
vendored
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
// Sass configuration
|
||||
{
|
||||
// See https://go.microsoft.com/fwlink/?LinkId=733558
|
||||
// for the documentation about the tasks.json format
|
||||
"version": "2.0.0",
|
||||
"tasks": [
|
||||
{
|
||||
"label": "Sass Compile",
|
||||
"type": "shell",
|
||||
"command": "node-sass style.scss style.css",
|
||||
"group": "build"
|
||||
}
|
||||
]
|
||||
}
|
||||
449
public/css/style.css
Normal file
449
public/css/style.css
Normal file
|
|
@ -0,0 +1,449 @@
|
|||
@import url("https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap");
|
||||
:root {
|
||||
--main-color: #eee;
|
||||
--sub-color: #444;
|
||||
--bg-color: #111;
|
||||
--caret-color: #fff;
|
||||
--active-word-color: #444;
|
||||
--roundness: 0.25rem; }
|
||||
|
||||
/*
|
||||
:root {
|
||||
--main-color: #111;
|
||||
--sub-color: #444;
|
||||
--sub2-color: #444;
|
||||
--bg-color: #fff;
|
||||
} */
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 2rem;
|
||||
height: 100vh;
|
||||
background: var(--bg-color);
|
||||
font-family: "Roboto Mono";
|
||||
color: var(--main-color); }
|
||||
|
||||
a {
|
||||
color: var(--sub-color);
|
||||
transition: 0.25s; }
|
||||
|
||||
a:hover {
|
||||
color: var(--main-color); }
|
||||
|
||||
#commandLineWrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
padding: 5rem 0; }
|
||||
#commandLineWrapper #commandLine {
|
||||
width: 50vw;
|
||||
background: var(--bg-color);
|
||||
border-radius: var(--roundness); }
|
||||
#commandLineWrapper #commandLine input {
|
||||
background: var(--bg-color);
|
||||
padding: 1rem;
|
||||
color: var(--main-color);
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 1rem;
|
||||
font-family: "Roboto Mono";
|
||||
width: 100%; }
|
||||
#commandLineWrapper #commandLine .separator {
|
||||
background: black;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
margin-bottom: 0.5rem; }
|
||||
#commandLineWrapper #commandLine .listTitle {
|
||||
color: var(--main-color);
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.75rem;
|
||||
line-height: 0.75rem; }
|
||||
#commandLineWrapper #commandLine .suggestions {
|
||||
display: grid; }
|
||||
#commandLineWrapper #commandLine .suggestions .entry {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.75rem;
|
||||
line-height: 0.75rem;
|
||||
color: var(--sub-color); }
|
||||
#commandLineWrapper #commandLine .suggestions .entry.active {
|
||||
color: var(--main-color);
|
||||
background: rgba(0, 0, 0, 0.5); }
|
||||
|
||||
#resultScreenshot {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: min-content;
|
||||
white-space: nowrap;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
background: var(--bg-color); }
|
||||
#resultScreenshot .logo .top {
|
||||
color: var(--sub-color);
|
||||
font-size: 0.42rem;
|
||||
line-height: 0.42rem;
|
||||
margin-bottom: -0.3rem;
|
||||
margin-left: 0.05rem;
|
||||
margin: 0.5rem; }
|
||||
#resultScreenshot .logo .bottom {
|
||||
font-size: 0.75rem;
|
||||
line-height: 0.75rem;
|
||||
color: var(--sub-color);
|
||||
padding: 0 0.5rem 0.5rem 0.5rem; }
|
||||
#resultScreenshot .stats {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
justify-content: space-between; }
|
||||
#resultScreenshot .stats .group {
|
||||
padding: 0.5rem; }
|
||||
#resultScreenshot .stats .group .top {
|
||||
color: var(--sub-color);
|
||||
line-height: 1rem; }
|
||||
#resultScreenshot .stats .group .bottom {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.5rem; }
|
||||
|
||||
#timerWrapper {
|
||||
opacity: 0;
|
||||
transition: 0.25s;
|
||||
z-index: -1; }
|
||||
|
||||
#timer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 0vw;
|
||||
/* height: 0.5rem; */
|
||||
height: 0.5rem;
|
||||
background: var(--sub-color);
|
||||
/* background: #0f0f0f; */
|
||||
/* background: red; */
|
||||
transition: 1s linear;
|
||||
z-index: -1; }
|
||||
|
||||
#liveWpm {
|
||||
font-size: 10rem;
|
||||
color: black;
|
||||
opacity: 0.25;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
z-index: -1;
|
||||
height: 0;
|
||||
transition: 0.25s; }
|
||||
|
||||
#centerContent {
|
||||
max-width: 800px;
|
||||
min-width: 600px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-auto-flow: row;
|
||||
/* grid-template-rows: 2rem auto 1rem; */
|
||||
height: 100%;
|
||||
gap: 1rem;
|
||||
/* margin-top: 1rem; */
|
||||
/* margin-bottom: 1rem; */
|
||||
align-items: center;
|
||||
z-index: 999;
|
||||
grid-template-rows: 1fr auto; }
|
||||
|
||||
#caret {
|
||||
width: 2px;
|
||||
height: 1.5rem;
|
||||
background: var(--caret-color);
|
||||
animation-name: caretFlash;
|
||||
/* animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); */
|
||||
animation-iteration-count: infinite;
|
||||
animation-duration: 1s;
|
||||
position: absolute;
|
||||
transition: 0.05s; }
|
||||
|
||||
@keyframes caretFlash {
|
||||
0% {
|
||||
background: transparent; }
|
||||
50% {
|
||||
background: var(--caret-color); }
|
||||
100% {
|
||||
background: transparent; } }
|
||||
|
||||
#menu {
|
||||
font-size: 1rem;
|
||||
line-height: 1rem;
|
||||
color: var(--sub-color);
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
/* gap: 1rem; */
|
||||
margin-bottom: -0.4rem;
|
||||
width: fit-content;
|
||||
width: -moz-fit-content;
|
||||
/* transition: 0.25s; */ }
|
||||
|
||||
#menu .button {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
align-content: center;
|
||||
transition: 0.25s;
|
||||
padding: 0.5rem; }
|
||||
|
||||
#menu .button .icon {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem; }
|
||||
|
||||
#menu .button:hover {
|
||||
cursor: pointer;
|
||||
color: var(--main-color); }
|
||||
|
||||
#menu .button .text {
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
/* transition: .25s; */ }
|
||||
|
||||
/* #menu .button:hover .text{
|
||||
width: auto;
|
||||
} */
|
||||
#top.focus #menu {
|
||||
color: transparent; }
|
||||
|
||||
#menu .separator {
|
||||
width: 2px;
|
||||
height: 1rem;
|
||||
background-color: var(--sub-color); }
|
||||
|
||||
#top {
|
||||
line-height: 2.3rem;
|
||||
font-size: 2.3rem;
|
||||
/* text-align: center; */
|
||||
transition: 0.5s;
|
||||
padding: 0 5px;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
margin-bottom: 1rem;
|
||||
z-index: 2;
|
||||
align-items: center;
|
||||
gap: 0.5rem; }
|
||||
|
||||
#top .logo {
|
||||
margin-bottom: -0.12rem;
|
||||
white-space: nowrap; }
|
||||
|
||||
#top .logo .top {
|
||||
font-size: 0.65rem;
|
||||
line-height: 0.65rem;
|
||||
margin-bottom: -0.4rem;
|
||||
margin-left: -0.1rem;
|
||||
color: var(--sub-color); }
|
||||
|
||||
#top .logo .bottom {
|
||||
margin-left: -0.15rem; }
|
||||
|
||||
#top .config {
|
||||
display: grid;
|
||||
grid-auto-flow: row;
|
||||
grid-gap: 0.2rem;
|
||||
width: min-content;
|
||||
transition: 0.25s;
|
||||
/* margin-bottom: 0.1rem; */
|
||||
grid-column: 3/4;
|
||||
grid-row: 1/2; }
|
||||
|
||||
#top .config .group {
|
||||
transition: 0.25s; }
|
||||
|
||||
#top .config .punctuationMode {
|
||||
margin-bottom: -0.1rem; }
|
||||
|
||||
#top .config .group .buttons {
|
||||
font-size: 0.7rem;
|
||||
line-height: 0.7rem;
|
||||
display: flex; }
|
||||
|
||||
#top .config .group .buttons .button {
|
||||
transition: 0.25s;
|
||||
color: var(--sub-color);
|
||||
cursor: pointer;
|
||||
margin-right: 0.25rem; }
|
||||
|
||||
#top .config .group .buttons .button:last-child {
|
||||
margin-right: 0; }
|
||||
|
||||
#top .config .group .buttons .button:hover {
|
||||
color: var(--main-color); }
|
||||
|
||||
#top .config .group .buttons .button.active:hover {
|
||||
cursor: default; }
|
||||
|
||||
#top .config .group .buttons .toggleButton.active:hover {
|
||||
cursor: pointer; }
|
||||
|
||||
#top .config .group .buttons .button.active {
|
||||
color: var(--main-color); }
|
||||
|
||||
#top .config .group .title {
|
||||
color: var(--sub-color);
|
||||
font-size: 0.5rem;
|
||||
line-height: 0.5rem;
|
||||
margin-bottom: 0.15rem; }
|
||||
|
||||
#top .result {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-gap: 1rem;
|
||||
width: min-content;
|
||||
transition: 0.25s;
|
||||
grid-column: 3/4;
|
||||
grid-row: 1/2; }
|
||||
|
||||
#top.focus .result {
|
||||
opacity: 0 !important; }
|
||||
|
||||
#top .result .group .title {
|
||||
font-size: 0.65rem;
|
||||
line-height: 0.65rem;
|
||||
color: var(--sub-color); }
|
||||
|
||||
#top .result .group .val {
|
||||
font-size: 1.7rem;
|
||||
line-height: 1.7rem;
|
||||
color: var(--main-color);
|
||||
transition: 0.25s; }
|
||||
|
||||
#tip {
|
||||
font-size: 0.75rem;
|
||||
line-height: 0.75rem;
|
||||
color: var(--sub-color);
|
||||
text-align: center;
|
||||
/* margin-top: 1rem; */
|
||||
align-self: center;
|
||||
margin-top: 1rem;
|
||||
opacity: 0;
|
||||
transition: 0.25s; }
|
||||
|
||||
key {
|
||||
color: var(--bg-color);
|
||||
background-color: var(--sub-color);
|
||||
/* font-weight: bold; */
|
||||
padding: 3px 5px;
|
||||
border-radius: 0.1rem;
|
||||
display: inline-block; }
|
||||
|
||||
#bottom {
|
||||
text-align: center;
|
||||
line-height: 1rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--sub-color);
|
||||
transition: 0.5s; }
|
||||
|
||||
#top.focus {
|
||||
color: var(--sub-color) !important; }
|
||||
|
||||
#top.focus .config {
|
||||
opacity: 0 !important; }
|
||||
|
||||
#bottom.focus {
|
||||
opacity: 0 !important; }
|
||||
|
||||
#middle {
|
||||
/* display:grid; */
|
||||
/* align-items: center; */
|
||||
/* justify-content: center; */
|
||||
z-index: 999; }
|
||||
|
||||
#result {
|
||||
height: 400px;
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
align-items: center; }
|
||||
|
||||
#result .groups {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
gap: 1rem;
|
||||
width: min-content; }
|
||||
|
||||
#result .group .title {
|
||||
color: var(--sub-color);
|
||||
line-height: 1rem; }
|
||||
|
||||
#result .group .val {
|
||||
font-size: 2rem;
|
||||
line-height: 2rem; }
|
||||
|
||||
#wordsInput {
|
||||
height: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
display: block; }
|
||||
|
||||
#words {
|
||||
height: fit-content;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
align-content: flex-start;
|
||||
user-select: none; }
|
||||
|
||||
#restartTestButton {
|
||||
border-radius: var(--roundness);
|
||||
padding: 1rem 5rem;
|
||||
width: min-content;
|
||||
width: -moz-min-content;
|
||||
color: var(--sub-color);
|
||||
transition: 0.25s;
|
||||
margin: 0 auto 0 auto;
|
||||
cursor: pointer; }
|
||||
#restartTestButton:hover, #restartTestButton:focus {
|
||||
color: var(--main-color);
|
||||
outline: none; }
|
||||
#restartTestButton:focus {
|
||||
background: #0d0d0d; }
|
||||
|
||||
.word {
|
||||
margin: 5px 5px;
|
||||
color: var(--sub-color);
|
||||
display: flex;
|
||||
transition: 0.25s;
|
||||
/* margin-bottom: 1px; */
|
||||
border-bottom: 2px solid transparent; }
|
||||
|
||||
.word.error {
|
||||
/* margin-bottom: 1px; */
|
||||
border-bottom: 2px solid #da3333;
|
||||
text-shadow: 1px 0px 0px #111, 2px 0px 0px #111, -1px 0px 0px #111, -2px 0px 0px #111, 0px 1px 0px #111, 1px 1px 0px #111, -1px 1px 0px #111; }
|
||||
|
||||
.word.active {
|
||||
color: var(--active-word-color); }
|
||||
|
||||
.word letter {
|
||||
/* transition: 0.1s; */
|
||||
height: 1rem;
|
||||
line-height: 1rem;
|
||||
/* margin: 0 1px; */ }
|
||||
|
||||
.word letter.correct {
|
||||
color: var(--main-color); }
|
||||
|
||||
.word letter.incorrect {
|
||||
color: #da3333; }
|
||||
|
||||
.word letter.incorrect.extra {
|
||||
color: #791717; }
|
||||
|
||||
.word letter.missing {
|
||||
opacity: 0.5; }
|
||||
|
||||
* {
|
||||
box-sizing: border-box; }
|
||||
|
||||
.hidden {
|
||||
display: none !important; }
|
||||
545
public/css/style.scss
Normal file
545
public/css/style.scss
Normal file
|
|
@ -0,0 +1,545 @@
|
|||
@import url("https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap");
|
||||
|
||||
:root {
|
||||
--main-color: #eee;
|
||||
--sub-color: #444;
|
||||
--bg-color: #111;
|
||||
--caret-color: #fff;
|
||||
--active-word-color: #444;
|
||||
--roundness: 0.25rem;
|
||||
}
|
||||
/*
|
||||
:root {
|
||||
--main-color: #111;
|
||||
--sub-color: #444;
|
||||
--sub2-color: #444;
|
||||
--bg-color: #fff;
|
||||
} */
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 2rem;
|
||||
height: 100vh;
|
||||
background: var(--bg-color);
|
||||
font-family: "Roboto Mono";
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--sub-color);
|
||||
transition: 0.25s;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
#commandLineWrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.75);
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
align-items: start;
|
||||
padding: 5rem 0;
|
||||
#commandLine {
|
||||
width: 50vw;
|
||||
background: var(--bg-color);
|
||||
border-radius: var(--roundness);
|
||||
input {
|
||||
background: var(--bg-color);
|
||||
padding: 1rem;
|
||||
color: var(--main-color);
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 1rem;
|
||||
font-family: "Roboto Mono";
|
||||
width: 100%;
|
||||
}
|
||||
.separator {
|
||||
background: black;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.listTitle {
|
||||
color: var(--main-color);
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.75rem;
|
||||
line-height: 0.75rem;
|
||||
}
|
||||
.suggestions {
|
||||
display: grid;
|
||||
.entry {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.75rem;
|
||||
line-height: 0.75rem;
|
||||
color: var(--sub-color);
|
||||
&.active {
|
||||
color: var(--main-color);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#resultScreenshot {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: min-content;
|
||||
white-space: nowrap;
|
||||
padding: 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
background: var(--bg-color);
|
||||
.logo {
|
||||
.top {
|
||||
color: var(--sub-color);
|
||||
font-size: 0.42rem;
|
||||
line-height: 0.42rem;
|
||||
margin-bottom: -0.3rem;
|
||||
margin-left: 0.05rem;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
.bottom {
|
||||
font-size: 0.75rem;
|
||||
line-height: 0.75rem;
|
||||
color: var(--sub-color);
|
||||
padding: 0 0.5rem 0.5rem 0.5rem;
|
||||
}
|
||||
}
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
justify-content: space-between;
|
||||
.group {
|
||||
padding: 0.5rem;
|
||||
.top {
|
||||
color: var(--sub-color);
|
||||
line-height: 1rem;
|
||||
// margin-bottom: -.25rem;
|
||||
}
|
||||
.bottom {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#timerWrapper {
|
||||
opacity: 0;
|
||||
transition: 0.25s;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#timer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 0vw;
|
||||
/* height: 0.5rem; */
|
||||
height: 0.5rem;
|
||||
background: var(--sub-color);
|
||||
/* background: #0f0f0f; */
|
||||
/* background: red; */
|
||||
transition: 1s linear;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#liveWpm {
|
||||
// font-size: 1.7rem;
|
||||
// line-height: 1.7rem;
|
||||
// color: var(--sub-color);
|
||||
font-size: 10rem;
|
||||
color: black;
|
||||
opacity: 0.25;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
// text-align: right;
|
||||
z-index: -1;
|
||||
// margin-top: .6rem;
|
||||
// grid-column: 3/4;
|
||||
// grid-row: 1/2;
|
||||
// opacity: 0;
|
||||
height: 0;
|
||||
transition: 0.25s;
|
||||
}
|
||||
|
||||
#centerContent {
|
||||
max-width: 800px;
|
||||
min-width: 600px;
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-auto-flow: row;
|
||||
/* grid-template-rows: 2rem auto 1rem; */
|
||||
height: 100%;
|
||||
gap: 1rem;
|
||||
/* margin-top: 1rem; */
|
||||
/* margin-bottom: 1rem; */
|
||||
align-items: center;
|
||||
z-index: 999;
|
||||
grid-template-rows: 1fr auto;
|
||||
}
|
||||
|
||||
#caret {
|
||||
width: 2px;
|
||||
height: 1.5rem;
|
||||
background: var(--caret-color);
|
||||
animation-name: caretFlash;
|
||||
/* animation-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955); */
|
||||
animation-iteration-count: infinite;
|
||||
animation-duration: 1s;
|
||||
position: absolute;
|
||||
transition: 0.05s;
|
||||
}
|
||||
|
||||
@keyframes caretFlash {
|
||||
0% {
|
||||
background: transparent;
|
||||
}
|
||||
50% {
|
||||
background: var(--caret-color);
|
||||
}
|
||||
100% {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
#menu {
|
||||
font-size: 1rem;
|
||||
line-height: 1rem;
|
||||
color: var(--sub-color);
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
/* gap: 1rem; */
|
||||
margin-bottom: -0.4rem;
|
||||
width: fit-content;
|
||||
width: -moz-fit-content;
|
||||
/* transition: 0.25s; */
|
||||
}
|
||||
|
||||
#menu .button {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
align-content: center;
|
||||
transition: 0.25s;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
#menu .button .icon {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
#menu .button:hover {
|
||||
cursor: pointer;
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
#menu .button .text {
|
||||
width: 0;
|
||||
overflow: hidden;
|
||||
/* transition: .25s; */
|
||||
}
|
||||
|
||||
/* #menu .button:hover .text{
|
||||
width: auto;
|
||||
} */
|
||||
|
||||
#top.focus #menu {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
#menu .separator {
|
||||
width: 2px;
|
||||
height: 1rem;
|
||||
background-color: var(--sub-color);
|
||||
}
|
||||
|
||||
#top {
|
||||
line-height: 2.3rem;
|
||||
font-size: 2.3rem;
|
||||
/* text-align: center; */
|
||||
transition: 0.5s;
|
||||
padding: 0 5px;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
margin-bottom: 1rem;
|
||||
z-index: 2;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
#top .logo {
|
||||
margin-bottom: -0.12rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#top .logo .top {
|
||||
font-size: 0.65rem;
|
||||
line-height: 0.65rem;
|
||||
margin-bottom: -0.4rem;
|
||||
margin-left: -0.1rem;
|
||||
color: var(--sub-color);
|
||||
}
|
||||
|
||||
#top .logo .bottom {
|
||||
margin-left: -0.15rem;
|
||||
}
|
||||
|
||||
#top .config {
|
||||
display: grid;
|
||||
grid-auto-flow: row;
|
||||
grid-gap: 0.2rem;
|
||||
width: min-content;
|
||||
transition: 0.25s;
|
||||
/* margin-bottom: 0.1rem; */
|
||||
grid-column: 3/4;
|
||||
grid-row: 1/2;
|
||||
}
|
||||
|
||||
#top .config .group {
|
||||
transition: 0.25s;
|
||||
}
|
||||
|
||||
#top .config .punctuationMode {
|
||||
margin-bottom: -0.1rem;
|
||||
}
|
||||
|
||||
#top .config .group .buttons {
|
||||
font-size: 0.7rem;
|
||||
line-height: 0.7rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#top .config .group .buttons .button {
|
||||
transition: 0.25s;
|
||||
color: var(--sub-color);
|
||||
cursor: pointer;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
#top .config .group .buttons .button:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#top .config .group .buttons .button:hover {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
#top .config .group .buttons .button.active:hover {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#top .config .group .buttons .toggleButton.active:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#top .config .group .buttons .button.active {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
#top .config .group .title {
|
||||
color: var(--sub-color);
|
||||
font-size: 0.5rem;
|
||||
line-height: 0.5rem;
|
||||
margin-bottom: 0.15rem;
|
||||
}
|
||||
|
||||
#top .result {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-gap: 1rem;
|
||||
width: min-content;
|
||||
transition: 0.25s;
|
||||
grid-column: 3/4;
|
||||
grid-row: 1/2;
|
||||
}
|
||||
|
||||
#top.focus .result {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
#top .result .group .title {
|
||||
font-size: 0.65rem;
|
||||
line-height: 0.65rem;
|
||||
color: var(--sub-color);
|
||||
}
|
||||
|
||||
#top .result .group .val {
|
||||
font-size: 1.7rem;
|
||||
line-height: 1.7rem;
|
||||
color: var(--main-color);
|
||||
transition: 0.25s;
|
||||
}
|
||||
|
||||
#tip {
|
||||
font-size: 0.75rem;
|
||||
line-height: 0.75rem;
|
||||
color: var(--sub-color);
|
||||
text-align: center;
|
||||
/* margin-top: 1rem; */
|
||||
align-self: center;
|
||||
|
||||
margin-top: 1rem;
|
||||
opacity: 0;
|
||||
transition: 0.25s;
|
||||
}
|
||||
|
||||
key {
|
||||
color: var(--bg-color);
|
||||
background-color: var(--sub-color);
|
||||
/* font-weight: bold; */
|
||||
padding: 3px 5px;
|
||||
border-radius: 0.1rem;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#bottom {
|
||||
text-align: center;
|
||||
line-height: 1rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--sub-color);
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
#top.focus {
|
||||
color: var(--sub-color) !important;
|
||||
}
|
||||
|
||||
#top.focus .config {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
#bottom.focus {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
|
||||
#middle {
|
||||
/* display:grid; */
|
||||
/* align-items: center; */
|
||||
/* justify-content: center; */
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
#result {
|
||||
height: 400px;
|
||||
display: grid;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#result .groups {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
gap: 1rem;
|
||||
width: min-content;
|
||||
}
|
||||
|
||||
#result .group .title {
|
||||
color: var(--sub-color);
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
#result .group .val {
|
||||
font-size: 2rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
#wordsInput {
|
||||
height: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#words {
|
||||
height: fit-content;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
align-content: flex-start;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#restartTestButton {
|
||||
border-radius: var(--roundness);
|
||||
padding: 1rem 5rem;
|
||||
width: min-content;
|
||||
width: -moz-min-content;
|
||||
color: var(--sub-color);
|
||||
transition: 0.25s;
|
||||
margin: 0 auto 0 auto;
|
||||
cursor: pointer;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--main-color);
|
||||
outline: none;
|
||||
}
|
||||
&:focus {
|
||||
background: #0d0d0d;
|
||||
}
|
||||
}
|
||||
|
||||
.word {
|
||||
margin: 5px 5px;
|
||||
color: var(--sub-color);
|
||||
display: flex;
|
||||
transition: 0.25s;
|
||||
/* margin-bottom: 1px; */
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
|
||||
.word.error {
|
||||
/* margin-bottom: 1px; */
|
||||
border-bottom: 2px solid #da3333;
|
||||
text-shadow: 1px 0px 0px #111, 2px 0px 0px #111, -1px 0px 0px #111,
|
||||
-2px 0px 0px #111, 0px 1px 0px #111, 1px 1px 0px #111, -1px 1px 0px #111;
|
||||
}
|
||||
|
||||
.word.active {
|
||||
color: var(--active-word-color);
|
||||
}
|
||||
|
||||
.word letter {
|
||||
/* transition: 0.1s; */
|
||||
height: 1rem;
|
||||
line-height: 1rem;
|
||||
/* margin: 0 1px; */
|
||||
}
|
||||
|
||||
.word letter.correct {
|
||||
color: var(--main-color);
|
||||
}
|
||||
|
||||
.word letter.incorrect {
|
||||
color: #da3333;
|
||||
}
|
||||
|
||||
.word letter.incorrect.extra {
|
||||
color: #791717;
|
||||
}
|
||||
|
||||
.word letter.missing {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
164
public/index.html
Normal file
164
public/index.html
Normal file
|
|
@ -0,0 +1,164 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
<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="middle">
|
||||
<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">
|
||||
<div class="icon">
|
||||
<i class="fas fa-fw fa-keyboard"></i>
|
||||
</div>
|
||||
<div class="text">
|
||||
Test
|
||||
</div>
|
||||
</div>
|
||||
<div class="button" tabindex="2">
|
||||
<div class="icon">
|
||||
<i class="fas fa-fw fa-info"></i>
|
||||
</div>
|
||||
<div class="text">
|
||||
About
|
||||
</div>
|
||||
</div>
|
||||
<div class="button" tabindex="2">
|
||||
<div class="icon">
|
||||
<i class="fas fa-fw fa-cog"></i>
|
||||
</div>
|
||||
<div class="text">
|
||||
Settings
|
||||
</div>
|
||||
</div>
|
||||
<div class="button" tabindex="2">
|
||||
<div class="icon">
|
||||
<i class="fas fa-fw fa-user"></i>
|
||||
</div>
|
||||
<div class="text">
|
||||
Login
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="result hidden">
|
||||
<div class="group testmode" style="align-self: center">
|
||||
<div class="title mode1">words</div>
|
||||
<div class="title mode2">100</div>
|
||||
<div class="title mode3">100</div>
|
||||
</div>
|
||||
<div class="group key">
|
||||
<div class="title">key</div>
|
||||
<div class="val">100/1</div>
|
||||
</div>
|
||||
<div class="group acc">
|
||||
<div class="title">acc</div>
|
||||
<div class="val">95%</div>
|
||||
</div>
|
||||
<div class="group wpm">
|
||||
<div class="title">wpm</div>
|
||||
<div class="val">100</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config">
|
||||
<div class="group punctuationMode">
|
||||
<!-- <div class="title">time</div> -->
|
||||
<div class="buttons">
|
||||
<div class="button toggleButton active" tabindex="2">punctuation</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group mode">
|
||||
<!-- <div class="title">mode</div> -->
|
||||
<div class="buttons">
|
||||
<div class="button" mode="time">time</div>
|
||||
<div class="button active" mode="words">words</div>
|
||||
<div class="button" mode="custom">custom</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group wordCount">
|
||||
<!-- <div class="title">words</div> -->
|
||||
<div class="buttons">
|
||||
<div class="button" wordCount="10">10</div>
|
||||
<div class="button" wordCount="25">25</div>
|
||||
<div class="button active" wordCount="50">50</div>
|
||||
<div class="button" wordCount="100">100</div>
|
||||
<div class="button" wordCount="200">200</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group time hidden">
|
||||
<!-- <div class="title">time</div> -->
|
||||
<div class="buttons">
|
||||
<div class="button" timeConfig="15">15</div>
|
||||
<div class="button active" timeConfig="30">30</div>
|
||||
<div class="button" timeConfig="60">60</div>
|
||||
<div class="button" timeConfig="120">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>
|
||||
<div id="caret" class="hidden"></div>
|
||||
<div id="words" class=""></div>
|
||||
<input id="wordsInput" class="" tabindex="0"></input>
|
||||
<div id="restartTestButton" tabindex="0"><i class="fas fa-redo-alt"></i></div>
|
||||
<!-- <div id="liveWpm" class="">-</div> -->
|
||||
</div>
|
||||
<div id="bottom">
|
||||
Hey, im optimising the website for keyboard only use, so from now to restart the test press <key>tab</key> and then <key>enter</key> / <key>space</key> (also so its simmilar to other typing tests). If some of you really like this quick test restart I guess I could add a setting for it :P
|
||||
<br><br>
|
||||
Created by <a href="https://www.reddit.com/message/compose?to=Miodec">Miodec</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
|
||||
<script src="js/script.js"></script>
|
||||
</html>
|
||||
65
public/index_old.html
Normal file
65
public/index_old.html
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Welcome to Firebase Hosting</title>
|
||||
|
||||
<!-- update the version number as needed -->
|
||||
<script defer src="/__/firebase/7.14.3/firebase-app.js"></script>
|
||||
<!-- include only the Firebase features as you need -->
|
||||
<script defer src="/__/firebase/7.14.3/firebase-auth.js"></script>
|
||||
<script defer src="/__/firebase/7.14.3/firebase-database.js"></script>
|
||||
<script defer src="/__/firebase/7.14.3/firebase-messaging.js"></script>
|
||||
<script defer src="/__/firebase/7.14.3/firebase-storage.js"></script>
|
||||
<!-- initialize the SDK after all desired features are loaded -->
|
||||
<script defer src="/__/firebase/init.js"></script>
|
||||
|
||||
<style media="screen">
|
||||
body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
|
||||
#message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px; }
|
||||
#message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
|
||||
#message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
|
||||
#message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
|
||||
#message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
|
||||
#message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
|
||||
#load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
|
||||
@media (max-width: 600px) {
|
||||
body, #message { margin-top: 0; background: white; box-shadow: none; }
|
||||
body { border-top: 16px solid #ffa100; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="message">
|
||||
<h2>Welcome</h2>
|
||||
<h1>Firebase Hosting Setup Complete</h1>
|
||||
<p>You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!</p>
|
||||
<a target="_blank" href="https://firebase.google.com/docs/hosting/">Open Hosting Documentation</a>
|
||||
</div>
|
||||
<p id="load">Firebase SDK Loading…</p>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
|
||||
// // The Firebase SDK is initialized and available here!
|
||||
//
|
||||
// firebase.auth().onAuthStateChanged(user => { });
|
||||
// firebase.database().ref('/path/to/ref').on('value', snapshot => { });
|
||||
// firebase.messaging().requestPermission().then(() => { });
|
||||
// firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { });
|
||||
//
|
||||
// // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
|
||||
|
||||
try {
|
||||
let app = firebase.app();
|
||||
let features = ['auth', 'database', 'messaging', 'storage'].filter(feature => typeof app[feature] === 'function');
|
||||
document.getElementById('load').innerHTML = `Firebase SDK loaded with ${features.join(', ')}`;
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
document.getElementById('load').innerHTML = 'Error loading the Firebase SDK, check the console.';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
1233
public/js/script.js
Normal file
1233
public/js/script.js
Normal file
File diff suppressed because it is too large
Load diff
Loading…
Add table
Reference in a new issue