src-options/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<form id="stutter-form">
<h1>Stutter Configuration</h1>
<button class="submit" type="submit">Save</button>
<button id="reset" class="reset" type="button">Reset to Defaults</button>
<p>The overall speed of Stutter is controlled by the <strong><abbr title="Words Per Minute">WPM</abbr></strong> rate. Most users will find this number comfortable in the 600-800 range after a few minutes of practice. Speeds of up to 1200 can be achieved with regular practice. (Default 400wpm)</p>
<label>
<span class="attribute">WPM</span>
<input type="text" id="wpm">
</label>
<label>
<span>Theme</span>
<select id="theme">
<option value="default" selected>Default</option>
<option value="light">Light</option>
<option value="skeletor">Skeletor</option>
<option value="terminal">Terminal</option>
<option value="gameboy">Gameboy</option>
<option value="hacktoberfest">Hacktoberfest</option>
<option value="solarized">Solarized</option>
<option value="nord">Nord</option>
</select>
</label>
<p>Some academic studies show increased comprehension when a 'flanker' word is shown to the right of the word being read via RSVP. By peeking at the next word you may find a benefit, or you may find it distracting. You can toggle the flanker on with this setting.</p>
<label>
<span class="attribute">Enable Flanker</span>
<input type="checkbox" id="showFlankers" value="enable">
</label>
<p>When beginning to Stutter, the <strong>Slow Start Count</strong> will ease you in by slowly ramping up to full speed over this many words. (Default 5)</p>
<label>
<span class="attribute">Slow Start Count</span>
<input type="text" id="slowStartCount">
</label>
<p>Any word that exceeds this length will be broken into parts and served hyphenated. (You will need to restart any running Stutters for changes to take effect.) (Default 13)</p>
<label>
<span class="attribute">Maximum Word Length</span>
<input type="text" id="maxWordLength">
</label>
<p>The word count defined here is how many words will be skipped over when seeking forward or backwards using the hotkeys (Alt+Left, Alt+Right). (Default 10)</p>
<label>
<span class="attribute">Skip Words Count</span>
<input type="text" id="skipCount">
</label>
<p>The <strong>Delay</strong> settings are speed multipliers. If a word normally were to display for one second, a multiplier of 1.5 would make that 1.5 seconds. The defaults are <a href="https://www.tandfonline.com/doi/abs/10.1080/01449290110069400">designed to feel natural</a>.</p>
<label>
<span class="attribute">Sentence Delay (.,!?) (Default 2.5)</span>
<input type="text" id="sentenceDelay">
</label>
<label>
<span class="attribute">Other Punctuation Delay (Default 1.5)</span>
<input type="text" id="otherPuncDelay" >
</label>
<label>
<span class="attribute">Short Word Delay (Default 1.3)</span>
<input type="text" id="shortWordDelay">
</label>
<label>
<span class="attribute">Long Word Delay (Default 1.4)</span>
<input type="text" id="longWordDelay">
</label>
<label>
<span class="attribute">Numeric Delay (Default 1.8)</span>
<input type="text" id="numericDelay">
</label>
<p class="keybind-label">Keybindings</p>
<p>To change a binding click on a row below, press the key combination you prefer, then save.</p>
<div class="keybind" id="keybindPause">
<span class="attribute">Pause</span>
<div>
<input type="text" class="modifier" id="keybindPauseModifier" readonly>
<input type="text" class="key" id="keybindPauseKey" readonly>
</div>
</div>
<div class="keybind" id="keybindRestart">
<span class="attribute">Restart</span>
<div>
<input type="text" class="modifier" id="keybindRestartModifier" readonly>
<input type="text" class="key" id="keybindRestartKey" readonly>
</div>
</div>
<div class="keybind" id="keybindPrevious">
<span class="attribute">Skip Backwards</span>
<div>
<input type="text" class="modifier" id="keybindPreviousModifier" readonly>
<input type="text" class="key" id="keybindPreviousKey" readonly>
</div>
</div>
<div class="keybind" id="keybindForward">
<span class="attribute">Skip Forward</span>
<div>
<input type="text" class="modifier" id="keybindForwardModifier" readonly>
<input type="text" class="key" id="keybindForwardKey" readonly>
</div>
</div>
<div class="keybind" id="keybindSpeedUp">
<span class="attribute">WPM Speed Up</span>
<div>
<input type="text" class="modifier" id="keybindSpeedUpModifier" readonly>
<input type="text" class="key" id="keybindSpeedUpKey" readonly>
</div>
</div>
<div class="keybind" id="keybindSpeedDown">
<span class="attribute">WPM Speed Down</span>
<div>
<input type="text" class="modifier" id="keybindSpeedDownModifier" readonly>
<input type="text" class="key" id="keybindSpeedDownKey" readonly>
</div>
</div>
<div class="keybind" id="keybindClose">
<span class="attribute">Close Stutter</span>
<div>
<input type="text" class="modifier" id="keybindCloseModifier" readonly>
<input type="text" class="key" id="keybindCloseKey" readonly>
</div>
</div>
</form>
</body>
</html>