This commit is contained in:
Benjamin Falch
428
frontend/src/html/pages/account.html
Normal file
428
frontend/src/html/pages/account.html
Normal file
@@ -0,0 +1,428 @@
|
||||
<div class="page pageAccount full-width hidden" id="pageAccount">
|
||||
<div class="content full-width content-grid">
|
||||
<mount data-component="myprofile"></mount>
|
||||
|
||||
<div id="ad-account-1-wrapper" class="ad full-width advertisement ad-h">
|
||||
<div class="icon"><i class="fas fa-ad"></i></div>
|
||||
<div id="ad-account-1"></div>
|
||||
</div>
|
||||
<div id="ad-account-1-small-wrapper" class="ad advertisement ad-h-s">
|
||||
<div class="icon small"><i class="fas fa-ad"></i></div>
|
||||
<div id="ad-account-1-small"></div>
|
||||
</div>
|
||||
|
||||
<div class="group resultBatches hidden">
|
||||
<!-- <div class="title">result history</div> -->
|
||||
<div class="bars">
|
||||
<div class="leftText downloaded">Result history:</div>
|
||||
<div class="bar downloaded">
|
||||
<div class="fill"></div>
|
||||
</div>
|
||||
<div class="rightText downloaded">-</div>
|
||||
<div class="leftText limit">Result limit:</div>
|
||||
<div class="bar limit">
|
||||
<div class="fill"></div>
|
||||
<!-- <div class="indicator">
|
||||
<div class="text">completed tests</div>
|
||||
<div class="line"></div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="rightText limit">-</div>
|
||||
</div>
|
||||
<div class="text"></div>
|
||||
<button class="loadMoreResults">load more</button>
|
||||
</div>
|
||||
|
||||
<div class="group presetFilterButtons hidden">
|
||||
<div class="buttonsAndTitle">
|
||||
<div class="title">
|
||||
<i class="fas fa-sliders-h"></i>
|
||||
filter presets
|
||||
</div>
|
||||
<div class="buttons filterBtns" style="grid-column: 1/3"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group topFilters">
|
||||
<!-- <div
|
||||
class="button"
|
||||
id="currentConfigFilter"
|
||||
style="grid-column: 1/3;"
|
||||
>
|
||||
set filters to current settings
|
||||
</div> -->
|
||||
<div class="buttonsAndTitle" style="grid-column: 1/3">
|
||||
<div class="title">
|
||||
<i class="fas fa-filter"></i>
|
||||
filters
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button class="allFilters">all</button>
|
||||
<button class="currentConfigFilter">current settings</button>
|
||||
<button class="toggleAdvancedFilters">advanced</button>
|
||||
<button class="createFilterPresetBtn">save as preset</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="buttonsAndTitle testDate"
|
||||
style="grid-column: 1/3; margin-top: 1rem"
|
||||
>
|
||||
<!-- <div class="title">date</div> -->
|
||||
<div class="buttons filterGroup" group="date">
|
||||
<button filter="last_day">last day</button>
|
||||
<button filter="last_week">last week</button>
|
||||
<button filter="last_month">last month</button>
|
||||
<button filter="last_3months">last 3 months</button>
|
||||
<button filter="all">all time</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group filterButtons hidden">
|
||||
<div class="buttonsAndTitle" style="grid-column: 1/-1">
|
||||
<div class="title">
|
||||
<i class="fas fa-tools"></i>
|
||||
advanced filters
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button class="noFilters">clear filters</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttonsAndTitle">
|
||||
<div class="title">
|
||||
<i class="fas fa-star"></i>
|
||||
difficulty
|
||||
</div>
|
||||
<div class="buttons filterGroup" group="difficulty">
|
||||
<button filter="normal">normal</button>
|
||||
<button filter="expert">expert</button>
|
||||
<button filter="master">master</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttonsAndTitle">
|
||||
<div class="title">
|
||||
<i class="fas fa-crown"></i>
|
||||
personal best
|
||||
</div>
|
||||
<div class="buttons filterGroup" group="pb">
|
||||
<button filter="no">no</button>
|
||||
<button filter="yes">yes</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttonsAndTitle">
|
||||
<div class="title">
|
||||
<i class="fas fa fa-bars"></i>
|
||||
mode
|
||||
</div>
|
||||
<div class="buttons filterGroup" group="mode">
|
||||
<button filter="words">words</button>
|
||||
<button filter="time">time</button>
|
||||
<button filter="quote">quote</button>
|
||||
<button filter="zen">zen</button>
|
||||
<button filter="custom">custom</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttonsAndTitle">
|
||||
<div class="title">
|
||||
<i class="fas fa-quote-right"></i>
|
||||
quote length
|
||||
</div>
|
||||
<div class="buttons filterGroup" group="quoteLength">
|
||||
<button filter="short">short</button>
|
||||
<button filter="medium">medium</button>
|
||||
<button filter="long">long</button>
|
||||
<button filter="thicc">thicc</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttonsAndTitle">
|
||||
<div class="title">
|
||||
<i class="fas fa-font"></i>
|
||||
words
|
||||
</div>
|
||||
<div class="buttons filterGroup" group="words">
|
||||
<button filter="10">10</button>
|
||||
<button filter="25">25</button>
|
||||
<button filter="50">50</button>
|
||||
<button filter="100">100</button>
|
||||
<button filter="custom">custom</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttonsAndTitle">
|
||||
<div class="title">
|
||||
<i class="fas fa-clock"></i>
|
||||
time
|
||||
</div>
|
||||
<div class="buttons filterGroup" group="time">
|
||||
<button filter="15">15</button>
|
||||
<button filter="30">30</button>
|
||||
<button filter="60">60</button>
|
||||
<button filter="120">120</button>
|
||||
<button filter="custom">custom</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttonsAndTitle">
|
||||
<div class="title">
|
||||
<i class="fas fa-at"></i>
|
||||
punctuation
|
||||
</div>
|
||||
<div class="buttons filterGroup" group="punctuation">
|
||||
<button filter="on">on</button>
|
||||
<button filter="off">off</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttonsAndTitle">
|
||||
<div class="title">
|
||||
<i class="fas fa-hashtag"></i>
|
||||
numbers
|
||||
</div>
|
||||
<div class="buttons filterGroup" group="numbers">
|
||||
<button filter="on">on</button>
|
||||
<button filter="off">off</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tripleSelectsColumn">
|
||||
<div class="buttonsAndTitle tags">
|
||||
<div class="title">
|
||||
<i class="fas fa-tag"></i>
|
||||
tags
|
||||
</div>
|
||||
<div class="select filterGroup" group="tags">
|
||||
<select
|
||||
class="tagsSelect"
|
||||
group="tags"
|
||||
placeholder="select a tag"
|
||||
multiple
|
||||
></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttonsAndTitle funbox">
|
||||
<div class="title">
|
||||
<i class="fas fa-gamepad"></i>
|
||||
funbox
|
||||
</div>
|
||||
<div class="select filterGroup" group="funbox">
|
||||
<select
|
||||
class="funboxSelect"
|
||||
group="funbox"
|
||||
placeholder="select a funbox"
|
||||
multiple
|
||||
></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="buttonsAndTitle languages">
|
||||
<div class="title">
|
||||
<i class="fas fa-globe-americas"></i>
|
||||
language
|
||||
</div>
|
||||
<div class="select filterGroup" group="language">
|
||||
<select
|
||||
class="languageSelect"
|
||||
group="language"
|
||||
placeholder="select a language"
|
||||
multiple
|
||||
></select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group noDataError hidden">
|
||||
No data found. Check your filters.
|
||||
</div>
|
||||
<div class="group chart">
|
||||
<!-- <div class="chartPreloader">
|
||||
<i class="fas fa-fw fa-spin fa-circle-notch"></i>
|
||||
</div> -->
|
||||
<div class="above"></div>
|
||||
<div class="chart">
|
||||
<canvas id="accountHistoryChart"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="below">
|
||||
<div class="text"></div>
|
||||
<div class="buttons">
|
||||
<button class="toggleResultsOnChart">
|
||||
<i class="fas fa-tachometer-alt"></i>
|
||||
Speed
|
||||
</button>
|
||||
<button class="toggleAccuracyOnChart">
|
||||
<i class="fas fa-bullseye"></i>
|
||||
Accuracy
|
||||
</button>
|
||||
<button class="toggleAverage10OnChart">
|
||||
<i class="fas fa-chart-line"></i>
|
||||
Avg of 10
|
||||
</button>
|
||||
<button class="toggleAverage100OnChart">
|
||||
<i class="fas fa-chart-line"></i>
|
||||
Avg of 100
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group histogramChart">
|
||||
<div class="chart" style="height: 200px">
|
||||
<canvas id="accountHistogramChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group dailyActivityChart">
|
||||
<div class="chart" style="height: 200px">
|
||||
<canvas id="accountActivityChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group estimatedWordsTyped">
|
||||
<div class="title">estimated words typed</div>
|
||||
<div class="val">-</div>
|
||||
</div>
|
||||
<div class="triplegroup stats">
|
||||
<div class="group testsStarted">
|
||||
<div class="title">tests started</div>
|
||||
<div class="val">-</div>
|
||||
</div>
|
||||
<div class="group testsCompleted">
|
||||
<div class="title">
|
||||
tests completed
|
||||
<span
|
||||
data-balloon-length="xlarge"
|
||||
data-balloon-pos="up"
|
||||
aria-label="Due to the increasing number of results in the database, you can now only see your last 1000 results in detail. Total time spent typing, started and completed tests stats will still be up to date at the top of the page, above the filters."
|
||||
role="alertdialog"
|
||||
>
|
||||
<i class="fas fa-question-circle"></i>
|
||||
</span>
|
||||
</div>
|
||||
<div class="val">-</div>
|
||||
<div class="avgres">-</div>
|
||||
</div>
|
||||
<div class="group timeTotalFiltered">
|
||||
<div class="title">time typing</div>
|
||||
<div class="val">-</div>
|
||||
</div>
|
||||
<div class="group highestWpm">
|
||||
<div class="title">highest wpm</div>
|
||||
<div class="val">-</div>
|
||||
<div class="mode"></div>
|
||||
</div>
|
||||
<div class="group averageWpm">
|
||||
<div class="title">average wpm</div>
|
||||
<div class="val">-</div>
|
||||
</div>
|
||||
<div class="group averageWpm10">
|
||||
<div class="title">
|
||||
average wpm
|
||||
<br />
|
||||
(last 10 tests)
|
||||
</div>
|
||||
<div class="val">-</div>
|
||||
</div>
|
||||
|
||||
<div class="group highestRaw">
|
||||
<div class="title">highest raw wpm</div>
|
||||
<div class="val">-</div>
|
||||
<div class="mode"></div>
|
||||
</div>
|
||||
<div class="group averageRaw">
|
||||
<div class="title">average raw wpm</div>
|
||||
<div class="val">-</div>
|
||||
</div>
|
||||
<div class="group averageRaw10">
|
||||
<div class="title">
|
||||
average raw wpm
|
||||
<br />
|
||||
(last 10 tests)
|
||||
</div>
|
||||
<div class="val">-</div>
|
||||
</div>
|
||||
<div class="group highestAcc">
|
||||
<div class="title">highest accuracy</div>
|
||||
<div class="val">-</div>
|
||||
</div>
|
||||
<div class="group avgAcc">
|
||||
<div class="title">avg accuracy</div>
|
||||
<div class="val">-</div>
|
||||
</div>
|
||||
<div class="group avgAcc10">
|
||||
<div class="title">
|
||||
avg accuracy
|
||||
<br />
|
||||
(last 10 tests)
|
||||
</div>
|
||||
<div class="val">-</div>
|
||||
</div>
|
||||
<div class="group highestCons">
|
||||
<div class="title">highest consistency</div>
|
||||
<div class="val">-</div>
|
||||
</div>
|
||||
<div class="group avgCons">
|
||||
<div class="title">avg consistency</div>
|
||||
<div class="val">-</div>
|
||||
</div>
|
||||
<div class="group avgCons10">
|
||||
<div class="title">
|
||||
avg consistency
|
||||
<br />
|
||||
(last 10 tests)
|
||||
</div>
|
||||
<div class="val">-</div>
|
||||
</div>
|
||||
<!-- <div class="group favouriteTest">
|
||||
<div class="title">favourite test</div>
|
||||
<div class="val">words 10</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="group aboveHistory">
|
||||
<div class="button exportCSV">
|
||||
<i class="fas fa-file-csv"></i>
|
||||
Export CSV
|
||||
</div>
|
||||
</div>
|
||||
<div id="ad-account-2-wrapper" class="ad full-width advertisement ad-h">
|
||||
<div class="icon"><i class="fas fa-ad"></i></div>
|
||||
<div id="ad-account-2"></div>
|
||||
</div>
|
||||
<div id="ad-account-2-small-wrapper" class="ad advertisement ad-h-s">
|
||||
<div class="icon small"><i class="fas fa-ad"></i></div>
|
||||
<div id="ad-account-2-small"></div>
|
||||
</div>
|
||||
<div class="group history">
|
||||
<!-- <div class="title">result history</div> -->
|
||||
<table width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<td></td>
|
||||
<td data-sort-property="wpm" data-sort-default-direction="desc">
|
||||
wpm
|
||||
</td>
|
||||
<td data-sort-property="rawWpm" data-sort-default-direction="desc">
|
||||
raw
|
||||
</td>
|
||||
<td data-sort-property="acc" data-sort-default-direction="desc">
|
||||
accuracy
|
||||
</td>
|
||||
<td
|
||||
data-sort-property="consistency"
|
||||
data-sort-default-direction="desc"
|
||||
>
|
||||
consistency
|
||||
</td>
|
||||
<td
|
||||
aria-label="correct/incorrect/extra/missed"
|
||||
data-balloon-pos="up"
|
||||
>
|
||||
chars
|
||||
</td>
|
||||
<td>mode</td>
|
||||
<!-- <td>punctuation</td> -->
|
||||
<td>info</td>
|
||||
<td>tags</td>
|
||||
<td
|
||||
data-sort-property="timestamp"
|
||||
data-sort-default-direction="desc"
|
||||
>
|
||||
date
|
||||
</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
<div class="loadMoreButton">load more</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user