monkeytypegame/monkeytype
1
1
Fork 0
mirror of https://github.com/monkeytypegame/monkeytype.git synced 2025-10-14 01:26:09 +08:00
Code Issues Projects Releases Packages Wiki Activity

initial preview, no functionality

Browse source
This commit is contained in:
Miodec 2022-08-23 12:29:19 +02:00
parent 2d04bef552
commit c993ed35f1
5 changed files with 180 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/styles/core.scss
View file

@ -351,7 +351,7 @@ key {
color: var(--sub-color);
cursor: pointer;
transition: background 0.125s, color 0.125s;
padding: 0.5rem;
padding: 0.5em;
border-radius: var(--roundness);
text-align: center;
user-select: none;
@ -359,16 +359,16 @@ key {
align-content: center;
height: min-content;
height: -moz-min-content;
line-height: 1.25rem;
line-height: 1.25em;
appearance: none;
border: none;
font-family: inherit;
font-size: 1rem;
font-size: 1em;
width: max-content;
width: -moz-max-content;
display: grid;
grid-auto-flow: column;
gap: 0.25rem;
gap: 0.25em;
text-decoration: none;
.fas,

35
frontend/src/styles/test.scss
View file

@ -982,6 +982,41 @@
}
}
.newTestConfig {
display: grid;
font-size: 0.75rem;
gap: 0.5rem;
grid-auto-flow: column;
height: max-content;
width: 100%;
justify-content: space-around;
.row {
display: flex;
padding: 0.25rem 1rem;
background: var(--sub-alt-color);
border-radius: var(--roundness);
// width: max-content;
}
.spacer {
height: 75%;
width: 0.25rem;
border-radius: calc(var(--roundness) / 2);
background: var(--bg-color);
margin: auto 1rem;
}
}
.pageTest {
height: 100%;
display: grid;
grid-template-rows: 1fr auto 1fr;
}
#menu {
width: 100%;
grid-template-columns: auto auto auto 1fr auto;
}
.pageTest {
#wordsWrapper {
position: relative;

115
frontend/static/html/pages/test.html
View file

@ -1,4 +1,118 @@
<div class="page pageTest hidden">
<div class="newTestConfig">
<div class="row">
<div class="textButton">
<span
class="punc"
style="
font-weight: 900;
width: 1.25rem;
text-align: center;
display: inline-block;
letter-spacing: -0.1rem;
"
>
!?
</span>
punctuation
</div>
<div class="textButton">
<span
class="punc"
style="
font-weight: 900;
width: 1.25rem;
text-align: center;
display: inline-block;
letter-spacing: -0.1rem;
"
>
15
</span>
numbers
</div>
<div class="spacer"></div>
<div class="textButton active">
<i class="fas fa-fw fa-clock"></i>
time
</div>
<div class="textButton">
<i class="fas fa-fw fa-font"></i>
words
</div>
<div class="textButton">
<i class="fas fa-fw fa-quote-left"></i>
quote
</div>
<div class="textButton">
<i class="fas fa-fw fa-mountain"></i>
zen
</div>
<div class="textButton">
<i class="fas fa-fw fa-wrench"></i>
custom
</div>
<div class="spacer"></div>
<div class="textButton active">15</div>
<div class="textButton">30</div>
<div class="textButton">60</div>
<div class="textButton">120</div>
<div class="textButton">
<i class="fas fa-fw fa-tools"></i>
</div>
</div>
<!-- <div class="row">
<div class="textButton">
<i class="fas fa-fw fa-exclamation"></i>
punctuation
</div>
<div class="textButton">
<i class="fas fa-fw fa-sort-numeric-down"></i>
numbers
</div>
</div>
<div class="row">
<div class="textButton active">
<i class="fas fa-fw fa-clock"></i>
time
</div>
<div class="textButton">
<i class="fas fa-fw fa-font"></i>
words
</div>
<div class="textButton">
<i class="fas fa-fw fa-quote-left"></i>
quote
</div>
<div class="textButton">
<i class="fas fa-fw fa-mountain"></i>
zen
</div>
<div class="textButton">
<i class="fas fa-fw fa-wrench"></i>
custom
</div>
<div class="spacer"></div>
<div class="textButton">
<i class="fas fa-fw fa-exclamation"></i>
punctuation
</div>
<div class="textButton">
<i class="fas fa-fw fa-sort-numeric-down"></i>
numbers
</div>
</div>
<div class="row">
<div class="textButton active">15</div>
<div class="textButton">30</div>
<div class="textButton">60</div>
<div class="textButton">120</div>
<div class="textButton">
<i class="fas fa-fw fa-tools"></i>
</div>
</div> -->
</div>
<div id="typingTest">
<div id="capsWarning" class="hidden">
<i class="fas fa-lock"></i>
@ -322,4 +436,5 @@
</div>
<div class="ssWatermark hidden">monkeytype.com</div>
</div>
<div></div>
</div>

112
frontend/static/html/top.html
View file

@ -99,6 +99,7 @@
<i class="fas fa-fw fa-cog"></i>
</div>
</a>
<div></div>
<a
class="textButton hidden account view-account"
tabindex="2"
@ -131,98 +132,35 @@
<i class="far fa-fw fa-user"></i>
</div>
</a>
<a
class="textButton view-settings"
tabindex="2"
href="/settings"
onclick="this.blur();"
data-link
>
<div class="icon">
<i class="fas fa-fw fa-bell"></i>
</div>
</a>
<a
class="textButton view-settings"
tabindex="2"
href="/settings"
onclick="this.blur();"
data-link
>
<div class="icon">
<i class="fas fa-fw fa-sign-out-alt"></i>
</div>
</a>
</div>
<div class="config hidden">
<div class="mobileConfig">
<div class="textButton">
<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="textButton toggleButton" tabindex="2">punctuation</div>
</div>
</div>
<div class="group numbersMode">
<!-- <div class="title">time</div> -->
<div class="buttons">
<div class="textButton toggleButton" tabindex="2">numbers</div>
</div>
</div>
</div>
<div class="group mode">
<!-- <div class="title">mode</div> -->
<div class="buttons">
<div class="textButton active" mode="time" tabindex="2">time</div>
<div class="textButton" mode="words" tabindex="2">words</div>
<div class="textButton" mode="quote" tabindex="2">quote</div>
<div class="textButton" mode="zen" tabindex="2">zen</div>
<div class="textButton" mode="custom" tabindex="2">custom</div>
</div>
</div>
<div class="group wordCount hidden">
<!-- <div class="title">words</div> -->
<div class="buttons">
<div class="textButton" wordCount="10" tabindex="2">10</div>
<div class="textButton" wordCount="25" tabindex="2">25</div>
<div class="textButton active" wordCount="50" tabindex="2">50</div>
<div class="textButton" wordCount="100" tabindex="2">100</div>
<div class="textButton" 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="textButton" timeConfig="15" tabindex="2">15</div>
<div class="textButton active" timeConfig="30" tabindex="2">30</div>
<div class="textButton" timeConfig="60" tabindex="2">60</div>
<div class="textButton" timeConfig="120" tabindex="2">120</div>
<div class="textButton" 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="textButton" quoteLength="-1" tabindex="2">all</div>
<div class="textButton" quoteLength="0" tabindex="2">short</div>
<div class="textButton active" quoteLength="1" tabindex="2">
medium
</div>
<div class="textButton" quoteLength="2" tabindex="2">long</div>
<div class="textButton" quoteLength="3" tabindex="2">thicc</div>
<div class="textButton hidden favorite" quoteLength="-3" tabindex="2">
<i class="fas fa-heart"></i>
</div>
<div class="textButton" 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="textButton">change</div>
</div>
</div>
</div>
</div>
<div
<!-- <div
class="signOut hidden"
style="grid-column: 3/4; grid-row: 1/2"
tabindex="0"
>
<i class="fas fa-sign-out-alt"></i>
sign out
</div>
</div> -->
</div>

2
frontend/static/main.html
View file

@ -39,7 +39,7 @@
</div>
<div id="centerContent" class="hidden">
<%= compilation.assets["html/top.html"].source() %>
<div id="middle">
<div id="middle" style="height: 100%">
<%= compilation.assets["html/pages/loading.html"].source() %> <%=
compilation.assets["html/pages/test.html"].source() %> <%=
compilation.assets["html/pages/about.html"].source() %> <%=