mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-03-10 21:53:13 +08:00
added the ability to hide sections in the settings page
This commit is contained in:
Jack
parent
c96304f442
commit
6a67211baf
3 changed files with 424 additions and 348 deletions
|
|
@ -1652,12 +1652,31 @@ key {
|
|||
font-size: 2rem;
|
||||
color: var(--sub-color);
|
||||
line-height: 2rem;
|
||||
cursor: pointer;
|
||||
transition: .25s;
|
||||
|
||||
&:hover {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.fas {
|
||||
margin-left: .5rem;
|
||||
|
||||
&.rotate {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sectionSpacer {
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.settingsGroup {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.section {
|
||||
display: grid;
|
||||
// gap: .5rem;
|
||||
|
|
|
|||
|
|
@ -1005,400 +1005,417 @@
|
|||
<div class="tip">tip: You can also change all these settings quickly using the command line (<key>esc</key>)
|
||||
</div>
|
||||
|
||||
<div class="sectionGroupTitle">behaviour</div>
|
||||
<div class="section difficulty">
|
||||
<h1>test difficulty</h1>
|
||||
<div class="text">Normal is the classic type test experience. Expert fails the test if you submit (press
|
||||
space) an incorrect word.
|
||||
Master fails if you press a single incorrect key (meaning you have to achieve 100% accuracy).
|
||||
<div class="sectionGroupTitle" group="behaviour">
|
||||
behaviour
|
||||
<i class="fas fa-chevron-down"></i></div>
|
||||
<div class="settingsGroup behaviour">
|
||||
<div class="section difficulty">
|
||||
<h1>test difficulty</h1>
|
||||
<div class="text">Normal is the classic type test experience. Expert fails the test if you submit (press
|
||||
space) an incorrect word.
|
||||
Master fails if you press a single incorrect key (meaning you have to achieve 100% accuracy).
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="button" difficulty="normal" tabindex="0" onclick="this.blur();">normal</div>
|
||||
<div class="button" difficulty="expert" tabindex="0" onclick="this.blur();">expert</div>
|
||||
<div class="button" difficulty="master" tabindex="0" onclick="this.blur();">master</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="button" difficulty="normal" tabindex="0" onclick="this.blur();">normal</div>
|
||||
<div class="button" difficulty="expert" tabindex="0" onclick="this.blur();">expert</div>
|
||||
<div class="button" difficulty="master" tabindex="0" onclick="this.blur();">master</div>
|
||||
<div class="section quickTab">
|
||||
<h1>quick tab mode</h1>
|
||||
<div class="text">Press <key>tab</key> to quickly restart the test, or to quickly jump to the test page.
|
||||
This
|
||||
function disables tab navigation on the website.</div>
|
||||
<div class="buttons">
|
||||
<div class="button off" tabindex="0" onclick="this.blur();">off</div>
|
||||
<div class="button on" tabindex="0" onclick="this.blur();">on</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section quickTab">
|
||||
<h1>quick tab mode</h1>
|
||||
<div class="text">Press <key>tab</key> to quickly restart the test, or to quickly jump to the test page. This
|
||||
function disables tab navigation on the website.</div>
|
||||
<div class="buttons">
|
||||
<div class="button off" tabindex="0" onclick="this.blur();">off</div>
|
||||
<div class="button on" tabindex="0" onclick="this.blur();">on</div>
|
||||
<div class="section freedomMode">
|
||||
<h1>freedom mode</h1>
|
||||
<div class="text">Allows you to delete any word, even if it was typed correctly.</div>
|
||||
<div class="buttons">
|
||||
<div class="button off" tabindex="0" onclick="this.blur();">off</div>
|
||||
<div class="button on" tabindex="0" onclick="this.blur();">on</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section freedomMode">
|
||||
<h1>freedom mode</h1>
|
||||
<div class="text">Allows you to delete any word, even if it was typed correctly.</div>
|
||||
<div class="buttons">
|
||||
<div class="button off" tabindex="0" onclick="this.blur();">off</div>
|
||||
<div class="button on" tabindex="0" onclick="this.blur();">on</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section confidenceMode">
|
||||
<h1>confidence mode</h1>
|
||||
<div class="text">When enabled, you will not be able to go back to previous words to fix mistakes. When turned
|
||||
up to the max, you won't be able to backspace at all.</div>
|
||||
<div class="buttons">
|
||||
<div class="button" confidenceMode="off" tabindex="0" onclick="this.blur();">off</div>
|
||||
<div class="section confidenceMode">
|
||||
<h1>confidence mode</h1>
|
||||
<div class="text">When enabled, you will not be able to go back to previous words to fix mistakes. When
|
||||
turned
|
||||
up to the max, you won't be able to backspace at all.</div>
|
||||
<div class="buttons">
|
||||
<div class="button" confidenceMode="off" tabindex="0" onclick="this.blur();">off</div>
|
||||
|
||||
<div class="button" confidenceMode="on" tabindex="0" onclick="this.blur();">on</div>
|
||||
<div class="button" confidenceMode="max" tabindex="0" onclick="this.blur();">max</div>
|
||||
<div class="button" confidenceMode="on" tabindex="0" onclick="this.blur();">on</div>
|
||||
<div class="button" confidenceMode="max" tabindex="0" onclick="this.blur();">max</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section stopOnError">
|
||||
<h1>stop on error</h1>
|
||||
<div class="text">When enabled, incorrect input will not be registered and words need to be 100% correct to be
|
||||
able to move on to the next.</div>
|
||||
<div class="buttons">
|
||||
<div class="button off" tabindex="0" onclick="this.blur();">off</div>
|
||||
<div class="button on" tabindex="0" onclick="this.blur();">on</div>
|
||||
<div class="section stopOnError">
|
||||
<h1>stop on error</h1>
|
||||
<div class="text">When enabled, incorrect input will not be registered and words need to be 100% correct to
|
||||
be
|
||||
able to move on to the next.</div>
|
||||
<div class="buttons">
|
||||
<div class="button off" tabindex="0" onclick="this.blur();">off</div>
|
||||
<div class="button on" tabindex="0" onclick="this.blur();">on</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section blindMode">
|
||||
<h1>blind mode</h1>
|
||||
<div class="text">No errors or incorrect words are highlighted. Helps you to focus on raw speed. If enabled,
|
||||
quick end is recommended.</div>
|
||||
<div class="buttons">
|
||||
<div class="button off" tabindex="0" onclick="this.blur();">off</div>
|
||||
<div class="button on" tabindex="0" onclick="this.blur();">⠀</div>
|
||||
<div class="section blindMode">
|
||||
<h1>blind mode</h1>
|
||||
<div class="text">No errors or incorrect words are highlighted. Helps you to focus on raw speed. If enabled,
|
||||
quick end is recommended.</div>
|
||||
<div class="buttons">
|
||||
<div class="button off" tabindex="0" onclick="this.blur();">off</div>
|
||||
<div class="button on" tabindex="0" onclick="this.blur();">⠀</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section quickEnd">
|
||||
<h1>quick end</h1>
|
||||
<div class="text">This only applies to the words mode - when enabled, the test will end as soon as the last
|
||||
word has been typed, even if it's incorrect.
|
||||
When disabled, you need to manually confirm the last incorrect entry with a space.
|
||||
<div class="section quickEnd">
|
||||
<h1>quick end</h1>
|
||||
<div class="text">This only applies to the words mode - when enabled, the test will end as soon as the last
|
||||
word has been typed, even if it's incorrect.
|
||||
When disabled, you need to manually confirm the last incorrect entry with a space.
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="button off" tabindex="0" onclick="this.blur();">off</div>
|
||||
<div class="button on" tabindex="0" onclick="this.blur();">on</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="button off" tabindex="0" onclick="this.blur();">off</div>
|
||||
<div class="button on" tabindex="0" onclick="this.blur();">on</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section tags">
|
||||
<h1>tags</h1>
|
||||
<div class="text">With tags, you can compare how fast you're typing in different situations. You can see your
|
||||
active tags above the test words.
|
||||
They will remain active until you deactivate them, or refresh the page.</div>
|
||||
<div class="tagsListAndButton">
|
||||
<div class="tagsList">
|
||||
<div class="tag" id="0">
|
||||
<div class="active">
|
||||
<i class="fas fa-check-square"></i>
|
||||
<div class="section tags">
|
||||
<h1>tags</h1>
|
||||
<div class="text">With tags, you can compare how fast you're typing in different situations. You can see
|
||||
your
|
||||
active tags above the test words.
|
||||
They will remain active until you deactivate them, or refresh the page.</div>
|
||||
<div class="tagsListAndButton">
|
||||
<div class="tagsList">
|
||||
<div class="tag" id="0">
|
||||
<div class="active">
|
||||
<i class="fas fa-check-square"></i>
|
||||
</div>
|
||||
<div class="title">staggered</div>
|
||||
<div class="editButton"><i class="fas fa-pen"></i></div>
|
||||
<div class="removeButton"><i class="fas fa-trash"></i></div>
|
||||
</div>
|
||||
<div class="title">staggered</div>
|
||||
<div class="editButton"><i class="fas fa-pen"></i></div>
|
||||
<div class="removeButton"><i class="fas fa-trash"></i></div>
|
||||
</div>
|
||||
<div class="addTagButton"><i class="fas fa-plus"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section discordIntegration">
|
||||
<h1>discord integration</h1>
|
||||
<div class="text">When you connect your monkey-type account to your Discord account, you will be
|
||||
automatically
|
||||
assigned a new role every time you achieve a new personal best in a 60 second test. <div
|
||||
class="howto hidden">To
|
||||
pair your accounts, direct message 'George' (our bot) on Discord with the message '!verify <span
|
||||
class="howtocode">-</span>'.</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="button generateCodeButton">Generate pairing code</div>
|
||||
</div>
|
||||
<div class="info hidden">
|
||||
<div><i class="fas fa-check"></i> Your accounts are paired!</div>
|
||||
</div>
|
||||
<div class="code hidden">
|
||||
<div style="width: min-content;white-space: nowrap;">
|
||||
<div class="top">code</div>
|
||||
<div class="bottom">-</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="addTagButton"><i class="fas fa-plus"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section discordIntegration">
|
||||
<h1>discord integration</h1>
|
||||
<div class="text">When you connect your monkey-type account to your Discord account, you will be automatically
|
||||
assigned a new role every time you achieve a new personal best in a 60 second test. <div
|
||||
class="howto hidden">To
|
||||
pair your accounts, direct message 'George' (our bot) on Discord with the message '!verify <span
|
||||
class="howtocode">-</span>'.</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="button generateCodeButton">Generate pairing code</div>
|
||||
</div>
|
||||
<div class="info hidden">
|
||||
<div><i class="fas fa-check"></i> Your accounts are paired!</div>
|
||||
</div>
|
||||
<div class="code hidden">
|
||||
<div style="width: min-content;white-space: nowrap;">
|
||||
<div class="top">code</div>
|
||||
<div class="bottom">-</div>
|
||||
<div class="section layouts">
|
||||
<h1>layout override</h1>
|
||||
<div class="buttons">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section layouts">
|
||||
<h1>layout override</h1>
|
||||
<div class="buttons">
|
||||
<div class="section languages">
|
||||
<h1>language</h1>
|
||||
<div class="buttons">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section languages">
|
||||
<h1>language</h1>
|
||||
<div class="buttons">
|
||||
</div>
|
||||
</div>
|
||||
<div class="section funbox">
|
||||
<h1>funbox</h1>
|
||||
<div class="buttons">
|
||||
<div class="section funbox">
|
||||
<h1>funbox</h1>
|
||||
<div class="buttons">
|
||||
</div>
|
||||
</div>
|
||||
<div class="sectionSpacer"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="sectionSpacer"></div>
|
||||
<div class="sectionGroupTitle">appearance</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 off" tabindex="0" onclick="this.blur();">off</div>
|
||||
<div class="button on" tabindex="0" onclick="this.blur();">on</div>
|
||||
<div class="sectionGroupTitle" group="appearance">
|
||||
appearance
|
||||
<i class="fas fa-chevron-down"></i></div>
|
||||
<div class="settingsGroup appearance">
|
||||
<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 off" tabindex="0" onclick="this.blur();">off</div>
|
||||
<div class="button on" tabindex="0" onclick="this.blur();">on</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section caretStyle" section="">
|
||||
<h1>caret style</h1>
|
||||
<div class="text">Change the style of the caret during the test.</div>
|
||||
<div class="buttons">
|
||||
<div class="button" caret="default" tabindex="0" onclick="this.blur();">|</div>
|
||||
<div class="button" caret="block" tabindex="0" onclick="this.blur();">▮</div>
|
||||
<div class="button" caret="outline" tabindex="0" onclick="this.blur();">▯</div>
|
||||
<div class="button" caret="underline" tabindex="0" onclick="this.blur();">_</div>
|
||||
<div class="section caretStyle" section="">
|
||||
<h1>caret style</h1>
|
||||
<div class="text">Change the style of the caret during the test.</div>
|
||||
<div class="buttons">
|
||||
<div class="button" caret="default" tabindex="0" onclick="this.blur();">|</div>
|
||||
<div class="button" caret="block" tabindex="0" onclick="this.blur();">▮</div>
|
||||
<div class="button" caret="outline" tabindex="0" onclick="this.blur();">▯</div>
|
||||
<div class="button" caret="underline" tabindex="0" onclick="this.blur();">_</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section timerStyle" section="">
|
||||
<h1>timer/progress style</h1>
|
||||
<div class="text">Change the style of the timer/progress during a timed test.</div>
|
||||
<div class="buttons">
|
||||
<div class="button" timer="bar" tabindex="0" onclick="this.blur();">bar</div>
|
||||
<div class="button" timer="text" tabindex="0" onclick="this.blur();">text</div>
|
||||
<div class="section timerStyle" section="">
|
||||
<h1>timer/progress style</h1>
|
||||
<div class="text">Change the style of the timer/progress during a timed test.</div>
|
||||
<div class="buttons">
|
||||
<div class="button" timer="bar" tabindex="0" onclick="this.blur();">bar</div>
|
||||
<div class="button" timer="text" tabindex="0" onclick="this.blur();">text</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section timerColor" section="">
|
||||
<h1>timer/progress color</h1>
|
||||
<div class="text">Change the color of the timer/progress number/bar and live wpm number.</div>
|
||||
<div class="buttons">
|
||||
<div class="button" color="black" tabindex="0" onclick="this.blur();">black</div>
|
||||
<div class="button" color="sub" tabindex="0" onclick="this.blur();">sub</div>
|
||||
<div class="button" color="text" tabindex="0" onclick="this.blur();">text</div>
|
||||
<div class="button" color="main" tabindex="0" onclick="this.blur();">main</div>
|
||||
<div class="section timerColor" section="">
|
||||
<h1>timer/progress color</h1>
|
||||
<div class="text">Change the color of the timer/progress number/bar and live wpm number.</div>
|
||||
<div class="buttons">
|
||||
<div class="button" color="black" tabindex="0" onclick="this.blur();">black</div>
|
||||
<div class="button" color="sub" tabindex="0" onclick="this.blur();">sub</div>
|
||||
<div class="button" color="text" tabindex="0" onclick="this.blur();">text</div>
|
||||
<div class="button" color="main" tabindex="0" onclick="this.blur();">main</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section timerOpacity" section="">
|
||||
<h1>timer/progress opacity</h1>
|
||||
<div class="text">Change the opacity of the timer/progress number/bar and live wpm number.</div>
|
||||
<div class="buttons">
|
||||
<div class="button" opacity="0.25" tabindex="0" onclick="this.blur();">0.25</div>
|
||||
<div class="button" opacity="0.5" tabindex="0" onclick="this.blur();">0.5</div>
|
||||
<div class="button" opacity="0.75" tabindex="0" onclick="this.blur();">0.75</div>
|
||||
<div class="button" opacity="1" tabindex="0" onclick="this.blur();">1</div>
|
||||
<div class="section timerOpacity" section="">
|
||||
<h1>timer/progress opacity</h1>
|
||||
<div class="text">Change the opacity of the timer/progress number/bar and live wpm number.</div>
|
||||
<div class="buttons">
|
||||
<div class="button" opacity="0.25" tabindex="0" onclick="this.blur();">0.25</div>
|
||||
<div class="button" opacity="0.5" tabindex="0" onclick="this.blur();">0.5</div>
|
||||
<div class="button" opacity="0.75" tabindex="0" onclick="this.blur();">0.75</div>
|
||||
<div class="button" opacity="1" tabindex="0" onclick="this.blur();">1</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section smoothLineScroll">
|
||||
<h1>smooth line scroll</h1>
|
||||
<div class="text">When enabled, the line transition will be animated.
|
||||
<div class="section smoothLineScroll">
|
||||
<h1>smooth line scroll</h1>
|
||||
<div class="text">When enabled, the line transition will be animated.
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="button off" tabindex="0" onclick="this.blur();">off</div>
|
||||
<div class="button on" tabindex="0" onclick="this.blur();">on</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="button off" tabindex="0" onclick="this.blur();">off</div>
|
||||
<div class="button on" tabindex="0" onclick="this.blur();">on</div>
|
||||
<div class="section showAllLines">
|
||||
<h1>show all lines</h1>
|
||||
<div class="text">When enabled, the website will show all lines for word,custom and quote mode tests -
|
||||
otherwise the lines will be limited to 3, and will automatically scroll. Using this could cause the timer
|
||||
text and live wpm to not be visible.
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="button off" tabindex="0" onclick="this.blur();">off</div>
|
||||
<div class="button on" tabindex="0" onclick="this.blur();">on</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section showAllLines">
|
||||
<h1>show all lines</h1>
|
||||
<div class="text">When enabled, the website will show all lines for word,custom and quote mode tests -
|
||||
otherwise the lines will be limited to 3, and will automatically scroll. Using this could cause the timer
|
||||
text and live wpm to not be visible.
|
||||
<div class="section keymapMode">
|
||||
<h1>keymap</h1>
|
||||
<div class="text">Displays your current layout while taking a test. React shows what you pressed and Next
|
||||
shows what you need to press next.</div>
|
||||
<div class="buttons">
|
||||
<div class="button" keymapMode="off" tabindex="0" onclick="this.blur();">off</div>
|
||||
<div class="button" keymapMode="react" tabindex="0" onclick="this.blur();">react</div>
|
||||
<div class="button" keymapMode="next" tabindex="0" onclick="this.blur();">next</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="button off" tabindex="0" onclick="this.blur();">off</div>
|
||||
<div class="button on" tabindex="0" onclick="this.blur();">on</div>
|
||||
<div class="section keymapLayout">
|
||||
<h1>keymap layout</h1>
|
||||
<div class="buttons">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section keymapMode">
|
||||
<h1>keymap</h1>
|
||||
<div class="text">Displays your current layout while taking a test. React shows what you pressed and Next
|
||||
shows what you need to press next.</div>
|
||||
<div class="buttons">
|
||||
<div class="button" keymapMode="off" tabindex="0" onclick="this.blur();">off</div>
|
||||
<div class="button" keymapMode="react" tabindex="0" onclick="this.blur();">react</div>
|
||||
<div class="button" keymapMode="next" tabindex="0" onclick="this.blur();">next</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" onclick="this.blur();">1</div>
|
||||
<div class="button" fontsize="125" tabindex="0" onclick="this.blur();">1.25</div>
|
||||
<div class="button" fontsize="15" tabindex="0" onclick="this.blur();">1.5</div>
|
||||
<div class="button" fontsize="2" tabindex="0" onclick="this.blur();">2</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section keymapLayout">
|
||||
<h1>keymap layout</h1>
|
||||
<div class="buttons">
|
||||
</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" onclick="this.blur();">1</div>
|
||||
<div class="button" fontsize="125" tabindex="0" onclick="this.blur();">1.25</div>
|
||||
<div class="button" fontsize="15" tabindex="0" onclick="this.blur();">1.5</div>
|
||||
<div class="button" fontsize="2" tabindex="0" onclick="this.blur();">2</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section fontFamily">
|
||||
<h1>font family</h1>
|
||||
<!-- <div class="text">Change the font family for the site</div> -->
|
||||
<div class="buttons">
|
||||
<div class="section fontFamily">
|
||||
<h1>font family</h1>
|
||||
<!-- <div class="text">Change the font family for the site</div> -->
|
||||
<div class="buttons">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section flipTestColors">
|
||||
<h1>flip test colors</h1>
|
||||
<div class="text">By default, typed text is brighter than the future text. When enabled, the colors will be
|
||||
flipped
|
||||
and the future text will be brighter than the already typed text.
|
||||
<div class="section flipTestColors">
|
||||
<h1>flip test colors</h1>
|
||||
<div class="text">By default, typed text is brighter than the future text. When enabled, the colors will be
|
||||
flipped
|
||||
and the future text will be brighter than the already typed text.
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="button off" tabindex="0" onclick="this.blur();">off</div>
|
||||
<div class="button on" tabindex="0" onclick="this.blur();">on</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="button off" tabindex="0" onclick="this.blur();">off</div>
|
||||
<div class="button on" tabindex="0" onclick="this.blur();">on</div>
|
||||
<div class="section colorfulMode">
|
||||
<h1>colorful mode</h1>
|
||||
<div class="text">
|
||||
When enabled, the test words will use the main color, instead of the text color, making the website more
|
||||
colorful.
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="button off" tabindex="0" onclick="this.blur();">off</div>
|
||||
<div class="button on" tabindex="0" onclick="this.blur();">on</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section colorfulMode">
|
||||
<h1>colorful mode</h1>
|
||||
<div class="text">
|
||||
When enabled, the test words will use the main color, instead of the text color, making the website more
|
||||
colorful.
|
||||
<div class="section randomTheme">
|
||||
<h1>randomise theme</h1>
|
||||
<div class="text">
|
||||
After completing a test, the theme will be set to a random one. The random themes are not saved to your
|
||||
config.
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="button off" tabindex="0" onclick="this.blur();">off</div>
|
||||
<div class="button on" tabindex="0" onclick="this.blur();">on</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="button off" tabindex="0" onclick="this.blur();">off</div>
|
||||
<div class="button on" tabindex="0" onclick="this.blur();">on</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section randomTheme">
|
||||
<h1>randomise theme</h1>
|
||||
<div class="text">
|
||||
After completing a test, the theme will be set to a random one. The random themes are not saved to your
|
||||
config.
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<div class="button off" tabindex="0" onclick="this.blur();">off</div>
|
||||
<div class="button on" tabindex="0" onclick="this.blur();">on</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section themes">
|
||||
<h1>theme</h1>
|
||||
<div class='tabs'>
|
||||
<button tab="preset" class="tab">preset</button>
|
||||
<button tab="custom" class="tab">custom</button>
|
||||
</div>
|
||||
<div class="tabContainer">
|
||||
<div tabContent="custom" class="tabContent section customTheme hidden">
|
||||
<label class="text">background</label>
|
||||
<span class="colorPicker">
|
||||
<label for="--bg-color">#000000</label>
|
||||
<input type="color" value="#000000" id="--bg-color">
|
||||
</span>
|
||||
<label class="text">main</label>
|
||||
<span class="colorPicker">
|
||||
<label for="--main-color">#000000</label>
|
||||
<input type="color" value="#000000" id="--main-color">
|
||||
</span>
|
||||
<label class="text">caret</label>
|
||||
<span class="colorPicker">
|
||||
<label for="--caret-color">#000000</label>
|
||||
<input type="color" value="#000000" id="--caret-color">
|
||||
</span>
|
||||
<label class="text">sub</label>
|
||||
<span class="colorPicker">
|
||||
<label for="--sub-color">#000000</label>
|
||||
<input type="color" value="#000000" id="--sub-color">
|
||||
</span>
|
||||
<label class="text">text</label>
|
||||
<span class="colorPicker">
|
||||
<label for="--text-color">#000000</label>
|
||||
<input type="color" value="#000000" id="--text-color">
|
||||
</span>
|
||||
<div class="section themes">
|
||||
<h1>theme</h1>
|
||||
<div class='tabs'>
|
||||
<button tab="preset" class="tab">preset</button>
|
||||
<button tab="custom" class="tab">custom</button>
|
||||
</div>
|
||||
<div class="tabContainer">
|
||||
<div tabContent="custom" class="tabContent section customTheme hidden">
|
||||
<label class="text">background</label>
|
||||
<span class="colorPicker">
|
||||
<label for="--bg-color">#000000</label>
|
||||
<input type="color" value="#000000" id="--bg-color">
|
||||
</span>
|
||||
<label class="text">main</label>
|
||||
<span class="colorPicker">
|
||||
<label for="--main-color">#000000</label>
|
||||
<input type="color" value="#000000" id="--main-color">
|
||||
</span>
|
||||
<label class="text">caret</label>
|
||||
<span class="colorPicker">
|
||||
<label for="--caret-color">#000000</label>
|
||||
<input type="color" value="#000000" id="--caret-color">
|
||||
</span>
|
||||
<label class="text">sub</label>
|
||||
<span class="colorPicker">
|
||||
<label for="--sub-color">#000000</label>
|
||||
<input type="color" value="#000000" id="--sub-color">
|
||||
</span>
|
||||
<label class="text">text</label>
|
||||
<span class="colorPicker">
|
||||
<label for="--text-color">#000000</label>
|
||||
<input type="color" value="#000000" id="--text-color">
|
||||
</span>
|
||||
|
||||
<span class="spacer"></span>
|
||||
<span class="spacer"></span>
|
||||
|
||||
<label class="text">error</label>
|
||||
<span class="colorPicker">
|
||||
<label for="--error-color">#000000</label>
|
||||
<input type="color" value="#000000" id="--error-color">
|
||||
</span>
|
||||
<label class="text">extra error</label>
|
||||
<span class="colorPicker">
|
||||
<label for="--error-extra-color">#000000</label>
|
||||
<input type="color" value="#000000" id="--error-extra-color">
|
||||
</span>
|
||||
<label class="text">error</label>
|
||||
<span class="colorPicker">
|
||||
<label for="--error-color">#000000</label>
|
||||
<input type="color" value="#000000" id="--error-color">
|
||||
</span>
|
||||
<label class="text">extra error</label>
|
||||
<span class="colorPicker">
|
||||
<label for="--error-extra-color">#000000</label>
|
||||
<input type="color" value="#000000" id="--error-extra-color">
|
||||
</span>
|
||||
|
||||
<p>colorful mode</p>
|
||||
<p>colorful mode</p>
|
||||
|
||||
<label class="text">error</label>
|
||||
<span class="colorPicker">
|
||||
<!-- Change variable names here -->
|
||||
<label for="--colorful-error-color">#000000</label>
|
||||
<input type="color" value="#000000" id="--colorful-error-color">
|
||||
</span>
|
||||
<label class="text">extra error</label>
|
||||
<span class="colorPicker">
|
||||
<!-- Change variable names here -->
|
||||
<label for="--colorful-error-extra-color">#000000</label>
|
||||
<input type="color" value="#000000" id="--colorful-error-extra-color">
|
||||
</span>
|
||||
<div style="grid-column: 3/5;display:grid;gap:1rem;grid-auto-flow: column;">
|
||||
<div class="button" id="shareCustomThemeButton">share</div>
|
||||
<div class="button saveCustomThemeButton">save</div>
|
||||
<label class="text">error</label>
|
||||
<span class="colorPicker">
|
||||
<!-- Change variable names here -->
|
||||
<label for="--colorful-error-color">#000000</label>
|
||||
<input type="color" value="#000000" id="--colorful-error-color">
|
||||
</span>
|
||||
<label class="text">extra error</label>
|
||||
<span class="colorPicker">
|
||||
<!-- Change variable names here -->
|
||||
<label for="--colorful-error-extra-color">#000000</label>
|
||||
<input type="color" value="#000000" id="--colorful-error-extra-color">
|
||||
</span>
|
||||
<div style="grid-column: 3/5;display:grid;gap:1rem;grid-auto-flow: column;">
|
||||
<div class="button" id="shareCustomThemeButton">share</div>
|
||||
<div class="button saveCustomThemeButton">save</div>
|
||||
</div>
|
||||
</div>
|
||||
<div tabContent="preset" class="tabContent buttons">
|
||||
</div>
|
||||
</div>
|
||||
<div tabContent="preset" class="tabContent buttons">
|
||||
</div>
|
||||
<div class="sectionSpacer"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="sectionGroupTitle" group="hideElements">
|
||||
hide elements
|
||||
<i class="fas fa-chevron-down"></i></div>
|
||||
<div class="settingsGroup hideElements">
|
||||
<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 off" tabindex="0" onclick="this.blur();">hide</div>
|
||||
<div class="button on" tabindex="0" onclick="this.blur();">show</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section timerBar">
|
||||
<h1>timer/progress</h1>
|
||||
<div class="text">Displays a live timer for timed tests and progress for words/custom tests.</div>
|
||||
<div class="buttons">
|
||||
<div class="button off" tabindex="0" onclick="this.blur();">hide</div>
|
||||
<div class="button on" tabindex="0" onclick="this.blur();">show</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section keyTips">
|
||||
<h1>key tips</h1>
|
||||
<div class="text">Shows the keybind tips at the bottom of the page.</div>
|
||||
<div class="buttons">
|
||||
<div class="button off" tabindex="0" onclick="this.blur();">hide</div>
|
||||
<div class="button on" tabindex="0" onclick="this.blur();">show</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section discordDot">
|
||||
<h1>discord dot</h1>
|
||||
<div class="text">Shows the notification dot on the Discord icon.</div>
|
||||
<div class="buttons">
|
||||
<div class="button off" tabindex="0" onclick="this.blur();">hide</div>
|
||||
<div class="button on" tabindex="0" onclick="this.blur();">show</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="sectionSpacer"></div>
|
||||
<div class="sectionGroupTitle">hide elements</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 off" tabindex="0" onclick="this.blur();">hide</div>
|
||||
<div class="button on" tabindex="0" onclick="this.blur();">show</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="username">
|
||||
<input type="text" placeholder="email">
|
||||
<input type="password" placeholder="password" autocomplete="new-password">
|
||||
<input type="password" placeholder="verify password">
|
||||
<div class="button"><i class="fas fa-user-plus"></i>Sign Up</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section timerBar">
|
||||
<h1>timer/progress</h1>
|
||||
<div class="text">Displays a live timer for timed tests and progress for words/custom tests.</div>
|
||||
<div class="buttons">
|
||||
<div class="button off" tabindex="0" onclick="this.blur();">hide</div>
|
||||
<div class="button on" tabindex="0" onclick="this.blur();">show</div>
|
||||
<div class="login side">
|
||||
<div class="title">login</div>
|
||||
<div id="forgotPasswordButton">Forgot password?</div>
|
||||
<form action="">
|
||||
<input type="text" placeholder="email">
|
||||
<input type="password" placeholder="password">
|
||||
<div>
|
||||
<label id="rememberMe"><input type="checkbox" checked>
|
||||
<div class="customCheckbox"></div>Remember me
|
||||
</label>
|
||||
</div>
|
||||
<div class="button"><i class="fas fa-sign-in-alt"></i>Sign In</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section keyTips">
|
||||
<h1>key tips</h1>
|
||||
<div class="text">Shows the keybind tips at the bottom of the page.</div>
|
||||
<div class="buttons">
|
||||
<div class="button off" tabindex="0" onclick="this.blur();">hide</div>
|
||||
<div class="button on" tabindex="0" onclick="this.blur();">show</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section discordDot">
|
||||
<h1>discord dot</h1>
|
||||
<div class="text">Shows the notification dot on the Discord icon.</div>
|
||||
<div class="buttons">
|
||||
<div class="button off" tabindex="0" onclick="this.blur();">hide</div>
|
||||
<div class="button on" tabindex="0" onclick="this.blur();">show</div>
|
||||
</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="username">
|
||||
<input type="text" placeholder="email">
|
||||
<input type="password" placeholder="password" autocomplete="new-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>
|
||||
<div id="forgotPasswordButton">Forgot password?</div>
|
||||
<form action="">
|
||||
<input type="text" placeholder="email">
|
||||
<input type="password" placeholder="password">
|
||||
<div>
|
||||
<label id="rememberMe"><input type="checkbox" checked>
|
||||
<div class="customCheckbox"></div>Remember me
|
||||
</label>
|
||||
</div>
|
||||
<div class="button"><i class="fas fa-sign-in-alt"></i>Sign In</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="page pageAccount hidden">
|
||||
|
|
|
|||
|
|
@ -961,3 +961,43 @@ $(".pageSettings .saveCustomThemeButton").click((e) => {
|
|||
setCustomThemeColors(save);
|
||||
showNotification("Custom theme colors saved", 1000);
|
||||
});
|
||||
|
||||
$(".pageSettings .sectionGroupTitle").click((e) => {
|
||||
let group = $(e.currentTarget).attr("group");
|
||||
$(`.pageSettings .settingsGroup.${group}`)
|
||||
.stop(true, true)
|
||||
.slideToggle(250)
|
||||
.toggleClass("slideup");
|
||||
// $(`.pageSettings .sectionGroupTitle[group=${group}] .fas`).toggleClass(
|
||||
// "rotate"
|
||||
// );
|
||||
if ($(`.pageSettings .settingsGroup.${group}`).hasClass("slideup")) {
|
||||
$(`.pageSettings .sectionGroupTitle[group=${group}] .fas`)
|
||||
.stop(true, true)
|
||||
.animate(
|
||||
{
|
||||
deg: -90,
|
||||
},
|
||||
{
|
||||
duration: 250,
|
||||
step: function (now) {
|
||||
$(this).css({ transform: "rotate(" + now + "deg)" });
|
||||
},
|
||||
}
|
||||
);
|
||||
} else {
|
||||
$(`.pageSettings .sectionGroupTitle[group=${group}] .fas`)
|
||||
.stop(true, true)
|
||||
.animate(
|
||||
{
|
||||
deg: 0,
|
||||
},
|
||||
{
|
||||
duration: 250,
|
||||
step: function (now) {
|
||||
$(this).css({ transform: "rotate(" + now + "deg)" });
|
||||
},
|
||||
}
|
||||
);
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue