g
This commit is contained in:
st5 committed
1 parent
25dd6281ce
commit
7bf520096e
5 files changed
+1036
-124
No files matched your search
+79
-42
@@ -3,7 +3,8 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>typeup</title>
|
||||
<title>speedcode</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
@@ -13,51 +14,50 @@
|
||||
<div class="head-actions">
|
||||
<a href="stats.html" class="btn btn-ghost">stats</a>
|
||||
<button id="settingsBtn" class="btn btn-ghost" type="button">settings</button>
|
||||
<button id="newRoundBtn" class="btn" type="button">reset</button>
|
||||
<button id="newRoundBtn" class="btn" type="button">reset prompt</button>
|
||||
</div>
|
||||
<div class="tab-switch head-tabs" role="tablist" aria-label="main tabs">
|
||||
<button id="tabTypeBtn" class="tab-btn active" type="button" role="tab" aria-selected="true">type</button>
|
||||
<button id="tabPerksBtn" class="tab-btn" type="button" role="tab" aria-selected="false">perks</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="stats-grid">
|
||||
<article class="stat-card"><p>wpm</p><strong id="wpm">0</strong></article>
|
||||
<article class="stat-card"><p>accuracy</p><strong id="accuracy">100%</strong></article>
|
||||
<article class="stat-card"><p>combo</p><strong id="combo">x0</strong></article>
|
||||
<article class="stat-card"><p>time</p><strong id="time">60s</strong></article>
|
||||
</div>
|
||||
<section id="typeTab" class="side-tab-panel" role="tabpanel">
|
||||
<section class="profile">
|
||||
<h2 id="profileTitle">rookie typer</h2>
|
||||
<div class="level-line"><span id="shardText">shards: 0</span></div>
|
||||
</section>
|
||||
|
||||
<section class="text-shell" id="textDisplay" aria-live="polite"></section>
|
||||
<div class="stats-grid">
|
||||
<article class="stat-card"><p>wpm</p><strong id="wpm">0</strong></article>
|
||||
<article class="stat-card"><p>accuracy</p><strong id="accuracy">100%</strong></article>
|
||||
<article class="stat-card"><p>combo</p><strong id="combo">x0</strong></article>
|
||||
<article class="stat-card"><p>time</p><strong id="time">60s</strong></article>
|
||||
</div>
|
||||
|
||||
<label class="input-wrap" for="typeInput">
|
||||
<input
|
||||
id="typeInput"
|
||||
type="text"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
spellcheck="false"
|
||||
placeholder="start typing to begin..."
|
||||
/>
|
||||
</label>
|
||||
<div id="codeEditor" class="code-editor" aria-label="formatted code snippet and typing target">
|
||||
<pre class="code-pre"><code id="codeSnippet" class="language-plaintext"></code></pre>
|
||||
</div>
|
||||
<p id="snippetLanguage" class="setting-note">language: loading...</p>
|
||||
<p id="snippetSource" class="setting-note">source: loading...</p>
|
||||
|
||||
<section class="results" id="results" hidden>
|
||||
<h2>round complete!</h2>
|
||||
<p id="resultsSummary"></p>
|
||||
<button id="playAgainBtn" class="btn">go again</button>
|
||||
<section class="results" id="results" hidden>
|
||||
<h2>round complete!</h2>
|
||||
<p id="resultsSummary"></p>
|
||||
<button id="playAgainBtn" class="btn">go again</button>
|
||||
</section>
|
||||
|
||||
<section class="xp-dock" aria-label="level progress">
|
||||
<div class="level-line"><span id="levelText" style="font-weight: bold;">level 1</span><ul></ul><span id="xpText">0 / 120 xp</span></div>
|
||||
<div class="xp-bar"><div id="xpFill"></div></div>
|
||||
<p id="xpGain" class="xp-gain">+0 xp last round</p>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<aside class="panel panel-side">
|
||||
<section class="profile">
|
||||
<h2 id="profileTitle">rookie typer</h2>
|
||||
<div class="level-line"><span id="levelText">level 1</span><span id="xpText">0 / 120 xp</span></div>
|
||||
<div class="level-line"><span id="shardText">shards: 0</span></div>
|
||||
<div class="xp-bar"><div id="xpFill"></div></div>
|
||||
<p id="xpGain" class="xp-gain">+0 xp last round</p>
|
||||
</section>
|
||||
<ul></ul>
|
||||
<section>
|
||||
<section id="perksTab" class="side-tab-panel" role="tabpanel" hidden>
|
||||
<div id="perks" class="perks"></div>
|
||||
</section>
|
||||
</aside>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div id="settingsModal" class="modal" hidden>
|
||||
@@ -69,14 +69,22 @@
|
||||
<div class="settings-grid">
|
||||
<label for="profileName">name</label>
|
||||
<input id="profileName" type="text" maxlength="24" placeholder="enter your name..." />
|
||||
<label for="difficultySelect">difficulty</label>
|
||||
<label for="difficultySelect">experience level</label>
|
||||
<select id="difficultySelect">
|
||||
<option value="easy">easy</option>
|
||||
<option value="normal" selected>normal</option>
|
||||
<option value="hard">hard</option>
|
||||
<option value="expert">expert</option>
|
||||
<option value="frontend">frontend</option>
|
||||
<option value="backend">backend</option>
|
||||
<option value="systems">systems programming</option>
|
||||
<option value="full-stack" selected>full-stack</option>
|
||||
</select>
|
||||
<p id="difficultyBonus" class="setting-note">xp bonus: x1.00</p>
|
||||
<label for="challengeSelect">challenge level</label>
|
||||
<select id="challengeSelect">
|
||||
<option value="casual">casual</option>
|
||||
<option value="standard" selected>standard</option>
|
||||
<option value="intense">intense</option>
|
||||
<option value="nightmare">nightmare</option>
|
||||
</select>
|
||||
<p id="difficultyBonus" class="setting-note">track xp bonus: x1.00</p>
|
||||
<p id="challengeBonus" class="setting-note">challenge xp bonus: x1.00 · round: 60s · snippet size: 100%</p>
|
||||
<button id="resetProgressBtn" class="btn btn-ghost" type="button">reset save</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -93,6 +101,35 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="levelUpOverlay" class="levelup-overlay" hidden aria-hidden="true">
|
||||
<div class="levelup-grid"></div>
|
||||
<div class="levelup-glow"></div>
|
||||
<div class="levelup-shockwave"></div>
|
||||
<div class="levelup-particles" aria-hidden="true">
|
||||
<span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
|
||||
</div>
|
||||
<div class="levelup-core">
|
||||
<p id="levelUpKicker" class="levelup-kicker">milestone unlocked!</p>
|
||||
<h2 id="levelUpText">level up!</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-typescript.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-json.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markup.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-c.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-cpp.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-rust.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-go.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-java.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markup-templating.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-php.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-sql.min.js"></script>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user